@epam/uui 4.9.0 → 4.9.2

package/index.js

@@ -651,7 +651,7 @@ function __classPrivateFieldIn(state, receiver) {
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"line-height-12":"_129wH","lineHeight12":"_129wH","line-height-18":"_2Zlon","lineHeight18":"_2Zlon","line-height-24":"_1hxGv","lineHeight24":"_1hxGv","line-height-30":"_31Blu","lineHeight30":"_31Blu","font-size-10":"_2u7SQ","fontSize10":"_2u7SQ","font-size-12":"LHQtu","fontSize12":"LHQtu","font-size-14":"_13Itg","fontSize14":"_13Itg","font-size-16":"_14tNx","fontSize16":"_14tNx","font-size-18":"GBU6i","fontSize18":"GBU6i","font-size-24":"_3_hR8","fontSize24":"_3_hR8","v-padding-2":"tM3Yh","vPadding2":"tM3Yh","v-padding-3":"_149yi","vPadding3":"_149yi","v-padding-5":"_1mXLF","vPadding5":"_1mXLF","v-padding-6":"_3ji2s","vPadding6":"_3ji2s","v-padding-8":"_3bQWF","vPadding8":"_3bQWF","v-padding-9":"_3cKzE","vPadding9":"_3cKzE","v-padding-11":"_1xtHW","vPadding11":"_1xtHW","v-padding-12":"_15t3R","vPadding12":"_15t3R","v-padding-14":"_8eSkr","vPadding14":"_8eSkr","v-padding-15":"_2B-Rq","vPadding15":"_2B-Rq","v-padding-17":"_3DAxK","vPadding17":"_3DAxK","v-padding-18":"_2d0Ib","vPadding18":"_2d0Ib","v-padding-23":"_3qw5s","vPadding23":"_3qw5s","v-padding-24":"_3LqrK","vPadding24":"_3LqrK"};
+module.exports = {"line-height-12":"_1BWUi","lineHeight12":"_1BWUi","line-height-18":"_2rCdC","lineHeight18":"_2rCdC","line-height-24":"_4l1ER","lineHeight24":"_4l1ER","line-height-30":"_3L3a5","lineHeight30":"_3L3a5","font-size-10":"_3oykf","fontSize10":"_3oykf","font-size-12":"_29D_2","fontSize12":"_29D_2","font-size-14":"_16dun","fontSize14":"_16dun","font-size-16":"_3CzaZ","fontSize16":"_3CzaZ","font-size-18":"advzm","fontSize18":"advzm","font-size-24":"Ygp6M","fontSize24":"Ygp6M","v-padding-2":"_1ulgy","vPadding2":"_1ulgy","v-padding-3":"_1ryF-","vPadding3":"_1ryF-","v-padding-5":"SQ42z","vPadding5":"SQ42z","v-padding-6":"_1PkOW","vPadding6":"_1PkOW","v-padding-8":"_2NbKC","vPadding8":"_2NbKC","v-padding-9":"mc7wV","vPadding9":"mc7wV","v-padding-11":"_1Tnny","vPadding11":"_1Tnny","v-padding-12":"_1cNqs","vPadding12":"_1cNqs","v-padding-14":"_2-CC2","vPadding14":"_2-CC2","v-padding-15":"_3Ob6K","vPadding15":"_3Ob6K","v-padding-17":"_3qISl","vPadding17":"_3qISl","v-padding-18":"_1HKVG","vPadding18":"_1HKVG","v-padding-23":"_1ymUS","vPadding23":"_1ymUS","v-padding-24":"_35rL7","vPadding24":"_35rL7"};
 
 /***/ }),
 
@@ -905,7 +905,7 @@ module.exports = {"line-height-12":"_129wH","lineHeight12":"_129wH","line-height
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2esRM","mode-solid":"_1cJXd","modeSolid":"_1cJXd","mode-outline":"_2AiE1","modeOutline":"_2AiE1","mode-none":"_3kF_i","modeNone":"_3kF_i","mode-ghost":"_16zcg","modeGhost":"_16zcg","size-24":"OFy-c","size24":"OFy-c","size-30":"_1qv6z","size30":"_1qv6z","size-36":"_3yFGo","size36":"_3yFGo","size-42":"_3tBo_","size42":"_3tBo_","size-48":"r9Kq2","size48":"r9Kq2"};
+module.exports = {"root":"_3rvRF","mode-solid":"_3DGr1","modeSolid":"_3DGr1","mode-outline":"_2Ec4t","modeOutline":"_2Ec4t","mode-none":"_3PLgc","modeNone":"_3PLgc","mode-ghost":"_1_Hu1","modeGhost":"_1_Hu1","size-24":"_9zGZK","size24":"_9zGZK","size-30":"_2Ngbd","size30":"_2Ngbd","size-36":"Wgm7Y","size36":"Wgm7Y","size-42":"WDzL7","size42":"WDzL7","size-48":"_3b2hN","size48":"_3b2hN"};
 
 /***/ }),
 
@@ -917,31 +917,31 @@ module.exports = {"root":"_2esRM","mode-solid":"_1cJXd","modeSolid":"_1cJXd","mo
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.applyButtonMods = exports.allButtonColors = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const 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'];
-const defaultSize = '36';
-function applyButtonMods(mods) {
-    return [
-        'button-vars',
-        `button-color-${mods.color || 'primary'}`,
-        css.root,
-        css[`size-${mods.size || defaultSize}`],
-        css[`mode-${mods.mode || 'solid'}`],
-    ];
-}
-exports.applyButtonMods = applyButtonMods;
-exports.Button = (0, uui_core_1.withMods)(uui_components_1.Button, applyButtonMods, (props) => ({
-    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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const 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'];
+const defaultSize = '36';
+function applyButtonMods(mods) {
+    return [
+        'button-vars',
+        `button-color-${mods.color || 'primary'}`,
+        css.root,
+        css[`size-${mods.size || defaultSize}`],
+        css[`mode-${mods.mode || 'solid'}`],
+    ];
+}
+exports.applyButtonMods = applyButtonMods;
+exports.Button = (0, uui_core_1.withMods)(uui_components_1.Button, applyButtonMods, (props) => ({
+    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[props.size || defaultSize].clear,
+}));
 
 
 /***/ }),
@@ -954,7 +954,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":"R4vSy"};
+module.exports = {"root":"_19PD4"};
 
 /***/ }),
 
