@astral/ui 4.91.2 → 4.92.1

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/PageContent/styles.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Wrapper = void 0;
 const constants_1 = require("../constants");
-const PdfViewer_1 = require("../PdfViewer");
+const constants_2 = require("../PdfViewer/constants");
 const styled_1 = require("../styled");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 exports.Wrapper = (0, styled_1.styled)('article', {
     shouldForwardProp: (prop) => !['$isFullHeight', '$isSeparatorShown'].includes(prop),
 }) `
@@ -31,7 +31,7 @@ exports.Wrapper = (0, styled_1.styled)('article', {
     border-top: none;
   }
 
-  @keyframes ${constants_2.PAGE_CONTENT_ANIMATION} {
+  @keyframes ${constants_3.PAGE_CONTENT_ANIMATION} {
     0% {
       display: none;
 
@@ -49,8 +49,8 @@ exports.Wrapper = (0, styled_1.styled)('article', {
     }
   }
 
-  &.${constants_2.pageContentClassnames.animation} > * {
-    animation: ${({ theme }) => `${constants_2.PAGE_CONTENT_ANIMATION} ${theme.transitions.duration.complex * 2}ms`};
+  &.${constants_3.pageContentClassnames.animation} > * {
+    animation: ${({ theme }) => `${constants_3.PAGE_CONTENT_ANIMATION} ${theme.transitions.duration.complex * 2}ms`};
   }
 `;
 exports.Content = styled_1.styled.div `
@@ -62,7 +62,7 @@ exports.Content = styled_1.styled.div `
 
   padding: ${({ theme }) => theme.spacing(0, 6, 4)};
 
