@max-ts/kit 1.5.2 → 1.6.0

package/lib/index.mjs

@@ -1,10 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Accordion, Checkbox } from "@base-ui/react";
 import clsx_0, { clsx } from "clsx";
-import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, ArrowLeft, ArrowRight, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
+import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, ArrowLeft, ArrowRight, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, Loader, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Button } from "@base-ui/react/button";
-import react, { createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import react, { Component as external_react_Component, createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Combobox } from "@base-ui/react/combobox";
 import { Avatar } from "@base-ui/react/avatar";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -1752,124 +1752,153 @@ const ConfirmAction = (props)=>{
         ]
     });
 };
-var sizes = {
-    small: 'small__1o97kvm1',
-    medium: 'medium__1o97kvm2',
-    large: 'large__1o97kvm3'
+var Empty_styles_css_content = 'style__e4li7y7';
+var Empty_styles_css_description = 'style__e4li7y6';
+var Empty_styles_css_header = 'style__e4li7y1';
+var styles_css_media = 'style__e4li7y2';
+var mediaVariants = {
+    default: 'default__e4li7y3',
+    icon: 'icon__e4li7y4'
 };
-var styles_css_wrapper = 'style__1o97kvm0';
-const Image_Image = (props)=>/*#__PURE__*/ jsx("img", {
-        alt: props.alt,
-        src: props.src,
-        className: clsx_0(styles_css_wrapper, sizes[props.size || 'medium'], props.className),
-        width: props.width,
-        height: props.height
+var Empty_styles_css_root = 'style__e4li7y0';
+var Empty_styles_css_title = 'style__e4li7y5';
+function Empty_Empty({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty",
+        className: clsx(Empty_styles_css_root, className),
+        ...props
     });
-const SIZE = {
-    small: 'small',
-    medium: 'medium',
-    large: 'large'
-};
-const IMAGE_WIDTH = {
-    [SIZE.small]: '239px',
-    [SIZE.medium]: '323px',
-    [SIZE.large]: '458px'
-};
-const IMAGE_HEIGHT = {
-    [SIZE.small]: '119px',
-    [SIZE.medium]: '161px',
-    [SIZE.large]: '229px'
-};
-const MAX_INNER_WIDTH = {
-    [SIZE.small]: '384px',
-    [SIZE.medium]: '400px',
-    [SIZE.large]: '460px'
-};
-const TITLE_HEADER_LEVEL = {
-    [SIZE.small]: 'subtitle1',
-    [SIZE.medium]: 'h6',
-    [SIZE.large]: 'h5'
-};
-var descriptionClass = 'style__1nenzg05';
-var footerClass = 'style__1nenzg06';
-var innerContainer = 'style__1nenzg04';
-var styles_css_sizes = {
-    small: 'small__1nenzg01',
-    medium: 'medium__1nenzg02',
-    large: 'large__1nenzg03'
-};
-var Placeholder_styles_css_wrapper = 'style__1nenzg00';
-const Placeholder = ({ className, title, imgSrc, imgAlt, description, actions, size = 'small', renderImage })=>{
-    const RenderImage = useMemo(()=>renderImage || Image_Image, [
-        renderImage
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: clsx_0(Placeholder_styles_css_wrapper, styles_css_sizes[size], className),
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: innerContainer,
-                style: {
-                    maxWidth: MAX_INNER_WIDTH[size]
-                },
-                children: [
-                    imgSrc && /*#__PURE__*/ jsx(RenderImage, {
-                        src: imgSrc,
-                        alt: imgAlt,
-                        width: IMAGE_WIDTH[size],
-                        height: IMAGE_HEIGHT[size],
-                        size: size
-                    }),
-                    /*#__PURE__*/ jsx(Typography, {
-                        align: "center",
-                        color: "secondary",
-                        variant: TITLE_HEADER_LEVEL[size],
-                        children: title
-                    }),
-                    description && /*#__PURE__*/ jsx(Typography, {
-                        className: descriptionClass,
-                        component: "div",
-                        variant: "body1",
-                        children: description
-                    })
-                ]
-            }),
-            actions && /*#__PURE__*/ jsx("footer", {
-                className: footerClass,
-                children: actions
-            })
-        ]
+}
+function Empty_Header({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-header",
+        className: clsx(Empty_styles_css_header, className),
+        ...props
+    });
+}
+function Empty_Media({ className, variant = 'default', ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-media",
+        "data-variant": variant,
+        className: clsx(styles_css_media, mediaVariants[variant], className),
+        ...props
+    });
+}
+function Empty_Title({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-title",
+        className: clsx(Empty_styles_css_title, className),
+        ...props
+    });
+}
+function Empty_Description({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-description",
+        className: clsx(Empty_styles_css_description, className),
+        ...props
     });