@@ -966,22 +966,22 @@ module.exports = {"root":"R4vSy"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.allIconColors = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const 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");
-const 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-${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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const 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");
+const 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-${mods.color || 'default'}`,
+        css.root,
+    ];
+}
+exports.IconButton = (0, uui_core_1.withMods)(uui_components_1.IconButton, applyIconButtonMods);
 
 
 /***/ }),
@@ -994,7 +994,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":"_3D2cP","size-18":"vW0wM","size18":"vW0wM","size-24":"_3RMWF","size24":"_3RMWF","size-30":"_2-v4N","size30":"_2-v4N","size-36":"_1zswv","size36":"_1zswv","size-42":"_1BnJD","size42":"_1BnJD","size-48":"_3LDtU","size48":"_3LDtU"};
+module.exports = {"root":"_24Y1P","size-18":"guBp7","size18":"guBp7","size-24":"kRdZu","size24":"kRdZu","size-30":"_3bTLY","size30":"_3bTLY","size-36":"_3k9Bi","size36":"_3k9Bi","size-42":"_1bjFh","size42":"_1bjFh","size-48":"_1YTEV","size48":"_1YTEV"};
 
 /***/ }),
 
@@ -1006,29 +1006,29 @@ module.exports = {"root":"_3D2cP","size-18":"vW0wM","size18":"vW0wM","size-24":"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
-const 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");
-const defaultSize = '36';
-function applyLinkButtonMods(mods) {
-    return [
-        'link-button-vars',
-        css.root,
-        css['size-' + (mods.size || defaultSize)],
-        ...(0, helper_1.getIconClass)(mods),
-    ];
-}
-exports.LinkButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyLinkButtonMods, (props) => ({
-    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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
+const 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");
+const defaultSize = '36';
+function applyLinkButtonMods(mods) {
+    return [
+        'link-button-vars',
+        css.root,
+        css['size-' + (mods.size || defaultSize)],
+        ...(0, helper_1.getIconClass)(mods),
+    ];
+}
+exports.LinkButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyLinkButtonMods, (props) => ({
+    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[props.size || defaultSize].clear,
+}));
 
 
 /***/ }),
@@ -1041,7 +1041,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":"_2QIsK","uui-notification":"_1EXcr","uuiNotification":"_1EXcr","size-36":"_3V1yR","size36":"_3V1yR","size-48":"_3pUQx","size48":"_3pUQx","size-60":"cjk6x","size60":"cjk6x"};
+module.exports = {"root":"YL-Tk","uui-notification":"_3e5Bw","uuiNotification":"_3e5Bw","size-36":"_1-SRr","size36":"_1-SRr","size-48":"_3c9XY","size48":"_3c9XY","size-60":"_2eOzS","size60":"_2eOzS"};
 
 /***/ }),
 
@@ -1053,26 +1053,26 @@ module.exports = {"root":"_2QIsK","uui-notification":"_1EXcr","uuiNotification":
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabButton = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
-__webpack_require__(/*! ../../assets/styles/variables/buttons/tabButton.scss */ "./assets/styles/variables/buttons/tabButton.scss");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TabButton.scss */ "./components/buttons/TabButton.scss"));
-function applyTabButtonMods(mods) {
-    return [
-        'tab-button-vars',
-        css.root,
-        css['size-' + (mods.size || '48')],
-        mods.withNotify && css.uuiNotification,
-        ...(0, helper_1.getIconClass)(mods),
-    ];
-}
-exports.TabButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyTabButtonMods, props => (Object.assign(Object.assign({ dropdownIcon: icons_1.systemIcons['36'].foldingArrow, clearIcon: icons_1.systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps) })));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabButton = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
+__webpack_require__(/*! ../../assets/styles/variables/buttons/tabButton.scss */ "./assets/styles/variables/buttons/tabButton.scss");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TabButton.scss */ "./components/buttons/TabButton.scss"));
+function applyTabButtonMods(mods) {
+    return [
+        'tab-button-vars',
+        css.root,
+        css['size-' + (mods.size || '48')],
+        mods.withNotify && css.uuiNotification,
+        ...(0, helper_1.getIconClass)(mods),
+    ];
+}
+exports.TabButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyTabButtonMods, props => (Object.assign(Object.assign({ dropdownIcon: icons_1.systemIcons['36'].foldingArrow, clearIcon: icons_1.systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps) })));
 
 
 /***/ }),
@@ -1085,7 +1085,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":"P6p3T"};
+module.exports = {"root":"_3KL61"};
 
 /***/ }),
 
@@ -1097,19 +1097,19 @@ module.exports = {"root":"P6p3T"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTabButton = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const VerticalTabButton_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./VerticalTabButton.scss */ "./components/buttons/VerticalTabButton.scss"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const VerticalTabButton_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./VerticalTabButton.scss */ "./components/buttons/VerticalTabButton.scss"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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);
 
 
 /***/ }),
@@ -1122,29 +1122,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) {
-    let 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) {
+    let 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;
 
 
 /***/ }),
@@ -1157,14 +1157,14 @@ exports.getIconClass = getIconClass;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -1177,18 +1177,18 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -1201,7 +1201,7 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3-JqS","size-18":"_2aevd","size18":"_2aevd","size-12":"_2Blg3","size12":"_2Blg3"};
+module.exports = {"root":"_2b6ZC","size-18":"iyc0I","size18":"iyc0I","size-12":"_23DPP","size12":"_23DPP"};
 
 /***/ }),
 
@@ -1213,30 +1213,30 @@ module.exports = {"root":"_3-JqS","size-18":"_2aevd","size18":"_2aevd","size-12"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.applyCheckboxMods = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Checkbox.scss */ "./components/inputs/Checkbox.scss"));
-const check_12_svg_1 = __webpack_require__(/*! ../../icons/check-12.svg */ "./icons/check-12.svg");
-const check_18_svg_1 = __webpack_require__(/*! ../../icons/check-18.svg */ "./icons/check-18.svg");
-const partly_select_12_svg_1 = __webpack_require__(/*! ../../icons/partly-select-12.svg */ "./icons/partly-select-12.svg");
-const 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, (props) => ({
-    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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Checkbox.scss */ "./components/inputs/Checkbox.scss"));
+const check_12_svg_1 = __webpack_require__(/*! ../../icons/check-12.svg */ "./icons/check-12.svg");
+const check_18_svg_1 = __webpack_require__(/*! ../../icons/check-18.svg */ "./icons/check-18.svg");
+const partly_select_12_svg_1 = __webpack_require__(/*! ../../icons/partly-select-12.svg */ "./icons/partly-select-12.svg");
+const 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, (props) => ({
+    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,
+}));
 
 
 /***/ }),
@@ -1249,7 +1249,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":"_5X06G","size-18":"kFKdK","size18":"kFKdK","size-12":"pDIzq","size12":"pDIzq"};
+module.exports = {"root":"_3z9Yq","size-18":"_2M32f","size18":"_2M32f","size-12":"_17xBl","size12":"_17xBl"};
 
 /***/ }),
 
@@ -1261,23 +1261,23 @@ module.exports = {"root":"_5X06G","size-18":"kFKdK","size18":"kFKdK","size-12":"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioInput.scss */ "./components/inputs/RadioInput.scss"));
-const 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, () => ({ icon: radio_point_svg_1.ReactComponent }));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioInput = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioInput.scss */ "./components/inputs/RadioInput.scss"));
+const 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, () => ({ icon: radio_point_svg_1.ReactComponent }));
 
 
 /***/ }),
@@ -1290,7 +1290,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":"pTQfT","size-12":"_3fygH","size12":"_3fygH","size-18":"_2a5s6","size18":"_2a5s6","size-24":"_1VjF3","size24":"_1VjF3"};
+module.exports = {"root":"_1IgRU","size-12":"_2cwwX","size12":"_2cwwX","size-18":"_iwwd","size18":"_iwwd","size-24":"oJrDW","size24":"oJrDW"};
 
 /***/ }),
 
@@ -1302,23 +1302,23 @@ module.exports = {"root":"pTQfT","size-12":"_3fygH","size12":"_3fygH","size-18":
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.applySwitchMods = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const 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);
 
 
 /***/ }),
@@ -1331,7 +1331,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":"_3H26H","mode-form":"_30jWN","modeForm":"_30jWN","mode-cell":"xig3t","modeCell":"xig3t","size-24":"UUYBe","size24":"UUYBe","size-30":"_1p1vJ","size30":"_1p1vJ","size-36":"hA32B","size36":"hA32B","size-42":"_3SdK-","size42":"_3SdK-","size-48":"_2l7RZ","size48":"_2l7RZ"};
+module.exports = {"root":"SX-BJ","mode-form":"_1GooJ","modeForm":"_1GooJ","mode-cell":"_1OdzO","modeCell":"_1OdzO","size-24":"_2M548","size24":"_2M548","size-30":"_3NYDE","size30":"_3NYDE","size-36":"_2nhrM","size36":"_2nhrM","size-42":"_2K4fX","size42":"_2K4fX","size-48":"_1fpXo","size48":"_1fpXo"};
 
 /***/ }),
 
@@ -1343,42 +1343,42 @@ module.exports = {"root":"_3H26H","mode-form":"_30jWN","modeForm":"_30jWN","mode
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInput = exports.TextInput = exports.applyTextInputMods = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const 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");
-const defaultSize = '36';
-const 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, (props) => ({
-    acceptIcon: icons_1.systemIcons[props.size || defaultSize].accept,
-    cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear,
-    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
-}));
-class SearchInput extends react_1.default.Component {
-    render() {
-        // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
-        const textInputProps = Object.assign({}, this.props);
-        delete textInputProps.getValueChangeAnalyticsEvent;
-        return react_1.default.createElement(uui_core_1.IEditableDebouncer, Object.assign({}, this.props, { render: (iEditable => react_1.default.createElement(exports.TextInput, Object.assign({ icon: icons_1.systemIcons[this.props.size || defaultSize].search, onCancel: !!this.props.value ? (() => iEditable.onValueChange('')) : undefined, type: "search", inputMode: "search" }, textInputProps, iEditable))) }));
-    }
-}
-exports.SearchInput = SearchInput;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInput = exports.TextInput = exports.applyTextInputMods = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const 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");
+const defaultSize = '36';
+const 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, (props) => ({
+    acceptIcon: icons_1.systemIcons[props.size || defaultSize].accept,
+    cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear,
+    dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow,
+}));
+class SearchInput extends react_1.default.Component {
+    render() {
+        // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
+        const textInputProps = Object.assign({}, this.props);
+        delete textInputProps.getValueChangeAnalyticsEvent;
+        return react_1.default.createElement(uui_core_1.IEditableDebouncer, Object.assign({}, this.props, { render: (iEditable => react_1.default.createElement(exports.TextInput, Object.assign({ icon: icons_1.systemIcons[this.props.size || defaultSize].search, onCancel: !!this.props.value ? (() => iEditable.onValueChange('')) : undefined, type: "search", inputMode: "search" }, textInputProps, iEditable))) }));
+    }
+}
+exports.SearchInput = SearchInput;
 
 
 /***/ }),
@@ -1391,13 +1391,13 @@ exports.SearchInput = SearchInput;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -1410,7 +1410,7 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"QcowB","mode-block":"_1CIcy","modeBlock":"_1CIcy","mode-inline":"_1-VQE","modeInline":"_1-VQE","padding-0":"_2PGpB","padding0":"_2PGpB","padding-6":"_2bEf-","padding6":"_2bEf-","padding-12":"_2yCbY","padding12":"_2yCbY","padding-18":"_1B_A9","padding18":"_1B_A9"};
+module.exports = {"root":"_3UAev","mode-block":"_3EP0U","modeBlock":"_3EP0U","mode-inline":"_1Kh8P","modeInline":"_1Kh8P","padding-0":"SED2t","padding0":"SED2t","padding-6":"_2W4ZZ","padding6":"_2W4ZZ","padding-12":"dXCi6","padding12":"dXCi6","padding-18":"_6aoDh","padding18":"_6aoDh"};
 
 /***/ }),
 
@@ -1422,26 +1422,26 @@ module.exports = {"root":"QcowB","mode-block":"_1CIcy","modeBlock":"_1CIcy","mod
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-__webpack_require__(/*! ../../assets/styles/variables/layout/accordion.scss */ "./assets/styles/variables/layout/accordion.scss");
-const 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, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && icons_1.systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
-}));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+__webpack_require__(/*! ../../assets/styles/variables/layout/accordion.scss */ "./assets/styles/variables/layout/accordion.scss");
+const 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, (mods) => ({
+    dropdownIcon: mods.dropdownIcon !== null && icons_1.systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
+}));
 
 
 /***/ }),
@@ -1454,7 +1454,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":"sIhcp"};
+module.exports = {"root":"qHqd0"};
 
 /***/ }),
 
@@ -1466,14 +1466,14 @@ module.exports = {"root":"sIhcp"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlGroup = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./ControlGroup.scss */ "./components/layout/ControlGroup.scss"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, () => [css.root]);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlGroup = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./ControlGroup.scss */ "./components/layout/ControlGroup.scss"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, () => [css.root]);
 
 
 /***/ }),
@@ -1486,16 +1486,16 @@ exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, (
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexCell = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, props => [
-    css.flexCell,
-]);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexCell = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, props => [
+    css.flexCell,
+]);
 
 
 /***/ }),
@@ -1508,7 +1508,7 @@ exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, props =>
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"B_on7","top-shadow":"_2cEd4","topShadow":"_2cEd4","size-24":"D7Ops","size24":"D7Ops","size-30":"Upcrj","size30":"Upcrj","size-36":"_3tGWX","size36":"_3tGWX","size-42":"_395H_","size42":"_395H_","size-48":"_1xLS7","size48":"_1xLS7","padding-6":"_1CZX6","padding6":"_1CZX6","padding-12":"_2-8mA","padding12":"_2-8mA","padding-18":"_19YqP","padding18":"_19YqP","padding-24":"_1-R5z","padding24":"_1-R5z","margin-24":"_3uo6d","margin24":"_3uo6d","margin-12":"_4uQ-v","margin12":"_4uQ-v","vPadding-12":"_3Ge94","vPadding12":"_3Ge94","vPadding-18":"_119Uw","vPadding18":"_119Uw","vPadding-24":"R7SEu","vPadding24":"R7SEu","vPadding-36":"_1ToJs","vPadding36":"_1ToJs","vPadding-48":"_1iEuQ","vPadding48":"_1iEuQ","spacing-6":"_2opwG","spacing6":"_2opwG","spacing-12":"_1i382","spacing12":"_1i382","spacing-18":"_3XzM0","spacing18":"_3XzM0","border-bottom":"_2A4TQ","borderBottom":"_2A4TQ"};
+module.exports = {"root":"_1vnMk","top-shadow":"_2qc7o","topShadow":"_2qc7o","size-24":"kt-J-","size24":"kt-J-","size-30":"_1RUhV","size30":"_1RUhV","size-36":"_1z1QJ","size36":"_1z1QJ","size-42":"_271_u","size42":"_271_u","size-48":"_393Sf","size48":"_393Sf","padding-6":"pccgU","padding6":"pccgU","padding-12":"_35zV0","padding12":"_35zV0","padding-18":"um6MC","padding18":"um6MC","padding-24":"_2NADX","padding24":"_2NADX","margin-24":"_200NI","margin24":"_200NI","margin-12":"yAY5e","margin12":"yAY5e","vPadding-12":"_1xyxU","vPadding12":"_1xyxU","vPadding-18":"_2372N","vPadding18":"_2372N","vPadding-24":"_3bPqy","vPadding24":"_3bPqy","vPadding-36":"_1fojR","vPadding36":"_1fojR","vPadding-48":"_1eMib","vPadding48":"_1eMib","spacing-6":"_1_MAu","spacing6":"_1_MAu","spacing-12":"_1mZH8","spacing12":"_1mZH8","spacing-18":"_1er34","spacing18":"_1er34","border-bottom":"_1tGQ_","borderBottom":"_1tGQ_"};
 
 /***/ }),
 
@@ -1520,25 +1520,25 @@ module.exports = {"root":"B_on7","top-shadow":"_2cEd4","topShadow":"_2cEd4","siz
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexRow = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const 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, 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const 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, 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],
+    ];
+});
 
 
 /***/ }),
@@ -1551,11 +1551,11 @@ exports.FlexRow = (0, uui_core_1.withMods)(uui_components_1.FlexRow, props => {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexSpacer = void 0;
-const 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;
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+exports.FlexSpacer = uui_components_1.FlexSpacer;
 
 
 /***/ }),
@@ -1568,7 +1568,7 @@ exports.FlexSpacer = uui_components_1.FlexSpacer;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3mJvB","background":"_3cQ8S","margin-24":"FRpEk","margin24":"FRpEk","padding-12":"_39RwY","padding12":"_39RwY","padding-24":"H-BRk","padding24":"H-BRk","shadow":"_24e-z"};
+module.exports = {"root":"I8xQj","background":"MUvjP","margin-24":"_1ZB1h","margin24":"_1ZB1h","padding-12":"_2O2yg","padding12":"_2O2yg","padding-24":"_3BGWx","padding24":"_3BGWx","shadow":"_2mUor"};
 
 /***/ }),
 
@@ -1580,21 +1580,21 @@ module.exports = {"root":"_3mJvB","background":"_3cQ8S","margin-24":"FRpEk","mar
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panel = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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");
-const 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, props => [
-    '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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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");
+const 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, props => [
+    'panel-vars',
+    css.root,
+    props.shadow && css.shadow,
+    props.background && css.background,
+    props.margin && css['margin-' + props.margin],
+]);
 
 
 /***/ }),
@@ -1607,13 +1607,13 @@ exports.Panel = (0, uui_core_1.withMods)(uui_components_1.VPanel, props => [
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -1626,7 +1626,7 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1H6zv"};
+module.exports = {"root":"_3X4pa"};
 
 /***/ }),
 
@@ -1638,22 +1638,22 @@ module.exports = {"root":"_1H6zv"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconContainer = exports.applyIconContainerMods = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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-${mods.color || 'default'}`,
-        css.root,
-    ];
-}
-exports.applyIconContainerMods = applyIconContainerMods;
-exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer, applyIconContainerMods, () => ({ tabIndex: 0 }));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconContainer = exports.applyIconContainerMods = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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-${mods.color || 'default'}`,
+        css.root,
+    ];
+}
+exports.applyIconContainerMods = applyIconContainerMods;
+exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer, applyIconContainerMods, () => ({ tabIndex: 0 }));
 
 
 /***/ }),
@@ -1666,7 +1666,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":"_33qE9","size-24":"_2Nbyf","size24":"_2Nbyf","size-30":"_3Jnda","size30":"_3Jnda","size-36":"_1plaI","size36":"_1plaI","size-42":"_1eEnt","size42":"_1eEnt","size-48":"-kDpX","size48":"-kDpX"};
+module.exports = {"root":"_2hZ07","size-24":"M7JGy","size24":"M7JGy","size-30":"pSNRJ","size30":"pSNRJ","size-36":"_1noW5","size36":"_1noW5","size-42":"_38s1k","size42":"_38s1k","size-48":"_3KgtI","size48":"_3KgtI"};
 
 /***/ }),
 
@@ -1678,28 +1678,28 @@ module.exports = {"root":"_33qE9","size-24":"_2Nbyf","size24":"_2Nbyf","size-30"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledInput = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-__webpack_require__(/*! ../../assets/styles/variables/layout/labeledInput.scss */ "./assets/styles/variables/layout/labeledInput.scss");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LabeledInput.scss */ "./components/layout/LabeledInput.scss"));
-const 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, (props) => ({
-    Tooltip: overlays_1.Tooltip,
-    infoIcon: icons_1.systemIcons[props.size || defaultSize].help,
-}));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabeledInput = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+__webpack_require__(/*! ../../assets/styles/variables/layout/labeledInput.scss */ "./assets/styles/variables/layout/labeledInput.scss");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LabeledInput.scss */ "./components/layout/LabeledInput.scss"));
+const 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, (props) => ({
+    Tooltip: overlays_1.Tooltip,
+    infoIcon: icons_1.systemIcons[props.size || defaultSize].help,
+}));
 
 
 /***/ }),
@@ -1712,7 +1712,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":"_2d-b_"};
+module.exports = {"root":"_2ANbs"};
 
 /***/ }),
 
@@ -1724,15 +1724,15 @@ module.exports = {"root":"_2d-b_"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioGroup.scss */ "./components/layout/RadioGroup.scss"));
-exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, () => [css.root], () => ({ RadioInput: inputs_1.RadioInput }));
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioGroup.scss */ "./components/layout/RadioGroup.scss"));
+exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, () => [css.root], () => ({ RadioInput: inputs_1.RadioInput }));
 
 
 /***/ }),
@@ -1756,19 +1756,19 @@ exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, () =>
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollBars = void 0;
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const 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;
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const 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);
 
 
 /***/ }),
@@ -1792,19 +1792,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;
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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;
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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);
 
 
 /***/ }),
@@ -1817,17 +1817,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 });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -1840,18 +1840,18 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-class Dropdown extends React.Component {
-    render() {
-        return (React.createElement(uui_components_1.Dropdown, Object.assign({}, this.props)));
-    }
-}
-exports.Dropdown = Dropdown;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+class Dropdown extends React.Component {
+    render() {
+        return (React.createElement(uui_components_1.Dropdown, Object.assign({}, this.props)));
+    }
+}
+exports.Dropdown = Dropdown;
 
 
 /***/ }),
@@ -1864,7 +1864,7 @@ exports.Dropdown = Dropdown;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1W940"};
+module.exports = {"root":"_21vSa"};
 
 /***/ }),
 
@@ -1876,21 +1876,21 @@ module.exports = {"root":"_1W940"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownContainer = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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");
-const 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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");
+const 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);
 
 
 /***/ }),
@@ -1903,7 +1903,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":"_36Qvu","bodyRoot":"_1DQIE","submenuRootItem":"rEo2e","iconAfter":"Q1cl4","iconCheck":"HC6kn","splitterRoot":"yp9Fv","splitter":"DZT8X","headerRoot":"suO5X","itemRoot":"_2NjaA","icon":"QeBnx","link":"_1uC3e"};
+module.exports = {"menuRoot":"_3NUy_","bodyRoot":"_1Q1qt","submenuRootItem":"_33xjp","iconAfter":"_1iRkk","iconCheck":"FL1-2","splitterRoot":"_1Mfdk","splitter":"_2Mz7e","headerRoot":"_1qm6R","itemRoot":"_1hUTu","icon":"_33IVO","link":"_3DBug"};
 
 /***/ }),
 
@@ -1915,126 +1915,126 @@ module.exports = {"menuRoot":"_36Qvu","bodyRoot":"_1DQIE","submenuRootItem":"rEo
 /***/ (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;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const react_focus_lock_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react-focus-lock */ "react-focus-lock"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownMenu.scss */ "./components/overlays/DropdownMenu.scss"));
-const icons = icons_1.systemIcons['36'];
-exports.DropdownControlKeys = {
-    ENTER: 'Enter',
-    ESCAPE: 'Escape',
-    LEFT_ARROW: 'ArrowLeft',
-    RIGHT_ARROW: 'ArrowRight',
-    UP_ARROW: 'ArrowUp',
-    DOWN_ARROW: 'ArrowDown',
-};
-const DropdownMenuContainer = (props) => {
-    const menuRef = (0, react_1.useRef)(null);
-    const [currentlyFocused, setFocused] = (0, react_1.useState)(-1);
-    const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uui_core_1.uuiMod.disabled})`)) : [];
-    (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [menuRef.current]);
-    const changeFocus = (nextFocusedIndex) => {
-        if (menuItems.length > 0) {
-            setFocused(nextFocusedIndex);
-            menuItems[nextFocusedIndex].focus();
-        }
-    };
-    const handleArrowKeys = (e) => {
-        e.stopPropagation();
-        const 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 === props.closeOnKey && props.onClose) {
-            props.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, Object.assign({}, props, { rawProps: { tabIndex: -1 } }))));
-};
-exports.DropdownMenuBody = (0, uui_core_1.withMods)(DropdownMenuContainer, () => [css.bodyRoot], ({ style }) => ({ style }));
-const DropdownMenuButton = (props) => {
-    const context = (0, react_1.useContext)(uui_core_1.UuiContext);
-    const { icon, iconPosition, caption, isDisabled, isSelected, link, href, onClick, toggleDropdownOpening, isDropdown, } = props;
-    const handleClick = (event) => {
-        if (isDisabled || !onClick)
-            return;
-        onClick(event);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
-    };
-    const handleOpenDropdown = (event) => {
-        if (event.key === exports.DropdownControlKeys.RIGHT_ARROW && isDropdown) {
-            toggleDropdownOpening(true);
-        }
-        else if (event.key === exports.DropdownControlKeys.ENTER && onClick) {
-            onClick(event);
-        }
-    };
-    const getMenuButtonContent = () => {
-        const isIconBefore = Boolean(icon && iconPosition !== "right");
-        const isIconAfter = Boolean(icon && iconPosition === "right");
-        const 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));
-    };
-    const isAnchor = Boolean(link || href);
-    const 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';
-const DropdownMenuSplitter = (props) => (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;
-const DropdownMenuHeader = (props) => (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;
-const DropdownSubMenu = (props) => {
-    return (react_1.default.createElement(uui_components_1.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", renderBody: (props) => (react_1.default.createElement(exports.DropdownMenuBody, Object.assign({ closeOnKey: exports.DropdownControlKeys.LEFT_ARROW }, props))), renderTarget: ({ toggleDropdownOpening }) => (react_1.default.createElement(exports.DropdownMenuButton, Object.assign({ cx: (0, uui_core_1.cx)(css.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props))) }));
-};
-exports.DropdownSubMenu = DropdownSubMenu;
-const DropdownMenuSwitchButton = (props) => {
-    const context = (0, react_1.useContext)(uui_core_1.UuiContext);
-    const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
-    const onHandleValueChange = (value) => {
-        if (isDisabled || !onValueChange)
-            return;
-        onValueChange(value);
-        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
-    };
-    const handleKeySelect = (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: () => 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const react_focus_lock_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react-focus-lock */ "react-focus-lock"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownMenu.scss */ "./components/overlays/DropdownMenu.scss"));
+const icons = icons_1.systemIcons['36'];
+exports.DropdownControlKeys = {
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    LEFT_ARROW: 'ArrowLeft',
+    RIGHT_ARROW: 'ArrowRight',
+    UP_ARROW: 'ArrowUp',
+    DOWN_ARROW: 'ArrowDown',
+};
+const DropdownMenuContainer = (props) => {
+    const menuRef = (0, react_1.useRef)(null);
+    const [currentlyFocused, setFocused] = (0, react_1.useState)(-1);
+    const menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll(`[role="menuitem"]:not(.${uui_core_1.uuiMod.disabled})`)) : [];
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [menuRef.current]);
+    const changeFocus = (nextFocusedIndex) => {
+        if (menuItems.length > 0) {
+            setFocused(nextFocusedIndex);
+            menuItems[nextFocusedIndex].focus();
+        }
+    };
+    const handleArrowKeys = (e) => {
+        e.stopPropagation();
+        const 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 === props.closeOnKey && props.onClose) {
+            props.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, Object.assign({}, props, { rawProps: { tabIndex: -1 } }))));
+};
+exports.DropdownMenuBody = (0, uui_core_1.withMods)(DropdownMenuContainer, () => [css.bodyRoot], ({ style }) => ({ style }));
+const DropdownMenuButton = (props) => {
+    const context = (0, react_1.useContext)(uui_core_1.UuiContext);
+    const { icon, iconPosition, caption, isDisabled, isSelected, link, href, onClick, toggleDropdownOpening, isDropdown, } = props;
+    const handleClick = (event) => {
+        if (isDisabled || !onClick)
+            return;
+        onClick(event);
+        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    };
+    const handleOpenDropdown = (event) => {
+        if (event.key === exports.DropdownControlKeys.RIGHT_ARROW && isDropdown) {
+            toggleDropdownOpening(true);
+        }
+        else if (event.key === exports.DropdownControlKeys.ENTER && onClick) {
+            onClick(event);
+        }
+    };
+    const getMenuButtonContent = () => {
+        const isIconBefore = Boolean(icon && iconPosition !== "right");
+        const isIconAfter = Boolean(icon && iconPosition === "right");
+        const 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));
+    };
+    const isAnchor = Boolean(link || href);
+    const 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';
+const DropdownMenuSplitter = (props) => (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;
+const DropdownMenuHeader = (props) => (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;
+const DropdownSubMenu = (props) => {
+    return (react_1.default.createElement(uui_components_1.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", renderBody: (props) => (react_1.default.createElement(exports.DropdownMenuBody, Object.assign({ closeOnKey: exports.DropdownControlKeys.LEFT_ARROW }, props))), renderTarget: ({ toggleDropdownOpening }) => (react_1.default.createElement(exports.DropdownMenuButton, Object.assign({ cx: (0, uui_core_1.cx)(css.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props))) }));
+};
+exports.DropdownSubMenu = DropdownSubMenu;
+const DropdownMenuSwitchButton = (props) => {
+    const context = (0, react_1.useContext)(uui_core_1.UuiContext);
+    const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
+    const onHandleValueChange = (value) => {
+        if (isDisabled || !onValueChange)
+            return;
+        onValueChange(value);
+        context.uuiAnalytics.sendEvent(props.clickAnalyticsEvent);
+    };
+    const handleKeySelect = (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: () => 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;
 
 
 /***/ }),
@@ -2047,7 +2047,7 @@ exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"modal-blocker":"_2zU29","modalBlocker":"_2zU29","animateModalBlocker":"_1TSUA","blocker-overlay":"_1CfUk","blockerOverlay":"_1CfUk","modal":"_3fiGZ","modal-footer":"_2Tv2A","modalFooter":"_2Tv2A","border-top":"_1M95j","borderTop":"_1M95j","modal-header":"_23Slq","modalHeader":"_23Slq"};
+module.exports = {"modal-blocker":"_1PIWM","modalBlocker":"_1PIWM","animateModalBlocker":"_3WlnO","blocker-overlay":"pOm6n","blockerOverlay":"pOm6n","modal":"_3xpLn","modal-footer":"_3nfr3","modalFooter":"_3nfr3","border-top":"_2_lmL","borderTop":"_2_lmL","modal-header":"_3VTnZ","modalHeader":"_3VTnZ"};
 
 /***/ }),
 
@@ -2059,48 +2059,48 @@ module.exports = {"modal-blocker":"_2zU29","modalBlocker":"_2zU29","animateModal
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalFooter = exports.ModalHeader = exports.ModalWindow = exports.ModalBlocker = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const 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");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Modals.scss */ "./components/overlays/Modals.scss"));
-exports.ModalBlocker = (0, uui_core_1.withMods)(uui_components_1.ModalBlocker, mods => [
-    'modals-vars',
-    css.modalBlocker,
-    mods.overlay && css['blocker-overlay'],
-]);
-exports.ModalWindow = (0, uui_core_1.withMods)(uui_components_1.ModalWindow, () => ['modals-vars', css.modal], props => ({ rawProps: {
-        style: {
-            width: `${props.width || 480}px`,
-            height: props.height ? `${props.height}px` : '',
-        },
-    },
-}));
-class ModalHeader extends React.Component {
-    render() {
-        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 }))));
-    }
-}
-exports.ModalHeader = ModalHeader;
-class ModalFooter extends React.Component {
-    render() {
-        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));
-    }
-}
-exports.ModalFooter = ModalFooter;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalFooter = exports.ModalHeader = exports.ModalWindow = exports.ModalBlocker = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const 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");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Modals.scss */ "./components/overlays/Modals.scss"));
+exports.ModalBlocker = (0, uui_core_1.withMods)(uui_components_1.ModalBlocker, mods => [
+    'modals-vars',
+    css.modalBlocker,
+    mods.overlay && css['blocker-overlay'],
+]);
+exports.ModalWindow = (0, uui_core_1.withMods)(uui_components_1.ModalWindow, () => ['modals-vars', css.modal], props => ({ rawProps: {
+        style: {
+            width: `${props.width || 480}px`,
+            height: props.height ? `${props.height}px` : '',
+        },
+    },
+}));
+class ModalHeader extends React.Component {
+    render() {
+        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 }))));
+    }
+}
+exports.ModalHeader = ModalHeader;
+class ModalFooter extends React.Component {
+    render() {
+        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));
+    }
+}
+exports.ModalFooter = ModalFooter;
 
 
 /***/ }),
