@epam/uui 6.1.1-beta.1 → 6.1.2

package/index.js

@@ -185,7 +185,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
     xmlns: "http://www.w3.org/2000/svg",
     ref: ref
   }, props), /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#82hxg28ri56zvqnah_a)"
+    clipPath: "url(#axwv14sdhgjn8a90k_a)"
   }, _path$I || (_path$I = /*#__PURE__*/React__namespace.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"
@@ -206,7 +206,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__namespace.createElement("mask", {
-    id: "82hxg20thhgmwza1nh_b",
+    id: "axwv14qvw39x99h9_b",
     style: {
       maskType: "alpha"
     },
@@ -219,7 +219,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 || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    mask: "url(#82hxg20thhgmwza1nh_b)",
+    mask: "url(#axwv14qvw39x99h9_b)",
     fillRule: "evenodd",
     clipRule: "evenodd"
   }, /*#__PURE__*/React__namespace.createElement("path", {
@@ -305,7 +305,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__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "82hxg28ri56zvqnah_a"
+    id: "axwv14sdhgjn8a90k_a"
   }, /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#fff",
     transform: "translate(.552)",
@@ -956,14 +956,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
 };
 var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
 
-var css$1w = {"root":"_2vEAjF","uui-spinner":"Z-jI5l","uuiSpinner":"Z-jI5l"};
+var css$1w = {"root":"pLfOrx","uui-spinner":"roRxrl","uuiSpinner":"roRxrl"};
 
 function applySpinnerMods() {
     return [css$1w.root, 'uui-spinner'];
 }
 const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
 
-var css$1v = {"root":"pwQ2iS","loading-word":"p7rJvU","loadingWord":"p7rJvU","animated-loading":"oPMR-T","animatedLoading":"oPMR-T","skeleton_loading":"_-9O9VS","skeletonLoading":"_-9O9VS"};
+var css$1v = {"root":"PmJhXe","loading-word":"cpJtJG","loadingWord":"cpJtJG","animated-loading":"_8nZ3Ji","animatedLoading":"_8nZ3Ji","skeleton_loading":"OC40xx","skeletonLoading":"OC40xx"};
 
 const TextPlaceholder = (props) => {
     const pattern = ' ';
@@ -980,7 +980,7 @@ const TextPlaceholder = (props) => {
         ]), dangerouslySetInnerHTML: { __html: it } })))));
 };
 
-var css$1u = {"root":"ERSh6m","line-height":"x6sEx5","lineHeight":"x6sEx5","font-size":"_7YYq13","fontSize":"_7YYq13"};
+var css$1u = {"root":"PzgChz","line-height":"cpwwQO","lineHeight":"cpwwQO","font-size":"_3L7mbo","fontSize":"_3L7mbo"};
 
 function applyTextMods(mods) {
     return [
@@ -1007,6 +1007,10 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
     };
 });
 
+var css$1t = {"root":"U4Un-b"};
+
+const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+
 const accordionSettings = {
     icons: {
         dropdownIcon: ForwardRef$P,
@@ -1491,11 +1495,11 @@ const settings = {
     textInput: textInputSettings,
 };
 
-var css$1t = {"root":"_2HN2NQ"};
+var css$1s = {"root":"RLJjpT"};
 
 function applyButtonMods(mods) {
     return [
-        css$1t.root,
+        css$1s.root,
         'uui-button',
         `uui-fill-${mods.fill || 'solid'}`,
         `uui-color-${mods.color || 'primary'}`,
@@ -1509,10 +1513,10 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
     };
 });
 
-var css$1s = {"root":"y18Miq"};
+var css$1r = {"root":"A175gu"};
 
 function applyIconButtonMods(props) {
-    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1s.root];
+    return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
 }
 const IconButton = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.IconButton, applyIconButtonMods, (props) => {
     const isDeprecated = ['info', 'success', 'error', 'warning'].includes(props.color);
@@ -1546,7 +1550,7 @@ 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'];
 }
 
-var css$1r = {"root":"sEYA3a"};
+var css$1q = {"root":"_9qIOia"};
 
 const DEFAULT_COLOR = 'primary';
 const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
@@ -1561,7 +1565,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     }
     const rootStyles = [
         'uui-link_button',
-        css$1r.root,
+        css$1q.root,
         `uui-size-${props.size || settings.linkButton.sizes.default}`,
         ...getIconClass(props),
         `uui-color-${props.color || DEFAULT_COLOR}`,
@@ -1576,11 +1580,11 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$1q = {"root":"vE9Cna"};
+var css$1p = {"root":"rK-LrI"};
 
 const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
-            css$1q.root,
+            css$1p.root,
             'uui-count_indicator',
             `uui-size-${props.size || settings.countIndicator.sizes.default}`,
             props.color && `uui-color-${props.color}`,
@@ -1588,11 +1592,11 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         ]) }, props.caption));
 });
 
-var css$1p = {"root":"uLUpeQ","withNotify":"mKgsb8"};
+var css$1o = {"root":"eVEbFZ","withNotify":"-xDjo0"};
 
 const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const styles = [
-        css$1p.root,
+        css$1o.root,
         'uui-tab-button',
         `uui-size-${props.size || settings.tabButton.sizes.default}`,
         ...getIconClass(props),
@@ -1609,25 +1613,25 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
         props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         (props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption) },
             props.caption,
-            props.withNotify && React__namespace.default.createElement("div", { className: css$1p.withNotify }))),
+            props.withNotify && React__namespace.default.createElement("div", { className: css$1o.withNotify }))),
         props.icon && props.iconPosition === 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
         props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: "neutral", size: settings.tabButton.sizes.countIndicatorMap[props.size || settings.tabButton.sizes.default], caption: props.count })),
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen })),
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$1o = {"root":"oJuOY2"};
+var css$1n = {"root":"p6XNfK"};
 
 function applyVerticalTabButtonMods() {
-    return [css$1o.root, 'uui-vertical-tab-button'];
+    return [css$1n.root, 'uui-vertical-tab-button'];
 }
 const VerticalTabButton = /* @__PURE__ */uuiCore.withMods(TabButton, applyVerticalTabButtonMods);
 
-var css$1n = {"root":"EOOY2A"};
+var css$1m = {"root":"H2Qh6a"};
 
 function applyCheckboxMods(mods) {
     return [
-        css$1n.root,
+        css$1m.root,
         `uui-size-${mods.size || settings.checkbox.sizes.default}`,
         'uui-control-mode-' + (mods.mode || 'form'),
         'uui-color-primary',
@@ -1641,11 +1645,11 @@ const applyUUICheckboxProps = (props) => {
 };
 const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
 
-var css$1m = {"root":"hVOPoB"};
+var css$1l = {"root":"z7NGih"};
 
 function applyRadioInputMods(mods) {
     return [
-        css$1m.root,
+        css$1l.root,
         `uui-size-${mods.size || settings.radioInput.sizes.default}`,
         'uui-radio-input-container',
         'uui-color-primary',
@@ -1653,11 +1657,11 @@ function applyRadioInputMods(mods) {
 }
 const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
 
-var css$1l = {"root":"Qhb9iD"};
+var css$1k = {"root":"_7E43op"};
 
 function applySwitchMods(mods) {
     return [
-        css$1l.root,
+        css$1k.root,
         `uui-size-${mods.size || settings.switch.sizes.default}`,
         'uui-color-primary',
     ];
@@ -1677,7 +1681,7 @@ var EditMode;
     EditMode["INLINE"] = "inline";
 })(EditMode || (EditMode = {}));
 
-var textInputCss = {"root":"LPrcw6"};
+var textInputCss = {"root":"nOncFB"};
 
 const DEFAULT_MODE$3 = EditMode.FORM;
 function applyTextInputMods(mods) {
@@ -1702,9 +1706,9 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
         } }));
 });
 
-var css$1k = {"root":"_2WxMaG"};
+var css$1j = {"root":"_21MstX"};
 
-const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1k.root, 'uui-control-group']);
+const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1j.root, 'uui-control-group']);
 
 function MultiSwitchComponent(props, ref) {
     return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: {
@@ -1718,13 +1722,13 @@ function MultiSwitchComponent(props, ref) {
 }
 const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
 
-var css$1j = {"root":"_0zIIhH"};
+var css$1i = {"root":"_6VA-y8"};
 
 const DEFAULT_MODE$2 = EditMode.FORM;
 function applyNumericInputMods(mods) {
     return [
         textInputCss.root,
-        css$1j.root,
+        css$1i.root,
         `uui-size-${mods.size || settings.numericInput.sizes.default}`,
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$2),
     ];
@@ -1738,12 +1742,12 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
     };
 });
 
-var css$1i = {"root":"OLMFmo"};
+var css$1h = {"root":"BixRm8"};
 
 const DEFAULT_MODE$1 = EditMode.FORM;
 function applyTextAreaMods(mods) {
     return [
-        css$1i.root,
+        css$1h.root,
         'uui-textarea',
         'uui-size-' + (mods.size || settings.textArea.sizes.default),
         'uui-control-mode-' + (mods.mode || DEFAULT_MODE$1),
@@ -1779,18 +1783,18 @@ function TREE_SHAKEABLE_INIT$1() {
     };
 }
 
-var css$1h = {"root":"we6oMH"};
+var css$1g = {"root":"euEPz-"};
 
 function applyDropdownContainerMods(mods) {
     return [
-        css$1h.root,
+        css$1g.root,
         mods.vPadding && `vPadding-${mods.vPadding}`,
         mods.padding && `padding-${mods.padding}`,
     ];
 }
 const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
 
-var css$1g = {"root":"-NJOWg","timepicker-input":"Gsr1Zg","timepickerInput":"Gsr1Zg","ltr-always":"XsJTDd","ltrAlways":"XsJTDd"};
+var css$1f = {"root":"ukUGrR","timepicker-input":"McNTgf","timepickerInput":"McNTgf","ltr-always":"Ezvs80","ltrAlways":"Ezvs80"};
 
 const uuiTimePicker = {
     container: 'uui-timepicker-container',
@@ -1829,8 +1833,8 @@ function TimePickerBody(props) {
         const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
         onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
     };
-    return (React__namespace.createElement("div", { className: uuiCore.cx(css$1g.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
-        React__namespace.createElement("div", { className: css$1g.ltrAlways },
+    return (React__namespace.createElement("div", { className: uuiCore.cx(css$1f.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
+        React__namespace.createElement("div", { className: css$1f.ltrAlways },
             React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
                 React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
                 React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
@@ -1973,7 +1977,7 @@ function TimePickerComponent(props, ref) {
         state.value && state.inputValue && saveTime(state.value);
     };
     const renderInput = (inputProps) => {
-        return (React__namespace.default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$1g.root, css$1g.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
+        return (React__namespace.default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$1f.root, css$1f.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
     };
     const renderBody = (bodyProps) => {
         const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
@@ -1984,37 +1988,37 @@ function TimePickerComponent(props, ref) {
 }
 const TimePicker = /* @__PURE__ */React__namespace.default.forwardRef(TimePickerComponent);
 
-var css$1f = {"root":"EOQyWa"};
+var css$1e = {"root":"OamnhQ"};
 
 function applyInputAddonMods() {
     return [
-        css$1f.root,
+        css$1e.root,
     ];
 }
 const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
 
-var css$1e = {"root":"ufU47R"};
+var css$1d = {"root":"HEIxwq"};
 
 function applySliderMods() {
-    return [css$1e.root, 'uui-color-neutral'];
+    return [css$1d.root, 'uui-color-neutral'];
 }
 const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
 
-var css$1d = {"root":"_0s7taF"};
+var css$1c = {"root":"I1hTc5"};
 
 function applyTooltipMods(mods) {
     return [
-        css$1d.root,
+        css$1c.root,
         `uui-color-${mods.color || 'inverted'}`,
     ];
 }
 const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
 
-var css$1c = {"root":"_3VdI7g","tooltip":"prK4lm"};
+var css$1b = {"root":"_6rjI-U","tooltip":"aN-uAS"};
 
 function applyRatingMods(mods) {
     return [
-        css$1c.root,
+        css$1b.root,
         `uui-size-${mods.size || settings.rating.sizes.default}`,
     ];
 }
@@ -2024,17 +2028,17 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
     Tooltip,
 }));
 
-var css$1b = {"root":"WW2igC","main-path":"_1ua1bD","mainPath":"_1ua1bD","content-wrapper":"ke2lfx","contentWrapper":"ke2lfx","content":"qC9nxi","action-wrapper":"tTXzKi","actionWrapper":"tTXzKi","icon-wrapper":"_54piE6","iconWrapper":"_54piE6","icon":"KdpqPD","close-icon":"_4V4tDV","closeIcon":"_4V4tDV"};
+var css$1a = {"root":"Vort6b","main-path":"vAq6ae","mainPath":"vAq6ae","content-wrapper":"_9kzXe0","contentWrapper":"_9kzXe0","content":"_98csGI","action-wrapper":"AaTR8a","actionWrapper":"AaTR8a","icon-wrapper":"AbsU2H","iconWrapper":"AbsU2H","icon":"rN0qS2","close-icon":"gzif7n","closeIcon":"gzif7n"};
 
-const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$1b.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
-    React__namespace.createElement("div", { className: css$1b.mainPath },
-        React__namespace.createElement("div", { className: css$1b.contentWrapper },
-            props.icon && (React__namespace.createElement("div", { className: css$1b.iconWrapper },
-                React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$1b.icon }))),
-            React__namespace.createElement("div", { className: css$1b.content },
+const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$1a.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
+    React__namespace.createElement("div", { className: css$1a.mainPath },
+        React__namespace.createElement("div", { className: css$1a.contentWrapper },
+            props.icon && (React__namespace.createElement("div", { className: css$1a.iconWrapper },
+                React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, cx: css$1a.icon }))),
+            React__namespace.createElement("div", { className: css$1a.content },
                 props.children,
-                props.actions && (React__namespace.createElement("div", { className: css$1b.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1b.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
-        props.onClose && React__namespace.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1b.closeIcon })))));
+                props.actions && (React__namespace.createElement("div", { className: css$1a.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1a.actionLink, size: settings.alert.sizes.actionMap[props.size || settings.alert.sizes.default] }))))))),
+        props.onClose && React__namespace.createElement(IconButton, { icon: settings.alert.icons.closeIcon, color: "neutral", onClick: props.onClose, cx: css$1a.closeIcon })))));
 const WarningAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.warningIcon, color: "warning", ref: ref, ...props }));
 const SuccessAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.successIcon, color: "success", ref: ref, ...props }));
 const HintAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: settings.alert.icons.infoIcon, color: "info", ref: ref, ...props }));
@@ -2042,7 +2046,7 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
 
 const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
 
-var css$1a = {"submenu-root-item-rtl":"gLKK2j","submenuRootItemRtl":"gLKK2j","icon-after":"t4YmDw","iconAfter":"t4YmDw","submenu-root-item":"FNM5v0","submenuRootItem":"FNM5v0","icon-check":"rIgnif","iconCheck":"rIgnif","splitter-root":"bjny-u","splitterRoot":"bjny-u","splitter":"bIC3YU","header-root":"oxsLtd","headerRoot":"oxsLtd","item-root":"kaQEt5","itemRoot":"kaQEt5","icon":"akcW--","link":"_4cJMXl","indent":"_2GZ2pC","selected-mark":"_2O9lv1","selectedMark":"_2O9lv1"};
+var css$19 = {"submenu-root-item-rtl":"ydZ-BE","submenuRootItemRtl":"ydZ-BE","icon-after":"TPTNZ-","iconAfter":"TPTNZ-","submenu-root-item":"GI6DFI","submenuRootItem":"GI6DFI","icon-check":"H53E0w","iconCheck":"H53E0w","splitter-root":"uAMUiM","splitterRoot":"uAMUiM","splitter":"f8aqVO","header-root":"Je-c-H","headerRoot":"Je-c-H","item-root":"_12x1Ga","itemRoot":"_12x1Ga","icon":"hocJgD","link":"VQI7Zx","indent":"IEv-zK","selected-mark":"_9y1vSe","selectedMark":"_9y1vSe"};
 
 exports.IDropdownControlKeys = void 0;
 (function (IDropdownControlKeys) {
@@ -2107,29 +2111,29 @@ const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((p
     const getMenuButtonContent = () => {
         const isIconBefore = Boolean(icon && iconPosition !== 'right');
         const isIconAfter = Boolean(icon && iconPosition === 'right');
-        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$1a.icon, iconPosition === 'right' ? css$1a.iconAfter : css$1a.iconBefore) }));
+        const iconElement = (React__namespace.default.createElement(IconButton, { icon: icon, color: isActive ? 'primary' : 'neutral', onClick: onIconClick, isDisabled: isDisabled, cx: uuiCore.cx(css$19.icon, iconPosition === 'right' ? css$19.iconAfter : css$19.iconBefore) }));
         return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             isIconBefore && iconElement,
-            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$1a.indent }, caption),
+            React__namespace.default.createElement(uuiComponents.Text, { cx: props.indent && css$19.indent }, caption),
             isIconAfter && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
                 iconElement))));
     };
     const isAnchor = Boolean(link || href);
-    const itemClassNames = uuiCore.cx(props.cx, css$1a.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
-    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$1a.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
+    const itemClassNames = uuiCore.cx(props.cx, css$19.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
+    return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$19.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isLinkActive: isActive, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
         getMenuButtonContent(),
         isSelected && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.default.createElement(uuiComponents.IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$1a.selectedMark })))));
+            React__namespace.default.createElement(uuiComponents.IconContainer, { icon: settings.dropdownMenu.icons.acceptIcon, cx: css$19.selectedMark })))));
 });
 function DropdownMenuSplitter(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$1a.splitterRoot) },