+}
+function Empty_Content({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "empty-content",
+        className: clsx(Empty_styles_css_content, className),
+        ...props
+    });
+}
+Empty_Empty.Header = Empty_Header;
+Empty_Empty.Media = Empty_Media;
+Empty_Empty.Title = Empty_Title;
+Empty_Empty.Description = Empty_Description;
+Empty_Empty.Content = Empty_Content;
+var Spinner_styles_css_root = 'style__1dbefg91';
+function Spinner({ className, role = 'status', 'aria-label': ariaLabel = 'Loading', ...props }) {
+    return /*#__PURE__*/ jsx(Loader, {
+        role: role,
+        "aria-label": ariaLabel,
+        className: clsx(Spinner_styles_css_root, className),
+        ...props
+    });
+}
+var errorImage = 'style__nan0ao1';
+var styles_css_state = 'style__nan0ao0';
+const DEFAULT_ERROR_STATE = {
+    title: 'Произошла ошибка',
+    message: 'Не удалось загрузить данные.'
 };
-var loadingContainer = 'style__nan0ao0';
-const ContentState = ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent: LoadingContent = /*#__PURE__*/ jsx(CircularProgress, {
-    color: "primary"
-}) })=>{
-    if (isLoading) return /*#__PURE__*/ jsx("div", {
-        className: loadingContainer,
-        children: LoadingContent
-    });
-    if (isCustom && customState) return /*#__PURE__*/ jsx(Placeholder, {
-        ...customState
-    });
-    if (isError && errorState) {
-        const { title = 'Произошла ошибка', imgAlt, imgSrc, errorList, onRetry, actions = /*#__PURE__*/ jsx(Button_Button, {
-            onClick: onRetry,
-            children: "Попробовать снова"
-        }) } = errorState;
-        const description = errorList.map((errorMessage)=>/*#__PURE__*/ jsx(Typography, {
-                component: "p",
-                children: errorMessage
-            }, errorMessage));
-        return /*#__PURE__*/ jsx(Placeholder, {
-            title: title,
-            description: description,
-            imgAlt: imgAlt,
-            imgSrc: imgSrc,
-            actions: actions
+class ErrorBoundary extends external_react_Component {
+    state = {
+        hasError: false
+    };
+    static getDerivedStateFromError() {
+        return {
+            hasError: true
+        };
+    }
+    reset = ()=>{
+        this.setState({
+            hasError: false
         });
+    };
+    render() {
+        if (this.state.hasError) return this.props.fallback(this.reset);
+        return this.props.children;
     }
-    return children;
-};
+}
+function ErrorView({ errorState, onReset }) {
+    const { title = DEFAULT_ERROR_STATE.title, message, imgSrc, onRetry } = errorState ?? DEFAULT_ERROR_STATE;
+    const handleRetry = ()=>{
+        onReset?.();
+        onRetry?.();
+    };
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "content-state-error",
+        className: styles_css_state,
+        children: /*#__PURE__*/ jsxs(Empty_Empty, {
+            children: [
+                /*#__PURE__*/ jsxs(Empty_Empty.Header, {
+                    children: [
+                        imgSrc && /*#__PURE__*/ jsx(Empty_Empty.Media, {
+                            children: /*#__PURE__*/ jsx("img", {
+                                className: errorImage,
+                                src: imgSrc,
+                                alt: ""
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Empty_Empty.Title, {
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx(Empty_Empty.Description, {
+                            children: message
+                        })
+                    ]
+                }),
+                onRetry && /*#__PURE__*/ jsx(Empty_Empty.Content, {
+                    children: /*#__PURE__*/ jsx(Button_Button, {
+                        onClick: handleRetry,
+                        children: "Попробовать снова"
+                    })
+                })
+            ]
+        })
+    });
+}
+function ContentState({ isLoading, isError, errorState, children }) {
+    if (isLoading) return /*#__PURE__*/ jsx("div", {
+        "data-slot": "content-state-loading",
+        className: styles_css_state,
+        children: /*#__PURE__*/ jsx(Spinner, {})
+    });
+    if (isError) return /*#__PURE__*/ jsx(ErrorView, {
+        errorState: errorState
+    });
+    return /*#__PURE__*/ jsx(ErrorBoundary, {
+        fallback: (reset)=>/*#__PURE__*/ jsx(ErrorView, {
+                errorState: errorState,
+                onReset: reset
+            }),
+        children: children
+    });
+}
 var arrowClass = 'style__izacrl5';
 var contentClass = 'style__izacrl3';
 var positionerClass = 'style__izacrl2';
@@ -1912,7 +1941,7 @@ const Tooltip_Tooltip = ({ text, content, children, side = 'top', sideOffset = 1
         })
     });
 var copyIconClass = 'style__1wpx85c1';
-var CopyTypography_styles_css_wrapper = 'style__1wpx85c0';
+var styles_css_wrapper = 'style__1wpx85c0';
 const useLogic_useLogic_useLogic = ({ children, copyText, isShowCopyText, copyPosition })=>{
     const [status, setStatus] = useState("Скопировать");
     const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -1957,7 +1986,7 @@ const CopyTypography = (props)=>{
             onClick: handleClick,
             component: "div",
             color: color,
-            className: clsx(CopyTypography_styles_css_wrapper, className),
+            className: clsx(styles_css_wrapper, className),
             ...restProps,
             children: [
                 isIconOnLeft && renderIcon(),
@@ -1991,7 +2020,7 @@ const Main = ({ children, className })=>/*#__PURE__*/ jsx("main", {
         children: children
     });
 var styles_css_contentClass = 'SidebarContent__1low90p6';
-var styles_css_footerClass = 'SidebarFooter__1low90p5';
+var footerClass = 'SidebarFooter__1low90p5';
 var headerClass = 'SidebarHeader__1low90p4';
 var Sidebar_styles_css_rootClass = 'SidebarContainer__1low90p2';
 var triggerClass = 'SidebarTrigger__1low90p1';
@@ -2025,7 +2054,7 @@ const Sidebar = ({ width = "16rem", header, footer, content, className })=>{
                         children: content
                     }),
                     footer && /*#__PURE__*/ jsx("footer", {
-                        className: styles_css_footerClass,
+                        className: footerClass,
                         children: footer
                     })
                 ]
@@ -2098,52 +2127,61 @@ function Row({ row, rowHeight, onRowClick, columns, rowIndex, rowId }) {
         })
     });
 }
+var cell = 'style__15m2ib82';
 var styles_css_container = 'style__15m2ib80';
-var loader = 'style__15m2ib81';
+var stateImage = 'style__15m2ib81';
 function State({ isLoading, isEmpty, columnsLength, emptyState = {
     text: 'Нет данных'
 }, errorState = {
-    text: 'Произошла ошибка'
-}, isError, onRetry }) {
+    message: 'Произошла ошибка'
+}, isError }) {
     const Container = ({ children })=>/*#__PURE__*/ jsx("tr", {
             className: styles_css_container,
             children: /*#__PURE__*/ jsx("td", {
+                className: cell,
                 colSpan: columnsLength,
-                align: "center",
                 children: children
             })
         });
     if (isLoading) return /*#__PURE__*/ jsx(Container, {
-        children: /*#__PURE__*/ jsx("span", {
-            className: loader,
-            children: /*#__PURE__*/ jsx(CircularProgress, {})
+        children: /*#__PURE__*/ jsx(ContentState, {
+            isLoading: true,
+            children: null
         })
     });
     if (isEmpty) {
-        const { imgSrc, imgAlt, text } = emptyState;
+        const { imgSrc, imgAlt, text, actions } = emptyState;
         return /*#__PURE__*/ jsx(Container, {
-            children: /*#__PURE__*/ jsx(Placeholder, {
-                title: text,
-                imgSrc: imgSrc,
-                imgAlt: imgAlt
-            })
-        });
-    }
-    if (isError) {
-        const { imgSrc, imgAlt, text } = errorState;
-        return /*#__PURE__*/ jsx(Container, {
-            children: /*#__PURE__*/ jsx(Placeholder, {
-                title: text,
-                imgSrc: imgSrc,
-                imgAlt: imgAlt,
-                actions: onRetry ? /*#__PURE__*/ jsx(Button_Button, {
-                    variant: "outline",
-                    onClick: onRetry,
-                    children: "Попробовать снова"
-                }) : void 0
+            children: /*#__PURE__*/ jsxs(Empty_Empty, {
+                children: [
+                    /*#__PURE__*/ jsxs(Empty_Empty.Header, {
+                        children: [
+                            imgSrc && /*#__PURE__*/ jsx(Empty_Empty.Media, {
+                                children: /*#__PURE__*/ jsx("img", {
+                                    className: stateImage,
+                                    src: imgSrc,
+                                    alt: imgAlt ?? ''
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Empty_Empty.Title, {
+                                children: text
+                            })
+                        ]
+                    }),
+                    actions && /*#__PURE__*/ jsx(Empty_Empty.Content, {
+                        children: actions
+                    })
+                ]
             })
         });
     }
+    if (isError) return /*#__PURE__*/ jsx(Container, {
+        children: /*#__PURE__*/ jsx(ContentState, {
+            isError: true,
+            errorState: errorState,
+            children: null
+        })
+    });
     return null;
 }
 var Body_styles_css_container = 'style__82af400';
@@ -2175,15 +2213,60 @@ function Body({ isError, isLoading, emptyState, errorState, columns, rows, rowHe
         })
     });
 }
-var Footer_styles_css_footerClass = 'style__2s55b60';
+var styles_css_footerClass = 'style__2s55b60';
 function Footer_Footer({ children, className }) {
     return /*#__PURE__*/ jsx("footer", {
-        className: clsx(Footer_styles_css_footerClass, className),
+        className: clsx(styles_css_footerClass, className),
         children: children
     });
 }
+var styles_css_alignments = {
+    left: 'left__o752f01',
+    center: 'center__o752f02',
+    right: 'right__o752f03',
+    justify: 'justify__o752f04'
+};
+var DataGridSortHeader_styles_css_wrapper = 'style__o752f00';
+function DataGridSortHeader({ sorting, onSortingChange, setSorting, column: { label, field, align = 'left' }, className }) {
+    if (!field) return null;
+    const handleSortingChange = onSortingChange ?? setSorting;
+    const activeOrder = sorting?.key === field ? sorting.order : void 0;
+    const isActive = Boolean(activeOrder);
+    const handleClick = ()=>{
+        if (!handleSortingChange) return;
+        if ('asc' === activeOrder) handleSortingChange({
+            key: field,
+            order: 'desc'
+        });
+        else isActive ? handleSortingChange(null) : handleSortingChange({
+            key: field,
+            order: 'asc'
+        });
+    };
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: clsx(DataGridSortHeader_styles_css_wrapper, styles_css_alignments[align], className),
+        onClick: handleClick,
+        disabled: !handleSortingChange,
+        children: [
+            label,
+            isActive ? 'asc' === activeOrder ? /*#__PURE__*/ jsx(ArrowDownNarrowWide, {
+                size: 16
+            }) : /*#__PURE__*/ jsx(ArrowDownWideNarrow, {
+                size: 16
+            }) : /*#__PURE__*/ jsx(ArrowDownUp, {
+                size: 16
+            })
+        ]
+    });
+}
 var headerCellClass = 'style__uma6hu0';
-function HeaderCell({ column, height, width }) {
+function HeaderCell({ column, height, width, sorting, onSortingChange }) {
+    const content = column.renderHeaderCell?.(column) || (column.sortable ? /*#__PURE__*/ jsx(DataGridSortHeader, {
+        column: column,
+        sorting: sorting ?? null,
+        onSortingChange: onSortingChange
+    }) : column.label);
     return /*#__PURE__*/ jsx("th", {
         style: {
             color: column.color,
@@ -2191,21 +2274,23 @@ function HeaderCell({ column, height, width }) {
             width
         },
         align: column.align ?? 'left',
-        title: column.title,
+        title: column.label,
         className: headerCellClass,
-        children: column.renderHeaderCell?.(column) || column.title
+        children: content
     });
 }
 var headerRow = 'style__fkgoub0';
-function Header_Header({ columns, height }) {
+function Header_Header({ columns, height, sorting, onSortingChange }) {
     return /*#__PURE__*/ jsx("thead", {
         children: /*#__PURE__*/ jsx("tr", {
             className: clsx(headerRow),
             children: columns.map((col)=>/*#__PURE__*/ jsx(HeaderCell, {
                     column: col,
                     height: height,
-                    width: col.width
-                }, col.title))
+                    width: col.width,
+                    sorting: sorting,
+                    onSortingChange: onSortingChange
+                }, col.label))
         })
     });
 }
@@ -2215,7 +2300,24 @@ var fullHeight = 'style__1gqvluf2';
 var DataGrid_styles_css_loading = 'style__1gqvluf4';
 var table = 'style__1gqvluf1';
 var titleClass = 'style__1gqvluf5';
-function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, headerHeight = 40, keyId, onRowClick, isLoading, isDisabled, isError, emptyState, errorState, footer, title, onRetry }) {
+function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, headerHeight = 40, keyId, onRowClick, isLoading, isDisabled, isError, emptyState, errorState, sorting, onSortingChange, sortMode = 'client', footer, title }) {
+    const sortedRows = useMemo(()=>{
+        if (!sorting || 'manual' === sortMode) return rows;
+        const column = columns.find(({ field })=>field === sorting.key);
+        const sortDirection = 'asc' === sorting.order ? 1 : -1;
+        return rows.map((row, index)=>({
+                row,
+                index
+            })).sort((a, b)=>{
+            const result = column?.sortComparator?.(a.row, b.row) ?? compareValues(column?.sortAccessor ? column.sortAccessor(a.row) : a.row[sorting.key], column?.sortAccessor ? column.sortAccessor(b.row) : b.row[sorting.key]);
+            return 0 === result ? a.index - b.index : result * sortDirection;
+        }).map(({ row })=>row);
+    }, [
+        columns,
+        rows,
+        sortMode,
+        sorting
+    ]);
     const isFullHeight = isLoading || isError || 0 === rows.length;
     return /*#__PURE__*/ jsxs("div", {
         "data-slot": "data-grid",
@@ -2237,10 +2339,12 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
                     }),
                     /*#__PURE__*/ jsx(Header_Header, {
                         columns: columns,
-                        height: headerHeight
+                        height: headerHeight,
+                        sorting: sorting,
+                        onSortingChange: onSortingChange
                     }),
                     /*#__PURE__*/ jsx(Body, {
-                        rows: rows,
+                        rows: sortedRows,
                         columns: columns,
                         rowHeight: rowHeight,
                         keyId: keyId,
@@ -2248,8 +2352,7 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
                         isLoading: isLoading,
                         emptyState: emptyState,
                         errorState: errorState,
-                        isError: isError,
-                        onRetry: onRetry
+                        isError: isError
                     })
                 ]
             }),