@@ -2113,7 +2113,7 @@ exports.ModalFooter = ModalFooter;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2wYRA","icon-wrapper":"_1Ow8Q","iconWrapper":"_1Ow8Q","notification-wrapper":"BwEly","notificationWrapper":"BwEly","action-wrapper":"_2MFFy","actionWrapper":"_2MFFy","action-link":"_1ZHRQ","actionLink":"_1ZHRQ","close-icon":"_1FD1H","closeIcon":"_1FD1H","main-path":"_2Rvl9","mainPath":"_2Rvl9","content":"_2kTT3","clear-button":"aJWZc","clearButton":"aJWZc","close-wrapper":"_2HKfc","closeWrapper":"_2HKfc"};
+module.exports = {"root":"_2343z","icon-wrapper":"_3OngB","iconWrapper":"_3OngB","notification-wrapper":"_3QFKt","notificationWrapper":"_3QFKt","action-wrapper":"_1HBip","actionWrapper":"_1HBip","action-link":"_18PVO","actionLink":"_18PVO","close-icon":"_3dWdu","closeIcon":"_3dWdu","main-path":"_2Nlcs","mainPath":"_2Nlcs","content":"_30kN_","clear-button":"_3P50w","clearButton":"_3P50w","close-wrapper":"u8v4Z","closeWrapper":"u8v4Z"};
 
 /***/ }),
 