-        React__namespace.default.createElement("hr", { className: css$1a.splitter })));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$19.splitterRoot) },
+        React__namespace.default.createElement("hr", { className: css$19.splitter })));
 }
 function DropdownMenuHeader(props) {
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', props.cx, css$1a.headerRoot) },
-        React__namespace.default.createElement("span", { className: css$1a.header }, props.caption)));
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx('uui-dropdown-menu-header', props.cx, css$19.headerRoot) },
+        React__namespace.default.createElement("span", { className: css$19.header }, props.caption)));
 }
 function DropdownSubMenu(props) {
     const subMenuMiddleware = [
@@ -2144,7 +2148,7 @@ function DropdownSubMenu(props) {
         }),
     ];
     const isRtl = uuiCore.getDir() === 'rtl';
-    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$1a.submenuRootItemRtl : css$1a.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
+    return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', middleware: subMenuMiddleware, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$19.submenuRootItemRtl : css$19.submenuRootItem), icon: settings.dropdownMenu.icons.dropdownIcon, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
 }
 function DropdownMenuSwitchButton(props) {
     const context = React.useContext(uuiCore.UuiContext);
@@ -2160,29 +2164,29 @@ function DropdownMenuSwitchButton(props) {
             onHandleValueChange(!isSelected);
         }
     };
-    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$1a.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
-        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$1a.iconBefore }),
+    return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$19.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: () => onHandleValueChange(!isSelected), role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
+        icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$19.iconBefore }),
         React__namespace.default.createElement(uuiComponents.Text, null, caption),
         React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
         React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
 }
 
-var css$19 = {"root":"igBxfA","mode-block":"S5HBTQ","modeBlock":"S5HBTQ","mode-inline":"PccZL3","modeInline":"PccZL3","padding-0":"cWq-Rw","padding0":"cWq-Rw","padding-6":"n6v0kV","padding6":"n6v0kV","padding-12":"Oq8xGg","padding12":"Oq8xGg","padding-18":"nz1XSG","padding18":"nz1XSG"};
+var css$18 = {"root":"dQAJ3D","mode-block":"k1DyC2","modeBlock":"k1DyC2","mode-inline":"J6rO4s","modeInline":"J6rO4s","padding-0":"_-7HOVD","padding0":"_-7HOVD","padding-6":"LqG5bG","padding6":"LqG5bG","padding-12":"_5OryJn","padding12":"_5OryJn","padding-18":"pVCCRZ","padding18":"pVCCRZ"};
 
 function applyAccordionMods(mods) {
     return [
-        css$19.root,
-        css$19[`mode-${mods.mode || 'block'}`],
-        mods.padding && css$19['padding-' + mods.padding],
+        css$18.root,
+        css$18[`mode-${mods.mode || 'block'}`],
+        mods.padding && css$18['padding-' + mods.padding],
     ];
 }
 const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accordion, applyAccordionMods, (mods) => ({
     dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
 }));
 
-var css$18 = {"root":"_0pRiIA","align-items":"KWMAe1","alignItems":"KWMAe1","justify-content":"QVybHK","justifyContent":"QVybHK","border-top":"t9vtcj","borderTop":"t9vtcj","border-bottom":"S1IsKu","borderBottom":"S1IsKu","top-shadow":"xFfc7t","topShadow":"xFfc7t","padding":"_4HJcQM","margin":"mEA0Py","vPadding":"fy7Y-N","column-gap":"_44iZ3Y","columnGap":"_44iZ3Y","row-gap":"l1YDPy","rowGap":"l1YDPy","spacing":"y73yMB"};
+var css$17 = {"root":"Sgu4nd","align-items":"VPjfoc","alignItems":"VPjfoc","justify-content":"jDHkUV","justifyContent":"jDHkUV","border-top":"_1tgF40","borderTop":"_1tgF40","border-bottom":"AZDsIG","borderBottom":"AZDsIG","top-shadow":"u6JiMe","topShadow":"u6JiMe","padding":"_2aS-MV","margin":"GMeEtS","vPadding":"_6cVjKP","column-gap":"oQCWLx","columnGap":"oQCWLx","row-gap":"AeNjag","rowGap":"AeNjag","spacing":"wsQFNn"};
 
-const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$18.flexCell]);
+const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$17.flexCell]);
 
 const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
     if (process.env.NODE_ENV !== "production") {
@@ -2191,22 +2195,22 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         }
     }
     const classNames = uuiCore.cx([
-        css$18.root,
+        css$17.root,
         'uui-flex-row',
         props.onClick && uuiCore.uuiMarkers.clickable,
         props.cx,
         props.size !== null && 'uui-size-' + (props.size || settings.flexRow.sizes.default),
-        props.alignItems && css$18.alignItems,
-        props.justifyContent && css$18.justifyContent,
-        props.padding && css$18.padding,
-        props.vPadding && css$18.vPadding,
-        props.margin && css$18.margin,
-        props.topShadow && css$18.topShadow,
-        props.borderBottom && css$18.borderBottom,
-        props.borderTop && css$18.borderTop,
-        props.columnGap && css$18.columnGap,
-        props.rowGap && css$18.rowGap,
-        props.spacing && css$18.spacing,
+        props.alignItems && css$17.alignItems,
+        props.justifyContent && css$17.justifyContent,
+        props.padding && css$17.padding,
+        props.vPadding && css$17.vPadding,
+        props.margin && css$17.margin,
+        props.topShadow && css$17.topShadow,
+        props.borderBottom && css$17.borderBottom,
+        props.borderTop && css$17.borderTop,
+        props.columnGap && css$17.columnGap,
+        props.rowGap && css$17.rowGap,
+        props.spacing && css$17.spacing,
         props.background && `uui-flex-row-bg-${props.background}`,
     ]);
     let alignItemsValue = props.alignItems;
@@ -2232,22 +2236,22 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
         } }, props.children));
 });
 
-var css$17 = {"root":"DDuzYv","margin-24":"_7qD22x","margin24":"_7qD22x","padding-12":"wDYq8l","padding12":"wDYq8l","padding-24":"ZF0LxF","padding24":"ZF0LxF","shadow":"_9gAb2m","uui-surface-main":"_3vxtr2","uuiSurfaceMain":"_3vxtr2"};
+var css$16 = {"root":"gf-eCt","margin-24":"dXAmGD","margin24":"dXAmGD","padding-12":"zDPblx","padding12":"zDPblx","padding-24":"vofNmX","padding24":"vofNmX","shadow":"sJQbIt","uui-surface-main":"Vdv9cG","uuiSurfaceMain":"Vdv9cG"};
 
 const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
     'uui-panel',
-    css$17.root,
-    props.shadow && css$17.shadow,
-    props.margin && css$17['margin-' + props.margin],
-    props.background && css$17[`uui-${props.background}`],
+    css$16.root,
+    props.shadow && css$16.shadow,
+    props.margin && css$16['margin-' + props.margin],
+    props.background && css$16[`uui-${props.background}`],
 ]);
 
-var css$16 = {"root":"_9KDSLS"};
+var css$15 = {"root":"behYS0"};
 
 function applyLabeledInputMods(mods) {
     return [
         'uui-labeled-input',
-        css$16.root,
+        css$15.root,
         'uui-size-' + (mods.size || settings.labeledInput.sizes.default),
     ];
 }
@@ -2259,7 +2263,7 @@ function applyLabeledInputProps(props) {
 }
 const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
 
-var css$15 = {"root":"_6o5XEy"};
+var css$14 = {"root":"_4tbLrT"};
 
 function RadioGroup(props) {
     const direction = props.direction || 'vertical';
@@ -2268,26 +2272,22 @@ function RadioGroup(props) {
             props.onValueChange(newVal);
         }
     };
-    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$15.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
+    return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$14.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
         const { id, name, renderName, ...restItemProps } = i;
         return (React__namespace.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
     })));
 }
 
-var css$14 = {"root":"JOUn1j"};
+var css$13 = {"root":"iKEcaT"};
 
 function applyScrollBarsMods() {
     return [
-        css$14.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
+        css$13.root, 'uui-scroll-bars', 'uui-shadow-top', 'uui-shadow-bottom',
     ];
 }
 const ScrollBars = /* @__PURE__ */uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
 
-var css$13 = {"scroll-container":"F5vbr6","scrollContainer":"F5vbr6","list-container":"RRx9oa","listContainer":"RRx9oa"};
-
-var css$12 = {"root":"nRHmpk"};
-
-const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$12.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
+var css$12 = {"scroll-container":"VIa4R2","scrollContainer":"VIa4R2","list-container":"QEge5K","listContainer":"QEge5K"};
 
 const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
@@ -2301,7 +2301,7 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const scrollShadows = uuiCore.useScrollShadows({ root: scrollContainerRef.current });
     const renderRows = () => props.renderRows?.({
         listContainerRef, estimatedHeight, offsetY, scrollShadows,
-    }) || (React__namespace.createElement("div", { className: css$13.listContainer, style: { minHeight: `${estimatedHeight}px` } },
+    }) || (React__namespace.createElement("div", { className: css$12.listContainer, style: { minHeight: `${estimatedHeight}px` } },
         React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
     const renderView = ({ style }) => (React__namespace.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps, renderBlocker: props.renderBlocker }));
     const scrollBarsRef = React__namespace.useCallback((scrollbars) => {
@@ -2309,7 +2309,7 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
             return;
         scrollContainerRef.current = scrollbars.container.firstChild;
     }, []);
-    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$13.scrollContainer, props.cx, {
+    return (React__namespace.createElement(ScrollBars, { cx: uuiCore.cx(css$12.scrollContainer, props.cx, {
             [uuiCore.uuiMarkers.scrolledLeft]: scrollShadows.horizontalLeft,
             [uuiCore.uuiMarkers.scrolledRight]: scrollShadows.horizontalRight,
             [uuiCore.uuiMarkers.scrolledTop]: scrollShadows.verticalTop,
@@ -2331,7 +2331,7 @@ const VirtualListView = /* @__PURE__ */React__namespace.forwardRef((props, ref)
         props.renderBlocker ? props.renderBlocker({ isLoading: props.isLoading }) : React__namespace.createElement(Blocker, { isEnabled: props.isLoading })));
 });
 
-var css$11 = {"root":"_1BpLk4"};
+var css$11 = {"root":"hT4QsC"};
 
 function CheckboxGroup(props) {
     const currentValue = props.value || [];
@@ -2353,7 +2353,7 @@ function CheckboxGroup(props) {
     })));
 }
 
-var css$10 = {"root":"egKTZm","modal-blocker":"Uk6n2-","modalBlocker":"Uk6n2-","animateModalBlocker":"vulKRS","modal":"_7hjSOZ","modal-footer":"h7uHPg","modalFooter":"h7uHPg","border-top":"e860Ns","borderTop":"e860Ns","modal-header":"EGf25S","modalHeader":"EGf25S","border-bottom":"zD8NrG","borderBottom":"zD8NrG"};
+var css$10 = {"root":"jt9-e8","modal-blocker":"_4g96UD","modalBlocker":"_4g96UD","animateModalBlocker":"-KkOwR","modal":"WoloJs","modal-footer":"tGgdt7","modalFooter":"tGgdt7","border-top":"STSaep","borderTop":"STSaep","modal-header":"BZ7G4j","modalHeader":"BZ7G4j","border-bottom":"nminiJ","borderBottom":"nminiJ"};
 
 const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$10.modalBlocker]);
 const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$10.root, css$10.modal], (props) => {
@@ -2544,7 +2544,7 @@ const TREE_SHAKEABLE_INIT = () => ({
 });
 const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
 
-var css$$ = {"root":"_3Y30lP","icon-wrapper":"_9YtIXR","iconWrapper":"_9YtIXR","action-wrapper":"YBelCQ","actionWrapper":"YBelCQ","close-icon":"_7tG1dO","closeIcon":"_7tG1dO","main-path":"imvgvk","mainPath":"imvgvk","content":"BPo9K9","close-wrapper":"_3l9OVe","closeWrapper":"_3l9OVe","clear-notifications":"yeTOS5","clearNotifications":"yeTOS5"};
+var css$$ = {"root":"AnFjUZ","icon-wrapper":"r6Zi6F","iconWrapper":"r6Zi6F","action-wrapper":"yswwBK","actionWrapper":"yswwBK","close-icon":"Geio6J","closeIcon":"Geio6J","main-path":"b4uyxZ","mainPath":"b4uyxZ","content":"rAtmZc","close-wrapper":"_6vrSFf","closeWrapper":"_6vrSFf","clear-notifications":"_8SrL5f","clearNotifications":"_8SrL5f"};
 
 const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
     const notificationCardNode = React__namespace.default.useRef(null);
@@ -2577,7 +2577,7 @@ function ClearNotification() {
         React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
 }
 
-var css$_ = {"footer":"TvwoH-"};
+var css$_ = {"footer":"i3jbHu"};
 
 class ConfirmationModal extends React__namespace.Component {
     render() {
@@ -2619,7 +2619,7 @@ function useReliableForceUpdate() {
     return red[1];
 }
 
-var css$Z = {"root":"mhR-82","container":"vIDsNW"};
+var css$Z = {"root":"CjyBO9","container":"_4FF1Fs"};
 
 const defaultFormat = 'MMM D, YYYY';
 const valueFormat = 'YYYY-MM-DD';
@@ -2638,7 +2638,7 @@ const defaultRangeValue = {
     from: null,
     to: null,
 };
-const getMonthOnOpen = (selectedDate, focus) => {
+const getDisplayedMonth = (selectedDate, focus) => {
     if (selectedDate.from && selectedDate.to && focus) {
         return uuiDayjs.dayjs(selectedDate[focus]);
     }
@@ -2747,6 +2747,13 @@ const getPrevYearsList = (currentDate) => {
 const getNextYearsList = (currentDate) => {
     return currentDate.add(16, 'year');
 };
+const isValidAndInFilter = (dateValue, inputType, filter) => {
+    if (!dateValue[inputType])
+        return false;
+    if (!isValidRange(dateValue))
+        return false;
+    return !(filter && filter(uuiDayjs.dayjs(dateValue[inputType])) === false);
+};
 
 const uuiHeader = {
     container: 'uui-datepicker-header-container',
@@ -2830,14 +2837,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
             React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
 }
 
-var css$Y = {"root":"Ed-Un6"};
+var css$Y = {"root":"AhmaUp"};
 
 function applyDateSelectionMods() {
     return [css$Y.root, `uui-size-${settings.datePicker.sizes.body}`];
 }
 const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
 
-var css$X = {"root":"_3y7XoI"};
+var css$X = {"root":"pGZDV6"};
 
 const uuiDatePickerBody = {
     wrapper: 'uui-datepicker-body-wrapper',
@@ -2958,7 +2965,7 @@ function DatePickerComponent(props, ref) {
 }
 const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
 
-var css$W = {"date-input":"jBp7Er","dateInput":"jBp7Er","root":"_5tjk0d","separator":"wsFGUM"};
+var css$W = {"date-input":"bPkzMM","dateInput":"bPkzMM","root":"PKnP6p","separator":"FSvNvJ"};
 
 const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
     const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
@@ -2966,10 +2973,15 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
         setInputValue(toCustomDateRangeFormat(value, format));
     }, [format, value, setInputValue]);
     const onInputChange = (newValue, inputType) => {
-        setInputValue({
+        const updatedInputValue = {
             ...inputValue,
             [inputType]: newValue,
-        });
+        };
+        setInputValue(updatedInputValue);
+        const selectedDate = toValueDateRangeFormat(updatedInputValue, format);
+        if (isValidAndInFilter(selectedDate, inputType, filter)) {
+            onValueChange(selectedDate);
+        }
     };
     const handleFocus = (event, inputType) => {
         onFocusInput(event, inputType);
@@ -2981,20 +2993,20 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
             to: !preventEmptyToDate,
         };
         const selectedDate = toValueDateRangeFormat(inputValue, format);
-        // If new value is null and input can't be empty, set the value to the last selected value
+        // If the new value is null and the input can't be empty, set the value to the last selected value
         if (selectedDate[inputType] === null && !canBeEmpty[inputType]) {
             selectedDate[inputType] = value[inputType];
         }
-        const isDateDisabled = filter?.(uuiDayjs.dayjs(selectedDate[inputType])) === false;
-        if (isValidRange(selectedDate) && !isDateDisabled) {
+        if (isValidAndInFilter(selectedDate, inputType, filter)) {
             setInputValue(toCustomDateRangeFormat(selectedDate, format));
             onValueChange(selectedDate);
         }
         else {
+            const newInputValue = !canBeEmpty[inputType] ? toCustomDateRangeFormat(value, format)[inputType] : null;
             const newValue = !canBeEmpty[inputType] ? value[inputType] : null;
             setInputValue({
                 ...inputValue,
-                [inputType]: newValue,
+                [inputType]: newInputValue,
             });
             onValueChange({
                 ...selectedDate,
@@ -3024,7 +3036,7 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
         React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$W.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, onCancel: clearAllowed ? onClear : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
 });
 
-var css$V = {"root":"-T30ph"};
+var css$V = {"root":"rrMgXH"};
 
 const uuiPresets = {
     container: 'uui-presets-container',
@@ -3044,7 +3056,7 @@ function CalendarPresets(props) {
         getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
 }
 
-var css$U = {"root":"WM6gjq","container":"_0NHtjT","day-selection":"rHLVGV","daySelection":"rHLVGV","from-picker":"XxCUXT","fromPicker":"XxCUXT","to-picker":"SaA1RH","toPicker":"SaA1RH","bodes-wrapper":"_8g-FRD","bodesWrapper":"_8g-FRD","blocker":"-Swj-3"};
+var css$U = {"root":"NxOWWb","container":"ZYuqFJ","day-selection":"MonZ7Q","daySelection":"MonZ7Q","from-picker":"Sw3Hz-","fromPicker":"Sw3Hz-","to-picker":"uxOJ-1","toPicker":"uxOJ-1","bodes-wrapper":"PGSpMi","bodesWrapper":"PGSpMi","blocker":"fymY1c"};
 
 const uuiRangeDatePickerBody = {
     inRange: 'uui-range-datepicker-in-range',
@@ -3123,10 +3135,10 @@ function RangeDatePickerBodyComp(props, ref) {
     const { value: _value, filter } = props;
     const { selectedDate: _selectedDate, inFocus, } = _value;
     const selectedDate = _selectedDate || defaultRangeValue; // also handles null in comparison to default value
-    const [activeMonth, setActiveMonth] = React.useState(inFocus);
     const [view, setView] = React.useState('DAY_SELECTION');
+    const [disabledPanel, setDisabledPanel] = React.useState(null);
     const [month, setMonth] = React.useState(() => {
-        return getMonthOnOpen(selectedDate, inFocus);
+        return getDisplayedMonth(selectedDate, inFocus);
     });
     const getRange = (newValue) => {
         if (!filter || filter(uuiDayjs.dayjs(newValue))) {
@@ -3138,7 +3150,7 @@ function RangeDatePickerBodyComp(props, ref) {
             }
         }
     };
-    const onBodyValueChange = (v, part) => {
+    const onBodyValueChange = (v) => {
         // selectedDate can be null, other params should always have values
         const newRange = v ? getRange(v) : selectedDate;
         let newInFocus = null;
@@ -3147,25 +3159,28 @@ function RangeDatePickerBodyComp(props, ref) {
         if (inFocus === 'from' && fromChanged) {
             newInFocus = 'to';
         }
-        else if (inFocus === 'to' && toChanged) {
+        else if (inFocus === 'to' && toChanged && !fromChanged) { // for the case when we change the value "to" less than the value "from" and do not want to get stuck on the focus "from"
             newInFocus = 'from';
         }
-        setActiveMonth(part);
         props.onValueChange({
             selectedDate: newRange ? newRange : selectedDate,
             inFocus: newInFocus ?? inFocus,
         });
     };
     const renderDay = (renderProps) => {
-        return (React__namespace.default.createElement(uuiComponents.Day, { ...renderProps, cx: getDayCX(renderProps.value, selectedDate) }));
+        const { inRange, isFirst, isLast } = getDayState(renderProps.value, selectedDate);
+        return (React__namespace.default.createElement(uuiComponents.Day, { ...renderProps, cx: getDayCX({ inRange, isFirst, isLast }), rawProps: {
+                ...renderProps.rawProps,
+                'aria-selected': (isFirst || isLast || inRange) ? 'true' : undefined,
+            } }));
     };
     const from = {
         month,
-        view: activeMonth === 'from' ? view : 'DAY_SELECTION',
+        view: disabledPanel === 'right' ? view : 'DAY_SELECTION',
         value: null,
     };
     const to = {
-        view: activeMonth === 'to' ? view : 'DAY_SELECTION',
+        view: disabledPanel === 'left' ? view : 'DAY_SELECTION',
         month: month.add(1, 'month'),
         value: null,
     };
@@ -3175,6 +3190,7 @@ function RangeDatePickerBodyComp(props, ref) {
             React__namespace.default.createElement(CalendarPresets, { onPresetSet: (presetVal) => {
                     // enable day if smth other were selected
                     setView('DAY_SELECTION');
+                    setDisabledPanel(null);
                     setMonth(uuiDayjs.dayjs(presetVal.from));
                     props.onValueChange({
                         inFocus: props.value.inFocus,
@@ -3185,25 +3201,44 @@ function RangeDatePickerBodyComp(props, ref) {
                     });
                 }, presets: presets })));
     };
-    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default(css$U.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
+    uuiCore.useLayoutEffectSafeForSsr(() => {
+        const monthToSet = getDisplayedMonth(selectedDate, inFocus);
+        // To avoid re-rendering the body if the current month being displayed is equal to or greater than 1
+        const shouldNotIgnoreUpdate = !(uuiDayjs.dayjs(month).isSame(monthToSet, 'month') || uuiDayjs.dayjs(month).add(1, 'month').isSame(monthToSet, 'month'));
+        if (shouldNotIgnoreUpdate) {
+            setMonth(monthToSet);
+        }
+    }, [selectedDate]);
+    return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default(css$U.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps, "aria-multiselectable": "true" },
         React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$U.daySelection, css$U.container], alignItems: "top" },
             React__namespace.default.createElement(FlexCell, { width: "auto" },
                 React__namespace.default.createElement(FlexRow, null,
                     React__namespace.default.createElement(FlexRow, { cx: css$U.bodesWrapper, alignItems: "top" },
-                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx__default.default(css$U.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
+                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: cx__default.default(css$U.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m);
-                            }, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
-                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx__default.default(css$U.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
+                            }, onViewChange: (v) => {
+                                setView(v);
+                                setDisabledPanel(v !== 'DAY_SELECTION' ? 'right' : null);
+                            }, filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: disabledPanel === 'left' }),
+                        React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: cx__default.default(css$U.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v), onMonthChange: (m) => {
                                 setMonth(m.subtract(1, 'month'));
-                            }, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
+                            }, onViewChange: (v) => {
+                                setView(v);
+                                setDisabledPanel(v !== 'DAY_SELECTION' ? 'left' : null);
+                            }, filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: disabledPanel === 'right' }),
                         view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
-                                left: activeMonth === 'from' ? '50%' : undefined,
-                                right: activeMonth === 'to' ? '50%' : undefined,
+                                left: disabledPanel === 'right' ? '50%' : undefined,
+                                right: disabledPanel === 'left' ? '50%' : undefined,
                             }, className: css$U.blocker }))),
                     props.presets && renderPresets(props.presets)),
                 props.renderFooter && props.renderFooter()))));
 }
