@epam/uui 5.2.0 → 5.3.0-rc.1

package/index.esm.js

@@ -1,16 +1,16 @@
+import * as React from 'react';
+import React__default, { forwardRef, useContext, useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import * as uuiComponents from '@epam/uui-components';
-import { IconButton as IconButton$1, Button as Button$1, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, TimePickerBody as TimePickerBody$1, BaseTimePicker, InputAddon as InputAddon$1, Calendar as Calendar$1, DatePickerBodyBase, valueFormat, YearSelection, MonthSelection, i18n as i18n$1, IconContainer, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexRow as FlexRow$1, Text as Text$1, FlexSpacer, FlexCell as FlexCell$1, VPanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, Tooltip as Tooltip$1, RadioGroup as RadioGroup$1, ScrollBars as ScrollBars$1, Spinner as Spinner$1, Blocker as Blocker$1, CheckboxGroup as CheckboxGroup$1, BaseDatePicker, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, BaseRangeDatePicker, PickerBodyBase, DataTableCell as DataTableCell$1, DragHandle, DataPickerRow as DataPickerRow$1, usePickerModal, handleDataSourceKeyboard, AvatarStack as AvatarStack$1, Paginator as Paginator$1, ProgressBar as ProgressBar$1, PickerToggler as PickerToggler$1, Avatar, usePickerInput, usePickerList, DataTableRow as DataTableRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, AdaptivePanel, useColumnsConfiguration, DataTableSelectionProvider, Burger as Burger$1, UploadFileToggler, DropSpot as DropSpot$1 } from '@epam/uui-components';
+import { AvatarStack as AvatarStack$1, Button as Button$1, Spinner as Spinner$1, Paginator as Paginator$1, ProgressBar as ProgressBar$1, IconButton as IconButton$1, RadioInput as RadioInput$1, TextInput as TextInput$1, ControlGroup as ControlGroup$1, NumericInput as NumericInput$1, TextArea as TextArea$1, TimePickerBody as TimePickerBody$1, BaseTimePicker, InputAddon as InputAddon$1, Slider as Slider$1, Calendar as Calendar$1, DatePickerBodyBase, valueFormat, YearSelection, MonthSelection, i18n as i18n$1, IconContainer, Dropdown as Dropdown$1, Anchor as Anchor$1, FlexRow as FlexRow$1, Text as Text$1, FlexSpacer, FlexCell as FlexCell$1, VPanel, Tooltip as Tooltip$1, RadioGroup as RadioGroup$1, ScrollBars as ScrollBars$1, Blocker as Blocker$1, CheckboxGroup as CheckboxGroup$1, PickerBodyBase, DataTableCell as DataTableCell$1, DragHandle, DataPickerRow as DataPickerRow$1, usePickerModal, handleDataSourceKeyboard, PickerToggler as PickerToggler$1, Avatar, usePickerInput, usePickerList, BaseDatePicker, BaseRangeDatePicker, AdaptivePanel, ModalBlocker as ModalBlocker$1, ModalWindow as ModalWindow$1, CalendarPresets as CalendarPresets$1, uuiDaySelection, uuiDatePickerBodyBase, DataTableRow as DataTableRow$1, DataTableHeaderCell as DataTableHeaderCell$1, DataTableHeaderRow as DataTableHeaderRow$1, useColumnsConfiguration, DataTableSelectionProvider, Burger as Burger$1, UploadFileToggler, DropSpot as DropSpot$1 } from '@epam/uui-components';
 export { Avatar, FlexSpacer, IconContainer } from '@epam/uui-components';
-import { withMods, IEditableDebouncer, devLogger, cx as cx$1, UuiContext, uuiMod, i18n as i18n$2, useVirtualList, useScrollShadows, uuiMarkers, arrayToMatrix, Lens, isMobile, mobilePopperModifier, uuiDataTableHeaderCell, uuiElement, useForceUpdate, getSeparatedValue, useArrayDataSource, getOrderBetween, useUuiContext, DndActor, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes } from '@epam/uui-core';
-import * as React from 'react';
-import React__default, { forwardRef, useContext, useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { withMods, devLogger, IEditableDebouncer, cx as cx$1, UuiContext, uuiMod, i18n as i18n$2, useVirtualList, useScrollShadows, uuiMarkers, Lens, isMobile, uuiElement, useForceUpdate, getSeparatedValue, useArrayDataSource, getOrderBetween, useUuiContext, arrayToMatrix, mobilePopperModifier, uuiDataTableHeaderCell, DndActor, useColumnsConfig, uuiScrollShadows, Form as Form$1, useForm as useForm$1, formatBytes } from '@epam/uui-core';
+import cx from 'classnames';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat.js';
 import updateLocale from 'dayjs/plugin/updateLocale.js';
-import cx from 'classnames';
 import localeData from 'dayjs/plugin/localeData';
-import isoWeek from 'dayjs/plugin/isoWeek.js';
 import sortBy from 'lodash.sortby';
+import isoWeek from 'dayjs/plugin/isoWeek.js';
 import FocusLock from 'react-focus-lock';
 
 var _path$1d;
@@ -572,36 +572,275 @@ const systemIcons = {
     },
 };
 
-var buttonCss = {"root":"QUH6Vs","mode-solid":"PUdmlY","mode-outline":"YI5UJZ","mode-none":"_4QI8cF","mode-ghost":"_-1oYSP","size-18":"tU0kim","size-24":"NspImT","size-30":"CTfB1X","size-36":"OuvVcj","size-42":"nv0V8T","size-48":"N2GXps","modeSolid":"PUdmlY","modeOutline":"YI5UJZ","modeNone":"_4QI8cF","modeGhost":"_-1oYSP","size18":"tU0kim","size24":"NspImT","size30":"CTfB1X","size36":"OuvVcj","size42":"nv0V8T","size48":"N2GXps"};
+var css$1n = {"root":"_3yrNYH"};
+
+const AvatarStack = withMods(AvatarStack$1, () => [css$1n.root]);
+
+var css$1m = {"root":"Luqjzj","size-24":"hqp2yC","size-18":"CWtD1X","size-12":"gP-GDE","size24":"hqp2yC","size18":"CWtD1X","size12":"gP-GDE"};
+
+const CountIndicator = forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$1m.root,
+            'uui-count_indicator',
+            css$1m[`size-${props.size || 24}`],
+            props.color && `uui-color-${props.color}`,
+            props.cx,
+        ]) }, props.caption));
+});
+
+var css$1l = {"uui-typography":"qKdfCX","hero-header":"_28cSe9","promo-header":"_9k-ESQ","uui-critical":"WEGK2o","uui-success":"I4jQ-0","uui-warning":"qcFmm4","uui-typography-size-12":"Kvo9tH","uui-typography-size-14":"R6ydKu","uui-typography-size-16":"dOdj4s","root":"-OXwOB","size-18":"Br3o3X","size-24":"JQue1N","size-30":"IEANf-","size-36":"kpAN3K","size-42":"cvz6B5","size-48":"mAmFTX","uuiTypography":"qKdfCX","heroHeader":"_28cSe9","promoHeader":"_9k-ESQ","uuiCritical":"WEGK2o","uuiSuccess":"I4jQ-0","uuiWarning":"qcFmm4","uuiTypographySize12":"Kvo9tH","uuiTypographySize14":"R6ydKu","uuiTypographySize16":"dOdj4s","size18":"Br3o3X","size24":"JQue1N","size30":"IEANf-","size36":"kpAN3K","size42":"cvz6B5","size48":"mAmFTX"};
+
+const defaultSize$b = '36';
+const mapSize$1 = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+function applyBadgeMods(mods) {
+    return [
+        'uui-badge',
+        css$1l.root,
+        css$1l['size-' + (mods.size || defaultSize$b)],
+        `uui-fill-${mods.fill || 'solid'}`,
+        mods.color && `uui-color-${mods.color}`,
+        mods.indicator && 'uui-indicator',
+    ];
+}
+const mapCountIndicatorSizes$1 = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+const Badge = withMods(Button$1, applyBadgeMods, (props) => {
+    if (process.env.NODE_ENV !== "production") {
+        devLogger.warnAboutDeprecatedPropValue({
+            component: 'Badge',
+            propName: 'size',
+            propValue: props.size,
+            propValueUseInstead: '42',
+            condition: () => ['48'].indexOf(props.size) !== -1,
+        });
+    }
+    return {
+        dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$b].foldingArrow,
+        clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$b].clear,
+        countPosition: 'left',
+        countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: null, size: mapCountIndicatorSizes$1[props.size || defaultSize$b] }))),
+        indicator: props.indicator || false,
+    };
+});
+
+var css$1k = {"uui-typography":"SLTHmI","hero-header":"nP3Scp","promo-header":"_5mHlmJ","uui-critical":"jzZYi0","uui-success":"uxmDHo","uui-warning":"G8DOto","uui-typography-size-12":"ggPO3-","uui-typography-size-14":"iI144g","uui-typography-size-16":"hDxksW","root":"duaqU8","size-18":"DLx6dT","size-24":"REDfgX","size-30":"rvZnC-","size-36":"oAipv0","size-42":"MaSU-p","size-48":"paNCBJ","uuiTypography":"SLTHmI","heroHeader":"nP3Scp","promoHeader":"_5mHlmJ","uuiCritical":"jzZYi0","uuiSuccess":"uxmDHo","uuiWarning":"G8DOto","uuiTypographySize12":"ggPO3-","uuiTypographySize14":"iI144g","uuiTypographySize16":"hDxksW","size18":"DLx6dT","size24":"REDfgX","size30":"rvZnC-","size36":"oAipv0","size42":"MaSU-p","size48":"paNCBJ"};
+
+const defaultSize$a = '36';
+const mapSize = {
+    48: '48',
+    42: '48',
+    36: '36',
+    30: '30',
+    24: '30',
+    18: '18',
+};
+const mapCountIndicatorSizes = {
+    18: '12',
+    24: '18',
+    30: '18',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+function applyTagMods(mods) {
+    return [
+        css$1k['size-' + (mods.size || defaultSize$a)],
+        css$1k.root,
+        'uui-color-neutral',
+        'uui-tag',
+    ];
+}
+const Tag = withMods(Button$1, applyTagMods, (props) => ({
+    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$a].foldingArrow,
+    clearIcon: systemIcons[mapSize[props.size] || defaultSize$a].clear,
+    countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: "white", size: mapCountIndicatorSizes[props.size || defaultSize$a] }))),
+}));
+
+var css$1j = {"root":"gVFB-y","uui-spinner":"OQNRYv","uuiSpinner":"OQNRYv"};
+
+function applySpinnerMods() {
+    return [css$1j.root, 'uui-spinner'];
+}
+const Spinner = withMods(Spinner$1, applySpinnerMods);
+
+var css$1i = {"root":"NOi-AT","spacer":"dNxuOX","mode-ghost":"iG7OeE","size-24":"bHqhVZ","size-30":"rU9f5C","navigation-size-24":"_-3q0oi","navigation-size-30":"QNZHCb","modeGhost":"iG7OeE","size24":"bHqhVZ","size30":"rU9f5C","navigationSize24":"_-3q0oi","navigationSize30":"QNZHCb"};
+
+var _path$M;
+function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$O({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    ref: ref
+  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.705 3.705 7 3 4 6l3 3 .705-.705L5.415 6l2.29-2.295z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$O = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
+
+var _path$L;
+function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$N({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 12 12",
+    ref: ref
+  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$N = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
+
+var _path$K;
+function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$M({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M11.557 5.558 10.5 4.5 6 9l4.5 4.5 1.057-1.057L8.123 9l3.434-3.442z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$M = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
+
+var _path$J;
+function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$L({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.5 4.5 6.442 5.558 9.877 9l-3.435 3.443L7.5 13.5 12 9 7.5 4.5z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$L = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
+
+function Paginator(props) {
+    const renderPaginator = (params) => {
+        var _a, _b;
+        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: cx(css$1i.root, 'uui-paginator') }, params.rawProps),
+            React__default.createElement(Button, { cx: css$1i[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$M : ForwardRef$O, onClick: params.goToPrev, isDisabled: params.isFirst, fill: "outline", color: "secondary" }),
+            params.pages.map((page, index) => {
+                var _a, _b;
+                if (page.type === 'spacer') {
+                    return (React__default.createElement(Button, { cx: cx(css$1i[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$1i.spacer), size: params.size, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1 }));
+                }
+                else {
+                    return (React__default.createElement(Button, { cx: cx(css$1i[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$1i[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary" }));
+                }
+            }),
+            React__default.createElement(Button, { cx: css$1i[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$L : ForwardRef$N, onClick: params.goToNext, isDisabled: params.isLast, fill: "outline", color: "secondary" })));
+    };
+    return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
+}
+
+var css$1h = {"root":"k-MwpF","bar":"cVuIlF","progressBar-indeterminate":"Jb0M7h","size-12":"i5H6RI","size-18":"ykaiPn","size-24":"Z4bAzW","progressBarIndeterminate":"Jb0M7h","size12":"i5H6RI","size18":"ykaiPn","size24":"Z4bAzW"};
+
+const IndeterminateBar = React.forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, className: cx('uui-indeterminate_bar', props.cx, css$1h.root, css$1h[`size-${props.size || 12}`]) },
+        React.createElement("div", { className: cx(css$1h.bar) })));
+});
+
+var css$1g = {"root":"_1zljNJ","striped":"_3Oc66t","animate-stripes":"AzaLeg","size-12":"AYDPkB","size-18":"gozExq","size-24":"pe8pQp","animateStripes":"AzaLeg","size12":"AYDPkB","size18":"gozExq","size24":"pe8pQp"};
+
+const defaultSize$9 = '12';
+function applyProgressBarMods(mods) {
+    const size = mods.size || defaultSize$9;
+    return [
+        css$1g.root,
+        css$1g[`size-${size}`],
+        mods.striped && css$1g.striped,
+    ];
+}
+const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
+    hideLabel: props.hideLabel || props.striped,
+}));
+
+var css$1f = {"root":"_5xOU14"};
+
+const IndicatorBar = React.forwardRef((props, ref) => {
+    const { progress } = props;
+    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$1f.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$1f.root, props.cx) }));
+});
+
+var css$1e = {"root":"GSVC1S","size-12":"uYbavj","size-18":"kU-W4y","size-24":"n47c-p","size12":"uYbavj","size18":"kU-W4y","size24":"n47c-p"};
+
+const StatusIndicator = forwardRef((props, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cx([
+            css$1e.root,
+            css$1e[`size-${props.size || 24}`],
+            'uui-status_indicator',
+            `uui-color-${props.color || 'neutral'}`,
+            `uui-fill-${props.fill || 'solid'}`,
+            props.cx,
+        ]) },
+        React__default.createElement("div", { className: "uui-status_indicator_dot" }),
+        React__default.createElement("p", { className: "uui-status_indicator_caption" }, props.caption)));
+});
+
+var css$1d = {"uui-typography":"cXfXyf","hero-header":"zjzfnQ","promo-header":"uSCJT2","uui-critical":"A20pNH","uui-success":"YmMKmU","uui-warning":"Jipexj","uui-typography-size-12":"rkDzYE","uui-typography-size-14":"LWHKtv","uui-typography-size-16":"kpQMMv","root":"j-Bm7f","size-18":"gs-Msa","size-24":"f95UdQ","size-30":"aqqftl","size-36":"MVEaV8","size-42":"tHcyPL","size-48":"jPboMx","uuiTypography":"cXfXyf","heroHeader":"zjzfnQ","promoHeader":"uSCJT2","uuiCritical":"A20pNH","uuiSuccess":"YmMKmU","uuiWarning":"Jipexj","uuiTypographySize12":"rkDzYE","uuiTypographySize14":"LWHKtv","uuiTypographySize16":"kpQMMv","size18":"gs-Msa","size24":"f95UdQ","size30":"aqqftl","size36":"MVEaV8","size42":"tHcyPL","size48":"jPboMx"};
 
 const allButtonColors = [
-    'accent', 'primary', 'secondary', 'negative',
+    'accent', 'primary', 'critical', 'secondary', 'neutral',
 ];
-const defaultSize$b = '36';
+const defaultSize$8 = '36';
 function applyButtonMods(mods) {
     return [
-        `button-${mods.color || 'primary'}`,
-        buttonCss.root,
-        buttonCss[`size-${mods.size || defaultSize$b}`],
-        buttonCss[`mode-${mods.mode || 'solid'}`],
+        css$1d.root,
+        'uui-button',
+        `uui-fill-${mods.fill || 'solid'}`,
+        `uui-color-${mods.color || 'primary'}`,
+        css$1d[`size-${mods.size || defaultSize$8}`],
     ];
 }
-const Button = withMods(uuiComponents.Button, applyButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$b].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$b].clear,
+const Button = withMods(Button$1, applyButtonMods, (props) => ({
+    dropdownIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$8].clear,
+    countIndicator: (countIndicatorProps) => React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: "white" })),
 }));
 
-var css$1i = {"root":"E-pvc-"};
+var css$1c = {"root":"MfCqIL"};
 
 const allIconColors = [
-    'info', 'success', 'warning', 'error', 'secondary', 'default',
+    'info', 'success', 'warning', 'error', 'secondary', 'neutral',
 ];
 function applyIconButtonMods(mods) {
-    return [`icon-button-${mods.color || 'default'}`, css$1i.root];
+    return ['uui-icon_button', `uui-color-${mods.color || 'neutral'}`, css$1c.root];
 }
 const IconButton = withMods(IconButton$1, applyIconButtonMods);
 
-var css$1h = {"root":"qufNQD","size-18":"tJVt0T","size-24":"JVKFcw","size-30":"RLCwxI","size-36":"Jp31ld","size-42":"bPmGkY","size-48":"_5oad3H","size18":"tJVt0T","size24":"JVKFcw","size30":"RLCwxI","size36":"Jp31ld","size42":"bPmGkY","size48":"_5oad3H"};
+var css$1b = {"root":"_97b6xl","size-18":"bobENg","size-24":"GSss5o","size-30":"jixH8P","size-36":"_28Kg5s","size-42":"-RyIBL","size-48":"yJ78sb","size18":"bobENg","size24":"GSss5o","size30":"jixH8P","size36":"_28Kg5s","size42":"-RyIBL","size48":"yJ78sb"};
 
 function getIconClass(props) {
     const classList = {
@@ -620,45 +859,46 @@ function getIconClass(props) {
     return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
 }
 
-const defaultSize$a = '36';
+const defaultSize$7 = '36';
 const allLinkButtonColors = ['primary', 'secondary', 'contrast'];
 function applyLinkButtonMods(mods) {
     return [
-        css$1h.root,
-        css$1h['size-' + (mods.size || defaultSize$a)],
+        'uui-link_button',
+        css$1b.root,
+        css$1b['size-' + (mods.size || defaultSize$7)],
         ...getIconClass(mods),
-        `link-button-${mods.color || 'primary'}`,
+        `uui-color-${mods.color || 'primary'}`,
     ];
 }
 const LinkButton = withMods(Button$1, applyLinkButtonMods, (props) => ({
-    dropdownIcon: systemIcons[props.size || defaultSize$a].foldingArrow,
-    clearIcon: systemIcons[props.size || defaultSize$a].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$7].foldingArrow,
+    clearIcon: systemIcons[props.size || defaultSize$7].clear,
 }));
 
-var css$1g = {"root":"S-bFnI","withNotify":"T8G5AG","size-36":"vAb6JS","size-48":"bEbX6B","size-60":"TT7e5T","size36":"vAb6JS","size48":"bEbX6B","size60":"TT7e5T"};
+var css$1a = {"uui-typography":"tZEox0","hero-header":"hj-7-y","promo-header":"dl2f3x","uui-critical":"_2Zxdu3","uui-success":"PR9bWG","uui-warning":"aNA5ug","uui-typography-size-12":"YihI9r","uui-typography-size-14":"FEjTsi","uui-typography-size-16":"m45-bW","root":"bPVRhU","withNotify":"a5k8wB","size-36":"CKA3pD","size-48":"x7Tnbl","size-60":"M8F7KE","uuiTypography":"tZEox0","heroHeader":"hj-7-y","promoHeader":"dl2f3x","uuiCritical":"_2Zxdu3","uuiSuccess":"PR9bWG","uuiWarning":"aNA5ug","uuiTypographySize12":"YihI9r","uuiTypographySize14":"FEjTsi","uuiTypographySize16":"m45-bW","size36":"CKA3pD","size48":"x7Tnbl","size60":"M8F7KE"};
 
 function applyTabButtonMods(mods) {
     return [
-        css$1g.root,
-        'informer-default',
-        css$1g['size-' + (mods.size || '48')],
-        mods.withNotify && css$1g.withNotify,
+        css$1a.root,
+        'uui-tab-button',
+        css$1a['size-' + (mods.size || '48')],
+        mods.withNotify && css$1a.withNotify,
         ...getIconClass(mods),
     ];
 }
-const TabButton = withMods(Button$1, applyTabButtonMods, (props) => (Object.assign(Object.assign({ dropdownIcon: systemIcons['36'].foldingArrow, clearIcon: systemIcons['36'].clear, countPosition: 'right' }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps) })));
+const TabButton = withMods(Button$1, applyTabButtonMods, (props) => (Object.assign(Object.assign({ dropdownIcon: systemIcons['36'].foldingArrow, clearIcon: systemIcons['36'].clear }, props), { rawProps: Object.assign({ role: 'tab' }, props.rawProps), countIndicator: (countIndicatorProps) => (React__default.createElement(CountIndicator, Object.assign({}, countIndicatorProps, { color: props.isLinkActive ? 'info' : 'neutral', size: "18" }))) })));
 
-var css$1f = {"root":"-z7hER"};
+var css$19 = {"uui-typography":"i6pq-e","hero-header":"CkLeId","promo-header":"gOXAii","uui-critical":"_4IsaOF","uui-success":"_37-jsb","uui-warning":"dzv9dX","uui-typography-size-12":"nJIR6e","uui-typography-size-14":"Cj5mzm","uui-typography-size-16":"txaPS-","root":"ipnm9s","uuiTypography":"i6pq-e","heroHeader":"CkLeId","promoHeader":"gOXAii","uuiCritical":"_4IsaOF","uuiSuccess":"_37-jsb","uuiWarning":"dzv9dX","uuiTypographySize12":"nJIR6e","uuiTypographySize14":"Cj5mzm","uuiTypographySize16":"txaPS-"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1f.root];
+    return [css$19.root];
 }
 const VerticalTabButton = withMods(TabButton, applyVerticalTabButtonMods);
 
-const allButtonModes = [
+const allButtonFills = [
     'solid', 'outline', 'ghost', 'none',
 ];
-const allFillStyles = allButtonModes;
+const allFillStyles = allButtonFills;
 const allSizes = [
     '24', '30', '36', '42', '48',
 ];
@@ -668,11 +908,8 @@ const allRowSizes = [
 const allSemanticColors = [
     'info', 'success', 'warning', 'error',
 ];
-const allButtonSemanticColors = [
-    'accent', 'primary', 'secondary', 'negative',
-];
 const allEpamBadgeSemanticColors = [
-    'info', 'success', 'warning', 'error', 'default',
+    'info', 'success', 'warning', 'critical', 'neutral',
 ];
 const allTextSizes = [
     '18', '24', '30', '36', '48',
@@ -687,89 +924,92 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var _path$M;
-function _extends$O() { _extends$O = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$O.apply(this, arguments); }
+var _path$I;
+function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
 var SvgCheck12 = function SvgCheck12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$O({
+  return /*#__PURE__*/React.createElement("svg", _extends$K({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.491 3.449 10.51 4.55 5.663 9.024 2.487 6.047l1.026-1.094L5.67 6.975z"
   })));
 };
-var ForwardRef$O = /*#__PURE__*/forwardRef(SvgCheck12);
+var ForwardRef$K = /*#__PURE__*/forwardRef(SvgCheck12);
 
-var _path$L;
-function _extends$N() { _extends$N = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$N.apply(this, arguments); }
+var _path$H;
+function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
 var SvgCheck18 = function SvgCheck18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$N({
+  return /*#__PURE__*/React.createElement("svg", _extends$J({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m14.247 4.341 1.506 1.318-7.704 8.804-4.756-4.756 1.414-1.414 3.244 3.243z"
   })));
 };
-var ForwardRef$N = /*#__PURE__*/forwardRef(SvgCheck18);
+var ForwardRef$J = /*#__PURE__*/forwardRef(SvgCheck18);
 
-var _path$K;
-function _extends$M() { _extends$M = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$M.apply(this, arguments); }
+var _path$G;
+function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
 var SvgPartlySelect12 = function SvgPartlySelect12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$M({
+  return /*#__PURE__*/React.createElement("svg", _extends$I({
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 5v2H3V5z"
   })));
 };
-var ForwardRef$M = /*#__PURE__*/forwardRef(SvgPartlySelect12);
+var ForwardRef$I = /*#__PURE__*/forwardRef(SvgPartlySelect12);
 
-var _path$J;
-function _extends$L() { _extends$L = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$L.apply(this, arguments); }
+var _path$F;
+function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
 var SvgPartlySelect18 = function SvgPartlySelect18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$L({
+  return /*#__PURE__*/React.createElement("svg", _extends$H({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 8v2H4V8z"
   })));
 };
-var ForwardRef$L = /*#__PURE__*/forwardRef(SvgPartlySelect18);
+var ForwardRef$H = /*#__PURE__*/forwardRef(SvgPartlySelect18);
 
-var css$1e = {"root":"_0HmuS5","size-18":"aqlLAd","size-12":"M5rgEr","mode-cell":"SDybOn","size18":"aqlLAd","size12":"M5rgEr","modeCell":"SDybOn"};
+var css$18 = {"uui-typography":"Mg45YS","hero-header":"KJDGUT","promo-header":"E2nOBY","uui-critical":"v5N25b","uui-success":"K5fqX9","uui-warning":"Y9k65L","uui-typography-size-12":"zKHwhO","uui-typography-size-14":"b5Kw3K","uui-typography-size-16":"xLHkib","root":"y-s0Dd","size-18":"QDd8hm","size-12":"-TzHMf","mode-cell":"Sp-K-n","uuiTypography":"Mg45YS","heroHeader":"KJDGUT","promoHeader":"E2nOBY","uuiCritical":"v5N25b","uuiSuccess":"K5fqX9","uuiWarning":"Y9k65L","uuiTypographySize12":"zKHwhO","uuiTypographySize14":"b5Kw3K","uuiTypographySize16":"xLHkib","size18":"QDd8hm","size12":"-TzHMf","modeCell":"Sp-K-n"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1e.root, css$1e['size-' + (mods.size || '18')], css$1e['mode-' + (mods.mode || 'form')],
+        css$18.root,
+        css$18['size-' + (mods.size || '18')],
+        css$18['mode-' + (mods.mode || 'form')],
+        'uui-color-primary',
     ];
 }
 const applyUUICheckboxProps = (props) => ({
-    icon: props.size === '12' ? ForwardRef$O : ForwardRef$N,
-    indeterminateIcon: props.size === '12' ? ForwardRef$M : ForwardRef$L,
+    icon: props.size === '12' ? ForwardRef$K : ForwardRef$J,
+    indeterminateIcon: props.size === '12' ? ForwardRef$I : ForwardRef$H,
 });
 const Checkbox = withMods(uuiComponents.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1d = {"root":"rV0pO4","size-18":"xmFDP2","size-12":"bCJITc","size18":"xmFDP2","size12":"bCJITc"};
+var css$17 = {"uui-typography":"zooAAk","hero-header":"qNwiT2","promo-header":"NioGFN","uui-critical":"dV5OWt","uui-success":"oYEFLn","uui-warning":"gAYURJ","uui-typography-size-12":"KyIR1A","uui-typography-size-14":"htC76H","uui-typography-size-16":"Dgodbd","root":"sTrlfp","size-18":"PwLpfK","size-12":"NN-8sx","uuiTypography":"zooAAk","heroHeader":"qNwiT2","promoHeader":"NioGFN","uuiCritical":"dV5OWt","uuiSuccess":"oYEFLn","uuiWarning":"gAYURJ","uuiTypographySize12":"KyIR1A","uuiTypographySize14":"htC76H","uuiTypographySize16":"Dgodbd","size18":"PwLpfK","size12":"NN-8sx"};
 
 var _circle;
-function _extends$K() { _extends$K = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$K.apply(this, arguments); }
+function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
 var SvgRadioPoint = function SvgRadioPoint(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$K({
+  return /*#__PURE__*/React.createElement("svg", _extends$G({
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
@@ -781,18 +1021,18 @@ var SvgRadioPoint = function SvgRadioPoint(props, ref) {
     r: 6
   })));
 };
-var ForwardRef$K = /*#__PURE__*/forwardRef(SvgRadioPoint);
+var ForwardRef$G = /*#__PURE__*/forwardRef(SvgRadioPoint);
 
 function applyRadioInputMods(mods) {
-    return [css$1d.root, css$1d['size-' + (mods.size || '18')]];
+    return [css$17.root, css$17['size-' + (mods.size || '18')], 'uui-color-primary'];
 }
-const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$K }));
+const RadioInput = withMods(RadioInput$1, applyRadioInputMods, () => ({ icon: ForwardRef$G }));
 
-var css$1c = {"root":"bFmAME","size-12":"ImyDES","size-18":"_0wNFkz","size-24":"I3TL--","size12":"ImyDES","size18":"_0wNFkz","size24":"I3TL--"};
+var css$16 = {"root":"TpZL4g","size-12":"nPz9EM","size-18":"_2MXQIy","size-24":"lgiXar","size12":"nPz9EM","size18":"_2MXQIy","size24":"lgiXar"};
 
 function applySwitchMods(mods) {
     return [
-        'switch-vars', css$1c.root, css$1c['size-' + (mods.size || '18')],
+        css$16.root, css$16['size-' + (mods.size || '18')], 'uui-color-primary',
     ];
 }
 const Switch = withMods(uuiComponents.Switch, applySwitchMods);
@@ -841,27 +1081,27 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var textInputCss = {"root":"ixikS-","mode-form":"hArR5R","mode-inline":"Ullg9r","mode-cell":"O1d9bM","size-24":"_--t0HX","size-30":"czxZvN","size-36":"rCY3sq","size-42":"AyyVsA","size-48":"_2auiOB","modeForm":"hArR5R","modeInline":"Ullg9r","modeCell":"O1d9bM","size24":"_--t0HX","size30":"czxZvN","size36":"rCY3sq","size42":"AyyVsA","size48":"_2auiOB"};
+var textInputCss = {"uui-typography":"wKSDEr","hero-header":"CRLjy5","promo-header":"GwjwwV","uui-critical":"oO63xI","uui-success":"Cd3IBr","uui-warning":"dpNmTt","uui-typography-size-12":"_4E9hWO","uui-typography-size-14":"-dERdY","uui-typography-size-16":"wcflJo","root":"PW1w5J","mode-form":"GbkRWY","mode-inline":"_517VoZ","mode-cell":"d0Tuxx","size-24":"_5EUT3t","size-30":"NLpCIH","size-36":"vbwnuz","size-42":"hobixB","size-48":"mTTCip","uuiTypography":"wKSDEr","heroHeader":"CRLjy5","promoHeader":"GwjwwV","uuiCritical":"oO63xI","uuiSuccess":"Cd3IBr","uuiWarning":"dpNmTt","uuiTypographySize12":"_4E9hWO","uuiTypographySize14":"-dERdY","uuiTypographySize16":"wcflJo","modeForm":"GbkRWY","modeInline":"_517VoZ","modeCell":"d0Tuxx","size24":"_5EUT3t","size30":"NLpCIH","size36":"vbwnuz","size42":"hobixB","size48":"mTTCip"};
 
-const defaultSize$9 = '36';
+const defaultSize$6 = '36';
 const defaultMode$5 = EditMode.FORM;
 function applyTextInputMods(mods) {
     return [
         textInputCss.root,
-        textInputCss['size-' + (mods.size || defaultSize$9)],
+        textInputCss['size-' + (mods.size || defaultSize$6)],
         textInputCss['mode-' + (mods.mode || defaultMode$5)],
     ];
 }
 const TextInput = withMods(TextInput$1, applyTextInputMods, (props) => ({
-    acceptIcon: systemIcons[props.size || defaultSize$9].accept,
-    cancelIcon: systemIcons[props.size || defaultSize$9].clear,
-    dropdownIcon: systemIcons[props.size || defaultSize$9].foldingArrow,
+    acceptIcon: systemIcons[props.size || defaultSize$6].accept,
+    cancelIcon: systemIcons[props.size || defaultSize$6].clear,
+    dropdownIcon: systemIcons[props.size || defaultSize$6].foldingArrow,
 }));
 const SearchInput = React__default.forwardRef((props, ref) => {
     // analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
     const textInputProps = __rest(props, []);
     delete textInputProps.getValueChangeAnalyticsEvent;
-    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$9].search, onCancel: !!props.value
+    return (React__default.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => (React__default.createElement(TextInput, Object.assign({ icon: systemIcons[props.size || defaultSize$6].search, onCancel: !!props.value
                 // In a lot of places, it is required to check if a clicked element is a part of some other element.
                 // Usually, those are global click event handlers. To allow that logic to work correctly, it is necessary
                 // to execute the `disappearing` of the cross (setState execution) after the event will pass through all the handlers.
@@ -870,41 +1110,41 @@ const SearchInput = React__default.forwardRef((props, ref) => {
                 : undefined, type: "search", inputMode: "search", ref: ref }, textInputProps, iEditable))) })));
 });
 
