@epam/uui 4.8.5 → 4.9.0-rc.1

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":"_1yD-h","lineHeight12":"_1yD-h","line-height-18":"_2pn65","lineHeight18":"_2pn65","line-height-24":"_11Yot","lineHeight24":"_11Yot","line-height-30":"hMksP","lineHeight30":"hMksP","font-size-10":"_1HPca","fontSize10":"_1HPca","font-size-12":"_1Yvvk","fontSize12":"_1Yvvk","font-size-14":"_1rit5","fontSize14":"_1rit5","font-size-16":"_3RLrb","fontSize16":"_3RLrb","font-size-18":"_3lWd7","fontSize18":"_3lWd7","font-size-24":"_3VUVD","fontSize24":"_3VUVD","v-padding-2":"_1Jyzk","vPadding2":"_1Jyzk","v-padding-3":"_3e-Xm","vPadding3":"_3e-Xm","v-padding-5":"_3Dt5T","vPadding5":"_3Dt5T","v-padding-6":"_3qkk3","vPadding6":"_3qkk3","v-padding-8":"_17BLL","vPadding8":"_17BLL","v-padding-9":"_2q2tb","vPadding9":"_2q2tb","v-padding-11":"_1iHqz","vPadding11":"_1iHqz","v-padding-12":"grZZd","vPadding12":"grZZd","v-padding-14":"_2Lsh0","vPadding14":"_2Lsh0","v-padding-15":"Btid4","vPadding15":"Btid4","v-padding-17":"_2Tjb1","vPadding17":"_2Tjb1","v-padding-18":"_3eNeD","vPadding18":"_3eNeD","v-padding-23":"_3JVX0","vPadding23":"_3JVX0","v-padding-24":"_1Nvv7","vPadding24":"_1Nvv7"};
+module.exports = {"line-height-12":"_3-e5A","lineHeight12":"_3-e5A","line-height-18":"_3lj_p","lineHeight18":"_3lj_p","line-height-24":"_2_LYd","lineHeight24":"_2_LYd","line-height-30":"_3H0Ri","lineHeight30":"_3H0Ri","font-size-10":"GeUqX","fontSize10":"GeUqX","font-size-12":"v_qh1","fontSize12":"v_qh1","font-size-14":"_1T4ZM","fontSize14":"_1T4ZM","font-size-16":"_3ghNL","fontSize16":"_3ghNL","font-size-18":"_2CaRF","fontSize18":"_2CaRF","font-size-24":"_1rEJV","fontSize24":"_1rEJV","v-padding-2":"_3FUhH","vPadding2":"_3FUhH","v-padding-3":"_3Sv6C","vPadding3":"_3Sv6C","v-padding-5":"_3yHDc","vPadding5":"_3yHDc","v-padding-6":"_2jvYp","vPadding6":"_2jvYp","v-padding-8":"_3UiPe","vPadding8":"_3UiPe","v-padding-9":"_3RYuH","vPadding9":"_3RYuH","v-padding-11":"_1zt0r","vPadding11":"_1zt0r","v-padding-12":"_343mc","vPadding12":"_343mc","v-padding-14":"vIGem","vPadding14":"vIGem","v-padding-15":"_3pqqp","vPadding15":"_3pqqp","v-padding-17":"K8L7w","vPadding17":"K8L7w","v-padding-18":"_12XE5","vPadding18":"_12XE5","v-padding-23":"_34nm3","vPadding23":"_34nm3","v-padding-24":"_2CsFl","vPadding24":"_2CsFl"};
 
 /***/ }),
 
@@ -905,7 +905,7 @@ module.exports = {"line-height-12":"_1yD-h","lineHeight12":"_1yD-h","line-height
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1jjNH","mode-solid":"_3NrLA","modeSolid":"_3NrLA","mode-outline":"_3Le56","modeOutline":"_3Le56","mode-none":"gNPAF","modeNone":"gNPAF","mode-ghost":"_2lGsA","modeGhost":"_2lGsA","size-24":"_1771n","size24":"_1771n","size-30":"_3V3VQ","size30":"_3V3VQ","size-36":"B7sbA","size36":"B7sbA","size-42":"_3B0KL","size42":"_3B0KL","size-48":"xbZVo","size48":"xbZVo"};
+module.exports = {"root":"_2MpJQ","mode-solid":"SJ6OM","modeSolid":"SJ6OM","mode-outline":"_2LQD2","modeOutline":"_2LQD2","mode-none":"_2Un2Y","modeNone":"_2Un2Y","mode-ghost":"_1V5jf","modeGhost":"_1V5jf","size-24":"GEavZ","size24":"GEavZ","size-30":"_2HM8g","size30":"_2HM8g","size-36":"_3GOqz","size36":"_3GOqz","size-42":"_5CpdW","size42":"_5CpdW","size-48":"_2Tz07","size48":"_2Tz07"};
 
 /***/ }),
 
@@ -920,28 +920,28 @@ module.exports = {"root":"_1jjNH","mode-solid":"_3NrLA","modeSolid":"_3NrLA","mo
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = exports.applyButtonMods = exports.allButtonColors = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Button.scss */ "./components/buttons/Button.scss"));
+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'];
-var defaultSize = '36';
+const defaultSize = '36';
 function applyButtonMods(mods) {
     return [
         'button-vars',
-        "button-color-".concat(mods.color || 'primary'),
+        `button-color-${mods.color || 'primary'}`,
         css.root,
-        css["size-".concat(mods.size || defaultSize)],
-        css["mode-".concat(mods.mode || 'solid')],
+        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, function (props) { return ({
+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":"_2hip6"};
+module.exports = {"root":"_3z9uB"};
 
 /***/ }),
 
@@ -969,15 +969,15 @@ module.exports = {"root":"_2hip6"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconButton = exports.allIconColors = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./IconButton.scss */ "./components/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-".concat(mods.color || 'default'),
+        `icon-button-color-${mods.color || 'default'}`,
         css.root,
     ];
 }
@@ -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":"HD0yY","size-18":"_3-dm_","size18":"_3-dm_","size-24":"_2Pcpv","size24":"_2Pcpv","size-30":"_2qJZf","size30":"_2qJZf","size-36":"_29Nlq","size36":"_29Nlq","size-42":"be_VT","size42":"be_VT","size-48":"_3SC1Y","size48":"_3SC1Y"};
+module.exports = {"root":"_3pgx_","size-18":"_2y_FV","size18":"_2y_FV","size-24":"_3_O5Y","size24":"_3_O5Y","size-30":"_14cwo","size30":"_14cwo","size-36":"_3Wiol","size36":"_3Wiol","size-42":"_3juMh","size42":"_3juMh","size-48":"BhLr8","size48":"BhLr8"};
 
 /***/ }),
 
@@ -1009,25 +1009,26 @@ module.exports = {"root":"HD0yY","size-18":"_3-dm_","size18":"_3-dm_","size-24":
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkButton = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LinkButton.scss */ "./components/buttons/LinkButton.scss"));
+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");
-var defaultSize = '36';
+const defaultSize = '36';
 function applyLinkButtonMods(mods) {
-    return (0, tslib_1.__spreadArray)([
+    return [
         'link-button-vars',
         css.root,
-        css['size-' + (mods.size || defaultSize)]
-    ], (0, helper_1.getIconClass)(mods), true);
+        css['size-' + (mods.size || defaultSize)],
+        ...(0, helper_1.getIconClass)(mods),
+    ];
 }
-exports.LinkButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyLinkButtonMods, function (props) { return ({
+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,
-}); });
+}));
 
 
 /***/ }),
@@ -1040,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":"iO5HH","uui-notification":"IJpcq","uuiNotification":"IJpcq","size-36":"_1Z39o","size36":"_1Z39o","size-48":"_28Fsr","size48":"_28Fsr","size-60":"_3m-EP","size60":"_3m-EP"};
+module.exports = {"root":"_3YM91","uui-notification":"_1leQ_","uuiNotification":"_1leQ_","size-36":"_16tIO","size36":"_16tIO","size-48":"dlVV2","size48":"dlVV2","size-60":"_1EmoE","size60":"_1EmoE"};
 
 /***/ }),
 
@@ -1055,22 +1056,23 @@ module.exports = {"root":"iO5HH","uui-notification":"IJpcq","uuiNotification":"I
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabButton = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var helper_1 = __webpack_require__(/*! ./helper */ "./components/buttons/helper.ts");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TabButton.scss */ "./components/buttons/TabButton.scss"));
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TabButton.scss */ "./components/buttons/TabButton.scss"));
 function applyTabButtonMods(mods) {
-    return (0, tslib_1.__spreadArray)([
+    return [
         'tab-button-vars',
         css.root,
         css['size-' + (mods.size || '48')],
-        mods.withNotify && css.uuiNotification
-    ], (0, helper_1.getIconClass)(mods), true);
+        mods.withNotify && css.uuiNotification,
+        ...(0, helper_1.getIconClass)(mods),
+    ];
 }
-exports.TabButton = (0, uui_core_1.withMods)(uui_components_1.Button, applyTabButtonMods, function (props) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({ dropdownIcon: icons_1.systemIcons['36'].foldingArrow, clearIcon: icons_1.systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: (0, tslib_1.__assign)({ role: 'tab' }, props.rawProps) })); });
+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) })));
 
 
 /***/ }),
@@ -1083,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":"_1ZgtL"};
+module.exports = {"root":"_3xu2j"};
 
 /***/ }),
 
@@ -1098,10 +1100,10 @@ module.exports = {"root":"_1ZgtL"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VerticalTabButton = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var VerticalTabButton_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./VerticalTabButton.scss */ "./components/buttons/VerticalTabButton.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var TabButton_1 = __webpack_require__(/*! ./TabButton */ "./components/buttons/TabButton.tsx");
+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,
@@ -1124,7 +1126,7 @@ exports.VerticalTabButton = (0, uui_core_1.withMods)(TabButton_1.TabButton, appl
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIconClass = void 0;
 function getIconClass(props) {
-    var classList = {
+    let classList = {
         'has-left-icon': false,
         'has-right-icon': false,
     };
@@ -1157,7 +1159,7 @@ exports.getIconClass = getIconClass;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -1177,7 +1179,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -1199,7 +1201,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"mEVKx","size-18":"_3gooq","size18":"_3gooq","size-12":"_3NXJ1","size12":"_3NXJ1"};
+module.exports = {"root":"_2VGyj","size-18":"_2FjPh","size18":"_2FjPh","size-12":"_18zVX","size12":"_18zVX"};
 
 /***/ }),
 
@@ -1214,14 +1216,14 @@ module.exports = {"root":"mEVKx","size-18":"_3gooq","size18":"_3gooq","size-12":
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = exports.applyCheckboxMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Checkbox.scss */ "./components/inputs/Checkbox.scss"));
-var check_12_svg_1 = __webpack_require__(/*! ../../icons/check-12.svg */ "./icons/check-12.svg");
-var check_18_svg_1 = __webpack_require__(/*! ../../icons/check-18.svg */ "./icons/check-18.svg");
-var partly_select_12_svg_1 = __webpack_require__(/*! ../../icons/partly-select-12.svg */ "./icons/partly-select-12.svg");
-var partly_select_18_svg_1 = __webpack_require__(/*! ../../icons/partly-select-18.svg */ "./icons/partly-select-18.svg");
+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 [
@@ -1231,10 +1233,10 @@ function applyCheckboxMods(mods) {
     ];
 }
 exports.applyCheckboxMods = applyCheckboxMods;
-exports.Checkbox = (0, uui_core_1.withMods)(uui_components_1.Checkbox, applyCheckboxMods, function (props) { return ({
+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,
-}); });
+}));
 
 
 /***/ }),