-const getDayCX = (day, selectedDate) => {
+const getDayCX = ({ inRange, isFirst, isLast }) => {
+    return [
+        cx__default.default(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (isFirst || isLast) && uuiComponents.uuiDaySelection.selectedDay),
+    ];
+};
+const getDayState = (day, selectedDate) => {
     const dayValue = day.valueOf();
     const fromValue = selectedDate?.from
         ? uuiDayjs.dayjs(selectedDate.from).valueOf() : null;
@@ -3216,10 +3251,14 @@ const getDayCX = (day, selectedDate) => {
         && fromValue !== toValue;
     const isFirst = dayValue === fromValue;
     const isLast = dayValue === toValue;
-    return [cx__default.default(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiComponents.uuiDaySelection.selectedDay)];
+    return {
+        inRange,
+        isFirst,
+        isLast,
+    };
 };
 
-var css$T = {"dropdown-container":"_0v0kPf","dropdownContainer":"_0v0kPf"};
+var css$T = {"dropdown-container":"_5wkUT1","dropdownContainer":"_5wkUT1"};
 
 function RangeDatePickerComponent(props, ref) {
     const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
@@ -3287,7 +3326,7 @@ function RangeDatePickerComponent(props, ref) {
 }
 const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
 
-var css$S = {"root":"KpIg3e","blocker":"ol6siE","marker":"U7lco-","top":"E2r-V4","bottom":"g--05h","left":"GSz3BS","right":"Cv5nmb","inside":"_88Xp6-"};
+var css$S = {"root":"najlzD","blocker":"dUeeTz","marker":"Z-HdM4","top":"iSgGpi","bottom":"_0Z6PoL","left":"YC4Jtv","right":"PqYfn8","inside":"OqGC9v"};
 
 function DropMarker(props) {
     return props.isDndInProgress
@@ -3304,15 +3343,15 @@ function DropMarker(props) {
 
 const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
 
-var css$R = {"search-wrapper":"l-MNdY","searchWrapper":"l-MNdY","no-data":"_1wNcxe","noData":"_1wNcxe"};
+var css$R = {"search-wrapper":"E9-CfX","searchWrapper":"E9-CfX","no-data":"GC--fv","noData":"GC--fv"};
 
-var css$Q = {"picker-row":"NLAjFi","pickerRow":"NLAjFi","align-widgets-top":"QGfZGK","alignWidgetsTop":"QGfZGK","row-content":"tUS-kI","rowContent":"tUS-kI","align-widgets-center":"yuOIB0","alignWidgetsCenter":"yuOIB0","icon-container":"-aWZLG","iconContainer":"-aWZLG","content-wrapper":"XWHvOA","contentWrapper":"XWHvOA","icon-wrapper":"_389sAs","iconWrapper":"_389sAs","icon-default":"XbviO-","iconDefault":"XbviO-","selected-mark":"_9lvyCG","selectedMark":"_9lvyCG"};
+var css$Q = {"picker-row":"IENZmX","pickerRow":"IENZmX","align-widgets-top":"_3nqfGp","alignWidgetsTop":"_3nqfGp","row-content":"GQxlaW","rowContent":"GQxlaW","align-widgets-center":"_0w6F-t","alignWidgetsCenter":"_0w6F-t","icon-container":"D-vOhU","iconContainer":"D-vOhU","content-wrapper":"ObaiU-","contentWrapper":"ObaiU-","icon-wrapper":"fexHlt","iconWrapper":"fexHlt","icon-default":"OeWOXU","iconDefault":"OeWOXU","selected-mark":"ijNUQE","selectedMark":"ijNUQE"};
 
-var css$P = {"root":"WKTzRk"};
+var css$P = {"root":"XLkYIx"};
 
 const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$P.root]);
 
-var css$O = {"root":"e8oUpK"};
+var css$O = {"root":"_8RY-71"};
 
 const DEFAULT_FILL = 'solid';
 function applyBadgeMods(mods) {
@@ -3340,7 +3379,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
         props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
 });
 
-var css$N = {"root":"w34d1p"};
+var css$N = {"root":"IusQf-"};
 
 function applyTagMods(props) {
     return [
@@ -3368,7 +3407,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
         props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
 });
 
-var css$M = {"root":"jav1ol","page":"DR2-Kh","spacer":"dGLATb","mode-ghost":"S142Rd","modeGhost":"S142Rd"};
+var css$M = {"root":"_0e4mfv","page":"_7q9T0z","spacer":"F4-tp8","mode-ghost":"_2B9cZ7","modeGhost":"_2B9cZ7"};
 
 function Paginator(props) {
     const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default(css$M.root, 'uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
@@ -3385,14 +3424,14 @@ function Paginator(props) {
     return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
 }
 
-var css$L = {"root":"qRAGls","progress-bar":"gJDY35","progressBar":"gJDY35","progressBar-indeterminate":"-Gl6Lc","progressBarIndeterminate":"-Gl6Lc","size-12":"_8ibStK","size12":"_8ibStK","size-18":"fZTPYk","size18":"fZTPYk","size-24":"ZfBr-G","size24":"ZfBr-G"};
+var css$L = {"root":"r2vUNB","progress-bar":"GWYAA8","progressBar":"GWYAA8","progressBar-indeterminate":"XJkBZu","progressBarIndeterminate":"XJkBZu","size-12":"t--fFm","size12":"t--fFm","size-18":"qZcH9F","size18":"qZcH9F","size-24":"avi5rx","size24":"avi5rx"};
 
 const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$L.root, css$L[`size-${props.size || 12}`]) },
         React__namespace.createElement("div", { className: cx__default.default(css$L.progressBar) })));
 });
 
-var css$K = {"root":"_6XrlaX","striped":"vLMCuU","animate-stripes":"zLGfMt","animateStripes":"zLGfMt","size-12":"_4Sq8YK","size12":"_4Sq8YK","size-18":"b9g80x","size18":"b9g80x","size-24":"Mg1SvV","size24":"Mg1SvV"};
+var css$K = {"root":"wUNkKD","striped":"Gx0wDA","animate-stripes":"Bkplza","animateStripes":"Bkplza","size-12":"Hx-djV","size12":"Hx-djV","size-18":"-uvxzh","size18":"-uvxzh","size-24":"_3pPC0I","size24":"_3pPC0I"};
 
 const DEFAULT_SIZE = '12';
 function applyProgressBarMods(mods) {
@@ -3407,14 +3446,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
     hideLabel: props.hideLabel || props.striped,
 }));
 
-var css$J = {"root":"S-GYBA"};
+var css$J = {"root":"WnB--B"};
 
 const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { progress } = props;
     return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$J.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$J.root, props.cx) }));
 });
 
-var css$I = {"root":"aagVa-"};
+var css$I = {"root":"_6lfqXV"};
 
 const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
     return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
@@ -3429,7 +3468,7 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
         React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
 });
 
-var css$H = {"drag-handle":"T-Rosm","dragHandle":"T-Rosm","icon-container":"bRnhvH","iconContainer":"bRnhvH"};
+var css$H = {"drag-handle-wrapper":"jmFD9Q","dragHandleWrapper":"jmFD9Q","with-indent":"CVXzpz","withIndent":"CVXzpz","drag-handle":"_4hzyg8","dragHandle":"_4hzyg8","icon-container":"_1NL-wM","iconContainer":"_1NL-wM"};
 
 function DataRowAddons(props) {
     const row = props.rowProps;
@@ -3440,7 +3479,8 @@ function DataRowAddons(props) {
         return settings.dataTable.sizes.body.indentWidthMap[props.size || settings.dataTable.sizes.body.row];
     };
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
-        row.dnd?.srcData && React__namespace.default.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$H.dragHandle, rawProps: { ...props.eventHandlers } }),
+        row.dnd?.srcData && (React__namespace.default.createElement("div", { key: "dh", className: cx__default.default(css$H.dragHandleWrapper, row.indent > 0 && css$H.withIndent), style: { width: row.indent > 0 ? (getIndent() + getWidth()) : 0 }, ...props.eventHandlers },
+            React__namespace.default.createElement(uuiComponents.DragHandle, { cx: css$H.dragHandle }))),
         row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.dataTable.sizes.body.checkboxMap[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
         row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
                 'aria-label': row.isFolded ? 'Unfold' : 'Fold',
@@ -3515,7 +3555,7 @@ const getHighlightedSearchMatches = (str, search) => {
     return getDecoratedText(str, ranges);
 };
 
-var css$G = {"root":"dbfuN1","column-gap":"mvjCat","columnGap":"mvjCat","title":"muaxPw","subtitle":"NQ5jwP","disabled":"Up4Tx0","multiline":"FiAt48"};
+var css$G = {"root":"e3GVrt","column-gap":"bm68Rc","columnGap":"bm68Rc","title":"mvJpb-","subtitle":"TrDlgx","disabled":"EJFvu6","multiline":"yS-p-3"};
 
 function PickerItem(props) {
     const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
@@ -3538,6 +3578,9 @@ function getAvatarSize(size, isMultiline) {
 
 function DataPickerRow(props) {
     const rowNode = React__namespace.useRef(null);
+    const handleMouseEnter = React.useCallback(() => {
+        props.onFocus && props.onFocus(props.index);
+    }, [props.onFocus, props.index]);
     React__namespace.useEffect(() => {
         if (props.onFocus) {
             rowNode.current?.addEventListener('mouseenter', handleMouseEnter);
@@ -3545,10 +3588,7 @@ function DataPickerRow(props) {
         return () => {
             rowNode.current?.removeEventListener('mouseenter', handleMouseEnter);
         };
-    }, [props.onFocus]);
-    const handleMouseEnter = () => {
-        props.onFocus && props.onFocus(props.index);
-    };
+    }, [props.onFocus, handleMouseEnter]);
     const getSubtitle = ({ path }) => {
         if (!props.dataSourceState?.search)
             return;
@@ -3660,6 +3700,7 @@ function DataPickerBody({ highlightSearchMatches = true, ...props }) {
             ? renderEmpty() : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, rawProps: {
                 'aria-multiselectable': props.selectionMode === 'multi' ? true : null,
                 'aria-orientation': 'vertical',
+                tabIndex: -1,
                 ...props.rawProps,
             }, rowsCount: props.rowsCount, isLoading: props.isReloading, renderBlocker: settings.pickerInput.renderBlocker })))));
 }
@@ -3688,7 +3729,7 @@ function DataPickerFooterImpl(props) {
 }
 const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
 
-var css$F = {"header":"G8--h7","title":"byYA09","close":"St7FUt"};
+var css$F = {"header":"mRkDIc","title":"_51WdNU","close":"_6NpHF7"};
 
 const DataPickerMobileHeaderImpl = (props) => {
     const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
@@ -3698,7 +3739,7 @@ const DataPickerMobileHeaderImpl = (props) => {
 };
 const DataPickerMobileHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerMobileHeaderImpl);
 
-var css$E = {"done":"_2rva64","container":"J-9vn6"};
+var css$E = {"done":"_9tYeeQ","container":"U5Reh2"};
 
 const PickerBodyMobileView = (props) => {
     const isMobileView = uuiCore.isMobile();
@@ -3710,7 +3751,7 @@ const PickerBodyMobileView = (props) => {
         isMobileView && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
 };
 
-var css$D = {"sub-header-wrapper":"dVm3kj","subHeaderWrapper":"dVm3kj","switch":"QWfr-o","no-found-modal-container":"K-Djjr","noFoundModalContainer":"K-Djjr","no-found-modal-container-icon":"j-Qyoz","noFoundModalContainerIcon":"j-Qyoz","no-found-modal-container-text":"dPYjBa","noFoundModalContainerText":"dPYjBa","body":"vjZEwS"};
+var css$D = {"sub-header-wrapper":"Ore2Y8","subHeaderWrapper":"Ore2Y8","switch":"dvqMMZ","no-found-modal-container":"rfcl6F","noFoundModalContainer":"rfcl6F","no-found-modal-container-icon":"iW93Vi","noFoundModalContainerIcon":"iW93Vi","no-found-modal-container-text":"MFR6Li","noFoundModalContainerText":"MFR6Li","body":"ht8gVI"};
 
 function PickerModal(props) {
     const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
@@ -3734,6 +3775,7 @@ function PickerModal(props) {
             React__namespace.default.createElement(Text, { cx: css$D.noFoundModalContainerText, fontSize: "12", lineHeight: "18", color: "primary" }, i18n.dataPickerBody.noRecordsSubTitle)));
     };
     const dataRows = getRows();