@@ -2259,6 +2362,17 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
         ]
     });
 }
+function compareValues(a, b) {
+    if (null == a && null == b) return 0;
+    if (null == a) return -1;
+    if (null == b) return 1;
+    if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+    if ('number' == typeof a && 'number' == typeof b) return a - b;
+    return String(a).localeCompare(String(b), void 0, {
+        numeric: true,
+        sensitivity: 'base'
+    });
+}
 var checkboxItem = 'style__1ib8wktd style__1ib8wkta';
 var DropdownMenu_styles_css_content = 'style__1ib8wkt7';
 var styles_css_icon = 'style__1ib8wkth';
@@ -2603,40 +2717,6 @@ const DataGridActionCell = (props)=>{
         ]
     });
 };
-var styles_css_alignments = {
-    left: 'left__o752f01',
-    center: 'center__o752f02',
-    right: 'right__o752f03',
-    justify: 'justify__o752f04'
-};
-var DataGridSortHeader_styles_css_wrapper = 'style__o752f00';
-function DataGridSortHeader({ sorting, setSorting, column: { title, field, align = 'left' }, className }) {
-    if (!field) return null;
-    const handleClick = ()=>{
-        sorting.key === field ? setSorting({
-            key: field,
-            order: 'asc' === sorting.order ? 'desc' : 'asc'
-        }) : setSorting({
-            key: field,
-            order: 'asc'
-        });
-    };
-    return /*#__PURE__*/ jsxs("button", {
-        type: "button",
-        className: clsx(DataGridSortHeader_styles_css_wrapper, styles_css_alignments[align], className),
-        onClick: handleClick,
-        children: [
-            title,
-            sorting.key === field ? 'asc' === sorting.order ? /*#__PURE__*/ jsx(ArrowDownNarrowWide, {
-                size: 16
-            }) : /*#__PURE__*/ jsx(ArrowDownWideNarrow, {
-                size: 16
-            }) : /*#__PURE__*/ jsx(ArrowDownUp, {
-                size: 16
-            })
-        ]
-    });
-}
 const ITEM_CLASSNAME = 'datalist_item';
 const END_OF_SCROLL_MESSAGE = 'Вы достигли конца списка';
 var EndData_styles_css_item = 'style__1syvw5e0';