@@ -1247,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":"M5J2d","size-18":"_3xuBu","size18":"_3xuBu","size-12":"_1G0Fa","size12":"_1G0Fa"};
+module.exports = {"root":"_1zMIh","size-18":"_1kfgj","size18":"_1kfgj","size-12":"_1girw","size12":"_1girw"};
 
 /***/ }),
 
@@ -1262,12 +1264,12 @@ module.exports = {"root":"M5J2d","size-18":"_3xuBu","size18":"_3xuBu","size-12":
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioInput = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioInput.scss */ "./components/inputs/RadioInput.scss"));
-var radio_point_svg_1 = __webpack_require__(/*! ../../icons/radio-point.svg */ "./icons/radio-point.svg");
+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',
@@ -1275,7 +1277,7 @@ function applyRadioInputMods(mods) {
         css['size-' + (mods.size || '18')],
     ];
 }
-exports.RadioInput = (0, uui_core_1.withMods)(uui_components_1.RadioInput, applyRadioInputMods, function () { return ({ icon: radio_point_svg_1.ReactComponent }); });
+exports.RadioInput = (0, uui_core_1.withMods)(uui_components_1.RadioInput, applyRadioInputMods, () => ({ icon: radio_point_svg_1.ReactComponent }));
 
 
 /***/ }),
@@ -1288,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":"_3NNfq","size-12":"_2QbTL","size12":"_2QbTL","size-18":"_3OOh3","size18":"_3OOh3","size-24":"_1vEuy","size24":"_1vEuy"};
+module.exports = {"root":"_2WZXk","size-12":"_1CHhD","size12":"_1CHhD","size-18":"_2fE4M","size18":"_2fE4M","size-24":"_1ETlc","size24":"_1ETlc"};
 
 /***/ }),
 
@@ -1303,10 +1305,10 @@ module.exports = {"root":"_3NNfq","size-12":"_2QbTL","size12":"_2QbTL","size-18"
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = exports.applySwitchMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Switch.scss */ "./components/inputs/Switch.scss"));
+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 [
@@ -1329,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":"_1XlR9","mode-form":"_24_ta","modeForm":"_24_ta","mode-cell":"_1HI-9","modeCell":"_1HI-9","size-24":"_2uP4F","size24":"_2uP4F","size-30":"_27dWI","size30":"_27dWI","size-36":"_3auX3","size36":"_3auX3","size-42":"_4Bp0F","size42":"_4Bp0F","size-48":"_15saF","size48":"_15saF"};
+module.exports = {"root":"_27nvG","mode-form":"_3ny50","modeForm":"_3ny50","mode-cell":"_3VRdA","modeCell":"_3VRdA","size-24":"_35K9n","size24":"_35K9n","size-30":"_2kAjg","size30":"_2kAjg","size-36":"_12E1T","size36":"_12E1T","size-42":"_1aUEj","size42":"_1aUEj","size-48":"_37O6y","size48":"_37O6y"};
 
 /***/ }),
 
@@ -1344,16 +1346,16 @@ module.exports = {"root":"_1XlR9","mode-form":"_24_ta","modeForm":"_24_ta","mode
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchInput = exports.TextInput = exports.applyTextInputMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TextInput.scss */ "./components/inputs/TextInput.scss"));
+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");
-var defaultSize = '36';
-var defaultMode = types_1.EditMode.FORM;
+const defaultSize = '36';
+const defaultMode = types_1.EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         'text-input-vars',
@@ -1363,27 +1365,19 @@ function applyTextInputMods(mods) {
     ];
 }
 exports.applyTextInputMods = applyTextInputMods;
-exports.TextInput = (0, uui_core_1.withMods)(uui_components_1.TextInput, applyTextInputMods, function (props) { return ({
+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,
-}); });
-var SearchInput = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(SearchInput, _super);
-    function SearchInput() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SearchInput.prototype.render = function () {
-        var _this = this;
+}));
+class SearchInput extends react_1.default.Component {
+    render() {
         // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
-        var textInputProps = (0, tslib_1.__assign)({}, this.props);
+        const textInputProps = Object.assign({}, this.props);
         delete textInputProps.getValueChangeAnalyticsEvent;
-        return react_1.default.createElement(uui_core_1.IEditableDebouncer, (0, tslib_1.__assign)({}, this.props, { render: (function (iEditable) {
-                return react_1.default.createElement(exports.TextInput, (0, tslib_1.__assign)({ icon: icons_1.systemIcons[_this.props.size || defaultSize].search, onCancel: !!_this.props.value ? (function () { return iEditable.onValueChange(''); }) : undefined, type: "search", inputMode: "search" }, textInputProps, iEditable));
-            }) }));
-    };
-    return SearchInput;
-}(react_1.default.Component));
+        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;
 
 
@@ -1399,7 +1393,7 @@ exports.SearchInput = SearchInput;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -1416,7 +1410,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"bgQAS","mode-block":"kemvW","modeBlock":"kemvW","mode-inline":"_3Kb6A","modeInline":"_3Kb6A","padding-0":"czWEA","padding0":"czWEA","padding-6":"_1bO1v","padding6":"_1bO1v","padding-12":"_1KdUI","padding12":"_1KdUI","padding-18":"_2-EQ8","padding18":"_2-EQ8"};
+module.exports = {"root":"_1sRAF","mode-block":"_2MkrE","modeBlock":"_2MkrE","mode-inline":"_2ZSQ6","modeInline":"_2ZSQ6","padding-0":"_36Uao","padding0":"_36Uao","padding-6":"_1of8Y","padding6":"_1of8Y","padding-12":"_1AOWw","padding12":"_1AOWw","padding-18":"_3iGiZ","padding18":"_3iGiZ"};
 
 /***/ }),
 
@@ -1431,12 +1425,12 @@ module.exports = {"root":"bgQAS","mode-block":"kemvW","modeBlock":"kemvW","mode-
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Accordion.scss */ "./components/layout/Accordion.scss"));
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Accordion.scss */ "./components/layout/Accordion.scss"));
 function applyAccordionMods(mods) {
     return [
         'accordion-vars',
@@ -1445,9 +1439,9 @@ function applyAccordionMods(mods) {
         mods.padding && css['padding-' + mods.padding],
     ];
 }
-exports.Accordion = (0, uui_core_1.withMods)(uui_components_1.Accordion, applyAccordionMods, function (mods) { return ({
-    dropdownIcon: icons_1.systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
-}); });
+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,
+}));
 
 
 /***/ }),
@@ -1460,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":"_3cZz6"};
+module.exports = {"root":"_1ACdG"};
 
 /***/ }),
 
@@ -1475,11 +1469,11 @@ module.exports = {"root":"_3cZz6"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ControlGroup = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./ControlGroup.scss */ "./components/layout/ControlGroup.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, function () { return [css.root]; });
+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]);
 
 
 /***/ }),
@@ -1495,13 +1489,13 @@ exports.ControlGroup = (0, uui_core_1.withMods)(uui_components_1.ControlGroup, f
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexCell = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, function (props) { return [
+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,
-]; });
+]);
 
 
 /***/ }),
@@ -1514,7 +1508,7 @@ exports.FlexCell = (0, uui_core_1.withMods)(uui_components_1.FlexCell, function
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_37CWB","top-shadow":"H9N1D","topShadow":"H9N1D","size-24":"k_kDE","size24":"k_kDE","size-30":"_2mCLQ","size30":"_2mCLQ","size-36":"_1YZrY","size36":"_1YZrY","size-42":"_3Z5Hs","size42":"_3Z5Hs","size-48":"_2NRsG","size48":"_2NRsG","padding-6":"_3rzfA","padding6":"_3rzfA","padding-12":"BCDFF","padding12":"BCDFF","padding-18":"_1uwpd","padding18":"_1uwpd","padding-24":"_1i2IX","padding24":"_1i2IX","margin-24":"_3LSnG","margin24":"_3LSnG","margin-12":"_2JLXB","margin12":"_2JLXB","vPadding-12":"_3sLl-","vPadding12":"_3sLl-","vPadding-18":"_3oPsE","vPadding18":"_3oPsE","vPadding-24":"XmATo","vPadding24":"XmATo","vPadding-36":"_3jVXV","vPadding36":"_3jVXV","vPadding-48":"_3inhJ","vPadding48":"_3inhJ","spacing-6":"_1SBBN","spacing6":"_1SBBN","spacing-12":"_1Kakg","spacing12":"_1Kakg","spacing-18":"_1rJ6H","spacing18":"_1rJ6H","border-bottom":"_2aAsI","borderBottom":"_2aAsI"};
+module.exports = {"root":"_1gH-A","top-shadow":"_2eGFK","topShadow":"_2eGFK","size-24":"_33ogB","size24":"_33ogB","size-30":"X0sau","size30":"X0sau","size-36":"_3Y8P5","size36":"_3Y8P5","size-42":"_2sHSm","size42":"_2sHSm","size-48":"_3bskJ","size48":"_3bskJ","padding-6":"_1r0Cj","padding6":"_1r0Cj","padding-12":"_25KX4","padding12":"_25KX4","padding-18":"_1FouQ","padding18":"_1FouQ","padding-24":"IRH9M","padding24":"IRH9M","margin-24":"_1oNpz","margin24":"_1oNpz","margin-12":"_3AW0T","margin12":"_3AW0T","vPadding-12":"_1Dyhs","vPadding12":"_1Dyhs","vPadding-18":"CTXx5","vPadding18":"CTXx5","vPadding-24":"mO0bU","vPadding24":"mO0bU","vPadding-36":"_31RY1","vPadding36":"_31RY1","vPadding-48":"_3cqdJ","vPadding48":"_3cqdJ","spacing-6":"RedRq","spacing6":"RedRq","spacing-12":"_2W0Je","spacing12":"_2W0Je","spacing-18":"_3DZ9W","spacing18":"_3DZ9W","border-bottom":"_1MjUT","borderBottom":"_1MjUT"};
 
 /***/ }),
 
@@ -1529,11 +1523,11 @@ module.exports = {"root":"_37CWB","top-shadow":"H9N1D","topShadow":"H9N1D","size
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexRow = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./FlexRow.scss */ "./components/layout/FlexItems/FlexRow.scss"));
-exports.FlexRow = (0, uui_core_1.withMods)(uui_components_1.FlexRow, function (props) {
+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')],
@@ -1560,7 +1554,7 @@ exports.FlexRow = (0, uui_core_1.withMods)(uui_components_1.FlexRow, function (p
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexSpacer = void 0;
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+const uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
 exports.FlexSpacer = uui_components_1.FlexSpacer;
 
 
@@ -1574,7 +1568,7 @@ exports.FlexSpacer = uui_components_1.FlexSpacer;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"eg9Ko","background":"_2czOO","margin-24":"_2QGHn","margin24":"_2QGHn","padding-12":"_1bkRt","padding12":"_1bkRt","padding-24":"_1cF-E","padding24":"_1cF-E","shadow":"_2l_Lg"};
+module.exports = {"root":"UR49G","background":"_1kDXG","margin-24":"_1GZtc","margin24":"_1GZtc","padding-12":"_3Hr_J","padding12":"_3Hr_J","padding-24":"_2IZ8s","padding24":"_2IZ8s","shadow":"bP2rX"};
 
 /***/ }),
 
@@ -1589,18 +1583,18 @@ module.exports = {"root":"eg9Ko","background":"_2czOO","margin-24":"_2QGHn","mar
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Panel.scss */ "./components/layout/FlexItems/Panel.scss"));
-exports.Panel = (0, uui_core_1.withMods)(uui_components_1.VPanel, function (props) { return [
+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],
-]; });
+]);
 
 
 /***/ }),
@@ -1615,7 +1609,7 @@ exports.Panel = (0, uui_core_1.withMods)(uui_components_1.VPanel, function (prop
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -1632,7 +1626,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"n38C-"};
+module.exports = {"root":"hcfIC"};
 
 /***/ }),
 