-var css$1b = {"root":"Yz-PH2"};
+var css$15 = {"root":"pud-3w"};
 
-const ControlGroup = withMods(ControlGroup$1, () => [css$1b.root]);
+const ControlGroup = withMods(ControlGroup$1, () => [css$15.root]);
 
 function MultiSwitchComponent(props, ref) {
-    return (React.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist' }) }, props.items.map((item, index) => (React.createElement(Button, Object.assign({}, props, item, { isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), mode: props.value === item.id ? 'solid' : 'outline', color: props.color === 'secondary' && props.value === item.id ? 'primary' : props.color || 'primary', size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
+    return (React.createElement(ControlGroup, { ref: ref, rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'tablist' }) }, props.items.map((item, index) => (React.createElement(Button, Object.assign({}, props, item, { isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), fill: props.value === item.id ? 'solid' : 'outline', color: props.color === 'secondary' && props.value === item.id ? 'primary' : props.color || 'primary', size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } }))))));
 }
 const MultiSwitch = React.forwardRef(MultiSwitchComponent);
 
-var css$1a = {"root":"_0E7PbO","size-24":"ozFBJK","size-30":"qPA5-n","size-36":"-WXHNr","size-42":"wcb74Q","size-48":"_9cYYEe","mode-form":"EhLuew","mode-cell":"Pcyu6T","size24":"ozFBJK","size30":"qPA5-n","size36":"-WXHNr","size42":"wcb74Q","size48":"_9cYYEe","modeForm":"EhLuew","modeCell":"Pcyu6T"};
+var css$14 = {"uui-typography":"Y--vnV","hero-header":"crBUoh","promo-header":"laf--p","uui-critical":"c-pYk0","uui-success":"-UPuxw","uui-warning":"qqUTRa","uui-typography-size-12":"_4HZnEj","uui-typography-size-14":"OaO9nN","uui-typography-size-16":"lcQcNn","root":"_73qIvK","size-24":"KfRyeG","size-30":"LK4vyc","size-36":"_2j6CAc","size-42":"WxpuNH","size-48":"L2rWy3","mode-form":"stfG4E","mode-cell":"_5V-5jI","uuiTypography":"Y--vnV","heroHeader":"crBUoh","promoHeader":"laf--p","uuiCritical":"c-pYk0","uuiSuccess":"-UPuxw","uuiWarning":"qqUTRa","uuiTypographySize12":"_4HZnEj","uuiTypographySize14":"OaO9nN","uuiTypographySize16":"lcQcNn","size24":"KfRyeG","size30":"LK4vyc","size36":"_2j6CAc","size42":"WxpuNH","size48":"L2rWy3","modeForm":"stfG4E","modeCell":"_5V-5jI"};
 
-const defaultSize$8 = '36';
+const defaultSize$5 = '36';
 const defaultMode$4 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
-        textInputCss.root, css$1a.root, css$1a['size-' + (mods.size || defaultSize$8)], textInputCss['size-' + (mods.size || defaultSize$8)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
+        textInputCss.root, css$14.root, css$14['size-' + (mods.size || defaultSize$5)], textInputCss['size-' + (mods.size || defaultSize$5)], textInputCss['mode-' + (mods.mode || defaultMode$4)],
     ];
 }
 const NumericInput = withMods(NumericInput$1, applyNumericInputMods, (props) => {
     var _a, _b;
     return ({
-        upIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
-        downIcon: systemIcons[props.size || defaultSize$8].foldingArrow,
+        upIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
+        downIcon: systemIcons[props.size || defaultSize$5].foldingArrow,
         align: (_a = props.align) !== null && _a !== void 0 ? _a : (props.mode === 'cell' ? 'right' : 'left'),
         disableArrows: (_b = props.disableArrows) !== null && _b !== void 0 ? _b : props.mode === 'cell',
     });
 });
 
-var css$19 = {"root":"IKpXwB","mode-form":"_7YArHI","mode-cell":"_1jMdoM","mode-inline":"oDiENK","size-24":"hOvIFQ","size-30":"_9V6xIZ","size-36":"J335WH","size-42":"ynDtSX","size-48":"ari4lJ","modeForm":"_7YArHI","modeCell":"_1jMdoM","modeInline":"oDiENK","size24":"hOvIFQ","size30":"_9V6xIZ","size36":"J335WH","size42":"ynDtSX","size48":"ari4lJ"};
+var css$13 = {"uui-typography":"EzJpt1","hero-header":"WtxTZ7","promo-header":"goLCPT","uui-critical":"aWoVpE","uui-success":"fnapwX","uui-warning":"tacqlh","uui-typography-size-12":"_2yeqgu","uui-typography-size-14":"JZeT65","uui-typography-size-16":"Of568E","root":"s1awNl","mode-form":"KjBQEi","mode-cell":"xM18WA","mode-inline":"yixNK2","size-24":"hx0hBi","size-30":"_6Ry-pN","size-36":"qnIlPr","size-42":"_5v4J70","size-48":"ohC0J-","uuiTypography":"EzJpt1","heroHeader":"WtxTZ7","promoHeader":"goLCPT","uuiCritical":"aWoVpE","uuiSuccess":"fnapwX","uuiWarning":"tacqlh","uuiTypographySize12":"_2yeqgu","uuiTypographySize14":"JZeT65","uuiTypographySize16":"Of568E","modeForm":"KjBQEi","modeCell":"xM18WA","modeInline":"yixNK2","size24":"hx0hBi","size30":"_6Ry-pN","size36":"qnIlPr","size42":"_5v4J70","size48":"ohC0J-"};
 
-const defaultSize$7 = '36';
+const defaultSize$4 = '36';
 const defaultMode$3 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$19.root, css$19['size-' + (mods.size || defaultSize$7)], css$19['mode-' + (mods.mode || defaultMode$3)],
+        css$13.root, css$13['size-' + (mods.size || defaultSize$4)], css$13['mode-' + (mods.mode || defaultMode$3)],
     ];
 }
 const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
@@ -912,18 +1152,20 @@ const TextArea = withMods(TextArea$1, applyTextAreaMods, (props) => ({
     maxLength: props.mode === EditMode.CELL ? undefined : props.maxLength,
 }));
 
-var css$18 = {"root":"UCG4d3"};
+var css$12 = {"root":"zOegt3"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$18.root, mods.vPadding && `vPadding-${mods.vPadding}`, mods.padding && `padding-${mods.padding}`,
+        css$12.root,
+        mods.vPadding && `vPadding-${mods.vPadding}`,
+        mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = withMods(uuiComponents.DropdownContainer, applyDropdownContainerMods);
 
-var css$17 = {"root":"JkWZQf","icon":"mDPX3T","date-input":"HJW-FZ","dateInput":"HJW-FZ"};
+var css$11 = {"root":"bVj5a8","icon":"-B-Fzs","date-input":"RPoQmy","dateInput":"RPoQmy"};
 
-const TimePickerBody = withMods(TimePickerBody$1, () => [css$17.root], () => ({ addIcon: ForwardRef$1b, subtractIcon: ForwardRef$1b }));
+const TimePickerBody = withMods(TimePickerBody$1, () => [css$11.root], () => ({ addIcon: ForwardRef$1b, subtractIcon: ForwardRef$1b }));
 
 dayjs.extend(customParseFormat);
 const defaultMode$2 = EditMode.FORM;
@@ -943,7 +1185,7 @@ class TimePicker extends BaseTimePicker {
                     });
                 }
             }
-            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$17.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, size: this.props.size || '36', isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, isInvalid: this.props.isInvalid, cx: [css$11.root, css$11.dateInput, this.props.inputCx], value: this.state.value, onValueChange: this.handleInputChange, onCancel: this.onClear, onFocus: this.handleFocus, onBlur: this.handleBlur, isDropdown: false, placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), mode: this.props.mode || defaultMode$2, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
         };
         this.renderBody = (props) => {
             var _a;
@@ -953,50 +1195,23 @@ class TimePicker extends BaseTimePicker {
     }
 }
 
-var css$16 = {"root":"_4u8TGr"};
+var css$10 = {"root":"HtayTa"};
 
 function applyInputAddonMods() {
     return [
-        css$16.root,
+        css$10.root,
     ];
 }
 const InputAddon = withMods(InputAddon$1, applyInputAddonMods);
 
-var css$15 = {"container":"eNm-kq"};
+var css$$ = {"root":"i6Is7L"};
 
-var _path$I;
-function _extends$J() { _extends$J = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$J.apply(this, arguments); }
-var SvgNavigationChevronLeft18 = function SvgNavigationChevronLeft18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$J({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M11.557 5.558 10.5 4.5 6 9l4.5 4.5 1.057-1.057L8.123 9l3.434-3.442z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$J = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft18);
+function applySliderMods() {
+    return [css$$.root];
+}
+const Slider = withMods(Slider$1, applySliderMods);
 
-var _path$H;
-function _extends$I() { _extends$I = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$I.apply(this, arguments); }
-var SvgNavigationChevronRight18 = function SvgNavigationChevronRight18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$I({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.5 4.5 6.442 5.558 9.877 9l-3.435 3.443L7.5 13.5 12 9 7.5 4.5z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$I = /*#__PURE__*/forwardRef(SvgNavigationChevronRight18);
+var css$_ = {"container":"hHnkCY"};
 
 dayjs.extend(localeData);
 const uuiHeader = {
@@ -1071,20 +1286,22 @@ function DatePickerHeader(props) {
         var _a, _b, _c;
         return `${((_a = props.value) === null || _a === void 0 ? void 0 : _a.view) !== 'MONTH_SELECTION' ? dayjs.months()[(_b = props.value) === null || _b === void 0 ? void 0 : _b.displayedDate.month()] : ''} ${(_c = props.value) === null || _c === void 0 ? void 0 : _c.displayedDate.year()}`;
     }, [(_a = props.value) === null || _a === void 0 ? void 0 : _a.view, (_b = props.value) === null || _b === void 0 ? void 0 : _b.displayedDate]);
-    return (React.createElement("div", { className: cx(css$15.container, uuiHeader.container, props.cx) },
+    return (React.createElement("div", { className: cx(css$_.container, uuiHeader.container, props.cx) },
         React.createElement("header", { className: uuiHeader.header },
-            React.createElement(Button, { icon: ForwardRef$J, color: "secondary", mode: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
-            React.createElement(Button, { caption: title, mode: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
-            React.createElement(Button, { icon: ForwardRef$I, color: "secondary", mode: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
+            React.createElement(Button, { icon: props.navIconLeft || ForwardRef$M, color: "secondary", fill: "ghost", cx: uuiHeader.navIconLeft, onClick: () => onLeftNavigationArrow() }),
+            React.createElement(Button, { caption: title, fill: "ghost", cx: uuiHeader.navTitle, onClick: () => onCaptionClick(props.value.view) }),
+            React.createElement(Button, { icon: props.navIconRight || ForwardRef$L, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: () => onRightNavigationArrow() }))));
 }
 
-var css$14 = {"root":"xW-c5o"};
+var css$Z = {"uui-typography":"_0luRPY","hero-header":"I8ShoX","promo-header":"X5AHbP","uui-critical":"vvJeNC","uui-success":"UJOPvv","uui-warning":"TEvB8J","uui-typography-size-12":"LWivlJ","uui-typography-size-14":"Q1gxlm","uui-typography-size-16":"u4J1pZ","root":"eBu0Yg","uuiTypography":"_0luRPY","heroHeader":"I8ShoX","promoHeader":"X5AHbP","uuiCritical":"vvJeNC","uuiSuccess":"UJOPvv","uuiWarning":"TEvB8J","uuiTypographySize12":"LWivlJ","uuiTypographySize14":"Q1gxlm","uuiTypographySize16":"u4J1pZ"};
 
 function applyDateSelectionMods() {
-    return [css$14.root];
+    return [css$Z.root];
 }
 const Calendar = withMods(Calendar$1, applyDateSelectionMods);
 
+var css$Y = {"uui-typography":"eeqC4H","hero-header":"vCQzFG","promo-header":"_99L26i","uui-critical":"bKEb7B","uui-success":"pu8a1h","uui-warning":"z0tDwz","uui-typography-size-12":"rGgewF","uui-typography-size-14":"sdIhjS","uui-typography-size-16":"_2pjxtH","root":"UNeGQl","uuiTypography":"eeqC4H","heroHeader":"vCQzFG","promoHeader":"_99L26i","uuiCritical":"bKEb7B","uuiSuccess":"pu8a1h","uuiWarning":"z0tDwz","uuiTypographySize12":"rGgewF","uuiTypographySize14":"sdIhjS","uuiTypographySize16":"_2pjxtH"};
+
 dayjs.extend(updateLocale);
 const uuiDatePickerBody = {
     wrapper: 'uui-datepickerBody-wrapper',
@@ -1110,8 +1327,8 @@ class DatePickerBody extends DatePickerBodyBase {
                     return (React.createElement(Calendar, { value: dayjs(this.props.value.selectedDate), onValueChange: this.onDayClick, displayedDate: this.props.value.displayedDate, filter: this.props.filter, getDayCX: this.props.getDayCX, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }));
             }
         };
-        this.renderDatePicker = () => {
-            return (React.createElement("div", { className: cx$1(uuiDatePickerBody.wrapper, this.props.cx) },
+        this.renderBody = () => {
+            return (React.createElement("div", { className: cx$1(css$Y.root, uuiDatePickerBody.wrapper, this.props.cx) },
                 React.createElement(DatePickerHeader, { value: this.props.value, onValueChange: (newValue) => this.props.setDisplayedDateAndView(newValue.displayedDate, newValue.view) }),
                 this.getView()));
         };
@@ -1120,106 +1337,106 @@ class DatePickerBody extends DatePickerBodyBase {
     }
 }
 
-var _path$G;
-function _extends$H() { _extends$H = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$H.apply(this, arguments); }
+var _path$E;
+function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
 var SvgNotificationCheckCircleFill24 = function SvgNotificationCheckCircleFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$H({
+  return /*#__PURE__*/React.createElement("svg", _extends$F({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$G || (_path$G = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var ForwardRef$H = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
+var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationCheckCircleFill24);
 
-var _path$F;
-function _extends$G() { _extends$G = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$G.apply(this, arguments); }
+var _path$D;
+function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
 var SvgNotificationWarningFill24 = function SvgNotificationWarningFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$G({
+  return /*#__PURE__*/React.createElement("svg", _extends$E({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
   })));
 };
-var ForwardRef$G = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
+var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationWarningFill24);
 
-var _path$E;
-function _extends$F() { _extends$F = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$F.apply(this, arguments); }
+var _path$C;
+function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
 var SvgNotificationErrorFill24 = function SvgNotificationErrorFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$F({
+  return /*#__PURE__*/React.createElement("svg", _extends$D({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$E || (_path$E = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
   })));
 };
-var ForwardRef$F = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
+var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNotificationErrorFill24);
 
-var _path$D;
-function _extends$E() { _extends$E = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$E.apply(this, arguments); }
+var _path$B;
+function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
 var SvgNotificationHelpFill24 = function SvgNotificationHelpFill24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$E({
+  return /*#__PURE__*/React.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
   })));
 };
-var ForwardRef$E = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
+var ForwardRef$C = /*#__PURE__*/forwardRef(SvgNotificationHelpFill24);
 
-var _path$C;
-function _extends$D() { _extends$D = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$D.apply(this, arguments); }
+var _path$A;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
 var SvgNavigationClose24$1 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$D({
+  return /*#__PURE__*/React.createElement("svg", _extends$B({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$C || (_path$C = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   })));
 };
-var ForwardRef$D = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
+var ForwardRef$B = /*#__PURE__*/forwardRef(SvgNavigationClose24$1);
 
-var css$13 = {"root":"sOzgSz","icon-wrapper":"X102F6","alert-wrapper":"h6khSz","size-48":"FI-DGe","size-36":"nYkxfx","action-wrapper":"TQqan5","action-icon":"kVehal","action-link":"s-s75J","close-icon":"hWRctH","main-path":"EyeoAy","content":"j52qKb","iconWrapper":"X102F6","alertWrapper":"h6khSz","size48":"FI-DGe","size36":"nYkxfx","actionWrapper":"TQqan5","actionIcon":"kVehal","actionLink":"s-s75J","closeIcon":"hWRctH","mainPath":"EyeoAy"};
+var css$X = {"root":"KoUIMl","icon-wrapper":"-GbN7J","alert-wrapper":"Ej-McX","size-48":"SfSn1o","size-36":"GCLvIP","action-wrapper":"OV2c3-","action-icon":"nC1q5A","action-link":"fKsbUr","close-icon":"u2pb-R","main-path":"fP1cmr","content":"_6040CY","iconWrapper":"-GbN7J","alertWrapper":"Ej-McX","size48":"SfSn1o","size36":"GCLvIP","actionWrapper":"OV2c3-","actionIcon":"nC1q5A","actionLink":"fKsbUr","closeIcon":"u2pb-R","mainPath":"fP1cmr"};
 
-const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx(css$13.alertWrapper, `alert-${props.color || 'default'}`, css$13.root, props.cx, (props.size === '36' ? css$13.size36 : css$13.size48)) }, props.rawProps),
-    React.createElement("div", { className: css$13.mainPath },
-        props.icon && (React.createElement("div", { className: css$13.iconWrapper },
-            React.createElement(IconContainer, { icon: props.icon, cx: css$13.actionIcon }))),
-        React.createElement("div", { className: css$13.content },
+const Alert = React.forwardRef((props, ref) => (React.createElement("div", Object.assign({ role: "alert", ref: ref, className: cx('uui-alert', css$X.root, css$X.alertWrapper, props.color && `uui-color-${props.color}`, props.cx, (props.size === '36' ? css$X.size36 : css$X.size48)) }, props.rawProps),
+    React.createElement("div", { className: css$X.mainPath },
+        props.icon && (React.createElement("div", { className: css$X.iconWrapper },
+            React.createElement(IconContainer, { icon: props.icon, cx: css$X.actionIcon }))),
+        React.createElement("div", { className: css$X.content },
             props.children,
-            props.actions && (React.createElement("div", { className: css$13.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$13.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
-        props.onClose && React.createElement(IconButton, { icon: ForwardRef$D, color: "default", onClick: props.onClose, cx: css$13.closeIcon })))));
-const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$G, color: "warning", ref: ref }, props)));
-const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$H, color: "success", ref: ref }, props)));
-const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "info", ref: ref }, props)));
-const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "error", ref: ref }, props)));
+            props.actions && (React.createElement("div", { className: css$X.actionWrapper }, props.actions.map((action) => (React.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$X.actionLink, size: (props === null || props === void 0 ? void 0 : props.size) === '36' ? '24' : '30' })))))),
+        props.onClose && React.createElement(IconButton, { icon: ForwardRef$B, color: "neutral", onClick: props.onClose, cx: css$X.closeIcon })))));
+const WarningAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$E, color: "warning", ref: ref }, props)));
+const SuccessAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$F, color: "success", ref: ref }, props)));
+const HintAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$C, color: "info", ref: ref }, props)));
+const ErrorAlert = React.forwardRef((props, ref) => React.createElement(Alert, Object.assign({ icon: ForwardRef$D, color: "error", ref: ref }, props)));
 
 function Dropdown(props) {
     return React.createElement(Dropdown$1, Object.assign({}, props));
 }
 
-var css$12 = {"bodyRoot":"_43tXIH","submenuRootItem":"jRlg-h","iconAfter":"_8qoh1F","iconCheck":"-TaOJK","splitterRoot":"gPkmhZ","splitter":"V82HHx","headerRoot":"nCbPRk","itemRoot":"OQ443p","icon":"ueBEP9","link":"N8GpcA","indent":"ws8fqt"};
+var css$W = {"uui-typography":"xg9nMp","hero-header":"_96hWwf","promo-header":"_0kcJUW","uui-critical":"iEdwhf","uui-success":"S-2FvP","uui-warning":"YGcauS","uui-typography-size-12":"MjJSkJ","uui-typography-size-14":"ITj0AB","uui-typography-size-16":"JYHFwV","root":"SYbzu8","bodyRoot":"uIUDhI","submenuRootItem":"rCRRoE","iconAfter":"w9-S58","iconCheck":"tSMiP7","splitterRoot":"_2QPbMc","splitter":"SveQBA","headerRoot":"_11IGTt","itemRoot":"_5Rhd10","icon":"_20OJGT","link":"_2i8eJn","indent":"SXcXyx","uuiTypography":"xg9nMp","heroHeader":"_96hWwf","promoHeader":"_0kcJUW","uuiCritical":"iEdwhf","uuiSuccess":"S-2FvP","uuiWarning":"YGcauS","uuiTypographySize12":"MjJSkJ","uuiTypographySize14":"ITj0AB","uuiTypographySize16":"JYHFwV"};
 
 const icons = systemIcons['36'];
 var IDropdownControlKeys;
@@ -1254,9 +1471,9 @@ function DropdownMenuContainer(props) {
             props.onClose();
         }
     };
-    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'menu' }), ref: menuRef, lockProps: { onKeyDown: handleArrowKeys } })));
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { rawProps: Object.assign(Object.assign({}, props.rawProps), { role: 'menu' }), ref: menuRef, lockProps: { onKeyDown: handleArrowKeys }, cx: css$W.root })));
 }
-const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$12.bodyRoot], (props) => {
+const DropdownMenuBody = withMods(DropdownMenuContainer, () => [css$W.bodyRoot], (props) => {
     const dropdownRawProps = props.minWidth ? Object.assign(Object.assign({}, props.rawProps), { style: { minWidth: `${props.minWidth}px` } }) : null;
     return (Object.assign(Object.assign({ closeOnKey: IDropdownControlKeys.ESCAPE }, props), { rawProps: dropdownRawProps || props.rawProps }));
 });
@@ -1280,32 +1497,32 @@ const DropdownMenuButton = React__default.forwardRef((props, ref) => {
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'default', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$12.icon, iconPosition === 'right' ? css$12.iconAfter : css$12.iconBefore) }));
+        const iconElement = (React__default.createElement(IconButton, { icon: icon, color: isActive ? 'info' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: cx$1(css$W.root, css$W.icon, iconPosition === 'right' ? css$W.iconAfter : css$W.iconBefore) }));
         return (React__default.createElement(React__default.Fragment, null,
             isIconBefore && iconElement,
-            React__default.createElement(Text$1, { cx: props.indent && css$12.indent }, caption),
+            React__default.createElement(Text$1, { cx: props.indent && css$W.indent }, caption),
             isIconAfter && (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement(FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = cx$1(props.cx, css$12.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
-    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$12.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
+    const itemClassNames = cx$1(css$W.root, props.cx, css$W.itemRoot, isDisabled && uuiMod.disabled, isActive && uuiMod.active, isOpen && uuiMod.opened);
+    return isAnchor ? (React__default.createElement(Anchor$1, { cx: cx$1(css$W.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, forwardedRef: ref, target: target }, getMenuButtonContent())) : (React__default.createElement(FlexRow$1, { rawProps: {
             tabIndex: isDisabled ? -1 : 0,
             role: 'menuitem',
             onKeyDown: isDisabled ? null : handleOpenDropdown,
         }, cx: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
-        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: css$12.selectedCheckmark })));
+        isSelected && React__default.createElement(IconContainer, { icon: icons.accept, cx: cx$1(css$W.root, css$W.selectedCheckmark) })));
 });
 DropdownMenuButton.displayName = 'DropdownMenuButton';
 function DropdownMenuSplitter(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$12.splitterRoot) },