@@ -2663,12 +2743,100 @@ const ErrorState = ({ onRetry })=>/*#__PURE__*/ jsxs("li", {
         ]
     });
 var Loader_styles_css_item = 'style__111czea0';
-const Loader = ()=>/*#__PURE__*/ jsx("li", {
+const Loader_Loader = ()=>/*#__PURE__*/ jsx("li", {
         className: Loader_styles_css_item,
         children: /*#__PURE__*/ jsx(CircularProgress, {
             color: "primary"
         })
     });
+var sizes = {
+    small: 'small__1o97kvm1',
+    medium: 'medium__1o97kvm2',
+    large: 'large__1o97kvm3'
+};
+var Image_styles_css_wrapper = 'style__1o97kvm0';
+const Image_Image = (props)=>/*#__PURE__*/ jsx("img", {
+        alt: props.alt,
+        src: props.src,
+        className: clsx_0(Image_styles_css_wrapper, sizes[props.size || 'medium'], props.className),
+        width: props.width,
+        height: props.height
+    });
+const SIZE = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large'
+};
+const IMAGE_WIDTH = {
+    [SIZE.small]: '239px',
+    [SIZE.medium]: '323px',
+    [SIZE.large]: '458px'
+};
+const IMAGE_HEIGHT = {
+    [SIZE.small]: '119px',
+    [SIZE.medium]: '161px',
+    [SIZE.large]: '229px'
+};
+const MAX_INNER_WIDTH = {
+    [SIZE.small]: '384px',
+    [SIZE.medium]: '400px',
+    [SIZE.large]: '460px'
+};
+const TITLE_HEADER_LEVEL = {
+    [SIZE.small]: 'subtitle1',
+    [SIZE.medium]: 'h6',
+    [SIZE.large]: 'h5'
+};
+var descriptionClass = 'style__1nenzg05';
+var Placeholder_styles_css_footerClass = 'style__1nenzg06';
+var innerContainer = 'style__1nenzg04';
+var styles_css_sizes = {
+    small: 'small__1nenzg01',
+    medium: 'medium__1nenzg02',
+    large: 'large__1nenzg03'
+};
+var Placeholder_styles_css_wrapper = 'style__1nenzg00';
+const Placeholder = ({ className, title, imgSrc, imgAlt, description, actions, size = 'small', renderImage })=>{
+    const RenderImage = useMemo(()=>renderImage || Image_Image, [
+        renderImage
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx_0(Placeholder_styles_css_wrapper, styles_css_sizes[size], className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: innerContainer,
+                style: {
+                    maxWidth: MAX_INNER_WIDTH[size]
+                },
+                children: [
+                    imgSrc && /*#__PURE__*/ jsx(RenderImage, {
+                        src: imgSrc,
+                        alt: imgAlt,
+                        width: IMAGE_WIDTH[size],
+                        height: IMAGE_HEIGHT[size],
+                        size: size
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        align: "center",
+                        color: "secondary",
+                        variant: TITLE_HEADER_LEVEL[size],
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ jsx(Typography, {
+                        className: descriptionClass,
+                        component: "div",
+                        variant: "body1",
+                        children: description
+                    })
+                ]
+            }),
+            actions && /*#__PURE__*/ jsx("footer", {
+                className: Placeholder_styles_css_footerClass,
+                children: actions
+            })
+        ]
+    });
+};
 const NO_DATA_TEXT = 'Нет данных';
 const NoData = ({ noDataImgSrc })=>/*#__PURE__*/ jsx(Placeholder, {
         title: NO_DATA_TEXT,
@@ -2708,9 +2876,7 @@ const DataList = ({ data, keyId, className, itemContent, noDataPlaceholder, endO
         onEndReached
     ]);
     const isDataExist = Boolean(data?.length);
-    if (!isDataExist && !isLoading && !isError) return noDataPlaceholder ? /*#__PURE__*/ jsx(Fragment, {
-        children: noDataPlaceholder
-    }) : /*#__PURE__*/ jsx(NoData, {});
+    if (!isDataExist && !isLoading && !isError) return noDataPlaceholder ? noDataPlaceholder : /*#__PURE__*/ jsx(NoData, {});
     return /*#__PURE__*/ jsxs(ContentState, {
         isLoading: isLoading && !isDataExist,
         isError: isError && !isDataExist,
@@ -2735,7 +2901,7 @@ const DataList = ({ data, keyId, className, itemContent, noDataPlaceholder, endO
                 components: {
                     Footer: ()=>/*#__PURE__*/ jsxs(Fragment, {
                             children: [
-                                isLoading && /*#__PURE__*/ jsx(Loader, {}),
+                                isLoading && /*#__PURE__*/ jsx(Loader_Loader, {}),
                                 isError && /*#__PURE__*/ jsx(ErrorState, {
                                     onRetry: onRetry
                                 }),
@@ -3254,64 +3420,6 @@ const Drawer_Drawer = ({ children, trigger, className, title, description = '',
             })
         ]
     });
-var Empty_styles_css_content = 'style__e4li7y7';
-var Empty_styles_css_description = 'style__e4li7y6';
-var Empty_styles_css_header = 'style__e4li7y1';
-var styles_css_media = 'style__e4li7y2';
-var mediaVariants = {
-    default: 'default__e4li7y3',
-    icon: 'icon__e4li7y4'
-};
-var Empty_styles_css_root = 'style__e4li7y0';
-var Empty_styles_css_title = 'style__e4li7y5';
-function Empty_Empty({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "empty",
-        className: clsx(Empty_styles_css_root, className),
-        ...props
-    });
-}
-function Empty_Header({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "empty-header",
-        className: clsx(Empty_styles_css_header, className),
-        ...props
-    });
-}
-function Empty_Media({ className, variant = 'default', ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "empty-media",
-        "data-variant": variant,
-        className: clsx(styles_css_media, mediaVariants[variant], className),
-        ...props
-    });
-}
-function Empty_Title({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "empty-title",
-        className: clsx(Empty_styles_css_title, className),
-        ...props
-    });
-}
-function Empty_Description({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "empty-description",
-        className: clsx(Empty_styles_css_description, className),
-        ...props
-    });
-}
-function Empty_Content({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "empty-content",
-        className: clsx(Empty_styles_css_content, className),
-        ...props
-    });
-}
-Empty_Empty.Header = Empty_Header;
-Empty_Empty.Media = Empty_Media;
-Empty_Empty.Title = Empty_Title;
-Empty_Empty.Description = Empty_Description;
-Empty_Empty.Content = Empty_Content;
 var styles_css_arrow = 'style__a5l83v4';
 var arrowLeft = 'style__a5l83v5';
 var arrowRight = 'style__a5l83v6';
@@ -5296,4 +5404,4 @@ const ToggleGroup = ({ value, onChange, options, size, className, label, multipl
         ]
     });
 };