@@ -1647,19 +1641,19 @@ module.exports = {"root":"n38C-"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconContainer = exports.applyIconContainerMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./IconContainer.scss */ "./components/layout/IconContainer.scss"));
+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-".concat(mods.color || 'default'),
+        `icon-container-color-${mods.color || 'default'}`,
         css.root,
     ];
 }
 exports.applyIconContainerMods = applyIconContainerMods;
-exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer, applyIconContainerMods, function () { return ({ tabIndex: 0 }); });
+exports.IconContainer = (0, uui_core_1.withMods)(uui_components_1.IconContainer, applyIconContainerMods, () => ({ tabIndex: 0 }));
 
 
 /***/ }),
@@ -1672,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":"_1o08q","size-24":"_3k7h1","size24":"_3k7h1","size-30":"_2GFqU","size30":"_2GFqU","size-36":"_1dFB8","size36":"_1dFB8","size-42":"_1iuIE","size42":"_1iuIE","size-48":"jk2P7","size48":"jk2P7"};
+module.exports = {"root":"_3gVoD","size-24":"ljpPn","size24":"ljpPn","size-30":"_1bmSl","size30":"_1bmSl","size-36":"_2AioQ","size36":"_2AioQ","size-42":"_2_1nA","size42":"_2_1nA","size-48":"_3qfJF","size48":"_3qfJF"};
 
 /***/ }),
 
@@ -1687,14 +1681,14 @@ module.exports = {"root":"_1o08q","size-24":"_3k7h1","size24":"_3k7h1","size-30"
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledInput = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LabeledInput.scss */ "./components/layout/LabeledInput.scss"));
-var defaultSize = '36';
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./LabeledInput.scss */ "./components/layout/LabeledInput.scss"));
+const defaultSize = '36';
 function applyLabeledInputMods(mods) {
     return [
         'labeled-input-vars',
@@ -1702,10 +1696,10 @@ function applyLabeledInputMods(mods) {
         css['size-' + (mods.size || defaultSize)],
     ];
 }
-exports.LabeledInput = (0, uui_core_1.withMods)(uui_components_1.LabeledInput, applyLabeledInputMods, function (props) { return ({
+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,
-}); });
+}));
 
 
 /***/ }),
@@ -1718,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":"_1LC35"};
+module.exports = {"root":"yt9Rp"};
 
 /***/ }),
 
@@ -1733,12 +1727,12 @@ module.exports = {"root":"_1LC35"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./RadioGroup.scss */ "./components/layout/RadioGroup.scss"));
-exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, function () { return [css.root]; }, function () { return ({ RadioInput: inputs_1.RadioInput }); });
+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 }));
 
 
 /***/ }),
@@ -1765,8 +1759,8 @@ exports.RadioGroup = (0, uui_core_1.withMods)(uui_components_1.RadioGroup, funct
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollBars = void 0;
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
+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() {
@@ -1801,8 +1795,8 @@ exports.ScrollBars = (0, uui_core_1.withMods)(uui_components_1.ScrollBars, apply
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VirtualList = void 0;
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+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() {
@@ -1825,7 +1819,7 @@ exports.VirtualList = (0, uui_core_1.withMods)(uui_components_1.VirtualList, app
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -1849,19 +1843,14 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var Dropdown = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Dropdown, _super);
-    function Dropdown() {
-        return _super !== null && _super.apply(this, arguments) || this;
+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)));
     }
-    Dropdown.prototype.render = function () {
-        return (React.createElement(uui_components_1.Dropdown, (0, tslib_1.__assign)({}, this.props)));
-    };
-    return Dropdown;
-}(React.Component));
+}
 exports.Dropdown = Dropdown;
 
 
@@ -1875,7 +1864,7 @@ exports.Dropdown = Dropdown;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3rKzq"};
+module.exports = {"root":"_12KAn"};
 
 /***/ }),
 
@@ -1890,11 +1879,11 @@ module.exports = {"root":"_3rKzq"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownContainer = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownContainer.scss */ "./components/overlays/DropdownContainer.scss"));
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownContainer.scss */ "./components/overlays/DropdownContainer.scss"));
 function applyDropdownContainerMods(mods) {
     return [
         'dropdown-container-vars',
@@ -1914,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":"_1cKME","bodyRoot":"RjL0v","submenuRootItem":"_30CI3","iconAfter":"hdQTX","iconCheck":"_2bV5g","splitterRoot":"_2JkYN","splitter":"_1_NBL","headerRoot":"_1ntQf","itemRoot":"s1H4x","icon":"_1EjVl","link":"bonze"};
+module.exports = {"menuRoot":"_1kaKY","bodyRoot":"_50vbN","submenuRootItem":"_3Ckfl","iconAfter":"XjoLb","iconCheck":"_3WdoH","splitterRoot":"_1cFMw","splitter":"_2OUEu","headerRoot":"_1qyI5","itemRoot":"cxf47","icon":"_29AH7","link":"_3KzBV"};
 
 /***/ }),
 
@@ -1929,15 +1918,15 @@ module.exports = {"menuRoot":"_1cKME","bodyRoot":"RjL0v","submenuRootItem":"_30C
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenuSwitchButton = exports.DropdownSubMenu = exports.DropdownMenuHeader = exports.DropdownMenuSplitter = exports.DropdownMenuButton = exports.DropdownMenuBody = exports.DropdownControlKeys = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var react_focus_lock_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react-focus-lock */ "react-focus-lock"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DropdownMenu.scss */ "./components/overlays/DropdownMenu.scss"));
-var icons = icons_1.systemIcons['36'];
+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',
@@ -1946,23 +1935,23 @@ exports.DropdownControlKeys = {
     UP_ARROW: 'ArrowUp',
     DOWN_ARROW: 'ArrowDown',
 };
-var DropdownMenuContainer = function (props) {
-    var menuRef = (0, react_1.useRef)(null);
-    var _a = (0, react_1.useState)(-1), currentlyFocused = _a[0], setFocused = _a[1];
-    var menuItems = menuRef.current ? Array.from(menuRef.current.querySelectorAll("[role=\"menuitem\"]:not(.".concat(uui_core_1.uuiMod.disabled, ")"))) : [];
-    (0, react_1.useEffect)(function () {
+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]);
-    var changeFocus = function (nextFocusedIndex) {
+    const changeFocus = (nextFocusedIndex) => {
         if (menuItems.length > 0) {
             setFocused(nextFocusedIndex);
             menuItems[nextFocusedIndex].focus();
         }
     };
-    var handleArrowKeys = function (e) {
+    const handleArrowKeys = (e) => {
         e.stopPropagation();
-        var lastMenuItemsIndex = menuItems.length - 1;
+        const lastMenuItemsIndex = menuItems.length - 1;
         if (e.key === exports.DropdownControlKeys.UP_ARROW) {
             changeFocus(currentlyFocused > 0 ? currentlyFocused - 1 : lastMenuItemsIndex);
         }
@@ -1974,22 +1963,19 @@ var DropdownMenuContainer = function (props) {
         }
     };
     return (react_1.default.createElement(react_focus_lock_1.default, { as: "menu", className: css.menuRoot, returnFocus: true, autoFocus: false, ref: menuRef, lockProps: { onKeyDown: handleArrowKeys, tabIndex: -1 } },
-        react_1.default.createElement(uui_components_1.DropdownContainer, (0, tslib_1.__assign)({}, props, { rawProps: { tabIndex: -1 } }))));
+        react_1.default.createElement(uui_components_1.DropdownContainer, Object.assign({}, props, { rawProps: { tabIndex: -1 } }))));
 };
-exports.DropdownMenuBody = (0, uui_core_1.withMods)(DropdownMenuContainer, function () { return [css.bodyRoot]; }, function (_a) {
-    var style = _a.style;
-    return ({ style: style });
-});
-var DropdownMenuButton = function (props) {
-    var context = (0, react_1.useContext)(uui_core_1.UuiContext);
-    var icon = props.icon, iconPosition = props.iconPosition, caption = props.caption, isDisabled = props.isDisabled, isSelected = props.isSelected, link = props.link, href = props.href, onClick = props.onClick, toggleDropdownOpening = props.toggleDropdownOpening, isDropdown = props.isDropdown;
-    var handleClick = function (event) {
+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);
     };
-    var handleOpenDropdown = function (event) {
+    const handleOpenDropdown = (event) => {
         if (event.key === exports.DropdownControlKeys.RIGHT_ARROW && isDropdown) {
             toggleDropdownOpening(true);
         }
@@ -1997,10 +1983,10 @@ var DropdownMenuButton = function (props) {
             onClick(event);
         }
     };
-    var getMenuButtonContent = function () {
-        var isIconBefore = Boolean(icon && iconPosition !== "right");
-        var isIconAfter = Boolean(icon && iconPosition === "right");
-        var iconElement = react_1.default.createElement(uui_components_1.IconContainer, { icon: icon, cx: (0, uui_core_1.cx)(css.icon, iconPosition === "right" ? css.iconAfter : css.iconBefore) });
+    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),
@@ -2008,8 +1994,8 @@ var DropdownMenuButton = function (props) {
                 react_1.default.createElement(uui_components_1.FlexSpacer, null),
                 iconElement));
     };
-    var isAnchor = Boolean(link || href);
-    var itemClassNames = (0, uui_core_1.cx)(props.cx, css.itemRoot, isDisabled && uui_core_1.uuiMod.disabled, isSelected && uui_core_1.uuiMod.selected);
+    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',
@@ -2018,34 +2004,31 @@ var DropdownMenuButton = function (props) {
 };
 exports.DropdownMenuButton = DropdownMenuButton;
 exports.DropdownMenuButton.displayName = 'DropdownMenuButton';
-var DropdownMenuSplitter = function (props) { return (react_1.default.createElement("div", { className: (0, uui_core_1.cx)(props.cx, css.splitterRoot) },
-    react_1.default.createElement("hr", { className: css.splitter }))); };
+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;
-var DropdownMenuHeader = function (props) { return (react_1.default.createElement("div", { className: (0, uui_core_1.cx)(props.cx, css.headerRoot) },
-    react_1.default.createElement("span", { className: css.header }, props.caption))); };
+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;
-var DropdownSubMenu = function (props) {
-    return (react_1.default.createElement(uui_components_1.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", placement: "right-start", renderBody: function (props) { return (react_1.default.createElement(exports.DropdownMenuBody, (0, tslib_1.__assign)({ closeOnKey: exports.DropdownControlKeys.LEFT_ARROW }, props))); }, renderTarget: function (_a) {
-            var toggleDropdownOpening = _a.toggleDropdownOpening;
-            return (react_1.default.createElement(exports.DropdownMenuButton, (0, tslib_1.__assign)({ cx: (0, uui_core_1.cx)(css.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props)));
-        } }));
+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;
-var DropdownMenuSwitchButton = function (props) {
-    var context = (0, react_1.useContext)(uui_core_1.UuiContext);
-    var icon = props.icon, caption = props.caption, isDisabled = props.isDisabled, isSelected = props.isSelected, onValueChange = props.onValueChange;
-    var onHandleValueChange = function (value) {
+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);
     };
-    var handleKeySelect = function (e) {
+    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: function () { return onHandleValueChange(!isSelected); }, rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+    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),
@@ -2064,7 +2047,7 @@ exports.DropdownMenuSwitchButton = DropdownMenuSwitchButton;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"modal-blocker":"_2bjua","modalBlocker":"_2bjua","animateModalBlocker":"_2KKMj","blocker-overlay":"_3RTPh","blockerOverlay":"_3RTPh","modal":"_1l2HE","modal-footer":"ljwt1","modalFooter":"ljwt1","border-top":"_37BTe","borderTop":"_37BTe","modal-header":"_1xkBk","modalHeader":"_1xkBk"};
+module.exports = {"modal-blocker":"_1dxbf","modalBlocker":"_1dxbf","animateModalBlocker":"_3i_uu","blocker-overlay":"qKkgc","blockerOverlay":"qKkgc","modal":"_1XOdL","modal-footer":"_3oDUu","modalFooter":"_3oDUu","border-top":"_11lF_","borderTop":"_11lF_","modal-header":"Jc6LZ","modalHeader":"Jc6LZ"};
 
 /***/ }),
 