-        React__default.createElement("hr", { className: css$12.splitter })));
+    return (React__default.createElement("div", { className: cx$1(css$W.root, props.cx, css$W.splitterRoot) },
+        React__default.createElement("hr", { className: css$W.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__default.createElement("div", { className: cx$1(props.cx, css$12.headerRoot) },
-        React__default.createElement("span", { className: css$12.header }, props.caption)));
+    return (React__default.createElement("div", { className: cx$1('uui-dropdown-menu-header', css$W.root, props.cx, css$W.headerRoot) },
+        React__default.createElement("span", { className: css$W.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuModifiers = [
@@ -1325,7 +1542,7 @@ function DropdownSubMenu(props) {
     ];
     return (React__default.createElement(Dropdown$1, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: "right-start", modifiers: subMenuModifiers, renderBody: (dropdownProps) => React__default.createElement(DropdownMenuBody, Object.assign({ closeOnKey: IDropdownControlKeys.LEFT_ARROW }, props, dropdownProps)), renderTarget: (_a) => {
             var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
-            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$12.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
+            return (React__default.createElement(DropdownMenuButton, Object.assign({ cx: cx$1(css$W.root, css$W.submenuRootItem), icon: icons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
         } }));
 }
 function DropdownMenuSwitchButton(props) {
@@ -1342,116 +1559,41 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$12.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
-        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$12.iconBefore }),
+    return (React__default.createElement(FlexRow$1, { cx: cx$1(props.cx, css$W.itemRoot, isDisabled && uuiMod.disabled), onClick: () => onHandleValueChange(!isSelected), rawProps: { role: 'menuitem', onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 } },
+        icon && React__default.createElement(IconContainer, { icon: icon, cx: css$W.iconBefore }),
         React__default.createElement(Text$1, null, caption),
         React__default.createElement(FlexSpacer, null),
         React__default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$11 = {"root":"bHjsEp","border-bottom":"gUS4Zj","top-shadow":"MYc4ym","size-24":"qSXkpG","size-30":"Y1jeoa","size-36":"dP27oB","size-42":"W5NArO","size-48":"Mzkfz7","padding-6":"jfemFq","padding-12":"WtF6gw","padding-18":"hid8OR","padding-24":"IS8t9c","margin-24":"_-2QABv","margin-12":"SOJ62w","vPadding-12":"wP5RmM","vPadding-18":"_18BJuD","vPadding-24":"q1Emhz","vPadding-36":"l4ObgA","vPadding-48":"M1A--O","spacing-6":"CweRqB","spacing-12":"JzzIpm","spacing-18":"CJT8fy","borderBottom":"gUS4Zj","topShadow":"MYc4ym","size24":"qSXkpG","size30":"Y1jeoa","size36":"dP27oB","size42":"W5NArO","size48":"Mzkfz7","padding6":"jfemFq","padding12":"WtF6gw","padding18":"hid8OR","padding24":"IS8t9c","margin24":"_-2QABv","margin12":"SOJ62w","vPadding12":"wP5RmM","vPadding18":"_18BJuD","vPadding24":"q1Emhz","vPadding36":"l4ObgA","vPadding48":"M1A--O","spacing6":"CweRqB","spacing12":"JzzIpm","spacing18":"CJT8fy"};
+var css$V = {"uui-typography":"CT49Rd","hero-header":"-ZNcvB","promo-header":"Cwjxo7","uui-critical":"_7RXfQT","uui-success":"k-2Tmz","uui-warning":"xDQHuU","uui-typography-size-12":"PxiFGn","uui-typography-size-14":"gXBmbX","uui-typography-size-16":"d32yiv","root":"TlEJ7m","border-bottom":"Gh-MGX","top-shadow":"X75T31","size-24":"_1n8gIg","size-30":"_93CcAr","size-36":"-GI1W4","size-42":"lUC9BM","size-48":"-DT3-t","padding-6":"_6LwJ99","padding-12":"BRVp5n","padding-18":"ffCcFg","padding-24":"_3AYFIW","margin-24":"UfQBLo","margin-12":"H-nGTD","vPadding-12":"_33ExSh","vPadding-18":"_1PxwKl","vPadding-24":"_6vZMan","vPadding-36":"_4my7K4","vPadding-48":"pH0Win","spacing-6":"LYJnCe","spacing-12":"gZHl6d","spacing-18":"_0e8-3f","uuiTypography":"CT49Rd","heroHeader":"-ZNcvB","promoHeader":"Cwjxo7","uuiCritical":"_7RXfQT","uuiSuccess":"k-2Tmz","uuiWarning":"xDQHuU","uuiTypographySize12":"PxiFGn","uuiTypographySize14":"gXBmbX","uuiTypographySize16":"d32yiv","borderBottom":"Gh-MGX","topShadow":"X75T31","size24":"_1n8gIg","size30":"_93CcAr","size36":"-GI1W4","size42":"lUC9BM","size48":"-DT3-t","padding6":"_6LwJ99","padding12":"BRVp5n","padding18":"ffCcFg","padding24":"_3AYFIW","margin24":"UfQBLo","margin12":"H-nGTD","vPadding12":"_33ExSh","vPadding18":"_1PxwKl","vPadding24":"_6vZMan","vPadding36":"_4my7K4","vPadding48":"pH0Win","spacing6":"LYJnCe","spacing12":"gZHl6d","spacing18":"_0e8-3f"};
 
-const FlexCell = withMods(FlexCell$1, () => [css$11.flexCell]);
+const FlexCell = withMods(FlexCell$1, () => [css$V.flexCell]);
 
 const FlexRow = withMods(FlexRow$1, (props) => {
     return [
-        css$11.root, props.size !== null && css$11['size-' + (props.size || '36')], props.padding && css$11['padding-' + props.padding], props.vPadding && css$11['vPadding-' + props.vPadding], props.margin && css$11['margin-' + props.margin], props.topShadow && css$11.topShadow, props.borderBottom && css$11.borderBottom, props.spacing && css$11['spacing-' + props.spacing],
+        css$V.root,
+        props.size !== null && css$V['size-' + (props.size || '36')],
+        props.padding && css$V['padding-' + props.padding],
+        props.vPadding && css$V['vPadding-' + props.vPadding],
+        props.margin && css$V['margin-' + props.margin],
+        props.topShadow && css$V.topShadow,
+        props.borderBottom && css$V.borderBottom,
+        props.spacing && css$V['spacing-' + props.spacing],
+        props.background && `uui-color-${props.background}`,
     ];
 });
 
-var css$10 = {"root":"XXR3Ds","margin-24":"lSUPTG","padding-12":"hrk4-Y","padding-24":"TVeoib","shadow":"EHDQ8M","margin24":"lSUPTG","padding12":"hrk4-Y","padding24":"TVeoib"};
+var css$U = {"root":"_32-Uew","margin-24":"_95gsaC","padding-12":"FLdnqO","padding-24":"i5o6xC","shadow":"s3lSwL","margin24":"_95gsaC","padding12":"FLdnqO","padding24":"i5o6xC"};
 
 const Panel = withMods(VPanel, (props) => [
-    'uui-panel', css$10.root, props.shadow && css$10.shadow, props.margin && css$10['margin-' + props.margin],
+    'uui-panel',
+    css$U.root,
+    props.shadow && css$U.shadow,
+    props.margin && css$U['margin-' + props.margin],
+    props.background && `uui-color-${props.background}`,
 ]);
 
-var css$$ = {"root":"D2QmF6"};
-
-var css$_ = {"line-height-12":"Ls4HSs","line-height-18":"IBzWgI","line-height-24":"E2psIP","line-height-30":"_69eN-B","font-size-10":"_3Ox-cx","font-size-12":"ITyelp","font-size-14":"A7poa3","font-size-16":"kbczvD","font-size-18":"lz-0g5","font-size-24":"Uj-Yc6","v-padding-2":"yGrGJG","v-padding-3":"au3aEU","v-padding-5":"otrYJH","v-padding-6":"F9Lafv","v-padding-8":"REDQUM","v-padding-9":"hnnLS1","v-padding-11":"EIoA7G","v-padding-12":"uuRb9A","v-padding-14":"HnDGtX","v-padding-15":"L72KdE","v-padding-17":"kTiUaB","v-padding-18":"ge3TKQ","v-padding-23":"APGFcJ","v-padding-24":"_1sG0ba","lineHeight12":"Ls4HSs","lineHeight18":"IBzWgI","lineHeight24":"E2psIP","lineHeight30":"_69eN-B","fontSize10":"_3Ox-cx","fontSize12":"ITyelp","fontSize14":"A7poa3","fontSize16":"kbczvD","fontSize18":"lz-0g5","fontSize24":"Uj-Yc6","vPadding2":"yGrGJG","vPadding3":"au3aEU","vPadding5":"otrYJH","vPadding6":"F9Lafv","vPadding8":"REDQUM","vPadding9":"hnnLS1","vPadding11":"EIoA7G","vPadding12":"uuRb9A","vPadding14":"HnDGtX","vPadding15":"L72KdE","vPadding17":"kTiUaB","vPadding18":"ge3TKQ","vPadding23":"APGFcJ","vPadding24":"_1sG0ba"};
-
-const defaultTextSettings = {
-    18: { lineHeight: 12, fontSize: 10 },
-    24: { lineHeight: 18, fontSize: 12 },
-    30: { lineHeight: 18, fontSize: 14 },
-    36: { lineHeight: 18, fontSize: 14 },
-    42: { lineHeight: 24, fontSize: 16 },
-    48: { lineHeight: 24, fontSize: 16 },
-    60: { lineHeight: 30, fontSize: 24 },
-};
-function getTextClasses(props, border) {
-    if (props.size === 'none') {
-        return [css$_['line-height-' + props.lineHeight], css$_['font-size-' + props.fontSize]];
-    }
-    const setting = {
-        size: props.size,
-        lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
-        fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
-    };
-    const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
-    return [
-        css$_['line-height-' + setting.lineHeight], css$_['font-size-' + setting.fontSize], css$_['v-padding-' + vPadding],
-    ];
-}
-
-function applyTextMods(mods) {
-    const textClasses = getTextClasses({
-        size: mods.size || '36',
-        lineHeight: mods.lineHeight,
-        fontSize: mods.fontSize,
-    }, false);
-    return [
-        `uui-font-${mods.font || 'regular'}`,
-        `uui-text-${mods.color || 'primary'}`,
-        css$$.root,
-    ].concat(textClasses);
-}
-const Text = withMods(Text$1, applyTextMods);
-
-var css$Z = {"container":"_5gNYlx","loading-word":"_1wEsVw","animated-loading":"P-Cskh","skeleton_loading":"MS-uNo","loadingWord":"_1wEsVw","animatedLoading":"P-Cskh","skeletonLoading":"MS-uNo"};
-
-const TextPlaceholder = (props) => {
-    const pattern = '&nbsp;';
-    const text = React.useMemo(() => {
-        const words = [];
-        for (let i = 0; i < (props.wordsCount || 1); i++) {
-            const lengthWord = Math.floor(Math.random() * 10 + 8);
-            words.push(pattern.repeat(lengthWord));
-        }
-        return words;
-    }, [props.wordsCount]);
-    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$Z.container }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
-            props.cx, css$Z.loadingWord, !props.isNotAnimated && css$Z.animatedLoading,
-        ]), dangerouslySetInnerHTML: { __html: it } })))));
-};
-
-var style = {"typography-16":"VsECio","typography-14":"_2eIIED","typography-12":"Rp8Q1e","typography-uui":"wQ5LA6","typography16":"VsECio","typography14":"_2eIIED","typography12":"Rp8Q1e","typographyUui":"wQ5LA6"};
-
-const RichTextView = withMods(uuiComponents.RichTextView, (mods) => [style.typographyUui, style['typography-' + (mods.size || '14')]]);
-
-var css$Y = {"modal-blocker":"YU0A8K","animateModalBlocker":"_4yQzYl","modal":"YTQxCZ","modal-footer":"V-m7u0","border-top":"CLfKji","modal-header":"RtBELJ","modalBlocker":"YU0A8K","modalFooter":"V-m7u0","borderTop":"CLfKji","modalHeader":"RtBELJ"};
-
-const ModalBlocker = withMods(ModalBlocker$1, () => [css$Y.modalBlocker]);
-const ModalWindow = withMods(ModalWindow$1, () => [css$Y.modal], (props) => ({
-    style: Object.assign(Object.assign({}, props.style), { width: `${props.width || 420}px`, height: props.height ? `${props.height}px` : 'auto' }),
-}));
-class ModalHeader extends React.Component {
-    render() {
-        return (React.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$Y.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
-            this.props.title && (React.createElement(Text, { size: "48", fontSize: "18", font: "semibold" }, this.props.title)),
-            this.props.children,
-            this.props.onClose && React.createElement(FlexSpacer, null),
-            this.props.onClose && (React.createElement(FlexCell, { shrink: 0, width: "auto" },
-                React.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$D, onClick: this.props.onClose })))));
-    }
-}
-class ModalFooter extends React.Component {
-    render() {
-        return (React.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
-                css$Y.modalFooter, this.props.borderTop && css$Y.borderTop, this.props.cx,
-            ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
-    }
-}
-
 const i18n = Object.assign(Object.assign({}, i18n$2), { dataPickerBody: {
         searchPlaceholder: 'Search',
         noRecordsMessage: 'No records found',
@@ -1541,94 +1683,43 @@ const i18n = Object.assign(Object.assign({}, i18n$2), { dataPickerBody: {
         fileSizeProgress: ' of ',
     } });
 
-var _path$B;
-function _extends$C() { _extends$C = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$C.apply(this, arguments); }
-var SvgCross = function SvgCross(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$C({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    ref: ref
-  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-  })));
-};
-var ForwardRef$C = /*#__PURE__*/forwardRef(SvgCross);
-
-var css$X = {"root":"ckp29D","icon-wrapper":"eZpjQi","action-wrapper":"_1tB2Lc","action-link":"_8HPQbt","close-icon":"v8tBmL","main-path":"gjuq3-","content":"I3GXxj","clear-button":"quKLh7","close-wrapper":"V441Cr","iconWrapper":"eZpjQi","actionWrapper":"_1tB2Lc","actionLink":"_8HPQbt","closeIcon":"v8tBmL","mainPath":"gjuq3-","clearButton":"quKLh7","closeWrapper":"V441Cr"};
-
-const NotificationCard = React__default.forwardRef((props, ref) => {
-    const notificationCardNode = React__default.useRef(null);
-    React__default.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
-    React__default.useLayoutEffect(() => {
-        var _a, _b;
-        (_a = notificationCardNode.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', props.clearTimer);
-        (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', props.refreshTimer);
-        return () => {
-            var _a, _b;
-            (_a = notificationCardNode.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', props.clearTimer);
-            (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
-        };
-    }, []);
-    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx(props.color && `notification-card-${props.color}`, css$X.root, props.cx), ref: notificationCardNode }, props.rawProps),
-        React__default.createElement("div", { className: css$X.mainPath },
-            props.icon && (React__default.createElement("div", { className: css$X.iconWrapper },
-                React__default.createElement(IconContainer, { icon: props.icon, cx: css$X.actionIcon }))),
-            React__default.createElement("div", { className: css$X.content },
-                props.children,
-                props.actions && (React__default.createElement("div", { className: css$X.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$X.actionLink, size: "36", rawProps: action.rawProps })))))),
-            props.onClose && (React__default.createElement("div", { className: css$X.closeWrapper },
-                React__default.createElement(IconButton, { icon: ForwardRef$C, color: "default", onClick: props.onClose, cx: css$X.closeIcon }))))));
-});
-const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$G, color: "warning" }, props, { ref: ref, cx: props.cx }))));
-const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$H, color: "success" }, props, { ref: ref, cx: props.cx }))));
-const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "info" }, props, { ref: ref, cx: props.cx }))));
-const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "error" }, props, { ref: ref, cx: props.cx }))));
-class ClearNotification extends React__default.Component {
-    render() {
-        return (React__default.createElement("div", { className: cx(css$X.notificationWrapper, css$X.clearButton) },
-            React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
-    }
-}
-ClearNotification.contextType = UuiContext;
-
-var css$W = {"root":"hWqffz"};
+var css$T = {"root":"uL4Zop","mode-block":"fHfMwg","mode-inline":"M840Mb","padding-0":"hvVkTe","padding-6":"Y56-BO","padding-12":"vmrApN","padding-18":"r6bYdT","modeBlock":"fHfMwg","modeInline":"M840Mb","padding0":"hvVkTe","padding6":"Y56-BO","padding12":"vmrApN","padding18":"r6bYdT"};
 
-function applyTooltipMods(mods) {
+function applyAccordionMods(mods) {
     return [
-        `tooltip-${mods.color || 'contrast'}`,
-        css$W.root,
+        css$T.root,
+        css$T['mode-' + (mods.mode || 'block')],
+        mods.padding && css$T['padding-' + mods.padding],
     ];
 }
-const Tooltip = withMods(Tooltip$1, applyTooltipMods);
+const Accordion = withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
+    dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
+}));
 
-var css$V = {"root":"kN8duC","mode-block":"ii3Zmb","mode-inline":"Pry9Wz","padding-0":"zsQkts","padding-6":"H0Eq6t","padding-12":"Ucn5sB","padding-18":"GUc0kD","modeBlock":"ii3Zmb","modeInline":"Pry9Wz","padding0":"zsQkts","padding6":"H0Eq6t","padding12":"Ucn5sB","padding18":"GUc0kD"};
+var css$S = {"root":"m4EfMA"};
 
-function applyAccordionMods(mods) {
+function applyTooltipMods(mods) {
     return [
-        css$V.root, css$V['mode-' + (mods.mode || 'block')], mods.padding && css$V['padding-' + mods.padding],
+        css$S.root,
+        `uui-color-${mods.color || 'contrast'}`,
     ];
 }
-const Accordion = withMods(uuiComponents.Accordion, applyAccordionMods, (mods) => ({
-    dropdownIcon: mods.dropdownIcon !== null && systemIcons[mods.mode === 'block' ? '60' : '30'].foldingArrow,
-}));
+const Tooltip = withMods(Tooltip$1, applyTooltipMods);
 
-var css$U = {"root":"EvsI1T","size-24":"mTFpYA","size-30":"OOkBPB","size-36":"i2m-gP","size-42":"xc3p6c","size-48":"-svmZ0","size24":"mTFpYA","size30":"OOkBPB","size36":"i2m-gP","size42":"xc3p6c","size48":"-svmZ0"};
+var css$R = {"uui-typography":"z30Eta","hero-header":"pwPy8w","promo-header":"I-YWoW","uui-critical":"a0AA-W","uui-success":"qIjcnW","uui-warning":"ut821y","uui-typography-size-12":"vpAauN","uui-typography-size-14":"eQLpI5","uui-typography-size-16":"N8vxM4","root":"g0LiYK","size-24":"TNPZC7","size-30":"_1caQ71","size-36":"WmnLiw","size-42":"uBsRyR","size-48":"s2QHnu","uuiTypography":"z30Eta","heroHeader":"pwPy8w","promoHeader":"I-YWoW","uuiCritical":"a0AA-W","uuiSuccess":"qIjcnW","uuiWarning":"ut821y","uuiTypographySize12":"vpAauN","uuiTypographySize14":"eQLpI5","uuiTypographySize16":"N8vxM4","size24":"TNPZC7","size30":"_1caQ71","size36":"WmnLiw","size42":"uBsRyR","size48":"s2QHnu"};
 
-const defaultSize$6 = '36';
+const defaultSize$3 = '36';
 function applyLabeledInputMods(mods) {
-    return [css$U.root, css$U['size-' + (mods.size || defaultSize$6)]];
+    return [css$R.root, css$R['size-' + (mods.size || defaultSize$3)]];
 }
 const LabeledInput = withMods(uuiComponents.LabeledInput, applyLabeledInputMods, (props) => ({
     Tooltip,
-    infoIcon: systemIcons[props.size || defaultSize$6].help,
+    infoIcon: systemIcons[props.size || defaultSize$3].help,
 }));
 
-var css$T = {"root":"Ps6j7B"};
+var css$Q = {"root":"dIlo2N"};
 
-const RadioGroup = withMods(RadioGroup$1, () => [css$T.root], () => ({ RadioInput }));
+const RadioGroup = withMods(RadioGroup$1, () => [css$Q.root], () => ({ RadioInput }));
 
 function applyScrollBarsMods() {
     return [
@@ -1637,18 +1728,11 @@ function applyScrollBarsMods() {
 }
 const ScrollBars = withMods(ScrollBars$1, applyScrollBarsMods);
 
-var css$S = {"scroll-container":"i3G0CT","list-container":"sp7iYE","scrollContainer":"i3G0CT","listContainer":"sp7iYE"};
-
-var css$R = {"root":"AWyU2E"};
+var css$P = {"scroll-container":"_70WgCw","list-container":"kOfI6U","scrollContainer":"_70WgCw","listContainer":"kOfI6U"};
 
-var css$Q = {"root":"HK4Zh9","uui-spinner":"Yrxrun","uuiSpinner":"Yrxrun"};
-
-function applySpinnerMods() {
-    return [css$Q.root];
-}
-const Spinner = withMods(Spinner$1, applySpinnerMods);
+var css$O = {"root":"PpN-hM"};
 
-const Blocker = withMods(Blocker$1, () => [css$R.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
+const Blocker = withMods(Blocker$1, () => [css$O.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__default.createElement(Spinner, null)) }));
 
 const VirtualList = React.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = useVirtualList({
@@ -1664,7 +1748,7 @@ const VirtualList = React.forwardRef((props, ref) => {
         var _a;
         return ((_a = props.renderRows) === null || _a === void 0 ? void 0 : _a.call(props, {
             listContainerRef, estimatedHeight, offsetY, scrollShadows,
-        })) || (React.createElement("div", { className: css$S.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        })) || (React.createElement("div", { className: css$P.listContainer, style: { minHeight: `${estimatedHeight}px` } },
             React.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     };
     const scrollBarsRef = React.useCallback((scrollbars) => {
@@ -1673,7 +1757,7 @@ const VirtualList = React.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React.createElement(ScrollBars, { cx: cx$1(css$S.scrollContainer, props.cx, {
+    return (React.createElement(ScrollBars, { cx: cx$1(css$P.scrollContainer, props.cx, {
             [uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -1687,383 +1771,123 @@ const VirtualListView = React.forwardRef((props, ref) => {
 });
 VirtualList.displayName = 'VirtualList';
 
-var css$P = {"root":"qnHTKq"};
+var css$N = {"root":"HXfot5"};
 
-const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$P.root], () => ({ CheckboxInput: Checkbox }));
+const CheckboxGroup = withMods(CheckboxGroup$1, () => [css$N.root], () => ({ CheckboxInput: Checkbox }));
 
-class ConfirmationModal extends React.Component {
-    render() {
-        let bodyContent;
-        if (this.props.bodyContent) {
-            bodyContent = React.createElement(Panel, { margin: "24" }, this.props.bodyContent);
-        }
-        return (React.createElement(ModalBlocker, Object.assign({}, this.props),
-            React.createElement(ModalWindow, { width: 420 },
-                React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
-                React.createElement(ScrollBars, null, bodyContent),
-                React.createElement(ModalFooter, null,
-                    React.createElement(FlexSpacer, null),
-                    this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), mode: "outline", color: "secondary" })),
-                    React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "accent" })))));
-    }
-}
+var css$M = {"uui-typography":"jvNJJ7","hero-header":"kMGHdo","promo-header":"aUjgFc","uui-critical":"vU-3R7","uui-success":"EbJkac","uui-warning":"RtA-SD","uui-typography-size-12":"GpSQGK","uui-typography-size-14":"-b63hs","uui-typography-size-16":"TyRmMJ","body":"foxUv2","modal":"VZJlys","search-wrapper":"mK3hAW","checkbox":"_1a-rbP","no-found-size-24":"sl-Rqz","no-found-size-30":"XzM9uV","no-found-size-36":"hbfq6E","no-found-size-42":"W-u4M4","uuiTypography":"jvNJJ7","heroHeader":"kMGHdo","promoHeader":"aUjgFc","uuiCritical":"vU-3R7","uuiSuccess":"EbJkac","uuiWarning":"RtA-SD","uuiTypographySize12":"GpSQGK","uuiTypographySize14":"-b63hs","uuiTypographySize16":"TyRmMJ","searchWrapper":"mK3hAW","noFoundSize24":"sl-Rqz","noFoundSize30":"XzM9uV","noFoundSize36":"hbfq6E","noFoundSize42":"W-u4M4"};
 
-const defaultMode$1 = EditMode.FORM;
-class DatePicker extends BaseDatePicker {
+class DataPickerBody extends PickerBodyBase {
     constructor() {
         super(...arguments);
-        this.renderInput = (props) => {
-            var _a;
-            if (process.env.NODE_ENV !== "production") {
-                if (this.props.size === '48') {
-                    devLogger.warnAboutDeprecatedPropValue({
-                        component: 'DatePicker',
-                        propName: 'size',
-                        propValue: this.props.size,
-                        propValueUseInstead: '42',
-                        condition: () => ['48'].indexOf(this.props.size) !== -1,
-                    });
-                }
-            }
-            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, isDropdown: false, cx: cx$1(this.props.inputCx, this.state.isOpen && uuiMod.focus), icon: this.props.mode !== EditMode.CELL && systemIcons[this.props.size || '36'].calendar, iconPosition: this.props.iconPosition || 'left', placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), size: this.props.size || '36', value: this.state.inputValue, onValueChange: this.handleInputChange, onCancel: this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel, isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, tabIndex: this.props.isReadonly || this.props.isDisabled ? -1 : 0, onFocus: this.handleFocus, onBlur: this.handleBlur, mode: this.props.mode || defaultMode$1, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
-        };
+        this.lens = Lens.onEditableComponent(this);
+        this.searchLens = this.lens.prop('search');
     }
-    renderBody(props) {
-        var _a, _b, _c;
-        return (React__default.createElement(DropdownContainer, Object.assign({}, props, { focusLock: false }),
-            React__default.createElement(DatePickerBody, { cx: cx$1(this.props.bodyCx), filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggle, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }), (_c = (_b = this.props).renderFooter) === null || _c === void 0 ? void 0 :
-            _c.call(_b)));
+    renderNotFound() {
+        if (this.props.renderNotFound) {
+            return this.props.renderNotFound();
+        }
+        return (React__default.createElement(FlexCell$1, { cx: css$M[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
+            React__default.createElement(Text, { size: this.props.searchSize || '36' }, i18n.dataPickerBody.noRecordsMessage)));
+    }
+    render() {
+        const searchSize = isMobile() ? '48' : this.props.searchSize || '36';
+        return (React__default.createElement(React__default.Fragment, null,
+            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$M.searchWrapper },
+                React__default.createElement(FlexCell$1, { grow: 1 },
+                    React__default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay }))))),
+            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$M.body, css$M[this.props.editMode], css$M[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading }))) : (this.renderNotFound()))));
     }
 }
 
-var css$O = {"root":"_1haMVw"};
-
-function applyCalendarPresetsMods() {
-    return [css$O.root];
+const switchSizes = {
+    24: '12',
+    36: '18',
+    42: '24',
+    48: '24',
+};
+function DataPickerFooterImpl(props) {
+    const { clearSelection, view, showSelected, selectionMode, } = props;
+    const size = isMobile() ? '48' : props.size || '36';
+    const switchSize = switchSizes[size];
+    const hasSelection = view.getSelectedRowsCount() > 0;
+    const isSinglePicker = selectionMode === 'single';
+    const clearAllText = i18n.pickerInput.clearSelectionButton;
+    const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
+    const selectAllText = i18n.pickerInput.selectAllButton;
+    // show always for multi picker and for single only in case if search not disabled.
+    const shouldShowFooter = isSinglePicker ? !props.disableClear : true;
+    return shouldShowFooter && (React__default.createElement(FlexRow, { padding: "12" },
+        !isSinglePicker && (React__default.createElement(Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
+        React__default.createElement(FlexSpacer, null),
+        React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
+            view.selectAll && (React__default.createElement(LinkButton, { size: size, caption: hasSelection ? clearAllText : selectAllText, onClick: hasSelection ? clearSelection : () => view.selectAll.onValueChange(true), rawProps: {
+                    'aria-label': hasSelection ? clearAllText : selectAllText,
+                } })),
+            !view.selectAll && (React__default.createElement(LinkButton, { isDisabled: !hasSelection, size: size, caption: isSinglePicker ? clearSingleText : clearAllText, onClick: clearSelection, rawProps: {
+                    'aria-label': isSinglePicker ? clearSingleText : clearAllText,
+                } })))));
 }
-const CalendarPresets = withMods(CalendarPresets$1, applyCalendarPresetsMods, () => ({}));
+const DataPickerFooter = React__default.memo(DataPickerFooterImpl);
 
-var css$N = {"root":"j7HXR-","container":"TPl1cy","day-selection":"Vh-gRy","from-picker":"Ll3nA4","to-picker":"aOegQy","bodes-wrapper":"_3c8shq","blocker":"_3Dfod-","daySelection":"Vh-gRy","fromPicker":"Ll3nA4","toPicker":"aOegQy","bodesWrapper":"_3c8shq"};
+var css$L = {"header":"WhkoHA","close":"vxTh3-"};
 
-dayjs.extend(isoWeek);
-function weekCount(displayedDate) {
-    let days = [];
-    const dayOfLastWeekInPrevMonth = displayedDate.subtract(1, 'month').endOf('month').day();
-    days = days.concat(new Array(dayOfLastWeekInPrevMonth).fill(undefined));
-    // get days of current month
-    days = days.concat(new Array(displayedDate.endOf('month').date()).fill(undefined));
-    return arrayToMatrix(days, 7).length;
-}
-const uuiRangeDatePickerBody = {
-    inRange: 'uui-range-datepicker-in-range',
-    firstDayInRangeWrapper: 'uui-range-datepicker-first-day-in-range-wrapper',
-    lastDayInRangeWrapper: 'uui-range-datepicker-last-day-in-range-wrapper',
-    separator: 'uui-range-datepicker-separator',
-};
-const rangeDatePickerPresets = {
-    today: {
-        name: 'Today',
-        getRange: () => ({ from: dayjs().toString(), to: undefined, order: 1 }),
-    },
-    thisWeek: {
-        name: 'This Week',
-        getRange: () => ({ from: dayjs().startOf('isoWeek').toString(), to: dayjs().endOf('isoWeek').toString(), order: 2 }),
-    },
-    lastWeek: {
-        name: 'Last Week',
-        getRange: () => ({ from: dayjs().startOf('isoWeek').subtract(1, 'week').toString(), to: dayjs().endOf('isoWeek').subtract(1, 'week').toString(), order: 3 }),
-    },
-    thisMonth: {
-        name: 'This Month',
-        getRange: () => ({ from: dayjs().startOf('month').toString(), to: dayjs().endOf('month').toString(), order: 4 }),
-    },
-    lastMonth: {
-        name: 'Last Month',
-        getRange: () => ({ from: dayjs().startOf('month').subtract(1, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
-    },
-    last3Month: {
-        name: 'Last 3 Months',
-        getRange: () => ({ from: dayjs().startOf('month').subtract(3, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
-    },
-    thisYear: {
-        name: 'This Year',
-        getRange: () => ({ from: dayjs().startOf('year').toString(), to: dayjs().endOf('year').toString(), order: 7 }),
-    },
-    lastYear: {
-        name: 'Last Year',
-        getRange: () => ({ from: dayjs().startOf('year').subtract(1, 'year').toString(), to: dayjs().subtract(1, 'year').endOf('year').toString(), order: 8 }),
-    },
-};
-class RangeDatePickerBody extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            activePart: null,
-        };
-        this.getDayCX = (day) => {
-            var _a, _b;
-            const dayValue = day.valueOf();
-            const fromValue = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from) ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
-            const toValue = ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.selectedDate.to) ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
-            const inRange = dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue && fromValue && toValue;
-            const isFirst = dayValue === fromValue;
-            const isLast = dayValue === toValue;
-            return [
-                inRange && uuiRangeDatePickerBody.inRange,
-                isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
-                !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
-                isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
-                !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
-                (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay,
-            ];
-        };
-        this.getFromValue = () => {
-            var _a;
-            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION', selectedDate: (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from });
-        };
-        this.getToValue = () => {
-            if (!this.props.value)
-                return;
-            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION', displayedDate: this.props.value.displayedDate.add(1, 'month'), selectedDate: this.props.value.selectedDate.to });
-        };
-        this.renderPresets = () => {
-            return (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: uuiRangeDatePickerBody.separator }),
-                React.createElement(CalendarPresets, { forwardedRef: this.props.forwardedRef, onPresetSet: (presetVal) => {
-                        this.props.onValueChange({
-                            view: 'DAY_SELECTION',
-                            selectedDate: { from: dayjs(presetVal.from).format(valueFormat), to: dayjs(presetVal.to).format(valueFormat) },
-                            displayedDate: dayjs(presetVal.from),
-                        });
-                        this.props.changeIsOpen(false);
-                    }, presets: this.props.presets })));
-        };
-        this.renderDatePicker = () => {
-            var _a, _b;
-            return (React.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$N.daySelection, css$N.container], alignItems: "top" },
-                React.createElement(FlexCell, { width: "auto" },
-                    React.createElement(FlexRow, null,
-                        React.createElement(FlexRow, { cx: css$N.bodesWrapper, alignItems: "top" },
-                            React.createElement(DatePickerBody, { cx: cx$1(css$N.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
-                            React.createElement(DatePickerBody, { cx: cx$1(css$N.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
-                            ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.view) !== 'DAY_SELECTION' && (React.createElement("div", { style: {
-                                    left: this.state.activePart === 'from' && '50%',
-                                    right: this.state.activePart === 'to' && '50%',
-                                }, className: css$N.blocker }))),
-                        this.props.presets && this.renderPresets()),
-                    this.props.renderFooter && this.props.renderFooter())));
-        };
-    }
-    getRange(selectedDate) {
-        const newRange = { from: null, to: null };
-        const currentRange = this.props.value.selectedDate;
-        if (!this.props.filter || this.props.filter(dayjs(selectedDate))) {
-            if (this.props.focusPart === 'from') {
-                if (dayjs(selectedDate).valueOf() <= dayjs(currentRange.to).valueOf()) {
-                    newRange.from = selectedDate;
-                    newRange.to = currentRange.to;
-                }
-                else {
-                    newRange.from = selectedDate;
-                    newRange.to = null;
-                }
-            }
-            if (this.props.focusPart === 'to') {
-                if (!currentRange.from) {
-                    newRange.to = selectedDate;
-                }
-                else if (dayjs(selectedDate).valueOf() >= dayjs(currentRange.from).valueOf()) {
-                    newRange.from = currentRange.from;
-                    newRange.to = selectedDate;
-                }
-                else {
-                    newRange.from = selectedDate;
-                    newRange.to = null;
-                }
-            }
-        }
-        return newRange;
-    }
-    setSelectedDate(selectedDate) {
-        const range = this.getRange(selectedDate);
-        this.props.onValueChange(Object.assign(Object.assign({}, this.props.value), { selectedDate: range }));
-        if (range.from && range.to && this.props.focusPart === 'to') {
-            this.props.changeIsOpen(false);
-        }
-    }
-    setDisplayedDateAndView(displayedDate, view, part) {
-        this.setState({ activePart: part });
-        this.props.onValueChange({
-            selectedDate: this.props.value.selectedDate,
-            displayedDate: part === 'from' ? displayedDate : displayedDate.subtract(1, 'month'),
-            view: view,
-        });
-    }
-    render() {
-        return (React.createElement("div", Object.assign({ className: cx$1(css$N.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
-    }
-}
-
-var css$M = {"dropdown-container":"x29HGv","container":"kgxL2j","button-group":"_2d9yok","date-input":"MKQEAM","size-24":"TUXmbv","size-30":"_2J4SvE","size-36":"Ht-9e5","size-42":"xrGhbF","size-48":"gwdkyo","date-input-group":"Lrfa50","separator":"iUtFnB","mode-form":"_2fnsML","mode-cell":"HIrZd5","dropdownContainer":"x29HGv","buttonGroup":"_2d9yok","dateInput":"MKQEAM","size24":"TUXmbv","size30":"_2J4SvE","size36":"Ht-9e5","size42":"xrGhbF","size48":"gwdkyo","dateInputGroup":"Lrfa50","modeForm":"_2fnsML","modeCell":"HIrZd5"};
-
-const defaultValue = { from: null, to: null };
-class RangeDatePicker extends BaseRangeDatePicker {
-    constructor() {
-        super(...arguments);
-        this.renderInput = (props) => {
-            var _a, _b;
-            if (process.env.NODE_ENV !== "production") {
-                if (this.props.size === '48') {
-                    devLogger.warnAboutDeprecatedPropValue({
-                        component: 'RangeDatePicker',
-                        propName: 'size',
-                        propValue: this.props.size,
-                        propValueUseInstead: '42',
-                        condition: () => ['48'].indexOf(this.props.size) !== -1,
-                    });
-                }
-            }
-            return (React.createElement("div", { className: cx(this.props.inputCx, css$M.dateInputGroup, this.props.isDisabled && uuiMod.disabled, this.props.isReadonly && uuiMod.readonly, this.props.isInvalid && uuiMod.invalid, this.state.inFocus && uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
-                React.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx(css$M.dateInput, css$M['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus), size: this.props.size || '36', placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from'), isDropdown: false, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.from }),
-                React.createElement("div", { className: css$M.separator }),
-                React.createElement(TextInput, { cx: cx(css$M.dateInput, css$M['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
-        };
-    }
-    renderBody(props) {
-        var _a;
-        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$M.dropdownContainer), focusLock: false }),
-            React.createElement(FlexRow, null,
-                React.createElement(RangeDatePickerBody, { cx: cx(this.props.bodyCx), value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, changeIsOpen: this.toggleOpening, presets: this.props.presets, focusPart: this.state.inFocus, renderDay: this.props.renderDay, renderFooter: this.props.renderFooter && (() => this.props.renderFooter(this.props.value || defaultValue)), isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }))));
-    }
-}
-
-var css$L = {"blocker":"M6FfCs","marker":"be8R-0","top":"SuOJrb","bottom":"zgQz-C","left":"Nj7BUc","right":"W7EplK","inside":"tt5qdK"};
-
-function DropMarker(props) {
-    return props.isDndInProgress
-        ? (React.createElement(React.Fragment, null,
-            props.enableBlocker && React.createElement("div", { className: css$L.blocker }),
-            React.createElement("div", { className: cx([
-                    css$L.marker,
-                    css$L[props.position],
-                    props === null || props === void 0 ? void 0 : props.cx,
-                ]) })))
-        : null;
-}
-
-var css$K = {"body":"ZDIze9","modal":"_41-9cx","search-wrapper":"vs-1wQ","checkbox":"_5cYKlo","no-found-size-24":"_4MBmZA","no-found-size-30":"_686oeG","no-found-size-36":"VqtnaS","no-found-size-42":"W5ASPu","searchWrapper":"vs-1wQ","noFoundSize24":"_4MBmZA","noFoundSize30":"_686oeG","noFoundSize36":"VqtnaS","noFoundSize42":"W5ASPu"};
-
-class DataPickerBody extends PickerBodyBase {
-    constructor() {
-        super(...arguments);
-        this.lens = Lens.onEditableComponent(this);
-        this.searchLens = this.lens.prop('search');
-    }
-    renderNotFound() {
-        if (this.props.renderNotFound) {
-            return this.props.renderNotFound();
-        }
-        return (React__default.createElement(FlexCell$1, { cx: css$K[`no-found-size-${this.props.searchSize || 36}`], grow: 1, textAlign: "center" },
-            React__default.createElement(Text, { size: this.props.searchSize || '36' }, i18n.dataPickerBody.noRecordsMessage)));
-    }
-    render() {
-        const searchSize = isMobile() ? '48' : this.props.searchSize || '36';
-        return (React__default.createElement(React__default.Fragment, null,
-            this.showSearch() && (React__default.createElement("div", { key: "search", className: css$K.searchWrapper },
-                React__default.createElement(FlexCell$1, { grow: 1 },
-                    React__default.createElement(SearchInput, Object.assign({ ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder }, this.searchLens.toProps(), { onKeyDown: this.searchKeyDown, size: searchSize }))))),
-            React__default.createElement(FlexRow, { key: "body", cx: cx$1(css$K.body, css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight } } }, this.props.rowsCount > 0 ? (React__default.createElement(VirtualList, Object.assign({}, this.lens.toProps(), { rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading }))) : (this.renderNotFound()))));
-    }
-}
-
-const switchSizes = {
-    24: '12',
-    36: '18',
-    42: '24',
-    48: '24',
-};
-function DataPickerFooterImpl(props) {
-    const { clearSelection, view, showSelected, selectionMode, } = props;
-    const size = isMobile() ? '48' : props.size || '36';
-    const switchSize = switchSizes[size];
-    const hasSelection = view.getSelectedRowsCount() > 0;
-    const isSinglePicker = selectionMode === 'single';
-    const clearAllText = i18n.pickerInput.clearSelectionButton;
-    const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
-    const selectAllText = i18n.pickerInput.selectAllButton;
-    // show always for multi picker and for single only in case if search not disabled.
-    const shouldShowFooter = isSinglePicker ? !props.disableClear : true;
-    return shouldShowFooter && (React__default.createElement(FlexRow, { padding: "12" },
-        !isSinglePicker && (React__default.createElement(Switch, { size: switchSize, value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
-        React__default.createElement(FlexSpacer, null),
-        React__default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
-            view.selectAll && (React__default.createElement(LinkButton, { size: size, caption: hasSelection ? clearAllText : selectAllText, onClick: hasSelection ? clearSelection : () => view.selectAll.onValueChange(true), rawProps: {
-                    'aria-label': hasSelection ? clearAllText : selectAllText,
-                } })),
-            !view.selectAll && (React__default.createElement(LinkButton, { isDisabled: !hasSelection, size: size, caption: isSinglePicker ? clearSingleText : clearAllText, onClick: clearSelection, rawProps: {
-                    'aria-label': isSinglePicker ? clearSingleText : clearAllText,
-                } })))));
-}
-const DataPickerFooter = React__default.memo(DataPickerFooterImpl);
-
-var css$J = {"header":"hKec5G","close":"h1cM0x"};
-
-var _path$A;
-function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$B.apply(this, arguments); }
+var _path$z;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
 var SvgNavigationClose24 = function SvgNavigationClose24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$B({
+  return /*#__PURE__*/React.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$B = /*#__PURE__*/forwardRef(SvgNavigationClose24);
+var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNavigationClose24);
 
 const DataPickerHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
-    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$J.header },
+    return (React__default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$L.header },
         React__default.createElement(Text, { size: "48", font: "semibold" }, title),
-        React__default.createElement(IconButton, { icon: ForwardRef$B, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$J.close })));
+        React__default.createElement(IconButton, { icon: ForwardRef$A, onClick: () => { var _a; return (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$L.close })));
 };
 const DataPickerHeader = React__default.memo(DataPickerHeaderImpl);
 
-var _path$z;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$A.apply(this, arguments); }
+var _path$y;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 var SvgNavigationChevronDown18 = function SvgNavigationChevronDown18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$A({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$z || (_path$z = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M12.443 6.442 9 9.877 5.558 6.442 4.5 7.5 9 12l4.5-4.5-1.057-1.058z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$A = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
+var ForwardRef$z = /*#__PURE__*/forwardRef(SvgNavigationChevronDown18);
 
-var css$I = {"cell":"PXAm5H","wrapper":"kS4Vih","align-widgets-top":"TKoxfj","size-24":"nLgTZq","folding-arrow":"MEjYv7","size-30":"XateIZ","size-36":"xO-d6h","size-42":"sfj2w0","size-48":"_0pJrQm","size-60":"Yem30k","align-widgets-center":"if-Fzz","padding-12":"IeCjNZ","padding-24":"KPnJmK","padding-left-12":"-lSqse","padding-left-24":"XqY0n0","padding-right-24":"ST4eqp","drag-handle":"xsq2v8","checkbox":"_0zFQlc","indent":"THiMBT","folding-arrow-12":"atg3BL","folding-arrow-18":"_3YC0fW","icon-container":"_3-9DPP","loading-cell":"MrrjcS","alignWidgetsTop":"TKoxfj","size24":"nLgTZq","foldingArrow":"MEjYv7","size30":"XateIZ","size36":"xO-d6h","size42":"sfj2w0","size48":"_0pJrQm","size60":"Yem30k","alignWidgetsCenter":"if-Fzz","padding12":"IeCjNZ","padding24":"KPnJmK","paddingLeft12":"-lSqse","paddingLeft24":"XqY0n0","paddingRight24":"ST4eqp","dragHandle":"xsq2v8","foldingArrow12":"atg3BL","foldingArrow18":"_3YC0fW","iconContainer":"_3-9DPP","loadingCell":"MrrjcS"};
+var css$K = {"cell":"XjKrco","wrapper":"fTv4i7","align-widgets-top":"Ua1KJp","size-24":"oaM8FD","folding-arrow":"XoVrS-","size-30":"_7lfYSn","size-36":"ncM7pi","size-42":"ejNwNI","size-48":"q2glX4","size-60":"_18hWmy","align-widgets-center":"YwpBtM","padding-12":"J-bkXf","padding-24":"J8TYbq","padding-left-12":"_66I3se","padding-left-24":"go51jF","padding-right-24":"sDDRt-","drag-handle":"GVCO-l","checkbox":"YqT4UL","indent":"xehW3c","folding-arrow-12":"RXOLW3","folding-arrow-18":"EZh2YO","icon-container":"EkMUaZ","loading-cell":"TEqXBn","alignWidgetsTop":"Ua1KJp","size24":"oaM8FD","foldingArrow":"XoVrS-","size30":"_7lfYSn","size36":"ncM7pi","size42":"ejNwNI","size48":"q2glX4","size60":"_18hWmy","alignWidgetsCenter":"YwpBtM","padding12":"J-bkXf","padding24":"J8TYbq","paddingLeft12":"_66I3se","paddingLeft24":"go51jF","paddingRight24":"sDDRt-","dragHandle":"GVCO-l","foldingArrow12":"RXOLW3","foldingArrow18":"EZh2YO","iconContainer":"EkMUaZ","loadingCell":"TEqXBn"};
 
 function DataTableRowAddons(props) {
     var _a, _b;
     const row = props.rowProps;
     const additionalItemSize = +props.size < 30 ? '12' : '18';
     return (React.createElement(React.Fragment, null,
-        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React.createElement(DragHandle, { key: "dh", cx: css$I.dragHandle }),
-        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React.createElement(Checkbox, { key: "cb", cx: css$I.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
-        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$I.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { rawProps: {
+        ((_a = row.dnd) === null || _a === void 0 ? void 0 : _a.srcData) && React.createElement(DragHandle, { key: "dh", cx: css$K.dragHandle }),
+        ((_b = row === null || row === void 0 ? void 0 : row.checkbox) === null || _b === void 0 ? void 0 : _b.isVisible) && (React.createElement(Checkbox, { key: "cb", cx: css$K.checkbox, tabIndex: props.tabIndex, size: additionalItemSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => { var _a; return (_a = row.onCheck) === null || _a === void 0 ? void 0 : _a.call(row, row); }, isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
+        row.indent > 0 && (React.createElement("div", { key: "fold", className: css$K.indent, style: { marginLeft: (row.indent - 1) * 24 } }, row.isFoldable && (React.createElement(IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
                 role: 'button',
-            }, key: "icon", icon: ForwardRef$A, cx: [
-                css$I.foldingArrow, css$I[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$I.iconContainer,
+            }, key: "icon", icon: ForwardRef$z, cx: [
+                css$K.foldingArrow, css$K[`folding-arrow-${additionalItemSize}`], uuiMarkers.clickable, css$K.iconContainer,
             ], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row) }))))));
 }
 function DataTableCell(props) {
@@ -2074,76 +1898,77 @@ function DataTableCell(props) {
     props.renderPlaceholder = props.renderPlaceholder
         || (() => (
         // remove `css.loadingCell` after` removing `margin: 0 3px 3px 0` from `TextPlaceholder` `loadingWord` class styles.
-        React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$I.loadingCell },
+        React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48', cx: css$K.loadingCell },
             React.createElement(TextPlaceholder, null))));
     props.renderUnknown = props.renderUnknown
         || (() => (React.createElement(Text, { key: "t", size: props.size !== '60' ? props.size : '48' }, "Unknown")));
     props.renderTooltip = (tooltipProps) => React.createElement(Tooltip, Object.assign({ color: "critical" }, tooltipProps));
     const isEditable = !!props.onValueChange;
     props.cx = [
+        'uui-dt-vars',
         'data-table-cell',
         props.cx,
-        css$I.cell,
-        css$I['size-' + (props.size || '36')],
-        css$I[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
-        props.isFirstColumn && css$I[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
-        props.isLastColumn && css$I['padding-right-24'],
-        css$I[`align-widgets-${props.alignActions || 'top'}`],
+        css$K.cell,
+        css$K['size-' + (props.size || '36')],
+        css$K[`padding-${props.padding || (isEditable && !props.rowProps.isLoading && '0') || '12'}`],
+        props.isFirstColumn && css$K[`padding-left-${props.padding || (isEditable && !props.rowProps.isLoading && '12') || '24'}`],
+        props.isLastColumn && css$K['padding-right-24'],
+        css$K[`align-widgets-${props.alignActions || 'top'}`],
         (props.border || isEditable) && 'uui-dt-vertical-cell-border',
     ];
     return React.createElement(DataTableCell$1, Object.assign({}, props));
 }
 
-var _path$y;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
+var _path$x;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 var SvgNotificationDone24 = function SvgNotificationDone24(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$z({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     ref: ref
-  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "m9.727 16.075-4.295-4.388L4 13.149 9.727 19 22 6.463 20.568 5 9.728 16.075z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$z = /*#__PURE__*/forwardRef(SvgNotificationDone24);
+var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNotificationDone24);
 
-var _path$x;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
+var _path$w;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 var SvgNotificationDone18 = function SvgNotificationDone18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$y({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.136 11.91 4.034 8.776 3 9.821 7.136 14 16 5.045 14.966 4l-7.83 7.91z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$y = /*#__PURE__*/forwardRef(SvgNotificationDone18);
+var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNotificationDone18);
 
-var _path$w;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+var _path$v;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 var SvgNotificationDone12 = function SvgNotificationDone12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 12 12",
     ref: ref
-  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     d: "M11 3.6 9.462 2 4.846 6.8 2.538 4.4 1 6l3.846 4L11 3.6z"
   })));
 };
-var ForwardRef$x = /*#__PURE__*/forwardRef(SvgNotificationDone12);
+var ForwardRef$w = /*#__PURE__*/forwardRef(SvgNotificationDone12);
 
-var css$H = {"render-item":"ezmkI-","icon-wrapper":"K-s0XO","picker-row":"MxVgmn","icon-default":"WtTKWi","icon-primary":"sa-YYF","renderItem":"ezmkI-","iconWrapper":"K-s0XO","pickerRow":"MxVgmn","iconDefault":"WtTKWi","iconPrimary":"sa-YYF"};
+var css$J = {"uui-typography":"_9USLHN","hero-header":"HQQKB1","promo-header":"KLpsnv","uui-critical":"kMPKxG","uui-success":"_5Y097w","uui-warning":"Upl3Py","uui-typography-size-12":"_8cdfCK","uui-typography-size-14":"OGtg6C","uui-typography-size-16":"nJ2Iyi","render-item":"VD-DSQ","icon-wrapper":"R6bUgT","picker-row":"AtJLzs","icon-default":"D65yTW","icon-primary":"dPb8DH","uuiTypography":"_9USLHN","heroHeader":"HQQKB1","promoHeader":"KLpsnv","uuiCritical":"kMPKxG","uuiSuccess":"_5Y097w","uuiWarning":"Upl3Py","uuiTypographySize12":"_8cdfCK","uuiTypographySize14":"OGtg6C","uuiTypographySize16":"nJ2Iyi","renderItem":"VD-DSQ","iconWrapper":"R6bUgT","pickerRow":"AtJLzs","iconDefault":"D65yTW","iconPrimary":"dPb8DH"};
 
 class DataPickerRow extends React.Component {
     constructor() {
@@ -2151,26 +1976,26 @@ class DataPickerRow extends React.Component {
         this.getIcon = (size) => {
             switch (size) {
                 case '24':
-                    return ForwardRef$x;
+                    return ForwardRef$w;
                 case '30':
-                    return ForwardRef$y;
+                    return ForwardRef$x;
                 case '36':
-                    return ForwardRef$y;
+                    return ForwardRef$x;
                 case '42':
-                    return ForwardRef$z;
-                default:
                     return ForwardRef$y;
+                default:
+                    return ForwardRef$x;
             }
         };
         this.column = {
             key: 'name',
             grow: 1,
             width: 0,
-            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$H.renderItem },
+            render: (item, rowProps) => (React.createElement("div", { key: rowProps.id, className: css$J.renderItem },
                 this.props.renderItem(item, rowProps),
                 React.createElement(FlexSpacer, null),
-                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$H.iconWrapper },
-                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$H.iconDefault : css$H.iconPrimary, rawProps: { 'aria-label': rowProps.isChildrenSelected
+                (rowProps.isChildrenSelected || rowProps.isSelected) && (React.createElement("div", { className: css$J.iconWrapper },
+                    React.createElement(IconContainer, { icon: this.getIcon(this.props.size), cx: rowProps.isChildrenSelected ? css$J.iconDefault : css$J.iconPrimary, rawProps: { 'aria-label': rowProps.isChildrenSelected
                                 ? 'Child is selected'
                                 : 'Selected' } }))))),
         };
@@ -2179,31 +2004,31 @@ class DataPickerRow extends React.Component {
         };
     }
     render() {
-        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$H.pickerRow, this.props.cx], renderContent: this.renderContent }));
+        return React.createElement(DataPickerRow$1, Object.assign({}, this.props, { cx: [css$J.pickerRow, this.props.cx], renderContent: this.renderContent }));
     }
 }
 
-var css$G = {"done":"gS9Pj-","container":"-WWDWD"};
+var css$I = {"uui-typography":"wBIRv7","hero-header":"qX9SAF","promo-header":"xL5Iwl","uui-critical":"Bud3KW","uui-success":"RtZgKb","uui-warning":"p6nIhk","uui-typography-size-12":"Y71xBT","uui-typography-size-14":"AXsDfo","uui-typography-size-16":"p8yJZf","done":"l3-I6q","container":"NfVfF3","uuiTypography":"wBIRv7","heroHeader":"qX9SAF","promoHeader":"xL5Iwl","uuiCritical":"Bud3KW","uuiSuccess":"RtZgKb","uuiWarning":"p6nIhk","uuiTypographySize12":"Y71xBT","uuiTypographySize14":"AXsDfo","uuiTypographySize16":"p8yJZf"};
 
 const MobileDropdownWrapper = (props) => {
     const isMobileView = isMobile();
-    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { cx: [css$G.container, props.cx], rawProps: props.rawProps, onKeyDown: props.onKeyDown, focusLock: props.focusLock, width: props.width }),
+    return (React__default.createElement(DropdownContainer, Object.assign({}, props, { cx: [css$I.container, props.cx], rawProps: props.rawProps, onKeyDown: props.onKeyDown, focusLock: props.focusLock, width: props.width }),
         isMobileView && React__default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
         props.children,
-        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$G.done, size: "48" })));
+        isMobileView && React__default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); }, cx: css$I.done, size: "48" })));
 };
 
-var _path$v, _path2$1;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+var _path$u, _path2$1;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     width: 66,
     height: 67,
     viewBox: "0 0 66 67",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     d: "M0 33.5C0 15.275 14.775.5 33 .5s33 14.775 33 33-14.775 33-33 33-33-14.775-33-33Z",
     fill: "#EBEDF5"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
@@ -2213,9 +2038,9 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
     fill: "#6C6F80"
   })));
 };
