@astral/ui 4.92.0 → 4.92.1

package/node/components/DataGrid/DataGrid.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const ConfigProvider_1 = require("../ConfigProvider");
 const ContentState_1 = require("../ContentState");
 const constants_1 = require("../constants");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
 const Body_1 = require("./Body");
@@ -101,7 +101,7 @@ const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, keyId: keyId, columns: columns, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, cn_1.cn)(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,

package/node/components/DataGrid/HeadCell/HeadCell.js

@@ -7,7 +7,7 @@ const SortDownFillSm_1 = require("../../../icons/SortDownFillSm");
 const SortFillSm_1 = require("../../../icons/SortFillSm");
 const SortUpFillSm_1 = require("../../../icons/SortUpFillSm");
 const OverflowTypography_1 = require("../../OverflowTypography");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const cva_1 = require("../../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -46,6 +46,6 @@ const HeadCell = (props) => {
                 return (0, jsx_runtime_1.jsx)(SortFillSm_1.SortFillSm, {});
         }
     }, [sorting, isSortable, field]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleSortClick, className: (0, classNames_1.classNames)(className, headCellCva({ isSortable, align, hasStartAdornment })), style: headCellCssVars, children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onClick: handleSortClick, className: (0, cn_1.cn)(className, headCellCva({ isSortable, align, hasStartAdornment })), style: headCellCssVars, children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, variant: "pointer", component: "p", children: label }), sortIcon] }));
 };
 exports.HeadCell = HeadCell;

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

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const classNames_1 = require("../../../../utils/classNames");
+const cn_1 = require("../../../../utils/cn");
 const constants_1 = require("../../../constants");
 const utils_1 = require("../../../utils");
 const useLogic = ({ position, isNoData, columns, }) => {
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)({
         [constants_1.dataGridClassnames.leftPinnedSection]: position === 'left',
         [constants_1.dataGridClassnames.rightPinnedSection]: position === 'right',
         [constants_1.dataGridClassnames.pinnedSectionNoData]: isNoData && position === 'center',

package/node/components/DataGrid/Row/Row.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const BottomDrawer_1 = require("../../BottomDrawer");
 const Checkbox_1 = require("../../Checkbox");
 const Tooltip_1 = require("../../Tooltip");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
 const Cell_1 = require("../Cell");
@@ -89,7 +89,7 @@ const RowInner = (props) => {
                             }), children: label }), children.map((child, childIndex) => {
                             const childCellId = `${cellId}-${childIndex}`;
                             const shouldRenderStartAdornment = isFirstCell && childIndex === 0;
-                            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: (0, classNames_1.classNames)(Cell_1.dataGridCellClassnames.grouped), rootRowElement: rootRowElement, href: href, target: target }, childCellId));
+                            return ((0, jsx_runtime_1.jsx)(styles_1.CellStyled, { row: row, cell: child, isHideOnMobile: isHideOnMobile, emptyCellValue: emptyCellValue, isDisabled: isDisabledCell, startAdornment: shouldRenderStartAdornment && renderStartAdornment(), isHidePersonalData: child.isHidePersonalData, hasNestedChildren: Boolean(nestedChildren?.length), className: (0, cn_1.cn)(Cell_1.dataGridCellClassnames.grouped), rootRowElement: rootRowElement, href: href, target: target }, childCellId));
                         })] }, cellId));
             }
             return ((0, jsx_runtime_1.jsx)(styles_1.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));