@@ -2079,54 +2062,44 @@ module.exports = {"modal-blocker":"_2bjua","modalBlocker":"_2bjua","animateModal
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooter = exports.ModalHeader = exports.ModalWindow = exports.ModalBlocker = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var navigation_close_24_svg_1 = __webpack_require__(/*! ../../icons/navigation-close-24.svg */ "./icons/navigation-close-24.svg");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Modals.scss */ "./components/overlays/Modals.scss"));
-exports.ModalBlocker = (0, uui_core_1.withMods)(uui_components_1.ModalBlocker, function (mods) { return [
+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, function () { return ['modals-vars', css.modal]; }, function (props) { return ({ rawProps: {
+]);
+exports.ModalWindow = (0, uui_core_1.withMods)(uui_components_1.ModalWindow, () => ['modals-vars', css.modal], props => ({ rawProps: {
         style: {
-            width: "".concat(props.width || 480, "px"),
-            height: props.height ? "".concat(props.height, "px") : '',
+            width: `${props.width || 480}px`,
+            height: props.height ? `${props.height}px` : '',
         },
     },
-}); });
-var ModalHeader = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ModalHeader, _super);
-    function ModalHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ModalHeader.prototype.render = function () {
+}));
+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 }))));
-    };
-    return ModalHeader;
-}(React.Component));
-exports.ModalHeader = ModalHeader;
-var ModalFooter = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ModalFooter, _super);
-    function ModalFooter() {
-        return _super !== null && _super.apply(this, arguments) || this;
     }
-    ModalFooter.prototype.render = function () {
+}
+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));
-    };
-    return ModalFooter;
-}(React.Component));
+    }
+}
 exports.ModalFooter = ModalFooter;
 
 
@@ -2140,7 +2113,7 @@ exports.ModalFooter = ModalFooter;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1LCgx","icon-wrapper":"_32Nj1","iconWrapper":"_32Nj1","notification-wrapper":"IkcLn","notificationWrapper":"IkcLn","action-wrapper":"_24m6L","actionWrapper":"_24m6L","action-link":"_1FPZp","actionLink":"_1FPZp","close-icon":"_2EMgT","closeIcon":"_2EMgT","main-path":"hOr0z","mainPath":"hOr0z","content":"_25c23","clear-button":"_1SXPS","clearButton":"_1SXPS","close-wrapper":"_3OIwR","closeWrapper":"_3OIwR"};
+module.exports = {"root":"yy2Bh","icon-wrapper":"_1uJTA","iconWrapper":"_1uJTA","notification-wrapper":"_2M3nj","notificationWrapper":"_2M3nj","action-wrapper":"DaFjO","actionWrapper":"DaFjO","action-link":"_54AYd","actionLink":"_54AYd","close-icon":"JH85Y","closeIcon":"JH85Y","main-path":"np8Mh","mainPath":"np8Mh","content":"_8yero","clear-button":"_2h-Mh","clearButton":"_2h-Mh","close-wrapper":"_1ij9O","closeWrapper":"_1ij9O"};
 
 /***/ }),
 
@@ -2155,84 +2128,66 @@ module.exports = {"root":"_1LCgx","icon-wrapper":"_32Nj1","iconWrapper":"_32Nj1"
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClearNotification = exports.ErrorNotification = exports.HintNotification = exports.SuccessNotification = exports.WarningNotification = exports.NotificationCard = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var notification_check_circle_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-check_circle-fill-24.svg */ "./icons/notification-check_circle-fill-24.svg");
-var notification_warning_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-warning-fill-24.svg */ "./icons/notification-warning-fill-24.svg");
-var notification_error_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-error-fill-24.svg */ "./icons/notification-error-fill-24.svg");
-var notification_help_fill_24_svg_1 = __webpack_require__(/*! ../../icons/notification-help-fill-24.svg */ "./icons/notification-help-fill-24.svg");
-var cross_svg_1 = __webpack_require__(/*! ../../icons/snackbar/cross.svg */ "./icons/snackbar/cross.svg");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./NotificationCard.scss */ "./components/overlays/NotificationCard.scss"));
-var NotificationCard = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(NotificationCard, _super);
-    function NotificationCard() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.notificationCardNode = null;
-        return _this;
+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;
     }
-    NotificationCard.prototype.componentDidMount = function () {
+    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);
-    };
-    NotificationCard.prototype.componentWillUnmount = function () {
+    }
+    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);
-    };
-    NotificationCard.prototype.render = function () {
-        var _this = this;
-        return (react_1.default.createElement("div", { role: 'alert', className: (0, classnames_1.default)(css.notificationWrapper, 'notification-card-vars', "notification-card-color-".concat(this.props.color), css.root, this.props.cx), ref: function (el) { return _this.notificationCardNode = el; } },
+    }
+    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(function (action) {
+                    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 })))));
-    };
-    return NotificationCard;
-}(react_1.default.Component));
+    }
+}
 exports.NotificationCard = NotificationCard;
-var WarningNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_warning_fill_24_svg_1.ReactComponent, color: 'warning' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
+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;
-var SuccessNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_check_circle_fill_24_svg_1.ReactComponent, color: 'success' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
+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;
-var HintNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_help_fill_24_svg_1.ReactComponent, color: 'info' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
+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;
-var ErrorNotification = function (props) {
-    return react_1.default.createElement(NotificationCard, (0, tslib_1.__assign)({ icon: notification_error_fill_24_svg_1.ReactComponent, color: 'error' }, props, { cx: (0, classnames_1.default)(props.cx) }));
-};
+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;
-var ClearNotification = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ClearNotification, _super);
-    function ClearNotification() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ClearNotification.prototype.render = function () {
-        var _this = this;
+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: function () { return _this.context.uuiNotifications.clearAll(); } }));
-    };
-    ClearNotification.contextType = uui_core_1.UuiContext;
-    return ClearNotification;
-}(react_1.default.Component));
+            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;
 
 
 /***/ }),
@@ -2245,7 +2200,7 @@ exports.ClearNotification = ClearNotification;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_126II"};
+module.exports = {"root":"_3kTSO"};
 
 /***/ }),
 
@@ -2260,11 +2215,11 @@ module.exports = {"root":"_126II"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tooltip.scss */ "./components/overlays/Tooltip.scss"));
+const css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tooltip.scss */ "./components/overlays/Tooltip.scss"));
 function applyTooltipMods(mods) {
     return [
         'tooltip-vars',
@@ -2286,7 +2241,7 @@ exports.Tooltip = (0, uui_core_1.withMods)(uui_components_1.Tooltip, applyToolti
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -2305,7 +2260,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"body":"_3hgfx","modal":"_1RoQD","search":"_3FydJ","checkbox":"_2iVvy","search-wrapper":"_35j6Q","searchWrapper":"_35j6Q","search-size-24":"_3wo08","searchSize24":"_3wo08","search-size-30":"_2Li-h","searchSize30":"_2Li-h","search-size-36":"_3PEAC","searchSize36":"_3PEAC","search-size-42":"_3eSJ1","searchSize42":"_3eSJ1","no-found-size-24":"_1CU2T","noFoundSize24":"_1CU2T","no-found-size-30":"_2q3di","noFoundSize30":"_2q3di","no-found-size-36":"_1wY-U","noFoundSize36":"_1wY-U","no-found-size-42":"_1UXoJ","noFoundSize42":"_1UXoJ"};
+module.exports = {"body":"_2nY4Z","modal":"_2WAHF","search":"_2XFPq","checkbox":"_1Sef8","search-wrapper":"A8ngn","searchWrapper":"A8ngn","search-size-24":"_3lm5M","searchSize24":"_3lm5M","search-size-30":"_3Yfa0","searchSize30":"_3Yfa0","search-size-36":"dsjq0","searchSize36":"dsjq0","search-size-42":"_1ELBZ","searchSize42":"_1ELBZ","no-found-size-24":"W3g6g","noFoundSize24":"W3g6g","no-found-size-30":"_3pfQS","noFoundSize30":"_3pfQS","no-found-size-36":"_31SN_","noFoundSize36":"_31SN_","no-found-size-42":"_1B5jt","noFoundSize42":"_1B5jt"};
 
 /***/ }),
 
@@ -2320,44 +2275,41 @@ module.exports = {"body":"_3hgfx","modal":"_1RoQD","search":"_3FydJ","checkbox":
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPickerBody = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerBody.scss */ "./components/pickers/DataPickerBody.scss"));
-var DataPickerBody = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataPickerBody, _super);
-    function DataPickerBody() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.lens = uui_core_1.Lens.onEditableComponent(_this);
-        _this.searchLens = _this.lens.prop('search');
-        return _this;
+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');
     }
-    DataPickerBody.prototype.renderNoFound = function () {
+    renderNoFound() {
         if (this.props.renderNotFound) {
             return this.props.renderNotFound();
         }
-        return react_1.default.createElement(uui_components_1.FlexCell, { cx: css["no-found-size-".concat(this.props.searchSize || 36)], grow: 1, textAlign: 'center' },
+        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));
-    };
-    DataPickerBody.prototype.render = function () {
-        var value = this.props.value;
-        var searchSize = (0, uui_core_1.isMobile)() ? '48' : (this.props.searchSize || '36');
-        var searchClass = (0, uui_core_1.cx)(css.searchWrapper, css["search-size-".concat(searchSize)]);
+    }
+    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, (0, tslib_1.__assign)({ cx: css.search, placeholder: i18n_1.i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
+                    react_1.default.createElement(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, (0, tslib_1.__assign)({}, this.lens.toProps(), { rows: this.props.rows, role: "listbox", rawProps: this.props.rawProps, rowsCount: this.props.rowsCount }))
+                ? 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()));
-    };
-    return DataPickerBody;
-}(uui_components_1.PickerBodyBase));
+    }
+}
 exports.DataPickerBody = DataPickerBody;
 
 
@@ -2371,7 +2323,7 @@ exports.DataPickerBody = DataPickerBody;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"footer-wrapper":"_3PdLf","footerWrapper":"_3PdLf"};
+module.exports = {"footer-wrapper":"kp3uC","footerWrapper":"kp3uC"};
 
 /***/ }),
 
@@ -2386,27 +2338,27 @@ module.exports = {"footer-wrapper":"_3PdLf","footerWrapper":"_3PdLf"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPickerFooter = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var DataPickerFooter_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerFooter.scss */ "./components/pickers/DataPickerFooter.scss"));
-var switchSizes = {
+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',
 };
-var DataPickerFooterImpl = function (props) {
-    var clearSelection = props.clearSelection, view = props.view, showSelected = props.showSelected;
-    var size = (0, uui_core_1.isMobile)() ? '48' : (props.size || '36');
-    var switchSize = switchSizes[size];
-    var hasSelection = view.getSelectedRows().length > 0;
-    var handleKeyDown = function (e) {
+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();
     };
@@ -2418,7 +2370,7 @@ var DataPickerFooterImpl = function (props) {
                     ? i18n_1.i18n.pickerInput.clearSelectionButton
                     : i18n_1.i18n.pickerInput.selectAllButton, onClick: hasSelection
                     ? clearSelection
-                    : function () { return view.selectAll.onValueChange(true); }, rawProps: { onKeyDown: handleKeyDown } })))));
+                    : () => view.selectAll.onValueChange(true), rawProps: { onKeyDown: handleKeyDown } })))));
 };
 exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 
@@ -2433,7 +2385,7 @@ exports.DataPickerFooter = react_1.default.memo(DataPickerFooterImpl);
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"header":"U_-k1","close":"-MNpi"};
+module.exports = {"header":"_1l2aP","close":"_27R0H"};
 
 /***/ }),
 