-  &.${constants_2.pageContentClassnames.contentHasHeader}, &.${constants_2.pageContentClassnames.hasAside} {
+  &.${constants_3.pageContentClassnames.contentHasHeader}, &.${constants_3.pageContentClassnames.hasAside} {
     padding: ${({ theme }) => theme.spacing(4, 6, 4)};
   }
 
@@ -71,7 +71,7 @@ exports.Content = styled_1.styled.div `
     padding-bottom: ${({ theme }) => theme.spacing(3)};
     padding-left: ${({ theme }) => theme.spacing(4)};
 
-    &.${constants_2.pageContentClassnames.contentHasHeader}, &.${constants_2.pageContentClassnames.hasAside} {
+    &.${constants_3.pageContentClassnames.contentHasHeader}, &.${constants_3.pageContentClassnames.hasAside} {
       padding: ${({ theme }) => theme.spacing(4, 4, 3)};
     }
   }
@@ -88,14 +88,14 @@ exports.Content = styled_1.styled.div `
     border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
 
-    &.${constants_2.pageContentClassnames.contentHasHeader} {
+    &.${constants_3.pageContentClassnames.contentHasHeader} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
 
     /* Причина игнора: Не критично для отображения */
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    &.${constants_2.pageContentClassnames.isUnconstrained}, &:has(> .${constants_1.selfContainedClassname}) {
+    &.${constants_3.pageContentClassnames.isUnconstrained}, &:has(> .${constants_1.selfContainedClassname}) {
       margin: 0;
       padding: 0;
 
@@ -107,7 +107,7 @@ exports.Content = styled_1.styled.div `
 
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  &:has(.${PdfViewer_1.pdfViewerClassnames.document}.${PdfViewer_1.pdfViewerClassnames.zoom}) {
+  &:has(.${constants_2.pdfViewerClassnames.document}.${constants_2.pdfViewerClassnames.zoom}) {
     scroll-behavior: auto;
     scrollbar-gutter: auto;
 
@@ -123,7 +123,7 @@ exports.Content = styled_1.styled.div `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    &&.${constants_2.pageContentClassnames.withPdfViewer} {
+    &&.${constants_3.pageContentClassnames.withPdfViewer} {
       margin: 0;
       padding-top: 0;
       padding-right: 0;

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;

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

@@ -9,6 +9,10 @@ exports.BreadcrumbsWrapper = styled_1.styled.div `
 
   margin-bottom: ${({ theme }) => theme.spacing(1)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
@@ -19,6 +23,10 @@ exports.TabsWrapper = styled_1.styled.div `
 
   padding-top:  ${({ theme }) => theme.spacing(4)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 0, 4, 0)};
 
@@ -33,6 +41,10 @@ exports.PageSubheader = styled_1.styled.div `
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }

package/node/components/PageHeader/PageActions/useLogic/useLogic.js

@@ -5,13 +5,13 @@ const react_1 = require("react");
 const ActionGroup_1 = require("../../../ActionGroup");
 const NextFeatureFlagsContext_1 = require("../../../ConfigProvider/NextFeatureFlagsContext");
 const DashboardContext_1 = require("../../../DashboardContext");
-const classNames_1 = require("../../../utils/classNames");
+const cn_1 = require("../../../utils/cn");
 const constants_1 = require("../constants");
 const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = false, }) => {
     const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = (0, react_1.useContext)(NextFeatureFlagsContext_1.NextFeatureFlagsContext);
     const { setFocusedMode, isFocusedMode } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
-    const buttonClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
+    const buttonClassnames = (0, react_1.useMemo)(() => (0, cn_1.cn)({
         [constants_1.focusModeButtonClassnames.isShowOnDesktop]: showFocusModeButtonOnDesktop,
         [constants_1.focusModeButtonClassnames.isShowOnLaptop]: showFocusModeButtonOnLaptop,
     }), [showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop]);
@@ -55,7 +55,7 @@ const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = fa
         return allActions;
     }, [main, secondary, secondaryVisible, disabledAction]);
     const classnames = (0, react_1.useMemo)(() => {
-        return (0, classNames_1.classNames)({
+        return (0, cn_1.cn)({
             [constants_1.actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop && collapsedActions.length > 0,
         });
     }, [withCollapseOnLaptop]);

package/node/components/PageHeader/PageHeader.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeader = 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 HeaderContent_1 = require("./HeaderContent");
@@ -39,10 +39,10 @@ const PageHeader = (props) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
                     hasBackButton: Boolean(backButton),
-                }), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(rootCva({
+                }), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, cn_1.cn)(rootCva({
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, cn_1.cn)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageHeader/styles.js

@@ -34,8 +34,20 @@ exports.Wrapper = styled_1.styled.header `
 
     background-color: ${({ theme }) => theme.palette.background.default};
 
-    &.${constants_2.pageHeaderClassnames.hasSubheader}, &.${constants_2.pageHeaderClassnames.hasFilters} {
-      border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+    /*
+     * Два правила, а не список через запятую: невалидный :has()
+     * отбросил бы и границу под фильтрами.
+     */
+    &.${constants_2.pageHeaderClassnames.hasFilters} {
+      border-bottom: 1px solid
+        ${({ theme }) => theme.palette.components.border.default};
+    }
+
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(.${constants_2.pageHeaderClassnames.subheader}:not(:empty)) {
+      border-bottom: 1px solid
+        ${({ theme }) => theme.palette.components.border.default};
     }
   }
 
@@ -81,8 +93,8 @@ exports.MobileTitleWrapper = styled_1.styled.div `
     /* stylelint-disable plugin/no-unsupported-browser-features */
     &:not(:has(+ .${constants_2.pageHeaderClassnames.root} :is(
       .${constants_2.pageHeaderClassnames.filters},
-      .${constants_2.pageHeaderClassnames.subheader},
-      .${constants_1.pageAsideClassnames.mobileNavigation}
+      .${constants_2.pageHeaderClassnames.subheader}:not(:empty),
+      .${constants_1.pageAsideClassnames.mobileNavigation}:not(:empty)
     ))) {
       border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
     }

package/node/components/PageLayout/PageLayout.js

@@ -9,13 +9,13 @@ const PageContext_1 = require("../PageContext");
 const PageHeader_1 = require("../PageHeader");
 const PageLayoutContainer_1 = require("../PageLayoutContainer");
 const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PageLayout = (props) => {
     const { header, content, aside, footer, className, alert, isLoading } = props;
     const { hasAside, ref } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: (0, classNames_1.classNames)(className, {
+    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: (0, cn_1.cn)(className, {
                     [PageLayoutContainer_1.pageLayoutClassnames.withoutHeader]: !header,
                 }), ref: ref, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.MobileAlertWrapper, { children: alert }), (0, react_1.isValidElement)(header)
                         ? header

package/node/components/PageLayout/styles.js

@@ -5,18 +5,30 @@ const styled_1 = require("../styled");
 exports.MobileAlertWrapper = styled_1.styled.div `
   display: none;
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    gap: ${({ theme }) => theme.spacing(2)};
 
     margin: ${({ theme }) => theme.spacing(3, 4, 0, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+
+    &:empty {
+      display: none;
+    }
   }
 `;
 exports.DesktopAlertWrapper = styled_1.styled.div `
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
 
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }

package/node/components/PageLayoutContainer/PageLayoutContainer.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayoutContainer = 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");
 exports.PageLayoutContainer = (0, react_1.forwardRef)(({ children, className }, forwardedRef) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, constants_1.pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
 });

package/node/components/PageLayoutSection/PageLayoutSection.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayoutSection = 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 cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -27,5 +27,5 @@ const sectionWrapperCva = (0, cva_1.cva)(constants_1.pageLayoutSectionClassnames
  * } />
  */
 exports.PageLayoutSection = (0, react_1.forwardRef)(({ children, className, isNoMobileSidePadding = false }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: (0, classNames_1.classNames)(className, constants_1.pageLayoutSectionClassnames.root), ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: (0, cn_1.cn)(className, constants_1.pageLayoutSectionClassnames.root), ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
 });

package/node/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.js

@@ -4,7 +4,7 @@ exports.PageLayoutSectionContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const PageContext_1 = require("../../PageContext");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
@@ -22,7 +22,7 @@ const styles_1 = require("./styles");
 const PageLayoutSectionContainer = ({ children, className, isShowDivider = false, }) => {
     const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
     const classes = (0, react_1.useMemo)(() => {
-        return (0, classNames_1.classNames)(className, {
+        return (0, cn_1.cn)(className, {
             [constants_1.pageLayoutSectionContainerClassnames.withAside]: hasAside,
             [constants_1.pageLayoutSectionContainerClassnames.withDivider]: isShowDivider,
         });

package/node/components/PagePinnableAside/PagePinnableAside.js

@@ -7,7 +7,7 @@ const MenuOnOutlineMd_1 = require("../../icons/MenuOnOutlineMd");
 const PageAside_1 = require("../PageAside");
 const styles_1 = require("../PageAside/styles");
 const PinButton_1 = require("../PinButton");
-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_2 = require("./styles");
@@ -25,6 +25,6 @@ const asideCva = (0, cva_1.cva)(constants_1.pinnableAsideClassnames.root, {
 const PagePinnableAside = ({ header, children, className, navigation, ...restProps }) => {
     const { isPinned, togglePin, pageHeaderContainer, isMobileNavigationVisible, } = (0, useLogic_1.useLogic)({ navigation, ...restProps });
     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: PageAside_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(PageAside_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_2.Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [(0, jsx_runtime_1.jsx)(styles_2.Dummy, { "$isPinned": isPinned, children: (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_2.Content, { "$isPinned": isPinned, className: (0, classNames_1.classNames)(className, constants_1.pinnableAsideClassnames.content), children: [(0, jsx_runtime_1.jsxs)(styles_2.ChildrenWrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] }), (0, jsx_runtime_1.jsx)(styles_2.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(styles_1.MobileAsideNavigation, { className: PageAside_1.pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && (0, jsx_runtime_1.jsx)(styles_1.MobileAsideHeader, { children: header }), (0, jsx_runtime_1.jsx)(PageAside_1.MobileAsideButton, { content: children }), (0, jsx_runtime_1.jsxs)(styles_2.Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [(0, jsx_runtime_1.jsx)(styles_2.Dummy, { "$isPinned": isPinned, children: (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_2.Content, { "$isPinned": isPinned, className: (0, cn_1.cn)(className, constants_1.pinnableAsideClassnames.content), children: [(0, jsx_runtime_1.jsxs)(styles_2.ChildrenWrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(styles_1.AsideHeader, { children: [header, (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), navigation, children] }), (0, jsx_runtime_1.jsx)(styles_2.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
 };
 exports.PagePinnableAside = PagePinnableAside;

package/node/components/PasswordField/PasswordField.js

@@ -8,7 +8,7 @@ const EyeOutlineMd_1 = require("../../icons/EyeOutlineMd");
 const IconButton_1 = require("../IconButton");
 const personalDataSecurity_1 = require("../personalDataSecurity");
 const TextField_1 = require("../TextField");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 exports.PasswordField = (0, react_1.forwardRef)(({ label, disabled = false, showSymbols = false, isHidePersonalData, inputProps, ...props }, ref) => {
     const [showPassword, setShowPassword] = (0, react_1.useState)(showSymbols);
     const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -21,7 +21,7 @@ exports.PasswordField = (0, react_1.forwardRef)(({ label, disabled = false, show
     });
     return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { inputProps: {
             ...inputProps,
-            className: (0, classNames_1.classNames)(inputProps?.className, hidePersonalDataClassname),
+            className: (0, cn_1.cn)(inputProps?.className, hidePersonalDataClassname),
         }, ref: ref, label: label, type: showPassword ? 'text' : 'password', disabled: disabled, InputProps: {
             endAdornment: ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, "aria-label": "\u041F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0432\u0438\u0434\u0438\u043C\u043E\u0441\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044F", onClick: handleClickShowPassword, onMouseDown: handleMouseDownPassword, children: showPassword ? ((0, jsx_runtime_1.jsx)(EyeCrossedOutlineMd_1.EyeCrossedOutlineMd, { id: "visibility-off" })) : ((0, jsx_runtime_1.jsx)(EyeOutlineMd_1.EyeOutlineMd, { id: "visibility-on" })) })),
         }, ...props }));

package/node/components/PdfViewer/PdfDocument/PdfDocument.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDFDocument = 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 PDFDocument = (props) => {
     const { documentRef, onAnimationEnd, isLoading } = (0, useLogic_1.useLogic)(props);
     const { enabledZoom, isCentered, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDocument, { ...restProps, "$isLoading": isLoading, className: (0, classNames_1.classNames)(constants_1.pdfViewerClassnames.document, {
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDocument, { ...restProps, "$isLoading": isLoading, className: (0, cn_1.cn)(constants_1.pdfViewerClassnames.document, {
             [constants_1.pdfViewerClassnames.zoom]: enabledZoom,
             [constants_1.pdfViewerClassnames.centered]: isCentered,
         }), inputRef: documentRef, onAnimationEnd: onAnimationEnd }));

package/node/components/PinButton/PinButton.js

@@ -5,12 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const PinOutlineMd_1 = require("../../icons/PinOutlineMd");
 const UnpinOutlineMd_1 = require("../../icons/UnpinOutlineMd");
 const Collapse_1 = require("../Collapse");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const PinButton = (props) => {
     const { isPinned, collapsedIn, isUseCollapse = true, className, ...restProps } = props;
     const PinIcon = isPinned ? UnpinOutlineMd_1.UnpinOutlineMd : PinOutlineMd_1.PinOutlineMd;
-    return ((0, jsx_runtime_1.jsx)(styles_1.TogglerButton, { startIcon: (0, jsx_runtime_1.jsx)(PinIcon, {}), variant: "text", className: (0, classNames_1.classNames)(className, constants_1.pinButtonClassnames.root), ...restProps, children: isUseCollapse ? ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: collapsedIn, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(styles_1.Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' }) })) : ((0, jsx_runtime_1.jsx)(styles_1.Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' })) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.TogglerButton, { startIcon: (0, jsx_runtime_1.jsx)(PinIcon, {}), variant: "text", className: (0, cn_1.cn)(className, constants_1.pinButtonClassnames.root), ...restProps, children: isUseCollapse ? ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: collapsedIn, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(styles_1.Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' }) })) : ((0, jsx_runtime_1.jsx)(styles_1.Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' })) }));
 };
 exports.PinButton = PinButton;

package/node/components/Radio/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, disabled = false, isError = false, onChange: propsOnChange, className: propClassNames, name, style, inputRef, value, id, ...restProps }) => {
     const [isChecked, setIsChecked] = (0, react_1.useState)(checked);
@@ -14,7 +14,7 @@ const useLogic = ({ checked = false, disabled = false, isError = false, onChange
         propsOnChange?.(event, event.target.checked);
         setIsChecked(event.target.checked);
     };
-    const className = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.radioClassnames.root, isChecked ? constants_1.radioClassnames.checked : '', disabled ? constants_1.radioClassnames.disabled : '', propClassNames), [isChecked, disabled, propClassNames]);
+    const className = (0, react_1.useMemo)(() => (0, cn_1.cn)(constants_1.radioClassnames.root, isChecked ? constants_1.radioClassnames.checked : '', disabled ? constants_1.radioClassnames.disabled : '', propClassNames), [isChecked, disabled, propClassNames]);
     return {
         onChange,
         isChecked,

package/node/components/RadioCard/RadioCard.js

@@ -4,11 +4,11 @@ exports.RadioCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RadioGroup_1 = require("../RadioGroup");
-const classNames_1 = require("../utils/classNames");
+const cn_1 = require("../utils/cn");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const RadioCard = ({ id, disabled: propsIsDisabled, className, header, children, value, ...props }) => {
     const { isError, value: groupValue, name, onChange, disabled, } = (0, react_1.useContext)(RadioGroup_1.RadioGroupContext);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.radioCardClassnames.root), "$isError": isError, "$isChecked": groupValue === value, "$isDisabled": disabled || propsIsDisabled, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledRadio, { disabled: disabled || propsIsDisabled, checked: groupValue === value, name: name, onChange: (event) => onChange?.(event, event.target.value), value: value, ...props }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { className: constants_1.radioCardClassnames.content, children: [(0, jsx_runtime_1.jsx)("div", { children: header }), (0, jsx_runtime_1.jsx)("div", { children: children })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, cn_1.cn)(className, constants_1.radioCardClassnames.root), "$isError": isError, "$isChecked": groupValue === value, "$isDisabled": disabled || propsIsDisabled, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledRadio, { disabled: disabled || propsIsDisabled, checked: groupValue === value, name: name, onChange: (event) => onChange?.(event, event.target.value), value: value, ...props }), (0, jsx_runtime_1.jsxs)(styles_1.Content, { className: constants_1.radioCardClassnames.content, children: [(0, jsx_runtime_1.jsx)("div", { children: header }), (0, jsx_runtime_1.jsx)("div", { children: children })] })] }));
 };
 exports.RadioCard = RadioCard;

package/node/components/SearchField/SearchField.js

@@ -5,14 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
 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");
 exports.SearchField = (0, react_1.forwardRef)((props, ref) => {
     const { onChange, onClearValue, restProps, isLoading, inputRef, value, disabled, isClearButtonDisabled, onBlur, fullWidth, inputComponent, placeholder, hideHelperText, } = (0, useLogic_1.useLogic)(props);
     const RenderComponent = inputComponent || TextField_1.TextField;
-    return ((0, jsx_runtime_1.jsx)(styles_1.TextFieldRoot, { "$isFullWidth": fullWidth, children: (0, jsx_runtime_1.jsx)(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: (0, jsx_runtime_1.jsx)(styles_1.SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: (0, jsx_runtime_1.jsx)(styles_1.EndAdornmentWrapper, { className: (0, classNames_1.classNames)({
+    return ((0, jsx_runtime_1.jsx)(styles_1.TextFieldRoot, { "$isFullWidth": fullWidth, children: (0, jsx_runtime_1.jsx)(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: (0, jsx_runtime_1.jsx)(styles_1.SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: (0, jsx_runtime_1.jsx)(styles_1.EndAdornmentWrapper, { className: (0, cn_1.cn)({
                     [constants_1.searchFieldClassnames.endAdornmentVisible]: !isClearButtonDisabled,
                 }), children: isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}) })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
 });

package/node/components/StaticCalendar/StaticDaysCalendar/StaticDaysCalendar.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useId_1 = require("../../useId");
 const checkIsDeepEqual_1 = require("../../utils/checkIsDeepEqual");
-const classNames_1 = require("../../utils/classNames");
+const cn_1 = require("../../utils/cn");
 const date_1 = require("../../utils/date");
 const constants_1 = require("./constants");
 const DayButton_1 = require("./DayButton");
@@ -33,7 +33,7 @@ const StaticDaysCalendarInner = (0, react_1.memo)(({ minDate, maxDate, selectedD
         productionCalendarStorage,
     ]);
     const checkRenderRequirements = (0, react_1.useCallback)((item) => hideOutOfAvailableRangeElements ? !item.isOutOfAvailableRange : true, [hideOutOfAvailableRangeElements]);
-    return ((0, jsx_runtime_1.jsxs)("article", { className: (0, classNames_1.classNames)(className, constants_1.staticDaysCalendarClassnames.container), children: [(0, jsx_runtime_1.jsx)(Head_1.Head, { className: constants_1.staticDaysCalendarClassnames.head, isMondayFirst: isMondayFirst, hasHolidays: Boolean(productionCalendarStorage) }), (0, jsx_runtime_1.jsx)(styles_1.Body, { role: "grid", className: constants_1.staticDaysCalendarClassnames.grid, children: grid.map((item, index) => checkRenderRequirements(item) ? ((0, jsx_runtime_1.jsx)(DayButton_1.DayButton, { className: constants_1.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 ((0, jsx_runtime_1.jsxs)("article", { className: (0, cn_1.cn)(className, constants_1.staticDaysCalendarClassnames.container), children: [(0, jsx_runtime_1.jsx)(Head_1.Head, { className: constants_1.staticDaysCalendarClassnames.head, isMondayFirst: isMondayFirst, hasHolidays: Boolean(productionCalendarStorage) }), (0, jsx_runtime_1.jsx)(styles_1.Body, { role: "grid", className: constants_1.staticDaysCalendarClassnames.grid, children: grid.map((item, index) => checkRenderRequirements(item) ? ((0, jsx_runtime_1.jsx)(DayButton_1.DayButton, { className: constants_1.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
                 (0, jsx_runtime_1.jsx)("div", {}, `${id}_${index}`))) })] }));
 }, (prev, next) => (0, checkIsDeepEqual_1.checkIsDeepEqual)({

package/node/components/SvgIcon/SvgIcon.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SvgIcon = 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 styles_1 = require("./styles");
@@ -17,6 +17,6 @@ const svgCva = (0, cva_1.cva)(constants_1.svgIconClassnames.root, {
 });
 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 ((0, jsx_runtime_1.jsxs)(styles_1.StyledSvg, { className: (0, classNames_1.classNames)(className, svgCva({ size })), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: constants_1.SIZES[size] || width || '1em', height: constants_1.SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? (0, jsx_runtime_1.jsx)("title", { children: titleAccess }) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledSvg, { className: (0, cn_1.cn)(className, svgCva({ size })), viewBox: viewBox, "aria-hidden": titleAccess ? undefined : true, role: titleAccess ? 'img' : undefined, xmlns: xmlns, color: color, width: constants_1.SIZES[size] || width || '1em', height: constants_1.SIZES[size] || height || '1em', ...restProps, children: [children, titleAccess ? (0, jsx_runtime_1.jsx)("title", { children: titleAccess }) : null] }));
 };
 exports.SvgIcon = SvgIcon;