@@ -124,7 +124,7 @@ const RowInner = (props) => {
         onRowEnter,
         onRowLeave,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, rootCva({
             isShowConnector,
             mobileDisplayVariant,
             hasNestedChildren: Boolean(nestedChildren?.length),

package/node/components/DataGrid/RowBase/RowBase.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const BottomDrawer_1 = require("../../BottomDrawer");
 const Checkbox_1 = require("../../Checkbox");
 const Tooltip_1 = require("../../Tooltip");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
 const Cell_1 = require("../Cell");
@@ -68,5 +68,5 @@ exports.RowBase = (0, react_1.memo)((props) => {
         renderStartAdornment,
         checkboxProps.checked,
     ]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [constants_1.DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, rootCva({ mobileDisplayVariant })), style: rowBaseVars, ...dataGridInfiniteItemProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { ref: rowRef, onPointerEnter: () => onRowEnter?.(rowId), onPointerLeave: (event) => onRowLeave?.(rowId, event.nativeEvent), className: contentWrapperCva({ isHovered, isActive }), [constants_1.DISABLE_ROW_ATTR]: isDisabled, onClick: handleRowClick, children: renderCells() }) }), customContent, (0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { ...drawerProps, children: (0, jsx_runtime_1.jsx)(styles_1.BottomDrawerContent, { children: drawerContent }) })] }, `row-base-${rowId}`));
 });

package/node/components/DataGridInfinite/DataGridInfinite.js

@@ -13,7 +13,7 @@ const DataGridContext_1 = require("../DataGrid/DataGridContext");
 const enums_1 = require("../DataGrid/enums");
 const Head_1 = require("../DataGrid/Head");
 const Loader_1 = require("../Loader");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
 const constants_3 = require("./constants");