@@ -2125,69 +2125,69 @@ module.exports = {"root":"_2wYRA","icon-wrapper":"_1Ow8Q","iconWrapper":"_1Ow8Q"
 /***/ (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;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-const notification_check_circle_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-check_circle-fill-24.svg */ "./icons/notification-check_circle-fill-24.svg");
-const notification_warning_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-warning-fill-24.svg */ "./icons/notification-warning-fill-24.svg");
-const notification_error_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-error-fill-24.svg */ "./icons/notification-error-fill-24.svg");
-const notification_help_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-help-fill-24.svg */ "./icons/notification-help-fill-24.svg");
-const 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");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./NotificationCard.scss */ "./components/overlays/NotificationCard.scss"));
-class NotificationCard extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.notificationCardNode = null;
-    }
-    componentDidMount() {
-        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);
-    }
-    componentWillUnmount() {
-        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);
-    }
-    render() {
-        return (react_1.default.createElement("div", { role: 'alert', className: (0, classnames_1.default)(css.notificationWrapper, 'notification-card-vars', `notification-card-color-${this.props.color}`, css.root, this.props.cx), ref: (el) => 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((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("div", { className: css.closeWrapper },
-                    react_1.default.createElement(buttons_1.IconButton, { icon: cross_svg_1.ReactComponent, color: 'default', onClick: this.props.onClose, cx: css.closeIcon })))));
-    }
-}
-exports.NotificationCard = NotificationCard;
-const WarningNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_warning_fill_24_svg_1.ReactComponent, color: 'warning' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-exports.WarningNotification = WarningNotification;
-const SuccessNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_check_circle_fill_24_svg_1.ReactComponent, color: 'success' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-exports.SuccessNotification = SuccessNotification;
-const HintNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_help_fill_24_svg_1.ReactComponent, color: 'info' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-exports.HintNotification = HintNotification;
-const ErrorNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_error_fill_24_svg_1.ReactComponent, color: 'error' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-exports.ErrorNotification = ErrorNotification;
-class ClearNotification extends react_1.default.Component {
-    render() {
-        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: () => this.context.uuiNotifications.clearAll() }));
-    }
-}
-exports.ClearNotification = ClearNotification;
-ClearNotification.contextType = uui_core_1.UuiContext;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearNotification = exports.ErrorNotification = exports.HintNotification = exports.SuccessNotification = exports.WarningNotification = exports.NotificationCard = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+const notification_check_circle_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-check_circle-fill-24.svg */ "./icons/notification-check_circle-fill-24.svg");
+const notification_warning_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-warning-fill-24.svg */ "./icons/notification-warning-fill-24.svg");
+const notification_error_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-error-fill-24.svg */ "./icons/notification-error-fill-24.svg");
+const notification_help_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-help-fill-24.svg */ "./icons/notification-help-fill-24.svg");
+const 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");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./NotificationCard.scss */ "./components/overlays/NotificationCard.scss"));
+class NotificationCard extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.notificationCardNode = null;
+    }
+    componentDidMount() {
+        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);
+    }
+    componentWillUnmount() {
+        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);
+    }
+    render() {
+        return (react_1.default.createElement("div", { role: 'alert', className: (0, classnames_1.default)(css.notificationWrapper, 'notification-card-vars', `notification-card-color-${this.props.color}`, css.root, this.props.cx), ref: (el) => 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((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("div", { className: css.closeWrapper },
+                    react_1.default.createElement(buttons_1.IconButton, { icon: cross_svg_1.ReactComponent, color: 'default', onClick: this.props.onClose, cx: css.closeIcon })))));
+    }
+}
+exports.NotificationCard = NotificationCard;
+const WarningNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_warning_fill_24_svg_1.ReactComponent, color: 'warning' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+exports.WarningNotification = WarningNotification;
+const SuccessNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_check_circle_fill_24_svg_1.ReactComponent, color: 'success' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+exports.SuccessNotification = SuccessNotification;
+const HintNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_help_fill_24_svg_1.ReactComponent, color: 'info' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+exports.HintNotification = HintNotification;
+const ErrorNotification = (props) => react_1.default.createElement(NotificationCard, Object.assign({ icon: notification_error_fill_24_svg_1.ReactComponent, color: 'error' }, props, { cx: (0, classnames_1.default)(props.cx) }));
+exports.ErrorNotification = ErrorNotification;
+class ClearNotification extends react_1.default.Component {
+    render() {
+        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: () => this.context.uuiNotifications.clearAll() }));
+    }
+}
+exports.ClearNotification = ClearNotification;
+ClearNotification.contextType = uui_core_1.UuiContext;
 
 
 /***/ }),
@@ -2200,7 +2200,7 @@ ClearNotification.contextType = uui_core_1.UuiContext;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3sMXu"};
+module.exports = {"root":"_2o8VG"};
 
 /***/ }),
 
@@ -2212,21 +2212,21 @@ module.exports = {"root":"_3sMXu"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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");
-const 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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");
+const 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);
 
 
 /***/ }),
@@ -2239,15 +2239,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 });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -2260,7 +2260,7 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"body":"_2J_g0","modal":"_1qu7r","search":"_3sAGo","checkbox":"_3OW7c","search-wrapper":"_3hKG2","searchWrapper":"_3hKG2","search-size-24":"_2AzpZ","searchSize24":"_2AzpZ","search-size-30":"_2L64F","searchSize30":"_2L64F","search-size-36":"_3zk64","searchSize36":"_3zk64","search-size-42":"_11MzA","searchSize42":"_11MzA","no-found-size-24":"uP6b1","noFoundSize24":"uP6b1","no-found-size-30":"_3VB1M","noFoundSize30":"_3VB1M","no-found-size-36":"_3-AIe","noFoundSize36":"_3-AIe","no-found-size-42":"_27FOf","noFoundSize42":"_27FOf"};
+module.exports = {"body":"_3_A6Y","modal":"_3u7ic","search":"_2j2ut","checkbox":"_2IoGK","search-wrapper":"_2VMSO","searchWrapper":"_2VMSO","search-size-24":"_2AwPD","searchSize24":"_2AwPD","search-size-30":"_2I_qv","searchSize30":"_2I_qv","search-size-36":"_2Ebm_","searchSize36":"_2Ebm_","search-size-42":"_3Lyua","searchSize42":"_3Lyua","no-found-size-24":"_3HXkt","noFoundSize24":"_3HXkt","no-found-size-30":"_1BFsW","noFoundSize30":"_1BFsW","no-found-size-36":"_3bMXW","noFoundSize36":"_3bMXW","no-found-size-42":"_2d55w","noFoundSize42":"_2d55w"};
 
 /***/ }),
 
@@ -2272,45 +2272,45 @@ module.exports = {"body":"_2J_g0","modal":"_1qu7r","search":"_3sAGo","checkbox":
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerBody = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerBody.scss */ "./components/pickers/DataPickerBody.scss"));
-class DataPickerBody extends uui_components_1.PickerBodyBase {
-    constructor() {
-        super(...arguments);
-        this.lens = uui_core_1.Lens.onEditableComponent(this);
-        this.searchLens = this.lens.prop('search');
-    }
-    renderNoFound() {
-        if (this.props.renderNotFound) {
-            return this.props.renderNotFound();
-        }
-        return react_1.default.createElement(uui_components_1.FlexCell, { cx: css[`no-found-size-${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));
-    }
-    render() {
-        const value = this.props.value;
-        const searchSize = (0, uui_core_1.isMobile)() ? '48' : (this.props.searchSize || '36');
-        const searchClass = (0, uui_core_1.cx)(css.searchWrapper, css[`search-size-${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, Object.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, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount }))
-                : this.renderNoFound()));
-    }
-}
-exports.DataPickerBody = DataPickerBody;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerBody = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerBody.scss */ "./components/pickers/DataPickerBody.scss"));
+class DataPickerBody extends uui_components_1.PickerBodyBase {
+    constructor() {
+        super(...arguments);
+        this.lens = uui_core_1.Lens.onEditableComponent(this);
+        this.searchLens = this.lens.prop('search');
+    }
+    renderNoFound() {
+        if (this.props.renderNotFound) {
+            return this.props.renderNotFound();
+        }
+        return react_1.default.createElement(uui_components_1.FlexCell, { cx: css[`no-found-size-${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));
+    }
+    render() {
+        const value = this.props.value;
+        const searchSize = (0, uui_core_1.isMobile)() ? '48' : (this.props.searchSize || '36');
+        const searchClass = (0, uui_core_1.cx)(css.searchWrapper, css[`search-size-${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, Object.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, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount }))
+                : this.renderNoFound()));
+    }
+}
+exports.DataPickerBody = DataPickerBody;
 
 
 /***/ }),
@@ -2323,7 +2323,7 @@ exports.DataPickerBody = DataPickerBody;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"footer-wrapper":"_2vbWG","footerWrapper":"_2vbWG"};
+module.exports = {"footer-wrapper":"_3cIy0","footerWrapper":"_3cIy0"};
 
 /***/ }),
 
@@ -2335,44 +2335,44 @@ module.exports = {"footer-wrapper":"_2vbWG","footerWrapper":"_2vbWG"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerFooter = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const DataPickerFooter_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerFooter.scss */ "./components/pickers/DataPickerFooter.scss"));
-const switchSizes = {
-    '24': '12',
-    '36': '18',
-    '42': '24',
-    '48': '24',
-};
-const DataPickerFooterImpl = (props) => {
-    const { clearSelection, view, showSelected } = props;
-    const size = (0, uui_core_1.isMobile)() ? '48' : (props.size || '36');
-    const switchSize = switchSizes[size];
-    const hasSelection = view.getSelectedRows().length > 0;
-    const handleKeyDown = (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
-                    : () => view.selectAll.onValueChange(true), rawProps: { onKeyDown: handleKeyDown } })))));
-};
-exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerFooter = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const DataPickerFooter_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerFooter.scss */ "./components/pickers/DataPickerFooter.scss"));
+const switchSizes = {
+    '24': '12',
+    '36': '18',
+    '42': '24',
+    '48': '24',
+};
+const DataPickerFooterImpl = (props) => {
+    const { clearSelection, view, showSelected } = props;
+    const size = (0, uui_core_1.isMobile)() ? '48' : (props.size || '36');
+    const switchSize = switchSizes[size];
+    const hasSelection = view.getSelectedRows().length > 0;
+    const handleKeyDown = (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
+                    : () => view.selectAll.onValueChange(true), rawProps: { onKeyDown: handleKeyDown } })))));
+};
+exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 
 
 /***/ }),
@@ -2385,7 +2385,7 @@ exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"header":"_38SnF","close":"_5dLbF"};
+module.exports = {"header":"lZ1mj","close":"_3So8u"};
 
 /***/ }),
 
@@ -2397,23 +2397,23 @@ module.exports = {"header":"_38SnF","close":"_5dLbF"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerHeader = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const DataPickerHeader_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerHeader.scss */ "./components/pickers/DataPickerHeader.scss"));
-const navigation_close_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-close-24.svg */ "../epam-assets/icons/common/navigation-close-24.svg");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const DataPickerHeaderImpl = props => {
-    const 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: () => { 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const DataPickerHeader_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerHeader.scss */ "./components/pickers/DataPickerHeader.scss"));
+const navigation_close_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-close-24.svg */ "../epam-assets/icons/common/navigation-close-24.svg");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const DataPickerHeaderImpl = props => {
+    const 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: () => { 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);
 
 
 /***/ }),
@@ -2426,7 +2426,7 @@ exports.DataPickerHeader = react_1.default.memo(DataPickerHeaderImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"render-item":"_3wiur","renderItem":"_3wiur","icon-wrapper":"RO09u","iconWrapper":"RO09u","picker-row":"qB7yM","pickerRow":"qB7yM"};
+module.exports = {"render-item":"vxc4l","renderItem":"vxc4l","icon-wrapper":"_3eOVZ","iconWrapper":"_3eOVZ","picker-row":"Oplfl","pickerRow":"Oplfl"};
 
 /***/ }),
 