@@ -2448,18 +2400,18 @@ module.exports = {"header":"U_-k1","close":"-MNpi"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPickerHeader = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var DataPickerHeader_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./DataPickerHeader.scss */ "./components/pickers/DataPickerHeader.scss"));
-var navigation_close_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-close-24.svg */ "../epam-assets/icons/common/navigation-close-24.svg");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var DataPickerHeaderImpl = function (props) {
-    var title = props.title ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
+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: function () { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: DataPickerHeader_scss_1.default.close })));
+        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);
 
@@ -2474,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":"_2NacH","renderItem":"_2NacH","icon-wrapper":"_180RS","iconWrapper":"_180RS","picker-row":"_1GGpK","pickerRow":"_1GGpK"};
+module.exports = {"render-item":"_3t3FW","renderItem":"_3t3FW","icon-wrapper":"_3jtx8","iconWrapper":"_3jtx8","picker-row":"_2XDCz","pickerRow":"_2XDCz"};
 
 /***/ }),
 
@@ -2489,20 +2441,19 @@ module.exports = {"render-item":"_2NacH","renderItem":"_2NacH","icon-wrapper":"_
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPickerRow = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var tables_1 = __webpack_require__(/*! ../tables */ "./components/tables/index.ts");
-var notification_done_24_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-24.svg */ "../epam-assets/icons/common/notification-done-24.svg");
-var notification_done_18_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-18.svg */ "../epam-assets/icons/common/notification-done-18.svg");
-var notification_done_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/notification-done-12.svg */ "../epam-assets/icons/common/notification-done-12.svg");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataPickerRow.scss */ "./components/pickers/DataPickerRow.scss"));
-var DataPickerRow = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataPickerRow, _super);
-    function DataPickerRow() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.getIcon = function (size) {
+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;
@@ -2511,25 +2462,24 @@ var DataPickerRow = /** @class */ (function (_super) {
                 default: return notification_done_18_svg_1.ReactComponent;
             }
         };
-        _this.column = {
+        this.column = {
             key: 'name',
             grow: 1,
-            render: function (item, rowProps) { return React.createElement("div", { key: rowProps.id, className: css.renderItem },
-                _this.props.renderItem(item, rowProps),
+            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' }))); },
+                    React.createElement(layout_1.IconContainer, { icon: this.getIcon(this.props.size), color: rowProps.isChildrenSelected ? 'default' : 'info' }))),
         };
-        _this.renderContent = function () {
-            return React.createElement(tables_1.DataTableCell, { key: 'name', size: _this.props.size || '36', padding: _this.props.padding || '24', isFirstColumn: true, isLastColumn: false, tabIndex: -1, column: _this.column, rowProps: _this.props, alignActions: _this.props.alignActions || 'top' });
+        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' });
         };
-        return _this;
     }
-    DataPickerRow.prototype.render = function () {
-        return React.createElement(uui_components_1.DataPickerRow, (0, tslib_1.__assign)({}, this.props, { cx: [css.pickerRow, this.props.cx], renderContent: this.renderContent }));
-    };
-    return DataPickerRow;
-}(React.Component));
+    render() {
+        return React.createElement(uui_components_1.DataPickerRow, Object.assign({}, this.props, { cx: [css.pickerRow, this.props.cx], renderContent: this.renderContent }));
+    }
+}
 exports.DataPickerRow = DataPickerRow;
 
 
@@ -2543,7 +2493,7 @@ exports.DataPickerRow = DataPickerRow;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"done":"_3zsbx"};
+module.exports = {"done":"Tl49d"};
 
 /***/ }),
 
@@ -2558,19 +2508,19 @@ module.exports = {"done":"_3zsbx"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileDropdownWrapper = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var MobileDropdownWrapper_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./MobileDropdownWrapper.scss */ "./components/pickers/MobileDropdownWrapper.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var DataPickerHeader_1 = __webpack_require__(/*! ./DataPickerHeader */ "./components/pickers/DataPickerHeader.tsx");
-var MobileDropdownWrapper = function (props) {
-    var isVisible = (0, uui_core_1.isMobile)();
+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: function () { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: MobileDropdownWrapper_scss_1.default.done, size: '48' }))));
+        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;
 
@@ -2585,7 +2535,7 @@ exports.MobileDropdownWrapper = MobileDropdownWrapper;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"panel":"_1VHp1","footer-wrapper":"_3gAh8","footerWrapper":"_3gAh8","footer-size-24":"_3AGjB","footerSize24":"_3AGjB","footer-size-30":"heLzR","footerSize30":"heLzR","footer-size-36":"_2vnCR","footerSize36":"_2vnCR","footer-size-42":"_1TlXM","footerSize42":"_1TlXM","footer-size-48":"_1I-Gc","footerSize48":"_1I-Gc"};
+module.exports = {"panel":"BRJrB","footer-wrapper":"_35b2s","footerWrapper":"_35b2s","footer-size-24":"KD4ay","footerSize24":"KD4ay","footer-size-30":"_3aJ3E","footerSize30":"_3aJ3E","footer-size-36":"_1mt8Z","footerSize36":"_1mt8Z","footer-size-42":"ZHGOQ","footerSize42":"ZHGOQ","footer-size-48":"_2wqPV","footerSize48":"_2wqPV"};
 
 /***/ }),
 
@@ -2600,80 +2550,71 @@ module.exports = {"panel":"_1VHp1","footer-wrapper":"_3gAh8","footerWrapper":"_3
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerInput = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var PickerToggler_1 = __webpack_require__(/*! ./PickerToggler */ "./components/pickers/PickerToggler.tsx");
-var DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
-var PickerItem_1 = __webpack_require__(/*! ./PickerItem */ "./components/pickers/PickerItem.tsx");
-var DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
-var DataPickerFooter_1 = __webpack_require__(/*! ./DataPickerFooter */ "./components/pickers/DataPickerFooter.tsx");
-var MobileDropdownWrapper_1 = __webpack_require__(/*! ./MobileDropdownWrapper */ "./components/pickers/MobileDropdownWrapper.tsx");
-var types_1 = __webpack_require__(/*! ../types */ "./components/types.ts");
-var PickerInput_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerInput.scss */ "./components/pickers/PickerInput.scss"));
-var pickerHeight = 300;
-var pickerWidth = 360;
-var PickerInput = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerInput, _super);
-    function PickerInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.renderItem = function (item, rowProps) {
-            return react_1.default.createElement(PickerItem_1.PickerItem, (0, tslib_1.__assign)({ title: _this.getName(item), size: _this.getRowSize() }, rowProps));
+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 = function (rowProps) {
-            if (rowProps.isSelectable && _this.isSingleSelect() && _this.props.editMode !== 'modal') {
-                rowProps.onSelect = _this.onSelect;
-            }
-            return _this.props.renderRow ? _this.props.renderRow(rowProps) : (react_1.default.createElement(DataPickerRow_1.DataPickerRow, (0, tslib_1.__assign)({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', size: _this.getRowSize(), rawProps: { 'aria-selected': rowProps.isSelectable && rowProps.isSelected, role: 'option' }, padding: _this.props.editMode === 'modal' ? '24' : '12', renderItem: _this.renderItem })));
+        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 })));
         };
-        return _this;
     }
-    PickerInput.prototype.toggleModalOpening = function (opened) {
-        var _this = this;
-        var _a = this.props, renderFooter = _a.renderFooter, restProps = (0, tslib_1.__rest)(_a, ["renderFooter"]);
-        this.context.uuiModals.show(function (props) { return react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, restProps, props, { caption: _this.getPlaceholder(), initialValue: _this.props.value, renderRow: _this.renderRow, selectionMode: _this.props.selectionMode, valueType: _this.props.valueType })); })
-            .then(function (newSelection) { return _this.handleSelectionValueChange(newSelection); })
-            .catch(function () { return null; });
-    };
-    PickerInput.prototype.getRowSize = function () {
+    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;
-    };
-    PickerInput.prototype.getTogglerMods = function () {
+    }
+    getTogglerMods() {
         return {
             size: this.props.size,
             mode: this.props.mode ? this.props.mode : types_1.EditMode.FORM,
         };
-    };
-    PickerInput.prototype.renderFooter = function () {
-        var footerProps = this.getFooterProps();
+    }
+    renderFooter() {
+        const footerProps = this.getFooterProps();
         return this.props.renderFooter
             ? this.props.renderFooter(footerProps)
-            : react_1.default.createElement(DataPickerFooter_1.DataPickerFooter, (0, tslib_1.__assign)({}, footerProps, { size: this.props.size }));
-    };
-    PickerInput.prototype.renderTarget = function (targetProps) {
-        var _this = this;
-        var renderTarget = this.props.renderToggler || (function (props) { return react_1.default.createElement(PickerToggler_1.PickerToggler, (0, tslib_1.__assign)({}, props)); });
-        return (react_1.default.createElement(uui_core_1.IEditableDebouncer, { value: this.state.dataSourceState.search, onValueChange: this.handleTogglerSearchChange, render: function (editableProps) { return renderTarget((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.getTogglerMods()), targetProps), editableProps)); } }));
-    };
-    PickerInput.prototype.renderBody = function (props, rows) {
-        var _this = this;
-        var renderedDataRows = rows.map(function (props) { return _this.renderRow(props); });
-        var maxHeight = (0, uui_core_1.isMobile)() ? document.documentElement.clientHeight : (this.props.dropdownHeight || pickerHeight);
-        var minBodyWidth = (0, uui_core_1.isMobile)() ? document.documentElement.clientWidth : (this.props.minBodyWidth || pickerWidth);
+            : 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: this.state.dataSourceState.search, 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: function () { return _this.toggleBodyOpening(false); } },
-                react_1.default.createElement(DataPickerBody_1.DataPickerBody, (0, tslib_1.__assign)({}, props, { rows: renderedDataRows, maxHeight: maxHeight, searchSize: this.props.size, editMode: 'dropdown' })),
+            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())));
-    };
-    return PickerInput;
-}(uui_components_1.PickerInputBase));
+    }
+}
 exports.PickerInput = PickerInput;
 
 
@@ -2687,7 +2628,7 @@ exports.PickerInput = PickerInput;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_1MRLg","multiline-vertical-padding-24":"_3scyA","multilineVerticalPadding24":"_3scyA","multiline-vertical-padding-30":"_1tmzl","multilineVerticalPadding30":"_1tmzl","multiline-vertical-padding-36":"_1oaID","multilineVerticalPadding36":"_1oaID","multiline-vertical-padding-42":"_3dIXa","multilineVerticalPadding42":"_3dIXa","multiline-vertical-padding-48":"_377HE","multilineVerticalPadding48":"_377HE"};
+module.exports = {"root":"_1PTu0","multiline-vertical-padding-24":"aXmV5","multilineVerticalPadding24":"aXmV5","multiline-vertical-padding-30":"TZb8h","multilineVerticalPadding30":"TZb8h","multiline-vertical-padding-36":"_1yfer","multilineVerticalPadding36":"_1yfer","multiline-vertical-padding-42":"_3VowF","multilineVerticalPadding42":"_3VowF","multiline-vertical-padding-48":"_3FSNY","multilineVerticalPadding48":"_3FSNY"};
 
 /***/ }),
 
@@ -2702,35 +2643,32 @@ module.exports = {"root":"_1MRLg","multiline-vertical-padding-24":"_3scyA","mult
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerItem = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerItem.scss */ "./components/pickers/PickerItem.scss"));
-var defaultSize = '36';
-var PickerItem = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerItem, _super);
-    function PickerItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.getAvatarSize = function (size, isMultiline) {
+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;
         };
-        return _this;
     }