+    const isSearching = dataSourceState.search && dataSourceState.search.length > 0;
     return (React__namespace.default.createElement(ModalBlocker, { ...props },
         React__namespace.default.createElement(ModalWindow, { width: 600, height: 700, cx: css$D.body },
             React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
@@ -3746,13 +3788,13 @@ function PickerModal(props) {
                             rows: dataRows,
                             searchPosition: 'body',
                         }, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
-                !isSingleSelect() && (React__namespace.default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
+                !isSingleSelect() && (React__namespace.default.createElement(Switch, { cx: css$D.switch, size: settings.pickerInput.sizes.body.footerSwitchMap[settings.pickerInput.sizes.body.row], ...getFooterProps().showSelected, isDisabled: isSearching || view.getSelectedRowsCount() < 1, label: "Show only selected" })),
                 props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
             React__namespace.default.createElement(DataPickerBody, { ...getListProps(), value: dataSourceState, onValueChange: handleDataSourceValueChange, showSearch: false, getName: getName, rows: dataRows, renderRow: renderRow, renderEmpty: renderNotFound, size: settings.pickerInput.sizes.body.row }),
             React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
 }
 
-var css$C = {"tooltip":"Hu1soM"};
+var css$C = {"tooltip":"hiMpzp"};
 
 const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const tagProps = {
@@ -3771,7 +3813,7 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
     }
 });
 
-var css$B = {"root":"pZhKuA"};
+var css$B = {"root":"_22aNtW"};
 
 const defaultMode = EditMode.FORM;
 function applyPickerTogglerMods(mods) {
@@ -3853,7 +3895,7 @@ function PickerInputComponent(props, ref) {
 }
 const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
 
-var css$A = {"row":"iLEI5t"};
+var css$A = {"row":"MsehXJ"};
 
 function PickerListRow(props) {
     let label;
@@ -3873,7 +3915,7 @@ function PickerListRow(props) {
     return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
 }
 
-var css$z = {"root":"YFhIIG"};
+var css$z = {"root":"vt2804"};
 
 function PickerList(props) {
     const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
@@ -3908,7 +3950,7 @@ function PickerList(props) {
             }, selectedRows)));
 }
 
-var css$y = {"root":"J6u5Rl","wrapper":"wEUGOs","align-widgets-top":"tyb-Wa","alignWidgetsTop":"tyb-Wa","align-widgets-center":"KGCsWH","alignWidgetsCenter":"KGCsWH"};
+var css$y = {"root":"wuVH3d","wrapper":"Tr7nMb","align-widgets-top":"B1Um3p","alignWidgetsTop":"B1Um3p","align-widgets-center":"pR-RRK","alignWidgetsCenter":"pR-RRK"};
 
 function DataTableCell(initialProps) {
     const props = { ...initialProps };
@@ -3958,7 +4000,7 @@ function DataTableCell(initialProps) {
     return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
 }
 
-var css$x = {"root":"DIMwGs"};
+var css$x = {"root":"p6Ecu6"};
 
 // 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.
@@ -3974,7 +4016,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
     ];
 }, () => propsMods);
 