-var ForwardRef$w = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
+var ForwardRef$v = /*#__PURE__*/forwardRef(SvgSearchWithBackground);
 
-var css$F = {"sub-header-wrapper":"vPrMWG","switch":"_4DdjeC","no-found-modal-container":"k3XdDO","no-found-modal-container-icon":"_4zwOwq","no-found-modal-container-text":"EbkGp5","subHeaderWrapper":"vPrMWG","$switch$":"_4DdjeC","noFoundModalContainer":"k3XdDO","noFoundModalContainerIcon":"_4zwOwq","noFoundModalContainerText":"EbkGp5"};
+var css$H = {"uui-typography":"kikt-y","hero-header":"QE0qYA","promo-header":"pHvbg7","uui-critical":"nkebDQ","uui-success":"ZRp5C9","uui-warning":"ixY1Gr","uui-typography-size-12":"W56-Hv","uui-typography-size-14":"KRn-P8","uui-typography-size-16":"dzDbJr","sub-header-wrapper":"YHZG-y","switch":"EmiVQm","no-found-modal-container":"aLCdse","no-found-modal-container-icon":"SPYiPv","no-found-modal-container-text":"SnJlH-","uuiTypography":"kikt-y","heroHeader":"QE0qYA","promoHeader":"pHvbg7","uuiCritical":"nkebDQ","uuiSuccess":"ZRp5C9","uuiWarning":"ixY1Gr","uuiTypographySize12":"W56-Hv","uuiTypographySize14":"KRn-P8","uuiTypographySize16":"dzDbJr","subHeaderWrapper":"YHZG-y","$switch$":"EmiVQm","noFoundModalContainer":"aLCdse","noFoundModalContainerIcon":"SPYiPv","noFoundModalContainerText":"SnJlH-"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, showSelectedLens, dataSourceState, getDataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = usePickerModal(props);
@@ -2227,174 +2052,47 @@ function PickerModal(props) {
         return (React__default.createElement(React__default.Fragment, null,
             view.selectAll && (React__default.createElement(LinkButton, { caption: hasSelection ? i18n.pickerModal.clearAllButton : i18n.pickerModal.selectAllButton, onClick: hasSelection ? () => clearSelection() : () => view.selectAll.onValueChange(true) })),
             React__default.createElement(FlexSpacer, null),
-            React__default.createElement(Button, { mode: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
+            React__default.createElement(Button, { fill: "outline", color: "secondary", caption: i18n.pickerModal.cancelButton, onClick: () => props.abort() }),
             React__default.createElement(Button, { color: "accent", caption: i18n.pickerModal.selectButton, onClick: () => props.success(selection) })));
     };
     const renderNotFound = () => {
-        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$F.noFoundModalContainer },
-            React__default.createElement(IconContainer, { cx: css$F.noFoundModalContainerIcon, icon: ForwardRef$w }),
-            React__default.createElement(Text, { cx: css$F.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
-            React__default.createElement(Text, { cx: css$F.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
+        return props.renderNotFound ? (props.renderNotFound({ search: dataSourceState.search, onClose: () => props.success(null) })) : (React__default.createElement("div", { className: css$H.noFoundModalContainer },
+            React__default.createElement(IconContainer, { cx: css$H.noFoundModalContainerIcon, icon: ForwardRef$v }),
+            React__default.createElement(Text, { cx: css$H.noFoundModalContainerText, font: "semibold", fontSize: "16", lineHeight: "24", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsMessage),
+            React__default.createElement(Text, { cx: css$H.noFoundModalContainerText, fontSize: "12", lineHeight: "18", font: "regular", color: "primary", size: "36" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
     const rows = dataRows.map((row) => renderRow(row));
     return (React__default.createElement(ModalBlocker, Object.assign({}, props),
         React__default.createElement(ModalWindow, { width: 600, height: 700 },
             React__default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
-            React__default.createElement(FlexCell, { cx: css$F.subHeaderWrapper },
+            React__default.createElement(FlexCell, { cx: css$H.subHeaderWrapper },
                 React__default.createElement(FlexRow, { vPadding: "24" },
                     React__default.createElement(SearchInput, Object.assign({}, dataSourceStateLens.prop('search').toProps(), { onKeyDown: (e) => handleDataSourceKeyboard({
                             value: getDataSourceState(),
                             onValueChange: handleDataSourceValueChange,
                             listView: view,
                             rows: dataRows,
-                            editMode: 'modal',
+                            searchPosition: 'body',
                         }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder }))),
-                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$F.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
+                !isSingleSelect() && (React__default.createElement(Switch, Object.assign({ cx: css$H.switch, size: "18" }, showSelectedLens.toProps(), { isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" }))),
                 props.renderFilter && React__default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__default.createElement(DataPickerBody, Object.assign({}, getListProps(), { value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" })),
             React__default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$E = {"root":"wpTgsJ"};
-
-const AvatarStack = withMods(AvatarStack$1, () => [css$E.root]);
-
-var css$D = {"root":"g2GaTF","size-18":"lFB9qZ","fill-transparent":"l8aT0K","size-24":"LvDUJc","size-30":"eUWIJU","size-36":"IZKJg7","size-42":"E3BKCK","size-48":"go0UJ6","fill-solid":"_9MM4-l","fill-semitransparent":"WXI04I","size18":"lFB9qZ","fillTransparent":"l8aT0K","size24":"LvDUJc","size30":"eUWIJU","size36":"IZKJg7","size42":"E3BKCK","size48":"go0UJ6","fillSolid":"_9MM4-l","fillSemitransparent":"WXI04I"};
-
-const defaultSize$5 = '36';
-const mapSize$1 = {
-    48: '48',
-    42: '48',
-    36: '36',
-    30: '30',
-    24: '30',
-    18: '18',
-};
-function applyBadgeMods(mods) {
-    return [
-        css$D.root, buttonCss.root, css$D['size-' + (mods.size || defaultSize$5)], css$D['fill-' + (mods.fill || 'solid')], mods.color && `badge-${mods.color}`,
-    ];
-}
-const Badge = withMods(Button$1, applyBadgeMods, (props) => ({
-    dropdownIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].foldingArrow,
-    clearIcon: systemIcons[(props.size && mapSize$1[props.size]) || defaultSize$5].clear,
-    countPosition: 'left',
-}));
-
-var css$C = {"root":"_1-I1ie","size-18":"_5CmAdj","size-24":"nWfM8C","size-30":"ChHfDN","size-36":"b3axBo","size-42":"_4K3Gli","size-48":"xWS4i7","size18":"_5CmAdj","size24":"nWfM8C","size30":"ChHfDN","size36":"b3axBo","size42":"_4K3Gli","size48":"xWS4i7"};
-
-const defaultSize$4 = '36';
-const mapSize = {
-    48: '48',
-    42: '48',
-    36: '36',
-    30: '30',
-    24: '30',
-    18: '18',
-};
-function applyTagMods(mods) {
-    return [css$C['size-' + (mods.size || defaultSize$4)], css$C.root];
-}
-const Tag = withMods(Button$1, applyTagMods, (props) => ({
-    dropdownIcon: systemIcons[mapSize[props.size] || defaultSize$4].foldingArrow,
-    clearIcon: systemIcons[mapSize[props.size] || defaultSize$4].clear,
-}));
-
-var css$B = {"root":"zHpSJK","spacer":"eFz-P4","mode-ghost":"_3dh7wo","size-24":"Rqjuvc","size-30":"As-OAc","navigation-size-24":"Rw9pt-","navigation-size-30":"-agfoU","modeGhost":"_3dh7wo","size24":"Rqjuvc","size30":"As-OAc","navigationSize24":"Rw9pt-","navigationSize30":"-agfoU"};
-
-var _path$u;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
-var SvgNavigationChevronLeft12 = function SvgNavigationChevronLeft12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    ref: ref
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.705 3.705 7 3 4 6l3 3 .705-.705L5.415 6l2.29-2.295z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$v = /*#__PURE__*/forwardRef(SvgNavigationChevronLeft12);
-
-var _path$t;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
-var SvgNavigationChevronRight12 = function SvgNavigationChevronRight12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
-    ref: ref
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "m5 3-.705.705L6.585 6l-2.29 2.295L5 9l3-3-3-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$u = /*#__PURE__*/forwardRef(SvgNavigationChevronRight12);
-
-function Paginator(props) {
-    const renderPaginator = (params) => {
-        var _a, _b;
-        return (React__default.createElement("nav", Object.assign({ role: "navigation", className: css$B.root }, params.rawProps),
-            React__default.createElement(Button, { cx: css$B[`navigation-size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$J : ForwardRef$v, onClick: params.goToPrev, isDisabled: params.isFirst, mode: "outline", color: "secondary" }),
-            params.pages.map((page, index) => {
-                var _a, _b;
-                if (page.type === 'spacer') {
-                    return (React__default.createElement(Button, { cx: cx(css$B[`size-${(_a = params.size) !== null && _a !== void 0 ? _a : '30'}`], css$B.spacer), size: params.size, key: `${index}_spacer`, caption: "...", mode: "ghost", color: "secondary", tabIndex: -1 }));
-                }
-                else {
-                    return (React__default.createElement(Button, { cx: cx(css$B[`size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], css$B[`mode-${!page.isActive && 'ghost'}`]), size: params.size, key: page.pageNumber, caption: page.pageNumber, onClick: () => { var _a; return (_a = page.onClick) === null || _a === void 0 ? void 0 : _a.call(page); }, rawProps: { 'aria-current': page.isActive }, mode: (page.isActive && 'outline') || 'ghost', color: "primary" }));
-                }
-            }),
-            React__default.createElement(Button, { cx: css$B[`navigation-size-${(_b = params.size) !== null && _b !== void 0 ? _b : '30'}`], size: params.size, icon: params.size === '30' ? ForwardRef$I : ForwardRef$u, onClick: params.goToNext, isDisabled: params.isLast, mode: "outline", color: "secondary" })));
-    };
-    return React__default.createElement(Paginator$1, Object.assign({}, props, { render: renderPaginator }));
-}
-
-var css$A = {"root":"J1Q-ET","bar":"Hrr-CY","progressBar-indeterminate":"I6Mhye","size-12":"_0LaF1B","size-18":"wXkA4a","size-24":"gMexWL","progressBarIndeterminate":"I6Mhye","size12":"_0LaF1B","size18":"wXkA4a","size24":"gMexWL"};
-
-const IndeterminateBar = React.forwardRef((props, ref) => {
-    return (React.createElement("div", { ref: ref, className: cx(props.cx, css$A.root, css$A[`size-${props.size || 12}`]) },
-        React.createElement("div", { className: cx(css$A.bar) })));
-});
-
-var css$z = {"root":"Ygyvyo","striped":"cYG-rF","animate-stripes":"Rb6nNv","size-12":"K9B4DN","size-18":"_4jfOKa","size-24":"PbHM1I","animateStripes":"Rb6nNv","size12":"K9B4DN","size18":"_4jfOKa","size24":"PbHM1I"};
-
-const defaultSize$3 = '12';
-function applyProgressBarMods(mods) {
-    const size = mods.size || defaultSize$3;
-    return [
-        css$z.root, css$z[`size-${size}`], mods.striped && css$z.striped,
-    ];
-}
-const ProgressBar = withMods(ProgressBar$1, applyProgressBarMods, (props) => ({
-    hideLabel: props.hideLabel || props.striped,
-}));
-
-var css$y = {"root":"V5ZqTD"};
-
-const IndicatorBar = React.forwardRef((props, ref) => {
-    const { progress } = props;
-    return progress || progress === 0 ? (React.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx(css$y.root, props.cx), hideLabel: true })) : (React.createElement(IndeterminateBar, { ref: ref, cx: cx(css$y.root, props.cx) }));
-});
-
 const MAX_ITEMS = 100;
 const getMaxItems = (maxItems) => maxItems || maxItems === 0 ? maxItems : MAX_ITEMS;
 
-var css$x = {"root":"uqtucK","mode-form":"QOg9-Y","mode-cell":"SjEFLM","mode-inline":"_0KChDd","size-24":"_25Nrzd","size-30":"M4SrW4","size-36":"iuAUP9","size-42":"p1RY4u","size-48":"iu4XEk","modeForm":"QOg9-Y","modeCell":"SjEFLM","modeInline":"_0KChDd","size24":"_25Nrzd","size30":"M4SrW4","size36":"iuAUP9","size42":"p1RY4u","size48":"iu4XEk"};
+var css$G = {"uui-typography":"sQQj5s","hero-header":"_9aaey-","promo-header":"p5LCtM","uui-critical":"rMCuRU","uui-success":"mDpbWl","uui-warning":"Rw3xv0","uui-typography-size-12":"B4XeiI","uui-typography-size-14":"P4YlEH","uui-typography-size-16":"bGt7Jr","root":"E8pxGp","mode-form":"DCnwtL","mode-cell":"ueQo1o","mode-inline":"v11GFl","size-24":"_6rvzHn","size-30":"dZ-gOp","size-36":"_7mUcLE","size-42":"w5NzhK","size-48":"b8FGFE","uuiTypography":"sQQj5s","heroHeader":"_9aaey-","promoHeader":"p5LCtM","uuiCritical":"rMCuRU","uuiSuccess":"mDpbWl","uuiWarning":"Rw3xv0","uuiTypographySize12":"B4XeiI","uuiTypographySize14":"P4YlEH","uuiTypographySize16":"bGt7Jr","modeForm":"DCnwtL","modeCell":"ueQo1o","modeInline":"v11GFl","size24":"_6rvzHn","size30":"dZ-gOp","size36":"_7mUcLE","size42":"w5NzhK","size48":"b8FGFE"};
 
 const defaultSize$2 = '36';
-const defaultMode = EditMode.FORM;
+const defaultMode$1 = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
     return [
-        css$x.root,
-        css$x['size-' + (mods.size || defaultSize$2)],
-        css$x['mode-' + (mods.mode || defaultMode)],
+        css$G.root,
+        css$G['size-' + (mods.size || defaultSize$2)],
+        css$G['mode-' + (mods.mode || defaultMode$1)],
     ];
 }
 function PickerTogglerComponent(props, ref) {
@@ -2436,9 +2134,9 @@ function PickerTogglerComponent(props, ref) {
 }
 const PickerToggler = React.forwardRef(PickerTogglerComponent);
 
-var css$w = {"root":"ntJifg","multiline":"RiB5iM","vertical-padding-24":"tUIlxW","vertical-padding-30":"pjL6j9","vertical-padding-36":"qRurBY","vertical-padding-42":"S6l7Sf","vertical-padding-48":"nvlfUX","text":"-MCAeb","verticalPadding24":"tUIlxW","verticalPadding30":"pjL6j9","verticalPadding36":"qRurBY","verticalPadding42":"S6l7Sf","verticalPadding48":"nvlfUX"};
+var css$F = {"root":"_2dUS8A","multiline":"_1trv6u","vertical-padding-24":"_9Yv2rg","vertical-padding-30":"jZ-3-7","vertical-padding-36":"AtJGWQ","vertical-padding-42":"ARLKMU","vertical-padding-48":"Q-cTho","text":"V3-iwn","verticalPadding24":"_9Yv2rg","verticalPadding30":"jZ-3-7","verticalPadding36":"AtJGWQ","verticalPadding42":"ARLKMU","verticalPadding48":"Q-cTho"};
 
-var css$v = {"highlighted-text":"OpGzSp","highlightedText":"OpGzSp"};
+var css$E = {"highlighted-text":"O1m5aV","highlightedText":"O1m5aV"};
 
 const mergeHighlightRanges = (ranges) => {
     const mergedRanges = [];
@@ -2492,7 +2190,7 @@ const getHighlightRanges = (str, search) => {
 };
 const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
     const rangeStr = str.substring(range.from, range.to);
-    return (React__default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$v.highlightedText } : {})), rangeStr));
+    return (React__default.createElement("span", Object.assign({ key: `${rangeStr}-${index}` }, (range.isHighlighted ? { className: css$E.highlightedText } : {})), rangeStr));
 });
 const getHighlightedSearchMatches = (str, search) => {
     if (!search || !str) {
@@ -2521,20 +2219,20 @@ class PickerItem extends React.Component {
         const { search } = (_a = this.props.dataSourceState) !== null && _a !== void 0 ? _a : {};
         const title = highlightSearchMatches ? getHighlightedSearchMatches(this.props.title, search) : this.props.title;
         const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(this.props.subtitle, search) : this.props.subtitle;
-        return (React.createElement(FlexCell, { width: "auto", cx: [css$w.root, cx] },
-            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$w.multiline, css$w[`vertical-padding-${itemSize}`]], spacing: "12" },
+        return (React.createElement(FlexCell, { width: "auto", cx: [css$F.root, cx] },
+            React.createElement(FlexRow, { size: itemSize, cx: isMultiline && [css$F.multiline, css$F[`vertical-padding-${itemSize}`]], spacing: "12" },
                 avatarUrl && React.createElement(Avatar, { isLoading: isLoading, img: avatarUrl, size: this.getAvatarSize(itemSize, isMultiline).toString() }),
                 icon && React.createElement(IconContainer, { icon: icon }),
                 React.createElement(FlexCell, { width: "auto" },
-                    title && (React.createElement(Text, { size: itemSize, cx: css$w.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
-                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$w.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
+                    title && (React.createElement(Text, { size: itemSize, cx: css$F.text, color: isDisabled ? 'disabled' : 'primary' }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : title)),
+                    subtitle && (React.createElement(Text, { size: itemSize, color: isDisabled ? 'disabled' : 'secondary', cx: css$F.text }, isLoading ? React.createElement(TextPlaceholder, { wordsCount: 2 }) : subtitle))))));
     }
 }
 PickerItem.defaultProps = {
     highlightSearchMatches: true,
 };
 
-var css$u = {"panel":"GYrFnT","footer-wrapper":"ysvauv","footer-size-24":"MgTtwf","footer-size-30":"vojWzE","footer-size-36":"d0-Iev","footer-size-42":"lUZOb6","footer-size-48":"QSArVr","footerWrapper":"ysvauv","footerSize24":"MgTtwf","footerSize30":"vojWzE","footerSize36":"d0-Iev","footerSize42":"lUZOb6","footerSize48":"QSArVr"};
+var css$D = {"uui-typography":"fF8ZwP","hero-header":"_9b-bPp","promo-header":"-cvRcr","uui-critical":"fHlDEe","uui-success":"Dg92tJ","uui-warning":"qhpAAB","uui-typography-size-12":"v-FDRt","uui-typography-size-14":"EUJkES","uui-typography-size-16":"aFs07c","root":"fLKY6A","panel":"p4QNcg","footer-wrapper":"gFO-FS","footer-size-24":"r6XsSu","footer-size-30":"xZzEB2","footer-size-36":"zhjyXq","footer-size-42":"EsxpXL","footer-size-48":"Koxf6N","uuiTypography":"fF8ZwP","heroHeader":"_9b-bPp","promoHeader":"-cvRcr","uuiCritical":"fHlDEe","uuiSuccess":"Dg92tJ","uuiWarning":"qhpAAB","uuiTypographySize12":"v-FDRt","uuiTypographySize14":"EUJkES","uuiTypographySize16":"aFs07c","footerWrapper":"gFO-FS","footerSize24":"r6XsSu","footerSize30":"xZzEB2","footerSize36":"zhjyXq","footerSize42":"EsxpXL","footerSize48":"Koxf6N"};
 
 const pickerHeight$1 = 300;
 const pickerWidth = 360;
@@ -2549,7 +2247,7 @@ function PickerInput(_a) {
         })
             .catch(() => { });
     };
-    const { context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, } = usePickerInput(Object.assign(Object.assign({}, props), { toggleModalOpening }));
+    const { context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, handlePickerInputKeyboard, } = usePickerInput(Object.assign(Object.assign({}, props), { toggleModalOpening }));
     const getTogglerMods = () => {
         return {
             size: props.size,
@@ -2558,7 +2256,7 @@ function PickerInput(_a) {
     };
     const renderTarget = (targetProps) => {
         const renderTargetFn = props.renderToggler || ((props) => React__default.createElement(PickerToggler, Object.assign({}, props)));
-        return (React__default.createElement(IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, render: (editableProps) => renderTargetFn(Object.assign(Object.assign(Object.assign({}, getTogglerMods()), targetProps), editableProps)) }));
+        return (React__default.createElement(IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn(Object.assign(Object.assign(Object.assign(Object.assign({}, getTogglerMods()), targetProps), editableProps), { onKeyDown: (e) => handlePickerInputKeyboard(rows, e, editableProps.value) })) }));
     };
     const renderFooter = () => {
         const footerProps = getFooterProps();
@@ -2580,7 +2278,7 @@ function PickerInput(_a) {
         const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
         const bodyHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight$1;
         const minBodyWidth = props.minBodyWidth || pickerWidth;
-        return (React__default.createElement(MobileDropdownWrapper, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [css$u.panel, props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
+        return (React__default.createElement(MobileDropdownWrapper, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [css$D.panel, css$D.root, props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
             React__default.createElement(DataPickerBody, Object.assign({}, bodyProps, { rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode, renderNotFound: props.renderNotFound
                     ? () => props.renderNotFound({
                         search: dataSourceState.search,
@@ -2591,12 +2289,12 @@ function PickerInput(_a) {
     };
     const rows = getRows();
     return (React__default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
-            const targetProps = getTogglerProps(rows);
+            const targetProps = getTogglerProps();
             return renderTarget(Object.assign(Object.assign({}, dropdownProps), targetProps));
         }, renderBody: (bodyProps) => renderBody(Object.assign(Object.assign(Object.assign({}, bodyProps), getPickerBodyProps(rows)), getListProps()), rows), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, modifiers: popperModifiers, closeBodyOnTogglerHidden: !isMobile(), portalTarget: props.portalTarget }));
 }
 
-var css$t = {"row":"lWrCZP"};
+var css$C = {"row":"xMWN54"};
 
 function PickerListItem(props) {
     var _a;
@@ -2614,7 +2312,7 @@ function PickerListItem(props) {
     else {
         component = (React__default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
     }
-    return (React__default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$t.row }), component));
+    return (React__default.createElement("div", Object.assign({ role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1 }, (((_a = props.checkbox) === null || _a === void 0 ? void 0 : _a.isVisible) && { 'aria-checked': props.isChecked }), { className: css$C.row }), component));
 }
 
 function PickerList(props) {
@@ -2650,304 +2348,111 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$s = {"root":"_0C-xp7","size-24":"b11hTJ","size-30":"I8-X8S","size-36":"nLNyxH","size-48":"T9QSQR","size-60":"_83pqYA","size24":"b11hTJ","size30":"I8-X8S","size36":"nLNyxH","size48":"T9QSQR","size60":"_83pqYA"};
-
-// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
-// As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
-const renderCell = (props) => {
-    const mods = props.rowProps;
-    return React.createElement(DataTableCell, Object.assign({ size: mods.size }, props));
-};
-const renderDropMarkers = (props) => React.createElement(DropMarker, Object.assign({}, props, { enableBlocker: true }));
-const propsMods = { renderCell, renderDropMarkers };
-const DataTableRow = withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
-    return [
-        css$s.root, borderBottom && 'uui-dt-row-border', css$s['size-' + (size || '36')],
-    ];
-}, () => propsMods);
+var css$B = {"uui-typography":"qotcmM","hero-header":"VPm67t","promo-header":"s7R73G","uui-critical":"_1CW-Ns","uui-success":"NxHJe2","uui-warning":"iRc28A","uui-typography-size-12":"Lfdlhf","uui-typography-size-14":"sb5Rbb","uui-typography-size-16":"_1zblT9","root":"BNm03Q","title-wrapper":"_9-IJUP","title":"Qg0AZQ","text-wrapper":"wuDR7n","selection":"YLD2Hy","postfix":"y8s5tw","selected":"RNA4BW","uuiTypography":"qotcmM","heroHeader":"VPm67t","promoHeader":"s7R73G","uuiCritical":"_1CW-Ns","uuiSuccess":"NxHJe2","uuiWarning":"iRc28A","uuiTypographySize12":"Lfdlhf","uuiTypographySize14":"sb5Rbb","uuiTypographySize16":"_1zblT9","titleWrapper":"_9-IJUP","textWrapper":"wuDR7n"};
 
-var css$r = {"sorting-panel-container":"CcNsVx","sort-active":"i9CzT5","sortingPanelContainer":"CcNsVx","sortActive":"i9CzT5"};
+const defaultSize = '36';
+const FilterPanelItemToggler = React.forwardRef((props, ref) => {
+    const togglerPickerOpened = (e) => {
+        var _a;
+        if (props.isDisabled)
+            return;
+        e.preventDefault();
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    const onKeyDownHandler = (e) => {
+        if (props.isDisabled)
+            return;
+        if (e.key === 'Enter' && !props.isOpen) {
+            e.preventDefault();
+            props.toggleDropdownOpening(true);
+        }
+        if (e.key === 'Escape' && props.isOpen) {
+            e.preventDefault();
+            props.toggleDropdownOpening(false);
+        }
+    };
+    const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
+    const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
+        React.createElement(Text, { color: "brand", size: props.size, cx: css$B.selection }, i),
+        (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
+    return (React.createElement(FlexRow$1, Object.assign({}, props, { rawProps: {
+            style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
+            role: 'button',
+            tabIndex: props.isDisabled ? -1 : 0,
+            onKeyDown: onKeyDownHandler,
+        }, cx: cx(css$B.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
+        React.createElement(FlexRow$1, { cx: css$B.titleWrapper },
+            React.createElement(Text, { size: props.size, cx: css$B.title }, getTitle),
+            props.selection && (React.createElement("div", { className: css$B.textWrapper },
+                getSelectionText(),
+                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$B.postfix }, props.postfix))))),
+        !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
+});
 
-var _path$s;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
-var SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M10 6v10H8V6H5l4-4 4 4h-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$t = /*#__PURE__*/forwardRef(SvgTableSortAsc18);
+const pickerHeight = 300;
+function FilterPickerBody(props) {
+    const shouldShowBody = () => props.isOpen;
+    const { getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = usePickerInput(Object.assign(Object.assign({}, props), { shouldShowBody }));
+    const renderItem = (item, rowProps) => {
+        return React.createElement(PickerItem, Object.assign({ title: getName(item), size: "36" }, rowProps));
+    };
+    const onSelect = (row) => {
+        props.onClose();
+        handleDataSourceValueChange(Object.assign(Object.assign({}, dataSourceState), { search: '', selectedId: row.id }));
+    };
+    const renderRow = (rowProps) => {
+        if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
+            rowProps.onSelect = onSelect;
+        }
+        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: "36", padding: "12", renderItem: renderItem })));
+    };
+    const renderFooter = () => {
+        return React.createElement(DataPickerFooter, Object.assign({}, getFooterProps(), { size: "36" }));
+    };
+    const renderBody = (bodyProps, rows) => {
+        const renderedDataRows = rows.map((props) => renderRow(props));
+        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(DataPickerBody, Object.assign({}, bodyProps, { selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, searchSize: "36", editMode: "dropdown", showSearch: true })),
+            renderFooter()));
+    };
+    const rows = getRows();
+    return renderBody(Object.assign(Object.assign({}, getPickerBodyProps(rows)), getListProps()), rows);
+}
 
-var _path$r;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
-var SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M10 12V2H8v10H5l4 4 4-4h-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$s = /*#__PURE__*/forwardRef(SvgTableSortDesc18);
+class FilterDatePickerBody extends BaseDatePicker {
+    constructor() {
+        super(...arguments);
+        this.state = Object.assign(Object.assign({}, super.getValue()), { isOpen: false, inputValue: null });
+        this.renderInput = () => {
+            return null;
+        };
+        this.onToggleHandler = (val) => {
+            this.onToggle(val);
+            this.props.onClose();
+        };
+        this.handleCancel = () => {
+            this.handleValueChange(undefined);
+            this.setState({ inputValue: null, selectedDate: null });
+        };
+    }
+    renderBody() {
+        var _a;
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(FlexRow, { borderBottom: true },
+                React__default.createElement(DatePickerBody, { filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggleHandler, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body })),
+            React__default.createElement(FlexCell, { alignSelf: "stretch" },
+                React__default.createElement(FlexRow, { padding: "24", vPadding: "12" },
+                    React__default.createElement(Text, null, this.state.selectedDate ? dayjs(this.state.selectedDate).format('MMM DD, YYYY') : ''),
+                    React__default.createElement(FlexSpacer, null),
+                    React__default.createElement(LinkButton, { isDisabled: !this.state.selectedDate, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: this.handleCancel })))));
+    }
+    render() {
+        return this.renderBody();
+    }
+}
 
-const SortingPanelImpl = ({ sortDirection, onSort }) => {
-    const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
-    const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
-    return (React__default.createElement(FlexCell, { cx: css$r.sortingPanelContainer },
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$t, onClick: sortAsc }),
-        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$s, onClick: sortDesc })));
-};
-const SortingPanel = React__default.memo(SortingPanelImpl);
-
-const ColumnHeaderDropdownImpl = (props) => {
-    const popperModifiers = useMemo(() => [
-        {
-            name: 'offset',
-            options: { offset: [0, 1] },
-        }, mobilePopperModifier,
-    ], []);
-    const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
-    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(MobileDropdownWrapper, { width: 360, title: props.title, onClose: closeDropdown },
-            props.isSortable && React__default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
-            props.renderFilter(dropdownProps))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
-};
-const ColumnHeaderDropdown = React__default.memo(ColumnHeaderDropdownImpl);
-
-var css$q = {"cell":"tLAaeS","sort-icon":"fmuW6X","dropdown-icon":"_2XBE01","infoIcon":"g-SEdD","resizable":"fvxO4N","size-24":"vpt9Co","size-30":"t5WPTX","size-36":"Ha-8JD","size-42":"nI5chi","size-48":"k-8FVR","padding-left-24":"_2IORP8","padding-right-24":"eR2pIk","caption":"hXSvxS","checkbox":"WIQOhV","icon":"z-bjKK","icon-cell":"EjVWiZ","align-right":"jUnOzp","align-center":"YB-A2i","tooltip-wrapper":"hqa-dZ","cell-tooltip":"IE01Fr","upper-case":"lVsgvo","font-size-14":"cGKeij","resize-mark":"Zh231g","draggable":"klkXBa","ghost":"I0IT-7","is-dragged-out":"-x9U0X","dnd-marker-left":"Uwa2ke","dnd-marker-right":"L-Z1CZ","cell-tooltip-wrapper":"i721RA","cell-tooltip-text":"WRfPs-","sortIcon":"fmuW6X","dropdownIcon":"_2XBE01","size24":"vpt9Co","size30":"t5WPTX","size36":"Ha-8JD","size42":"nI5chi","size48":"k-8FVR","paddingLeft24":"_2IORP8","paddingRight24":"eR2pIk","iconCell":"EjVWiZ","alignRight":"jUnOzp","alignCenter":"YB-A2i","tooltipWrapper":"hqa-dZ","cellTooltip":"IE01Fr","upperCase":"lVsgvo","fontSize14":"cGKeij","resizeMark":"Zh231g","isDraggedOut":"-x9U0X","dndMarkerLeft":"Uwa2ke","dndMarkerRight":"L-Z1CZ","cellTooltipWrapper":"i721RA","cellTooltipText":"WRfPs-"};
-
-var _path$q;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
-var SvgTableSwap18 = function SvgTableSwap18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$r = /*#__PURE__*/forwardRef(SvgTableSwap18);
-
-var _path$p;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
-var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$q = /*#__PURE__*/forwardRef(SvgContentFiltration18);
-
-var _path$o;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
-var SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "m9 6-4.5 4.5 1.058 1.057L9 8.123l3.443 3.434L13.5 10.5 9 6z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$p = /*#__PURE__*/forwardRef(SvgNavigationChevronUp18);
-
-class DataTableHeaderCell extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            isDropdownOpen: null,
-        };
-        this.getTextStyle = () => {
-            if (this.props.textCase === 'upper')
-                return css$q.upperCase;
-            return css$q['font-size-14'];
-        };
-        this.getTooltipContent = () => (React.createElement("div", { className: css$q.cellTooltipWrapper },
-            React.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$q.cellTooltipText }, this.props.column.caption),
-            this.props.column.info && React.createElement(Text, { fontSize: "12", color: "contrast", cx: css$q.cellTooltipText }, this.props.column.info)));
-        this.getColumnCaption = () => {
-            return (React.createElement("div", { className: css$q.tooltipWrapper },
-                React.createElement("div", { className: cx$1(css$q.iconCell, css$q['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
-                    React.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$q.cellTooltip, openDelay: 600 },
-                        React.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: cx$1(css$q.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
-                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$q.icon, css$q.sortIcon, this.props.sortDirection && css$q.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'default' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$s : this.props.sortDirection === 'asc' ? ForwardRef$t : ForwardRef$r })),
-                    this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$q.icon, !this.props.sortDirection && css$q.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "default", icon: ForwardRef$q })),
-                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$q.icon, css$q.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$p : ForwardRef$A })))));
-        };
-        this.renderHeaderCheckbox = () => this.props.selectAll
-            && this.props.isFirstColumn && (React.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: cx$1(css$q.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
-        this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$q.resizeMark, uuiMarkers.draggable) });
-        this.renderCellContent = (props, dropdownProps) => (React.createElement(FlexCell, Object.assign({}, this.props.column, { minWidth: this.props.column.width, ref: (ref) => {
-                var _a;
-                props.ref(ref);
-                (_a = dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.ref) === null || _a === void 0 ? void 0 : _a.call(dropdownProps, ref);
-            }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$q.cell, css$q['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$q['padding-left-24'], this.props.isLastColumn && css$q['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$q.resizable, props.isDraggable && css$q.draggable, props.isDragGhost && css$q.ghost, props.isDraggedOut && css$q.isDraggedOut, props.isDndInProgress && css$q['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
-            this.renderHeaderCheckbox(),
-            this.getColumnCaption(),
-            this.props.allowColumnsResizing && this.renderResizeMark(props)));
-        this.renderCellWithFilter = (props) => (React.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: (dropdownProps) => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: (isDropdownOpen) => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
-    }
-    render() {
-        return React.createElement(DataTableHeaderCell$1, Object.assign({}, this.props, { renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
-    }
-}
-
-var css$p = {"header-cell":"csxPiM","config-icon":"B23ddJ","headerCell":"csxPiM","configIcon":"B23ddJ"};
-
-var _path$n;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
-var SvgActionSettings18 = function SvgActionSettings18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    viewBox: "0 0 18 18",
-    ref: ref
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M3 9.093a6.083 6.083 0 0 1 0-.186L1.55 7.271a1 1 0 0 1-.118-1.163l1.28-2.216a1 1 0 0 1 1.066-.48l2.14.439a3.81 3.81 0 0 1 .163-.094l.691-2.073A1 1 0 0 1 7.721 1h2.558a1 1 0 0 1 .949.684l.69 2.073c.056.03.11.061.163.094l2.141-.439a1 1 0 0 1 1.067.48l1.279 2.216a1 1 0 0 1-.118 1.163L15 8.907a5.72 5.72 0 0 1 0 .186l1.45 1.636a1 1 0 0 1 .118 1.163l-1.28 2.216a1 1 0 0 1-1.066.48l-2.14-.438a6.215 6.215 0 0 1-.163.093l-.691 2.073a1 1 0 0 1-.949.684H7.721a1 1 0 0 1-.949-.684l-.69-2.073a6.105 6.105 0 0 1-.163-.094l-2.141.439a1 1 0 0 1-1.067-.48l-1.279-2.216a1 1 0 0 1 .118-1.163L3 9.093zM9 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
-    clipRule: "evenodd"
-  })));
-};
-var ForwardRef$o = /*#__PURE__*/forwardRef(SvgActionSettings18);
-
-const DataTableHeaderRow = withMods(DataTableHeaderRow$1, () => [css$p.root], (mods) => ({
-    renderCell: (props) => React.createElement(DataTableHeaderCell, Object.assign({}, props, { size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key })),
-    renderConfigButton: () => React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$p.configIcon, color: "default", icon: ForwardRef$o }),
-}));
-
-var css$o = {"root":"I6CA0x","title-wrapper":"vf-OAE","title":"zDg-E-","text-wrapper":"_4iPQBD","selection":"RN11B2","postfix":"XTLeTq","selected":"_1-TViP","titleWrapper":"vf-OAE","textWrapper":"_4iPQBD"};
-
-const defaultSize = '36';
-const FilterPanelItemToggler = React.forwardRef((props, ref) => {
-    const togglerPickerOpened = (e) => {
-        var _a;
-        if (props.isDisabled)
-            return;
-        e.preventDefault();
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-    };
-    const onKeyDownHandler = (e) => {
-        if (props.isDisabled)
-            return;
-        if (e.key === 'Enter' && !props.isOpen) {
-            e.preventDefault();
-            props.toggleDropdownOpening(true);
-        }
-        if (e.key === 'Escape' && props.isOpen) {
-            e.preventDefault();
-            props.toggleDropdownOpening(false);
-        }
-    };
-    const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
-    const getSelectionText = () => props.selection.map((i, index) => (React.createElement(React.Fragment, { key: `${i}${index}` },
-        React.createElement(Text, { color: "brand", size: props.size, cx: css$o.selection }, i),
-        (props.postfix || index !== props.selection.length - 1) && React.createElement("span", null, ",\u00A0"))));
-    return (React.createElement(FlexRow$1, Object.assign({}, props, { rawProps: {
-            style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
-            role: 'button',
-            tabIndex: props.isDisabled ? -1 : 0,
-            onKeyDown: onKeyDownHandler,
-        }, cx: cx(css$o.root, uuiElement.inputBox, uuiMarkers.clickable, props.isOpen && uuiMod.opened, ['size-' + (props.size || defaultSize)], props.cx), onClick: togglerPickerOpened, ref: ref }),
-        React.createElement(FlexRow$1, { cx: css$o.titleWrapper },
-            React.createElement(Text, { size: props.size, cx: css$o.title }, getTitle),
-            props.selection && (React.createElement("div", { className: css$o.textWrapper },
-                getSelectionText(),
-                props.postfix && (React.createElement(Text, { color: "brand", size: props.size, cx: css$o.postfix }, props.postfix))))),
-        !props.isDisabled && React.createElement(IconContainer, { icon: systemIcons[props.size || defaultSize].foldingArrow, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
-});
-
-const pickerHeight = 300;
-function FilterPickerBody(props) {
-    const shouldShowBody = () => props.isOpen;
-    const { getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = usePickerInput(Object.assign(Object.assign({}, props), { shouldShowBody }));
-    const renderItem = (item, rowProps) => {
-        return React.createElement(PickerItem, Object.assign({ title: getName(item), size: "36" }, rowProps));
-    };
-    const onSelect = (row) => {
-        props.onClose();
-        handleDataSourceValueChange(Object.assign(Object.assign({}, dataSourceState), { search: '', selectedId: row.id }));
-    };
-    const renderRow = (rowProps) => {
-        if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
-            rowProps.onSelect = onSelect;
-        }
-        return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React.createElement(DataPickerRow, Object.assign({}, rowProps, { key: rowProps.rowKey, borderBottom: "none", size: "36", padding: "12", renderItem: renderItem })));
-    };
-    const renderFooter = () => {
-        return React.createElement(DataPickerFooter, Object.assign({}, getFooterProps(), { size: "36" }));
-    };
-    const renderBody = (bodyProps, rows) => {
-        const renderedDataRows = rows.map((props) => renderRow(props));
-        const maxHeight = isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || pickerHeight;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(DataPickerBody, Object.assign({}, bodyProps, { selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, searchSize: "36", editMode: "dropdown", showSearch: true })),
-            renderFooter()));
-    };
-    const rows = getRows();
-    return renderBody(Object.assign(Object.assign({}, getPickerBodyProps(rows)), getListProps()), rows);
-}
-
-class FilterDatePickerBody extends BaseDatePicker {
-    constructor() {
-        super(...arguments);
-        this.state = Object.assign(Object.assign({}, super.getValue()), { isOpen: false, inputValue: null });
-        this.renderInput = () => {
-            return null;
-        };
-        this.onToggleHandler = (val) => {
-            this.onToggle(val);
-            this.props.onClose();
-        };
-        this.handleCancel = () => {
-            this.handleValueChange(undefined);
-            this.setState({ inputValue: null, selectedDate: null });
-        };
-    }
-    renderBody() {
-        var _a;
-        return (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(FlexRow, { borderBottom: true },
-                React__default.createElement(DatePickerBody, { filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggleHandler, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body })),
-            React__default.createElement(FlexCell, { alignSelf: "stretch" },
-                React__default.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React__default.createElement(Text, null, this.state.selectedDate ? dayjs(this.state.selectedDate).format('MMM DD, YYYY') : ''),
-                    React__default.createElement(FlexSpacer, null),
-                    React__default.createElement(LinkButton, { isDisabled: !this.state.selectedDate, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: this.handleCancel })))));
-    }
-    render() {
-        return this.renderBody();
-    }
-}
-
-var css$n = {"date-input":"oXyvT9","size-24":"aYiI4h","size-30":"nUhMQv","size-36":"_8nzaPk","size-42":"Gn6Pm1","size-48":"zNamhc","date-input-group":"_6tNooK","separator":"MJxVBQ","mode-form":"qJ464i","mode-cell":"k4jEGI","dateInput":"oXyvT9","size24":"aYiI4h","size30":"nUhMQv","size36":"_8nzaPk","size42":"Gn6Pm1","size48":"zNamhc","dateInputGroup":"_6tNooK","modeForm":"qJ464i","modeCell":"k4jEGI"};
+var css$A = {"uui-typography":"nq8HVJ","hero-header":"-JlEiH","promo-header":"lGb28G","uui-critical":"mNMMdo","uui-success":"jiMme-","uui-warning":"wsN6bm","uui-typography-size-12":"US-CEK","uui-typography-size-14":"_884cdM","uui-typography-size-16":"Wlq7qT","date-input":"OnE5M6","size-24":"Kim8pZ","size-30":"KP0jS9","size-36":"BN14qX","size-42":"eQT5mR","size-48":"_22soQP","date-input-group":"lBgfjb","separator":"yqG3nJ","mode-form":"yjK-uf","mode-cell":"Hu7bpx","uuiTypography":"nq8HVJ","heroHeader":"-JlEiH","promoHeader":"lGb28G","uuiCritical":"mNMMdo","uuiSuccess":"jiMme-","uuiWarning":"wsN6bm","uuiTypographySize12":"US-CEK","uuiTypographySize14":"_884cdM","uuiTypographySize16":"Wlq7qT","dateInput":"OnE5M6","size24":"Kim8pZ","size30":"KP0jS9","size36":"BN14qX","size42":"eQT5mR","size48":"_22soQP","dateInputGroup":"lBgfjb","modeForm":"yjK-uf","modeCell":"Hu7bpx"};
 
 class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     constructor() {
@@ -2967,10 +2472,10 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
                 React.createElement(RangeDatePickerBody, { value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, focusPart: this.state.inFocus, changeIsOpen: this.changeIsOpen, presets: this.props.presets })),
             React.createElement(FlexCell, { alignSelf: "stretch" },
                 React.createElement(FlexRow, { padding: "24", vPadding: "12" },
-                    React.createElement("div", { className: cx(css$n.dateInputGroup, this.state.inFocus && uuiMod.focus) },
-                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$n.dateInput, css$n['size-30'], this.state.inFocus === 'from' && uuiMod.focus), size: "30", placeholder: i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from') }),
-                        React.createElement("div", { className: css$n.separator }),
-                        React.createElement(TextInput, { cx: cx(css$n.dateInput, css$n['size-30'], this.state.inFocus === 'to' && uuiMod.focus), placeholder: i18n.rangeDatePicker.pickerPlaceholderTo, size: "30", value: this.state.inputValue.to, onCancel: this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), onFocus: (event) => this.handleFocus(event, 'to'), onBlur: (event) => this.handleBlur(event, 'to') })),
+                    React.createElement("div", { className: cx(css$A.dateInputGroup, this.state.inFocus && uuiMod.focus) },
+                        React.createElement(TextInput, { icon: systemIcons['30'].calendar, cx: cx(css$A.dateInput, css$A['size-30'], this.state.inFocus === 'from' && uuiMod.focus), size: "30", placeholder: i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from') }),
+                        React.createElement("div", { className: css$A.separator }),
+                        React.createElement(TextInput, { cx: cx(css$A.dateInput, css$A['size-30'], this.state.inFocus === 'to' && uuiMod.focus), placeholder: i18n.rangeDatePicker.pickerPlaceholderTo, size: "30", value: this.state.inputValue.to, onCancel: this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), onFocus: (event) => this.handleFocus(event, 'to'), onBlur: (event) => this.handleBlur(event, 'to') })),
                     React.createElement(FlexSpacer, null),
                     React.createElement(LinkButton, { isDisabled: !this.state.inputValue.from && !this.state.inputValue.to, caption: i18n.pickerModal.clearAllButton, onClick: this.handleCancel })))));
     }
