@astral/ui 4.91.2 → 4.92.1

package/components/Alert/Alert.js

@@ -6,7 +6,7 @@ import { InfoFillMd } from '../../icons/InfoFillMd';
 import { SuccessFillMd } from '../../icons/SuccessFillMd';
 import { WarningFillMd } from '../../icons/WarningFillMd';
 import { Collapse } from '../Collapse';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { alertClassnames } from './constants';
 import { BodyWrapper, IconWrapper, StyledGrid, StyledIconButton, StyledTypography, Title, Wrapper, } from './styles';
@@ -48,7 +48,7 @@ export const Alert = forwardRef(({ children, title, closeText = 'Скрыть',
         };
         return (_jsx(IconWrapper, { className: alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
     };
-    return (_jsx(Collapse, { in: isVisible, unmountOnExit: unmountOnExit, children: _jsxs(Wrapper, { style: style, className: classNames(alertClassnames.contentWrapper, alertCva({
+    return (_jsx(Collapse, { in: isVisible, unmountOnExit: unmountOnExit, children: _jsxs(Wrapper, { style: style, className: cn(alertClassnames.contentWrapper, alertCva({
                 hasTitle: Boolean(title),
                 hasCloseButton: Boolean(onClose),
                 hasActions: Boolean(actions),

package/components/Autocomplete/Autocomplete.js

@@ -10,7 +10,7 @@ import { Loader } from '../Loader';
 import { OverflowTypography } from '../OverflowTypography';
 import { TagsList } from '../TagsList';
 import { TextField } from '../TextField';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, INPUT_MIN_WIDTH, } from './constants';
 import { StyledAutocomplete, StyledMenuItem } from './styles';
 import { useLogic } from './useLogic';
@@ -42,7 +42,7 @@ const AutocompleteInner = (props, ref) => {
             ...inputParams,
             inputProps: {
                 ...inputParams.inputProps,
-                className: classNames(inputParams?.inputProps?.className, inputProps?.className),
+                className: cn(inputParams?.inputProps?.className, inputProps?.className),
             },
             InputProps: {
                 ...inputParams.InputProps,

package/components/Autocomplete/useLogic/useLogic.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { autocompleteClassnames } from '../constants';
 import { checkIsInputEmpty } from './utils';
 export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
@@ -24,7 +24,7 @@ export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToVal
         }
     };
     const classnames = useMemo(() => {
-        return classNames(className, autocompleteClassnames.root, {
+        return cn(className, autocompleteClassnames.root, {
             [autocompleteClassnames.multiple]: multiple,
             [autocompleteClassnames.emptyValue]: isValueEmpty,
         });

package/components/Badge/Badge.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { badgeClassnames } from './constants';
 import { StyledBadge } from './styles';
 import { useLogic } from './useLogic';
 export const Badge = ({ children, color, max = 99, withBorder = true, variantColor = 'contained', classes, className, ...props }) => {
     const { badgeClasses } = useLogic({ classes });
-    return (_jsx(StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, classes: badgeClasses, className: classNames(badgeClassnames.root, className), ...props, children: children }));
+    return (_jsx(StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, classes: badgeClasses, className: cn(badgeClassnames.root, className), ...props, children: children }));
 };

package/components/BulletList/BulletList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { bulletListClassnames } from './constants';
 import { List, Wrapper } from './styles';
 /**
@@ -8,7 +8,7 @@ import { List, Wrapper } from './styles';
  */
 export const BulletList = (props) => {
     const { children, hideFirstBullet, className } = props;
-    const classnames = useMemo(() => classNames(className, bulletListClassnames.root, {
+    const classnames = useMemo(() => cn(className, bulletListClassnames.root, {
         [bulletListClassnames.hideFirstBullet]: hideFirstBullet,
     }), [hideFirstBullet]);
     return (_jsx(Wrapper, { children: _jsx(List, { className: classnames, children: children }) }));

package/components/BulletListItem/BulletListItem.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Typography } from '../Typography';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { Icon, Wrapper } from './styles';
 /**
  * Элемент с маркерами
  */
 export const BulletListItem = forwardRef((props, ref) => {
     const { children, className, ...restProps } = props;
-    return (_jsxs(Wrapper, { ref: ref, className: classNames(className), children: [_jsx(Icon, {}), _jsx(Typography, { component: "span", ...restProps, children: children })] }));
+    return (_jsxs(Wrapper, { ref: ref, className: cn(className), children: [_jsx(Icon, {}), _jsx(Typography, { component: "span", ...restProps, children: children })] }));
 });

package/components/Button/useLogic/useLogic.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { buttonClassnames, buttonColorClassnames } from '../constants';
 import { ButtonColors, ButtonVariants } from '../enums';
 export const useLogic = ({ loading, selected, variant = ButtonVariants.Contained, color = variant === ButtonVariants.Text
@@ -11,7 +11,7 @@ export const useLogic = ({ loading, selected, variant = ButtonVariants.Contained
         }
         return 'inverted';
     }, [variant]);
-    const classnames = useMemo(() => classNames(buttonClassnames.root, buttonColorClassnames[color], className, {
+    const classnames = useMemo(() => cn(buttonClassnames.root, buttonColorClassnames[color], className, {
         [buttonClassnames.loading]: loading,
         [buttonClassnames.disabled]: disabled,
         [buttonClassnames.selected]: selected,

package/components/Checkbox/Icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgIcon } from '../../SvgIcon';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { checkboxClassnames } from '../constants';
-export const Icon = ({ ...props }) => (_jsxs(SvgIcon, { size: "sm", viewBox: "0 0 16 16", ...props, children: [_jsx("rect", { className: checkboxClassnames.outline, x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5" }), _jsx("path", { className: classNames(checkboxClassnames.symbol, checkboxClassnames.iconChecked), d: "M3.892 8.64a.75.75 0 0 1 1.003-1.112l.058.052 1.97 1.97 4.469-4.47.056-.052a.75.75 0 0 1 1.056 1.056l-.051.056-5 5a.75.75 0 0 1-1.061 0l-2.5-2.5Z" }), _jsx("path", { className: classNames(checkboxClassnames.symbol, checkboxClassnames.iconIndeterminate), d: "M12 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h8Z" })] }));
+export const Icon = ({ ...props }) => (_jsxs(SvgIcon, { size: "sm", viewBox: "0 0 16 16", ...props, children: [_jsx("rect", { className: checkboxClassnames.outline, x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5" }), _jsx("path", { className: cn(checkboxClassnames.symbol, checkboxClassnames.iconChecked), d: "M3.892 8.64a.75.75 0 0 1 1.003-1.112l.058.052 1.97 1.97 4.469-4.47.056-.052a.75.75 0 0 1 1.056 1.056l-.051.056-5 5a.75.75 0 0 1-1.061 0l-2.5-2.5Z" }), _jsx("path", { className: cn(checkboxClassnames.symbol, checkboxClassnames.iconIndeterminate), d: "M12 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h8Z" })] }));

package/components/Checkbox/useLogic/useLogic.js

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useUpdateEffect } from '../../useUpdateEffect';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { checkboxClassnames } from '../constants';
 export const useLogic = ({ checked = false, indeterminate = false, disabled = false, isError = false, defaultChecked = false, onChange: propsOnChange, className: propClassNames, role, style, name, inputRef, value, id, ...restProps }) => {
     const [isChecked, setIsChecked] = useState(defaultChecked || checked);
@@ -23,7 +23,7 @@ export const useLogic = ({ checked = false, indeterminate = false, disabled = fa
         }
         return 'inherit';
     }, [disabled, isError, isChecked, indeterminate]);
-    const className = useMemo(() => classNames(checkboxClassnames.root, isChecked ? checkboxClassnames.checked : '', disabled ? checkboxClassnames.disabled : '', indeterminate ? checkboxClassnames.indeterminate : '', propClassNames), [isChecked, indeterminate, disabled, propClassNames]);
+    const className = useMemo(() => cn(checkboxClassnames.root, isChecked ? checkboxClassnames.checked : '', disabled ? checkboxClassnames.disabled : '', indeterminate ? checkboxClassnames.indeterminate : '', propClassNames), [isChecked, indeterminate, disabled, propClassNames]);
     return {
         onChange,
         color,

package/components/Chip/ChipStatusIcon/ChipStatusIcon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { chipStatusIconClassnames } from './constants';
 import { StatusIcon } from './styled';
 export const ChipStatusIcon = ({ status }) => {
     const classnames = useMemo(() => {
-        return classNames(chipStatusIconClassnames.root, {
+        return cn(chipStatusIconClassnames.root, {
             [chipStatusIconClassnames.success]: status === 'success',
             [chipStatusIconClassnames.warning]: status === 'warning',
             [chipStatusIconClassnames.error]: status === 'error',

package/components/Chip/useLogic/useLogic.js

@@ -1,12 +1,12 @@
 import { useContext, useMemo } from 'react';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { ChipContext } from '../ChipProvider';
 import { chipClassnames } from '../constants';
 export const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, maxCount, name: nameProp, value: valueProp, }) => {
     const { mode, name: contextName } = useContext(ChipContext);
     const isMultiple = mode === 'multiple';
     const inputName = nameProp ?? contextName;
-    const classnames = useMemo(() => classNames(className, chipClassnames.root, {
+    const classnames = useMemo(() => cn(className, chipClassnames.root, {
         [chipClassnames.disabled]: isDisabled,
         [chipClassnames.selected]: isSelected,
         [chipClassnames.sizeSmall]: size === 'small',

package/components/ConfirmDialog/ConfirmDialog.js

@@ -4,7 +4,7 @@ import { Dialog } from '../Dialog';
 import { DialogActions } from '../DialogActions';
 import { DialogContent } from '../DialogContent';
 import { DialogContentText } from '../DialogContentText';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { confirmDialogClassnames } from './constants';
 import { CancelButton } from './styles';
 import { useLogic } from './useLogic';
@@ -13,5 +13,5 @@ export const ConfirmDialog = (props) => {
     const { open, title, description, actions, onClose, size = 'sm', ...restProps } = props;
     const { text: confirmText, ...confirmButtonProps } = actions.confirm;
     const { text: cancelText, variant, onClick, ...restCancelProps } = actions.cancel || {};
-    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, className: classNames(actions.cancel?.className, confirmDialogClassnames.cancelButton), children: cancelText })), _jsx(Button, { ...confirmButtonProps, className: classNames(confirmButtonProps.className, confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
+    return (_jsxs(Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && (_jsx(DialogContent, { children: typeof description === 'string' ? (_jsx(DialogContentText, { children: description })) : (description) })), _jsxs(DialogActions, { children: [isShowCancelButton && (_jsx(CancelButton, { ...restCancelProps, ...cancelButtonProps, className: cn(actions.cancel?.className, confirmDialogClassnames.cancelButton), children: cancelText })), _jsx(Button, { ...confirmButtonProps, className: cn(confirmButtonProps.className, confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
 };

package/components/CopyTypography/CopyTypography.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip } from '../Tooltip';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { copyTypographyClassnames } from './constants';
 import { StyledCopyIcon, TypographyWrapper, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const CopyTypography = (props) => {
     const { handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft, isIconOnRight, restProps, copyPosition, color, showCopyIcon, isOverflow, children, tooltipProps, } = useLogic(props);
-    const renderIcon = () => (_jsx(StyledCopyIcon, { size: "sm", "$copyPosition": copyPosition, color: color, className: classNames({
+    const renderIcon = () => (_jsx(StyledCopyIcon, { size: "sm", "$copyPosition": copyPosition, color: color, className: cn({
             [copyTypographyClassnames.showIconOnHover]: showCopyIcon === 'onHover',
         }) }));
-    return (_jsx(Tooltip, { title: tooltipTitle, disableInteractive: true, placement: "bottom", ...tooltipProps, children: _jsxs(Wrapper, { onMouseLeave: handleMouseLeave, onClick: handleClick, component: "div", color: color, ...restProps, children: [isIconOnLeft && renderIcon(), _jsx(TypographyWrapper, { className: classNames({
+    return (_jsx(Tooltip, { title: tooltipTitle, disableInteractive: true, placement: "bottom", ...tooltipProps, children: _jsxs(Wrapper, { onMouseLeave: handleMouseLeave, onClick: handleClick, component: "div", color: color, ...restProps, children: [isIconOnLeft && renderIcon(), _jsx(TypographyWrapper, { className: cn({
                         [copyTypographyClassnames.overflow]: isOverflow,
                     }), children: children }), isIconOnRight && renderIcon()] }) }));
 };

package/components/DashboardAlert/DashboardAlert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '../Typography';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { dashboardAlertClassnames } from './constants';
 import { StyledAlert, StyledButton } from './styles';
 /**
@@ -13,5 +13,5 @@ import { StyledAlert, StyledButton } from './styles';
 export const DashboardAlert = (props) => {
     const { linkButtonProps, children, isShow, className, ...restProps } = props;
     const { name, color: linkButtonColor, ...restButtonProps } = linkButtonProps || {};
-    return (_jsx(StyledAlert, { className: classNames(dashboardAlertClassnames.root, className), isShow: isShow, ...restProps, children: _jsxs(Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && (_jsx(StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
+    return (_jsx(StyledAlert, { className: cn(dashboardAlertClassnames.root, className), isShow: isShow, ...restProps, children: _jsxs(Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && (_jsx(StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
 };

package/components/DashboardLayout/DashboardSidebar/useLogic/useLogic.js

@@ -3,7 +3,7 @@ import { DashboardContext } from '../../../DashboardContext';
 import { DashboardSidebarContext } from '../../../DashboardSidebarProvider';
 import { useTheme } from '../../../theme/hooks/useTheme';
 import { useViewportType } from '../../../useViewportType';
-import { classNames } from '../../../utils/classNames';
+import { cn } from '../../../utils/cn';
 import { dashboardLayoutHeaderClassnames } from '../../Header';
 import { dashboardLayoutMainClassnames } from '../../Main';
 import { dashboardSidebarClassnames } from '../constants';
@@ -82,7 +82,7 @@ export const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
-    const classnames = classNames(className, dashboardSidebarClassnames.root);
+    const classnames = cn(className, dashboardSidebarClassnames.root);
     return {
         isPinned,
         isMobile,

package/components/DashboardLayout/Header/styles.js

@@ -95,6 +95,10 @@ export const HeaderContentSection = styled(HeaderSection) `
   }
 `;
 export const ProductSwitcherWrapper = styled.div `
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
@@ -131,6 +135,10 @@ export const HeaderContent = styled.div `
  * Обертка для элементов которые должны быть в мобильном хедере или помещены в sidebar.
  */
 export const PriorityFeatureWrapper = styled.div `
+  &&:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: flex;
     justify-content: flex-end;

package/components/DashboardLayout/Main/styles.js

@@ -21,8 +21,16 @@ export const AlertWrapper = styled.div `
   }
 `;
 export const AlertContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin: ${({ theme }) => theme.spacing(3, 4, 1)};
   }

package/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { dashboardSidebarClassnames } from '../DashboardLayout/DashboardSidebar/constants';
 import { Skeleton } from '../Skeleton';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { ItemWrapper, ListWrapper, SkeletonDescription, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const DashboardSidebarSkeleton = () => {
     const { isPinned } = useLogic();
-    return (_jsxs(Wrapper, { "$isPinned": isPinned, className: classNames(dashboardSidebarClassnames.root), children: [_jsx(Skeleton, { shapeSize: isPinned ? 'medium' : 'small', height: 40, variant: "rounded" }), _jsxs(ListWrapper, { "$isPinned": isPinned, children: [_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), isPinned && (_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }))] })] }));
+    return (_jsxs(Wrapper, { "$isPinned": isPinned, className: cn(dashboardSidebarClassnames.root), children: [_jsx(Skeleton, { shapeSize: isPinned ? 'medium' : 'small', height: 40, variant: "rounded" }), _jsxs(ListWrapper, { "$isPinned": isPinned, children: [_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), _jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }), isPinned && (_jsxs(ItemWrapper, { children: [_jsx(Skeleton, { height: 20, width: 20, variant: "rounded", shapeSize: "small" }), _jsx(SkeletonDescription, { height: 14, width: 174, variant: "rounded", "$isPinned": isPinned })] }))] })] }));
 };

package/components/DataGrid/Body/Body.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { cva } from '../../utils/cva';
 import { CustomRowWrapper } from '../CustomRowWrapper';
 import { Row } from '../Row';
@@ -23,5 +23,5 @@ export const Body = ({ rows, selectedRows = [], minDisplayRows, keyId, noDataPla
         const { children, options } = row;
         return (_jsx(RowContextProvider, { row: row, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? (_jsx(CustomRowWrapper, { index: index, renderRow: renderRow, row: row })) : (_jsx(Row, { row: row, options: options, keyId: keyId, level: INITIAL_LEVEL, nestedChildren: children, isSelected: isSelected, columns: columns, isSelectable: isSelectable, onSelectRow: onSelectRow, onRowEnter: onRowEnter, onRowLeave: onRowLeave, registerRowElement: registerRowElement, unregisterRowElement: unregisterRowElement, ...rowProps }, rowId)) }, rowId));
     });
-    return (_jsx(Wrapper, { className: classNames(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
+    return (_jsx(Wrapper, { className: cn(className, bodyCva({ disableMinHeight })), style: bodyCssVars, children: rows.length ? renderedRows : noDataPlaceholder }));
 };

package/components/DataGrid/Cell/Cell.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { useHidePersonalData } from '../../personalDataSecurity';
 import { useViewportType } from '../../useViewportType';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { CellInner } from './CellInner';
@@ -38,7 +38,7 @@ export const Cell = (props) => {
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData === true,
     });
-    const cellNode = (_jsx(Wrapper, { className: classNames(className, hidePersonalDataClassname, cellCva({
+    const cellNode = (_jsx(Wrapper, { className: cn(className, hidePersonalDataClassname, cellCva({
             isHideOnMobile: cell.isHideOnMobile || isHideOnMobile,
             isDisabled,
             withStartAdornment: hasStartAdornment,

package/components/DataGrid/DataGrid.js

@@ -3,7 +3,7 @@ import { useCallback, useContext } from 'react';
 import { ConfigContext } from '../ConfigProvider';
 import { ContentState } from '../ContentState';
 import { selfContainedClassname } from '../constants';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
 import { Body } from './Body';
@@ -98,7 +98,7 @@ export const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
+    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: cn(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,

package/components/DataGrid/HeadCell/HeadCell.js

@@ -4,7 +4,7 @@ import { SortDownFillSm } from '../../../icons/SortDownFillSm';
 import { SortFillSm } from '../../../icons/SortFillSm';
 import { SortUpFillSm } from '../../../icons/SortUpFillSm';
 import { OverflowTypography } from '../../OverflowTypography';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { cva } from '../../utils/cva';
 import { headCellClassnames } from './constants';
 import { Wrapper } from './styles';
@@ -43,5 +43,5 @@ export const HeadCell = (props) => {
                 return _jsx(SortFillSm, {});
         }
     }, [sorting, isSortable, field]);
-    return (_jsxs(Wrapper, { onClick: handleSortClick, className: classNames(className, headCellCva({ isSortable, align, hasStartAdornment })), style: headCellCssVars, children: [startAdornment && startAdornment, _jsx(OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
+    return (_jsxs(Wrapper, { onClick: handleSortClick, className: cn(className, headCellCva({ isSortable, align, hasStartAdornment })), style: headCellCssVars, children: [startAdornment && startAdornment, _jsx(OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
 };

package/components/DataGrid/PinnedSections/Section/useLogic/useLogic.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { classNames } from '../../../../utils/classNames';
+import { cn } from '../../../../utils/cn';
 import { dataGridClassnames } from '../../../constants';
 import { getFlattenColumns, getGridTemplateColumns } from '../../../utils';
 export const useLogic = ({ position, isNoData, columns, }) => {
-    const classnames = useMemo(() => classNames({
+    const classnames = useMemo(() => cn({
         [dataGridClassnames.leftPinnedSection]: position === 'left',
         [dataGridClassnames.rightPinnedSection]: position === 'right',
         [dataGridClassnames.pinnedSectionNoData]: isNoData && position === 'center',

package/components/DataGrid/Row/Row.js

@@ -3,7 +3,7 @@ import { Fragment, memo, useCallback } from 'react';
 import { BottomDrawer } from '../../BottomDrawer';
 import { Checkbox } from '../../Checkbox';
 import { Tooltip } from '../../Tooltip';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { dataGridCellClassnames } from '../Cell';
@@ -86,7 +86,7 @@ const RowInner = (props) => {
                             }), children: label }), children.map((child, childIndex) => {
                             const childCellId = `${cellId}-${childIndex}`;
                             const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
-                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: classNames(dataGridCellClassnames.grouped), rootRowElement: rootRowElement, href: href, target: target }, childCellId));
+                            return (_jsx(CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: cn(dataGridCellClassnames.grouped), rootRowElement: rootRowElement, href: href, target: target }, childCellId));
                         })] }, cellId));
             }
             return (_jsx(CellStyled, { className: singleCellCva({ isFirstCell }), row: row, cell: cell, emptyCellValue: emptyCellValue, startAdornment: isFirstCell && renderStartAdornment(), isDisabled: isDisabledCell, isHidePersonalData: cell.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), rootRowElement: rootRowElement, href: href, target: target }, cellId));
@@ -121,7 +121,7 @@ const RowInner = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return (_jsxs(Wrapper, { className: classNames(className, rootCva({
+    return (_jsxs(Wrapper, { className: cn(className, rootCva({
             isShowConnector,
             mobileDisplayVariant,
             hasNestedChildren: Boolean(nestedChildren?.length),

package/components/DataGrid/RowBase/RowBase.js

@@ -3,7 +3,7 @@ import { memo, useCallback } from 'react';
 import { BottomDrawer } from '../../BottomDrawer';
 import { Checkbox } from '../../Checkbox';
 import { Tooltip } from '../../Tooltip';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { Cell } from '../Cell';
@@ -65,5 +65,5 @@ export const RowBase = memo((props) => {
         renderStartAdornment,
         checkboxProps.checked,
     ]);
-    return (_jsxs(Wrapper, { className: classNames(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [_jsx(Tooltip, { ...tooltipProps, children: _jsx(ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
+    return (_jsxs(Wrapper, { className: cn(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [_jsx(Tooltip, { ...tooltipProps, children: _jsx(ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, _jsx(BottomDrawer, { ...drawerProps, children: _jsx(BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
 });

package/components/DataGridInfinite/DataGridInfinite.js

@@ -10,7 +10,7 @@ import { DataGridContextProvider } from '../DataGrid/DataGridContext';
 import { Variant } from '../DataGrid/enums';
 import { Head } from '../DataGrid/Head';
 import { Loader } from '../Loader';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
 import { dataGridInfiniteClassnames, OVERSCAN_COUNT } from './constants';
@@ -48,7 +48,7 @@ export const DataGridInfinite = (props) => {
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const { isSelectable } = rowProps;
     const TableContainer = isDisabled ? DisabledDataGridWrapper : DataGridWrapper;
-    return (_jsx(DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: _jsx(DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(StyledContainer, { style: containerCssVars, className: classNames(dataGridInfiniteCva({
+    return (_jsx(DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: _jsx(DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: _jsxs(StyledContainer, { style: containerCssVars, className: cn(dataGridInfiniteCva({
                     hasGroupedColumns,
                     gridViewMode,
                     mobileDisplayVariant,

package/components/DataGridPaginationContainer/DataGridPaginationContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { MenuItem } from '../MenuItem';
 import { Select } from '../Select';
 import { Typography } from '../Typography';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { DEFAULT_ROWS_PER_PAGE, DEFAULT_ROWS_PER_PAGE_OPTION, paginationClassnames, } from './constants';
 import { PaginationWrapper, Range, RangeWrapper } from './styles';
@@ -16,7 +16,7 @@ const rootCva = cva(paginationClassnames.root, {
 });
 export const DataGridPaginationContainer = ({ pagination, className, formattedRange, rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTION, onSetCountPerPage, rowsPerPage = DEFAULT_ROWS_PER_PAGE, isDisabled, }) => {
     const { handleChangeRowsPerPage } = useLogic({ onSetCountPerPage });
-    return (_jsxs(PaginationWrapper, { className: classNames(className, rootCva({
+    return (_jsxs(PaginationWrapper, { className: cn(className, rootCva({
             leadingContent: Boolean(onSetCountPerPage || formattedRange),
         })), children: [(onSetCountPerPage || formattedRange) && (_jsxs(RangeWrapper, { children: [onSetCountPerPage && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: "\u0421\u0442\u0440\u043E\u043A \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435:" }), _jsx(Select, { size: "small", value: rowsPerPage, disabled: isDisabled, isShowClearButton: false, onChange: handleChangeRowsPerPage, children: rowsPerPageOptions.map((option) => (_jsx(MenuItem, { value: option, children: option }, option))) })] })), formattedRange && _jsx(Range, { variant: "body1", children: formattedRange() })] })), pagination && pagination] }));
 };

package/components/DescriptionCell/useLogic/useLogic.js

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { descriptionCellClassnames } from '../constants';
 export const useLogic = ({ icon, iconPosition = 'left' }) => {
-    const classnames = useMemo(() => classNames(descriptionCellClassnames.root, {
+    const classnames = useMemo(() => cn(descriptionCellClassnames.root, {
         [descriptionCellClassnames.hasIcon]: Boolean(icon),
         [descriptionCellClassnames.iconRight]: Boolean(icon) && iconPosition === 'right',
     }), [icon, iconPosition]);

package/components/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { DialogTitle } from '../DialogTitle';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { dialogClassnames } from './constants';
 import { StyledDialog } from './styles';
@@ -22,5 +22,5 @@ export const Dialog = ({ children, title, disableBackdropClick, onClose, size =
     if (isMobile) {
         return (_jsx(BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
     }
-    return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, className: classNames(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && (_jsx(DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
+    return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, className: cn(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && (_jsx(DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };

package/components/Dialog/useLogic/useLogic.js

@@ -1,5 +1,5 @@
 import { useViewportType } from '../../useViewportType';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { dialogClassnames } from '../constants';
 export const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
     const { isMobile } = useViewportType();
@@ -12,7 +12,7 @@ export const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
         });
     const { paper, ...restClasses } = classes || {};
     const dialogClasses = {
-        paper: classNames(dialogClassnames.paper, paper),
+        paper: cn(dialogClassnames.paper, paper),
         ...restClasses,
     };
     return { handleClose, isMobile, dialogClasses };

package/components/DialogActions/DialogActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { dialogActionsClassnames } from './constants';
 import { StyledDialogActions, StyledGrid } from './styles';
 export const DialogActions = ({ children, className, disableSpacing, ...props }) => {
-    return (_jsx(StyledDialogActions, { className: classNames(className, dialogActionsClassnames.root), ...props, children: _jsx(StyledGrid, { spacing: disableSpacing ? 0 : 3, children: children }) }));
+    return (_jsx(StyledDialogActions, { className: cn(className, dialogActionsClassnames.root), ...props, children: _jsx(StyledGrid, { spacing: disableSpacing ? 0 : 3, children: children }) }));
 };

package/components/DialogContent/DialogContent.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { dialogContentClassnames } from './constants';
 import { StyledDialogContent } from './styles';
-export const DialogContent = ({ className, ...restProps }) => (_jsx(StyledDialogContent, { className: classNames(className, dialogContentClassnames.root), ...restProps }));
+export const DialogContent = ({ className, ...restProps }) => (_jsx(StyledDialogContent, { className: cn(className, dialogContentClassnames.root), ...restProps }));

package/components/DonutChart/DonutChart.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { donutChartClassnames } from './constants';
 import { Content, ProgressArc, Svg, TrackArc, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
     const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = useLogic({ value, maxValue, color, colorIntensity });
-    return (_jsxs(Wrapper, { ref: rootRef, className: classNames(donutChartClassnames.root, className), role: "meter", "aria-label": meterAriaValue.label, "aria-valuemin": meterAriaValue.min, "aria-valuemax": meterAriaValue.max, "aria-valuenow": meterAriaValue.now, style: { ...donutParams?.cssVars, ...style }, children: [donutParams && (_jsxs(Svg, { className: donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [_jsx(TrackArc, { className: donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), _jsx(ProgressArc, { className: donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && (_jsx(Content, { className: donutChartClassnames.content, children: children }))] }));
+    return (_jsxs(Wrapper, { ref: rootRef, className: cn(donutChartClassnames.root, className), role: "meter", "aria-label": meterAriaValue.label, "aria-valuemin": meterAriaValue.min, "aria-valuemax": meterAriaValue.max, "aria-valuenow": meterAriaValue.now, style: { ...donutParams?.cssVars, ...style }, children: [donutParams && (_jsxs(Svg, { className: donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [_jsx(TrackArc, { className: donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), _jsx(ProgressArc, { className: donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && (_jsx(Content, { className: donutChartClassnames.content, children: children }))] }));
 };

package/components/EmailField/EmailField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useHidePersonalData } from '../personalDataSecurity';
 import { TextField } from '../TextField';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 export const EmailField = forwardRef(({ isHidePersonalData, inputProps, ...props }, ref) => {
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData,
@@ -10,6 +10,6 @@ export const EmailField = forwardRef(({ isHidePersonalData, inputProps, ...props
     });
     return (_jsx(TextField, { ref: ref, type: "email", inputProps: {
             ...inputProps,
-            className: classNames(inputProps?.className, hidePersonalDataClassname),
+            className: cn(inputProps?.className, hidePersonalDataClassname),
         }, ...props }));
 });

package/components/EmailOrPhoneField/EmailOrPhoneField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useHidePersonalData } from '../personalDataSecurity';
 import { TextField } from '../TextField';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { useLogic } from './useLogic';
 /**
  * Поле для ввода email или мобильного номера телефона
@@ -19,6 +19,6 @@ export const EmailOrPhoneField = forwardRef((props, ref) => {
     });
     return (_jsx(TextField, { ref: ref, type: "text", onBlur: onBlur, value: inputValue, onChange: onChange, inputProps: {
             ...inputProps,
-            className: classNames(inputProps?.className, hidePersonalDataClassname),
+            className: cn(inputProps?.className, hidePersonalDataClassname),
         }, ...restProps }));
 });