-var css$w = {"sorting-panel-container":"WbpVEt","sortingPanelContainer":"WbpVEt"};
+var css$w = {"sorting-panel-container":"eeMlQW","sortingPanelContainer":"eeMlQW"};
 
 const SortingPanelImpl = ({ sortDirection, onSort }) => {
     const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
@@ -3994,7 +4036,7 @@ const ColumnHeaderDropdownImpl = (props) => {
 };
 const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
 
-var css$v = {"root":"-bzMuw","caption-wrapper":"HN7FXw","captionWrapper":"HN7FXw","sort-icon":"_0OFDyv","sortIcon":"_0OFDyv","dropdown-icon":"KBG2js","dropdownIcon":"KBG2js","infoIcon":"ZSTdXn","align-right":"Xe8qVc","alignRight":"Xe8qVc","align-center":"Imna9k","alignCenter":"Imna9k","caption":"BmE5sw","truncate":"V97P39","upper-case":"n8tP3l","upperCase":"n8tP3l","checkbox":"_9j0xfv","icon":"mCLl9J","fold-all-icon":"TggrO1","foldAllIcon":"TggrO1","cell-tooltip":"sx58T3","cellTooltip":"sx58T3","resizing-marker":"a7bz5P","resizingMarker":"a7bz5P","pinned-right":"hAUblH","pinnedRight":"hAUblH","draggable":"Q3ISqn","ghost":"p78RY1","is-dragged-out":"HudfRt","isDraggedOut":"HudfRt","dnd-marker-left":"HeRJA9","dndMarkerLeft":"HeRJA9","dnd-marker-right":"_5TD-QC","dndMarkerRight":"_5TD-QC","cell-tooltip-wrapper":"_9kn3K7","cellTooltipWrapper":"_9kn3K7","cell-tooltip-text":"Xosw2U","cellTooltipText":"Xosw2U","tooltip-caption":"KsulYf","tooltipCaption":"KsulYf","tooltip-info":"zMo9fj","tooltipInfo":"zMo9fj"};
+var css$v = {"root":"Nvhg1M","caption-wrapper":"DTNVmH","captionWrapper":"DTNVmH","sort-icon":"saIZdw","sortIcon":"saIZdw","dropdown-icon":"iqmRP2","dropdownIcon":"iqmRP2","infoIcon":"uHMSfp","align-right":"ACkHAZ","alignRight":"ACkHAZ","align-center":"EIYI7q","alignCenter":"EIYI7q","caption":"s4KBbb","truncate":"BvV7rt","upper-case":"cnZ2Ax","upperCase":"cnZ2Ax","checkbox":"u9D-SV","icon":"_8otGhs","fold-all-icon":"ocDWDT","foldAllIcon":"ocDWDT","cell-tooltip":"xZXVCH","cellTooltip":"xZXVCH","resizing-marker":"qnUXBW","resizingMarker":"qnUXBW","pinned-right":"pygsm2","pinnedRight":"pygsm2","draggable":"XzrXu0","ghost":"sxiPzi","is-dragged-out":"vt-AV5","isDraggedOut":"vt-AV5","dnd-marker-left":"Vgyr4e","dndMarkerLeft":"Vgyr4e","dnd-marker-right":"_8LYGb-","dndMarkerRight":"_8LYGb-","cell-tooltip-wrapper":"T-Tkqj","cellTooltipWrapper":"T-Tkqj","cell-tooltip-text":"yB-WUL","cellTooltipText":"yB-WUL","tooltip-caption":"_1wsn8G","tooltipCaption":"_1wsn8G","tooltip-info":"qH5lhW","tooltipInfo":"qH5lhW"};
 
 class DataTableHeaderCell extends React__namespace.Component {
     constructor() {
@@ -4088,7 +4130,7 @@ class DataTableHeaderCell extends React__namespace.Component {
     }
 }
 
-var css$u = {"root":"vFoujo","caption-wrapper":"_3-bqgU","captionWrapper":"_3-bqgU","align-center":"UzdjrN","alignCenter":"UzdjrN","caption":"X37Jtf","truncate":"W1HuFK","upper-case":"_8GHGG6","upperCase":"_8GHGG6","group-cell-tooltip":"mLTFVt","groupCellTooltip":"mLTFVt","group-cell-tooltip-wrapper":"PeAabB","groupCellTooltipWrapper":"PeAabB","group-cell-tooltip-text":"PnGNE0","groupCellTooltipText":"PnGNE0","tooltip-caption":"NH25DW","tooltipCaption":"NH25DW","tooltip-info":"_2qkA6X","tooltipInfo":"_2qkA6X"};
+var css$u = {"root":"FNXhCI","caption-wrapper":"pHiU3C","captionWrapper":"pHiU3C","align-center":"HICqws","alignCenter":"HICqws","caption":"XmfBl-","truncate":"TK7YLw","upper-case":"_2NwQIp","upperCase":"_2NwQIp","group-cell-tooltip":"_3J-VlR","groupCellTooltip":"_3J-VlR","group-cell-tooltip-wrapper":"e6OW4z","groupCellTooltipWrapper":"e6OW4z","group-cell-tooltip-text":"_6YqnUH","groupCellTooltipText":"_6YqnUH","tooltip-caption":"Sa8-7k","tooltipCaption":"Sa8-7k","tooltip-info":"bcwVqd","tooltipInfo":"bcwVqd"};
 
 class DataTableHeaderGroupCell extends React__namespace.Component {
     constructor() {
@@ -4128,7 +4170,7 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
     }
 }
 
-var css$t = {"root":"KIkSOb"};
+var css$t = {"root":"RJuRam"};
 
 const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => ({
     renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
@@ -4136,6 +4178,85 @@ const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTab
     renderConfigButton: () => (React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.dataTable.sizes.header.iconMap[mods.size || settings.dataTable.sizes.header.row]}`], color: "neutral", icon: settings.dataTable.icons.header.configIcon })),
 }));
 
+const normalizeFilterWithPredicates = (filter) => {
+    if (!filter) {
+        return {};
+    }
+    const result = filter;
+    const keys = Object.keys(filter);
+    for (let n = 0; n < keys.length; n++) {
+        const key = keys[n];
+        const filterValue = filter[key];
+        if (filterValue && typeof filterValue === 'object') {
+            if (Object.keys(filterValue).length === 0) {
+                delete filter[key];
+                continue;
+            }
+            if ('from' in filterValue && 'to' in filterValue) {
+                continue;
+            }
+            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
+                delete filter[key];
+            }
+            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
+                delete filter[key];
+            }
+            if ('inRange' in filterValue) {
+                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
+                    delete filter[key];
+                }
+            }
+            if ('notInRange' in filterValue) {
+                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
+                    delete filter[key];
+                }
+            }
+            Object.keys(filterValue).forEach((predicate) => {
+                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
+                    delete filter[key];
+                }
+            });
+        }
+    }
+    return result;
+};
+const getValue = (predicate, value) => predicate ? value?.[predicate] : value;
+
+function FilterPredicatePanel(props) {
+    if (!props.predicates)
+        return null;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+        // This effect needs when the filter dropdown was closed and opened again
+        if (props.predicates && props.value && Object.keys(props.value).length > 0) {
+            const predicateFromValue = Object.keys(props.value)[0];
+            if (predicateFromValue !== props.predicate) {
+                props.setPredicate(predicateFromValue);
+            }
+        }
+    }, [props.value]);
+    const changePredicate = (val) => {
+        const isInRange = (p) => p === 'inRange' || p === 'notInRange';
+        if (props.type === 'numeric') {
+            let predicateValue = { [val]: getValue(props.predicate, props.value) };
+            if (isInRange(val) && !isInRange(props.predicate)) {
+                // from simple predicate -> to Range
+                predicateValue = { [val]: { from: null, to: null } };
+            }
+            else if (!isInRange(val) && isInRange(props.predicate)) {
+                // from Range -> to simple predicate
+                predicateValue = { [val]: null };
+            }
+            props.onValueChange(predicateValue);
+        }
+        else {
+            props.onValueChange({ [val]: getValue(props.predicate, props.value) });
+        }
+        props.setPredicate(val);
+    };
+    return (React__namespace.default.createElement(MultiSwitch, { items: props.predicates?.map((i) => ({ id: i.predicate, caption: i.name })), value: props.predicate, onValueChange: changePredicate, size: settings.filtersPanel.sizes.pickerBodyMultiSwitch }));
+}
+
 const UUI_FILTERS_PANEL_ADD_BUTTON = 'uui-filters-panel-add-button';
 const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
 const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
@@ -4145,315 +4266,647 @@ const UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION = 'uui-filters-panel-item-toggler
 const UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX = 'uui-filters-panel-item-toggler-postfix';
 const UUI_FILTERS_PANEL_BODY_FOOTER = 'uui-filters-panel-item-footer';
 
-var css$s = {"root":"cnnZ-z","title-wrapper":"xRhLvs","titleWrapper":"xRhLvs","title":"qHxAKj","text-wrapper":"JGk-Yq","textWrapper":"JGk-Yq","selection":"ZZCEgr","postfix":"qustLu","selected":"FDJZNL"};
+var css$s = {"body":"_3HU3Zx","header":"uEhpTF","title":"_8UyDiz","removeButton":"mAMDG4","with-search":"b0Lm1R","withSearch":"b0Lm1R"};
 
-const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
-    const togglerPickerOpened = (e) => {
-        if (props.isDisabled)
-            return;
-        e.preventDefault();
-        !uuiCore.isEventTargetInsideClickable(e) && props.onClick?.();
-    };
-    const onKeyDownHandler = (e) => {
-        if (props.isDisabled)
-            return;
-        if (e.key === 'Enter' && !props.isOpen) {
-            e.preventDefault();
-            props.toggleDropdownOpening(true);
+function FilterColumnBody(props) {
+    const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
+    const onValueChange = (value) => {
+        if (props.predicates) {
+            props.onValueChange({ [predicate]: value });
         }
-        if (e.key === 'Escape' && props.isOpen) {
-            e.preventDefault();
-            props.toggleDropdownOpening(false);
+        else {
+            props.onValueChange(value);
         }
     };
-    const getTitle = props.predicateName ? `${props.title} ${props.predicateName}` : `${props.title}${props.selection ? ':' : ''}`;
-    const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
-        React__namespace.createElement("div", { className: cx__default.default(css$s.selection, UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION) }, i),
-        (props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
-    return (React__namespace.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx__default.default(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, props.selection?.length > 0 && uuiCore.uuiMarkers.hasValue, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: ref },
-        React__namespace.createElement("div", { className: css$s.titleWrapper },
-            React__namespace.createElement("div", { className: cx__default.default(css$s.title, UUI_FILTERS_PANEL_ITEM_TOGGLER_TITLE) }, getTitle),
-            props.selection && (React__namespace.createElement("div", { className: css$s.textWrapper },
-                getSelectionText(),
-                props.postfix && (React__namespace.createElement("div", { className: cx__default.default(css$s.postfix, UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX) }, props.postfix))))),
-        !props.isDisabled && React__namespace.createElement(uuiComponents.IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
-});
-
-const pickerHeight = 300;
-function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
-    const props = { ...restProps, highlightSearchMatches };
-    const [dsState, setDsState] = React.useState({
-        focusedIndex: 0,
-        topIndex: 0,
-        visibleCount: 20,
-        checked: [],
-    });
-    const { showSelected, setShowSelected } = uuiComponents.useShowSelected({ dataSourceState: dsState });
-    const { view, getName, dataSourceState, getListProps, handleDataSourceValueChange, clearSelection, } = uuiComponents.usePickerApi({ ...props, dataSourceState: dsState, setDataSourceState: setDsState, showSelectedOnly: showSelected });
-    const prevValue = uuiCore.usePrevious(props.value);
-    const prevOpened = uuiCore.usePrevious(props.isOpen);
-    React__namespace.useLayoutEffect(() => {
-        if (prevOpened === props.isOpen && props.isOpen
-            && prevValue !== props.value && props.value !== props.emptyValue
-            && props.selectionMode === 'single') {
-            props.onClose();
-        }
-    }, [props.value]);
-    const renderFooter = () => {
-        const footerProps = {
-            view,
-            showSelected: {
-                value: showSelected,
-                onValueChange: setShowSelected,
-            },
-            clearSelection,
-            selectionMode: props.selectionMode,
-            selection: props.value,
-            search: dataSourceState.search,
+    const renderHeader = () => {
+        const panelProps = {
+            predicates: props.predicates,
+            predicate,
+            type: props.type,
+            onValueChange: props.onValueChange,
+            value: props.value,
+            setPredicate,
         };
-        return props.renderFooter
-            ? props.renderFooter(footerProps)
-            : React__namespace.createElement(DataPickerFooter, { ...footerProps, cx: UUI_FILTERS_PANEL_BODY_FOOTER, size: settings.pickerInput.sizes.body.row });
-    };
-    const renderBody = () => {
-        const rows = view.getVisibleRows();
-        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
-        const maxWidth = uuiCore.isMobile() ? undefined : 360;
-        const onKeyDown = (e) => uuiComponents.handleDataSourceKeyboard({
-            value: dataSourceState,
-            onValueChange: handleDataSourceValueChange,
-            listView: view,
-            searchPosition: 'body',
-            rows,
-        }, e);
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(DataPickerBody, { ...getListProps(), selectionMode: props.selectionMode, rows: rows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, showSearch: props.showSearch ?? true, getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults }),
-            renderFooter()));
+        return props.predicates?.length > 0 && (React__namespace.default.createElement("div", { className: css$s.header },
+            React__namespace.default.createElement(FilterPredicatePanel, { ...panelProps })));
     };
-    return renderBody();
+    return (React__namespace.default.createElement(DropdownContainer, { style: { minWidth: '360px' }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...props },
+        renderHeader(),
+        React__namespace.default.createElement(FilterItemBody, { ...props, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
 }
 
-const UUI_FILTERS_PANEL_DTP_FOOTER = 'uui-filters-panel-dtp-footer';
-function FilterDatePickerBodyFooter({ value, onValueChange }) {
-    return (React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
-        React__namespace.default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_DTP_FOOTER },
-            React__namespace.default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
-            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.default.createElement(LinkButton, { isDisabled: !value, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: () => onValueChange(undefined) }))));
-}
+const useColumnsWithFilters = (initialColumns, filters) => {
+    const makeFilterRenderCallback = React.useCallback((key) => function (filterLens, dropdownProps) {
+        const filter = filters?.find((f) => f.columnKey === key);
+        if (!filter)
+            return null;
+        const props = filterLens
+            .onChange((oldFilter, newFilter) => normalizeFilterWithPredicates(newFilter))
+            .prop(filter.field)
+            .toProps();
+        return React__namespace.default.createElement(FilterColumnBody, { ...props, ...filter, ...dropdownProps });
+    }, [filters]);
+    const columns = React.useMemo(() => {
+        if (filters) {
+            const filterKeys = filters.map((f) => f.columnKey);
+            const newColumns = (initialColumns.map((column) => {
+                if (filterKeys.includes(column.key)) {
+                    return {
+                        ...column,
+                        renderFilter: makeFilterRenderCallback(column.key),
+                    };
+                }
+                else {
+                    return column;
+                }
+            }));
+            return newColumns;
+        }
+        return initialColumns;
+    }, [filters, initialColumns]);
+    return columns;
+};
 
-function FilterDatePickerBody(props) {
-    const { value } = props;
-    const context = uuiCore.useUuiContext();
-    const handleValueChange = (newValue) => {
-        props.onValueChange(newValue);
-        if (props.getValueChangeAnalyticsEvent) {
-            const event = props.getValueChangeAnalyticsEvent(newValue, value);
-            context.uuiAnalytics.sendEvent(event);
+var css$r = {"unpin-icon":"eh7U0D","unpinIcon":"eh7U0D","pin-toggler-icon":"Fr-obk","pinTogglerIcon":"Fr-obk"};
+
+function PinIconButton(props) {
+    const i18nLocal = i18n.tables.columnsConfigurationModal;
+    const { onTogglePin, pinPosition, canUnpin, } = props;
+    const isPinned = !!pinPosition;
+    const isPinnedAlways = isPinned && !canUnpin;
+    let pinUnpinNode;
+    if (isPinned) {
+        const unpinIcon = getUnpinIcon({ isPinnedAlways, pinPosition });
+        const iconTooltip = isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
+        const unpinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(undefined);
+        pinUnpinNode = (React__namespace.createElement(Tooltip, { content: iconTooltip, placement: "bottom", color: "inverted" },
+            React__namespace.createElement(IconButton, { cx: uuiCore.cx(!isPinnedAlways && css$r.unpinIcon, css$r.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary" })));
+    }
+    else {
+        pinUnpinNode = (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
+                React__namespace.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
+            React__namespace.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
+                React__namespace.createElement(IconButton, { cx: css$r.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
+    }
+    return pinUnpinNode;
+}
+function getUnpinIcon(params) {
+    const { isPinnedAlways, pinPosition } = params;
+    if (isPinnedAlways) {
+        return settings.dataTable.icons.columnsConfigurationModal.lockIcon;
+    }
+    switch (pinPosition) {
+        case 'left': {
+            return settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon;
         }
-        if (newValue) {
-            props.onClose?.();
+        case 'right': {
+            return settings.dataTable.icons.columnsConfigurationModal.pinRightIcon;
         }
-    };
-    const handleBodyChange = (newValue) => {
-        if (newValue && value !== newValue) {
-            handleValueChange(newValue);
+        default: {
+            return;
         }
-    };
-    function renderFooter() {
-        const footerProps = {
-            value,
-            onValueChange: handleValueChange,
-        };
-        return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(FilterDatePickerBodyFooter, { ...footerProps });
     }
-    return (React__namespace.default.createElement(React.Fragment, null,
-        React__namespace.default.createElement(FlexRow, { borderBottom: true },
-            React__namespace.default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
-        renderFooter()));
 }
 
-const UUI_FILTERS_PANEL_RDTP_FOOTER = 'uui-filters-panel-rdtp-footer';
-function FilterRangeDatePickerBodyFooter(props) {
-    const shouldShowClearButton = (!props.preventEmptyToDate || !props.preventEmptyFromDate) && !props.disableClear;
-    return (React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
-        React__namespace.default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_RDTP_FOOTER },
-            React__namespace.default.createElement(RangeDatePickerInput, { size: settings.filtersPanel.sizes.rangeDatePickerInput, disableClear: props.disableClear, inFocus: props.inFocus, format: props.format, value: props.value, onValueChange: props.onValueChange, onFocusInput: (event, inputType) => {
-                    if (props.onFocus) {
-                        props.onFocus(event, inputType);
-                    }
-                    props.setInFocus(inputType);
-                }, onBlurInput: props.onBlur, preventEmptyFromDate: props.preventEmptyFromDate, preventEmptyToDate: props.preventEmptyToDate }),
-            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            shouldShowClearButton && (React__namespace.default.createElement(LinkButton, { isDisabled: !props.value.from && !props.value.to, caption: i18n.filterToolbar.rangeDatePicker.clearCaption, onClick: props.onClear })))));
-}
+var css$q = {"row-wrapper":"vDY-yw","rowWrapper":"vDY-yw","pin-icon-button":"nneSS1","pinIconButton":"nneSS1","not-pinned":"Qi47pL","notPinned":"Qi47pL","checkbox":"Hc7YrM","drag-handle":"YDYRBE","dragHandle":"YDYRBE","dnd-disabled":"ivCGDA","dndDisabled":"ivCGDA"};
 
-function FilterRangeDatePickerBody(props) {
-    const { value: _value, format = defaultFormat } = props;
-    const value = _value || defaultRangeValue; // also handles null in comparison to default value
-    const context = uuiCore.useUuiContext();
-    const onOpenChange = (newIsOpen) => {
-        {
-            props.onClose?.();
-        }
-        props.onOpenChange?.(newIsOpen);
+const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
+    const { column } = props;
+    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways, } = column;
+    const { isVisible, fix } = columnConfig;
+    const pinPosition = fix || (isPinnedAlways ? 'left' : undefined);
+    const isPinned = !!pinPosition;
+    const data = { column, columnConfig };
+    const renderContent = (dndActorParams) => {
+        const wrapperClasses = uuiCore.cx(css$q.rowWrapper, !isPinned && css$q.notPinned, dndActorParams.isDragGhost && uuiCore.uuiDndState.dragGhost, 'uui-dt-columns-config-row');
+        const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
+        const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
+        return (React__namespace.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
+            React__namespace.createElement(uuiComponents.DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: uuiCore.cx(css$q.dragHandle, !isDndAllowed && css$q.dndDisabled) }),
+            React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$q.checkbox }),
+            React__namespace.createElement(FlexRow, { size: null, cx: css$q.pinIconButton },
+                React__namespace.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
+            React__namespace.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
     };
-    const [inFocus, setInFocus] = React.useState('from');
-    const onValueChange = (newValue) => {
-        const fromChanged = value?.from !== newValue?.from;
-        const toChanged = value?.to !== newValue?.to;
-        if (fromChanged || toChanged) {
-            props.onValueChange(newValue);
-            if (props.getValueChangeAnalyticsEvent) {
-                const event = props.getValueChangeAnalyticsEvent(newValue, value);
-                context.uuiAnalytics.sendEvent(event);
-            }
+    return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
+});
+
+var css$p = {"root":"s04kRJ","main-panel":"iXtvL-","mainPanel":"iXtvL-","group":"bWdZLn","group-title":"gsyjrt","groupTitle":"gsyjrt","group-items":"PT80cI","groupItems":"PT80cI","no-data":"p7nD5M","noData":"p7nD5M","no-data-title":"c9VQ28","noDataTitle":"c9VQ28","no-data-sub-title":"kFsW2e","noDataSubTitle":"kFsW2e","h-divider":"worOEM","hDivider":"worOEM","search-area":"rAnxZ-","searchArea":"rAnxZ-","subgroup-accordion":"WtGrK3","subgroupAccordion":"WtGrK3","subgroup":"GuCRlB","subgroup-title":"-bnuYc","subgroupTitle":"-bnuYc"};
+
+const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$p.group },
+    React__namespace.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
+    React__namespace.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.dataTable.sizes.columnsConfigurationModal.countIndicator }),
+    React__namespace.createElement(uuiComponents.FlexSpacer, null)));
+function ColumnsConfigurationModal(props) {
+    const i18n$1 = i18n.tables.columnsConfigurationModal;
+    const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
+    const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = uuiComponents.useColumnsConfiguration({
+        initialColumnsConfig,
+        columns,
+        defaultConfig,
+        getSearchFields: props.getSearchFields,
+    });
+    const apply = React.useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
+    const close = React.useCallback(() => modalProps.abort(), [modalProps]);
+    const isNoData = React.useMemo(() => Object.values(groupedColumns).every((v) => !v.length), [groupedColumns]);
+    const renderVisible = () => {
+        const amountPinnedLeft = groupedColumns.displayedPinnedLeft.length;
+        const amountPinnedRight = groupedColumns.displayedPinnedRight.length;
+        const amountUnPinned = groupedColumns.displayedUnpinned.length;
+        const totalAmountOfVisibleColumns = amountPinnedLeft + amountUnPinned + amountPinnedRight;
+        if (!totalAmountOfVisibleColumns) {
+            return null;
         }
+        const hasDividerBelowPinnedLeft = !!(amountPinnedLeft && amountUnPinned);
+        const hasDividerAbovePinnedRight = !!(amountPinnedRight && amountUnPinned);
+        const divider = (React__namespace.createElement(FlexRow, { size: null, cx: css$p.hDivider }));
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            renderGroupTitle(i18n$1.displayedSectionTitle, totalAmountOfVisibleColumns),
+            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheLeftSubgroupTitle, items: groupedColumns.displayedPinnedLeft }),
+            hasDividerBelowPinnedLeft && divider,
+            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.notPinnedSubgroupTitle, items: groupedColumns.displayedUnpinned }),
+            hasDividerAbovePinnedRight && divider,
+            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheRightSubgroupTitle, items: groupedColumns.displayedPinnedRight })));
     };
-    const onBodyValueChange = (newValue) => {
-        setInFocus(newValue.inFocus ?? inFocus);
-        onValueChange(newValue.selectedDate);
-        const toChanged = value.to !== newValue.selectedDate.to;
-        const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
-            && inFocus === 'to'
-            && toChanged;
-        if (closeBody) {
-            onOpenChange(false);
+    const renderHidden = () => {
+        const items = groupedColumns.hidden;
+        const title = renderGroupTitle(i18n$1.hiddenSectionTitle, items.length);
+        if (!items.length) {
+            return null;
         }
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            title,
+            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
     };
-    const onClear = () => {
-        const newValue = {
-            from: props.preventEmptyFromDate ? value.from : null,
-            to: props.preventEmptyToDate ? value.to : null,
-        };
-        onValueChange(newValue);
-    };
-    function renderFooter() {
-        const footerProps = {
-            value,
-            onValueChange,
-            format: format,
-            disableClear: props.disableClear,
-            preventEmptyFromDate: props.preventEmptyFromDate,
-            preventEmptyToDate: props.preventEmptyToDate,
-            onFocus: props.onFocus,
-            onBlur: props.onBlur,
-            inFocus,
-            setInFocus,
-            onClear,
-        };
-        return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(FilterRangeDatePickerBodyFooter, { ...footerProps });
-    }
-    return (React__namespace.default.createElement(React.Fragment, null,
-        React__namespace.default.createElement(FlexRow, { borderBottom: true },
-            React__namespace.default.createElement(RangeDatePickerBody, { value: {
-                    selectedDate: value,
-                    inFocus,
-                }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets })),
-        renderFooter()));
+    const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
+    return (React__namespace.createElement(ModalBlocker, { ...modalProps },
+        React__namespace.createElement(ModalWindow, { cx: [css$p.root, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
+            React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
+            React__namespace.createElement(FlexRow, { borderBottom: true, cx: css$p.searchArea },
+                React__namespace.createElement(SearchInput, { size: settings.dataTable.sizes.columnsConfigurationModal.searchInput, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
+                React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(DropdownMenuBody, { minWidth: 100 },
+                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
+                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React__namespace.createElement(Button, { ...props, fill: "none", icon: settings.dataTable.icons.columnsConfigurationModal.menuIcon, size: settings.dataTable.sizes.columnsConfigurationModal.menuButton, color: "secondary", isDropdown: false })) })),
+            React__namespace.createElement(Panel, { background: "surface-main", cx: css$p.mainPanel },
+                React__namespace.createElement(ScrollBars, null,
+                    renderVisible(),
+                    renderHidden(),
+                    isNoData && (React__namespace.createElement(FlexRow, { cx: css$p.noData },
+                        React__namespace.createElement(Text, { cx: css$p.noDataTitle }, i18n$1.noResultsFound.title),
+                        React__namespace.createElement(Text, { cx: css$p.noDataSubTitle }, i18n$1.noResultsFound.subTitle))))),
+            React__namespace.createElement(ModalFooter, { borderTop: true },
+                React__namespace.createElement(LinkButton, { icon: settings.dataTable.icons.columnsConfigurationModal.resetIcon, caption: i18n$1.resetToDefaultButton, onClick: reset }),
+                React__namespace.createElement(uuiComponents.FlexSpacer, null),
+                React__namespace.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
+                !hasAnySelectedColumns ? (React__namespace.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
 }
-
-var css$r = {"container":"-Q0zF-"};
-
-function FilterNumericBody(props) {
-    const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
-    const isWrongRange = (from, to) => {
-        if (!to && to !== 0)
-            return false;
-        return from > to;
-    };
-    const rangeValueHandler = (type) => (val) => {
-        const value = props.value;
-        switch (type) {
-            case 'from': {
-                props.onValueChange({
-                    from: val,
-                    to: value?.to ?? null,
-                });
-                break;
-            }
-            case 'to': {
-                props.onValueChange({
-                    from: value?.from ?? null,
-                    to: val,
-                });
-                break;
-            }
+function SubGroup(props) {
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const { title, items, renderItem } = props;
+    const isCollapsible = !!title;
+    if (items.length) {
+        const content = (React__namespace.createElement(FlexRow, { cx: css$p.groupItems, size: settings.dataTable.sizes.columnsConfigurationModal.columnRow }, items.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
+        if (isCollapsible) {
+            const renderTitle = (isOpened) => {
+                const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
+                return (React__namespace.createElement(FlexRow, { cx: uuiCore.cx(css$p.subgroup) },
+                    React__namespace.createElement(uuiComponents.IconContainer, { icon: toggleIcon }),
+                    React__namespace.createElement(Text, { size: "none", color: "tertiary", cx: css$p.subgroupTitle }, title)));
+            };
+            return (React__namespace.createElement(uuiComponents.Accordion, { value: isExpanded, onValueChange: setIsExpanded, renderTitle: renderTitle, cx: css$p.subgroupAccordion }, content));
         }
-    };
-    const renderFooter = () => {
-        const clearSelection = () => {
-            if (isInRangePredicate) {
-                props.onValueChange({
-                    from: undefined,
-                    to: undefined,
-                });
-            }
-            else {
-                props.onValueChange(undefined);
-            }
-        };
-        const isClearDisabled = typeof props.value !== 'number' && typeof props.value !== 'object';
-        return (React__namespace.default.createElement(FlexRow, { padding: "12" },
-            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
-            React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
-                React__namespace.default.createElement(LinkButton, { isDisabled: isClearDisabled, size: settings.filtersPanel.sizes[uuiCore.isMobile() ? 'mobileFooterLinkButton' : 'footerLinkButton'], caption: i18n.pickerInput.clearSelectionButtonSingle, onClick: clearSelection }))));
-    };
-    if (isInRangePredicate) {
-        const value = props.value;
-        return (React__namespace.default.createElement("div", null,
-            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$r.container },
-                React__namespace.default.createElement(FlexCell, { width: "100%" },
-                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
-                React__namespace.default.createElement(FlexCell, { width: "100%" },
-                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
-            renderFooter()));
+        return content;
     }
-    return (React__namespace.default.createElement("div", null,
-        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$r.container },
-            React__namespace.default.createElement(FlexCell, { width: 130 },
-                React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
-        renderFooter()));
+    return null;
 }
 
-function FilterItemBody(props) {
-    switch (props.type) {
-        case 'singlePicker':
-            return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
-        case 'numeric':
-            return React__namespace.default.createElement(FilterNumericBody, { ...props });
-        case 'multiPicker':
-            return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
-        case 'datePicker':
-            return React__namespace.default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
-        case 'rangeDatePicker':
-            return React__namespace.default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
-        case 'custom':
-            return props.render(props);
+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];
+};
 
-var css$q = {"body":"Sgn3nb","header":"JUiDwZ","title":"boWi9c","removeButton":"H5rm1S","with-search":"M-XYVE","withSearch":"M-XYVE"};
+var css$o = {"listContainer":"Hlodhi","header":"qBCcUk","group":"CEfDTU","stickyHeader":"Nat84u"};
 
-function useView(props, value) {
-    const forceUpdate = uuiCore.useForceUpdate();
-    let useViewFn;
-    const dataSourceState = {};
-    if (props.type === 'singlePicker' || props.type === 'multiPicker') {
-        useViewFn = props.dataSource.useView.bind(props.dataSource);
-        if (props.type === 'singlePicker') {
-            dataSourceState.selectedId = value;
-        }
-        if (props.type === 'multiPicker') {
-            dataSourceState.checked = value;
-        }
-    }
-    return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
-}
-function FiltersToolbarItemImpl(props) {
+function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
+    const rowRef = React.useRef(undefined);
+    const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
+    return (React__namespace.default.createElement("div", { className: css$o.group, key: row.rowKey },
+        React__namespace.default.createElement("div", { className: row.isPinned ? css$o.stickyHeader : css$o.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__namespace.default.createElement("div", null,
+            React__namespace.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__namespace.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__namespace.default.createElement(React__namespace.default.Fragment, null, rowsWithGroups));
+}
+
+function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
+    return (React__namespace.default.createElement("div", { className: cx__default.default(css$o.listContainer, 'uui-dt-data_row_container'), style: { minHeight: `${estimatedHeight}px` } },
+        React__namespace.default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
+            React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
+}
+
+var css$n = {"root":"m8jmwu","sticky-header":"KdwSxg","stickyHeader":"KdwSxg","no-results":"tZobYW","noResults":"tZobYW","icon":"iK7dW4","title":"SoMZ0C"};
+
+function DataTable(props) {
+    const { uuiModals } = uuiCore.useUuiContext();
+    const headerRef = React__namespace.useRef(undefined);
+    const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
+    const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
+    const defaultRenderRow = React__namespace.useCallback((rowProps) => {
+        return (React__namespace.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$n.cell }));
+    }, []);
+    const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
+    const rows = props.getRows?.() ?? props.rows ?? [];
+    const renderNoResultsBlock = React__namespace.useCallback(() => {
+        return (React__namespace.createElement("div", { className: css$n.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(uuiComponents.IconContainer, { cx: css$n.icon, icon: settings.dataTable.icons.emptyTable }),
+            React__namespace.createElement(Text, { cx: css$n.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
+            React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
+    }, [props.renderNoResultsBlock]);
+    const onConfigurationButtonClick = React__namespace.useCallback(() => {
+        const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
+        uuiModals
+            .show((modalProps) => {
+            return (props.renderColumnsConfigurationModal
+                ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
+                : (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
+        })
+            .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
+            .catch(() => null);
+    }, [
+        props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
+    ]);
+    const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("div", { className: uuiCore.cx(css$n.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
+            React__namespace.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
+            React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
+                    [uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
+                }) })),
+        props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
+        props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
+    ]);
+    return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
+        React__namespace.createElement(uuiComponents.DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
+            React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(css$n.root, props.cx, 'uui-dt-vars', 'uui-data_table'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
+                    role: 'table',
+                    'aria-colcount': columns.length,
+                    'aria-rowcount': props.rowsCount,
+                } }))));
+}
+
+var css$m = {"root":"Ki-YV-","title-wrapper":"LfdNdo","titleWrapper":"LfdNdo","title":"_9X-98j","text-wrapper":"CArtGH","textWrapper":"CArtGH","selection":"yVDWkU","postfix":"OVA-0h","selected":"_6791ox"};
+
+const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
+    const togglerPickerOpened = (e) => {
+        if (props.isDisabled)
+            return;
+        e.preventDefault();
+        !uuiCore.isEventTargetInsideClickable(e) && props.onClick?.();
+    };
+    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__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
+        React__namespace.createElement("div", { className: cx__default.default(css$m.selection, UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION) }, i),
+        (props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
+    return (React__namespace.createElement("div", { style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` }, role: "button", tabIndex: props.isDisabled ? -1 : 0, onKeyDown: onKeyDownHandler, className: cx__default.default(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$m.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, props.selection?.length > 0 && uuiCore.uuiMarkers.hasValue, `uui-size-${props.size || settings.pickerInput.sizes.toggler.default}`, props.cx), onClick: togglerPickerOpened, ref: ref },
+        React__namespace.createElement("div", { className: css$m.titleWrapper },
+            React__namespace.createElement("div", { className: cx__default.default(css$m.title, UUI_FILTERS_PANEL_ITEM_TOGGLER_TITLE) }, getTitle),
+            props.selection && (React__namespace.createElement("div", { className: css$m.textWrapper },
+                getSelectionText(),
+                props.postfix && (React__namespace.createElement("div", { className: cx__default.default(css$m.postfix, UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX) }, props.postfix))))),
+        !props.isDisabled && React__namespace.createElement(uuiComponents.IconContainer, { icon: settings.filtersPanel.icons.itemDropdownIcon, flipY: props.isOpen, cx: "uui-icon-dropdown" })));
+});
+
+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 getDefaultPredicate = (predicates, value) => {
+    if (!predicates) {
+        return null;
+    }
+    return Object.keys(value || {})[0]
+        || predicates.find((i) => i.isDefault)?.predicate
+        || predicates?.[0].predicate;
+};
+
+const pickerHeight = 300;
+function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
+    const props = { ...restProps, highlightSearchMatches };
+    const [dsState, setDsState] = React.useState({
+        focusedIndex: 0,
+        topIndex: 0,
+        visibleCount: 20,
+        checked: [],
+    });
+    const { showSelected, setShowSelected } = uuiComponents.useShowSelected({ dataSourceState: dsState });
+    const { view, getName, dataSourceState, getListProps, handleDataSourceValueChange, clearSelection, } = uuiComponents.usePickerApi({ ...props, dataSourceState: dsState, setDataSourceState: setDsState, showSelectedOnly: showSelected });
+    const prevValue = uuiCore.usePrevious(props.value);
+    const prevOpened = uuiCore.usePrevious(props.isOpen);
+    React__namespace.useLayoutEffect(() => {
+        if (prevOpened === props.isOpen && props.isOpen
+            && prevValue !== props.value && props.value !== props.emptyValue
+            && props.selectionMode === 'single') {
+            props.onClose();
+        }
+    }, [props.value]);
+    const renderFooter = () => {
+        const footerProps = {
+            view,
+            showSelected: {
+                value: showSelected,
+                onValueChange: setShowSelected,
+            },
+            clearSelection,
+            selectionMode: props.selectionMode,
+            selection: props.value,
+            search: dataSourceState.search,
+        };
+        return props.renderFooter
+            ? props.renderFooter(footerProps)
+            : React__namespace.createElement(DataPickerFooter, { ...footerProps, cx: UUI_FILTERS_PANEL_BODY_FOOTER, size: settings.pickerInput.sizes.body.row });
+    };
+    const renderBody = () => {
+        const rows = view.getVisibleRows();
+        const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
+        const maxWidth = uuiCore.isMobile() ? undefined : 360;
+        const onKeyDown = (e) => uuiComponents.handleDataSourceKeyboard({
+            value: dataSourceState,
+            onValueChange: handleDataSourceValueChange,
+            listView: view,
+            searchPosition: 'body',
+            rows,
+        }, e);
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(DataPickerBody, { ...getListProps(), selectionMode: props.selectionMode, rows: rows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.pickerInput.sizes.body.row, showSearch: props.showSearch ?? true, getName: getName, value: dataSourceState, onValueChange: handleDataSourceValueChange, renderRow: props.renderRow, onKeyDown: onKeyDown, minCharsToSearch: props.minCharsToSearch, searchDebounceDelay: props.searchDebounceDelay, rawProps: props.rawProps?.body, highlightSearchMatches: props.highlightSearchMatches, flattenSearchResults: view.getConfig().flattenSearchResults }),
+            renderFooter()));
+    };
+    return renderBody();
+}
+
+const UUI_FILTERS_PANEL_DTP_FOOTER = 'uui-filters-panel-dtp-footer';
+function FilterDatePickerBodyFooter({ value, onValueChange }) {
+    return (React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
+        React__namespace.default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_DTP_FOOTER },
+            React__namespace.default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
+            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
+            React__namespace.default.createElement(LinkButton, { isDisabled: !value, caption: i18n.filterToolbar.datePicker.clearCaption, onClick: () => onValueChange(undefined) }))));
+}
+
+function FilterDatePickerBody(props) {
+    const { value } = props;
+    const context = uuiCore.useUuiContext();
+    const handleValueChange = (newValue) => {
+        props.onValueChange(newValue);
+        if (props.getValueChangeAnalyticsEvent) {
+            const event = props.getValueChangeAnalyticsEvent(newValue, value);
+            context.uuiAnalytics.sendEvent(event);
+        }
+        if (newValue) {
+            props.onClose?.();
+        }
+    };
+    const handleBodyChange = (newValue) => {
+        if (newValue && value !== newValue) {
+            handleValueChange(newValue);
+        }
+    };
+    function renderFooter() {
+        const footerProps = {
+            value,
+            onValueChange: handleValueChange,
+        };
+        return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(FilterDatePickerBodyFooter, { ...footerProps });
+    }
+    return (React__namespace.default.createElement(React.Fragment, null,
+        React__namespace.default.createElement(FlexRow, { borderBottom: true },
+            React__namespace.default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
+        renderFooter()));
+}
+
+const UUI_FILTERS_PANEL_RDTP_FOOTER = 'uui-filters-panel-rdtp-footer';
+function FilterRangeDatePickerBodyFooter(props) {
+    const shouldShowClearButton = (!props.preventEmptyToDate || !props.preventEmptyFromDate) && !props.disableClear;
+    return (React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
+        React__namespace.default.createElement(FlexRow, { cx: UUI_FILTERS_PANEL_RDTP_FOOTER },
+            React__namespace.default.createElement(RangeDatePickerInput, { size: settings.filtersPanel.sizes.rangeDatePickerInput, disableClear: props.disableClear, inFocus: props.inFocus, format: props.format, value: props.value, onValueChange: props.onValueChange, onFocusInput: (event, inputType) => {
+                    if (props.onFocus) {
+                        props.onFocus(event, inputType);
+                    }
+                    props.setInFocus(inputType);
+                }, onBlurInput: props.onBlur, preventEmptyFromDate: props.preventEmptyFromDate, preventEmptyToDate: props.preventEmptyToDate }),
+            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
+            shouldShowClearButton && (React__namespace.default.createElement(LinkButton, { isDisabled: !props.value.from && !props.value.to, caption: i18n.filterToolbar.rangeDatePicker.clearCaption, onClick: props.onClear })))));
+}
+
+function FilterRangeDatePickerBody(props) {
+    const { value: _value, format = defaultFormat } = props;
+    const value = _value || defaultRangeValue; // also handles null in comparison to default value
+    const context = uuiCore.useUuiContext();
+    const onOpenChange = (newIsOpen) => {
+        {
+            props.onClose?.();
+        }
+        props.onOpenChange?.(newIsOpen);
+    };
+    const [inFocus, setInFocus] = React.useState('from');
+    const onValueChange = (newValue) => {
+        const fromChanged = value?.from !== newValue?.from;
+        const toChanged = value?.to !== newValue?.to;
+        if (fromChanged || toChanged) {
+            props.onValueChange(newValue);
+            if (props.getValueChangeAnalyticsEvent) {
+                const event = props.getValueChangeAnalyticsEvent(newValue, value);
+                context.uuiAnalytics.sendEvent(event);
+            }
+        }
+    };
+    const onBodyValueChange = (newValue) => {
+        setInFocus(newValue.inFocus ?? inFocus);
+        onValueChange(newValue.selectedDate);
+        const toChanged = value.to !== newValue.selectedDate.to;
+        const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
+            && inFocus === 'to'
+            && toChanged;
+        if (closeBody) {
+            onOpenChange(false);
+        }
+    };
+    const onClear = () => {
+        const newValue = {
+            from: props.preventEmptyFromDate ? value.from : null,
+            to: props.preventEmptyToDate ? value.to : null,
+        };
+        onValueChange(newValue);
+    };
+    function renderFooter() {
+        const footerProps = {
+            value,
+            onValueChange,
+            format: format,
+            disableClear: props.disableClear,
+            preventEmptyFromDate: props.preventEmptyFromDate,
+            preventEmptyToDate: props.preventEmptyToDate,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            inFocus,
+            setInFocus,
+            onClear,
+        };
+        return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(FilterRangeDatePickerBodyFooter, { ...footerProps });
+    }
+    return (React__namespace.default.createElement(React.Fragment, null,
+        React__namespace.default.createElement(FlexRow, { borderBottom: true },
+            React__namespace.default.createElement(RangeDatePickerBody, { value: {
+                    selectedDate: value,
+                    inFocus,
+                }, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets })),
+        renderFooter()));
+}
+
+var css$l = {"container":"_05bMLH"};
+
+function FilterNumericBody(props) {
+    const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
+    const isWrongRange = (from, to) => {
+        if (!to && to !== 0)
+            return false;
+        return from > to;
+    };
+    const rangeValueHandler = (type) => (val) => {
+        const value = props.value;
+        switch (type) {
+            case 'from': {
+                props.onValueChange({
+                    from: val,
+                    to: value?.to ?? null,
+                });
+                break;
+            }
+            case 'to': {
+                props.onValueChange({
+                    from: value?.from ?? null,
+                    to: val,
+                });
+                break;
+            }
+        }
+    };
+    const renderFooter = () => {
+        const clearSelection = () => {
+            if (isInRangePredicate) {
+                props.onValueChange({
+                    from: undefined,
+                    to: undefined,
+                });
+            }
+            else {
+                props.onValueChange(undefined);
+            }
+        };
+        const isClearDisabled = typeof props.value !== 'number' && typeof props.value !== 'object';
+        return (React__namespace.default.createElement(FlexRow, { padding: "12" },
+            React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
+            React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
+                React__namespace.default.createElement(LinkButton, { isDisabled: isClearDisabled, size: settings.filtersPanel.sizes[uuiCore.isMobile() ? 'mobileFooterLinkButton' : 'footerLinkButton'], caption: i18n.pickerInput.clearSelectionButtonSingle, onClick: clearSelection }))));
+    };
+    if (isInRangePredicate) {
+        const value = props.value;
+        return (React__namespace.default.createElement("div", null,
+            React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$l.container },
+                React__namespace.default.createElement(FlexCell, { width: "100%" },
+                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
+                React__namespace.default.createElement(FlexCell, { width: "100%" },
+                    React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
+            renderFooter()));
+    }
+    return (React__namespace.default.createElement("div", null,
+        React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$l.container },
+            React__namespace.default.createElement(FlexCell, { width: 130 },
+                React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
+        renderFooter()));
+}
+
+function FilterItemBody(props) {
+    switch (props.type) {
+        case 'singlePicker':
+            return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
+        case 'numeric':
+            return React__namespace.default.createElement(FilterNumericBody, { ...props });
+        case 'multiPicker':
+            return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
+        case 'datePicker':
+            return React__namespace.default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
+        case 'rangeDatePicker':
+            return React__namespace.default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
+        case 'custom':
+            return props.render(props);
+    }
+}
+
+function useView(props, value) {
+    const forceUpdate = uuiCore.useForceUpdate();
+    let useViewFn;
+    const dataSourceState = {};
+    if (props.type === 'singlePicker' || props.type === 'multiPicker') {
+        useViewFn = props.dataSource.useView.bind(props.dataSource);
+        if (props.type === 'singlePicker') {
+            dataSourceState.selectedId = value;
+        }
+        if (props.type === 'multiPicker') {
+            dataSourceState.checked = value;
+        }
+    }
+    return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
+}
+function FiltersToolbarItemImpl(props) {
     const { maxCount = 2 } = props;
     const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
     const isMobileScreen = uuiCore.isMobile();
+    const hideHeaderTitle = isPickersType && isMobileScreen;
     const floatingMiddleware = React.useMemo(() => {
         const middleware = [
             react.offset(() => {
@@ -4465,65 +4918,38 @@ function FiltersToolbarItemImpl(props) {
         }
         return middleware;
     }, [isPickersType]);
-    const getDefaultPredicate = () => {
-        if (!props.predicates) {
-            return null;
-        }
-        return Object.keys(props.value || {})[0] || props.predicates.find((i) => i.isDefault)?.predicate || props.predicates?.[0].predicate;
-    };
     const [isOpen, isOpenChange] = React.useState(props.autoFocus);
-    const [predicate, setPredicate] = React.useState(getDefaultPredicate());
+    const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
     const predicateName = React__namespace.default.useMemo(() => predicate && props.predicates.find((p) => p.predicate === predicate).name, [predicate]);
-    React.useEffect(() => {
-        if (props.predicates && Object.keys(props.value || {})[0] && Object.keys(props.value || {})[0] !== predicate) {
-            setPredicate(Object.keys(props.value || {})[0]);
-        }
-    }, [props.value]);
-    const onValueChange = React.useCallback((value) => {
+    const onValueChange = (value) => {
         if (props.predicates) {
-            props.onValueChange({ [props.field]: { [predicate]: value } });
+            props.onValueChange({ [predicate]: value });
         }
         else {
-            props.onValueChange({ [props.field]: value });
+            props.onValueChange(value);
         }
-    }, [props.field, props.onValueChange]);
-    const removeOnclickHandler = () => {
-        props.removeFilter(props.field);
     };
-    const changePredicate = (val) => {
-        const isInRange = (p) => p === 'inRange' || p === 'notInRange';
-        if (props.type === 'numeric') {
-            let predicateValue = {
-                [props.field]: { [val]: getValue() },
-            };
-            if (isInRange(val) && !isInRange(predicate)) {
-                // from simple predicate -> to Range
-                predicateValue = { [props.field]: { [val]: { from: null, to: null } } };
-            }
-            else if (!isInRange(val) && isInRange(predicate)) {
-                // from Range -> to simple predicate
-                predicateValue = { [props.field]: { [val]: null } };
+    React.useEffect(() => {
+        // This effect needs when the filter dropdown was closed and opened again
+        if (props.predicates && props.value && Object.keys(props.value).length > 0) {
+            const predicateFromValue = Object.keys(props.value)[0];
+            if (predicateFromValue !== predicate) {
+                setPredicate(predicateFromValue);
             }
-            props.onValueChange(predicateValue);
-        }
-        else {
-            props.onValueChange({ [props.field]: { [val]: getValue() } });
         }
-        setPredicate(val);
+    }, [props.value]);
+    const removeOnclickHandler = () => {
+        props.removeFilter(props.field);
     };
-    const renderHeader = (hideTitle) => (React__namespace.default.createElement("div", { className: cx__default.default(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
-        props.predicates ? (React__namespace.default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: settings.filtersPanel.sizes.pickerBodyMultiSwitch })) : (!hideTitle && (React__namespace.default.createElement("div", { className: css$q.title }, props.title))),
-        !props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
+    const renderHeader = (hideTitle) => (React__namespace.default.createElement("div", { className: cx__default.default(css$s.header, isPickersType && (props.showSearch ?? css$s.withSearch)) },
+        props.predicates ? (React__namespace.default.createElement(FilterPredicatePanel, { predicates: props.predicates, predicate: predicate, type: props.type, onValueChange: props.onValueChange, value: props.value, setPredicate: setPredicate })) : (!hideTitle && (React__namespace.default.createElement("div", { className: css$s.title }, props.title))),
+        !props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$s.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
     const renderBody = (dropdownProps) => {
-        const hideHeaderTitle = isPickersType && isMobileScreen;
-        return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: [css$q.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
+        return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
             renderHeader(hideHeaderTitle),
-            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$q.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps },
+            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps },
             renderHeader(hideHeaderTitle),
-            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })));
-    };
-    const getValue = () => {
-        return predicate ? props.value?.[predicate] : props.value;
+            React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
     };
     const getPickerItemName = (item, config) => {
         if (item.isLoading) {
@@ -4534,9 +4960,9 @@ function FiltersToolbarItemImpl(props) {
         }
         return config.getName ? config.getName(item.value) : item.value.name;
     };
-    const view = useView(props, getValue());
+    const view = useView(props, getValue(predicate, props.value));
     const getTogglerValue = () => {
-        const currentValue = getValue();
+        const currentValue = getValue(predicate, props.value);
         const defaultFormat = 'MMM DD, YYYY';
         switch (props.type) {
             case 'multiPicker': {
@@ -4602,44 +5028,6 @@ function FiltersToolbarItemImpl(props) {
 }
 const FiltersPanelItem = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarItemImpl);
 
-const normalizeFilterWithPredicates = (filter) => {
-    if (!filter) {
-        return {};
-    }
-    const result = filter;
-    const keys = Object.keys(filter);
-    for (let n = 0; n < keys.length; n++) {
-        const key = keys[n];
-        const filterValue = filter[key];
-        if (filterValue && typeof filterValue === 'object') {
-            if ('from' in filterValue && 'to' in filterValue) {
-                continue;
-            }
-            if ('in' in filterValue && (!Array.isArray(filterValue.in) || !filterValue.in.length)) {
-                delete filter[key];
-            }
-            if ('nin' in filterValue && (!Array.isArray(filterValue.nin) || !filterValue.nin.length)) {
-                delete filter[key];
-            }
-            if ('inRange' in filterValue) {
-                if (!filterValue.inRange || (!filterValue.inRange.from && !filterValue.inRange.to)) {
-                    delete filter[key];
-                }
-            }
-            if ('notInRange' in filterValue) {
-                if (!filterValue.notInRange || (!filterValue.notInRange.from && !filterValue.notInRange.to)) {
-                    delete filter[key];
-                }
-            }
-            Object.keys(filterValue).forEach((predicate) => {
-                if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
-                    delete filter[key];
-                }
-            });
-        }
-    }
-    return result;
-};
 function FiltersToolbarImpl(props) {
     const { filters, tableState, setTableState, size = (settings.filtersPanel.sizes.default) } = props;
     const [newFilterId, setNewFilterId] = React.useState(null);
@@ -4672,8 +5060,8 @@ function FiltersToolbarImpl(props) {
             filter: newFilter,
         });
     };
-    const handleFilterChange = (newFilter) => {
-        const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
+    const handleFilterChange = (newFilter, field) => {
+        const filter = normalizeFilterWithPredicates({ ...tableState.filter, [field]: newFilter });
         setTableState({
             ...tableState,
             filter: filter,
@@ -4722,7 +5110,7 @@ function FiltersToolbarImpl(props) {
     }, [newFilterId, sortedActiveFilters]);
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         sortedActiveFilters.map((f) => (React__namespace.default.createElement(uuiComponents.FlexCell, { width: "auto", key: f.field },
-            React__namespace.default.createElement(FiltersPanelItem, { ...f, value: tableState.filter?.[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: size })))),
+            React__namespace.default.createElement(FiltersPanelItem, { ...f, value: tableState.filter?.[f.field], onValueChange: (newFilter) => handleFilterChange(newFilter, f.field), key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: size })))),
         !isAllFiltersAlwaysVisible && (React__namespace.default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", renderRow: (props) => (React__namespace.default.createElement(DataPickerRow, { ...props, padding: "12", key: props.key, onCheck: (row) => {
                     props.onCheck && props.onCheck(row);
                     setNewFilterId(row.value.field);
@@ -4730,7 +5118,7 @@ function FiltersToolbarImpl(props) {
 }
 const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
 
-var css$p = {"delete-button":"PwkXWS","deleteButton":"PwkXWS","tab-button":"T1QgYs","tabButton":"T1QgYs","targetOpen":"i0bLjM"};
+var css$k = {"delete-button":"A1FWX9","deleteButton":"A1FWX9","tab-button":"v0kxgH","tabButton":"v0kxgH","targetOpen":"ES22Gg"};
 
 function PresetActionsDropdown(props) {
     const { uuiNotifications } = uuiCore.useUuiContext();
@@ -4789,416 +5177,123 @@ function PresetActionsDropdown(props) {
             React__namespace.default.createElement(DropdownMenuButton, { key: `${props.preset.id}-copyLink`, icon: settings.presetsPanel.icons.copyLinkIcon, caption: "Copy Link", onClick: copyUrlToClipboard }),
             !isReadonlyPreset && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement(DropdownMenuSplitter, { key: "delete-splitter" }),
-                React__namespace.default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$p.deleteButton, onClick: deleteHandler })))));
+                React__namespace.default.createElement(DropdownMenuButton, { icon: settings.presetsPanel.icons.deleteIcon, caption: "Delete", cx: css$k.deleteButton, onClick: deleteHandler })))));
     };
     const renderTarget = React.useCallback((dropdownProps) => {
-        return (React__namespace.default.createElement(IconButton, { cx: [css$p.tabButton, dropdownProps.isOpen && css$p.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton }));
-    }, []);
-    return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [react.offset(22)] }));
-}
-
-const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
-const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
-const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
-const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
-
-var css$o = {"preset-input-cell":"TVqZZ-","presetInputCell":"TVqZZ-","preset-input":"_5x0UL2","presetInput":"_5x0UL2"};
-
-function PresetInput(props) {
-    const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
-    const [readonly, setReadonly] = React.useState(false);
-    const cancelActionHandler = React.useCallback(() => {
-        setPresetCaption('');
-        props.onCancel();
-    }, [props.onCancel]);
-    const acceptActionHandler = React.useCallback(async () => {
-        setReadonly(() => true);
-        if (presetCaption) {
-            await props.onSuccess(presetCaption);
-        }
-        props.onCancel();
-        setReadonly(() => false);
-    }, [presetCaption]);
-    const newPresetOnBlurHandler = React.useCallback(() => {
-        if (presetCaption.length) {
-            return;
-        }
-        props.onCancel();
-    }, [presetCaption.length, props.onCancel]);
-    return (React__namespace.default.createElement(FlexCell, { cx: [css$o.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
-        React__namespace.default.createElement(TextInput, { cx: css$o.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
-}
-
-var css$n = {"preset":"fnEmxW","activePreset":"_9Eo7CG"};
-
-function Preset(props) {
-    const [isRenamePreset, setIsRenamePreset] = React.useState(false);
-    const choosePresetHandler = React.useCallback(() => props.choosePreset(props.preset), [props]);
-    const cancelRenamePreset = React.useCallback(() => {
-        setIsRenamePreset(() => false);
-    }, []);
-    const setPresetForRename = React.useCallback(() => {
-        if (!isRenamePreset) {
-            setIsRenamePreset(() => true);
-        }
-    }, []);
-    const handlePresetRename = React.useCallback((name) => {
-        const newPreset = {
-            ...props.preset,
-            name: name,
-        };
-        return props.updatePreset(newPreset);
-    }, [props.preset]);
-    const isPresetActive = props.activePresetId === props.preset.id;
-    const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
-    return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$n.preset, isPresetActive && css$n.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
-}
-
-var css$m = {"divider":"LZC2jN","dropdownDeleteIcon":"yvVkYD","presetsWrapper":"eYyq6H","addPresetContainer":"PtfQLd","dropContainer":"K92XXE"};
-
-function PresetsPanel(props) {
-    const [isAddingPreset, setIsAddingPreset] = React.useState(false);
-    const setAddingPreset = React.useCallback(() => {
-        setIsAddingPreset(true);
-    }, []);
-    const cancelAddingPreset = React.useCallback(() => {
-        setIsAddingPreset(false);
-    }, []);
-    const { presets, ...presetApi } = props;
-    const renderPreset = (preset) => {
-        return React__namespace.default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
-    };
-    const renderAddPresetButton = React.useCallback(() => {
-        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$m.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: settings.presetsPanel.icons.addIcon, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
-    }, [isAddingPreset]);
-    const onPresetDropdownSelect = (preset) => {
-        props.choosePreset(preset.preset);
-    };
-    const renderMoreButtonDropdown = (item, hiddenItems) => {
-        return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
-                React__namespace.default.createElement("div", { className: css$m.divider }),
-                React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__namespace.default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
-                React__namespace.default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && settings.presetsPanel.icons.deleteIcon, iconPosition: "right", cx: css$m.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
-    };
-    const getPresetPriority = (preset, index) => {
-        return preset.id === props.activePresetId ? 100499 : 1000 - index;
-    };
-    const getPanelItems = () => {
-        return [
-            ...uuiCore.orderBy(props.presets, ({ order }) => 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__namespace.default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
-        React__namespace.default.createElement(FlexRow, { size: null, columnGap: "12", cx: css$m.presetsWrapper },
-            React__namespace.default.createElement(uuiComponents.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 = React.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__namespace.default.createElement(FilterItemBody, { ...props, ...filter, ...dropdownProps });
-    }, [filters]);
-    const columns = React.useMemo(() => {
-        if (filters) {
-            const filterKeys = filters.map((f) => f.columnKey);
-            const newColumns = (initialColumns.map((column) => {
-                if (filterKeys.includes(column.key)) {
-                    return {
-                        ...column,
-                        renderFilter: makeFilterRenderCallback(column.key),
-                    };
-                }
-                else {
-                    return column;
-                }
-            }));
-            return newColumns;
-        }
-        return initialColumns;
-    }, [filters, initialColumns]);
-    return columns;
-};
-
-var css$l = {"unpin-icon":"_32M-dr","unpinIcon":"_32M-dr","pin-toggler-icon":"_2PraiN","pinTogglerIcon":"_2PraiN"};
-
-function PinIconButton(props) {
-    const i18nLocal = i18n.tables.columnsConfigurationModal;
-    const { onTogglePin, pinPosition, canUnpin, } = props;
-    const isPinned = !!pinPosition;
-    const isPinnedAlways = isPinned && !canUnpin;
-    let pinUnpinNode;
-    if (isPinned) {
-        const unpinIcon = getUnpinIcon({ isPinnedAlways, pinPosition });
-        const iconTooltip = isPinnedAlways ? i18nLocal.lockedColumnPinButton : i18nLocal.unPinColumnButton;
-        const unpinClickHandler = isPinnedAlways ? undefined : () => onTogglePin(undefined);
-        pinUnpinNode = (React__namespace.createElement(Tooltip, { content: iconTooltip, placement: "bottom", color: "inverted" },
-            React__namespace.createElement(IconButton, { cx: uuiCore.cx(!isPinnedAlways && css$l.unpinIcon, css$l.pinTogglerIcon), icon: unpinIcon, onClick: unpinClickHandler, isDisabled: isPinnedAlways, color: "primary" })));
-    }
-    else {
-        pinUnpinNode = (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(Tooltip, { content: i18nLocal.pinColumnToTheLeftButton, placement: "bottom", color: "inverted" },
-                React__namespace.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon, onClick: () => onTogglePin('left'), isDisabled: isPinnedAlways })),
-            React__namespace.createElement(Tooltip, { content: i18nLocal.pinColumnToTheRightButton, placement: "bottom", color: "inverted" },
-                React__namespace.createElement(IconButton, { cx: css$l.pinTogglerIcon, icon: settings.dataTable.icons.columnsConfigurationModal.pinRightIcon, onClick: () => onTogglePin('right'), isDisabled: isPinnedAlways }))));
-    }
-    return pinUnpinNode;
-}
-function getUnpinIcon(params) {
-    const { isPinnedAlways, pinPosition } = params;
-    if (isPinnedAlways) {
-        return settings.dataTable.icons.columnsConfigurationModal.lockIcon;
-    }
-    switch (pinPosition) {
-        case 'left': {
-            return settings.dataTable.icons.columnsConfigurationModal.pinLeftIcon;
-        }
-        case 'right': {
-            return settings.dataTable.icons.columnsConfigurationModal.pinRightIcon;
-        }
-        default: {
-            return;
-        }
-    }
+        return (React__namespace.default.createElement(IconButton, { cx: [css$k.tabButton, dropdownProps.isOpen && css$k.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: settings.presetsPanel.icons.menuIcon, size: settings.presetsPanel.sizes.dropdownTargetIconButton }));
+    }, []);
+    return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", middleware: [react.offset(22)] }));
 }
 
-var css$k = {"row-wrapper":"UxgqQS","rowWrapper":"UxgqQS","pin-icon-button":"OI1Vnj","pinIconButton":"OI1Vnj","not-pinned":"dkobH-","notPinned":"dkobH-","checkbox":"C7z1NQ","drag-handle":"wmoaiZ","dragHandle":"wmoaiZ","dnd-disabled":"BASjhV","dndDisabled":"BASjhV"};
-
-const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
-    const { column } = props;
-    const { toggleVisibility, togglePin, onCanAcceptDrop, onDrop, columnConfig, isDndAllowed, isPinnedAlways, } = column;
-    const { isVisible, fix } = columnConfig;
-    const pinPosition = fix || (isPinnedAlways ? 'left' : undefined);
-    const isPinned = !!pinPosition;
-    const data = { column, columnConfig };
-    const renderContent = (dndActorParams) => {
-        const wrapperClasses = uuiCore.cx(css$k.rowWrapper, !isPinned && css$k.notPinned, dndActorParams.isDragGhost && uuiCore.uuiDndState.dragGhost, 'uui-dt-columns-config-row');
-        const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
-        const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
-        return (React__namespace.createElement(FlexRow, { size: settings.dataTable.sizes.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
-            React__namespace.createElement(uuiComponents.DragHandle, { dragHandleIcon: settings.dataTable.icons.columnsConfigurationModal.dragIndicator, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: uuiCore.cx(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
-            React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$k.checkbox }),
-            React__namespace.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
-                React__namespace.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
-            React__namespace.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
-    };
-    return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
-});
+const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
+const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
+const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
+const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
 
-var css$j = {"root":"AX-TZb","main-panel":"_6rMWwc","mainPanel":"_6rMWwc","group":"VU9U7d","group-title":"YygfxU","groupTitle":"YygfxU","group-items":"S7BVEx","groupItems":"S7BVEx","no-data":"_9VEj8R","noData":"_9VEj8R","no-data-title":"EMr3aE","noDataTitle":"EMr3aE","no-data-sub-title":"AnqZbO","noDataSubTitle":"AnqZbO","h-divider":"Vu-wyA","hDivider":"Vu-wyA","search-area":"hMRwpm","searchArea":"hMRwpm","subgroup-accordion":"ZpaN-C","subgroupAccordion":"ZpaN-C","subgroup":"o85ghl","subgroup-title":"_3RR6T7","subgroupTitle":"_3RR6T7"};
+var css$j = {"preset-input-cell":"cyWYD4","presetInputCell":"cyWYD4","preset-input":"d5r5iD","presetInput":"d5r5iD"};
 
-const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$j.group },
-    React__namespace.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
-    React__namespace.createElement(CountIndicator, { caption: amount, color: "neutral", size: settings.dataTable.sizes.columnsConfigurationModal.countIndicator }),
-    React__namespace.createElement(uuiComponents.FlexSpacer, null)));
-function ColumnsConfigurationModal(props) {
-    const i18n$1 = i18n.tables.columnsConfigurationModal;
-    const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
-    const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = uuiComponents.useColumnsConfiguration({
-        initialColumnsConfig,
-        columns,
-        defaultConfig,
-        getSearchFields: props.getSearchFields,
-    });
-    const apply = React.useCallback(() => modalProps.success(columnsConfig), [columnsConfig, modalProps]);
-    const close = React.useCallback(() => modalProps.abort(), [modalProps]);
-    const isNoData = React.useMemo(() => Object.values(groupedColumns).every((v) => !v.length), [groupedColumns]);
-    const renderVisible = () => {
-        const amountPinnedLeft = groupedColumns.displayedPinnedLeft.length;
-        const amountPinnedRight = groupedColumns.displayedPinnedRight.length;
-        const amountUnPinned = groupedColumns.displayedUnpinned.length;
-        const totalAmountOfVisibleColumns = amountPinnedLeft + amountUnPinned + amountPinnedRight;
-        if (!totalAmountOfVisibleColumns) {
-            return null;
-        }
-        const hasDividerBelowPinnedLeft = !!(amountPinnedLeft && amountUnPinned);
-        const hasDividerAbovePinnedRight = !!(amountPinnedRight && amountUnPinned);
-        const divider = (React__namespace.createElement(FlexRow, { size: null, cx: css$j.hDivider }));
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            renderGroupTitle(i18n$1.displayedSectionTitle, totalAmountOfVisibleColumns),
-            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheLeftSubgroupTitle, items: groupedColumns.displayedPinnedLeft }),
-            hasDividerBelowPinnedLeft && divider,
-            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.notPinnedSubgroupTitle, items: groupedColumns.displayedUnpinned }),
-            hasDividerAbovePinnedRight && divider,
-            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, title: i18n$1.pinnedToTheRightSubgroupTitle, items: groupedColumns.displayedPinnedRight })));
-    };
-    const renderHidden = () => {
-        const items = groupedColumns.hidden;
-        const title = renderGroupTitle(i18n$1.hiddenSectionTitle, items.length);
-        if (!items.length) {
-            return null;
+function PresetInput(props) {
+    const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
+    const [readonly, setReadonly] = React.useState(false);
+    const cancelActionHandler = React.useCallback(() => {
+        setPresetCaption('');
+        props.onCancel();
+    }, [props.onCancel]);
+    const acceptActionHandler = React.useCallback(async () => {
+        setReadonly(() => true);
+        if (presetCaption) {
+            await props.onSuccess(presetCaption);
         }
-        return (React__namespace.createElement(React__namespace.Fragment, null,
-            title,
-            React__namespace.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
-    };
-    const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
-    return (React__namespace.createElement(ModalBlocker, { ...modalProps },
-        React__namespace.createElement(ModalWindow, { cx: [css$j.root, 'uui-columns-config-modal'], height: "95dvh", maxHeight: "95dvh" },
-            React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
-            React__namespace.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
-                React__namespace.createElement(SearchInput, { size: settings.dataTable.sizes.columnsConfigurationModal.searchInput, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
-                React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(DropdownMenuBody, { minWidth: 100 },
-                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
-                        React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React__namespace.createElement(Button, { ...props, fill: "none", icon: settings.dataTable.icons.columnsConfigurationModal.menuIcon, size: settings.dataTable.sizes.columnsConfigurationModal.menuButton, color: "secondary", isDropdown: false })) })),
-            React__namespace.createElement(Panel, { background: "surface-main", cx: css$j.mainPanel },
-                React__namespace.createElement(ScrollBars, null,
-                    renderVisible(),
-                    renderHidden(),
-                    isNoData && (React__namespace.createElement(FlexRow, { cx: css$j.noData },
-                        React__namespace.createElement(Text, { cx: css$j.noDataTitle }, i18n$1.noResultsFound.title),
-                        React__namespace.createElement(Text, { cx: css$j.noDataSubTitle }, i18n$1.noResultsFound.subTitle))))),
-            React__namespace.createElement(ModalFooter, { borderTop: true },
-                React__namespace.createElement(LinkButton, { icon: settings.dataTable.icons.columnsConfigurationModal.resetIcon, caption: i18n$1.resetToDefaultButton, onClick: reset }),
-                React__namespace.createElement(uuiComponents.FlexSpacer, null),
-                React__namespace.createElement(Button, { fill: "none", color: "secondary", caption: i18n$1.cancelButton, onClick: close }),
-                !hasAnySelectedColumns ? (React__namespace.createElement(Tooltip, { content: i18n$1.enableAtLeastOneColumnMessage, placement: "top-end", color: "critical" }, applyButton)) : (applyButton)))));
-}
-function SubGroup(props) {
-    const [isExpanded, setIsExpanded] = React.useState(true);
-    const { title, items, renderItem } = props;
-    const isCollapsible = !!title;
-    if (items.length) {
-        const content = (React__namespace.createElement(FlexRow, { cx: css$j.groupItems, size: settings.dataTable.sizes.columnsConfigurationModal.columnRow }, items.map((c) => (React__namespace.createElement(ColumnRow, { column: c, key: c.key, renderItem: renderItem })))));
-        if (isCollapsible) {
-            const renderTitle = (isOpened) => {
-                const toggleIcon = settings.dataTable.icons.columnsConfigurationModal[isOpened ? 'expandedIcon' : 'collapsedIcon'];
-                return (React__namespace.createElement(FlexRow, { cx: uuiCore.cx(css$j.subgroup) },
-                    React__namespace.createElement(uuiComponents.IconContainer, { icon: toggleIcon }),
-                    React__namespace.createElement(Text, { size: "none", color: "tertiary", cx: css$j.subgroupTitle }, title)));
-            };
-            return (React__namespace.createElement(uuiComponents.Accordion, { value: isExpanded, onValueChange: setIsExpanded, renderTitle: renderTitle, cx: css$j.subgroupAccordion }, content));
+        props.onCancel();
+        setReadonly(() => false);
+    }, [presetCaption]);
+    const newPresetOnBlurHandler = React.useCallback(() => {
+        if (presetCaption.length) {
+            return;
         }
-        return content;
-    }
-    return null;
+        props.onCancel();
+    }, [presetCaption.length, props.onCancel]);
+    return (React__namespace.default.createElement(FlexCell, { cx: [css$j.presetInputCell, UUI_PRESETS_PANEL_INPUT], minWidth: 180 },
+        React__namespace.default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
 }
 
-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];
-};
-
-var css$i = {"listContainer":"_9m-7eB","header":"-chN3h","group":"ePmcSK","stickyHeader":"WMdsoM"};
-
-function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
-    const rowRef = React.useRef(undefined);
-    const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
-    return (React__namespace.default.createElement("div", { className: css$i.group, key: row.rowKey },
-        React__namespace.default.createElement("div", { className: row.isPinned ? css$i.stickyHeader : css$i.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__namespace.default.createElement("div", null,
-            React__namespace.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__namespace.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__namespace.default.createElement(React__namespace.default.Fragment, null, rowsWithGroups));
-}
+var css$i = {"preset":"QpG0nB","activePreset":"BxpONf"};
 
-function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
-    return (React__namespace.default.createElement("div", { className: cx__default.default(css$i.listContainer, 'uui-dt-data_row_container'), style: { minHeight: `${estimatedHeight}px` } },
-        React__namespace.default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
-            React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
+function Preset(props) {
+    const [isRenamePreset, setIsRenamePreset] = React.useState(false);
+    const choosePresetHandler = React.useCallback(() => props.choosePreset(props.preset), [props]);
+    const cancelRenamePreset = React.useCallback(() => {
+        setIsRenamePreset(() => false);
+    }, []);
+    const setPresetForRename = React.useCallback(() => {
+        if (!isRenamePreset) {
+            setIsRenamePreset(() => true);
+        }
+    }, []);
+    const handlePresetRename = React.useCallback((name) => {
+        const newPreset = {
+            ...props.preset,
+            name: name,
+        };
+        return props.updatePreset(newPreset);
+    }, [props.preset]);
+    const isPresetActive = props.activePresetId === props.preset.id;
+    const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
+    return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
 }
 
-var css$h = {"root":"_9EiAeX","sticky-header":"_4o6z4R","stickyHeader":"_4o6z4R","no-results":"ci-9tl","noResults":"ci-9tl","icon":"PXVD-l","title":"_71ciD1"};
+var css$h = {"divider":"zrK490","dropdownDeleteIcon":"_2GzGqU","presetsWrapper":"_3xf-IB","addPresetContainer":"_9SAKkq","dropContainer":"_2dUx0k"};
 
-function DataTable(props) {
-    const { uuiModals } = uuiCore.useUuiContext();
-    const headerRef = React__namespace.useRef(undefined);
-    const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
-    const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
-    const defaultRenderRow = React__namespace.useCallback((rowProps) => {
-        return (React__namespace.createElement(DataTableRow, { size: props.size || settings.dataTable.sizes.body.row, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
+function PresetsPanel(props) {
+    const [isAddingPreset, setIsAddingPreset] = React.useState(false);
+    const setAddingPreset = React.useCallback(() => {
+        setIsAddingPreset(true);
     }, []);
-    const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
-    const rows = props.getRows?.() ?? props.rows ?? [];
-    const renderNoResultsBlock = React__namespace.useCallback(() => {
-        return (React__namespace.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(uuiComponents.IconContainer, { cx: css$h.icon, icon: settings.dataTable.icons.emptyTable }),
-            React__namespace.createElement(Text, { cx: css$h.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
-            React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
-    }, [props.renderNoResultsBlock]);
-    const onConfigurationButtonClick = React__namespace.useCallback(() => {
-        const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
-        uuiModals
-            .show((modalProps) => {
-            return (props.renderColumnsConfigurationModal
-                ? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
-                : (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
-        })
-            .then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
-            .catch(() => null);
-    }, [
-        props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
-    ]);
-    const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("div", { className: uuiCore.cx(css$h.stickyHeader, 'uui-dt-sticky_header'), ref: headerRef },
-            React__namespace.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.dataTable.sizes.header.row, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
-            React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
-                    [uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
-                }) })),
-        props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
-        props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
-    ]);
-    return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
-        React__namespace.createElement(uuiComponents.DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager },
-            React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderRowsContainer, cx: uuiCore.cx(css$h.root, props.cx, 'uui-dt-vars', 'uui-data_table'), isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: {
-                    role: 'table',
-                    'aria-colcount': columns.length,
-                    'aria-rowcount': props.rowsCount,
-                } }))));
+    const cancelAddingPreset = React.useCallback(() => {
+        setIsAddingPreset(false);
+    }, []);
+    const { presets, ...presetApi } = props;
+    const renderPreset = (preset) => {
+        return React__namespace.default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
+    };
+    const renderAddPresetButton = React.useCallback(() => {
+        return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$h.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: settings.presetsPanel.icons.addIcon, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
+    }, [isAddingPreset]);
+    const onPresetDropdownSelect = (preset) => {
+        props.choosePreset(preset.preset);
+    };
+    const renderMoreButtonDropdown = (item, hiddenItems) => {
+        return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
+                React__namespace.default.createElement("div", { className: css$h.divider }),
+                React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__namespace.default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
+                React__namespace.default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && settings.presetsPanel.icons.deleteIcon, iconPosition: "right", cx: css$h.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
+    };
+    const getPresetPriority = (preset, index) => {
+        return preset.id === props.activePresetId ? 100499 : 1000 - index;
+    };
+    const getPanelItems = () => {
+        return [
+            ...uuiCore.orderBy(props.presets, ({ order }) => 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__namespace.default.createElement(FlexCell, { grow: 1, minWidth: 310, rawProps: props.rawProps },
+        React__namespace.default.createElement(FlexRow, { size: null, columnGap: "12", cx: css$h.presetsWrapper },
+            React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
 }
 
-var css$g = {"root":"L1E2IH"};
+var css$g = {"root":"_3ihhLX"};
 
-var css$f = {"root":"VPxm90","burger-content":"ZMHqu-","burgerContent":"ZMHqu-"};
+var css$f = {"root":"Ar3HA2","burger-content":"r5snOa","burgerContent":"r5snOa"};
 
 var _path$3;
 function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
@@ -5241,7 +5336,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
 };
 var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
 
-var css$e = {"root":"OsKOq5","button-primary":"LqQiJQ","buttonPrimary":"LqQiJQ","button-secondary":"SD4AjP","buttonSecondary":"SD4AjP","hasIcon":"vr4fPh","dropdown":"UGkW6P"};
+var css$e = {"root":"lYA1Ec","button-primary":"nPVkMi","buttonPrimary":"nPVkMi","button-secondary":"ywgjLb","buttonSecondary":"ywgjLb","hasIcon":"pV3Fvb","dropdown":"GiEfRK"};
 
 const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (props) => [
     css$e.root,
@@ -5252,13 +5347,13 @@ const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (prop
     props.icon && css$e.hasIcon,
 ], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
 
-var css$d = {"search-input":"FEQGWa","searchInput":"FEQGWa"};
+var css$d = {"search-input":"_19oEHN","searchInput":"_19oEHN"};
 
 function BurgerSearch(props) {
     return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
 }
 
-var css$c = {"root":"_9qgOjY","group-header":"WjaTqc","groupHeader":"WjaTqc","group-name":"vFnwBK","groupName":"vFnwBK","line":"_3MTZm7"};
+var css$c = {"root":"Li97R2","group-header":"_2Zmze3","groupHeader":"_2Zmze3","group-name":"oyTaLc","groupName":"oyTaLc","line":"TxdhPe"};
 
 function BurgerGroupHeader(props) {
     return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
@@ -5266,7 +5361,7 @@ function BurgerGroupHeader(props) {
         React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
 }
 
-var css$b = {"root":"iZMa8C","type-primary":"fT1Kfg","typePrimary":"fT1Kfg","type-secondary":"_4DxCvu","typeSecondary":"_4DxCvu"};
+var css$b = {"root":"FvD8gJ","type-primary":"DtLXIk","typePrimary":"DtLXIk","type-secondary":"ez3r9G","typeSecondary":"ez3r9G"};
 
 const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const { type, ...clickableProps } = props;
@@ -5288,7 +5383,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
         props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
 });
 
-var css$a = {"dropdown-body":"KtiLIZ","dropdownBody":"KtiLIZ"};
+var css$a = {"dropdown-body":"vx3sPp","dropdownBody":"vx3sPp"};
 
 class MainMenuDropdown extends React__namespace.Component {
     render() {
@@ -5347,12 +5442,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
 };
 var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
 
-var css$9 = {"global-menu-btn":"w0pkxu","globalMenuBtn":"w0pkxu","global-menu-icon":"cIgYzp","globalMenuIcon":"cIgYzp"};
+var css$9 = {"global-menu-btn":"lR67nt","globalMenuBtn":"lR67nt","global-menu-icon":"Aeq5-f","globalMenuIcon":"Aeq5-f"};
 
 const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
     React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
 
-var css$8 = {"container":"ZrjcmD","open":"-nXSDo","folding-arrow":"z7DCN8","foldingArrow":"z7DCN8"};
+var css$8 = {"container":"mmHEdc","open":"DikMWZ","folding-arrow":"bExgUO","foldingArrow":"bExgUO"};
 
 const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
     React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
@@ -5360,15 +5455,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
     props.isDropdown && (React__namespace.createElement("div", null,
         React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
 
-var css$7 = {"search-input":"JFVQeL","searchInput":"JFVQeL"};
+var css$7 = {"search-input":"b-4ALo","searchInput":"b-4ALo"};
 
 const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
 
-var css$6 = {"container":"DheLTP"};
+var css$6 = {"container":"qJclVt"};
 
 const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
 
-var css$5 = {"root":"-Kz3-W"};
+var css$5 = {"root":"sfrL1o"};
 
 const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
 
@@ -5426,7 +5521,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
 };
 var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
 
-var css$4 = {"root":"TUhU7-","drop-start":"c9UVHh","dropStart":"c9UVHh","drop-over":"XMJ08r","dropOver":"XMJ08r","link":"OqPC9c","drop-area":"Ffr-2G","dropArea":"Ffr-2G","drop-caption":"I7krCk","dropCaption":"I7krCk","icon-blue":"LBRNp-","iconBlue":"LBRNp-"};
+var css$4 = {"root":"Ce-XXR","drop-start":"zvsjSV","dropStart":"zvsjSV","drop-over":"uDGu1T","dropOver":"uDGu1T","link":"J6Rwzf","drop-area":"MbVYTh","dropArea":"MbVYTh","drop-caption":"_6L3YVA","dropCaption":"_6L3YVA","icon-blue":"JaH7Ly","iconBlue":"JaH7Ly"};
 
 function DropSpot(props) {
     const getInfoText = typeof props.infoText === 'string'
@@ -5444,7 +5539,7 @@ function DropSpot(props) {
     return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
 }
 
-var css$3 = {"root":"pWaP2F"};
+var css$3 = {"root":"Y6Glcc"};
 
 const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const outsetRadius = props.size / 2 - 1;
@@ -5455,7 +5550,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
         React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
 });
 
-var css$2 = {"root":"_6LciCE","file-name":"N08HHB","fileName":"N08HHB","default-color":"JV9qk2","defaultColor":"JV9qk2","doc-color":"NPmDq-","docColor":"NPmDq-","xls-color":"uDZorx","xlsColor":"uDZorx","pdf-color":"_4yVtez","pdfColor":"_4yVtez","movie-color":"_1j0pH8","movieColor":"_1j0pH8","img-color":"twYL-W","imgColor":"twYL-W","mov-color":"h16xIm","movColor":"h16xIm","error-block":"_5wuRs4","errorBlock":"_5wuRs4","icons-block":"Yyrz5g","iconsBlock":"Yyrz5g"};
+var css$2 = {"root":"_6diYoq","file-name":"_18ewqW","fileName":"_18ewqW","default-color":"Ob3idp","defaultColor":"Ob3idp","doc-color":"uDYpvn","docColor":"uDYpvn","xls-color":"jrQz1V","xlsColor":"jrQz1V","pdf-color":"_7FKmMi","pdfColor":"_7FKmMi","movie-color":"nhnTw0","movieColor":"nhnTw0","img-color":"UIHS8m","imgColor":"UIHS8m","mov-color":"pDcfhs","movColor":"pDcfhs","error-block":"DSaw5W","errorBlock":"DSaw5W","icons-block":"gFiLfq","iconsBlock":"gFiLfq"};
 
 const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
     const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
@@ -5574,7 +5669,7 @@ const getErrorPageConfig = () => ({
     },
 });
 
-var css$1 = {"container":"eanV-l"};
+var css$1 = {"container":"VmHBCj"};
 
 const ErrorPage = (props) => {
     const isMobileScreen = uuiCore.isMobile();
@@ -5586,7 +5681,7 @@ const ErrorPage = (props) => {
             props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
 };
 
-var css = {"recovery-spinner":"eNxb-h","recoverySpinner":"eNxb-h","recovery-message":"_4-0UVP","recoveryMessage":"_4-0UVP","modal-blocker":"Q1TxvK","modalBlocker":"Q1TxvK","modalFadeIn":"r6vGc-"};
+var css = {"recovery-spinner":"LM4mC9","recoverySpinner":"LM4mC9","recovery-message":"XDhibA","recoveryMessage":"XDhibA","modal-blocker":"FESVwU","modalBlocker":"FESVwU","modalFadeIn":"_0-xGvA"};
 
 function ErrorHandler(props) {
     const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
@@ -5777,6 +5872,7 @@ exports.WarningAlert = WarningAlert;
 exports.WarningNotification = WarningNotification;
 exports.applyDateSelectionMods = applyDateSelectionMods;
 exports.defaultPredicates = defaultPredicates;
+exports.getDefaultPredicate = getDefaultPredicate;
 exports.getErrorPageConfig = getErrorPageConfig;
 exports.getHighlightRanges = getHighlightRanges;
 exports.getHighlightedSearchMatches = getHighlightedSearchMatches;