@@ -2979,7 +2484,7 @@ class FilterRangeDatePickerBody extends BaseRangeDatePicker {
     }
 }
 
-var css$m = {"container":"rxn8Af"};
+var css$z = {"container":"ZwHvOp"};
 
 function FilterNumericBody(props) {
     var _a, _b;
@@ -3023,7 +2528,7 @@ function FilterNumericBody(props) {
     if (isInRangePredicate) {
         const value = props.value;
         return (React__default.createElement("div", null,
-            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$m.container },
+            React__default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$z.container },
                 React__default.createElement(FlexCell, { width: "100%" },
                     React__default.createElement(NumericInput, { value: (_a = value === null || value === void 0 ? void 0 : value.from) !== null && _a !== void 0 ? _a : null, onValueChange: rangeValueHandler('from'), size: "36", placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
                 React__default.createElement(FlexCell, { width: "100%" },
@@ -3031,7 +2536,7 @@ function FilterNumericBody(props) {
             renderFooter()));
     }
     return (React__default.createElement("div", null,
-        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$m.container },
+        React__default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$z.container },
             React__default.createElement(FlexCell, { width: 130 },
                 React__default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, size: "36", placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
         renderFooter()));
@@ -3054,23 +2559,23 @@ function FilterItemBody(props) {
     }
 }
 
-var _path$m;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+var _path$t;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgActionDeleteforever12 = function SvgActionDeleteforever12(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 12,
     height: 12,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M14 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h10zm-3-4 1 1h3v2H3V3h3l1-1h4zm-.24 12.1L9 12.36 7.24 14.1l-1.16-1.16 1.74-1.76-1.78-1.8 1.2-1.18L9 10l1.76-1.8 1.18 1.18-1.76 1.8 1.76 1.76-1.18 1.16z"
   })));
 };
-var ForwardRef$n = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
+var ForwardRef$u = /*#__PURE__*/forwardRef(SvgActionDeleteforever12);
 
-var css$l = {"header":"caG878","removeButton":"iWt2LZ","with-search":"UhGI54","withSearch":"UhGI54"};
+var css$y = {"uui-typography":"_-3QkAU","hero-header":"_35Pjn1","promo-header":"F5S-XN","uui-critical":"tm4WKM","uui-success":"H--XFr","uui-warning":"oe-YSy","uui-typography-size-12":"WSAbn5","uui-typography-size-14":"l-b9d0","uui-typography-size-16":"KxYOB5","root":"w1uOAy","header":"ZCXggF","removeButton":"IZ2zz3","with-search":"Cwt8av","uuiTypography":"_-3QkAU","heroHeader":"_35Pjn1","promoHeader":"F5S-XN","uuiCritical":"tm4WKM","uuiSuccess":"H--XFr","uuiWarning":"oe-YSy","uuiTypographySize12":"WSAbn5","uuiTypographySize14":"l-b9d0","uuiTypographySize16":"KxYOB5","withSearch":"Cwt8av"};
 
 function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