-export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };
+export { Accordion_Accordion as Accordion, AlertDialog_AlertDialog as AlertDialog, Autocomplete, Avatar_Avatar as Avatar, Badge_Badge as Badge, Breadcrumb, ButtonGroup, Button_Button as Button, Button_buttonSizes as buttonSizes, Button_buttonVariants as buttonVariants, Calendar, Card, Carousel, Checkbox_Checkbox as Checkbox, CircularProgress, Collapsible_Collapsible as Collapsible, Combobox_Combobox as Combobox, ConfirmAction, ContentState, CopyTypography, DEFAULT_SEPARATOR, DEFAULT_SYMBOL, DESCRIPTION_ROOT_CLASSNAME, DashboardLayout, DataGrid, DataGridActionCell, DataGridSortHeader, DataList, DatePicker, Description_Description as Description, Dialog_Dialog as Dialog, Drawer_Drawer as Drawer, DropdownMenu, Empty_Empty as Empty, ImageCarousel, Image_Image as Image, InputGroup, InputOTP, Input_Input as Input, Label, MaskField, NOTIFICATION_POSITIONS, NOTIFY_CLASSNAME, Notification, NotificationContainer, OverflowTypography, PageLayout, Pagination, PeriodPicker, Placeholder, Popover_Popover as Popover, RadioGroupItem, RadioGroup_RadioGroup as RadioGroup, RangeInput, ScrollTopButton, Select_Select as Select, Sheet, Sidebar_Sidebar as Sidebar, Slider_Slider as Slider, Spinner, Tabs_Tabs as Tabs, TextField, Textarea_Textarea as Textarea, ToggleGroup, Tooltip_Tooltip as Tooltip, Typography, alignments, badgeVariants, calculateSize, constants_NotificationVariantTypes as NotificationVariantTypes, createHandle, displays, negativeSpacing, notification, spacing, styles_css_colors as colors, styles_css_variants as variants, theme, transforms, useComboboxAnchor, useDashboard, useIsMobile, useOverflowed, useSidebar, weights };