@@ -2438,49 +2438,49 @@ module.exports = {"render-item":"_3wiur","renderItem":"_3wiur","icon-wrapper":"R
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataPickerRow = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const tables_1 = __webpack_require__(/*! ../tables */ "./components/tables/index.ts");
-const notification_done_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-24.svg */ "../epam-assets/icons/common/notification-done-24.svg");
-const notification_done_18_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-18.svg */ "../epam-assets/icons/common/notification-done-18.svg");
-const notification_done_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-12.svg */ "../epam-assets/icons/common/notification-done-12.svg");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerRow.scss */ "./components/pickers/DataPickerRow.scss"));
-class DataPickerRow extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getIcon = (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: (item, rowProps) => 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 = () => {
-            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' });
-        };
-    }
-    render() {
-        return React.createElement(uui_components_1.DataPickerRow, Object.assign({}, this.props, { cx: [css.pickerRow, this.props.cx], renderContent: this.renderContent }));
-    }
-}
-exports.DataPickerRow = DataPickerRow;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPickerRow = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const tables_1 = __webpack_require__(/*! ../tables */ "./components/tables/index.ts");
+const notification_done_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-24.svg */ "../epam-assets/icons/common/notification-done-24.svg");
+const notification_done_18_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-18.svg */ "../epam-assets/icons/common/notification-done-18.svg");
+const notification_done_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-12.svg */ "../epam-assets/icons/common/notification-done-12.svg");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerRow.scss */ "./components/pickers/DataPickerRow.scss"));
+class DataPickerRow extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getIcon = (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: (item, rowProps) => 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 = () => {
+            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' });
+        };
+    }
+    render() {
+        return React.createElement(uui_components_1.DataPickerRow, Object.assign({}, this.props, { cx: [css.pickerRow, this.props.cx], renderContent: this.renderContent }));
+    }
+}
+exports.DataPickerRow = DataPickerRow;
 
 
 /***/ }),
@@ -2493,7 +2493,7 @@ exports.DataPickerRow = DataPickerRow;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"done":"_1TYYe"};
+module.exports = {"done":"Nm9pG"};
 
 /***/ }),
 
@@ -2505,24 +2505,24 @@ module.exports = {"done":"_1TYYe"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileDropdownWrapper = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const MobileDropdownWrapper_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./MobileDropdownWrapper.scss */ "./components/pickers/MobileDropdownWrapper.scss"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const DataPickerHeader_1 = __webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx");
-const MobileDropdownWrapper = props => {
-    const 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: () => { 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const MobileDropdownWrapper_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./MobileDropdownWrapper.scss */ "./components/pickers/MobileDropdownWrapper.scss"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const DataPickerHeader_1 = __webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx");
+const MobileDropdownWrapper = props => {
+    const 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: () => { 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;
 
 
 /***/ }),
@@ -2535,7 +2535,7 @@ exports.MobileDropdownWrapper = MobileDropdownWrapper;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"panel":"_2YheT","footer-wrapper":"_1mBRx","footerWrapper":"_1mBRx","footer-size-24":"a0_UD","footerSize24":"a0_UD","footer-size-30":"_1zmWa","footerSize30":"_1zmWa","footer-size-36":"_1kgVX","footerSize36":"_1kgVX","footer-size-42":"_28xPK","footerSize42":"_28xPK","footer-size-48":"_3YfVg","footerSize48":"_3YfVg"};
+module.exports = {"panel":"_2IBHB","footer-wrapper":"_2ctGW","footerWrapper":"_2ctGW","footer-size-24":"_2wMKa","footerSize24":"_2wMKa","footer-size-30":"_2NiMj","footerSize30":"_2NiMj","footer-size-36":"_1SvdP","footerSize36":"_1SvdP","footer-size-42":"_1jYZZ","footerSize42":"_1jYZZ","footer-size-48":"_3bpno","footerSize48":"_3bpno"};
 
 /***/ }),
 
@@ -2547,75 +2547,75 @@ module.exports = {"panel":"_2YheT","footer-wrapper":"_1mBRx","footerWrapper":"_1
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerInput = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const PickerToggler_1 = __webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx");
-const DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
-const PickerItem_1 = __webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx");
-const DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
-const DataPickerFooter_1 = __webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx");
-const MobileDropdownWrapper_1 = __webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx");
-const types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
-const PickerInput_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerInput.scss */ "./components/pickers/PickerInput.scss"));
-const pickerHeight = 300;
-const pickerWidth = 360;
-class PickerInput extends uui_components_1.PickerInputBase {
-    constructor() {
-        super(...arguments);
-        this.renderItem = (item, rowProps) => {
-            return react_1.default.createElement(PickerItem_1.PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize() }, rowProps));
-        };
-        this.renderRow = (rowProps) => {
-            return this.props.renderRow ? this.props.renderRow(rowProps) : (react_1.default.createElement(DataPickerRow_1.DataPickerRow, Object.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 })));
-        };
-    }
-    toggleModalOpening(opened) {
-        const _a = this.props, { renderFooter } = _a, restProps = (0, tslib_1.__rest)(_a, ["renderFooter"]);
-        this.context.uuiModals.show(props => react_1.default.createElement(PickerModal_1.PickerModal, Object.assign({}, restProps, props, { caption: this.getPlaceholder(), initialValue: this.props.value, renderRow: this.renderRow, selectionMode: this.props.selectionMode, valueType: this.props.valueType })))
-            .then(newSelection => this.handleSelectionValueChange(newSelection))
-            .catch(() => null);
-    }
-    getRowSize() {
-        return (0, uui_core_1.isMobile)()
-            ? '48'
-            : this.props.editMode === 'modal'
-                ? '36'
-                : this.props.size;
-    }
-    getTogglerMods() {
-        return {
-            size: this.props.size,
-            mode: this.props.mode ? this.props.mode : types_1.EditMode.FORM,
-        };
-    }
-    renderFooter() {
-        const footerProps = this.getFooterProps();
-        return this.props.renderFooter
-            ? this.props.renderFooter(footerProps)
-            : react_1.default.createElement(DataPickerFooter_1.DataPickerFooter, Object.assign({}, footerProps, { size: this.props.size }));
-    }
-    renderTarget(targetProps) {
-        const renderTarget = this.props.renderToggler || (props => react_1.default.createElement(PickerToggler_1.PickerToggler, Object.assign({}, props)));
-        return (react_1.default.createElement(uui_core_1.IEditableDebouncer, { value: targetProps.value, onValueChange: this.handleTogglerSearchChange, render: editableProps => renderTarget(Object.assign(Object.assign(Object.assign({}, this.getTogglerMods()), targetProps), editableProps)) }));
-    }
-    renderBody(props, rows) {
-        const renderedDataRows = rows.map((props) => this.renderRow(props));
-        const maxHeight = (0, uui_core_1.isMobile)() ? document.documentElement.clientHeight : (this.props.dropdownHeight || pickerHeight);
-        const 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: () => this.toggleBodyOpening(false) },
-                react_1.default.createElement(DataPickerBody_1.DataPickerBody, Object.assign({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown' })),
-                !this.isSingleSelect() && this.renderFooter())));
-    }
-}
-exports.PickerInput = PickerInput;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerInput = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const PickerToggler_1 = __webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx");
+const DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
+const PickerItem_1 = __webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx");
+const DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
+const DataPickerFooter_1 = __webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx");
+const MobileDropdownWrapper_1 = __webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx");
+const types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
+const PickerInput_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerInput.scss */ "./components/pickers/PickerInput.scss"));
+const pickerHeight = 300;
+const pickerWidth = 360;
+class PickerInput extends uui_components_1.PickerInputBase {
+    constructor() {
+        super(...arguments);
+        this.renderItem = (item, rowProps) => {
+            return react_1.default.createElement(PickerItem_1.PickerItem, Object.assign({ title: this.getName(item), size: this.getRowSize() }, rowProps));
+        };
+        this.renderRow = (rowProps) => {
+            return this.props.renderRow ? this.props.renderRow(rowProps) : (react_1.default.createElement(DataPickerRow_1.DataPickerRow, Object.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 })));
+        };
+    }
+    toggleModalOpening(opened) {
+        const _a = this.props, { renderFooter } = _a, restProps = (0, tslib_1.__rest)(_a, ["renderFooter"]);
+        this.context.uuiModals.show(props => react_1.default.createElement(PickerModal_1.PickerModal, Object.assign({}, restProps, props, { caption: this.getPlaceholder(), initialValue: this.props.value, renderRow: this.renderRow, selectionMode: this.props.selectionMode, valueType: this.props.valueType })))
+            .then(newSelection => this.handleSelectionValueChange(newSelection))
+            .catch(() => null);
+    }
+    getRowSize() {
+        return (0, uui_core_1.isMobile)()
+            ? '48'
+            : this.props.editMode === 'modal'
+                ? '36'
+                : this.props.size;
+    }
+    getTogglerMods() {
+        return {
+            size: this.props.size,
+            mode: this.props.mode ? this.props.mode : types_1.EditMode.FORM,
+        };
+    }
+    renderFooter() {
+        const footerProps = this.getFooterProps();
+        return this.props.renderFooter
+            ? this.props.renderFooter(footerProps)
+            : react_1.default.createElement(DataPickerFooter_1.DataPickerFooter, Object.assign({}, footerProps, { size: this.props.size }));
+    }
+    renderTarget(targetProps) {
+        const renderTarget = this.props.renderToggler || (props => react_1.default.createElement(PickerToggler_1.PickerToggler, Object.assign({}, props)));
+        return (react_1.default.createElement(uui_core_1.IEditableDebouncer, { value: targetProps.value, onValueChange: this.handleTogglerSearchChange, render: editableProps => renderTarget(Object.assign(Object.assign(Object.assign({}, this.getTogglerMods()), targetProps), editableProps)) }));
+    }
+    renderBody(props, rows) {
+        const renderedDataRows = rows.map((props) => this.renderRow(props));
+        const maxHeight = (0, uui_core_1.isMobile)() ? document.documentElement.clientHeight : (this.props.dropdownHeight || pickerHeight);
+        const 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: () => this.toggleBodyOpening(false) },
+                react_1.default.createElement(DataPickerBody_1.DataPickerBody, Object.assign({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown' })),
+                !this.isSingleSelect() && this.renderFooter())));
+    }
+}
+exports.PickerInput = PickerInput;
 
 
 /***/ }),
@@ -2628,7 +2628,7 @@ exports.PickerInput = PickerInput;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"N_QoT","multiline-vertical-padding-24":"_1xr14","multilineVerticalPadding24":"_1xr14","multiline-vertical-padding-30":"_23cqa","multilineVerticalPadding30":"_23cqa","multiline-vertical-padding-36":"_2X0DH","multilineVerticalPadding36":"_2X0DH","multiline-vertical-padding-42":"_1EmB7","multilineVerticalPadding42":"_1EmB7","multiline-vertical-padding-48":"_1QQFv","multilineVerticalPadding48":"_1QQFv"};
+module.exports = {"root":"lhA85","multiline-vertical-padding-24":"_1YUBS","multilineVerticalPadding24":"_1YUBS","multiline-vertical-padding-30":"_2ElKQ","multilineVerticalPadding30":"_2ElKQ","multiline-vertical-padding-36":"YHeQ0","multilineVerticalPadding36":"YHeQ0","multiline-vertical-padding-42":"_2MF5I","multilineVerticalPadding42":"_2MF5I","multiline-vertical-padding-48":"_2yATR","multilineVerticalPadding48":"_2yATR"};
 
 /***/ }),
 
@@ -2640,36 +2640,36 @@ module.exports = {"root":"N_QoT","multiline-vertical-padding-24":"_1xr14","multi
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerItem = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerItem.scss */ "./components/pickers/PickerItem.scss"));
-const defaultSize = '36';
-class PickerItem extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.getAvatarSize = (size, isMultiline) => {
-            return isMultiline ? size : +size - 6;
-        };
-    }
-    render() {
-        const { size, avatarUrl, title, subtitle, isLoading, isDisabled } = this.props;
-        const itemSize = size && size !== 'none' ? size : defaultSize;
-        const 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-${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)))));
-    }
-}
-exports.PickerItem = PickerItem;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerItem = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerItem.scss */ "./components/pickers/PickerItem.scss"));
+const defaultSize = '36';
+class PickerItem extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.getAvatarSize = (size, isMultiline) => {
+            return isMultiline ? size : +size - 6;
+        };
+    }
+    render() {
+        const { size, avatarUrl, title, subtitle, isLoading, isDisabled } = this.props;
+        const itemSize = size && size !== 'none' ? size : defaultSize;
+        const 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-${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)))));
+    }
+}
+exports.PickerItem = PickerItem;
 
 
 /***/ }),
