@astral/ui 4.91.2 → 4.92.1

package/components/SearchField/SearchField.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { TextField } from '../TextField';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { searchFieldClassnames } from './constants';
 import { EndAdornmentWrapper, LoaderWrapper, SearchIcon, StyledIconButton, StyledLoader, TextFieldRoot, } from './styles';
 import { useLogic } from './useLogic';
 export const SearchField = forwardRef((props, ref) => {
     const { onChange, onClearValue, restProps, isLoading, inputRef, value, disabled, isClearButtonDisabled, onBlur, fullWidth, inputComponent, placeholder, hideHelperText, } = useLogic(props);
     const RenderComponent = inputComponent || TextField;
-    return (_jsx(TextFieldRoot, { "$isFullWidth": fullWidth, children: _jsx(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: _jsx(SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: _jsx(EndAdornmentWrapper, { className: classNames({
+    return (_jsx(TextFieldRoot, { "$isFullWidth": fullWidth, children: _jsx(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: _jsx(SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: _jsx(EndAdornmentWrapper, { className: cn({
                     [searchFieldClassnames.endAdornmentVisible]: !isClearButtonDisabled,
                 }), children: isLoading ? (_jsx(LoaderWrapper, { children: _jsx(StyledLoader, {}) })) : (_jsx(StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: _jsx(CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
 });

package/components/StaticCalendar/StaticDaysCalendar/StaticDaysCalendar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo } from 'react';
 import { useId } from '../../useId';
 import { checkIsDeepEqual } from '../../utils/checkIsDeepEqual';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { buildDaysCalendarGrid, } from '../../utils/date';
 import { staticDaysCalendarClassnames } from './constants';
 import { DayButton } from './DayButton';
@@ -30,7 +30,7 @@ const StaticDaysCalendarInner = memo(({ minDate, maxDate, selectedDate, baseDate
         productionCalendarStorage,
     ]);
     const checkRenderRequirements = useCallback((item) => hideOutOfAvailableRangeElements ? !item.isOutOfAvailableRange : true, [hideOutOfAvailableRangeElements]);
-    return (_jsxs("article", { className: classNames(className, staticDaysCalendarClassnames.container), children: [_jsx(Head, { className: staticDaysCalendarClassnames.head, isMondayFirst: isMondayFirst, hasHolidays: Boolean(productionCalendarStorage) }), _jsx(Body, { role: "grid", className: staticDaysCalendarClassnames.grid, children: grid.map((item, index) => checkRenderRequirements(item) ? (_jsx(DayButton, { className: staticDaysCalendarClassnames.button, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, isNextItemInSelectedRange: grid[index + 1]?.isInSelectedRange, isPreviousItemInHoveredRange: grid[index - 1]?.isInHoveredRange, isNextItemInHoveredRange: grid[index + 1]?.isInHoveredRange, ...item, onClick: onChange, onDayHover: onDayHover, renderDayTooltipTitle: renderDayTooltipTitle, disableTooltipInteractive: checkDisableTooltipInteractive?.(item), renderDayContent: renderDayContent, dragAndDropProps: dragAndDropProps, checkTooltipActive: checkTooltipActive }, item.date.toString())) : (
+    return (_jsxs("article", { className: cn(className, staticDaysCalendarClassnames.container), children: [_jsx(Head, { className: staticDaysCalendarClassnames.head, isMondayFirst: isMondayFirst, hasHolidays: Boolean(productionCalendarStorage) }), _jsx(Body, { role: "grid", className: staticDaysCalendarClassnames.grid, children: grid.map((item, index) => checkRenderRequirements(item) ? (_jsx(DayButton, { className: staticDaysCalendarClassnames.button, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, isNextItemInSelectedRange: grid[index + 1]?.isInSelectedRange, isPreviousItemInHoveredRange: grid[index - 1]?.isInHoveredRange, isNextItemInHoveredRange: grid[index + 1]?.isInHoveredRange, ...item, onClick: onChange, onDayHover: onDayHover, renderDayTooltipTitle: renderDayTooltipTitle, disableTooltipInteractive: checkDisableTooltipInteractive?.(item), renderDayContent: renderDayContent, dragAndDropProps: dragAndDropProps, checkTooltipActive: checkTooltipActive }, item.date.toString())) : (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Используется вместе с keyId
                 _jsx("div", {}, `${id}_${index}`))) })] }));
 }, (prev, next) => checkIsDeepEqual({

package/components/SvgIcon/SvgIcon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { SIZES, svgIconClassnames } from './constants';
 import { StyledSvg } from './styles';
@@ -14,5 +14,5 @@ const svgCva = cva(svgIconClassnames.root, {
 });
 export const SvgIcon = (props) => {
     const { children, color = 'inherit', titleAccess, size, width, height, viewBox = '0 0 24 24', xmlns = 'http://www.w3.org/2000/svg', className, ...restProps } = props;
-    return (_jsxs(StyledSvg, { className: classNames(className, svgCva({ size })), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: SIZES[size] || width || '1em', height: SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? _jsx("title", { children: titleAccess }) : null] }));
+    return (_jsxs(StyledSvg, { className: cn(className, svgCva({ size })), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: SIZES[size] || width || '1em', height: SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? _jsx("title", { children: titleAccess }) : null] }));
 };

package/components/Tabs/Tabs.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useScrollToActiveElement } from '../useScrollToActiveElement';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { tabsClassnames } from './constants';
 import { Container, Divider, StyledTabs, Wrapper } from './styles';
 export const Tabs = ({ className, ...tabsProps }) => {
     const { containerRef } = useScrollToActiveElement();
-    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef, className: classNames(className, tabsClassnames.root) }), _jsx(Divider, {})] }) }));
+    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef, className: cn(className, tabsClassnames.root) }), _jsx(Divider, {})] }) }));
 };

package/components/Tag/useLogic/useLogic.js

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { tagClassnames } from '../constants';
 export const useLogic = ({ onDelete, variant, disabled, size, className, }) => {
     const handleDelete = (event) => {
         event.stopPropagation();
         onDelete?.(event);
     };
-    const classnames = useMemo(() => classNames(tagClassnames.root, {
+    const classnames = useMemo(() => cn(tagClassnames.root, {
         [tagClassnames.variantText]: variant === 'text',
         [tagClassnames.variantContained]: variant === 'contained',
         [tagClassnames.variantLight]: variant === 'light',

package/components/TagBadge/TagBadge.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { tagClassnames } from '../Tag';
 import { TagContext } from '../Tag/TagContext';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { StyledBadge } from './styles';
 /**
  * Badge для использования внутри компонента Tag
  */
 export const TagBadge = ({ color = 'primary', checked, disabled, checkedColor, className, ...props }) => {
     const { variant } = useContext(TagContext);
-    return (_jsx(StyledBadge, { withBorder: false, color: "white", "$color": color, "$variant": variant, "$isChecked": checked, "$isDisabled": disabled, className: classNames(className, tagClassnames.badge), ...props }));
+    return (_jsx(StyledBadge, { withBorder: false, color: "white", "$color": color, "$variant": variant, "$isChecked": checked, "$isDisabled": disabled, className: cn(className, tagClassnames.badge), ...props }));
 };

package/components/TextField/TextField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { FormHelperTextContent } from '../FormHelperText';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { textFieldClassnames } from './constants';
 import { StyledTextField } from './styles';
 export const TextField = forwardRef(({ success, error, helperText: helperTextProp, fullWidth = false, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed = true, onBlur, hideHelperText = false, className, disabled, ...props }, ref) => {
@@ -37,7 +37,7 @@ export const TextField = forwardRef(({ success, error, helperText: helperTextPro
         }
         onBlur?.(event);
     };
-    const classnames = useMemo(() => classNames(className, {
+    const classnames = useMemo(() => cn(className, {
         [textFieldClassnames.hideHelperText]: hideHelperText,
         [textFieldClassnames.disabled]: disabled,
     }), [className, hideHelperText, disabled]);

package/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { tooltipClassnames } from './constants';
 import { ContentWrapper, StyledTooltip } from './styles';
@@ -14,5 +14,5 @@ const tooltipCva = cva(tooltipClassnames.root, {
 });
 export const Tooltip = forwardRef((props, ref) => {
     const { title, placement = 'top', size = 'medium', withoutContainer = true, children, className, tooltipStyle, width, ...restProps } = useLogic(props);
-    return (_jsx(StyledTooltip, { ref: ref, title: title, size: size, placement: placement, arrow: true, className: classNames(className, tooltipCva({ withoutMaxWidth: Boolean(width) })), style: tooltipStyle, ...restProps, children: withoutContainer ? (children) : (_jsx(ContentWrapper, { className: tooltipClassnames.contentWrapper, children: children })) }));
+    return (_jsx(StyledTooltip, { ref: ref, title: title, size: size, placement: placement, arrow: true, className: cn(className, tooltipCva({ withoutMaxWidth: Boolean(width) })), style: tooltipStyle, ...restProps, children: withoutContainer ? (children) : (_jsx(ContentWrapper, { className: tooltipClassnames.contentWrapper, children: children })) }));
 });

package/components/Tooltip/useLogic/useLogic.js

@@ -1,11 +1,11 @@
 import { useHidePersonalData } from '../../personalDataSecurity';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 export const useLogic = (props) => {
     const { children, className: propClassName, width, style, ...restProps } = props;
     const hidePersonalDataClassName = useHidePersonalData({
         type: 'container',
     });
-    const className = classNames(propClassName, {
+    const className = cn(propClassName, {
         [hidePersonalDataClassName]: children.props.className?.includes(hidePersonalDataClassName),
     });
     const tooltipStyle = {

package/components/Tree/TreeList/TreeList.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { treeListClassnames } from './constants';
 import { List } from './styles';
 import { TreeItem } from './TreeItem';
@@ -8,5 +8,5 @@ const INITIAL_LEVEL = 0;
 export const TreeList = (props) => {
     const { listProps, itemProps } = useLogic(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return (_jsx(List, { className: classNames(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return (_jsx(List, { className: cn(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
 };

package/components/TreeLikeList/TreeLikeList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { treeListClassnames } from '../Tree';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { List } from './styles';
 import { TreeItem } from './TreeItem';
 import { useLogic } from './useLogic';
@@ -8,5 +8,5 @@ const INITIAL_LEVEL = 0;
 export const TreeLikeList = (props) => {
     const { listProps, itemProps } = useLogic(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return (_jsx(List, { className: classNames(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return (_jsx(List, { className: cn(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
 };

package/components/Typography/Typography.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { typographyClassnames } from './constants';
 import { useTypographyColor } from './hooks';
@@ -17,5 +17,5 @@ const typographyCva = cva(typographyClassnames.root, {
 });
 export const Typography = forwardRef(({ children, color, colorIntensity = '800', component, withoutCalt, className, isTabularNums, ...props }, ref) => {
     const typographyColor = useTypographyColor({ color, colorIntensity });
-    return (_jsx(TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: classNames(typographyCva({ isTabularNums, withoutCalt }), className), children: children }));
+    return (_jsx(TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: cn(typographyCva({ isTabularNums, withoutCalt }), className), children: children }));
 });

package/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader } from '../../Loader';
 import { Typography } from '../../Typography';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { loadingPlaceholderClassnames } from './constants';
 import { LoadingContainer } from './styles';
 /**
@@ -9,10 +9,10 @@ import { LoadingContainer } from './styles';
  */
 export const LoadingPlaceholder = ({ title, content, isShowLoader = true, className, }) => {
     if (!isShowLoader) {
-        return (_jsx(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className) }));
+        return (_jsx(LoadingContainer, { className: cn(loadingPlaceholderClassnames.root, className) }));
     }
     if (content) {
-        return (_jsx(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className), children: content }));
+        return (_jsx(LoadingContainer, { className: cn(loadingPlaceholderClassnames.root, className), children: content }));
     }
-    return (_jsxs(LoadingContainer, { className: classNames(loadingPlaceholderClassnames.root, className), children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
+    return (_jsxs(LoadingContainer, { className: cn(loadingPlaceholderClassnames.root, className), children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
 };

package/components/utils/classNames/classNames.d.ts

@@ -1 +1 @@
-export { default as classNames } from 'classnames';
+export { default as classNames } from 'clsx';

package/components/utils/classNames/classNames.js

@@ -1 +1 @@
-export { default as classNames } from 'classnames';
+export { default as classNames } from 'clsx';

package/components/utils/cn/cn.d.ts

@@ -0,0 +1 @@
+export { default as cn } from 'clsx';

package/components/utils/cn/cn.js

@@ -0,0 +1 @@
+export { default as cn } from 'clsx';

package/components/utils/cn/index.d.ts

@@ -0,0 +1 @@
+export * from './cn';

package/components/utils/cn/index.js

@@ -0,0 +1 @@
+export * from './cn';

package/components/utils/cn/public.d.ts

@@ -0,0 +1 @@
+export * from './cn';

package/components/utils/cn/public.js

@@ -0,0 +1 @@
+export * from './cn';

package/hook-form/EditableText/EditableText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tooltip } from '../../components/Tooltip';
-import { classNames } from '../../components/utils/classNames';
+import { cn } from '../../components/utils/cn';
 import { editableTextClassnames } from './constants';
 import { EditingForm } from './EditingForm';
 import { DisplayValue, StyledEditIcon, StyledLoader, StyledPopover, } from './styles';
@@ -23,7 +23,7 @@ export const EditableText = (props) => {
         if (showEditIconMode === 'none') {
             return null;
         }
-        return (_jsx(StyledEditIcon, { "$iconPosition": iconPosition, className: classNames({
+        return (_jsx(StyledEditIcon, { "$iconPosition": iconPosition, className: cn({
                 [editableTextClassnames.showIconOnHover]: showEditIconMode === 'onHover',
             }) }));
     };

package/hook-form/FormFilters/AllFiltersButton/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
 import { useViewportType } from '../../../../components/useViewportType';
-import { classNames } from '../../../../components/utils/classNames';
+import { cn } from '../../../../components/utils/cn';
 import { FORM_FILTERS_SEARCH_FIELD_ID } from '../../../FormFiltersSearchField/constants';
 import { FORM_FILTERS_QUICK_FILTERS_ID } from '../../../FormQuickFilters/constants';
 import { formFiltersClassnames } from '../../constants';
@@ -34,7 +34,7 @@ export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilter
         return (filledValuesCount - (searchValue ? 1 : 0) - (quickFiltersValue ? 1 : 0));
     };
     const allFiltersButtonClassName = useMemo(() => {
-        return classNames({
+        return cn({
             [formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
             [formFiltersClassnames.showAllFiltersButtonOnLaptop]: hasMainFilters || hasSecondaryFilters,
             [formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,

package/hook-form/FormMobilePhoneField/FormMobilePhoneField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MaskField } from '../../components/MaskField';
 import { useHidePersonalData } from '../../components/personalDataSecurity';
-import { classNames } from '../../components/utils/classNames';
+import { cn } from '../../components/utils/cn';
 import { useFormFieldProps } from '../useFormFieldProps';
 const MOBILE_PHONE_MASK = '+{7} (000) 000-00-00';
 /**
@@ -18,6 +18,6 @@ export const FormMobilePhoneField = ({ isHidePersonalData, inputProps, ...props
     });
     return (_jsx(MaskField, { inputProps: {
             ...inputProps,
-            className: classNames(inputProps?.className, hidePersonalDataClassname),
+            className: cn(inputProps?.className, hidePersonalDataClassname),
         }, placeholder: "+7 (9**) ***-**-**", ...fieldProps, mask: MOBILE_PHONE_MASK, autoComplete: "tel" }));
 };

package/hook-form/FormPageLayout/FormPageLayout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../components/utils/classNames';
+import { cn } from '../../components/utils/cn';
 import { Form } from '../Form';
 import { FormPageLayoutBase, formPageContentClassnames, } from '../FormPageLayoutBase';
 import { FormPageFooter } from './FormPageFooter';
@@ -10,7 +10,7 @@ import { FormContent } from './styles';
 export const FormPageLayout = (props) => {
     const { form, children, ...restProps } = props;
     const { secondaryActions, submitButtonText, ...restFormProps } = form;
-    return (_jsx(FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: classNames({
+    return (_jsx(FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: cn({
             [formPageContentClassnames.formPageContentSecondaryActions]: Boolean(secondaryActions),
         }), children: ({ isDisabled }) => (_jsxs(Form, { ...restFormProps, isDisabled: isDisabled, children: [_jsx(FormContent, { children: children }), _jsx(FormPageFooter, { isDisabled: isDisabled, submitButtonText: submitButtonText, secondaryActions: secondaryActions })] })) }));
 };

package/hook-form/FormPageLayoutBase/FormPageLayoutBase.js

@@ -3,7 +3,7 @@ import { isValidElement } from 'react';
 import { PageAside } from '../../components/PageAside';
 import { PageContextProvider } from '../../components/PageContext';
 import { PageLayoutContainer } from '../../components/PageLayoutContainer';
-import { classNames } from '../../components/utils/classNames';
+import { cn } from '../../components/utils/cn';
 import { FormMobileActions } from './FormMobileActions';
 import { DesktopAlertWrapper, MobileAlertWrapper, StyledPageContent, StyledPageHeader, } from './styles';
 import { useLogic } from './useLogic';
@@ -13,5 +13,5 @@ import { useLogic } from './useLogic';
 export const FormPageLayoutBase = (props) => {
     const { pageContentProps, headerProps, renderChildrenProps, headerActions } = useLogic(props);
     const { className, aside, children, alert, contentClassname, header } = props;
-    return (_jsxs(PageContextProvider, { hasAside: Boolean(aside), mobileTitleActions: _jsx(FormMobileActions, { actions: headerActions }), children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: className, children: [alert && _jsx(MobileAlertWrapper, { children: alert }), isValidElement(header) ? (header) : (_jsx(StyledPageHeader, { ...headerProps })), _jsx(StyledPageContent, { className: classNames(contentClassname), isFormPaddingDisable: true, ...pageContentProps, children: children(renderChildrenProps) }), aside && !isValidElement(aside) && (_jsx(PageAside, { ...aside })), isValidElement(aside) && aside] })] }));
+    return (_jsxs(PageContextProvider, { hasAside: Boolean(aside), mobileTitleActions: _jsx(FormMobileActions, { actions: headerActions }), children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: className, children: [alert && _jsx(MobileAlertWrapper, { children: alert }), isValidElement(header) ? (header) : (_jsx(StyledPageHeader, { ...headerProps })), _jsx(StyledPageContent, { className: cn(contentClassname), isFormPaddingDisable: true, ...pageContentProps, children: children(renderChildrenProps) }), aside && !isValidElement(aside) && (_jsx(PageAside, { ...aside })), isValidElement(aside) && aside] })] }));
 };

package/hook-form/FormWizardPageLayout/FormWizardPageLayout.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../components/utils/classNames';
+import { cn } from '../../components/utils/cn';
 import { FormPageLayoutBase, formPageContentClassnames, } from '../FormPageLayoutBase';
 import { FormWizard } from '../FormWizard';
 import { FormWizardFooter } from './FormWizardFooter';
@@ -11,7 +11,7 @@ export const FormWizardPageLayout = (props) => {
     const { header, aside, formWizard, alert } = props;
     const { form, isDisabled: externalDisabled, secondaryActions } = formWizard;
     const { isShowFullActions, isShowNavigateButtons } = useLogic(props);
-    return (_jsx(FormPageLayoutBase, { header: header, aside: aside, formProps: { isDisabled: externalDisabled, form, secondaryActions }, contentClassname: classNames({
+    return (_jsx(FormPageLayoutBase, { header: header, aside: aside, formProps: { isDisabled: externalDisabled, form, secondaryActions }, contentClassname: cn({
             [formPageContentClassnames.formPageContentSecondaryActions]: isShowNavigateButtons,
             [formPageContentClassnames.formWizardPageContentActions]: isShowFullActions,
         }), alert: alert, children: ({ isDisabled }) => (_jsx(FormWizard, { isDisabled: isDisabled, ...formWizard, customFooter: (footerProps) => (_jsx(FormWizardFooter, { ...footerProps, secondaryActions: secondaryActions })) })) }));

package/node/components/Alert/Alert.js

@@ -9,7 +9,7 @@ const InfoFillMd_1 = require("../../icons/InfoFillMd");
 const SuccessFillMd_1 = require("../../icons/SuccessFillMd");
 const WarningFillMd_1 = require("../../icons/WarningFillMd");
 const Collapse_1 = require("../Collapse");
-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");
@@ -51,7 +51,7 @@ exports.Alert = (0, react_1.forwardRef)(({ children, title, closeText = 'Скр
         };
         return ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
     };
-    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isVisible, unmountOnExit: unmountOnExit, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { style: style, className: (0, classNames_1.classNames)(constants_1.alertClassnames.contentWrapper, alertCva({
+    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isVisible, unmountOnExit: unmountOnExit, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { style: style, className: (0, cn_1.cn)(constants_1.alertClassnames.contentWrapper, alertCva({
                 hasTitle: Boolean(title),
                 hasCloseButton: Boolean(onClose),
                 hasActions: Boolean(actions),

package/node/components/Autocomplete/Autocomplete.js

@@ -16,7 +16,7 @@ const Loader_1 = require("../Loader");
 const OverflowTypography_1 = require("../OverflowTypography");
 const TagsList_1 = require("../TagsList");
 const TextField_1 = require("../TextField");
-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");
@@ -48,7 +48,7 @@ const AutocompleteInner = (props, ref) => {
             ...inputParams,
             inputProps: {
                 ...inputParams.inputProps,
-                className: (0, classNames_1.classNames)(inputParams?.inputProps?.className, inputProps?.className),
+                className: (0, cn_1.cn)(inputParams?.inputProps?.className, inputProps?.className),
             },
             InputProps: {
                 ...inputParams.InputProps,

package/node/components/Autocomplete/useLogic/useLogic.js

@@ -2,7 +2,7 @@
 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 = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, multiple, className, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
@@ -27,7 +27,7 @@ const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, aut
         }
     };
     const classnames = (0, react_1.useMemo)(() => {
-        return (0, classNames_1.classNames)(className, constants_1.autocompleteClassnames.root, {
+        return (0, cn_1.cn)(className, constants_1.autocompleteClassnames.root, {
             [constants_1.autocompleteClassnames.multiple]: multiple,
             [constants_1.autocompleteClassnames.emptyValue]: isValueEmpty,
         });

package/node/components/Badge/Badge.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = 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 Badge = ({ children, color, max = 99, withBorder = true, variantColor = 'contained', classes, className, ...props }) => {
     const { badgeClasses } = (0, useLogic_1.useLogic)({ classes });
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, classes: badgeClasses, className: (0, classNames_1.classNames)(constants_1.badgeClassnames.root, className), ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, classes: badgeClasses, className: (0, cn_1.cn)(constants_1.badgeClassnames.root, className), ...props, children: children }));
 };
 exports.Badge = Badge;

package/node/components/BulletList/BulletList.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulletList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
@@ -11,7 +11,7 @@ const styles_1 = require("./styles");
  */
 const BulletList = (props) => {
     const { children, hideFirstBullet, className } = props;
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, constants_1.bulletListClassnames.root, {
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)(className, constants_1.bulletListClassnames.root, {
         [constants_1.bulletListClassnames.hideFirstBullet]: hideFirstBullet,
     }), [hideFirstBullet]);
     return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.List, { className: classnames, children: children }) }));

package/node/components/BulletListItem/BulletListItem.js

@@ -4,12 +4,12 @@ exports.BulletListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Typography_1 = require("../Typography");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const styles_1 = require("./styles");
 /**
  * Элемент с маркерами
  */
 exports.BulletListItem = (0, react_1.forwardRef)((props, ref) => {
     const { children, className, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: ref, className: (0, classNames_1.classNames)(className), children: [(0, jsx_runtime_1.jsx)(styles_1.Icon, {}), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "span", ...restProps, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { ref: ref, className: (0, cn_1.cn)(className), children: [(0, jsx_runtime_1.jsx)(styles_1.Icon, {}), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "span", ...restProps, children: children })] }));
 });

package/node/components/Button/useLogic/useLogic.js

@@ -2,7 +2,7 @@
 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 enums_1 = require("../enums");
 const useLogic = ({ loading, selected, variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
@@ -14,7 +14,7 @@ const useLogic = ({ loading, selected, variant = enums_1.ButtonVariants.Containe
         }
         return 'inverted';
     }, [variant]);
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.buttonClassnames.root, constants_1.buttonColorClassnames[color], className, {
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)(constants_1.buttonClassnames.root, constants_1.buttonColorClassnames[color], className, {
         [constants_1.buttonClassnames.loading]: loading,
         [constants_1.buttonClassnames.disabled]: disabled,
         [constants_1.buttonClassnames.selected]: selected,

package/node/components/Checkbox/Icon/Icon.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SvgIcon_1 = require("../../SvgIcon");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
-const Icon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { size: "sm", viewBox: "0 0 16 16", ...props, children: [(0, jsx_runtime_1.jsx)("rect", { className: constants_1.checkboxClassnames.outline, x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5" }), (0, jsx_runtime_1.jsx)("path", { className: (0, classNames_1.classNames)(constants_1.checkboxClassnames.symbol, constants_1.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" }), (0, jsx_runtime_1.jsx)("path", { className: (0, classNames_1.classNames)(constants_1.checkboxClassnames.symbol, constants_1.checkboxClassnames.iconIndeterminate), d: "M12 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h8Z" })] }));
+const Icon = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { size: "sm", viewBox: "0 0 16 16", ...props, children: [(0, jsx_runtime_1.jsx)("rect", { className: constants_1.checkboxClassnames.outline, x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5" }), (0, jsx_runtime_1.jsx)("path", { className: (0, cn_1.cn)(constants_1.checkboxClassnames.symbol, constants_1.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" }), (0, jsx_runtime_1.jsx)("path", { className: (0, cn_1.cn)(constants_1.checkboxClassnames.symbol, constants_1.checkboxClassnames.iconIndeterminate), d: "M12 7.25a.75.75 0 0 1 0 1.5H4a.75.75 0 0 1 0-1.5h8Z" })] }));
 exports.Icon = Icon;

package/node/components/Checkbox/useLogic/useLogic.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useUpdateEffect_1 = require("../../useUpdateEffect");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("../constants");
 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] = (0, react_1.useState)(defaultChecked || checked);
@@ -26,7 +26,7 @@ const useLogic = ({ checked = false, indeterminate = false, disabled = false, is
         }
         return 'inherit';
     }, [disabled, isError, isChecked, indeterminate]);
-    const className = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.checkboxClassnames.root, isChecked ? constants_1.checkboxClassnames.checked : '', disabled ? constants_1.checkboxClassnames.disabled : '', indeterminate ? constants_1.checkboxClassnames.indeterminate : '', propClassNames), [isChecked, indeterminate, disabled, propClassNames]);
+    const className = (0, react_1.useMemo)(() => (0, cn_1.cn)(constants_1.checkboxClassnames.root, isChecked ? constants_1.checkboxClassnames.checked : '', disabled ? constants_1.checkboxClassnames.disabled : '', indeterminate ? constants_1.checkboxClassnames.indeterminate : '', propClassNames), [isChecked, indeterminate, disabled, propClassNames]);
     return {
         onChange,
         color,

package/node/components/Chip/ChipStatusIcon/ChipStatusIcon.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChipStatusIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("./constants");
 const styled_1 = require("./styled");
 const ChipStatusIcon = ({ status }) => {
     const classnames = (0, react_1.useMemo)(() => {
-        return (0, classNames_1.classNames)(constants_1.chipStatusIconClassnames.root, {
+        return (0, cn_1.cn)(constants_1.chipStatusIconClassnames.root, {
             [constants_1.chipStatusIconClassnames.success]: status === 'success',
             [constants_1.chipStatusIconClassnames.warning]: status === 'warning',
             [constants_1.chipStatusIconClassnames.error]: status === 'error',

package/node/components/Chip/useLogic/useLogic.js

@@ -2,14 +2,14 @@
 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 ChipProvider_1 = require("../ChipProvider");
 const constants_1 = require("../constants");
 const useLogic = ({ className, isDisabled, isSelected, onChange, size = 'medium', label, status, icon, counter, endAdornment, maxCount, name: nameProp, value: valueProp, }) => {
     const { mode, name: contextName } = (0, react_1.useContext)(ChipProvider_1.ChipContext);
     const isMultiple = mode === 'multiple';
     const inputName = nameProp ?? contextName;
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, constants_1.chipClassnames.root, {
+    const classnames = (0, react_1.useMemo)(() => (0, cn_1.cn)(className, constants_1.chipClassnames.root, {
         [constants_1.chipClassnames.disabled]: isDisabled,
         [constants_1.chipClassnames.selected]: isSelected,
         [constants_1.chipClassnames.sizeSmall]: size === 'small',

package/node/components/ConfirmDialog/ConfirmDialog.js

@@ -7,7 +7,7 @@ const Dialog_1 = require("../Dialog");
 const DialogActions_1 = require("../DialogActions");
 const DialogContent_1 = require("../DialogContent");
 const DialogContentText_1 = require("../DialogContentText");
-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");
@@ -16,6 +16,6 @@ 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 ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && ((0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: description })) : (description) })), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [isShowCancelButton && ((0, jsx_runtime_1.jsx)(styles_1.CancelButton, { ...restCancelProps, ...cancelButtonProps, className: (0, classNames_1.classNames)(actions.cancel?.className, constants_1.confirmDialogClassnames.cancelButton), children: cancelText })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, className: (0, classNames_1.classNames)(confirmButtonProps.className, constants_1.confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { size: size, title: title, open: open, onClose: onClose, ...restProps, children: [description && ((0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: typeof description === 'string' ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.DialogContentText, { children: description })) : (description) })), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [isShowCancelButton && ((0, jsx_runtime_1.jsx)(styles_1.CancelButton, { ...restCancelProps, ...cancelButtonProps, className: (0, cn_1.cn)(actions.cancel?.className, constants_1.confirmDialogClassnames.cancelButton), children: cancelText })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, className: (0, cn_1.cn)(confirmButtonProps.className, constants_1.confirmDialogClassnames.confirmButton), children: confirmText })] })] }));
 };
 exports.ConfirmDialog = ConfirmDialog;

package/node/components/CopyTypography/CopyTypography.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyTypography = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Tooltip_1 = require("../Tooltip");
-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 CopyTypography = (props) => {
     const { handleMouseLeave, handleClick, tooltipTitle, isIconOnLeft, isIconOnRight, restProps, copyPosition, color, showCopyIcon, isOverflow, children, tooltipProps, } = (0, useLogic_1.useLogic)(props);
-    const renderIcon = () => ((0, jsx_runtime_1.jsx)(styles_1.StyledCopyIcon, { size: "sm", "$copyPosition": copyPosition, color: color, className: (0, classNames_1.classNames)({
+    const renderIcon = () => ((0, jsx_runtime_1.jsx)(styles_1.StyledCopyIcon, { size: "sm", "$copyPosition": copyPosition, color: color, className: (0, cn_1.cn)({
             [constants_1.copyTypographyClassnames.showIconOnHover]: showCopyIcon === 'onHover',
         }) }));
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, disableInteractive: true, placement: "bottom", ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onMouseLeave: handleMouseLeave, onClick: handleClick, component: "div", color: color, ...restProps, children: [isIconOnLeft && renderIcon(), (0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { className: (0, classNames_1.classNames)({
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, disableInteractive: true, placement: "bottom", ...tooltipProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { onMouseLeave: handleMouseLeave, onClick: handleClick, component: "div", color: color, ...restProps, children: [isIconOnLeft && renderIcon(), (0, jsx_runtime_1.jsx)(styles_1.TypographyWrapper, { className: (0, cn_1.cn)({
                         [constants_1.copyTypographyClassnames.overflow]: isOverflow,
                     }), children: children }), isIconOnRight && renderIcon()] }) }));
 };