-    PickerItem.prototype.render = function () {
-        var _a = this.props, size = _a.size, avatarUrl = _a.avatarUrl, title = _a.title, subtitle = _a.subtitle, isLoading = _a.isLoading, isDisabled = _a.isDisabled;
-        var itemSize = size && size !== 'none' ? size : defaultSize;
-        var isMultiline = !!(title && subtitle);
+    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-".concat(itemSize)], spacing: '12' },
+            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)))));
-    };
-    return PickerItem;
-}(React.Component));
+    }
+}
 exports.PickerItem = PickerItem;
 
 
@@ -2747,55 +2685,52 @@ exports.PickerItem = PickerItem;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerList = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var PickerListItem_1 = __webpack_require__(/*! ./PickerListItem */ "./components/pickers/PickerListItem.tsx");
-var PickerModal_1 = __webpack_require__(/*! ./PickerModal */ "./components/pickers/PickerModal.tsx");
-var PickerList = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerList, _super);
-    function PickerList() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.sessionStartTime = (new Date()).getTime();
-        _this.renderRow = function (row) {
-            return react_1.default.createElement(PickerListItem_1.PickerListItem, (0, tslib_1.__assign)({ getName: function (item) { return _this.getName(item); } }, row, { key: row.rowKey }));
+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 = function () {
-            _this.context.uuiModals
-                .show(function (props) { return (react_1.default.createElement(PickerModal_1.PickerModal, (0, tslib_1.__assign)({}, props, _this.props, { caption: _this.props.placeholder || "Please select ".concat(_this.getEntityName() ? _this.getEntityName() : ""), initialValue: _this.props.value, selectionMode: _this.props.selectionMode, valueType: _this.props.valueType }))); })
-                .then(function (value) {
-                _this.appendLastSelected((0, tslib_1.__spreadArray)([], _this.getSelectedIdsArray(value), true));
-                _this.props.onValueChange(value);
+        this.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 = function (props) { return (react_1.default.createElement(buttons_1.LinkButton, (0, tslib_1.__assign)({ caption: 'Show all' }, props))); };
-        return _this;
+        this.defaultRenderToggler = (props) => (react_1.default.createElement(buttons_1.LinkButton, Object.assign({ caption: 'Show all' }, props)));
     }
-    PickerList.prototype.render = function () {
-        var view = this.getView();
-        var viewProps = view.getListProps();
-        var selectedRows = view.getSelectedRows();
-        var rows = this.buildRowsList();
-        var showPicker = viewProps.totalCount == null || viewProps.totalCount > this.getMaxDefaultItems();
-        var renderToggler = this.props.renderModalToggler || this.defaultRenderToggler;
-        var renderRow = this.props.renderRow || this.renderRow;
+    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(function (row) { return renderRow(row); }),
+            rows.map(row => renderRow(row)),
             showPicker && renderToggler({
                 onClick: this.handleShowPicker,
                 caption: this.getModalTogglerCaption(viewProps.totalCount, selectedRows.length),
             }, selectedRows)));
-    };
-    PickerList.contextType = uui_core_1.UuiContext;
-    return PickerList;
-}(uui_components_1.PickerListBase));
+    }
+}
 exports.PickerList = PickerList;
+PickerList.contextType = uui_core_1.UuiContext;
 
 
 /***/ }),
@@ -2808,7 +2743,7 @@ exports.PickerList = PickerList;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"H4vHv"};
+module.exports = {"row":"_3au2w"};
 
 /***/ }),
 
@@ -2823,36 +2758,30 @@ module.exports = {"row":"H4vHv"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerListItem = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! react */ "react"));
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var PickerListItem_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./PickerListItem.scss */ "./components/pickers/PickerListItem.scss"));
-var PickerListItem = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerListItem, _super);
-    function PickerListItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PickerListItem.prototype.render = function () {
-        var _this = this;
-        var label;
+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);
         }
-        var component;
+        let component;
         if (this.props.checkbox) {
-            component = react_1.default.createElement(inputs_1.Checkbox, (0, tslib_1.__assign)({}, this.props.checkbox, { isDisabled: this.props.isLoading || this.props.checkbox.isDisabled, label: label, value: this.props.isChecked, onValueChange: function () { return _this.props.onCheck(_this.props); } }));
+            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: function () { return _this.props.onSelect(_this.props); } });
+            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);
-    };
-    return PickerListItem;
-}(react_1.default.Component));
+    }
+}
 exports.PickerListItem = PickerListItem;
 
 
@@ -2866,7 +2795,7 @@ exports.PickerListItem = PickerListItem;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"sub-header-wrapper":"_1Sfeq","subHeaderWrapper":"_1Sfeq","switch":"JACUd"};
+module.exports = {"sub-header-wrapper":"_1UnXc","subHeaderWrapper":"_1UnXc","switch":"_3ispc"};
 
 /***/ }),
 
@@ -2881,83 +2810,71 @@ module.exports = {"sub-header-wrapper":"_1Sfeq","subHeaderWrapper":"_1Sfeq","swi
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerModal = exports.PickerModalImpl = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerModal.scss */ "./components/pickers/PickerModal.scss"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var DataPickerBody_1 = __webpack_require__(/*! ./DataPickerBody */ "./components/pickers/DataPickerBody.tsx");
-var FlexItems_1 = __webpack_require__(/*! ../layout/FlexItems */ "./components/layout/FlexItems/index.ts");
-var overlays_1 = __webpack_require__(/*! ../overlays */ "./components/overlays/index.ts");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var buttons_1 = __webpack_require__(/*! ../buttons */ "./components/buttons/index.ts");
-var DataPickerRow_1 = __webpack_require__(/*! ./DataPickerRow */ "./components/pickers/DataPickerRow.tsx");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var i18n_1 = __webpack_require__(/*! ../../i18n */ "./i18n.ts");
-var PickerModalImpl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerModalImpl, _super);
-    function PickerModalImpl() {
-        return _super !== null && _super.apply(this, arguments) || this;
+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)) })));
     }
-    PickerModalImpl.prototype.renderRow = function (rowProps) {
-        var _this = this;
-        return this.props.renderRow ? this.props.renderRow(rowProps) : (React.createElement(DataPickerRow_1.DataPickerRow, (0, tslib_1.__assign)({}, rowProps, { key: rowProps.rowKey, borderBottom: 'none', padding: '24', size: '36', renderItem: function (i) { return React.createElement(typography_1.Text, { size: '36' }, rowProps.isLoading ? React.createElement(typography_1.TextPlaceholder, { wordsCount: 2 }) : _this.getName(i)); } })));
-    };
-    PickerModalImpl.prototype.renderFooter = function (selectedDataRows) {
-        var _this = this;
-        var hasSelection = selectedDataRows.length > 0;
-        var view = this.getView();
+    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 ? function () { return _this.clearSelection(); } : function () { return view.selectAll.onValueChange(true); } }),
+            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: function () { return _this.props.abort(); } }),
-            React.createElement(buttons_1.Button, { color: 'accent', caption: i18n_1.i18n.pickerModal.selectButton, onClick: function () { return _this.props.success(null); } }));
-    };
-    PickerModalImpl.prototype.render = function () {
-        var _this = this;
-        var view = this.getView();
-        var dataRows = this.getRows();
-        var selectedDataRows = view.getSelectedRows();
-        var rows = dataRows.map(function (props) { return _this.renderRow(props); });
-        return (React.createElement(overlays_1.ModalBlocker, (0, tslib_1.__assign)({}, this.props),
+            React.createElement(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: function () { return _this.props.abort(); } }),
+                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, (0, tslib_1.__assign)({}, this.lens.prop('dataSourceState').prop('search').toProps(), { onKeyDown: function (e) { return (0, uui_components_1.handleDataSourceKeyboard)({
-                                value: _this.getDataSourceState(),
-                                onValueChange: _this.handleDataSourceValueChange,
+                        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, (0, tslib_1.__assign)({ cx: css.switch, size: '18' }, this.stateLens.prop('showSelected').toProps(), { isDisabled: selectedDataRows.length < 1, label: 'Show only selected' })),
+                            }, 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, (0, tslib_1.__assign)({}, this.getListProps(), { value: this.getDataSourceState(), onValueChange: this.handleDataSourceValueChange, search: this.lens.prop('dataSourceState').prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: this.props.renderNotFound && (function () { return _this.props.renderNotFound({
-                        search: _this.state.dataSourceState.search,
-                        onClose: function () { return _this.props.success(selectedDataRows); },
-                    }); }), editMode: 'modal' })),
+                React.createElement(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)))));
-    };
-    return PickerModalImpl;
-}(uui_components_1.PickerModalBase));
+    }
+}
 exports.PickerModalImpl = PickerModalImpl;
-var PickerModal = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PickerModal, _super);
-    function PickerModal() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { selection: _this.props.initialValue };
-        _this.lens = uui_core_1.Lens.onState(_this);
-        return _this;
+class PickerModal extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { selection: this.props.initialValue };
+        this.lens = uui_core_1.Lens.onState(this);
     }
-    PickerModal.prototype.render = function () {
-        var _this = this;
-        return React.createElement(PickerModalImpl, (0, tslib_1.__assign)({}, this.props, this.lens.prop('selection').toProps(), { success: function () { return _this.props.success(_this.state.selection); } }));
-    };
-    return PickerModal;
-}(React.Component));
+    render() {
+        return React.createElement(PickerModalImpl, Object.assign({}, this.props, this.lens.prop('selection').toProps(), { success: () => this.props.success(this.state.selection) }));
+    }
+}
 exports.PickerModal = PickerModal;
 
 
@@ -2971,7 +2888,7 @@ exports.PickerModal = PickerModal;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3cMFB","mode-form":"kH3Cw","modeForm":"kH3Cw","mode-cell":"_2TRHm","modeCell":"_2TRHm","size-24":"_2TZNO","size24":"_2TZNO","size-30":"-Lwr_","size30":"-Lwr_","size-36":"_1x6xA","size36":"_1x6xA","size-42":"_3tdK_","size42":"_3tdK_","size-48":"_2q5Ui","size48":"_2q5Ui"};
+module.exports = {"root":"bLiuq","mode-form":"_1eBBR","modeForm":"_1eBBR","mode-cell":"cASlj","modeCell":"cASlj","size-24":"_1gKeM","size24":"_1gKeM","size-30":"ySojn","size30":"ySojn","size-36":"_2yS0W","size36":"_2yS0W","size-42":"_14dN1","size42":"_14dN1","size-48":"_3eZEJ","size48":"_3eZEJ"};
 
 /***/ }),
 