@@ -2682,55 +2682,55 @@ exports.PickerItem = PickerItem;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerList = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const PickerListItem_1 = __webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx");
-const PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
-class PickerList extends uui_components_1.PickerListBase {
-    constructor() {
-        super(...arguments);
-        this.sessionStartTime = (new Date()).getTime();
-        this.renderRow = (row) => {
-            return react_1.default.createElement(PickerListItem_1.PickerListItem, Object.assign({ getName: item => this.getName(item) }, row, { key: row.rowKey }));
-        };
-        this.handleShowPicker = () => {
-            this.context.uuiModals
-                .show(props => (react_1.default.createElement(PickerModal_1.PickerModal, Object.assign({}, props, this.props, { caption: this.props.placeholder || `Please select ${this.getEntityName() ? this.getEntityName() : ""}`, initialValue: this.props.value, selectionMode: this.props.selectionMode, valueType: this.props.valueType }))))
-                .then((value) => {
-                this.appendLastSelected([...this.getSelectedIdsArray(value)]);
-                this.props.onValueChange(value);
-            });
-        };
-        this.defaultRenderToggler = (props) => (react_1.default.createElement(buttons_1.LinkButton, Object.assign({ caption: 'Show all' }, props)));
-    }
-    render() {
-        const view = this.getView();
-        const viewProps = view.getListProps();
-        const selectedRows = view.getSelectedRows();
-        const rows = this.buildRowsList();
-        const showPicker = viewProps.totalCount == null || viewProps.totalCount > this.getMaxDefaultItems();
-        const renderToggler = this.props.renderModalToggler || this.defaultRenderToggler;
-        const 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(row => renderRow(row)),
-            showPicker && renderToggler({
-                onClick: this.handleShowPicker,
-                caption: this.getModalTogglerCaption(viewProps.totalCount, selectedRows.length),
-            }, selectedRows)));
-    }
-}
-exports.PickerList = PickerList;
-PickerList.contextType = uui_core_1.UuiContext;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerList = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const PickerListItem_1 = __webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx");
+const PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
+class PickerList extends uui_components_1.PickerListBase {
+    constructor() {
+        super(...arguments);
+        this.sessionStartTime = (new Date()).getTime();
+        this.renderRow = (row) => {
+            return react_1.default.createElement(PickerListItem_1.PickerListItem, Object.assign({ getName: item => this.getName(item) }, row, { key: row.rowKey }));
+        };
+        this.handleShowPicker = () => {
+            this.context.uuiModals
+                .show(props => (react_1.default.createElement(PickerModal_1.PickerModal, Object.assign({}, props, this.props, { caption: this.props.placeholder || `Please select ${this.getEntityName() ? this.getEntityName() : ""}`, initialValue: this.props.value, selectionMode: this.props.selectionMode, valueType: this.props.valueType }))))
+                .then((value) => {
+                this.appendLastSelected([...this.getSelectedIdsArray(value)]);
+                this.props.onValueChange(value);
+            });
+        };
+        this.defaultRenderToggler = (props) => (react_1.default.createElement(buttons_1.LinkButton, Object.assign({ caption: 'Show all' }, props)));
+    }
+    render() {
+        const view = this.getView();
+        const viewProps = view.getListProps();
+        const selectedRows = view.getSelectedRows();
+        const rows = this.buildRowsList();
+        const showPicker = viewProps.totalCount == null || viewProps.totalCount > this.getMaxDefaultItems();
+        const renderToggler = this.props.renderModalToggler || this.defaultRenderToggler;
+        const 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(row => renderRow(row)),
+            showPicker && renderToggler({
+                onClick: this.handleShowPicker,
+                caption: this.getModalTogglerCaption(viewProps.totalCount, selectedRows.length),
+            }, selectedRows)));
+    }
+}
+exports.PickerList = PickerList;
+PickerList.contextType = uui_core_1.UuiContext;
 
 
 /***/ }),
@@ -2743,7 +2743,7 @@ PickerList.contextType = uui_core_1.UuiContext;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"_1_CDZ"};
+module.exports = {"row":"_1VkeG"};
 
 /***/ }),
 
@@ -2755,34 +2755,34 @@ module.exports = {"row":"_1_CDZ"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerListItem = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const PickerListItem_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerListItem.scss */ "./components/pickers/PickerListItem.scss"));
-class PickerListItem extends react_1.default.Component {
-    render() {
-        let label;
-        if (this.props.isLoading) {
-            label = react_1.default.createElement(typography_1.TextPlaceholder, { wordsCount: 2 });
-        }
-        else {
-            label = this.props.getName(this.props.value);
-        }
-        let component;
-        if (this.props.checkbox) {
-            component = react_1.default.createElement(inputs_1.Checkbox, Object.assign({}, this.props.checkbox, { isDisabled: this.props.isLoading || this.props.checkbox.isDisabled, label: label, value: this.props.isChecked, onValueChange: () => 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: () => this.props.onSelect(this.props) });
-        }
-        return react_1.default.createElement("div", { className: PickerListItem_scss_1.default.row }, component);
-    }
-}
-exports.PickerListItem = PickerListItem;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerListItem = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const PickerListItem_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerListItem.scss */ "./components/pickers/PickerListItem.scss"));
+class PickerListItem extends react_1.default.Component {
+    render() {
+        let label;
+        if (this.props.isLoading) {
+            label = react_1.default.createElement(typography_1.TextPlaceholder, { wordsCount: 2 });
+        }
+        else {
+            label = this.props.getName(this.props.value);
+        }
+        let component;
+        if (this.props.checkbox) {
+            component = react_1.default.createElement(inputs_1.Checkbox, Object.assign({}, this.props.checkbox, { isDisabled: this.props.isLoading || this.props.checkbox.isDisabled, label: label, value: this.props.isChecked, onValueChange: () => 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: () => this.props.onSelect(this.props) });
+        }
+        return react_1.default.createElement("div", { className: PickerListItem_scss_1.default.row }, component);
+    }
+}
+exports.PickerListItem = PickerListItem;
 
 
 /***/ }),
@@ -2795,7 +2795,7 @@ exports.PickerListItem = PickerListItem;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"sub-header-wrapper":"_24MNK","subHeaderWrapper":"_24MNK","switch":"_1J2gq"};
+module.exports = {"sub-header-wrapper":"_3ho8r","subHeaderWrapper":"_3ho8r","switch":"_2woj9"};
 
 /***/ }),
 
@@ -2807,75 +2807,75 @@ module.exports = {"sub-header-wrapper":"_24MNK","subHeaderWrapper":"_24MNK","swi
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerModal = exports.PickerModalImpl = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerModal.scss */ "./components/pickers/PickerModal.scss"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
-const FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
-const overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-const DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-class PickerModalImpl extends uui_components_1.PickerModalBase {
-    renderRow(rowProps) {
-        return this.props.renderRow ? this.props.renderRow(rowProps) : (React.createElement(DataPickerRow_1.DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', padding: '24', size: '36', renderItem: (i) => React.createElement(typography_1.Text, { size: '36' }, rowProps.isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : this.getName(i)) })));
-    }
-    renderFooter(selectedDataRows) {
-        const hasSelection = selectedDataRows.length > 0;
-        const 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 ? () => this.clearSelection() : () => 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: () => this.props.abort() }),
-            React.createElement(buttons_1.Button, { color: 'accent', caption: i18n_1.i18n.pickerModal.selectButton, onClick: () => this.props.success(null) }));
-    }
-    render() {
-        const view = this.getView();
-        const dataRows = this.getRows();
-        const selectedDataRows = view.getSelectedRows();
-        const rows = dataRows.map(props => this.renderRow(props));
-        return (React.createElement(overlays_1.ModalBlocker, Object.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: () => this.props.abort() }),
-                React.createElement(FlexItems_1.FlexCell, { cx: css.subHeaderWrapper },
-                    React.createElement(FlexItems_1.FlexRow, { vPadding: '24' },
-                        React.createElement(inputs_1.SearchInput, Object.assign({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: (e) => (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, Object.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, Object.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 && (() => this.props.renderNotFound({
-                        search: this.state.dataSourceState.search,
-                        onClose: () => 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)))));
-    }
-}
-exports.PickerModalImpl = PickerModalImpl;
-class PickerModal extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { selection: this.props.initialValue };
-        this.lens = uui_core_1.Lens.onState(this);
-    }
-    render() {
-        return React.createElement(PickerModalImpl, Object.assign({}, this.props, this.lens.prop('selection').toProps(), { success: () => this.props.success(this.state.selection) }));
-    }
-}
-exports.PickerModal = PickerModal;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerModal = exports.PickerModalImpl = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerModal.scss */ "./components/pickers/PickerModal.scss"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
+const FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
+const overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
+const DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
+class PickerModalImpl extends uui_components_1.PickerModalBase {
+    renderRow(rowProps) {
+        return this.props.renderRow ? this.props.renderRow(rowProps) : (React.createElement(DataPickerRow_1.DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', padding: '24', size: '36', renderItem: (i) => React.createElement(typography_1.Text, { size: '36' }, rowProps.isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : this.getName(i)) })));
+    }
+    renderFooter(selectedDataRows) {
+        const hasSelection = selectedDataRows.length > 0;
+        const 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 ? () => this.clearSelection() : () => 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: () => this.props.abort() }),
+            React.createElement(buttons_1.Button, { color: 'accent', caption: i18n_1.i18n.pickerModal.selectButton, onClick: () => this.props.success(null) }));
+    }
+    render() {
+        const view = this.getView();
+        const dataRows = this.getRows();
+        const selectedDataRows = view.getSelectedRows();
+        const rows = dataRows.map(props => this.renderRow(props));
+        return (React.createElement(overlays_1.ModalBlocker, Object.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: () => this.props.abort() }),
+                React.createElement(FlexItems_1.FlexCell, { cx: css.subHeaderWrapper },
+                    React.createElement(FlexItems_1.FlexRow, { vPadding: '24' },
+                        React.createElement(inputs_1.SearchInput, Object.assign({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: (e) => (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, Object.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, Object.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 && (() => this.props.renderNotFound({
+                        search: this.state.dataSourceState.search,
+                        onClose: () => 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)))));
+    }
+}
+exports.PickerModalImpl = PickerModalImpl;
+class PickerModal extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { selection: this.props.initialValue };
+        this.lens = uui_core_1.Lens.onState(this);
+    }
+    render() {
+        return React.createElement(PickerModalImpl, Object.assign({}, this.props, this.lens.prop('selection').toProps(), { success: () => this.props.success(this.state.selection) }));
+    }
+}
+exports.PickerModal = PickerModal;
 
 
 /***/ }),
@@ -2888,7 +2888,7 @@ exports.PickerModal = PickerModal;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"v-I8s","mode-form":"_9RUwm","modeForm":"_9RUwm","mode-cell":"SRZOG","modeCell":"SRZOG","size-24":"_1MBII","size24":"_1MBII","size-30":"_2LgCP","size30":"_2LgCP","size-36":"_22Onq","size36":"_22Onq","size-42":"_1Wlde","size42":"_1Wlde","size-48":"alEs6","size48":"alEs6"};
+module.exports = {"root":"_1Gul6","mode-form":"KnUr_","modeForm":"KnUr_","mode-cell":"_2-l9w","modeCell":"_2-l9w","size-24":"_2IpuH","size24":"_2IpuH","size-30":"_1kRz3","size30":"_1kRz3","size-36":"_1V-Nx","size36":"_1V-Nx","size-42":"_1xKKy","size42":"_1xKKy","size-48":"dNtbg","size48":"dNtbg"};
 
 /***/ }),
 
@@ -2900,66 +2900,66 @@ module.exports = {"root":"v-I8s","mode-form":"_9RUwm","modeForm":"_9RUwm","mode-
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerToggler = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
-const 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");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerToggler.scss */ "./components/pickers/PickerToggler.scss"));
-const defaultSize = '36';
-const 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) {
-    const getPickerTogglerButtonSize = (propSize) => {
-        switch (propSize) {
-            case '48':
-                return '42';
-            case '42':
-                return '36';
-            case '36':
-                return '30';
-            case '30':
-                return '24';
-            case '24':
-                return '18';
-        }
-    };
-    const getCaption = (row) => {
-        var _a;
-        const 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);
-        }
-    };
-    const renderItem = (row) => {
-        var _a;
-        return (React.createElement(widgets_1.Tag, { key: row.id, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: e => {
-                row.onCheck && row.onCheck(row);
-                e.stopPropagation();
-            }, isDisabled: props.isDisabled || props.isReadonly || ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isDisabled) }));
-    };
-    return (React.createElement(uui_components_1.PickerToggler, Object.assign({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: (item) => props.getName ? props.getName(item) : item, 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
+const 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");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerToggler.scss */ "./components/pickers/PickerToggler.scss"));
+const defaultSize = '36';
+const 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) {
+    const getPickerTogglerButtonSize = (propSize) => {
+        switch (propSize) {
+            case '48':
+                return '42';
+            case '42':
+                return '36';
+            case '36':
+                return '30';
+            case '30':
+                return '24';
+            case '24':
+                return '18';
+        }
+    };
+    const getCaption = (row) => {
+        var _a;
+        const 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);
+        }
+    };
+    const renderItem = (row) => {
+        var _a;
+        return (React.createElement(widgets_1.Tag, { key: row.id, caption: getCaption(row), tabIndex: -1, size: props.size ? getPickerTogglerButtonSize(props.size) : '30', onClear: e => {
+                row.onCheck && row.onCheck(row);
+                e.stopPropagation();
+            }, isDisabled: props.isDisabled || props.isReadonly || ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isDisabled) }));
+    };
+    return (React.createElement(uui_components_1.PickerToggler, Object.assign({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: (item) => props.getName ? props.getName(item) : item, cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear, dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow })));
+}
+exports.PickerToggler = React.forwardRef(PickerTogglerComponent);
 
 
 /***/ }),