@@ -51,7 +51,7 @@ const DataGridInfinite = (props) => {
     const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const { isSelectable } = rowProps;
     const TableContainer = isDisabled ? styles_1.DisabledDataGridWrapper : styles_1.DataGridWrapper;
-    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledContainer, { style: containerCssVars, className: (0, classNames_1.classNames)(dataGridInfiniteCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridInfiniteContext_1.DataGridInfiniteContextProvider, { renderRow: renderRow, onSelectRow: handleSelectRow, variant: variant, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, initialVisibleChildrenCount: initialVisibleChildrenCount, isSelectable: isSelectable, selectedRows: selectedRows, moreButtonColumnPosition: moreButtonColumnPosition, isVisibleCollapseButton: isVisibleCollapseButton, children: (0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { gridColumns: gridColumns, emptyCellValue: emptyCellValue, activeRowId: activeRowId, columns: columns, keyId: keyId, isTabularNums: isTabularNums, onRowClick: onRowClick, mobileDisplayVariant: mobileDisplayVariant, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledContainer, { style: containerCssVars, className: (0, cn_1.cn)(dataGridInfiniteCva({
                     hasGroupedColumns,
                     gridViewMode,
                     mobileDisplayVariant,

package/node/components/DataGridPaginationContainer/DataGridPaginationContainer.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const MenuItem_1 = require("../MenuItem");
 const Select_1 = require("../Select");
 const Typography_1 = require("../Typography");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -19,7 +19,7 @@ const rootCva = (0, cva_1.cva)(constants_1.paginationClassnames.root, {
 });
 const DataGridPaginationContainer = ({ pagination, className, formattedRange, rowsPerPageOptions = constants_1.DEFAULT_ROWS_PER_PAGE_OPTION, onSetCountPerPage, rowsPerPage = constants_1.DEFAULT_ROWS_PER_PAGE, isDisabled, }) => {
     const { handleChangeRowsPerPage } = (0, useLogic_1.useLogic)({ onSetCountPerPage });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.PaginationWrapper, { className: (0, classNames_1.classNames)(className, rootCva({
+    return ((0, jsx_runtime_1.jsxs)(styles_1.PaginationWrapper, { className: (0, cn_1.cn)(className, rootCva({
             leadingContent: Boolean(onSetCountPerPage || formattedRange),
         })), children: [(onSetCountPerPage || formattedRange) && ((0, jsx_runtime_1.jsxs)(styles_1.RangeWrapper, { children: [onSetCountPerPage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", children: "\u0421\u0442\u0440\u043E\u043A \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435:" }), (0, jsx_runtime_1.jsx)(Select_1.Select, { size: "small", value: rowsPerPage, disabled: isDisabled, isShowClearButton: false, onChange: handleChangeRowsPerPage, children: rowsPerPageOptions.map((option) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { value: option, children: option }, option))) })] })), formattedRange && (0, jsx_runtime_1.jsx)(styles_1.Range, { variant: "body1", children: formattedRange() })] })), pagination && pagination] }));
 };

package/node/components/DescriptionCell/useLogic/useLogic.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
 const useLogic = ({ icon, iconPosition = 'left' }) => {
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.descriptionCellClassnames.root, {
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)(constants_1.descriptionCellClassnames.root, {
         [constants_1.descriptionCellClassnames.hasIcon]: Boolean(icon),
         [constants_1.descriptionCellClassnames.iconRight]: Boolean(icon) && iconPosition === 'right',
     }), [icon, iconPosition]);

package/node/components/Dialog/Dialog.js

@@ -4,7 +4,7 @@ exports.Dialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const BottomDrawer_1 = require("../BottomDrawer");
 const DialogTitle_1 = require("../DialogTitle");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -25,6 +25,6 @@ const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', h
     if (isMobile) {
         return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
     }
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDialog, { "$size": size, onClose: handleClose, className: (0, classNames_1.classNames)(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && ((0, jsx_runtime_1.jsx)(DialogTitle_1.DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDialog, { "$size": size, onClose: handleClose, className: (0, cn_1.cn)(dialogCva({ withoutTitle: !title }), className), classes: dialogClasses, ...props, children: [title && ((0, jsx_runtime_1.jsx)(DialogTitle_1.DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };
 exports.Dialog = Dialog;

package/node/components/Dialog/useLogic/useLogic.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const useViewportType_1 = require("../../useViewportType");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
 const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
@@ -15,7 +15,7 @@ const useLogic = ({ onClose, disableBackdropClick, classes, }) => {
         });
     const { paper, ...restClasses } = classes || {};
     const dialogClasses = {
-        paper: (0, classNames_1.classNames)(constants_1.dialogClassnames.paper, paper),
+        paper: (0, cn_1.cn)(constants_1.dialogClassnames.paper, paper),
         ...restClasses,
     };
     return { handleClose, isMobile, dialogClasses };

package/node/components/DialogActions/DialogActions.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const DialogActions = ({ children, className, disableSpacing, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDialogActions, { className: (0, classNames_1.classNames)(className, constants_1.dialogActionsClassnames.root), ...props, children: (0, jsx_runtime_1.jsx)(styles_1.StyledGrid, { spacing: disableSpacing ? 0 : 3, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDialogActions, { className: (0, cn_1.cn)(className, constants_1.dialogActionsClassnames.root), ...props, children: (0, jsx_runtime_1.jsx)(styles_1.StyledGrid, { spacing: disableSpacing ? 0 : 3, children: children }) }));
 };
 exports.DialogActions = DialogActions;

package/node/components/DialogContent/DialogContent.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const DialogContent = ({ className, ...restProps }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledDialogContent, { className: (0, classNames_1.classNames)(className, constants_1.dialogContentClassnames.root), ...restProps }));
+const DialogContent = ({ className, ...restProps }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledDialogContent, { className: (0, cn_1.cn)(className, constants_1.dialogContentClassnames.root), ...restProps }));
 exports.DialogContent = DialogContent;

package/node/components/DonutChart/DonutChart.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DonutChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const DonutChart = ({ value, maxValue, children, color = 'primary', colorIntensity = '700', className, style, }) => {
     const { rootRef, svgViewBox, arcCx, arcCy, donutParams, meterAriaValue } = (0, useLogic_1.useLogic)({ value, maxValue, color, colorIntensity });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: rootRef, className: (0, classNames_1.classNames)(constants_1.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 && ((0, jsx_runtime_1.jsxs)(styles_1.Svg, { className: constants_1.donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(styles_1.TrackArc, { className: constants_1.donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), (0, jsx_runtime_1.jsx)(styles_1.ProgressArc, { className: constants_1.donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && ((0, jsx_runtime_1.jsx)(styles_1.Content, { className: constants_1.donutChartClassnames.content, children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: rootRef, className: (0, cn_1.cn)(constants_1.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 && ((0, jsx_runtime_1.jsxs)(styles_1.Svg, { className: constants_1.donutChartClassnames.svg, viewBox: svgViewBox, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(styles_1.TrackArc, { className: constants_1.donutChartClassnames.track, cx: arcCx, cy: arcCy, r: donutParams.arcR }), (0, jsx_runtime_1.jsx)(styles_1.ProgressArc, { className: constants_1.donutChartClassnames.progress, d: donutParams.arcPath, pathLength: 1, strokeDasharray: 1, strokeDashoffset: donutParams.progressOffset })] })), children && ((0, jsx_runtime_1.jsx)(styles_1.Content, { className: constants_1.donutChartClassnames.content, children: children }))] }));
 };
 exports.DonutChart = DonutChart;

package/node/components/EmailField/EmailField.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const personalDataSecurity_1 = require("../personalDataSecurity");
 const TextField_1 = require("../TextField");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 exports.EmailField = (0, react_1.forwardRef)(({ isHidePersonalData, inputProps, ...props }, ref) => {
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData,
@@ -13,6 +13,6 @@ exports.EmailField = (0, react_1.forwardRef)(({ isHidePersonalData, inputProps,
     });
     return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ref: ref, type: "email", inputProps: {
             ...inputProps,
-            className: (0, classNames_1.classNames)(inputProps?.className, hidePersonalDataClassname),
+            className: (0, cn_1.cn)(inputProps?.className, hidePersonalDataClassname),
         }, ...props }));
 });

package/node/components/EmailOrPhoneField/EmailOrPhoneField.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const personalDataSecurity_1 = require("../personalDataSecurity");
 const TextField_1 = require("../TextField");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const useLogic_1 = require("./useLogic");
 /**
  * Поле для ввода email или мобильного номера телефона
@@ -22,6 +22,6 @@ exports.EmailOrPhoneField = (0, react_1.forwardRef)((props, ref) => {
     });
     return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { ref: ref, type: "text", onBlur: onBlur, value: inputValue, onChange: onChange, inputProps: {
             ...inputProps,
-            className: (0, classNames_1.classNames)(inputProps?.className, hidePersonalDataClassname),
+            className: (0, cn_1.cn)(inputProps?.className, hidePersonalDataClassname),
         }, ...restProps }));
 });

package/node/components/Filename/Filename.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const personalDataSecurity_1 = require("../personalDataSecurity");
 const Tooltip_1 = require("../Tooltip");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.Filename = (0, react_1.forwardRef)((props, forwardedRef) => {
@@ -17,5 +17,5 @@ exports.Filename = (0, react_1.forwardRef)((props, forwardedRef) => {
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData,
     });
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: (0, classNames_1.classNames)(tooltipProps?.className, hidePersonalDataClassname), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledTypography, { "$align": align, variant: variant, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname), ...restProps, children: [(0, jsx_runtime_1.jsx)(styles_1.FileBaseName, { ...baseNameProps }), (0, jsx_runtime_1.jsx)(styles_1.FileSuffix, { children: suffixWithExtension })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: (0, cn_1.cn)(tooltipProps?.className, hidePersonalDataClassname), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledTypography, { "$align": align, variant: variant, className: (0, cn_1.cn)(className, hidePersonalDataClassname), ...restProps, children: [(0, jsx_runtime_1.jsx)(styles_1.FileBaseName, { ...baseNameProps }), (0, jsx_runtime_1.jsx)(styles_1.FileSuffix, { children: suffixWithExtension })] }) }));
 });

package/node/components/GuidTypography/GuidTypography.js

@@ -4,19 +4,19 @@ exports.GuidTypography = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CopyTypography_1 = require("../CopyTypography");
 const OverflowTypography_1 = require("../OverflowTypography");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const useLogic_1 = require("./useLogic");
 const GuidTypography = (props) => {
     const { className, tooltipProps, canCopy, copyParams, restProps, resolvedCopyText, hidePersonalDataClassname, } = (0, useLogic_1.useLogic)(props);
     if (canCopy) {
         return ((0, jsx_runtime_1.jsx)(CopyTypography_1.CopyTypography, { isShowCopyText: true, copyText: resolvedCopyText, tooltipProps: {
                 ...tooltipProps,
-                className: (0, classNames_1.classNames)(tooltipProps?.className, hidePersonalDataClassname),
-            }, ...copyParams, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { visibleLastSymbolsCount: 4, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname), tooltipProps: { title: undefined }, ...restProps }) }));
+                className: (0, cn_1.cn)(tooltipProps?.className, hidePersonalDataClassname),
+            }, ...copyParams, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { visibleLastSymbolsCount: 4, className: (0, cn_1.cn)(className, hidePersonalDataClassname), tooltipProps: { title: undefined }, ...restProps }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { visibleLastSymbolsCount: 4, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname), tooltipProps: {
+    return ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { visibleLastSymbolsCount: 4, className: (0, cn_1.cn)(className, hidePersonalDataClassname), tooltipProps: {
             ...tooltipProps,
-            className: (0, classNames_1.classNames)(tooltipProps?.className, hidePersonalDataClassname),
+            className: (0, cn_1.cn)(tooltipProps?.className, hidePersonalDataClassname),
         }, ...restProps }));
 };
 exports.GuidTypography = GuidTypography;

package/node/components/HintPopover/HintPopover.js

@@ -4,7 +4,7 @@ exports.HintPopover = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
 const useViewportType_1 = require("../useViewportType");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -22,6 +22,6 @@ const hintPopoverCva = (0, cva_1.cva)(constants_1.hintPopoverClassnames.root, {
  */
 const HintPopover = ({ variant = 'dark', title, action, onClose, contentRef, children, className, ...restProps }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledHintPopover, { ...restProps, className: (0, classNames_1.classNames)(className, hintPopoverCva({ variant })), hasArrow: true, disableMobileDrawer: true, onClose: onClose, children: (0, jsx_runtime_1.jsxs)(styles_1.Body, { ref: contentRef, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(styles_1.CloseButton, { variant: "text", onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }), title && ((0, jsx_runtime_1.jsx)(styles_1.Title, { component: "div", variant: isMobile ? 'h5' : 'h4', children: title })), children, action && (0, jsx_runtime_1.jsx)(styles_1.ActionRow, { children: action })] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledHintPopover, { ...restProps, className: (0, cn_1.cn)(className, hintPopoverCva({ variant })), hasArrow: true, disableMobileDrawer: true, onClose: onClose, children: (0, jsx_runtime_1.jsxs)(styles_1.Body, { ref: contentRef, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(styles_1.CloseButton, { variant: "text", onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }), title && ((0, jsx_runtime_1.jsx)(styles_1.Title, { component: "div", variant: isMobile ? 'h5' : 'h4', children: title })), children, action && (0, jsx_runtime_1.jsx)(styles_1.ActionRow, { children: action })] }) }));
 };
 exports.HintPopover = HintPopover;

package/node/components/IconButton/IconButton.js

@@ -4,11 +4,11 @@ exports.IconButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../Button");
 const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const UnwrappedIconButton = (props, ref) => {
     const { variant = Button_1.ButtonVariants.Contained, children, className, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: variant, className: (0, classNames_1.classNames)(constants_1.iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: variant, className: (0, cn_1.cn)(constants_1.iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
 };
 exports.IconButton = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedIconButton);

package/node/components/Loader/Loader.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const Loader = ({ size = 'medium', color = 'primary', className, style, }) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.loaderClassnames.root), "$size": size, "$color": color, "data-color": color, role: "progressbar", style: style, children: (0, jsx_runtime_1.jsx)(styles_1.StyledSvgIcon, { viewBox: "22 22 44 44", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("circle", { cx: "44", cy: "44", r: "20.2", fill: "none", stroke: "currentColor", strokeWidth: "3.6", strokeDasharray: "80, 200", strokeDashoffset: "0" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, constants_1.loaderClassnames.root), "$size": size, "$color": color, "data-color": color, role: "progressbar", style: style, children: (0, jsx_runtime_1.jsx)(styles_1.StyledSvgIcon, { viewBox: "22 22 44 44", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("circle", { cx: "44", cy: "44", r: "20.2", fill: "none", stroke: "currentColor", strokeWidth: "3.6", strokeDasharray: "80, 200", strokeDashoffset: "0" }) }) }));
 };
 exports.Loader = Loader;

package/node/components/MenuItem/MenuItem.js

@@ -8,10 +8,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
 const Tooltip_1 = require("../Tooltip");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const InnerMenuItem = (props, ref) => {
     const { disabledReason, disabled, component = 'div', title, tooltipPlacement = 'left', note, className, ...rest } = props;
-    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabled ? disabledReason : note, placement: tooltipPlacement, withoutContainer: !disabled, children: (0, jsx_runtime_1.jsx)(MenuItem_1.default, { className: (0, classNames_1.classNames)(constants_1.menuItemClassnames.root, className), ...rest, disabled: disabled, title: title, ref: ref, component: component }) }, title) }));
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabled ? disabledReason : note, placement: tooltipPlacement, withoutContainer: !disabled, children: (0, jsx_runtime_1.jsx)(MenuItem_1.default, { className: (0, cn_1.cn)(constants_1.menuItemClassnames.root, className), ...rest, disabled: disabled, title: title, ref: ref, component: component }) }, title) }));
 };
 exports.MenuItem = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(InnerMenuItem);

package/node/components/MinimalisticPagination/MinimalisticPagination.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const NextOutlineMd_1 = require("../../icons/NextOutlineMd");
 const PreviousOutlineMd_1 = require("../../icons/PreviousOutlineMd");
 const IconButton_1 = require("../IconButton");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -20,6 +20,6 @@ const rootCva = (0, cva_1.cva)(constants_1.minimalisticPaginationClassnames.root
 const MinimalisticPagination = (props) => {
     const { previousButtonProps, nextButtonProps } = (0, useLogic_1.useLogic)(props);
     const { page, className, isDisabled } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.PaginationWrapper, { className: (0, classNames_1.classNames)(className, rootCva({ isDisabled })), "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...previousButtonProps, children: (0, jsx_runtime_1.jsx)(PreviousOutlineMd_1.PreviousOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(styles_1.PageItem, { component: "span", children: page }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...nextButtonProps, children: (0, jsx_runtime_1.jsx)(NextOutlineMd_1.NextOutlineMd, {}) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.PaginationWrapper, { className: (0, cn_1.cn)(className, rootCva({ isDisabled })), "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...previousButtonProps, children: (0, jsx_runtime_1.jsx)(PreviousOutlineMd_1.PreviousOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(styles_1.PageItem, { component: "span", children: page }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...nextButtonProps, children: (0, jsx_runtime_1.jsx)(NextOutlineMd_1.NextOutlineMd, {}) })] }));
 };
 exports.MinimalisticPagination = MinimalisticPagination;

package/node/components/NewPopover/NewPopover.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewPopover = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const BottomDrawer_1 = require("../BottomDrawer");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -32,6 +32,6 @@ const NewPopover = ({ children, onClose, isOpen, title, className, style, placem
                 disableAutoFocus,
             }, children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopper, { className: (0, classNames_1.classNames)(constants_1.popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: (0, jsx_runtime_1.jsxs)(styles_1.AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), style: animatedWrapperStyle, onAnimationEnd: handleAnimationEnd, children: [hasArrow && ((0, jsx_runtime_1.jsx)(styles_1.PopoverArrow, { ref: setArrowElement, className: constants_1.popoverClassnames.arrow })), (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { ref: setContainerRef, tabIndex: -1, className: constants_1.popoverClassnames.innerContainer, children: children })] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopper, { className: (0, cn_1.cn)(constants_1.popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: (0, jsx_runtime_1.jsxs)(styles_1.AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), style: animatedWrapperStyle, onAnimationEnd: handleAnimationEnd, children: [hasArrow && ((0, jsx_runtime_1.jsx)(styles_1.PopoverArrow, { ref: setArrowElement, className: constants_1.popoverClassnames.arrow })), (0, jsx_runtime_1.jsx)(styles_1.InnerContainer, { ref: setContainerRef, tabIndex: -1, className: constants_1.popoverClassnames.innerContainer, children: children })] }) }));
 };
 exports.NewPopover = NewPopover;

package/node/components/NewStepper/NewStepper.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewStepper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const StepperContext_1 = require("./StepperContext");
@@ -25,7 +25,7 @@ const stepper = (0, cva_1.cva)(constants_1.stepperClassnames.root, {
 });
 const NewStepper = (props) => {
     const { containerRef, stepperConnector, stepperAlternativeLabel, activeStep, onClickPrevStep, onClickStep, orientation, className, children, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(StepperContext_1.StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: containerRef, role: "group", className: (0, classNames_1.classNames)(stepper({
+    return ((0, jsx_runtime_1.jsx)(StepperContext_1.StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: containerRef, role: "group", className: (0, cn_1.cn)(stepper({
                 alternativeLabel: stepperAlternativeLabel,
                 connector: stepperConnector,
                 orientation,

package/node/components/NewStepper/Step/Step.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Step = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const cva_1 = require("../../utils/cva");
 const StepIcon_1 = require("../StepIcon");
 const constants_1 = require("./constants");
@@ -58,7 +58,7 @@ const connector = (0, cva_1.cva)(constants_1.stepClassnames.connector, {
 const Step = (props) => {
     const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = (0, useLogic_1.useLogic)(props);
     const StepContent = isRenderButton ? styles_1.StyledButton : styles_1.StepContentWrapper;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "data-active-step": isActiveStep, className: (0, classNames_1.classNames)(step({
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "data-active-step": isActiveStep, className: (0, cn_1.cn)(step({
             isError,
             isCompleted: isCompletedStep,
             connector: connectorVariant,
@@ -66,7 +66,7 @@ const Step = (props) => {
             alternativeLabel,
             orientation,
             isDisabled,
-        }), className), children: [(0, jsx_runtime_1.jsxs)(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: (0, classNames_1.classNames)(constants_1.stepClassnames.content, {
+        }), className), children: [(0, jsx_runtime_1.jsxs)(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: (0, cn_1.cn)(constants_1.stepClassnames.content, {
                     [constants_1.stepClassnames.active]: isActiveStep,
                 }), children: [(0, jsx_runtime_1.jsxs)(styles_1.LabelWrapper, { className: constants_1.stepClassnames.labelContainer, children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.stepClassnames.iconContainer, children: (0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && ((0, jsx_runtime_1.jsx)(styles_1.ArrowConnector, { className: connector({
                                     connector: connectorVariant,

package/node/components/Notification/NotificationStackContainer/NotificationStackContainer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationStackContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const inject_style_1 = require("react-toastify-next/dist/inject-style");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
@@ -14,9 +14,9 @@ const NotificationStackContainer = ({ containerId = constants_1.NOTIFY_CONTAINER
     const { isVisibleCloseButton, isStackExpanded, isStartedClosingNotify, closeAll, } = (0, useLogic_1.useLogic)({
         containerId,
     });
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)({
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)({
             [constants_1.notifyClassnames.container]: isStackExpanded,
-        }), children: [(0, jsx_runtime_1.jsx)("div", { className: constants_1.notifyClassnames.stackHost, children: (0, jsx_runtime_1.jsx)(styles_1.Inner, { ...props, className: (0, classNames_1.classNames)(constants_1.notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${constants_1.notifyClassnames.body}`, toastClassName: constants_1.notifyClassnames.root, progressClassName: `${constants_1.notifyClassnames.progress}` }) }), isVisibleCloseButton && ((0, jsx_runtime_1.jsx)(styles_1.CloseButton, { variant: "light", color: "grey", className: (0, classNames_1.classNames)({
+        }), children: [(0, jsx_runtime_1.jsx)("div", { className: constants_1.notifyClassnames.stackHost, children: (0, jsx_runtime_1.jsx)(styles_1.Inner, { ...props, className: (0, cn_1.cn)(constants_1.notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${constants_1.notifyClassnames.body}`, toastClassName: constants_1.notifyClassnames.root, progressClassName: `${constants_1.notifyClassnames.progress}` }) }), isVisibleCloseButton && ((0, jsx_runtime_1.jsx)(styles_1.CloseButton, { variant: "light", color: "grey", className: (0, cn_1.cn)({
                     [constants_1.notifyClassnames.closeButtonAnimationOut]: isStartedClosingNotify,
                 }), onClick: closeAll, children: "\u0421\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" })), (0, jsx_runtime_1.jsx)(styles_1.StaticInner, { containerId: staticContainerId, position: constants_1.NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${constants_1.notifyClassnames.body}`, toastClassName: constants_1.notifyClassnames.root, progressClassName: `${constants_1.notifyClassnames.progress}` }), bannerContainer] }));
 };

package/node/components/PageAside/PageAside.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageAside = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = require("react-dom");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const hooks_1 = require("./hooks");
@@ -21,6 +21,6 @@ const PageAside = ({ children, className, header, navigation, }) => {
         navigation,
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobileNavigationVisible &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(styles_1.MobileAsideNavigation, { className: constants_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(MobileAsideButton_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, asideCva({ withHeader: Boolean(header) })), children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] })] }));
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(styles_1.MobileAsideNavigation, { className: constants_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(MobileAsideButton_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, asideCva({ withHeader: Boolean(header) })), children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] })] }));
 };
 exports.PageAside = PageAside;

package/node/components/PageAsideNavigation/PageAsideNavigation.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageAsideNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const PageAsideNavigation = ({ addonNavigation, children, className, addonNavigationPosition = 'start', }) => {
     const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation })), (0, jsx_runtime_1.jsx)(styles_1.NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation }))] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(constants_1.pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation })), (0, jsx_runtime_1.jsx)(styles_1.NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation }))] }));
 };
 exports.PageAsideNavigation = PageAsideNavigation;

package/node/components/PageContent/PageContent.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const PageContext_1 = require("../PageContext");
 const PageLayoutFooter_1 = require("../PageLayoutFooter");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -25,7 +25,7 @@ const contentCva = (0, cva_1.cva)(constants_1.pageContentClassnames.content, {
 exports.PageContent = (0, react_1.forwardRef)((props, forwardedRef) => {
     const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
     const { className, children, isFullHeight = true, footer, scrollRef, header, isUnconstrained = false, } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentCva({
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentCva({
                     isUnconstrained,
                     hasHeader: Boolean(header),
                     hasAside,

package/node/components/PageHeader/HeaderContent/HeaderContent.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Breadcrumbs_1 = require("../../Breadcrumbs");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
 const PageActions_1 = require("../PageActions");
 const Title_1 = require("../Title");
@@ -17,6 +17,6 @@ const HeaderContent = ({ backButton, description, subheader, breadcrumbs, tabs,
         }
         return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && ((0, jsx_runtime_1.jsx)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), tabs && (0, jsx_runtime_1.jsx)(styles_1.TabsWrapper, { children: tabs }), subheader && ((0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { className: constants_1.pageHeaderClassnames.subheader, children: subheader }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, cn_1.cn)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && ((0, jsx_runtime_1.jsx)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), tabs && (0, jsx_runtime_1.jsx)(styles_1.TabsWrapper, { children: tabs }), subheader && ((0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { className: constants_1.pageHeaderClassnames.subheader, children: subheader }))] }));
 };
 exports.HeaderContent = HeaderContent;