@@ -2986,17 +2903,17 @@ module.exports = {"root":"_3cMFB","mode-form":"kH3Cw","modeForm":"kH3Cw","mode-c
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerToggler = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var widgets_1 = __webpack_require__(/*! ../widgets */ "./components/widgets/index.ts");
-var types = (0, tslib_1.__importStar)(__webpack_require__(/*! ../types */ "./components/types.ts"));
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./PickerToggler.scss */ "./components/pickers/PickerToggler.scss"));
-var defaultSize = '36';
-var defaultMode = types.EditMode.FORM;
+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',
@@ -3006,7 +2923,7 @@ function applyPickerTogglerMods(mods) {
     ];
 }
 function PickerTogglerComponent(props, ref) {
-    var getPickerTogglerButtonSize = function (propSize) {
+    const getPickerTogglerButtonSize = (propSize) => {
         switch (propSize) {
             case '48':
                 return '42';
@@ -3020,9 +2937,9 @@ function PickerTogglerComponent(props, ref) {
                 return '18';
         }
     };
-    var getCaption = function (row) {
+    const getCaption = (row) => {
         var _a;
-        var maxItems = (props.maxItems || props.maxItems === 0) ? props.maxItems : 100;
+        const maxItems = (props.maxItems || props.maxItems === 0) ? props.maxItems : 100;
         if (row.isLoading) {
             return React.createElement(typography_1.TextPlaceholder, null);
         }
@@ -3033,14 +2950,14 @@ function PickerTogglerComponent(props, ref) {
             return props.getName(row.value);
         }
     };
-    var renderItem = function (row) {
+    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: function (e) {
+        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, (0, tslib_1.__assign)({}, props, { ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: !!props.renderItem ? props.renderItem : renderItem, getName: function (item) { return props.getName ? props.getName(item) : item; }, cancelIcon: icons_1.systemIcons[props.size || defaultSize].clear, dropdownIcon: icons_1.systemIcons[props.size || defaultSize].foldingArrow })));
+    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);
 
@@ -3057,7 +2974,7 @@ exports.PickerToggler = React.forwardRef(PickerTogglerComponent);
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -3081,7 +2998,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"cell":"_3DNeD","wrapper":"_25pq-","align-widgets-top":"_1LWWc","alignWidgetsTop":"_1LWWc","size-24":"_35sGP","size24":"_35sGP","folding-arrow":"_3Z6Tr","foldingArrow":"_3Z6Tr","size-30":"_1m510","size30":"_1m510","size-36":"_1PYI7","size36":"_1PYI7","size-42":"_1tlBC","size42":"_1tlBC","size-48":"FFtbb","size48":"FFtbb","size-60":"_3aFfP","size60":"_3aFfP","align-widgets-center":"_1h3Mv","alignWidgetsCenter":"_1h3Mv","padding-12":"_2wOOZ","padding12":"_2wOOZ","padding-24":"_3ocxo","padding24":"_3ocxo","padding-left-12":"V8EtZ","paddingLeft12":"V8EtZ","padding-left-24":"_1Lz4T","paddingLeft24":"_1Lz4T","padding-right-24":"_3h6cg","paddingRight24":"_3h6cg","drag-handle":"RpecM","dragHandle":"RpecM","checkbox":"_382GO","indent":"_3zWnf","folding-arrow-12":"_2wLZX","foldingArrow12":"_2wLZX","folding-arrow-18":"_3f6cV","foldingArrow18":"_3f6cV"};
+module.exports = {"cell":"AN8pM","wrapper":"_2Krjd","align-widgets-top":"_1evKg","alignWidgetsTop":"_1evKg","size-24":"_2voJw","size24":"_2voJw","folding-arrow":"_3HNqa","foldingArrow":"_3HNqa","size-30":"_91rET","size30":"_91rET","size-36":"_2WSyT","size36":"_2WSyT","size-42":"_2nC8t","size42":"_2nC8t","size-48":"wmMPW","size48":"wmMPW","size-60":"_3Apfp","size60":"_3Apfp","align-widgets-center":"_2Sbv2","alignWidgetsCenter":"_2Sbv2","padding-12":"_363JH","padding12":"_363JH","padding-24":"NXHy0","padding24":"NXHy0","padding-left-12":"_1i7-D","paddingLeft12":"_1i7-D","padding-left-24":"_2AvHf","paddingLeft24":"_2AvHf","padding-right-24":"rhqd8","paddingRight24":"rhqd8","drag-handle":"_2MfK-","dragHandle":"_2MfK-","checkbox":"_2BMjs","indent":"_1GcXn","folding-arrow-12":"_1BnHa","foldingArrow12":"_1BnHa","folding-arrow-18":"Z_mNq","foldingArrow18":"Z_mNq"};
 
 /***/ }),
 
@@ -3096,44 +3013,41 @@ module.exports = {"cell":"_3DNeD","wrapper":"_25pq-","align-widgets-top":"_1LWWc
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableCell = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var typography_1 = __webpack_require__(/*! ../typography */ "./components/typography/index.ts");
-var layout_1 = __webpack_require__(/*! ../layout */ "./components/layout/index.ts");
-var inputs_1 = __webpack_require__(/*! ../inputs */ "./components/inputs/index.ts");
-var tree_folding_arrow_svg_1 = __webpack_require__(/*! ../../icons/tree_folding_arrow.svg */ "./icons/tree_folding_arrow.svg");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./DataTableCell.scss */ "./components/tables/DataTableCell.scss"));
-var DataTableCell = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(DataTableCell, _super);
-    function DataTableCell() {
+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;
-        var _this = _super.apply(this, arguments) || this;
-        _this.hasDepsWidgets = !!(((_b = (_a = _this.props.rowProps) === null || _a === void 0 ? void 0 : _a.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) || ((_c = _this.props.rowProps) === null || _c === void 0 ? void 0 : _c.indent));
-        _this.isDraggable = function () { var _a, _b; return !!((_b = (_a = _this.props.rowProps) === null || _a === void 0 ? void 0 : _a.dnd) === null || _b === void 0 ? void 0 : _b.srcData); };
-        _this.getContent = function () {
+        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;
-            var row = _this.props.rowProps;
-            var additionalItemSize = +_this.props.size < 30 ? '12' : '18';
-            var cellContent = row.isLoading
-                ? React.createElement(typography_1.Text, { size: _this.props.size != '60' ? _this.props.size : '48' },
+            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);
+                : this.props.column.render(this.props.rowProps.value, this.props.rowProps);
             return (React.createElement(React.Fragment, null,
-                _this.props.isFirstColumn && _this.isDraggable() && React.createElement(uui_components_1.DragHandle, { cx: css.dragHandle }),
-                _this.props.isFirstColumn && ((_a = row === null || row === void 0 ? void 0 : row.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && React.createElement(inputs_1.Checkbox, { key: 'cb', cx: css.checkbox, tabIndex: _this.props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: function () { return row.onCheck(row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid }),
-                _this.props.isFirstColumn && row.indent > 0 && (React.createElement("div", { key: 'fold', className: css.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable &&
-                    React.createElement(uui_components_1.IconContainer, { key: 'icon', icon: tree_folding_arrow_svg_1.ReactComponent, cx: [css.foldingArrow, css["folding-arrow-".concat(additionalItemSize)], uui_core_1.uuiMarkers.clickable], rotate: row.isFolded ? '90ccw' : '0', onClick: function () { return row.onFold(row); } }))),
+                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));
         };
-        return _this;
     }
-    DataTableCell.prototype.render = function () {
-        return (React.createElement(layout_1.FlexCell, (0, tslib_1.__assign)({}, this.props.column, { rawProps: { role: this.props.role }, cx: (0, uui_core_1.cx)(css.cell, this.props.isFirstColumn && this.hasDepsWidgets && css.wrapper, css['size-' + (this.props.size || '36')], css["padding-".concat(this.props.padding || '12')], this.props.isFirstColumn && css["padding-left-".concat(this.props.padding || '24')], this.props.isLastColumn && css['padding-right-24'], this.props.column.cx, css["align-widgets-".concat(this.props.alignActions || 'top')]) }), this.getContent()));
-    };
-    return DataTableCell;
-}(React.Component));
+    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;
 
 
@@ -3147,7 +3061,7 @@ exports.DataTableCell = DataTableCell;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"container":"_1_6LY","target":"_2W62V","panel":"_1OZST","divider":"_9f_vV","input":"_2iBaj","notification":"_3tsLp"};
+module.exports = {"container":"_1RJjp","target":"_2fLje","panel":"_301i5","divider":"T4MUw","input":"_3ibuP","notification":"_2XfLJ"};
 
 /***/ }),
 
@@ -3162,50 +3076,46 @@ module.exports = {"container":"_1_6LY","target":"_2W62V","panel":"_1OZST","divid
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Preset = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var __1 = __webpack_require__(/*! ../../ */ "./components/index.ts");
-var navigation_more_vert_12_svg_1 = __webpack_require__(/*! @epam/assets/icons/common/navigation-more_vert-12.svg */ "../epam-assets/icons/common/navigation-more_vert-12.svg");
-var Preset_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Preset.scss */ "./components/tables/Presets/Preset.scss"));
-var Preset = function (_a) {
-    var preset = _a.preset, isActive = _a.isActive, hasChanged = _a.hasChanged, choosePreset = _a.choosePreset, duplicatePreset = _a.duplicatePreset, deletePreset = _a.deletePreset, updatePreset = _a.updatePreset, resetToDefault = _a.resetToDefault;
-    var _b = (0, react_1.useState)(false), isRenaming = _b[0], setIsRenaming = _b[1];
-    var _c = (0, react_1.useState)(""), renamingValue = _c[0], setRenamingValue = _c[1];
-    var handleChoose = (0, react_1.useCallback)(function () { return choosePreset(preset); }, [preset, choosePreset]);
-    var handleUpdate = (0, react_1.useCallback)(function () { return updatePreset(preset); }, [preset, updatePreset]);
-    var acceptRenaming = (0, react_1.useCallback)(function () {
+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) {
-            var newPreset = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, preset), { name: renamingValue });
+            const newPreset = Object.assign(Object.assign({}, preset), { name: renamingValue });
             updatePreset(newPreset);
         }
         setIsRenaming(false);
     }, [renamingValue, updatePreset]);
-    var renderBody = (0, react_1.useCallback)(function (props) {
-        var handleDuplicate = function () {
+    const renderBody = (0, react_1.useCallback)((props) => {
+        const handleDuplicate = () => {
             duplicatePreset(preset);
             props.onClose();
         };
-        var startRenaming = function () {
+        const startRenaming = () => {
             setIsRenaming(true);
             setRenamingValue(preset.name);
             props.onClose();
         };
-        var handleDelete = function () {
+        const handleDelete = () => {
             deletePreset(preset);
-            if (isActive) {
-                resetToDefault();
-            }
             props.onClose();
         };
-        var update = function () {
+        const update = () => {
             handleUpdate();
             props.onClose();
         };
-        var choose = function () {
+        const choose = () => {
             choosePreset(preset);
             props.onClose();
         };
-        return (react_1.default.createElement(__1.DropdownMenuBody, (0, tslib_1.__assign)({}, props),
+        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 }),
@@ -3213,8 +3123,8 @@ var Preset = function (_a) {
             react_1.default.createElement(__1.DropdownMenuSplitter, null),
             react_1.default.createElement(__1.DropdownMenuButton, { caption: 'Discard all changes', onClick: choose, isDisabled: !hasChanged })));
     }, [preset, duplicatePreset, deletePreset, isActive, choosePreset, hasChanged]);
-    var renderTarget = (0, react_1.useCallback)(function (props) {
-        return (react_1.default.createElement(__1.Button, (0, tslib_1.__assign)({}, props, { icon: navigation_more_vert_12_svg_1.ReactComponent, size: '24', isDropdown: false, mode: isActive ? 'solid' : 'outline', cx: [Preset_scss_1.default.target, hasChanged && Preset_scss_1.default.notification] })));
+    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 }))
@@ -3235,7 +3145,7 @@ exports.Preset = Preset;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"row":"_1sgVx"};
+module.exports = {"row":"_2fTAk"};
 
 /***/ }),
 
@@ -3250,26 +3160,24 @@ module.exports = {"row":"_1sgVx"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Presets = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var react_1 = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var index_1 = __webpack_require__(/*! ../../index */ "./components/index.ts");
-var layout_1 = __webpack_require__(/*! ../../layout */ "./components/layout/index.ts");
-var Preset_1 = __webpack_require__(/*! ./Preset */ "./components/tables/Presets/Preset.tsx");
-var Presets_scss_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! ./Presets.scss */ "./components/tables/Presets/Presets.scss"));
-var PresetsImpl = function (_a) {
-    var tableState = _a.tableState, presets = _a.presets, createNewPreset = _a.createNewPreset, activePresetId = _a.activePresetId, isDefaultPresetActive = _a.isDefaultPresetActive, hasPresetChanged = _a.hasPresetChanged, resetToDefault = _a.resetToDefault, choosePreset = _a.choosePreset, duplicatePreset = _a.duplicatePreset, deletePreset = _a.deletePreset, updatePreset = _a.updatePreset;
-    var newPresetTitle = "New preset";
-    var saveNewPreset = (0, react_1.useCallback)(function () {
+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]);
-    var activePreset = presets.find(function (p) { return p.id === activePresetId; });
-    var hasActivePresetChanged = (0, react_1.useMemo)(function () {
-        return !isDefaultPresetActive && hasPresetChanged(activePreset);
-    }, [isDefaultPresetActive, activePreset, tableState.filter]);
+    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 },
-        react_1.default.createElement(index_1.Button, { size: "24", caption: "Default", mode: isDefaultPresetActive ? 'solid' : 'outline', onClick: isDefaultPresetActive ? null : resetToDefault }),
-        presets.map(function (preset) { return (react_1.default.createElement(Preset_1.Preset, { preset: preset, isActive: preset.id === activePresetId, hasChanged: preset.id === activePresetId && hasActivePresetChanged, choosePreset: choosePreset, duplicatePreset: duplicatePreset, deletePreset: deletePreset, updatePreset: updatePreset, resetToDefault: resetToDefault, key: preset.id })); }),
-        hasActivePresetChanged && (react_1.default.createElement(index_1.Button, { caption: "Save as ".concat(newPresetTitle), onClick: saveNewPreset, color: 'accent', mode: 'solid', size: '24' }))));
+        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);
 