@@ -2972,20 +2972,20 @@ exports.PickerToggler = React.forwardRef(PickerTogglerComponent);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -2998,7 +2998,7 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"cell":"_2aax2","wrapper":"_3k3Co","align-widgets-top":"_3YpWd","alignWidgetsTop":"_3YpWd","size-24":"_38Wqy","size24":"_38Wqy","folding-arrow":"VkLcX","foldingArrow":"VkLcX","size-30":"HaSOB","size30":"HaSOB","size-36":"_4Y6bF","size36":"_4Y6bF","size-42":"_1MjNQ","size42":"_1MjNQ","size-48":"_3SVoA","size48":"_3SVoA","size-60":"_2x4Ew","size60":"_2x4Ew","align-widgets-center":"eG3Dl","alignWidgetsCenter":"eG3Dl","padding-12":"s6s39","padding12":"s6s39","padding-24":"_3bhlB","padding24":"_3bhlB","padding-left-12":"_3DR_L","paddingLeft12":"_3DR_L","padding-left-24":"c_DYF","paddingLeft24":"c_DYF","padding-right-24":"_3sT1l","paddingRight24":"_3sT1l","drag-handle":"_3PSem","dragHandle":"_3PSem","checkbox":"_1wliz","indent":"_3K8OA","folding-arrow-12":"_34Fqt","foldingArrow12":"_34Fqt","folding-arrow-18":"NVqeZ","foldingArrow18":"NVqeZ"};
+module.exports = {"cell":"_3KxJ-","wrapper":"_3w8AS","align-widgets-top":"_1OZ10","alignWidgetsTop":"_1OZ10","size-24":"qPpDK","size24":"qPpDK","folding-arrow":"_25L1v","foldingArrow":"_25L1v","size-30":"Zocaq","size30":"Zocaq","size-36":"_2DH7X","size36":"_2DH7X","size-42":"_3S9kh","size42":"_3S9kh","size-48":"_2xITY","size48":"_2xITY","size-60":"_1sdBd","size60":"_1sdBd","align-widgets-center":"_3wAOT","alignWidgetsCenter":"_3wAOT","padding-12":"r7Kej","padding12":"r7Kej","padding-24":"_2YOdg","padding24":"_2YOdg","padding-left-12":"XJXFl","paddingLeft12":"XJXFl","padding-left-24":"_1tfKN","paddingLeft24":"_1tfKN","padding-right-24":"_1fQNB","paddingRight24":"_1fQNB","drag-handle":"_2s_-B","dragHandle":"_2s_-B","checkbox":"_3vYRA","indent":"GreTN","folding-arrow-12":"_2vXgs","foldingArrow12":"_2vXgs","folding-arrow-18":"tlTPm","foldingArrow18":"tlTPm"};
 
 /***/ }),
 
@@ -3010,45 +3010,45 @@ module.exports = {"cell":"_2aax2","wrapper":"_3k3Co","align-widgets-top":"_3YpWd
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableCell = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-const tree_folding_arrow_svg_1 = __webpack_require__(/*! ../../icons/tree_folding_arrow.svg */ "./icons/tree_folding_arrow.svg");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataTableCell.scss */ "./components/tables/DataTableCell.scss"));
-class DataTableCell extends React.Component {
-    constructor() {
-        var _a, _b, _c;
-        super(...arguments);
-        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 = () => { 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 = () => {
-            var _a;
-            const row = this.props.rowProps;
-            const additionalItemSize = +this.props.size < 30 ? '12' : '18';
-            const 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: () => 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-${additionalItemSize}`], uui_core_1.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))),
-                cellContent));
-        };
-    }
-    render() {
-        return (React.createElement(layout_1.FlexCell, Object.assign({}, this.props.column, { rawProps: { role: 'cell' }, cx: (0, uui_core_1.cx)(css.cell, this.props.isFirstColumn && this.hasDepsWidgets && css.wrapper, css['size-' + (this.props.size || '36')], css[`padding-${this.props.padding || '12'}`], this.props.isFirstColumn && css[`padding-left-${this.props.padding || '24'}`], this.props.isLastColumn && css['padding-right-24'], this.props.column.cx, css[`align-widgets-${this.props.alignActions || 'top'}`]) }), this.getContent()));
-    }
-}
-exports.DataTableCell = DataTableCell;
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableCell = void 0;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
+const layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
+const inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
+const tree_folding_arrow_svg_1 = __webpack_require__(/*! ../../icons/tree_folding_arrow.svg */ "./icons/tree_folding_arrow.svg");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataTableCell.scss */ "./components/tables/DataTableCell.scss"));
+class DataTableCell extends React.Component {
+    constructor() {
+        var _a, _b, _c;
+        super(...arguments);
+        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 = () => { 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 = () => {
+            var _a;
+            const row = this.props.rowProps;
+            const additionalItemSize = +this.props.size < 30 ? '12' : '18';
+            const 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: () => 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-${additionalItemSize}`], uui_core_1.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))),
+                cellContent));
+        };
+    }
+    render() {
+        return (React.createElement(layout_1.FlexCell, Object.assign({}, this.props.column, { rawProps: { role: 'cell' }, cx: (0, uui_core_1.cx)(css.cell, this.props.isFirstColumn && this.hasDepsWidgets && css.wrapper, css['size-' + (this.props.size || '36')], css[`padding-${this.props.padding || '12'}`], this.props.isFirstColumn && css[`padding-left-${this.props.padding || '24'}`], this.props.isLastColumn && css['padding-right-24'], this.props.column.cx, css[`align-widgets-${this.props.alignActions || 'top'}`]) }), this.getContent()));
+    }
+}
+exports.DataTableCell = DataTableCell;
 
 
 /***/ }),
@@ -3061,7 +3061,7 @@ exports.DataTableCell = DataTableCell;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"container":"_1osBr","target":"nWM23","panel":"_1Vf7i","divider":"_2kOvV","input":"_2aEN7","notification":"_3pNI8"};
+module.exports = {"container":"_26kRn","target":"_1ksWT","panel":"_1Z0vo","divider":"_9Q26E","input":"_3GD6e","notification":"_1s0wg"};
 
 /***/ }),
 