@@ -3146,13 +2651,13 @@ function FiltersToolbarItemImpl(props) {
     };
     const renderHeader = (hideTitle) => {
         var _a;
-        return (React__default.createElement("div", { className: cx(css$l.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$l.withSearch)) },
+        return (React__default.createElement("div", { className: cx(css$y.header, isPickersType && ((_a = props.showSearch) !== null && _a !== void 0 ? _a : css$y.withSearch)) },
             props.predicates ? (React__default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
-            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__default.createElement(LinkButton, { cx: css$l.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$n }))));
+            !(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__default.createElement(LinkButton, { cx: css$y.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$u }))));
     };
     const renderBody = (dropdownProps) => {
         const hideHeaderTitle = isPickersType && isMobileScreen;
-        return isPickersType ? (React__default.createElement(MobileDropdownWrapper, Object.assign({}, dropdownProps, { title: props.title, width: 360, onClose: () => isOpenChange(false) }),
+        return isPickersType ? (React__default.createElement(MobileDropdownWrapper, Object.assign({}, dropdownProps, { cx: css$y.root, title: props.title, width: 360, onClose: () => isOpenChange(false) }),
             renderHeader(hideHeaderTitle),
             React__default.createElement(FilterItemBody, Object.assign({}, props, dropdownProps, { selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })))) : (React__default.createElement(DropdownContainer, Object.assign({}, dropdownProps),
             renderHeader(hideHeaderTitle),
@@ -3235,20 +2740,20 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = React__default.memo(FiltersToolbarItemImpl);
 
-var _path$l;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+var _path$s;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgActionAdd18 = function SvgActionAdd18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     d: "M10 2H8v6H2v2h6v6h2v-6h6V8h-6V2z"
   })));
 };
-var ForwardRef$m = /*#__PURE__*/forwardRef(SvgActionAdd18);
+var ForwardRef$t = /*#__PURE__*/forwardRef(SvgActionAdd18);
 
 const normalizeFilterWithPredicates = (filter) => {
     if (!filter) {
@@ -3339,7 +2844,7 @@ function FiltersToolbarImpl(props) {
     }, [filters, tableState.filtersConfig]);
     const renderAddFilterToggler = useCallback((togglerProps) => {
         var _a;
-        return (React__default.createElement(Button, { size: (_a = props.size) !== null && _a !== void 0 ? _a : '36', onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$m, iconPosition: "left", mode: "ghost", color: "primary" }));
+        return (React__default.createElement(Button, { size: (_a = props.size) !== null && _a !== void 0 ? _a : '36', onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$t, iconPosition: "left", fill: "ghost", color: "primary" }));
     }, []);
     const getRowOptions = useCallback((item) => ({
         isDisabled: item.isAlwaysVisible,
@@ -3366,143 +2871,143 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = React__default.memo(FiltersToolbarImpl);
 
-var css$k = {"divider":"ViO5Ui","dropdownDeleteIcon":"VLo8Eq","presetsWrapper":"NnBDHP","addPresetContainer":"fEi85a","dropContainer":"m3Yye8"};
+var css$x = {"divider":"iXP7pj","dropdownDeleteIcon":"_1E2e-U","presetsWrapper":"Qpmoqm","addPresetContainer":"mkB-13","dropContainer":"Wt42Az"};
 
-var css$j = {"preset-dropdown-panel":"cd8A-U","delete-row":"C1ak5F","delete-button":"_30E8-h","targetOpen":"FxZ22v","presetDropdownPanel":"cd8A-U","deleteRow":"C1ak5F","deleteButton":"_30E8-h"};
+var css$w = {"preset-dropdown-panel":"rilFzG","delete-row":"A-VvvW","delete-button":"z6Lm8U","targetOpen":"jDWIkr","presetDropdownPanel":"rilFzG","deleteRow":"A-VvvW","deleteButton":"z6Lm8U"};
 
-var _path$k;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+var _path$r;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgNavigationMoreVert18 = function SvgNavigationMoreVert18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9 6c.825 0 1.5-.675 1.5-1.5S9.825 3 9 3s-1.5.675-1.5 1.5S8.175 6 9 6zm0 1.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5S9.825 7.5 9 7.5zM9 12c-.825 0-1.5.675-1.5 1.5S8.175 15 9 15s1.5-.675 1.5-1.5S9.825 12 9 12z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$l = /*#__PURE__*/forwardRef(SvgNavigationMoreVert18);
+var ForwardRef$s = /*#__PURE__*/forwardRef(SvgNavigationMoreVert18);
 
-var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var _path$q;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgActionUpdate18 = function SvgActionUpdate18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M8.007 2A7.004 7.004 0 0 0 1 9a7.004 7.004 0 0 0 11.732 5.16l-1.497-1.347A4.999 4.999 0 0 1 3 9c0-2.763 2.237-5 5-5 2.762 0 5 2.237 5 5h2c0-3.864-3.129-7-6.993-7zM11 9l3 3 3-3h-6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$k = /*#__PURE__*/forwardRef(SvgActionUpdate18);
+var ForwardRef$r = /*#__PURE__*/forwardRef(SvgActionUpdate18);
 
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var _path$p;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgSaveOutline18 = function SvgSaveOutline18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
     d: "M12.75 2.25h-9a1.5 1.5 0 0 0-1.5 1.5v10.5a1.5 1.5 0 0 0 1.5 1.5h10.5c.825 0 1.5-.675 1.5-1.5v-9l-3-3zm1.5 12H3.75V3.75h8.377l2.123 2.122v8.378zM9 9a2.247 2.247 0 0 0-2.25 2.25A2.247 2.247 0 0 0 9 13.5a2.247 2.247 0 0 0 2.25-2.25A2.247 2.247 0 0 0 9 9zM4.5 4.5h6.75v3H4.5v-3z"
   })));
 };
-var ForwardRef$j = /*#__PURE__*/forwardRef(SvgSaveOutline18);
+var ForwardRef$q = /*#__PURE__*/forwardRef(SvgSaveOutline18);
 
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var _path$o;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgContentEditUndo18 = function SvgContentEditUndo18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M9.375 6A7.848 7.848 0 0 0 4.2 7.95l-2.7-2.7V12h6.75L5.535 9.285a5.965 5.965 0 0 1 3.84-1.41 6.009 6.009 0 0 1 5.7 4.125l1.777-.585C15.81 8.273 12.862 6 9.375 6z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$i = /*#__PURE__*/forwardRef(SvgContentEditUndo18);
+var ForwardRef$p = /*#__PURE__*/forwardRef(SvgContentEditUndo18);
 
-var _path$g;
-function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var _path$n;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgActionCopyContent18 = function SvgActionCopyContent18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M3 1h8v2H3v8H1V3a2 2 0 0 1 2-2zm2 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7zm10 8H7V7h8v8z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$h = /*#__PURE__*/forwardRef(SvgActionCopyContent18);
+var ForwardRef$o = /*#__PURE__*/forwardRef(SvgActionCopyContent18);
 
-var _path$f;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var _path$m;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgContentEdit18 = function SvgContentEdit18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M2.25 12.94v2.812h2.813l8.294-8.295-2.812-2.813L2.25 12.94zm13.283-7.658a.747.747 0 0 0 0-1.058L13.777 2.47a.747.747 0 0 0-1.058 0l-1.373 1.373 2.813 2.812 1.373-1.372z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$g = /*#__PURE__*/forwardRef(SvgContentEdit18);
+var ForwardRef$n = /*#__PURE__*/forwardRef(SvgContentEdit18);
 
-var _path$e;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var _path$l;
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgContentLink18 = function SvgContentLink18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7.943 10.057a.73.73 0 0 1 0 1.066.756.756 0 0 1-1.065 0 3.753 3.753 0 0 1 0-5.303l2.655-2.655a3.753 3.753 0 0 1 5.302 0 3.753 3.753 0 0 1 0 5.302l-1.118 1.118a5.18 5.18 0 0 0-.3-1.815l.353-.36a2.236 2.236 0 0 0 0-3.18 2.236 2.236 0 0 0-3.18 0L7.943 6.877a2.236 2.236 0 0 0 0 3.18zm2.114-3.18a.756.756 0 0 1 1.066 0 3.753 3.753 0 0 1 0 5.303l-2.655 2.655a3.753 3.753 0 0 1-5.303 0 3.753 3.753 0 0 1 0-5.303l1.118-1.117a5.25 5.25 0 0 0 .3 1.823l-.353.352a2.236 2.236 0 0 0 0 3.18 2.236 2.236 0 0 0 3.18 0l2.647-2.647a2.236 2.236 0 0 0 0-3.18.73.73 0 0 1 0-1.066z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$f = /*#__PURE__*/forwardRef(SvgContentLink18);
+var ForwardRef$m = /*#__PURE__*/forwardRef(SvgContentLink18);
 
-var _path$d;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var _path$k;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 var SvgActionDeleteforever18 = function SvgActionDeleteforever18(props, ref) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
     height: 18,
     viewBox: "0 0 18 18",
     ref: ref
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M7 2h4l1 1h3v2H3V3h3l1-1zM4 6h10v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zm6.76 8.1L9 12.36 7.24 14.1l-1.16-1.16 1.74-1.76-1.78-1.8 1.2-1.18L9 10l1.76-1.8 1.18 1.18-1.76 1.8 1.76 1.76-1.18 1.16z",
     clipRule: "evenodd"
   })));
 };
-var ForwardRef$e = /*#__PURE__*/forwardRef(SvgActionDeleteforever18);
+var ForwardRef$l = /*#__PURE__*/forwardRef(SvgActionDeleteforever18);
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = useUuiContext();
@@ -3539,30 +3044,30 @@ function PresetActionsDropdown(props) {
     ]);
     const renderBody = () => {
         const isReadonlyPreset = props.preset.isReadonly;
-        return (React__default.createElement(Panel, { shadow: true, cx: css$j.presetDropdownPanel },
+        return (React__default.createElement(Panel, { background: "surface", shadow: true, cx: css$w.presetDropdownPanel },
             props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset) && (React__default.createElement(React__default.Fragment, null,
                 !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-save-in-current` },
-                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$k, caption: "Save in current", onClick: saveInCurrentHandler }))),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$r, caption: "Save in current", onClick: saveInCurrentHandler }))),
                 React__default.createElement(FlexRow, { key: `${props.preset.id}-save-as-new` },
-                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$j, caption: "Save as new", onClick: props.addPreset })),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$q, caption: "Save as new", onClick: props.addPreset })),
                 React__default.createElement(FlexRow, { key: `${props.preset.id}-discard`, borderBottom: true },
-                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$i, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
+                    React__default.createElement(DropdownMenuButton, { icon: ForwardRef$p, caption: "Discard all changes", onClick: discardAllChangesHandler })))),
             props.preset.id === props.activePresetId && !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-rename` },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$g, caption: "Rename", onClick: props.renamePreset }))),
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$n, caption: "Rename", onClick: props.renamePreset }))),
             React__default.createElement(FlexRow, { key: `${props.preset.id}-duplicate` },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$h, caption: "Duplicate", onClick: duplicateHandler })),
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$o, caption: "Duplicate", onClick: duplicateHandler })),
             React__default.createElement(FlexRow, { borderBottom: true, key: `${props.preset.id}-copyLink` },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$f, caption: "Copy Link", onClick: copyUrlToClipboard })),
-            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$j.deleteRow },
-                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$e, caption: "Delete", cx: css$j.deleteButton, onClick: deleteHandler })))));
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$m, caption: "Copy Link", onClick: copyUrlToClipboard })),
+            !isReadonlyPreset && (React__default.createElement(FlexRow, { key: `${props.preset.id}-delete`, cx: css$w.deleteRow },
+                React__default.createElement(DropdownMenuButton, { icon: ForwardRef$l, caption: "Delete", cx: css$w.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = useCallback((dropdownProps) => {
-        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$j.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'default' }, dropdownProps, { icon: ForwardRef$l })));
+        return (React__default.createElement(IconButton, Object.assign({ cx: dropdownProps.isOpen && css$w.targetOpen, color: props.preset.id === props.activePresetId ? 'info' : 'neutral' }, dropdownProps, { icon: ForwardRef$s })));
     }, []);
     return (React__default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
 }
 
-var css$i = {"preset-input-cell":"YU5Qnp","preset-input":"myofec","presetInputCell":"YU5Qnp","presetInput":"myofec"};
+var css$v = {"preset-input-cell":"i2cLCZ","preset-input":"Qoz6fA","presetInputCell":"i2cLCZ","presetInput":"Qoz6fA"};
 
 function PresetInput(props) {
     var _a;
@@ -3583,34 +3088,703 @@ function PresetInput(props) {
         }
         props.onCancel();
     }, [presetCaption.length, props.onCancel]);
-    return (React__default.createElement(FlexCell, { cx: css$i.presetInputCell, minWidth: 180 },
-        React__default.createElement(TextInput, { cx: css$i.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+    return (React__default.createElement(FlexCell, { cx: css$v.presetInputCell, minWidth: 180 },
+        React__default.createElement(TextInput, { cx: css$v.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50 })));
+}
+
+var css$u = {"preset":"iEgtuN","activePreset":"-icK7o"};
+
+function Preset(props) {
+    const [isRenamePreset, setIsRenamePreset] = useState(false);
+    const choosePresetHandler = useCallback(() => props.choosePreset(props.preset), [props]);
+    const cancelRenamePreset = useCallback(() => {
+        setIsRenamePreset(() => false);
+    }, []);
+    const setPresetForRename = useCallback(() => {
+        if (!isRenamePreset) {
+            setIsRenamePreset(() => true);
+        }
+    }, []);
+    const handlePresetRename = useCallback((name) => {
+        const newPreset = Object.assign(Object.assign({}, props.preset), { name: name });
+        return props.updatePreset(newPreset);
+    }, [props.preset]);
+    const isPresetActive = props.activePresetId === props.preset.id;
+    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$u.preset, isPresetActive && css$u.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
+}
+
+var _path$j;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+var SvgContentPlusBold18 = function SvgContentPlusBold18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+    d: "M10.5 3h-3v4.5H3v3h4.5V15h3v-4.5H15v-3h-4.5V3z"
+  })));
+};
+var ForwardRef$k = /*#__PURE__*/forwardRef(SvgContentPlusBold18);
+
+function PresetsPanel(props) {
+    const [isAddingPreset, setIsAddingPreset] = useState(false);
+    const setAddingPreset = useCallback(() => {
+        setIsAddingPreset(true);
+    }, []);
+    const cancelAddingPreset = useCallback(() => {
+        setIsAddingPreset(false);
+    }, []);
+    const presetApi = __rest(props, ["presets"]);
+    const renderPreset = (preset) => {
+        return React__default.createElement(Preset, Object.assign({ key: preset.id, preset: preset, addPreset: setAddingPreset }, presetApi));
+    };
+    const renderAddPresetButton = useCallback(() => {
+        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$x.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$k, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+    }, [isAddingPreset]);
+    const onPresetDropdownSelect = (preset) => {
+        props.choosePreset(preset.preset);
+    };
+    const renderMoreButtonDropdown = (item, hiddenItems) => {
+        return (React__default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__default.createElement(FlexRow, null,
+                React__default.createElement("div", { className: css$x.divider }),
+                React__default.createElement(Button, Object.assign({ fill: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: (propsBody) => (React__default.createElement(DropdownContainer, Object.assign({ cx: cx$1(css$x.dropContainer), width: 230 }, propsBody),
+                React__default.createElement(ScrollBars$1, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$l, iconPosition: "right", cx: css$x.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+    };
+    const getPresetPriority = (preset, index) => {
+        return preset.id === props.activePresetId ? 100499 : 1000 - index;
+    };
+    const getPanelItems = () => {
+        return [
+            ...sortBy(props.presets, (i) => i.order).map((preset, index) => ({
+                id: preset.id.toString(),
+                render: () => renderPreset(preset),
+                priority: getPresetPriority(preset, index),
+                preset: preset,
+            })), {
+                id: 'collapsedContainer', render: renderMoreButtonDropdown, priority: 100501, collapsedContainer: true,
+            }, { id: 'addPreset', render: renderAddPresetButton, priority: 100501 },
+        ];
+    };
+    return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
+        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$x.presetsWrapper },
+            React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
+}
+
+const defaultPredicates = {
+    numeric: [
+        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
+    ],
+    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
+    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
+};
+
+const useColumnsWithFilters = (initialColumns, filters) => {
+    const makeFilterRenderCallback = useCallback((key) => function (filterLens, dropdownProps) {
+        const filter = filters.find((f) => f.columnKey === key);
+        if (!filter)
+            return null;
+        const props = filterLens.prop(filter.field).toProps();
+        return React__default.createElement(FilterItemBody, Object.assign({}, props, filter, dropdownProps));
+    }, [filters]);
+    const columns = useMemo(() => {
+        if (filters) {
+            const filterKeys = filters.map((f) => f.columnKey);
+            const newColumns = (initialColumns.map((column) => {
+                if (filterKeys.includes(column.key)) {
+                    return Object.assign(Object.assign({}, column), { renderFilter: makeFilterRenderCallback(column.key) });
+                }
+                else {
+                    return column;
+                }
+            }));
+            return newColumns;
+        }
+        return initialColumns;
+    }, [filters, initialColumns]);
+    return columns;
+};
+
+var css$t = {"line-height-12":"F6DzEg","line-height-18":"oyyqMR","line-height-24":"T0kOKr","line-height-30":"m6D9LL","font-size-10":"R34zuo","font-size-12":"cjNcwJ","font-size-14":"FeLlUx","font-size-16":"v-qPMi","font-size-18":"lHGTXJ","font-size-24":"yg1IyN","v-padding-2":"eUcf38","v-padding-3":"FoNV2-","v-padding-5":"FDfbov","v-padding-6":"l3AH2k","v-padding-8":"FUzQED","v-padding-9":"Frukj2","v-padding-11":"J-0fi2","v-padding-12":"zB2bEU","v-padding-14":"FgRxca","v-padding-15":"_3cHZb9","v-padding-17":"xeP2KJ","v-padding-18":"R1lerS","v-padding-23":"RvCm6l","v-padding-24":"lGKH-o","lineHeight12":"F6DzEg","lineHeight18":"oyyqMR","lineHeight24":"T0kOKr","lineHeight30":"m6D9LL","fontSize10":"R34zuo","fontSize12":"cjNcwJ","fontSize14":"FeLlUx","fontSize16":"v-qPMi","fontSize18":"lHGTXJ","fontSize24":"yg1IyN","vPadding2":"eUcf38","vPadding3":"FoNV2-","vPadding5":"FDfbov","vPadding6":"l3AH2k","vPadding8":"FUzQED","vPadding9":"Frukj2","vPadding11":"J-0fi2","vPadding12":"zB2bEU","vPadding14":"FgRxca","vPadding15":"_3cHZb9","vPadding17":"xeP2KJ","vPadding18":"R1lerS","vPadding23":"RvCm6l","vPadding24":"lGKH-o"};
+
+const defaultTextSettings = {
+    18: { lineHeight: 12, fontSize: 10 },
+    24: { lineHeight: 18, fontSize: 12 },
+    30: { lineHeight: 18, fontSize: 14 },
+    36: { lineHeight: 18, fontSize: 14 },
+    42: { lineHeight: 24, fontSize: 16 },
+    48: { lineHeight: 24, fontSize: 16 },
+    60: { lineHeight: 30, fontSize: 24 },
+};
+function getTextClasses(props, border) {
+    if (props.size === 'none') {
+        return [css$t['line-height-' + props.lineHeight], css$t['font-size-' + props.fontSize]];
+    }
+    const setting = {
+        size: props.size,
+        lineHeight: props.lineHeight || defaultTextSettings[props.size].lineHeight,
+        fontSize: props.fontSize || defaultTextSettings[props.size].fontSize,
+    };
+    const vPadding = (+setting.size - +setting.lineHeight - (border ? 2 : 0)) / 2;
+    return [
+        css$t['line-height-' + setting.lineHeight], css$t['font-size-' + setting.fontSize], css$t['v-padding-' + vPadding],
+    ];
+}
+
+var css$s = {"root":"_7BkxsH"};
+
+const allTextColors = ['info', 'warning', 'error', 'success', 'brand', 'primary', 'secondary', 'disabled', 'contrast', 'white'];
+function applyTextMods(mods) {
+    const textClasses = getTextClasses({
+        size: mods.size || '36',
+        lineHeight: mods.lineHeight,
+        fontSize: mods.fontSize,
+    }, false);
+    return [
+        css$s.root,
+        'uui-text',
+        `uui-font-${mods.font || 'regular'}`,
+        `uui-color-${mods.color || 'primary'}`,
+        'uui-typography',
+    ].concat(textClasses);
+}
+const Text = withMods(Text$1, applyTextMods);
+
+var css$r = {"root":"lzyNyI","loading-word":"BO3Hd0","animated-loading":"U2s9HK","skeleton_loading":"_1LyLbb","loadingWord":"BO3Hd0","animatedLoading":"U2s9HK","skeletonLoading":"_1LyLbb"};
+
+const TextPlaceholder = (props) => {
+    const pattern = '&nbsp;';
+    const text = React.useMemo(() => {
+        const words = [];
+        for (let i = 0; i < (props.wordsCount || 1); i++) {
+            const lengthWord = Math.floor(Math.random() * 10 + 8);
+            words.push(pattern.repeat(lengthWord));
+        }
+        return words;
+    }, [props.wordsCount]);
+    return (React.createElement("div", Object.assign({ "aria-busy": true, className: css$r.root }, props.rawProps), text.map((it, index) => (React.createElement("span", { key: index, className: cx([
+            props.cx, css$r.loadingWord, !props.isNotAnimated && css$r.animatedLoading,
+        ]), dangerouslySetInnerHTML: { __html: it } })))));
+};
+
+const RichTextView = withMods(uuiComponents.RichTextView, (mods) => ['uui-typography', `uui-typography-${mods.size || '14'}`]);
+
+var css$q = {"uui-typography":"s9JRZi","hero-header":"oD1hEz","promo-header":"ILNK4P","uui-critical":"GjsqYy","uui-success":"yHlmkp","uui-warning":"EoRjKL","uui-typography-size-12":"noq76D","uui-typography-size-14":"ShEQtL","uui-typography-size-16":"qugEHx","root":"ru-q-l","modal-blocker":"hoZlV4","animateModalBlocker":"JO6GO5","modal":"NEv2ZA","modal-footer":"opRfev","border-top":"F-lEan","modal-header":"qDHKrs","uuiTypography":"s9JRZi","heroHeader":"oD1hEz","promoHeader":"ILNK4P","uuiCritical":"GjsqYy","uuiSuccess":"yHlmkp","uuiWarning":"EoRjKL","uuiTypographySize12":"noq76D","uuiTypographySize14":"ShEQtL","uuiTypographySize16":"qugEHx","modalBlocker":"hoZlV4","modalFooter":"opRfev","borderTop":"F-lEan","modalHeader":"qDHKrs"};
+
+const ModalBlocker = withMods(ModalBlocker$1, () => [css$q.modalBlocker]);
+const ModalWindow = withMods(ModalWindow$1, () => [css$q.root, css$q.modal], (props) => ({
+    style: Object.assign(Object.assign({}, props.style), { width: `${props.width || 420}px`, height: props.height ? `${props.height}px` : 'auto' }),
+}));
+class ModalHeader extends React.Component {
+    render() {
+        return (React.createElement(FlexRow, { padding: this.props.padding || '24', vPadding: "12", borderBottom: this.props.borderBottom, cx: [css$q.root, css$q.modalHeader, this.props.cx], spacing: "12", rawProps: this.props.rawProps },
+            this.props.title && (React.createElement(Text, { size: "48", fontSize: "18", font: "semibold" }, this.props.title)),
+            this.props.children,
+            this.props.onClose && React.createElement(FlexSpacer, null),
+            this.props.onClose && (React.createElement(FlexCell, { shrink: 0, width: "auto" },
+                React.createElement(IconButton, { rawProps: { 'aria-label': 'Close modal' }, icon: ForwardRef$B, onClick: this.props.onClose })))));
+    }
+}
+class ModalFooter extends React.Component {
+    render() {
+        return (React.createElement(FlexRow, { spacing: this.props.spacing || '12', cx: [
+                css$q.root,
+                css$q.modalFooter,
+                this.props.borderTop && css$q.borderTop,
+                this.props.cx,
+            ], padding: this.props.padding || '24', vPadding: this.props.vPadding || '24', rawProps: this.props.rawProps }, this.props.children));
+    }
+}
+
+var _path$i;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+var SvgCross = function SvgCross(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$j({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  })));
+};
+var ForwardRef$j = /*#__PURE__*/forwardRef(SvgCross);
+
+var css$p = {"uui-typography":"q6NfQ0","hero-header":"R30pwx","promo-header":"_1B-M3h","uui-critical":"v6t145","uui-success":"knH0tP","uui-warning":"VHUwhL","uui-typography-size-12":"_6svGWr","uui-typography-size-14":"A-NBUo","uui-typography-size-16":"Uza-pT","root":"DslK6e","icon-wrapper":"FI9e4-","action-wrapper":"WtuWmc","action-link":"KeamRH","close-icon":"tgWnQV","main-path":"UZlj7m","content":"IHjzKa","clear-button":"SjmoUk","close-wrapper":"ItriLv","uuiTypography":"q6NfQ0","heroHeader":"R30pwx","promoHeader":"_1B-M3h","uuiCritical":"v6t145","uuiSuccess":"knH0tP","uuiWarning":"VHUwhL","uuiTypographySize12":"_6svGWr","uuiTypographySize14":"A-NBUo","uuiTypographySize16":"Uza-pT","iconWrapper":"FI9e4-","actionWrapper":"WtuWmc","actionLink":"KeamRH","closeIcon":"tgWnQV","mainPath":"UZlj7m","clearButton":"SjmoUk","closeWrapper":"ItriLv"};
+
+const NotificationCard = React__default.forwardRef((props, ref) => {
+    const notificationCardNode = React__default.useRef(null);
+    React__default.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
+    React__default.useLayoutEffect(() => {
+        var _a, _b;
+        (_a = notificationCardNode.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', props.clearTimer);
+        (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', props.refreshTimer);
+        return () => {
+            var _a, _b;
+            (_a = notificationCardNode.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', props.clearTimer);
+            (_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
+        };
+    }, []);
+    return (React__default.createElement("div", Object.assign({ role: "alert", className: cx('uui-notification_card', props.color && `uui-color-${props.color}`, css$p.root, props.cx), ref: notificationCardNode }, props.rawProps),
+        React__default.createElement("div", { className: css$p.mainPath },
+            props.icon && (React__default.createElement("div", { className: css$p.iconWrapper },
+                React__default.createElement(IconContainer, { icon: props.icon, cx: css$p.actionIcon }))),
+            React__default.createElement("div", { className: css$p.content },
+                props.children,
+                props.actions && (React__default.createElement("div", { className: css$p.actionWrapper }, props.actions.map((action) => (React__default.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$p.actionLink, size: "36", rawProps: action.rawProps })))))),
+            props.onClose && (React__default.createElement("div", { className: css$p.closeWrapper },
+                React__default.createElement(IconButton, { icon: ForwardRef$j, color: "neutral", onClick: props.onClose, cx: css$p.closeIcon }))))));
+});
+const WarningNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$E, color: "warning" }, props, { ref: ref, cx: props.cx }))));
+const SuccessNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$F, color: "success" }, props, { ref: ref, cx: props.cx }))));
+const HintNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$C, color: "info" }, props, { ref: ref, cx: props.cx }))));
+const ErrorNotification = React__default.forwardRef((props, ref) => (React__default.createElement(NotificationCard, Object.assign({ icon: ForwardRef$D, color: "error" }, props, { ref: ref, cx: props.cx }))));
+class ClearNotification extends React__default.Component {
+    render() {
+        return (React__default.createElement("div", { className: cx(css$p.notificationWrapper, css$p.clearButton) },
+            React__default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => this.context.uuiNotifications.clearAll() })));
+    }
+}
+ClearNotification.contextType = UuiContext;
+
+class ConfirmationModal extends React.Component {
+    render() {
+        let bodyContent;
+        if (this.props.bodyContent) {
+            bodyContent = React.createElement(Panel, { background: "surface", margin: "24" }, this.props.bodyContent);
+        }
+        return (React.createElement(ModalBlocker, Object.assign({}, this.props),
+            React.createElement(ModalWindow, { width: 420 },
+                React.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
+                React.createElement(ScrollBars, null, bodyContent),
+                React.createElement(ModalFooter, null,
+                    React.createElement(FlexSpacer, null),
+                    this.props.hideCancelButton || (React.createElement(Button, { caption: i18n.form.modals.discardButton, onClick: () => this.props.success(false), fill: "outline", color: "secondary" })),
+                    React.createElement(Button, { caption: i18n.form.modals.saveButton, onClick: () => this.props.success(true), color: "accent" })))));
+    }
 }
 