@@ -3286,7 +3194,7 @@ exports.Presets = react_1.default.memo(PresetsImpl);
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
 
@@ -3303,7 +3211,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -3359,7 +3267,7 @@ var EditMode;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"_3B36F"};
+module.exports = {"root":"_31qXI"};
 
 /***/ }),
 
@@ -3374,22 +3282,22 @@ module.exports = {"root":"_3B36F"};
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Text.scss */ "./components/typography/Text.scss"));
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var textLayout_1 = __webpack_require__(/*! ../../helpers/textLayout */ "./helpers/textLayout.tsx");
+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) {
-    var textClasses = (0, textLayout_1.getTextClasses)({
+    const textClasses = (0, textLayout_1.getTextClasses)({
         size: mods.size || '36',
         lineHeight: mods.lineHeight,
         fontSize: mods.fontSize,
     }, false);
     return [
-        "font-".concat(mods.font || 'regular'),
-        "text-color-".concat(mods.color || 'primary'),
+        `font-${mods.font || 'regular'}`,
+        `text-color-${mods.color || 'primary'}`,
         css.root,
     ].concat(textClasses);
 }
@@ -3406,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":"_1RzQO","loading-word":"_3D_63","loadingWord":"_3D_63","animated-loading":"_33sOA","animatedLoading":"_33sOA","skeleton_loading":"_3tVdb","skeletonLoading":"_3tVdb"};
+module.exports = {"container":"_3XBX8","loading-word":"_1Z4BH","loadingWord":"_1Z4BH","animated-loading":"_1wYYK","animatedLoading":"_1wYYK","skeleton_loading":"_3UwDP","skeletonLoading":"_3UwDP"};
 
 /***/ }),
 
@@ -3421,26 +3329,26 @@ module.exports = {"container":"_1RzQO","loading-word":"_3D_63","loadingWord":"_3
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextPlaceholder = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var React = (0, tslib_1.__importStar)(__webpack_require__(/*! react */ "react"));
-var classnames_1 = (0, tslib_1.__importDefault)(__webpack_require__(/*! classnames */ "classnames"));
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./TextPlaceholder.scss */ "./components/typography/TextPlaceholder.scss"));
+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");
-var TextPlaceholder = function (props) {
-    var pattern = "0";
-    var text = React.useMemo(function () {
-        var words = [];
-        for (var i = 0; i < (props.wordsCount || 1); i++) {
-            var lengthWord = Math.floor(Math.random() * 10 + 8);
+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(function (it, index) { return (React.createElement("span", { key: index, className: (0, classnames_1.default)([
+    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 } })); })));
+        ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 exports.TextPlaceholder = TextPlaceholder;
 
@@ -3457,7 +3365,7 @@ exports.TextPlaceholder = TextPlaceholder;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
 
@@ -3475,9 +3383,9 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, function () { return []; });
+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, () => []);
 
 
 /***/ }),
@@ -3490,7 +3398,7 @@ exports.Avatar = (0, uui_core_1.withMods)(uui_components_1.Avatar, function () {
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"root":"U2wq1","size-18":"CKedr","size18":"CKedr","fill-transparent":"_3B-De","fillTransparent":"_3B-De","size-24":"_1Ihmg","size24":"_1Ihmg","size-30":"_1SH02","size30":"_1SH02","size-36":"_84U6O","size36":"_84U6O","size-42":"_17Iay","size42":"_17Iay","size-48":"_3UXEY","size48":"_3UXEY","fill-solid":"_3ksnx","fillSolid":"_3ksnx"};
+module.exports = {"root":"_17Bsg","size-18":"qRQZD","size18":"qRQZD","fill-transparent":"_1Vnlk","fillTransparent":"_1Vnlk","size-24":"_2vZjF","size24":"_2vZjF","size-30":"_3voUa","size30":"_3voUa","size-36":"_2WWn6","size36":"_2WWn6","size-42":"_3LWS0","size42":"_3LWS0","size-48":"y9RQG","size48":"y9RQG","fill-solid":"_2WFgL","fillSolid":"_2WFgL"};
 
 /***/ }),
 
@@ -3505,15 +3413,15 @@ module.exports = {"root":"U2wq1","size-18":"CKedr","size18":"CKedr","fill-transp
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = exports.applyBadgeMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Badge.scss */ "./components/widgets/Badge.scss"));
+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");
-var defaultSize = '36';
-var mapSize = {
+const defaultSize = '36';
+const mapSize = {
     '48': '48',
     '42': '48',
     '36': '36',
@@ -3523,7 +3431,7 @@ var mapSize = {
 };
 function applyBadgeMods(mods) {
     return [
-        "badge-color-".concat((mods.color || 'info')),
+        `badge-color-${(mods.color || 'info')}`,
         buttonCss.root,
         css['size-' + (mods.size || defaultSize)],
         css['fill-' + (mods.fill || 'solid')],
@@ -3531,11 +3439,11 @@ function applyBadgeMods(mods) {
     ];
 }
 exports.applyBadgeMods = applyBadgeMods;
-exports.Badge = (0, uui_core_1.withMods)(uui_components_1.Button, applyBadgeMods, function (props) { return ({
+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',
-}); });
+}));
 
 
 /***/ }),
@@ -3548,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":"ZVdaF","size-18":"_2VEPO","size18":"_2VEPO","size-24":"YADCR","size24":"YADCR","size-30":"_3fXej","size30":"_3fXej","size-36":"_1EbVB","size36":"_1EbVB","size-42":"_3Up3a","size42":"_3Up3a","size-48":"_2pxBE","size48":"_2pxBE"};
+module.exports = {"root":"_3niLc","size-18":"_3lRTy","size18":"_3lRTy","size-24":"O5IqU","size24":"O5IqU","size-30":"HwqtS","size30":"HwqtS","size-36":"_32Fyd","size36":"_32Fyd","size-42":"_1Mn8c","size42":"_1Mn8c","size-48":"_1QcE3","size48":"_1QcE3"};
 
 /***/ }),
 
@@ -3563,15 +3471,15 @@ module.exports = {"root":"ZVdaF","size-18":"_2VEPO","size18":"_2VEPO","size-24":
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = exports.applyTagMods = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var uui_core_1 = __webpack_require__(/*! @epam/uui-core */ "@epam/uui-core");
-var uui_components_1 = __webpack_require__(/*! @epam/uui-components */ "@epam/uui-components");
-var icons_1 = __webpack_require__(/*! ../../icons/icons */ "./icons/icons.tsx");
-var buttonCss = (0, tslib_1.__importStar)(__webpack_require__(/*! ../buttons/Button.scss */ "./components/buttons/Button.scss"));
+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");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ./Tag.scss */ "./components/widgets/Tag.scss"));
-var defaultSize = '36';
-var mapSize = {
+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',
@@ -3588,10 +3496,10 @@ function applyTagMods(mods) {
     ];
 }
 exports.applyTagMods = applyTagMods;
-exports.Tag = (0, uui_core_1.withMods)(uui_components_1.Button, applyTagMods, function (props) { return ({
+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,
-}); });
+}));
 
 
 /***/ }),
@@ -3606,7 +3514,7 @@ exports.Tag = (0, uui_core_1.withMods)(uui_components_1.Button, applyTagMods, fu
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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);
@@ -3625,9 +3533,9 @@ var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextClasses = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
-var css = (0, tslib_1.__importStar)(__webpack_require__(/*! ../assets/styles/text-layout.scss */ "./assets/styles/text-layout.scss"));
-var defaultTextSettings = {
+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 },
@@ -3643,12 +3551,12 @@ function getTextClasses(props, border) {
             css['font-size-' + props.fontSize],
         ];
     }
-    var setting = {
+    const setting = {
         size: props.size,
         lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
         fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
     };
-    var vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
+    const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
     return [
         css['line-height-' + setting.lineHeight],
         css['font-size-' + setting.fontSize],
@@ -4518,26 +4426,26 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.systemIcons = void 0;
-var btn_cross_12_svg_1 = __webpack_require__(/*! ./btn-cross-12.svg */ "./icons/btn-cross-12.svg");
-var btn_cross_18_svg_1 = __webpack_require__(/*! ./btn-cross-18.svg */ "./icons/btn-cross-18.svg");
-var btn_cross_24_svg_1 = __webpack_require__(/*! ./btn-cross-24.svg */ "./icons/btn-cross-24.svg");
-var folding_arrow_12_svg_1 = __webpack_require__(/*! ./folding-arrow-12.svg */ "./icons/folding-arrow-12.svg");
-var folding_arrow_18_svg_1 = __webpack_require__(/*! ./folding-arrow-18.svg */ "./icons/folding-arrow-18.svg");
-var folding_arrow_24_svg_1 = __webpack_require__(/*! ./folding-arrow-24.svg */ "./icons/folding-arrow-24.svg");
-var accept_12_svg_1 = __webpack_require__(/*! ./accept-12.svg */ "./icons/accept-12.svg");
-var accept_18_svg_1 = __webpack_require__(/*! ./accept-18.svg */ "./icons/accept-18.svg");
-var accept_24_svg_1 = __webpack_require__(/*! ./accept-24.svg */ "./icons/accept-24.svg");
-var search_12_svg_1 = __webpack_require__(/*! ./search-12.svg */ "./icons/search-12.svg");
-var search_18_svg_1 = __webpack_require__(/*! ./search-18.svg */ "./icons/search-18.svg");
-var search_24_svg_1 = __webpack_require__(/*! ./search-24.svg */ "./icons/search-24.svg");
-var calendar_12_svg_1 = __webpack_require__(/*! ./calendar-12.svg */ "./icons/calendar-12.svg");
-var calendar_18_svg_1 = __webpack_require__(/*! ./calendar-18.svg */ "./icons/calendar-18.svg");
-var calendar_24_svg_1 = __webpack_require__(/*! ./calendar-24.svg */ "./icons/calendar-24.svg");
-var info_12_svg_1 = __webpack_require__(/*! ./info-12.svg */ "./icons/info-12.svg");
-var info_18_svg_1 = __webpack_require__(/*! ./info-18.svg */ "./icons/info-18.svg");
-var info_24_svg_1 = __webpack_require__(/*! ./info-24.svg */ "./icons/info-24.svg");
-var help_fill_10_svg_1 = __webpack_require__(/*! ./help-fill-10.svg */ "./icons/help-fill-10.svg");
-var help_fill_16_svg_1 = __webpack_require__(/*! ./help-fill-16.svg */ "./icons/help-fill-16.svg");
+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,
@@ -5417,7 +5325,7 @@ var ForwardRef = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.forwa
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = __webpack_require__(/*! tslib */ "../node_modules/tslib/tslib.es6.js");
+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';