@@ -3073,66 +3073,66 @@ module.exports = {"container":"_1osBr","target":"nWM23","panel":"_1Vf7i","divide
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Preset = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const __1 = __webpack_require__(/*! ../../ */ "./components/index.ts");
-const 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");
-const Preset_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Preset.scss */ "./components/tables/Presets/Preset.scss"));
-const Preset = ({ preset, isActive, hasChanged, choosePreset, duplicatePreset, deletePreset, updatePreset, }) => {
-    const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
-    const [renamingValue, setRenamingValue] = (0, react_1.useState)("");
-    const handleChoose = (0, react_1.useCallback)(() => choosePreset(preset), [preset, choosePreset]);
-    const handleUpdate = (0, react_1.useCallback)(() => updatePreset(preset), [preset, updatePreset]);
-    const acceptRenaming = (0, react_1.useCallback)(() => {
-        if (renamingValue) {
-            const newPreset = Object.assign(Object.assign({}, preset), { name: renamingValue });
-            updatePreset(newPreset);
-        }
-        setIsRenaming(false);
-    }, [renamingValue, updatePreset]);
-    const renderBody = (0, react_1.useCallback)((props) => {
-        const handleDuplicate = () => {
-            duplicatePreset(preset);
-            props.onClose();
-        };
-        const startRenaming = () => {
-            setIsRenaming(true);
-            setRenamingValue(preset.name);
-            props.onClose();
-        };
-        const handleDelete = () => {
-            deletePreset(preset);
-            props.onClose();
-        };
-        const update = () => {
-            handleUpdate();
-            props.onClose();
-        };
-        const choose = () => {
-            choosePreset(preset);
-            props.onClose();
-        };
-        return (react_1.default.createElement(__1.DropdownMenuBody, Object.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]);
-    const renderTarget = (0, react_1.useCallback)((props) => {
-        return (react_1.default.createElement(__1.Button, Object.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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const __1 = __webpack_require__(/*! ../../ */ "./components/index.ts");
+const 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");
+const Preset_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Preset.scss */ "./components/tables/Presets/Preset.scss"));
+const Preset = ({ preset, isActive, hasChanged, choosePreset, duplicatePreset, deletePreset, updatePreset, }) => {
+    const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
+    const [renamingValue, setRenamingValue] = (0, react_1.useState)("");
+    const handleChoose = (0, react_1.useCallback)(() => choosePreset(preset), [preset, choosePreset]);
+    const handleUpdate = (0, react_1.useCallback)(() => updatePreset(preset), [preset, updatePreset]);
+    const acceptRenaming = (0, react_1.useCallback)(() => {
+        if (renamingValue) {
+            const newPreset = Object.assign(Object.assign({}, preset), { name: renamingValue });
+            updatePreset(newPreset);
+        }
+        setIsRenaming(false);
+    }, [renamingValue, updatePreset]);
+    const renderBody = (0, react_1.useCallback)((props) => {
+        const handleDuplicate = () => {
+            duplicatePreset(preset);
+            props.onClose();
+        };
+        const startRenaming = () => {
+            setIsRenaming(true);
+            setRenamingValue(preset.name);
+            props.onClose();
+        };
+        const handleDelete = () => {
+            deletePreset(preset);
+            props.onClose();
+        };
+        const update = () => {
+            handleUpdate();
+            props.onClose();
+        };
+        const choose = () => {
+            choosePreset(preset);
+            props.onClose();
+        };
+        return (react_1.default.createElement(__1.DropdownMenuBody, Object.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]);
+    const renderTarget = (0, react_1.useCallback)((props) => {
+        return (react_1.default.createElement(__1.Button, Object.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;
 
 
 /***/ }),
@@ -3145,7 +3145,7 @@ exports.Preset = Preset;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"bhz5-"};
+module.exports = {"row":"_3G09O"};
 
 /***/ }),
 
@@ -3157,29 +3157,29 @@ module.exports = {"row":"bhz5-"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Presets = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const index_1 = __webpack_require__(/*! ../../index */ "./components/index.ts");
-const layout_1 = __webpack_require__(/*! ../../layout */ "./components/layout/index.ts");
-const Preset_1 = __webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx");
-const Presets_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Presets.scss */ "./components/tables/Presets/Presets.scss"));
-const PresetsImpl = ({ tableState, presets, createNewPreset, activePresetId, hasPresetChanged, choosePreset, duplicatePreset, deletePreset, updatePreset }) => {
-    const newPresetTitle = "New preset";
-    const saveNewPreset = (0, react_1.useCallback)(() => {
-        createNewPreset(newPresetTitle);
-    }, [createNewPreset, newPresetTitle]);
-    const activePreset = presets.find(p => p.id === activePresetId);
-    const hasActivePresetChanged = (0, react_1.useMemo)(() => {
-        return hasPresetChanged(activePreset);
-    }, [activePreset, tableState.filter]);
-    return (react_1.default.createElement(layout_1.FlexRow, { spacing: "6", size: "48", padding: "18", cx: Presets_scss_1.default.row },
-        presets.map(preset => (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, key: preset.id }))),
-        hasActivePresetChanged && (react_1.default.createElement(index_1.Button, { caption: `Save as ${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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const index_1 = __webpack_require__(/*! ../../index */ "./components/index.ts");
+const layout_1 = __webpack_require__(/*! ../../layout */ "./components/layout/index.ts");
+const Preset_1 = __webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx");
+const Presets_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Presets.scss */ "./components/tables/Presets/Presets.scss"));
+const PresetsImpl = ({ tableState, presets, createNewPreset, activePresetId, hasPresetChanged, choosePreset, duplicatePreset, deletePreset, updatePreset }) => {
+    const newPresetTitle = "New preset";
+    const saveNewPreset = (0, react_1.useCallback)(() => {
+        createNewPreset(newPresetTitle);
+    }, [createNewPreset, newPresetTitle]);
+    const activePreset = presets.find(p => p.id === activePresetId);
+    const hasActivePresetChanged = (0, react_1.useMemo)(() => {
+        return hasPresetChanged(activePreset);
+    }, [activePreset, tableState.filter]);
+    return (react_1.default.createElement(layout_1.FlexRow, { spacing: "6", size: "48", padding: "18", cx: Presets_scss_1.default.row },
+        presets.map(preset => (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, key: preset.id }))),
+        hasActivePresetChanged && (react_1.default.createElement(index_1.Button, { caption: `Save as ${newPresetTitle}`, onClick: saveNewPreset, color: 'accent', mode: 'solid', size: '24' }))));
+};
+exports.Presets = react_1.default.memo(PresetsImpl);
 
 
 /***/ }),
@@ -3192,11 +3192,11 @@ exports.Presets = react_1.default.memo(PresetsImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -3209,12 +3209,12 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -3227,8 +3227,8 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", { value: true });
 
 
 /***/ }),
@@ -3241,20 +3241,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 = {}));
 
 
 /***/ }),
@@ -3267,7 +3267,7 @@ var EditMode;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_2hA-u"};
+module.exports = {"root":"hkM0w"};
 
 /***/ }),
 
@@ -3279,29 +3279,29 @@ module.exports = {"root":"_2hA-u"};
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Text.scss */ "./components/typography/Text.scss"));
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const 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) {
-    const textClasses = (0, textLayout_1.getTextClasses)({
-        size: mods.size || '36',
-        lineHeight: mods.lineHeight,
-        fontSize: mods.fontSize,
-    }, false);
-    return [
-        `font-${mods.font || 'regular'}`,
-        `text-color-${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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Text.scss */ "./components/typography/Text.scss"));
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const 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) {
+    const textClasses = (0, textLayout_1.getTextClasses)({
+        size: mods.size || '36',
+        lineHeight: mods.lineHeight,
+        fontSize: mods.fontSize,
+    }, false);
+    return [
+        `font-${mods.font || 'regular'}`,
+        `text-color-${mods.color || 'primary'}`,
+        css.root,
+    ].concat(textClasses);
+}
+exports.Text = (0, uui_core_1.withMods)(uui_components_1.Text, applyTextMods);
 
 
 /***/ }),
@@ -3314,7 +3314,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":"_2uQBc","loading-word":"_2ertL","loadingWord":"_2ertL","animated-loading":"gE82w","animatedLoading":"gE82w","skeleton_loading":"de2Bs","skeletonLoading":"de2Bs"};
+module.exports = {"container":"_3C1JI","loading-word":"_39Smh","loadingWord":"_39Smh","animated-loading":"_1Xm8A","animatedLoading":"_1Xm8A","skeleton_loading":"_17xG_","skeletonLoading":"_17xG_"};
 
 /***/ }),
 
@@ -3326,31 +3326,31 @@ module.exports = {"container":"_2uQBc","loading-word":"_2ertL","loadingWord":"_2
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextPlaceholder = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-const classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-const 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");
-const TextPlaceholder = (props) => {
-    const pattern = `0`;
-    const text = React.useMemo(() => {
-        const words = [];
-        for (let i = 0; i < (props.wordsCount || 1); i++) {
-            let 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((it, index) => (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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
+const classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
+const 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");
+const TextPlaceholder = (props) => {
+    const pattern = `0`;
+    const text = React.useMemo(() => {
+        const words = [];
+        for (let i = 0; i < (props.wordsCount || 1); i++) {
+            let 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((it, index) => (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;
 
 
 /***/ }),
@@ -3363,11 +3363,11 @@ exports.TextPlaceholder = TextPlaceholder;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -3380,12 +3380,12 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, () => []);
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, () => []);
 
 
 /***/ }),
@@ -3398,7 +3398,7 @@ exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, () => []);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_23Lwp","size-18":"_31dkO","size18":"_31dkO","fill-transparent":"hlKMJ","fillTransparent":"hlKMJ","size-24":"_1YcL-","size24":"_1YcL-","size-30":"_2jd90","size30":"_2jd90","size-36":"_2Mz3c","size36":"_2Mz3c","size-42":"_30rcT","size42":"_30rcT","size-48":"_3i-5f","size48":"_3i-5f","fill-solid":"_3Pg94","fillSolid":"_3Pg94"};
+module.exports = {"root":"OO4AG","size-18":"lvozr","size18":"lvozr","fill-transparent":"lnE3n","fillTransparent":"lnE3n","size-24":"_1zSrj","size24":"_1zSrj","size-30":"_2epdE","size30":"_2epdE","size-36":"_3tU7B","size36":"_3tU7B","size-42":"_8FqBb","size42":"_8FqBb","size-48":"_2Bg_K","size48":"_2Bg_K","fill-solid":"_2O-Oc","fillSolid":"_2O-Oc"};
 
 /***/ }),
 
@@ -3410,40 +3410,40 @@ module.exports = {"root":"_23Lwp","size-18":"_31dkO","size18":"_31dkO","fill-tra
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = exports.applyBadgeMods = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
-const 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");
-const defaultSize = '36';
-const mapSize = {
-    '48': '48',
-    '42': '48',
-    '36': '36',
-    '30': '30',
-    '24': '30',
-    '18': '18',
-};
-function applyBadgeMods(mods) {
-    return [
-        `badge-color-${(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, (props) => ({
-    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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
+const 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");
+const defaultSize = '36';
+const mapSize = {
+    '48': '48',
+    '42': '48',
+    '36': '36',
+    '30': '30',
+    '24': '30',
+    '18': '18',
+};
+function applyBadgeMods(mods) {
+    return [
+        `badge-color-${(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, (props) => ({
+    dropdownIcon: icons_1.systemIcons[props.size && mapSize[props.size] || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[props.size && mapSize[props.size] || defaultSize].clear,
+    countPosition: 'left',
+}));
 
 
 /***/ }),
@@ -3456,7 +3456,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":"_2K1zB","size-18":"GGpjN","size18":"GGpjN","size-24":"_2_Cff","size24":"_2_Cff","size-30":"KPhis","size30":"KPhis","size-36":"_1Cyjz","size36":"_1Cyjz","size-42":"_2saLz","size42":"_2saLz","size-48":"_1sozt","size48":"_1sozt"};
+module.exports = {"root":"_2c4K9","size-18":"_29zLP","size18":"_29zLP","size-24":"MLKYa","size24":"MLKYa","size-30":"_2orIH","size30":"_2orIH","size-36":"_1K9y8","size36":"_1K9y8","size-42":"fsPB-","size42":"fsPB-","size-48":"_2DmW2","size48":"_2DmW2"};
 
 /***/ }),
 
@@ -3468,38 +3468,38 @@ module.exports = {"root":"_2K1zB","size-18":"GGpjN","size18":"GGpjN","size-24":"
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = exports.applyTagMods = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-const 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");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tag.scss */ "./components/widgets/Tag.scss"));
-const defaultSize = '36';
-const 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, (props) => ({
-    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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+const 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");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tag.scss */ "./components/widgets/Tag.scss"));
+const defaultSize = '36';
+const 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, (props) => ({
+    dropdownIcon: icons_1.systemIcons[mapSize[props.size] || defaultSize].foldingArrow,
+    clearIcon: icons_1.systemIcons[mapSize[props.size] || defaultSize].clear,
+}));
 
 
 /***/ }),
@@ -3512,12 +3512,12 @@ exports.Tag = (0, uui_core_1.withMods)(uui_components_1.Button, applyTagMods, (p
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -3530,40 +3530,40 @@ const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextClasses = void 0;
-const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ../assets/styles/text-layout.scss */ "./assets/styles/text-layout.scss"));
-const 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],
-        ];
-    }
-    const setting = {
-        size: props.size,
-        lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
-        fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
-    };
-    const 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;
+const tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ../assets/styles/text-layout.scss */ "./assets/styles/text-layout.scss"));
+const 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],
+        ];
+    }
+    const setting = {
+        size: props.size,
+        lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
+        fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
+    };
+    const 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;
 
 
 /***/ }),
@@ -3576,59 +3576,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',
+    },
+};
 
 
 /***/ }),
@@ -4118,7 +4118,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");
 
 
 /***/ }),
@@ -4167,7 +4167,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");
 
 
 /***/ }),
@@ -4362,7 +4362,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");
 
 
 /***/ }),
@@ -4410,7 +4410,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");
 
 
 /***/ }),
@@ -4423,103 +4423,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;
-const btn_cross_12_svg_1 = __webpack_require__(/*! ./btn-cross-12.svg */ "./icons/btn-cross-12.svg");
-const btn_cross_18_svg_1 = __webpack_require__(/*! ./btn-cross-18.svg */ "./icons/btn-cross-18.svg");
-const btn_cross_24_svg_1 = __webpack_require__(/*! ./btn-cross-24.svg */ "./icons/btn-cross-24.svg");
-const folding_arrow_12_svg_1 = __webpack_require__(/*! ./folding-arrow-12.svg */ "./icons/folding-arrow-12.svg");
-const folding_arrow_18_svg_1 = __webpack_require__(/*! ./folding-arrow-18.svg */ "./icons/folding-arrow-18.svg");
-const folding_arrow_24_svg_1 = __webpack_require__(/*! ./folding-arrow-24.svg */ "./icons/folding-arrow-24.svg");
-const accept_12_svg_1 = __webpack_require__(/*! ./accept-12.svg */ "./icons/accept-12.svg");
-const accept_18_svg_1 = __webpack_require__(/*! ./accept-18.svg */ "./icons/accept-18.svg");
-const accept_24_svg_1 = __webpack_require__(/*! ./accept-24.svg */ "./icons/accept-24.svg");
-const search_12_svg_1 = __webpack_require__(/*! ./search-12.svg */ "./icons/search-12.svg");
-const search_18_svg_1 = __webpack_require__(/*! ./search-18.svg */ "./icons/search-18.svg");
-const search_24_svg_1 = __webpack_require__(/*! ./search-24.svg */ "./icons/search-24.svg");
-const calendar_12_svg_1 = __webpack_require__(/*! ./calendar-12.svg */ "./icons/calendar-12.svg");
-const calendar_18_svg_1 = __webpack_require__(/*! ./calendar-18.svg */ "./icons/calendar-18.svg");
-const calendar_24_svg_1 = __webpack_require__(/*! ./calendar-24.svg */ "./icons/calendar-24.svg");
-const info_12_svg_1 = __webpack_require__(/*! ./info-12.svg */ "./icons/info-12.svg");
-const info_18_svg_1 = __webpack_require__(/*! ./info-18.svg */ "./icons/info-18.svg");
-const info_24_svg_1 = __webpack_require__(/*! ./info-24.svg */ "./icons/info-24.svg");
-const help_fill_10_svg_1 = __webpack_require__(/*! ./help-fill-10.svg */ "./icons/help-fill-10.svg");
-const 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;
+const btn_cross_12_svg_1 = __webpack_require__(/*! ./btn-cross-12.svg */ "./icons/btn-cross-12.svg");
+const btn_cross_18_svg_1 = __webpack_require__(/*! ./btn-cross-18.svg */ "./icons/btn-cross-18.svg");
+const btn_cross_24_svg_1 = __webpack_require__(/*! ./btn-cross-24.svg */ "./icons/btn-cross-24.svg");
+const folding_arrow_12_svg_1 = __webpack_require__(/*! ./folding-arrow-12.svg */ "./icons/folding-arrow-12.svg");
+const folding_arrow_18_svg_1 = __webpack_require__(/*! ./folding-arrow-18.svg */ "./icons/folding-arrow-18.svg");
+const folding_arrow_24_svg_1 = __webpack_require__(/*! ./folding-arrow-24.svg */ "./icons/folding-arrow-24.svg");
+const accept_12_svg_1 = __webpack_require__(/*! ./accept-12.svg */ "./icons/accept-12.svg");
+const accept_18_svg_1 = __webpack_require__(/*! ./accept-18.svg */ "./icons/accept-18.svg");
+const accept_24_svg_1 = __webpack_require__(/*! ./accept-24.svg */ "./icons/accept-24.svg");
+const search_12_svg_1 = __webpack_require__(/*! ./search-12.svg */ "./icons/search-12.svg");
+const search_18_svg_1 = __webpack_require__(/*! ./search-18.svg */ "./icons/search-18.svg");
+const search_24_svg_1 = __webpack_require__(/*! ./search-24.svg */ "./icons/search-24.svg");
+const calendar_12_svg_1 = __webpack_require__(/*! ./calendar-12.svg */ "./icons/calendar-12.svg");
+const calendar_18_svg_1 = __webpack_require__(/*! ./calendar-18.svg */ "./icons/calendar-18.svg");
+const calendar_24_svg_1 = __webpack_require__(/*! ./calendar-24.svg */ "./icons/calendar-24.svg");
+const info_12_svg_1 = __webpack_require__(/*! ./info-12.svg */ "./icons/info-12.svg");
+const info_18_svg_1 = __webpack_require__(/*! ./info-18.svg */ "./icons/info-18.svg");
+const info_24_svg_1 = __webpack_require__(/*! ./info-24.svg */ "./icons/info-24.svg");
+const help_fill_10_svg_1 = __webpack_require__(/*! ./help-fill-10.svg */ "./icons/help-fill-10.svg");
+const 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,
+    },
+};
 
 
 /***/ }),
@@ -4568,7 +4568,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");
 
 
 /***/ }),
@@ -4960,7 +4960,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");
 
 
 /***/ }),
@@ -5009,7 +5009,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");
 
 
 /***/ }),
@@ -5059,7 +5059,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");
 
 
 /***/ }),
@@ -5310,7 +5310,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");
 
 
 /***/ }),
@@ -5323,13 +5323,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 });
-const 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 });
+const 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);
 
 
 /***/ }),
@@ -5341,7 +5341,7 @@ __webpack_require__(/*! ./assets/styles/font-faces.scss */ "./assets/styles/font
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(/*! /Users/Aliaksei_Manetau/WebstormProjects/uui/uui/index.tsx */"./index.tsx");
+module.exports = __webpack_require__(/*! D:\dev\UUI-main\uui\index.tsx */"./index.tsx");
 
 
 /***/ }),