-var css$h = {"preset":"O3CRt6","activePreset":"PJKTaV"};
+const defaultMode = EditMode.FORM;
+class DatePicker extends BaseDatePicker {
+    constructor() {
+        super(...arguments);
+        this.renderInput = (props) => {
+            var _a;
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    devLogger.warnAboutDeprecatedPropValue({
+                        component: 'DatePicker',
+                        propName: 'size',
+                        propValue: this.props.size,
+                        propValueUseInstead: '42',
+                        condition: () => ['48'].indexOf(this.props.size) !== -1,
+                    });
+                }
+            }
+            return (React__default.createElement(TextInput, Object.assign({}, props, { onClick: null, isDropdown: false, cx: cx$1(this.props.inputCx, this.state.isOpen && uuiMod.focus), icon: this.props.mode !== EditMode.CELL && systemIcons[this.props.size || '36'].calendar, iconPosition: this.props.iconPosition || 'left', placeholder: this.props.placeholder ? this.props.placeholder : this.getFormat(), size: this.props.size || '36', value: this.state.inputValue, onValueChange: this.handleInputChange, onCancel: this.props.disableClear || !this.state.inputValue ? undefined : this.handleCancel, isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, tabIndex: this.props.isReadonly || this.props.isDisabled ? -1 : 0, onFocus: this.handleFocus, onBlur: this.handleBlur, mode: this.props.mode || defaultMode, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
+        };
+    }
+    renderBody(props) {
+        var _a, _b, _c;
+        return (React__default.createElement(DropdownContainer, Object.assign({}, props, { focusLock: false }),
+            React__default.createElement(DatePickerBody, { cx: cx$1(this.props.bodyCx), filter: this.props.filter, value: this.getValue(), setSelectedDate: this.setSelectedDate, setDisplayedDateAndView: this.setDisplayedDateAndView, changeIsOpen: this.onToggle, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }), (_c = (_b = this.props).renderFooter) === null || _c === void 0 ? void 0 :
+            _c.call(_b)));
+    }
+}
+
+var css$o = {"uui-typography":"cmyYUq","hero-header":"XD2Lnr","promo-header":"rAU9RV","uui-critical":"SN-nbq","uui-success":"-lxNp1","uui-warning":"mGza-n","uui-typography-size-12":"_4ktGBT","uui-typography-size-14":"TR7S7Y","uui-typography-size-16":"rFGjYq","root":"fwZgDA","uuiTypography":"cmyYUq","heroHeader":"XD2Lnr","promoHeader":"rAU9RV","uuiCritical":"SN-nbq","uuiSuccess":"-lxNp1","uuiWarning":"mGza-n","uuiTypographySize12":"_4ktGBT","uuiTypographySize14":"TR7S7Y","uuiTypographySize16":"rFGjYq"};
+
+function applyCalendarPresetsMods() {
+    return [css$o.root];
+}
+const CalendarPresets = withMods(CalendarPresets$1, applyCalendarPresetsMods, () => ({}));
+
+var css$n = {"uui-typography":"MsL1jX","hero-header":"oRs3KW","promo-header":"Llb9mG","uui-critical":"FX8dEU","uui-success":"_4wS15D","uui-warning":"_4XKWle","uui-typography-size-12":"lLZgGK","uui-typography-size-14":"RD6Dtj","uui-typography-size-16":"OyoFet","root":"fI3Pfl","container":"_1l-DYR","day-selection":"UGLsuF","from-picker":"aVMvjD","to-picker":"_0pSvSV","bodes-wrapper":"CbyPVT","blocker":"uv9Awt","uuiTypography":"MsL1jX","heroHeader":"oRs3KW","promoHeader":"Llb9mG","uuiCritical":"FX8dEU","uuiSuccess":"_4wS15D","uuiWarning":"_4XKWle","uuiTypographySize12":"lLZgGK","uuiTypographySize14":"RD6Dtj","uuiTypographySize16":"OyoFet","daySelection":"UGLsuF","fromPicker":"aVMvjD","toPicker":"_0pSvSV","bodesWrapper":"CbyPVT"};
+
+dayjs.extend(isoWeek);
+function weekCount(displayedDate) {
+    let days = [];
+    const dayOfLastWeekInPrevMonth = displayedDate.subtract(1, 'month').endOf('month').day();
+    days = days.concat(new Array(dayOfLastWeekInPrevMonth).fill(undefined));
+    // get days of current month
+    days = days.concat(new Array(displayedDate.endOf('month').date()).fill(undefined));
+    return arrayToMatrix(days, 7).length;
+}
+const uuiRangeDatePickerBody = {
+    inRange: 'uui-range-datepicker-in-range',
+    firstDayInRangeWrapper: 'uui-range-datepicker-first-day-in-range-wrapper',
+    lastDayInRangeWrapper: 'uui-range-datepicker-last-day-in-range-wrapper',
+    separator: 'uui-range-datepicker-separator',
+};
+const rangeDatePickerPresets = {
+    today: {
+        name: 'Today',
+        getRange: () => ({ from: dayjs().toString(), to: undefined, order: 1 }),
+    },
+    thisWeek: {
+        name: 'This Week',
+        getRange: () => ({ from: dayjs().startOf('isoWeek').toString(), to: dayjs().endOf('isoWeek').toString(), order: 2 }),
+    },
+    lastWeek: {
+        name: 'Last Week',
+        getRange: () => ({ from: dayjs().startOf('isoWeek').subtract(1, 'week').toString(), to: dayjs().endOf('isoWeek').subtract(1, 'week').toString(), order: 3 }),
+    },
+    thisMonth: {
+        name: 'This Month',
+        getRange: () => ({ from: dayjs().startOf('month').toString(), to: dayjs().endOf('month').toString(), order: 4 }),
+    },
+    lastMonth: {
+        name: 'Last Month',
+        getRange: () => ({ from: dayjs().startOf('month').subtract(1, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    last3Month: {
+        name: 'Last 3 Months',
+        getRange: () => ({ from: dayjs().startOf('month').subtract(3, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    thisYear: {
+        name: 'This Year',
+        getRange: () => ({ from: dayjs().startOf('year').toString(), to: dayjs().endOf('year').toString(), order: 7 }),
+    },
+    lastYear: {
+        name: 'Last Year',
+        getRange: () => ({ from: dayjs().startOf('year').subtract(1, 'year').toString(), to: dayjs().subtract(1, 'year').endOf('year').toString(), order: 8 }),
+    },
+};
+class RangeDatePickerBody extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            activePart: null,
+        };
+        this.getDayCX = (day) => {
+            var _a, _b;
+            const dayValue = day.valueOf();
+            const fromValue = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from) ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
+            const toValue = ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.selectedDate.to) ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
+            const inRange = dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue && fromValue && toValue;
+            const isFirst = dayValue === fromValue;
+            const isLast = dayValue === toValue;
+            return [
+                inRange && uuiRangeDatePickerBody.inRange,
+                isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+                !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+                isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+                !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+                (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay,
+            ];
+        };
+        this.getFromValue = () => {
+            var _a;
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION', selectedDate: (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.selectedDate.from });
+        };
+        this.getToValue = () => {
+            if (!this.props.value)
+                return;
+            return Object.assign(Object.assign({}, this.props.value), { view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION', displayedDate: this.props.value.displayedDate.add(1, 'month'), selectedDate: this.props.value.selectedDate.to });
+        };
+        this.renderPresets = () => {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: uuiRangeDatePickerBody.separator }),
+                React.createElement(CalendarPresets, { forwardedRef: this.props.forwardedRef, onPresetSet: (presetVal) => {
+                        this.props.onValueChange({
+                            view: 'DAY_SELECTION',
+                            selectedDate: { from: dayjs(presetVal.from).format(valueFormat), to: dayjs(presetVal.to).format(valueFormat) },
+                            displayedDate: dayjs(presetVal.from),
+                        });
+                        this.props.changeIsOpen(false);
+                    }, presets: this.props.presets })));
+        };
+        this.renderDatePicker = () => {
+            var _a, _b;
+            return (React.createElement(FlexRow, { cx: [((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.view) === 'DAY_SELECTION' && css$n.daySelection, css$n.container], alignItems: "top" },
+                React.createElement(FlexCell, { width: "auto" },
+                    React.createElement(FlexRow, null,
+                        React.createElement(FlexRow, { cx: css$n.bodesWrapper, alignItems: "top" },
+                            React.createElement(DatePickerBody, { cx: cx$1(css$n.fromPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getFromValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                            React.createElement(DatePickerBody, { cx: cx$1(css$n.toPicker), setSelectedDate: (nv) => this.setSelectedDate(nv), value: this.getToValue(), setDisplayedDateAndView: (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to'), getDayCX: this.getDayCX, filter: this.props.filter, renderDay: this.props.renderDay, isHoliday: this.props.isHoliday }),
+                            ((_b = this.props.value) === null || _b === void 0 ? void 0 : _b.view) !== 'DAY_SELECTION' && (React.createElement("div", { style: {
+                                    left: this.state.activePart === 'from' && '50%',
+                                    right: this.state.activePart === 'to' && '50%',
+                                }, className: css$n.blocker }))),
+                        this.props.presets && this.renderPresets()),
+                    this.props.renderFooter && this.props.renderFooter())));
+        };
+    }
+    getRange(selectedDate) {
+        const newRange = { from: null, to: null };
+        const currentRange = this.props.value.selectedDate;
+        if (!this.props.filter || this.props.filter(dayjs(selectedDate))) {
+            if (this.props.focusPart === 'from') {
+                if (dayjs(selectedDate).valueOf() <= dayjs(currentRange.to).valueOf()) {
+                    newRange.from = selectedDate;
+                    newRange.to = currentRange.to;
+                }
+                else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+            if (this.props.focusPart === 'to') {
+                if (!currentRange.from) {
+                    newRange.to = selectedDate;
+                }
+                else if (dayjs(selectedDate).valueOf() >= dayjs(currentRange.from).valueOf()) {
+                    newRange.from = currentRange.from;
+                    newRange.to = selectedDate;
+                }
+                else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+        }
+        return newRange;
+    }
+    setSelectedDate(selectedDate) {
+        const range = this.getRange(selectedDate);
+        this.props.onValueChange(Object.assign(Object.assign({}, this.props.value), { selectedDate: range }));
+        if (range.from && range.to && this.props.focusPart === 'to') {
+            this.props.changeIsOpen(false);
+        }
+    }
+    setDisplayedDateAndView(displayedDate, view, part) {
+        this.setState({ activePart: part });
+        this.props.onValueChange({
+            selectedDate: this.props.value.selectedDate,
+            displayedDate: part === 'from' ? displayedDate : displayedDate.subtract(1, 'month'),
+            view: view,
+        });
+    }
+    render() {
+        return (React.createElement("div", Object.assign({ className: cx$1(css$n.root, uuiDatePickerBodyBase.container, this.props.cx) }, this.props.rawProps), this.renderDatePicker()));
+    }
+}
+
+var css$m = {"uui-typography":"enP0Cu","hero-header":"CT36Eg","promo-header":"jduQns","uui-critical":"_0IKd4B","uui-success":"BmjzdB","uui-warning":"gl4w2P","uui-typography-size-12":"ErDlAZ","uui-typography-size-14":"WxZvXh","uui-typography-size-16":"_8AHOcE","dropdown-container":"BoyMPe","date-input":"B1GGdM","size-24":"PFj06b","size-30":"ml9Nfj","size-36":"MA2E8c","size-42":"c-62ZO","size-48":"j8NkyE","date-input-group":"_62pONb","separator":"gEjJ8b","mode-form":"cFcYXw","mode-cell":"_2KDLNQ","uuiTypography":"enP0Cu","heroHeader":"CT36Eg","promoHeader":"jduQns","uuiCritical":"_0IKd4B","uuiSuccess":"BmjzdB","uuiWarning":"gl4w2P","uuiTypographySize12":"ErDlAZ","uuiTypographySize14":"WxZvXh","uuiTypographySize16":"_8AHOcE","dropdownContainer":"BoyMPe","dateInput":"B1GGdM","size24":"PFj06b","size30":"ml9Nfj","size36":"MA2E8c","size42":"c-62ZO","size48":"j8NkyE","dateInputGroup":"_62pONb","modeForm":"cFcYXw","modeCell":"_2KDLNQ"};
+
+const defaultValue = { from: null, to: null };
+class RangeDatePicker extends BaseRangeDatePicker {
+    constructor() {
+        super(...arguments);
+        this.renderInput = (props) => {
+            var _a, _b;
+            if (process.env.NODE_ENV !== "production") {
+                if (this.props.size === '48') {
+                    devLogger.warnAboutDeprecatedPropValue({
+                        component: 'RangeDatePicker',
+                        propName: 'size',
+                        propValue: this.props.size,
+                        propValueUseInstead: '42',
+                        condition: () => ['48'].indexOf(this.props.size) !== -1,
+                    });
+                }
+            }
+            return (React.createElement("div", { className: cx(this.props.inputCx, css$m.dateInputGroup, this.props.isDisabled && uuiMod.disabled, this.props.isReadonly && uuiMod.readonly, this.props.isInvalid && uuiMod.invalid, this.state.inFocus && uuiMod.focus), onClick: !this.props.isDisabled && props.onClick, onBlur: this.handleWrapperBlur, ref: props.ref },
+                React.createElement(TextInput, { icon: systemIcons[this.props.size || '36'].calendar, cx: cx(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'from' && uuiMod.focus), size: this.props.size || '36', placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: this.state.inputValue.from, onValueChange: this.getChangeHandler('from'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (event) => this.handleFocus(event, 'from'), onBlur: (event) => this.handleBlur(event, 'from'), isDropdown: false, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.from }),
+                React.createElement("div", { className: css$m.separator }),
+                React.createElement(TextInput, { cx: cx(css$m.dateInput, css$m['size-' + (this.props.size || 36)], this.state.inFocus === 'to' && uuiMod.focus), placeholder: this.props.getPlaceholder ? this.props.getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: this.props.size || '36', value: this.state.inputValue.to, onCancel: this.props.disableClear ? null : this.state.inputValue.from && this.state.inputValue.to && this.handleCancel, onValueChange: this.getChangeHandler('to'), isInvalid: this.props.isInvalid, isDisabled: this.props.isDisabled, isReadonly: this.props.isReadonly, onFocus: (e) => this.handleFocus(e, 'to'), onBlur: (e) => this.handleBlur(e, 'to'), isDropdown: false, rawProps: (_b = this.props.rawProps) === null || _b === void 0 ? void 0 : _b.to })));
+        };
+    }
+    renderBody(props) {
+        var _a;
+        return (React.createElement(DropdownContainer, Object.assign({}, props, { cx: cx(css$m.dropdownContainer), focusLock: false }),
+            React.createElement(FlexRow, null,
+                React.createElement(RangeDatePickerBody, { cx: cx(this.props.bodyCx), value: this.getValue(), onValueChange: this.onRangeChange, filter: this.props.filter, changeIsOpen: this.toggleOpening, presets: this.props.presets, focusPart: this.state.inFocus, renderDay: this.props.renderDay, renderFooter: this.props.renderFooter && (() => this.props.renderFooter(this.props.value || defaultValue)), isHoliday: this.props.isHoliday, rawProps: (_a = this.props.rawProps) === null || _a === void 0 ? void 0 : _a.body }))));
+    }
+}
+
+var css$l = {"root":"_3p1pGk","blocker":"w74-e3","marker":"_5CuHoQ","top":"yfvdhy","bottom":"pBeRuf","left":"kjzxkZ","right":"N63-QQ","inside":"BE8g8-"};
+
+function DropMarker(props) {
+    return props.isDndInProgress
+        ? (React.createElement(React.Fragment, null,
+            props.enableBlocker && React.createElement("div", { className: css$l.blocker }),
+            React.createElement("div", { className: cx([
+                    css$l.root,
+                    css$l.marker,
+                    css$l[props.position],
+                    props === null || props === void 0 ? void 0 : props.cx,
+                ]) })))
+        : null;
+}
+
+var css$k = {"uui-typography":"-h6Hna","hero-header":"iEd6Y5","promo-header":"_36ljoJ","uui-critical":"_9L-kcw","uui-success":"wIowgP","uui-warning":"_0QwH9R","uui-typography-size-12":"tAA0m4","uui-typography-size-14":"e98mVu","uui-typography-size-16":"K1qkJB","root":"_8fEVsn","size-24":"teJnoy","size-30":"i6nx0c","size-36":"XbBtbP","size-48":"s70bhL","size-60":"-IibNH","uuiTypography":"-h6Hna","heroHeader":"iEd6Y5","promoHeader":"_36ljoJ","uuiCritical":"_9L-kcw","uuiSuccess":"wIowgP","uuiWarning":"_0QwH9R","uuiTypographySize12":"tAA0m4","uuiTypographySize14":"e98mVu","uuiTypographySize16":"K1qkJB","size24":"teJnoy","size30":"i6nx0c","size36":"XbBtbP","size48":"s70bhL","size60":"-IibNH"};
+
+// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
+// As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
+const renderCell = (props) => {
+    const mods = props.rowProps;
+    return React.createElement(DataTableCell, Object.assign({ size: mods.size }, props));
+};
+const renderDropMarkers = (props) => React.createElement(DropMarker, Object.assign({}, props, { enableBlocker: true }));
+const propsMods = { renderCell, renderDropMarkers };
+const DataTableRow = withMods(DataTableRow$1, ({ borderBottom = true, size }) => {
+    return [
+        css$k.root, 'uui-dt-vars', borderBottom && 'uui-dt-row-border', css$k['size-' + (size || '36')],
+    ];
+}, () => propsMods);
+
+var css$j = {"uui-typography":"ufHP0i","hero-header":"DP1cuv","promo-header":"OLk4Zj","uui-critical":"BQIiXc","uui-success":"Pfc3VS","uui-warning":"tfNe1I","uui-typography-size-12":"vVDxew","uui-typography-size-14":"aqr7aT","uui-typography-size-16":"_4KI3PY","sorting-panel-container":"l-7WbX","sort-active":"u-4ib4","uuiTypography":"ufHP0i","heroHeader":"DP1cuv","promoHeader":"OLk4Zj","uuiCritical":"BQIiXc","uuiSuccess":"Pfc3VS","uuiWarning":"tfNe1I","uuiTypographySize12":"vVDxew","uuiTypographySize14":"aqr7aT","uuiTypographySize16":"_4KI3PY","sortingPanelContainer":"l-7WbX","sortActive":"u-4ib4"};
+
+var _path$h;
+function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+var SvgTableSortAsc18 = function SvgTableSortAsc18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 6v10H8V6H5l4-4 4 4h-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$i = /*#__PURE__*/forwardRef(SvgTableSortAsc18);
+
+var _path$g;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+var SvgTableSortDesc18 = function SvgTableSortDesc18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 12V2H8v10H5l4 4 4-4h-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$h = /*#__PURE__*/forwardRef(SvgTableSortDesc18);
+
+const SortingPanelImpl = ({ sortDirection, onSort }) => {
+    const sortAsc = useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
+    const sortDesc = useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
+    return (React__default.createElement(FlexCell, { cx: css$j.sortingPanelContainer },
+        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'asc', caption: i18n.pickerFilterHeader.sortAscending, icon: ForwardRef$i, onClick: sortAsc }),
+        React__default.createElement(DropdownMenuButton, { isActive: sortDirection === 'desc', caption: i18n.pickerFilterHeader.sortDescending, icon: ForwardRef$h, onClick: sortDesc })));
+};
+const SortingPanel = React__default.memo(SortingPanelImpl);
+
+const ColumnHeaderDropdownImpl = (props) => {
+    const popperModifiers = useMemo(() => [
+        {
+            name: 'offset',
+            options: { offset: [0, 1] },
+        }, mobilePopperModifier,
+    ], []);
+    const closeDropdown = useCallback(() => props.onOpenChange(false), [props.onOpenChange]);
+    return (React__default.createElement(Dropdown$1, { renderTarget: props.renderTarget, renderBody: (dropdownProps) => (React__default.createElement(MobileDropdownWrapper, { width: 280, title: props.title, onClose: closeDropdown },
+            props.isSortable && React__default.createElement(SortingPanel, { sortDirection: props.sortDirection, onSort: props.onSort }),
+            props.renderFilter(dropdownProps))), modifiers: popperModifiers, value: props.isOpen, onValueChange: props.onOpenChange }));
+};
+const ColumnHeaderDropdown = React__default.memo(ColumnHeaderDropdownImpl);
+
+var css$i = {"uui-typography":"h9Elw1","hero-header":"KuX3vz","promo-header":"XChwxb","uui-critical":"IDZokF","uui-success":"UF-AwT","uui-warning":"PoSu5h","uui-typography-size-12":"zK0gQN","uui-typography-size-14":"_82INF7","uui-typography-size-16":"YngUrS","cell":"_-5iF8R","sort-icon":"CyYdV3","dropdown-icon":"Mq-Zhu","infoIcon":"YBVXK0","resizable":"w2rhDv","size-24":"jb9MMP","size-30":"lzFws9","size-36":"doj-5E","size-42":"FBCuvZ","size-48":"Pk-wsu","padding-left-24":"_7l09qi","padding-right-24":"zuMbo0","caption":"ptt-nB","checkbox":"CrPhzZ","icon":"dhzdx-","icon-cell":"CG26Hu","align-right":"nawuBl","align-center":"G27nhA","tooltip-wrapper":"YrRtRq","cell-tooltip":"OSwCmB","upper-case":"euPtPs","font-size-14":"KJM13X","resize-mark":"CJhltt","draggable":"WeRhp1","ghost":"MGoNSs","is-dragged-out":"shKdYt","dnd-marker-left":"ygvd8C","dnd-marker-right":"VEr0Hf","cell-tooltip-wrapper":"NvWccK","cell-tooltip-text":"_8MIDUh","uuiTypography":"h9Elw1","heroHeader":"KuX3vz","promoHeader":"XChwxb","uuiCritical":"IDZokF","uuiSuccess":"UF-AwT","uuiWarning":"PoSu5h","uuiTypographySize12":"zK0gQN","uuiTypographySize14":"_82INF7","uuiTypographySize16":"YngUrS","sortIcon":"CyYdV3","dropdownIcon":"Mq-Zhu","size24":"jb9MMP","size30":"lzFws9","size36":"doj-5E","size42":"FBCuvZ","size48":"Pk-wsu","paddingLeft24":"_7l09qi","paddingRight24":"zuMbo0","iconCell":"CG26Hu","alignRight":"nawuBl","alignCenter":"G27nhA","tooltipWrapper":"YrRtRq","cellTooltip":"OSwCmB","upperCase":"euPtPs","fontSize14":"KJM13X","resizeMark":"CJhltt","isDraggedOut":"shKdYt","dndMarkerLeft":"ygvd8C","dndMarkerRight":"VEr0Hf","cellTooltipWrapper":"NvWccK","cellTooltipText":"_8MIDUh"};
+
+var _path$f;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+var SvgTableSwap18 = function SvgTableSwap18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M6 1 2 5h3v7h2V5h3L6 1zm7 12V6h-2v7H8l4 4 4-4h-3z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$g = /*#__PURE__*/forwardRef(SvgTableSwap18);
+
+var _path$e;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+var SvgContentFiltration18 = function SvgContentFiltration18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m8 14 2 2v-5H8v3zM2 3v2h14V3H2zm6 8h2l6-6H2l6 6z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$f = /*#__PURE__*/forwardRef(SvgContentFiltration18);
 
-function Preset(props) {
-    const [isRenamePreset, setIsRenamePreset] = useState(false);
-    const choosePresetHandler = useCallback(() => props.choosePreset(props.preset), [props]);
-    const cancelRenamePreset = useCallback(() => {
-        setIsRenamePreset(() => false);
-    }, []);
-    const setPresetForRename = useCallback(() => {
-        if (!isRenamePreset) {
-            setIsRenamePreset(() => true);
-        }
-    }, []);
-    const handlePresetRename = useCallback((name) => {
-        const newPreset = Object.assign(Object.assign({}, props.preset), { name: name });
-        return props.updatePreset(newPreset);
-    }, [props.preset]);
-    const isPresetActive = props.activePresetId === props.preset.id;
-    return (React__default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$h.preset, isPresetActive && css$h.activePreset], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: () => React__default.createElement(PresetActionsDropdown, Object.assign({ renamePreset: setPresetForRename }, props)), iconPosition: "right", isLinkActive: isPresetActive }))));
+var _path$d;
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+var SvgNavigationChevronUp18 = function SvgNavigationChevronUp18(props, ref) {
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 18,
+    height: 18,
+    viewBox: "0 0 18 18",
+    ref: ref
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m9 6-4.5 4.5 1.058 1.057L9 8.123l3.443 3.434L13.5 10.5 9 6z",
+    clipRule: "evenodd"
+  })));
+};
+var ForwardRef$e = /*#__PURE__*/forwardRef(SvgNavigationChevronUp18);
+
+class DataTableHeaderCell extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            isDropdownOpen: null,
+        };
+        this.getTextStyle = () => {
+            if (this.props.textCase === 'upper')
+                return css$i.upperCase;
+            return css$i['font-size-14'];
+        };
+        this.getTooltipContent = () => (React.createElement("div", { className: css$i.cellTooltipWrapper },
+            React.createElement(Text, { fontSize: "14", color: "contrast", font: "semibold", cx: css$i.cellTooltipText }, this.props.column.caption),
+            this.props.column.info && React.createElement(Text, { fontSize: "12", color: "contrast", cx: css$i.cellTooltipText }, this.props.column.info)));
+        this.getColumnCaption = () => {
+            return (React.createElement("div", { className: css$i.tooltipWrapper },
+                React.createElement("div", { className: cx$1(css$i.iconCell, css$i['align-' + this.props.column.textAlign], uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
+                    React.createElement(Tooltip, { placement: "top", color: "contrast", renderContent: this.getTooltipContent, cx: css$i.cellTooltip, openDelay: 600 },
+                        React.createElement(Text, { key: "text", lineHeight: "30", fontSize: "14", size: "30", cx: cx$1(css$i.caption, this.getTextStyle(), uuiDataTableHeaderCell.uuiTableHeaderCaption) }, this.props.column.caption)),
+                    this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React.createElement(IconButton, { key: "sort", cx: cx$1(css$i.icon, css$i.sortIcon, this.props.sortDirection && css$i.sortIconActive, uuiDataTableHeaderCell.uuiTableHeaderSortIcon), color: this.props.sortDirection ? 'neutral' : 'secondary', icon: this.props.sortDirection === 'desc' ? ForwardRef$h : this.props.sortDirection === 'asc' ? ForwardRef$i : ForwardRef$g })),
+                    this.props.isFilterActive && (React.createElement(IconButton, { key: "filter", cx: cx$1(css$i.icon, !this.props.sortDirection && css$i.filterIcon, uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: ForwardRef$f })),
+                    this.props.column.renderFilter && (React.createElement(IconButton, { key: "dropdown", cx: cx$1(css$i.icon, css$i.dropdownIcon, uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), color: "secondary", icon: this.state.isDropdownOpen ? ForwardRef$e : ForwardRef$z })))));
+        };
+        this.renderHeaderCheckbox = () => this.props.selectAll
+            && this.props.isFirstColumn && (React.createElement(Checkbox, Object.assign({ size: +this.props.size < 36 ? '12' : '18' }, this.props.selectAll, { cx: cx$1(css$i.checkbox, uuiDataTableHeaderCell.uuiTableHeaderCheckbox) })));
+        this.renderResizeMark = (props) => React.createElement("div", { onMouseDown: props.onResizeStart, className: cx$1(css$i.resizeMark, uuiMarkers.draggable) });
+        this.renderCellContent = (props, dropdownProps) => (React.createElement(FlexCell, Object.assign({}, this.props.column, { minWidth: this.props.column.width, ref: (ref) => {
+                var _a;
+                props.ref(ref);
+                (_a = dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.ref) === null || _a === void 0 ? void 0 : _a.call(dropdownProps, ref);
+            }, cx: cx$1(uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiMarkers.clickable, css$i.cell, css$i['size-' + (this.props.size || '36')], this.props.isFirstColumn && css$i['padding-left-24'], this.props.isLastColumn && css$i['padding-right-24'], this.props.column.cx, this.props.allowColumnsResizing && css$i.resizable, props.isDraggable && css$i.draggable, props.isDragGhost && css$i.ghost, props.isDraggedOut && css$i.isDraggedOut, props.isDndInProgress && css$i['dnd-marker-' + props.position]), onClick: !this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick, rawProps: Object.assign({ role: 'columnheader', 'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none' }, props.eventHandlers) }),
+            this.renderHeaderCheckbox(),
+            this.getColumnCaption(),
+            this.props.allowColumnsResizing && this.renderResizeMark(props)));
+        this.renderCellWithFilter = (props) => (React.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: (dropdownProps) => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: (isDropdownOpen) => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
+    }
+    render() {
+        return React.createElement(DataTableHeaderCell$1, Object.assign({}, this.props, { cx: "uui-dt-vars", renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
+    }
 }
 
+var css$h = {"uui-typography":"GyYgOR","hero-header":"a0rlKR","promo-header":"VtFMPm","uui-critical":"dRm-EC","uui-success":"qpwJS-","uui-warning":"ommFd7","uui-typography-size-12":"wYL07A","uui-typography-size-14":"g1BgKe","uui-typography-size-16":"AX5qk6","header-cell":"PRi7vN","config-icon":"Sit3CV","uuiTypography":"GyYgOR","heroHeader":"a0rlKR","promoHeader":"VtFMPm","uuiCritical":"dRm-EC","uuiSuccess":"qpwJS-","uuiWarning":"ommFd7","uuiTypographySize12":"wYL07A","uuiTypographySize14":"g1BgKe","uuiTypographySize16":"AX5qk6","headerCell":"PRi7vN","configIcon":"Sit3CV"};
+
 var _path$c;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
-var SvgContentPlusBold18 = function SvgContentPlusBold18(props, ref) {
+var SvgActionSettings18 = function SvgActionSettings18(props, ref) {
   return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 18,
@@ -3618,90 +3792,19 @@ var SvgContentPlusBold18 = function SvgContentPlusBold18(props, ref) {
     viewBox: "0 0 18 18",
     ref: ref
   }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
-    d: "M10.5 3h-3v4.5H3v3h4.5V15h3v-4.5H15v-3h-4.5V3z"
+    fillRule: "evenodd",
+    d: "M3 9.093a6.083 6.083 0 0 1 0-.186L1.55 7.271a1 1 0 0 1-.118-1.163l1.28-2.216a1 1 0 0 1 1.066-.48l2.14.439a3.81 3.81 0 0 1 .163-.094l.691-2.073A1 1 0 0 1 7.721 1h2.558a1 1 0 0 1 .949.684l.69 2.073c.056.03.11.061.163.094l2.141-.439a1 1 0 0 1 1.067.48l1.279 2.216a1 1 0 0 1-.118 1.163L15 8.907a5.72 5.72 0 0 1 0 .186l1.45 1.636a1 1 0 0 1 .118 1.163l-1.28 2.216a1 1 0 0 1-1.066.48l-2.14-.438a6.215 6.215 0 0 1-.163.093l-.691 2.073a1 1 0 0 1-.949.684H7.721a1 1 0 0 1-.949-.684l-.69-2.073a6.105 6.105 0 0 1-.163-.094l-2.141.439a1 1 0 0 1-1.067-.48l-1.279-2.216a1 1 0 0 1 .118-1.163L3 9.093zM9 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
+    clipRule: "evenodd"
   })));
 };
-var ForwardRef$d = /*#__PURE__*/forwardRef(SvgContentPlusBold18);
-
-function PresetsPanel(props) {
-    const [isAddingPreset, setIsAddingPreset] = useState(false);
-    const setAddingPreset = useCallback(() => {
-        setIsAddingPreset(true);
-    }, []);
-    const cancelAddingPreset = useCallback(() => {
-        setIsAddingPreset(false);
-    }, []);
-    const presetApi = __rest(props, ["presets"]);
-    const renderPreset = (preset) => {
-        return React__default.createElement(Preset, Object.assign({ key: preset.id, preset: preset, addPreset: setAddingPreset }, presetApi));
-    };
-    const renderAddPresetButton = useCallback(() => {
-        return (React__default.createElement("div", { key: "addingPresetBlock", className: css$k.addPresetContainer }, !isAddingPreset ? (React__default.createElement(Button, { size: "36", onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$d, iconPosition: "left", mode: "ghost", color: "primary" })) : (React__default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
-    }, [isAddingPreset]);
-    const onPresetDropdownSelect = (preset) => {
-        props.choosePreset(preset.preset);
-    };
-    const renderMoreButtonDropdown = (item, hiddenItems) => {
-        return (React__default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__default.createElement(FlexRow, null,
-                React__default.createElement("div", { className: css$k.divider }),
-                React__default.createElement(Button, Object.assign({ mode: "ghost", color: "secondary", caption: `${(hiddenItems === null || hiddenItems === void 0 ? void 0 : hiddenItems.length) || ''} more` }, props)))), renderBody: (propsBody) => (React__default.createElement(DropdownContainer, Object.assign({ cx: cx$1(css$k.dropContainer), width: 230 }, propsBody),
-                React__default.createElement(ScrollBars$1, null, hiddenItems.map((hiddenItem) => (React__default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$e, iconPosition: "right", cx: css$k.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
-    };
-    const getPresetPriority = (preset, index) => {
-        return preset.id === props.activePresetId ? 100499 : 1000 - index;
-    };
-    const getPanelItems = () => {
-        return [
-            ...sortBy(props.presets, (i) => i.order).map((preset, index) => ({
-                id: preset.id.toString(),
-                render: () => renderPreset(preset),
-                priority: getPresetPriority(preset, index),
-                preset: preset,
-            })), {
-                id: 'collapsedContainer', render: renderMoreButtonDropdown, priority: 100501, collapsedContainer: true,
-            }, { id: 'addPreset', render: renderAddPresetButton, priority: 100501 },
-        ];
-    };
-    return (React__default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__default.createElement(FlexRow, { size: null, spacing: "12", cx: css$k.presetsWrapper },
-            React__default.createElement(AdaptivePanel, { items: getPanelItems() }))));
-}
-
-const defaultPredicates = {
-    numeric: [
-        { predicate: 'eq', name: '=', isDefault: true }, { predicate: 'neq', name: '≠' }, { predicate: 'lte', name: '≤' }, { predicate: 'gte', name: '≥' }, { predicate: 'inRange', name: 'In Range' },
-    ],
-    multiPicker: [{ predicate: 'in', name: 'is', isDefault: true }, { predicate: 'nin', name: 'is not' }],
-    rangeDatePicker: [{ predicate: 'inRange', name: 'In Range', isDefault: true }, { predicate: 'notInRange', name: 'Not in Range' }],
-};
+var ForwardRef$d = /*#__PURE__*/forwardRef(SvgActionSettings18);
 
-const useColumnsWithFilters = (initialColumns, filters) => {
-    const makeFilterRenderCallback = useCallback((key) => function (filterLens, dropdownProps) {
-        const filter = filters.find((f) => f.columnKey === key);
-        if (!filter)
-            return null;
-        const props = filterLens.prop(filter.field).toProps();
-        return React__default.createElement(FilterItemBody, Object.assign({}, props, filter, dropdownProps));
-    }, [filters]);
-    const columns = useMemo(() => {
-        if (filters) {
-            const filterKeys = filters.map((f) => f.columnKey);
-            const newColumns = (initialColumns.map((column) => {
-                if (filterKeys.includes(column.key)) {
-                    return Object.assign(Object.assign({}, column), { renderFilter: makeFilterRenderCallback(column.key) });
-                }
-                else {
-                    return column;
-                }
-            }));
-            return newColumns;
-        }
-        return initialColumns;
-    }, [filters, initialColumns]);
-    return columns;
-};
+const DataTableHeaderRow = withMods(DataTableHeaderRow$1, () => [css$h.root, 'uui-dt-vars'], (mods) => ({
+    renderCell: (props) => React.createElement(DataTableHeaderCell, Object.assign({}, props, { size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key })),
+    renderConfigButton: () => React.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: css$h.configIcon, color: "neutral", icon: ForwardRef$d }),
+}));
 
-var styles$1 = {"main-panel":"ptMu9v","group-title":"DgOUCA","group-title-text":"nHbzNL","group-title-badge":"dRSUbf","group-items":"BBN0YY","no-data":"_2vwEda","h-divider":"fklXNs","search-area":"pbBbKM","mainPanel":"ptMu9v","groupTitle":"DgOUCA","groupTitleText":"nHbzNL","groupTitleBadge":"dRSUbf","groupItems":"BBN0YY","noData":"_2vwEda","hDivider":"fklXNs","searchArea":"pbBbKM"};
+var styles$1 = {"uui-typography":"mGcPRL","hero-header":"_0tTnvI","promo-header":"zMfQI9","uui-critical":"Ufx76A","uui-success":"WGremY","uui-warning":"OKzFYQ","uui-typography-size-12":"_1qSwW6","uui-typography-size-14":"vomjZ2","uui-typography-size-16":"KzVCy9","main-panel":"W4GF6R","group-title":"-jJY9r","group-title-text":"_0-dioj","group-title-badge":"uuBGSI","group-items":"qPCb-i","no-data":"_21fZHd","h-divider":"Kh4uZw","search-area":"rYoths","uuiTypography":"mGcPRL","heroHeader":"_0tTnvI","promoHeader":"zMfQI9","uuiCritical":"Ufx76A","uuiSuccess":"WGremY","uuiWarning":"OKzFYQ","uuiTypographySize12":"_1qSwW6","uuiTypographySize14":"vomjZ2","uuiTypographySize16":"KzVCy9","mainPanel":"W4GF6R","groupTitle":"-jJY9r","groupTitleText":"_0-dioj","groupTitleBadge":"uuBGSI","groupItems":"qPCb-i","noData":"_21fZHd","hDivider":"Kh4uZw","searchArea":"rYoths"};
 
 var _path$b;
 function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
@@ -3780,7 +3883,7 @@ function PinIconButton(props) {
             React.createElement(IconButton, { icon: pinIcon, onClick: pinClickHandler, isDisabled: isPinnedAlways, color: isPinned ? 'info' : undefined }))));
 }
 
-var styles = {"row-wrapper":"SWMZi6","not-pinned":"yxnsHl","pin-icon-button":"yr-iBp","checkbox":"YmqO7-","drag-handle":"_9RqGv3","dnd-disabled":"EDh2d-","rowWrapper":"SWMZi6","notPinned":"yxnsHl","pinIconButton":"yr-iBp","dragHandle":"_9RqGv3","dndDisabled":"EDh2d-"};
+var styles = {"uui-typography":"p47L2W","hero-header":"DkRK5G","promo-header":"J5uzxQ","uui-critical":"Xvyn6B","uui-success":"S6scUE","uui-warning":"kgKMQH","uui-typography-size-12":"gYpBYm","uui-typography-size-14":"TN423q","uui-typography-size-16":"h9SEig","row-wrapper":"uBtvlk","not-pinned":"B7uAxr","pin-icon-button":"-b-VeG","checkbox":"_3leOUg","drag-handle":"L5QEYr","dnd-disabled":"CbmLsv","uuiTypography":"p47L2W","heroHeader":"DkRK5G","promoHeader":"J5uzxQ","uuiCritical":"Xvyn6B","uuiSuccess":"S6scUE","uuiWarning":"kgKMQH","uuiTypographySize12":"gYpBYm","uuiTypographySize14":"TN423q","uuiTypographySize16":"h9SEig","rowWrapper":"uBtvlk","notPinned":"B7uAxr","pinIconButton":"-b-VeG","dragHandle":"L5QEYr","dndDisabled":"CbmLsv"};
 
 const ColumnRow = React.memo(function ColumnRow(props) {
     const { column } = props;
@@ -3806,7 +3909,7 @@ const ColumnRow = React.memo(function ColumnRow(props) {
 
 const renderGroupTitle = (title, amount) => (React.createElement(FlexRow, { size: "24", padding: "24", spacing: "6", cx: styles$1.groupTitle },
     React.createElement(Text, { cx: styles$1.groupTitleText, font: "semibold", lineHeight: "24", fontSize: "14" }, title),
-    React.createElement(Badge, { cx: styles$1.groupTitleBadge, caption: amount, color: "default", size: "18" })));
+    React.createElement(Badge, { cx: styles$1.groupTitleBadge, caption: amount, color: "neutral", size: "18" })));
 function ColumnsConfigurationModal(props) {
     const i18n$1 = i18n.tables.columnsConfigurationModal;
     const { columns, columnsConfig: initialColumnsConfig, defaultConfig } = props, modalProps = __rest(props, ["columns", "columnsConfig", "defaultConfig"]);
@@ -3848,10 +3951,10 @@ function ColumnsConfigurationModal(props) {
             React.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
             React.createElement(FlexRow, { padding: "24", borderBottom: true, spacing: "12", cx: styles$1.searchArea },
                 React.createElement(SearchInput, { size: "30", value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
-                React.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React.createElement(Panel, { shadow: true },
+                React.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React.createElement(Panel, { background: "surface", shadow: true },
                         React.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
-                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React.createElement(Button, Object.assign({}, props, { mode: "none", icon: ForwardRef$l, size: "30", color: "secondary", isDropdown: false })) })),
-            React.createElement(Panel, { cx: styles$1.mainPanel },
+                        React.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => React.createElement(Button, Object.assign({}, props, { fill: "none", icon: ForwardRef$s, size: "30", color: "secondary", isDropdown: false })) })),
+            React.createElement(Panel, { background: "surface", cx: styles$1.mainPanel },
                 React.createElement(ScrollBars, null,
                     renderVisible(),
                     renderHidden(),
@@ -3859,12 +3962,67 @@ function ColumnsConfigurationModal(props) {
                         React.createElement(Text, { fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n$1.noResultsFound.text),
                         React.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n$1.noResultsFound.subText))))),
             React.createElement(ModalFooter, { borderTop: true },
-                React.createElement(LinkButton, { icon: ForwardRef$k, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React.createElement(LinkButton, { icon: ForwardRef$r, caption: i18n$1.resetToDefaultButton, onClick: reset }),
                 React.createElement(FlexSpacer, null),
-                React.createElement(Button, { mode: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
+                React.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
                 noVisibleColumns ? (React.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
 
+var css$g = {"listContainer":"FOVXfC","header":"jY4gLS","group":"_6ZENDn","stickyHeader":"kYkDln"};
+
+const getChildrenAndRest = (row, rows) => {
+    const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
+    if (firstNotChildIndex === -1) {
+        return [rows, []];
+    }
+    if (firstNotChildIndex === 0) {
+        return [[], rows];
+    }
+    const children = rows.slice(0, firstNotChildIndex);
+    const rest = rows.slice(firstNotChildIndex, rows.length);
+    return [children, rest];
+};
+
+function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
+    var _a, _b;
+    const rowRef = useRef();
+    const childrenPinnedTop = row.isPinned ? (top + ((_b = (_a = rowRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0)) : top;
+    return (React__default.createElement("div", { className: css$g.group, key: row.rowKey },
+        React__default.createElement("div", { className: row.isPinned ? css$g.stickyHeader : css$g.header, 
+            // Gaps between pinned parents should be removed by -1 from top height.
+            // Otherwise, sometimes top value is rounded top.
+            style: { zIndex: row.depth + 10, top: top - 1 }, ref: rowRef }, renderRow(row)),
+        childRows.length > 0 && (React__default.createElement("div", null,
+            React__default.createElement(DataRowsGroups, { rows: childRows, renderRow: renderRow, top: childrenPinnedTop })))));
+}
+const renderRows = (rows, renderRow, top) => {
+    if (!rows.length)
+        return [];
+    const [row, ...rest] = rows;
+    if (!rest.length) {
+        return [renderRow(row)];
+    }
+    const [next] = rest;
+    if (next.depth <= row.depth && !row.isPinned) {
+        return [renderRow(row)].concat(renderRows(rest, renderRow, top));
+    }
+    const [children, otherRows] = getChildrenAndRest(row, rest);
+    const group = (React__default.createElement(DataRowsGroup, { row: row, childRows: children, renderRow: renderRow, top: top, key: row.rowKey }));
+    return [group].concat(renderRows(otherRows, renderRow, top));
+};
+function DataRowsGroups({ rows, renderRow, top = 1, }) {
+    const rowsWithGroups = renderRows(rows, renderRow, top);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (React__default.createElement(React__default.Fragment, null, rowsWithGroups));
+}
+
+function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
+    var _a;
+    return (React__default.createElement("div", { className: css$g.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+        React__default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
+            React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: (_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight }))));
+}
+
 var _path$8, _path2, _path3, _path4, _path5, _path6, _g$1, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
 function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgEmptyTable = function SvgEmptyTable(props, ref) {
@@ -3876,7 +4034,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React.createElement("g", {
-    clipPath: "url(#t3z83az7el0ravt2i_a)"
+    clipPath: "url(#odmwhp5hbu3kk9s64_a)"
   }, _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
     fill: "#F5F6FA"
@@ -3897,7 +4055,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
     fill: "#1D1E26"
   })), /*#__PURE__*/React.createElement("mask", {
-    id: "t3z83am5hndtlgftg_b",
+    id: "odmwhpailrok4upek_b",
     style: {
       maskType: "alpha"
     },
@@ -3910,7 +4068,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
     fill: "#9BDEFF"
   }))), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
-    mask: "url(#t3z83am5hndtlgftg_b)",
+    mask: "url(#odmwhpailrok4upek_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
@@ -3996,7 +4154,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
     fill: "#fff"
   }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-    id: "t3z83az7el0ravt2i_a"
+    id: "odmwhp5hbu3kk9s64_a"
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -4005,62 +4163,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
 };
 var ForwardRef$9 = /*#__PURE__*/forwardRef(SvgEmptyTable);
 
-var css$g = {"sticky-header":"n17vm3","table":"xo9KCG","no-results":"VHgS0y","no-results-icon":"IYml-v","no-results-title":"Q2QLjx","stickyHeader":"n17vm3","noResults":"VHgS0y","noResultsIcon":"IYml-v","noResultsTitle":"Q2QLjx"};
-
-var css$f = {"listContainer":"iDegmz","header":"vfZjHc","group":"_95hELF","stickyHeader":"_1qQ29Z"};
-
-const getChildrenAndRest = (row, rows) => {
-    const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
-    if (firstNotChildIndex === -1) {
-        return [rows, []];
-    }
-    if (firstNotChildIndex === 0) {
-        return [[], rows];
-    }
-    const children = rows.slice(0, firstNotChildIndex);
-    const rest = rows.slice(firstNotChildIndex, rows.length);
-    return [children, rest];
-};
-
-function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
-    var _a, _b;
-    const rowRef = useRef();
-    const childrenPinnedTop = row.isPinned ? (top + ((_b = (_a = rowRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0)) : top;
-    return (React__default.createElement("div", { className: css$f.group, key: row.rowKey },
-        React__default.createElement("div", { className: row.isPinned ? css$f.stickyHeader : css$f.header, 
-            // Gaps between pinned parents should be removed by -1 from top height.
-            // Otherwise, sometimes top value is rounded top.
-            style: { zIndex: row.depth + 10, top: top - 1 }, ref: rowRef }, renderRow(row)),
-        childRows.length > 0 && (React__default.createElement("div", null,
-            React__default.createElement(DataRowsGroups, { rows: childRows, renderRow: renderRow, top: childrenPinnedTop })))));
-}
-const renderRows = (rows, renderRow, top) => {
-    if (!rows.length)
-        return [];
-    const [row, ...rest] = rows;
-    if (!rest.length) {
-        return [renderRow(row)];
-    }
-    const [next] = rest;
-    if (next.depth <= row.depth && !row.isPinned) {
-        return [renderRow(row)].concat(renderRows(rest, renderRow, top));
-    }
-    const [children, otherRows] = getChildrenAndRest(row, rest);
-    const group = (React__default.createElement(DataRowsGroup, { row: row, childRows: children, renderRow: renderRow, top: top, key: row.rowKey }));
-    return [group].concat(renderRows(otherRows, renderRow, top));
-};
-function DataRowsGroups({ rows, renderRow, top = 1, }) {
-    const rowsWithGroups = renderRows(rows, renderRow, top);
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (React__default.createElement(React__default.Fragment, null, rowsWithGroups));
-}
-
-function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
-    var _a;
-    return (React__default.createElement("div", { className: css$f.listContainer, style: { minHeight: `${estimatedHeight}px` } },
-        React__default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
-            React__default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: (_a = headerRef === null || headerRef === void 0 ? void 0 : headerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight }))));
-}
+var css$f = {"sticky-header":"hlhppN","table":"RPXZnT","no-results":"sE1nCw","no-results-icon":"bUTvMm","no-results-title":"AagxzJ","stickyHeader":"hlhppN","noResults":"sE1nCw","noResultsIcon":"bUTvMm","noResultsTitle":"AagxzJ"};
 
 function DataTable(props) {
     var _a;
@@ -4069,15 +4172,15 @@ function DataTable(props) {
     const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
     const { columns, config, defaultConfig } = useColumnsConfig(columnsWithFilters, (_a = props.value) === null || _a === void 0 ? void 0 : _a.columnsConfig);
     const defaultRenderRow = React.useCallback((rowProps) => {
-        return React.createElement(DataTableRow, Object.assign({ key: rowProps.rowKey, size: props.size, borderBottom: props.border }, rowProps, { cx: css$g.cell }));
+        return React.createElement(DataTableRow, Object.assign({ key: rowProps.rowKey, size: props.size, borderBottom: props.border }, rowProps, { cx: css$f.cell }));
     }, []);
     const renderRow = (row) => { var _a; return ((_a = props.renderRow) !== null && _a !== void 0 ? _a : defaultRenderRow)(Object.assign(Object.assign({}, row), { columns })); };
     const rows = props.getRows();
     const renderNoResultsBlock = React.useCallback(() => {
         var _a;
-        return (React.createElement("div", { className: css$g.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React.createElement(React.Fragment, null,
-            React.createElement(IconContainer, { cx: css$g.noResultsIcon, icon: ForwardRef$9 }),
-            React.createElement(Text, { cx: css$g.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
+        return (React.createElement("div", { className: css$f.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React.createElement(React.Fragment, null,
+            React.createElement(IconContainer, { cx: css$f.noResultsIcon, icon: ForwardRef$9 }),
+            React.createElement(Text, { cx: css$f.noResultsTitle, fontSize: "24", lineHeight: "30", color: "primary", font: "semibold" }, i18n.tables.noResultsBlock.title),
             React.createElement(Text, { fontSize: "16", lineHeight: "24", font: "regular", color: "primary" }, i18n.tables.noResultsBlock.message)))));
     }, [props.renderNoResultsBlock]);
     const onConfigurationButtonClick = React.useCallback(() => {
@@ -4094,7 +4197,7 @@ function DataTable(props) {
         props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
     ]);
     const renderRowsContainer = React.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: css$g.stickyHeader, ref: headerRef },
+        React.createElement("div", { className: css$f.stickyHeader, ref: headerRef },
             React.createElement(DataTableHeaderRow, { columns: columns, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.size, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, value: Object.assign(Object.assign({}, props.value), { columnsConfig: config }), onValueChange: props.onValueChange }),
             React.createElement("div", { className: cx$1(uuiScrollShadows.top, {
                     [uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
@@ -4103,16 +4206,16 @@ function DataTable(props) {
         props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
     ]);
     return (React.createElement(DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$g.table), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
+        React.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: cx$1(css$f.table, 'uui-dt-vars'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
                 role: 'table',
                 'aria-colcount': columns.length,
                 'aria-rowcount': props.rowsCount,
             } })));
 }
 
-var css$e = {"root":"fsMBiv"};
+var css$e = {"root":"_1yPo2o"};
 
-var css$d = {"root":"ZE1-SK","burger-content":"p9lqOI","burgerContent":"p9lqOI"};
+var css$d = {"root":"OLnur1","burger-content":"_8VuLkA","burgerContent":"_8VuLkA"};
 
 var _path$7;
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
@@ -4145,7 +4248,7 @@ var SvgBurgerClose = function SvgBurgerClose(props, ref) {
 var ForwardRef$7 = /*#__PURE__*/forwardRef(SvgBurgerClose);
 
 function applyBurgerMods() {
-    return [css$d.root];
+    return [cx(css$d.root, 'uui-burger')];
 }
 const Burger = withMods(Burger$1, applyBurgerMods, () => ({
     burgerIcon: ForwardRef$8,
@@ -4179,10 +4282,15 @@ var SvgTriangle = function SvgTriangle(props, ref) {
 };
 var ForwardRef$6 = /*#__PURE__*/forwardRef(SvgTriangle);
 
-var css$c = {"root":"Q-i3AK","button-primary":"_02zDSe","button-secondary":"CT92mt","hasIcon":"ukj9ak","dropdown":"_6lFcVt","buttonPrimary":"_02zDSe","buttonSecondary":"CT92mt"};
+var css$c = {"uui-typography":"_9nDrBA","hero-header":"AdmOtD","promo-header":"fIBW6u","uui-critical":"f4TjuB","uui-success":"KfJVyP","uui-warning":"_7PQIay","uui-typography-size-12":"ADIB-G","uui-typography-size-14":"_0mtKhX","uui-typography-size-16":"Wg4Enz","root":"gNrdBT","button-primary":"HVTHMg","button-secondary":"TKb7Ru","hasIcon":"t-PgwR","dropdown":"fYU033","uuiTypography":"_9nDrBA","heroHeader":"AdmOtD","promoHeader":"fIBW6u","uuiCritical":"f4TjuB","uuiSuccess":"KfJVyP","uuiWarning":"_7PQIay","uuiTypographySize12":"ADIB-G","uuiTypographySize14":"_0mtKhX","uuiTypographySize16":"Wg4Enz","buttonPrimary":"HVTHMg","buttonSecondary":"TKb7Ru"};
 
 const BurgerButton = withMods(Button$1, (props) => [
-    css$c.root, css$c['button-' + (props.type || 'primary')], css$c['indent-' + (props.indentLevel || 0)], props.isDropdown && css$c.dropdown, props.icon && css$c.hasIcon,
+    css$c.root,
+    'uui-main_menu-burger-button',
+    css$c['button-' + (props.type || 'primary')],
+    css$c['indent-' + (props.indentLevel || 0)],
+    props.isDropdown && css$c.dropdown,
+    props.icon && css$c.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$6, dropdownIconPosition: 'left', role: 'menuitem' }));
 
 function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
@@ -4231,21 +4339,21 @@ var SvgMenuInputCancel = function SvgMenuInputCancel(props, ref) {
 };
 var ForwardRef$5 = /*#__PURE__*/forwardRef(SvgMenuInputCancel);
 
-var css$b = {"search-input":"r0XjCb","searchInput":"r0XjCb"};
+var css$b = {"search-input":"-X1-6-","searchInput":"-X1-6-"};
 
 function BurgerSearch(props) {
-    return (React.createElement(TextInput$1, { cx: css$b.searchInput, iconPosition: "left", icon: ForwardRef$15, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5 }));
+    return (React.createElement(TextInput$1, { cx: cx(css$b.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$15, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$5 }));
 }
 
-var css$a = {"group-header":"p0YbjB","group-name":"_7TGLSX","line":"Mifo-d","groupHeader":"p0YbjB","groupName":"_7TGLSX"};
+var css$a = {"root":"VqX1NV","group-header":"McYOuP","group-name":"Fbn2Xi","line":"-kKLpQ","groupHeader":"McYOuP","groupName":"Fbn2Xi"};
 
 function BurgerGroupHeader(props) {
-    return (React.createElement("div", { className: css$a.groupHeader },
+    return (React.createElement("div", { className: cx(css$a.root, css$a.groupHeader, 'uui-burger-group-header') },
         React.createElement("hr", { className: css$a.line }),
         React.createElement("span", { className: css$a.groupName }, props.caption)));
 }
 
-var css$9 = {"root":"R8rVR3","type-primary":"i8As46","type-secondary":"J5I5nT","typePrimary":"i8As46","typeSecondary":"J5I5nT"};
+var css$9 = {"uui-typography":"_1t-jlM","hero-header":"Pzq43P","promo-header":"TPVQgX","uui-critical":"wyV3hN","uui-success":"n4gnxJ","uui-warning":"rTW6fv","uui-typography-size-12":"DWdabN","uui-typography-size-14":"YLfBE0","uui-typography-size-16":"tID7RS","root":"SjJkLt","type-primary":"x9Lllu","type-secondary":"mEepFc","uuiTypography":"_1t-jlM","heroHeader":"Pzq43P","promoHeader":"TPVQgX","uuiCritical":"wyV3hN","uuiSuccess":"n4gnxJ","uuiWarning":"rTW6fv","uuiTypographySize12":"DWdabN","uuiTypographySize14":"YLfBE0","uuiTypographySize16":"tID7RS","typePrimary":"x9Lllu","typeSecondary":"mEepFc"};
 
 var _path$4;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -4265,7 +4373,7 @@ var ForwardRef$4 = /*#__PURE__*/forwardRef(SvgChevronDown24);
 
 const MainMenuButton = withMods(Button$1, (mods) => [css$9.root, css$9['type-' + (mods.type || 'primary')]], () => ({ dropdownIcon: ForwardRef$4, role: 'menuitem' }));
 
-var css$8 = {"dropdown-body":"T3q0-j","dropdownBody":"T3q0-j"};
+var css$8 = {"dropdown-body":"DwcTAn","dropdownBody":"DwcTAn"};
 
 class MainMenuDropdown extends React.Component {
     render() {
@@ -4276,7 +4384,7 @@ class MainMenuDropdown extends React.Component {
                     }
                 };
                 return (React.createElement(FocusLock, { returnFocus: true, persistentFocus: true, lockProps: { onKeyDown: handleEscape } },
-                    React.createElement("div", { className: cx(css$8.dropdownBody) }, this.props.renderBody
+                    React.createElement("div", { className: cx(css$8.dropdownBody, 'uui-main_menu-dropdown') }, this.props.renderBody
                         ? this.props.renderBody(Object.assign({}, props))
                         : React.Children.map(this.props.children, (item) => {
                             if (!item)
@@ -4293,7 +4401,10 @@ class MainMenuDropdown extends React.Component {
 }
 
 function applyMainMenuMods() {
-    return [css$e.root];
+    return [
+        css$e.root,
+        'uui-main_menu',
+    ];
 }
 const MainMenu = withMods(uuiComponents.MainMenu, applyMainMenuMods, () => ({
     Burger,
@@ -4316,12 +4427,12 @@ var SvgGlobalMenu = function SvgGlobalMenu(props, ref) {
 };
 var ForwardRef$3 = /*#__PURE__*/forwardRef(SvgGlobalMenu);
 
-var css$7 = {"global-menu-btn":"QN4W5W","globalMenuIcon":"s0u9hf","globalMenuBtn":"QN4W5W"};
+var css$7 = {"global-menu-btn":"pU-sAx","globalMenuIcon":"_77b19J","globalMenuBtn":"pU-sAx"};
 
 const GlobalMenu = React.forwardRef((props, ref) => (React.createElement("button", Object.assign({ ref: ref, id: "global_menu_toggle", className: cx(css$7.globalMenuBtn, props.cx) }, props.rawProps),
     React.createElement(IconContainer, { icon: ForwardRef$3, cx: css$7.globalMenuIcon }))));
 
-var css$6 = {"container":"He0gDq","open":"VSZ-K3"};
+var css$6 = {"container":"WE-ZXQ","open":"HCqEOg"};
 
 const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("button", { ref: ref, className: cx(css$6.container, props.isDropdown && css$6.dropdown, props.isOpen && css$6.open, props.onClick && uuiMarkers.clickable, props.cx), onClick: props.onClick },
     React.createElement(Avatar, { size: "36", img: props.avatarUrl }),
@@ -4329,18 +4440,18 @@ const MainMenuAvatar = React.forwardRef((props, ref) => (React.createElement("bu
     props.isDropdown && (React.createElement("div", null,
         React.createElement(IconContainer, { icon: ForwardRef$1b, flipY: props.isOpen }))))));
 
-var css$5 = {"search-input":"Ar25VF","searchInput":"Ar25VF"};
+var css$5 = {"search-input":"TTfdSh","searchInput":"TTfdSh"};
 
 const MainMenuSearch = React.forwardRef((props, ref) => (React.createElement(IEditableDebouncer, Object.assign({}, props, { render: (iEditable) => {
         var _a;
         return (React.createElement(TextInput$1, Object.assign({ iconPosition: "left", icon: ForwardRef$15, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$5 }, props, iEditable, { ref: ref, cx: cx$1(css$5.searchInput, props.cx) }, props.rawProps)));
     } }))));
 
-var css$4 = {"container":"iAkKgc"};
+var css$4 = {"container":"_3T-pU8"};
 
 const MainMenuIcon = React.forwardRef((props, ref) => (React.createElement(IconButton, Object.assign({ ref: ref, icon: props.icon, cx: cx$1(props.cx, css$4.container) }, props))));
 
-var css$3 = {"root":"ld2tT3"};
+var css$3 = {"root":"BnT69q"};
 
 const Anchor = withMods(Anchor$1, () => [css$3.root]);
 
@@ -4397,7 +4508,7 @@ var SvgShape = function SvgShape(props, ref) {
 };
 var ForwardRef$2 = /*#__PURE__*/forwardRef(SvgShape);
 
-var css$2 = {"root":"P4jVtu","drop-start":"YwK8vh","drop-over":"Au6-Co","link":"XtlE6u","drop-area":"Zh3W1v","icon-blue":"dj7re3","dropStart":"YwK8vh","dropOver":"Au6-Co","dropArea":"Zh3W1v","iconBlue":"dj7re3"};
+var css$2 = {"root":"_4lCJfq","drop-start":"AdLMQG","drop-over":"c2S0tc","link":"ojDuyS","drop-area":"UkObUB","icon-blue":"UA6kfJ","dropStart":"AdLMQG","dropOver":"c2S0tc","dropArea":"UkObUB","iconBlue":"UA6kfJ"};
 
 class DropSpot extends React.Component {
     constructor() {
@@ -4421,9 +4532,9 @@ class DropSpot extends React.Component {
     }
 }
 
-var css$1 = {"file-card-wrapper":"XlyZ-g","file-name":"VBEfku","error-card-wrapper":"jOCM7-","default-color":"oJRqcW","doc-color":"dizH5J","xls-color":"jb1Pdt","pdf-color":"xsBzvk","movie-color":"RD6RHV","img-color":"wAzRUt","error-block":"ei1QGW","icons-block":"_6nRMFF","fileCardWrapper":"XlyZ-g","fileName":"VBEfku","errorCardWrapper":"jOCM7-","defaultColor":"oJRqcW","docColor":"dizH5J","xlsColor":"jb1Pdt","pdfColor":"xsBzvk","movieColor":"RD6RHV","imgColor":"wAzRUt","errorBlock":"ei1QGW","iconsBlock":"_6nRMFF"};
+var css$1 = {"root":"_0Z9l9a","file-name":"mdbjDt","default-color":"Cdz4p1","doc-color":"_8t7qMj","xls-color":"I9oEud","pdf-color":"dv4UPH","movie-color":"aFiMoC","img-color":"HiIP6f","mov-color":"_0Vblnc","error-block":"VLVhhv","icons-block":"J5VDRn","fileName":"mdbjDt","defaultColor":"Cdz4p1","docColor":"_8t7qMj","xlsColor":"I9oEud","pdfColor":"dv4UPH","movieColor":"aFiMoC","imgColor":"HiIP6f","movColor":"_0Vblnc","errorBlock":"VLVhhv","iconsBlock":"J5VDRn"};
 
-var css = {"root":"hWmFwp"};
+var css = {"root":"plKduu"};
 
 const SvgCircleProgress = React.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -4492,7 +4603,7 @@ const FileCard = React.forwardRef((props, ref) => {
             case 'mp4':
             case 'wmw':
             case 'mkv':
-                return React.createElement(IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$1.movieColor });
+                return React.createElement(IconContainer, { size: 24, icon: fileIcons.videoIcon, cx: css$1.movColor });
             case 'csv':
             case 'xml':
                 return React.createElement(IconContainer, { size: 24, icon: fileIcons.tableIcon, cx: css$1.defaultColor });
@@ -4531,8 +4642,8 @@ const FileCard = React.forwardRef((props, ref) => {
         progress && progress < 100 && abortXHR();
         onClick();
     };
-    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$1.fileCardWrapper, (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && css$1.errorCardWrapper), minWidth: width, width: !width ? '100%' : undefined },
-        React.createElement(FlexRow, { cx: css$1.fileCardRow, size: "36", alignItems: "top", spacing: "6" },
+    return (React.createElement(FlexCell, { ref: ref, cx: cx$1(css$1.root, 'uui-file_card', (isLoading || (error === null || error === void 0 ? void 0 : error.isError)) && uuiMod.loading, componentCx, (error === null || error === void 0 ? void 0 : error.isError) && uuiMod.error), minWidth: width, width: !width ? '100%' : undefined },
+        React.createElement(FlexRow, { size: "36", alignItems: "top", spacing: "6" },
             fileExtension && getIcon(fileExtension),
             React.createElement(FlexCell, { width: "100%" },
                 React.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: progress < 100 ? 'secondary' : 'primary', cx: css$1.fileName }, fileName),
@@ -4542,5 +4653,5 @@ const FileCard = React.forwardRef((props, ref) => {
                 isCrossShow && React.createElement(IconButton, { icon: ForwardRef$1, onClick: removeHandler })))));
 });
 
-export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, DataPickerBody, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, EditMode, ErrorAlert, ErrorNotification, FileCard, FilterItemBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, MobileDropdownWrapper, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RichTextView, ScrollBars, SearchInput, Spinner, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, allButtonColors, allButtonModes, allButtonSemanticColors, allEpamBadgeSemanticColors, allFillStyles, allFontStyles, allIconColors, allLinkButtonColors, allRowSizes, allSemanticColors, allSizes, allTextSizes, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyInputAddonMods, applyNumericInputMods, applyProgressBarMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
+export { Accordion, Alert, Anchor, AvatarStack, Badge, Blocker, Burger, BurgerButton, BurgerGroupHeader, BurgerSearch, Button, Calendar, Checkbox, CheckboxGroup, ClearNotification, ColumnHeaderDropdown, ColumnsConfigurationModal, ConfirmationModal, ControlGroup, CountIndicator, DataPickerBody, DataPickerFooter, DataPickerHeader, DataPickerRow, DataRowsContainer, DataTable, DataTableCell, DataTableHeaderCell, DataTableHeaderRow, DataTableRow, DatePicker, DatePickerBody, DropMarker, DropSpot, Dropdown, DropdownContainer, DropdownMenuBody, DropdownMenuButton, DropdownMenuHeader, DropdownMenuSplitter, DropdownMenuSwitchButton, DropdownSubMenu, EditMode, ErrorAlert, ErrorNotification, FileCard, FilterItemBody, FiltersPanel, FlexCell, FlexRow, Form, GlobalMenu, HintAlert, HintNotification, IDropdownControlKeys, IconButton, IndeterminateBar, IndicatorBar, InputAddon, LabeledInput, LinkButton, MainMenu, MainMenuAvatar, MainMenuButton, MainMenuDropdown, MainMenuIcon, MainMenuSearch, MobileDropdownWrapper, ModalBlocker, ModalFooter, ModalHeader, ModalWindow, MultiSwitch, NotificationCard, NumericInput, Paginator, Panel, PickerInput, PickerItem, PickerList, PickerListItem, PickerModal, PickerToggler, PresetsPanel, ProgressBar, RadioGroup, RadioInput, RangeDatePicker, RangeDatePickerBody, RichTextView, ScrollBars, SearchInput, Slider, Spinner, StatusIndicator, SuccessAlert, SuccessNotification, SvgCircleProgress, Switch, TabButton, Tag, Text, TextArea, TextInput, TextPlaceholder, TimePicker, Tooltip, VerticalTabButton, VirtualList, WarningAlert, WarningNotification, allButtonColors, allButtonFills, allEpamBadgeSemanticColors, allFillStyles, allFontStyles, allIconColors, allLinkButtonColors, allRowSizes, allSemanticColors, allSizes, allTextColors, allTextSizes, applyBadgeMods, applyButtonMods, applyCheckboxMods, applyDateSelectionMods, applyInputAddonMods, applyNumericInputMods, applyProgressBarMods, applySliderMods, applySpinnerMods, applySwitchMods, applyTagMods, applyTextAreaMods, applyTextInputMods, defaultPredicates, getHighlightRanges, getHighlightedSearchMatches, getTextClasses, i18n, propsMods, rangeDatePickerPresets, renderCell, renderDropMarkers, useColumnsWithFilters, useForm, uuiDatePickerBody, weekCount };
 //# sourceMappingURL=index.esm.js.map