@astral/ui 4.91.2 → 4.92.1

package/components/Filename/Filename.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useHidePersonalData } from '../personalDataSecurity';
 import { Tooltip } from '../Tooltip';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { FileBaseName, FileSuffix, StyledTypography } from './styles';
 import { useLogic } from './useLogic';
 export const Filename = forwardRef((props, forwardedRef) => {
@@ -14,5 +14,5 @@ export const Filename = forwardRef((props, forwardedRef) => {
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData,
     });
-    return (_jsx(Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: classNames(tooltipProps?.className, hidePersonalDataClassname), children: _jsxs(StyledTypography, { "$align": align, variant: variant, className: classNames(className, hidePersonalDataClassname), ...restProps, children: [_jsx(FileBaseName, { ...baseNameProps }), _jsx(FileSuffix, { children: suffixWithExtension })] }) }));
+    return (_jsx(Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: cn(tooltipProps?.className, hidePersonalDataClassname), children: _jsxs(StyledTypography, { "$align": align, variant: variant, className: cn(className, hidePersonalDataClassname), ...restProps, children: [_jsx(FileBaseName, { ...baseNameProps }), _jsx(FileSuffix, { children: suffixWithExtension })] }) }));
 });

package/components/GuidTypography/GuidTypography.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CopyTypography } from '../CopyTypography';
 import { OverflowTypography } from '../OverflowTypography';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { useLogic } from './useLogic';
 export const GuidTypography = (props) => {
     const { className, tooltipProps, canCopy, copyParams, restProps, resolvedCopyText, hidePersonalDataClassname, } = useLogic(props);
     if (canCopy) {
         return (_jsx(CopyTypography, { isShowCopyText: true, copyText: resolvedCopyText, tooltipProps: {
                 ...tooltipProps,
-                className: classNames(tooltipProps?.className, hidePersonalDataClassname),
-            }, ...copyParams, children: _jsx(OverflowTypography, { visibleLastSymbolsCount: 4, className: classNames(className, hidePersonalDataClassname), tooltipProps: { title: undefined }, ...restProps }) }));
+                className: cn(tooltipProps?.className, hidePersonalDataClassname),
+            }, ...copyParams, children: _jsx(OverflowTypography, { visibleLastSymbolsCount: 4, className: cn(className, hidePersonalDataClassname), tooltipProps: { title: undefined }, ...restProps }) }));
     }
-    return (_jsx(OverflowTypography, { visibleLastSymbolsCount: 4, className: classNames(className, hidePersonalDataClassname), tooltipProps: {
+    return (_jsx(OverflowTypography, { visibleLastSymbolsCount: 4, className: cn(className, hidePersonalDataClassname), tooltipProps: {
             ...tooltipProps,
-            className: classNames(tooltipProps?.className, hidePersonalDataClassname),
+            className: cn(tooltipProps?.className, hidePersonalDataClassname),
         }, ...restProps }));
 };

package/components/HintPopover/HintPopover.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { useViewportType } from '../useViewportType';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { hintPopoverClassnames } from './constants';
 import { ActionRow, Body, CloseButton, StyledHintPopover, Title, } from './styles';
@@ -19,5 +19,5 @@ const hintPopoverCva = cva(hintPopoverClassnames.root, {
  */
 export const HintPopover = ({ variant = 'dark', title, action, onClose, contentRef, children, className, ...restProps }) => {
     const { isMobile } = useViewportType();
-    return (_jsx(StyledHintPopover, { ...restProps, className: classNames(className, hintPopoverCva({ variant })), hasArrow: true, disableMobileDrawer: true, onClose: onClose, children: _jsxs(Body, { ref: contentRef, tabIndex: -1, children: [_jsx(CloseButton, { variant: "text", onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: _jsx(CrossOutlineMd, {}) }), title && (_jsx(Title, { component: "div", variant: isMobile ? 'h5' : 'h4', children: title })), children, action && _jsx(ActionRow, { children: action })] }) }));
+    return (_jsx(StyledHintPopover, { ...restProps, className: cn(className, hintPopoverCva({ variant })), hasArrow: true, disableMobileDrawer: true, onClose: onClose, children: _jsxs(Body, { ref: contentRef, tabIndex: -1, children: [_jsx(CloseButton, { variant: "text", onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: _jsx(CrossOutlineMd, {}) }), title && (_jsx(Title, { component: "div", variant: isMobile ? 'h5' : 'h4', children: title })), children, action && _jsx(ActionRow, { children: action })] }) }));
 };

package/components/IconButton/IconButton.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonVariants } from '../Button';
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { iconButtonClassnames } from './constants';
 import { StyledButton } from './styles';
 const UnwrappedIconButton = (props, ref) => {
     const { variant = ButtonVariants.Contained, children, className, ...restProps } = props;
-    return (_jsx(StyledButton, { variant: variant, className: classNames(iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
+    return (_jsx(StyledButton, { variant: variant, className: cn(iconButtonClassnames.root, className), ...restProps, ref: ref, children: children }));
 };
 export const IconButton = forwardRefWithGeneric(UnwrappedIconButton);

package/components/Loader/Loader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { loaderClassnames } from './constants';
 import { StyledSvgIcon, Wrapper } from './styles';
 export const Loader = ({ size = 'medium', color = 'primary', className, style, }) => {
-    return (_jsx(Wrapper, { className: classNames(className, loaderClassnames.root), "$size": size, "$color": color, "data-color": color, role: "progressbar", style: style, children: _jsx(StyledSvgIcon, { viewBox: "22 22 44 44", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("circle", { cx: "44", cy: "44", r: "20.2", fill: "none", stroke: "currentColor", strokeWidth: "3.6", strokeDasharray: "80, 200", strokeDashoffset: "0" }) }) }));
+    return (_jsx(Wrapper, { className: cn(className, loaderClassnames.root), "$size": size, "$color": color, "data-color": color, role: "progressbar", style: style, children: _jsx(StyledSvgIcon, { viewBox: "22 22 44 44", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("circle", { cx: "44", cy: "44", r: "20.2", fill: "none", stroke: "currentColor", strokeWidth: "3.6", strokeDasharray: "80, 200", strokeDashoffset: "0" }) }) }));
 };

package/components/MenuItem/MenuItem.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import MuiMenuItem from '@mui/material/MenuItem';
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
 import { Tooltip } from '../Tooltip';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { menuItemClassnames } from './constants';
 const InnerMenuItem = (props, ref) => {
     const { disabledReason, disabled, component = 'div', title, tooltipPlacement = 'left', note, className, ...rest } = props;
-    return (_jsx("li", { children: _jsx(Tooltip, { title: disabled ? disabledReason : note, placement: tooltipPlacement, withoutContainer: !disabled, children: _jsx(MuiMenuItem, { className: classNames(menuItemClassnames.root, className), ...rest, disabled: disabled, title: title, ref: ref, component: component }) }, title) }));
+    return (_jsx("li", { children: _jsx(Tooltip, { title: disabled ? disabledReason : note, placement: tooltipPlacement, withoutContainer: !disabled, children: _jsx(MuiMenuItem, { className: cn(menuItemClassnames.root, className), ...rest, disabled: disabled, title: title, ref: ref, component: component }) }, title) }));
 };
 export const MenuItem = forwardRefWithGeneric(InnerMenuItem);

package/components/MinimalisticPagination/MinimalisticPagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NextOutlineMd } from '../../icons/NextOutlineMd';
 import { PreviousOutlineMd } from '../../icons/PreviousOutlineMd';
 import { IconButton } from '../IconButton';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { minimalisticPaginationClassnames } from './constants';
 import { PageItem, PaginationWrapper } from './styles';
@@ -17,5 +17,5 @@ const rootCva = cva(minimalisticPaginationClassnames.root, {
 export const MinimalisticPagination = (props) => {
     const { previousButtonProps, nextButtonProps } = useLogic(props);
     const { page, className, isDisabled } = props;
-    return (_jsxs(PaginationWrapper, { className: classNames(className, rootCva({ isDisabled })), "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [_jsx(IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...previousButtonProps, children: _jsx(PreviousOutlineMd, {}) }), _jsx(PageItem, { component: "span", children: page }), _jsx(IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...nextButtonProps, children: _jsx(NextOutlineMd, {}) })] }));
+    return (_jsxs(PaginationWrapper, { className: cn(className, rootCva({ isDisabled })), "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [_jsx(IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u043F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...previousButtonProps, children: _jsx(PreviousOutlineMd, {}) }), _jsx(PageItem, { component: "span", children: page }), _jsx(IconButton, { "aria-label": "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043D\u0430 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443", variant: "text", ...nextButtonProps, children: _jsx(NextOutlineMd, {}) })] }));
 };

package/components/NewPopover/NewPopover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { popoverClassnames } from './constants';
 import { AnimatedWrapper, InnerContainer, PopoverArrow, StyledMuiPopper, } from './styles';
@@ -29,5 +29,5 @@ export const NewPopover = ({ children, onClose, isOpen, title, className, style,
                 disableAutoFocus,
             }, children: children }));
     }
-    return (_jsx(StyledMuiPopper, { className: classNames(popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: _jsxs(AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), style: animatedWrapperStyle, onAnimationEnd: handleAnimationEnd, children: [hasArrow && (_jsx(PopoverArrow, { ref: setArrowElement, className: popoverClassnames.arrow })), _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children })] }) }));
+    return (_jsx(StyledMuiPopper, { className: cn(popoverClassnames.root, className), style: style, open: shouldRender, placement: placement, anchorEl: anchorEl, disablePortal: disablePortal, modifiers: mergedModifiers, children: _jsxs(AnimatedWrapper, { className: animatedWrapperCva({ isOpen: isOpened, hasArrow }), style: animatedWrapperStyle, onAnimationEnd: handleAnimationEnd, children: [hasArrow && (_jsx(PopoverArrow, { ref: setArrowElement, className: popoverClassnames.arrow })), _jsx(InnerContainer, { ref: setContainerRef, tabIndex: -1, className: popoverClassnames.innerContainer, children: children })] }) }));
 };

package/components/NewStepper/NewStepper.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { stepperClassnames } from './constants';
 import { StepperContextProvider } from './StepperContext';
@@ -22,7 +22,7 @@ const stepper = cva(stepperClassnames.root, {
 });
 export const NewStepper = (props) => {
     const { containerRef, stepperConnector, stepperAlternativeLabel, activeStep, onClickPrevStep, onClickStep, orientation, className, children, } = useLogic(props);
-    return (_jsx(StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: _jsx(Wrapper, { ref: containerRef, role: "group", className: classNames(stepper({
+    return (_jsx(StepperContextProvider, { orientation: orientation, activeStep: activeStep, connector: stepperConnector, alternativeLabel: stepperAlternativeLabel, onClickPrevStep: onClickPrevStep, onClickStep: onClickStep, children: _jsx(Wrapper, { ref: containerRef, role: "group", className: cn(stepper({
                 alternativeLabel: stepperAlternativeLabel,
                 connector: stepperConnector,
                 orientation,

package/components/NewStepper/Step/Step.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 { StepIcon } from '../StepIcon';
 import { stepClassnames } from './constants';
@@ -55,7 +55,7 @@ const connector = cva(stepClassnames.connector, {
 export const Step = (props) => {
     const { isCompletedStep, isRenderButton, handleClick, connectorVariant, alternativeLabel, orientation, children, isError, isWarning, icon, className, label, isRenderVerticalLineConnector, isRenderHorizontalLineConnector, isDisabled, isActiveStep, } = useLogic(props);
     const StepContent = isRenderButton ? StyledButton : StepContentWrapper;
-    return (_jsxs(Wrapper, { "data-active-step": isActiveStep, className: classNames(step({
+    return (_jsxs(Wrapper, { "data-active-step": isActiveStep, className: cn(step({
             isError,
             isCompleted: isCompletedStep,
             connector: connectorVariant,
@@ -63,7 +63,7 @@ export const Step = (props) => {
             alternativeLabel,
             orientation,
             isDisabled,
-        }), className), children: [_jsxs(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: classNames(stepClassnames.content, {
+        }), className), children: [_jsxs(StepContent, { variant: "text", onClick: handleClick, disabled: isDisabled, className: cn(stepClassnames.content, {
                     [stepClassnames.active]: isActiveStep,
                 }), children: [_jsxs(LabelWrapper, { className: stepClassnames.labelContainer, children: [_jsx(IconWrapper, { className: stepClassnames.iconContainer, children: _jsx(StepIcon, { icon: icon, isActive: isActiveStep, isCompleted: isCompletedStep, isError: isError, isWarning: isWarning }) }), _jsx(Label, { label: label, isActiveStep: isActiveStep }), connectorVariant === 'arrow' && (_jsx(ArrowConnector, { className: connector({
                                     connector: connectorVariant,

package/components/Notification/NotificationStackContainer/NotificationStackContainer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { injectStyle } from 'react-toastify-next/dist/inject-style';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { NOTIFY_CONTAINER_ID, NOTIFY_POSITIONS, NOTIFY_STATIC_CONTAINER_ID, notifyClassnames, } from '../constants';
 import { CloseButton, Inner, StaticInner, Wrapper } from './styles';
 import { useLogic } from './useLogic';
@@ -11,9 +11,9 @@ export const NotificationStackContainer = ({ containerId = NOTIFY_CONTAINER_ID,
     const { isVisibleCloseButton, isStackExpanded, isStartedClosingNotify, closeAll, } = useLogic({
         containerId,
     });
-    return (_jsxs(Wrapper, { className: classNames({
+    return (_jsxs(Wrapper, { className: cn({
             [notifyClassnames.container]: isStackExpanded,
-        }), children: [_jsx("div", { className: notifyClassnames.stackHost, children: _jsx(Inner, { ...props, className: classNames(notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }) }), isVisibleCloseButton && (_jsx(CloseButton, { variant: "light", color: "grey", className: classNames({
+        }), children: [_jsx("div", { className: notifyClassnames.stackHost, children: _jsx(Inner, { ...props, className: cn(notifyClassnames.stack, props.className), ...{ stacked: true }, containerId: containerId, pauseOnFocusLoss: true, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }) }), isVisibleCloseButton && (_jsx(CloseButton, { variant: "light", color: "grey", className: cn({
                     [notifyClassnames.closeButtonAnimationOut]: isStartedClosingNotify,
                 }), onClick: closeAll, children: "\u0421\u043A\u0440\u044B\u0442\u044C \u0432\u0441\u0435" })), _jsx(StaticInner, { containerId: staticContainerId, position: NOTIFY_POSITIONS.BOTTOM_RIGHT, newestOnTop: false, closeOnClick: false, draggable: false, rtl: false, closeButton: false, bodyClassName: `${notifyClassnames.body}`, toastClassName: notifyClassnames.root, progressClassName: `${notifyClassnames.progress}` }), bannerContainer] }));
 };

package/components/PageAside/PageAside.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { pageAsideClassnames } from './constants';
 import { usePageAside } from './hooks';
@@ -18,5 +18,5 @@ export const PageAside = ({ children, className, header, navigation, }) => {
         navigation,
     });
     return (_jsxs(_Fragment, { children: [isMobileNavigationVisible &&
-                createPortal(_jsx(MobileAsideNavigation, { className: pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && _jsx(MobileAsideHeader, { children: header }), _jsx(MobileAsideButton, { content: children }), _jsxs(Wrapper, { className: classNames(className, asideCva({ withHeader: Boolean(header) })), children: [header && (_jsxs(AsideHeader, { children: [header, _jsx(StyledDivider, {})] })), navigation, children] })] }));
+                createPortal(_jsx(MobileAsideNavigation, { className: pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && _jsx(MobileAsideHeader, { children: header }), _jsx(MobileAsideButton, { content: children }), _jsxs(Wrapper, { className: cn(className, asideCva({ withHeader: Boolean(header) })), children: [header && (_jsxs(AsideHeader, { children: [header, _jsx(StyledDivider, {})] })), navigation, children] })] }));
 };

package/components/PageAsideNavigation/PageAsideNavigation.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 { pageAsideNavigationClassnames } from './constants';
 import { AddonNavigationWrapper, NavigationList, Wrapper } from './styles';
 export const PageAsideNavigation = ({ addonNavigation, children, className, addonNavigationPosition = 'start', }) => {
     const { containerRef } = useScrollToActiveElement();
-    return (_jsxs(Wrapper, { className: classNames(pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && (_jsx(AddonNavigationWrapper, { children: addonNavigation })), _jsx(NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && (_jsx(AddonNavigationWrapper, { children: addonNavigation }))] }));
+    return (_jsxs(Wrapper, { className: cn(pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && (_jsx(AddonNavigationWrapper, { children: addonNavigation })), _jsx(NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && (_jsx(AddonNavigationWrapper, { children: addonNavigation }))] }));
 };

package/components/PageContent/PageContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement, useContext } from 'react';
 import { PageContext } from '../PageContext';
 import { PageLayoutFooter, } from '../PageLayoutFooter';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { pageContentClassnames } from './constants';
 import { Content, Wrapper } from './styles';
@@ -22,7 +22,7 @@ const contentCva = cva(pageContentClassnames.content, {
 export const PageContent = forwardRef((props, forwardedRef) => {
     const { hasAside } = useContext(PageContext);
     const { className, children, isFullHeight = true, footer, scrollRef, header, isUnconstrained = false, } = props;
-    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentCva({
+    return (_jsxs(Wrapper, { className: cn(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentCva({
                     isUnconstrained,
                     hasHeader: Boolean(header),
                     hasAside,

package/components/PageContent/styles.js

@@ -1,5 +1,5 @@
 import { selfContainedClassname } from '../constants';
-import { pdfViewerClassnames } from '../PdfViewer';
+import { pdfViewerClassnames } from '../PdfViewer/constants';
 import { styled } from '../styled';
 import { PAGE_CONTENT_ANIMATION, pageContentClassnames } from './constants';
 export const Wrapper = styled('article', {

package/components/PageHeader/HeaderContent/HeaderContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Breadcrumbs } from '../../Breadcrumbs';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { pageHeaderClassnames } from '../constants';
 import { PageActions } from '../PageActions';
 import { Title } from '../Title';
@@ -14,5 +14,5 @@ export const HeaderContent = ({ backButton, description, subheader, breadcrumbs,
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), tabs && _jsx(TabsWrapper, { children: tabs }), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: cn(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), tabs && _jsx(TabsWrapper, { children: tabs }), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
 };

package/components/PageHeader/HeaderContent/styles.js

@@ -6,6 +6,10 @@ export const BreadcrumbsWrapper = styled.div `
 
   margin-bottom: ${({ theme }) => theme.spacing(1)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
@@ -16,6 +20,10 @@ export const TabsWrapper = styled.div `
 
   padding-top:  ${({ theme }) => theme.spacing(4)};
 
+  &:empty {
+    display: none;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 0, 4, 0)};
 
@@ -30,6 +38,10 @@ export const PageSubheader = 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/components/PageHeader/PageActions/useLogic/useLogic.js

@@ -2,13 +2,13 @@ import { useContext, useMemo } from 'react';
 import { useActionsState } from '../../../ActionGroup';
 import { NextFeatureFlagsContext } from '../../../ConfigProvider/NextFeatureFlagsContext';
 import { DashboardContext } from '../../../DashboardContext';
-import { classNames } from '../../../utils/classNames';
+import { cn } from '../../../utils/cn';
 import { actionsClassnames, focusModeButtonClassnames } from '../constants';
 export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = false, }) => {
     const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = useContext(NextFeatureFlagsContext);
     const { setFocusedMode, isFocusedMode } = useContext(DashboardContext);
     const { disabledAction } = useActionsState({ main, secondary });
-    const buttonClassnames = useMemo(() => classNames({
+    const buttonClassnames = useMemo(() => cn({
         [focusModeButtonClassnames.isShowOnDesktop]: showFocusModeButtonOnDesktop,
         [focusModeButtonClassnames.isShowOnLaptop]: showFocusModeButtonOnLaptop,
     }), [showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop]);
@@ -52,7 +52,7 @@ export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLapt
         return allActions;
     }, [main, secondary, secondaryVisible, disabledAction]);
     const classnames = useMemo(() => {
-        return classNames({
+        return cn({
             [actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop && collapsedActions.length > 0,
         });
     }, [withCollapseOnLaptop]);

package/components/PageHeader/PageHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { pageHeaderClassnames } from './constants';
 import { HeaderContent } from './HeaderContent';
@@ -36,9 +36,9 @@ export const PageHeader = (props) => {
     return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
                     hasBackButton: Boolean(backButton),
-                }), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(rootCva({
+                }), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: cn(rootCva({
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: cn(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/components/PageHeader/styles.js

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

package/components/PageLayout/PageLayout.js

@@ -6,13 +6,13 @@ import { PageContextProvider } from '../PageContext';
 import { PageHeader } from '../PageHeader';
 import { PageLayoutContainer, pageLayoutClassnames, } from '../PageLayoutContainer';
 import { LoadingPlaceholder } from '../placeholders/LoadingPlaceholder';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { DesktopAlertWrapper, LoaderWrapper, MobileAlertWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const PageLayout = (props) => {
     const { header, content, aside, footer, className, alert, isLoading } = props;
     const { hasAside, ref } = useLogic(props);
-    return (_jsxs(PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: classNames(className, {
+    return (_jsxs(PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: cn(className, {
                     [pageLayoutClassnames.withoutHeader]: !header,
                 }), ref: ref, children: [alert && _jsx(MobileAlertWrapper, { children: alert }), isValidElement(header)
                         ? header

package/components/PageLayout/styles.js

@@ -2,18 +2,30 @@ import { styled } from '../styled';
 export const MobileAlertWrapper = 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;
+    }
   }
 `;
 export const DesktopAlertWrapper = 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/components/PageLayoutContainer/PageLayoutContainer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { pageLayoutClassnames } from './constants';
 import { StyledPaper, Wrapper } from './styles';
 export const PageLayoutContainer = forwardRef(({ children, className }, forwardedRef) => {
-    return (_jsx(StyledPaper, { variant: "outlined", children: _jsx(Wrapper, { className: classNames(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
+    return (_jsx(StyledPaper, { variant: "outlined", children: _jsx(Wrapper, { className: cn(className, pageLayoutClassnames.root), ref: forwardedRef, children: children }) }));
 });

package/components/PageLayoutSection/PageLayoutSection.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 { pageLayoutSectionClassnames } from './constants';
 import { Section, SectionWrapper } from './styles';
@@ -24,5 +24,5 @@ const sectionWrapperCva = cva(pageLayoutSectionClassnames.wrapper, {
  * } />
  */
 export const PageLayoutSection = forwardRef(({ children, className, isNoMobileSidePadding = false }, ref) => {
-    return (_jsx(Section, { className: classNames(className, pageLayoutSectionClassnames.root), ref: ref, children: _jsx(SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
+    return (_jsx(Section, { className: cn(className, pageLayoutSectionClassnames.root), ref: ref, children: _jsx(SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
 });

package/components/PageLayoutSection/PageLayoutSectionContainer/PageLayoutSectionContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from 'react';
 import { PageContext } from '../../PageContext';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { pageLayoutSectionContainerClassnames } from './constants';
 import { SectionContainer } from './styles';
 /**
@@ -19,7 +19,7 @@ import { SectionContainer } from './styles';
 export const PageLayoutSectionContainer = ({ children, className, isShowDivider = false, }) => {
     const { hasAside } = useContext(PageContext);
     const classes = useMemo(() => {
-        return classNames(className, {
+        return cn(className, {
             [pageLayoutSectionContainerClassnames.withAside]: hasAside,
             [pageLayoutSectionContainerClassnames.withDivider]: isShowDivider,
         });

package/components/PagePinnableAside/PagePinnableAside.js

@@ -4,7 +4,7 @@ import { MenuOnOutlineMd } from '../../icons/MenuOnOutlineMd';
 import { MobileAsideButton, pageAsideClassnames } from '../PageAside';
 import { AsideHeader, MobileAsideHeader, MobileAsideNavigation, StyledDivider, } from '../PageAside/styles';
 import { PinButton } from '../PinButton';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { cva } from '../utils/cva';
 import { pinnableAsideClassnames } from './constants';
 import { Aside, ChildrenWrapper, Content, Dummy, Footer } from './styles';
@@ -22,5 +22,5 @@ const asideCva = cva(pinnableAsideClassnames.root, {
 export const PagePinnableAside = ({ header, children, className, navigation, ...restProps }) => {
     const { isPinned, togglePin, pageHeaderContainer, isMobileNavigationVisible, } = useLogic({ navigation, ...restProps });
     return (_jsxs(_Fragment, { children: [isMobileNavigationVisible &&
-                createPortal(_jsx(MobileAsideNavigation, { className: pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && _jsx(MobileAsideHeader, { children: header }), _jsx(MobileAsideButton, { content: children }), _jsxs(Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [_jsx(Dummy, { "$isPinned": isPinned, children: _jsx(MenuOnOutlineMd, {}) }), _jsxs(Content, { "$isPinned": isPinned, className: classNames(className, pinnableAsideClassnames.content), children: [_jsxs(ChildrenWrapper, { children: [header && (_jsxs(AsideHeader, { children: [header, _jsx(StyledDivider, {})] })), navigation, children] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
+                createPortal(_jsx(MobileAsideNavigation, { className: pageAsideClassnames.mobileNavigation, children: navigation }), pageHeaderContainer), header && _jsx(MobileAsideHeader, { children: header }), _jsx(MobileAsideButton, { content: children }), _jsxs(Aside, { "$isPinned": isPinned, className: asideCva({ withHeader: Boolean(header) }), children: [_jsx(Dummy, { "$isPinned": isPinned, children: _jsx(MenuOnOutlineMd, {}) }), _jsxs(Content, { "$isPinned": isPinned, className: cn(className, pinnableAsideClassnames.content), children: [_jsxs(ChildrenWrapper, { children: [header && (_jsxs(AsideHeader, { children: [header, _jsx(StyledDivider, {})] })), navigation, children] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, isUseCollapse: false, onClick: togglePin }) })] })] })] }));
 };

package/components/PasswordField/PasswordField.js

@@ -5,7 +5,7 @@ import { EyeOutlineMd } from '../../icons/EyeOutlineMd';
 import { IconButton } from '../IconButton';
 import { useHidePersonalData } from '../personalDataSecurity';
 import { TextField } from '../TextField';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 export const PasswordField = forwardRef(({ label, disabled = false, showSymbols = false, isHidePersonalData, inputProps, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState(showSymbols);
     const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -18,7 +18,7 @@ export const PasswordField = forwardRef(({ label, disabled = false, showSymbols
     });
     return (_jsx(TextField, { inputProps: {
             ...inputProps,
-            className: classNames(inputProps?.className, hidePersonalDataClassname),
+            className: cn(inputProps?.className, hidePersonalDataClassname),
         }, ref: ref, label: label, type: showPassword ? 'text' : 'password', disabled: disabled, InputProps: {
             endAdornment: (_jsx(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 ? (_jsx(EyeCrossedOutlineMd, { id: "visibility-off" })) : (_jsx(EyeOutlineMd, { id: "visibility-on" })) })),
         }, ...props }));

package/components/PdfViewer/PdfDocument/PdfDocument.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { pdfViewerClassnames } from '../constants';
 import { StyledDocument } from './styles';
 import { useLogic } from './useLogic';
 export const PDFDocument = (props) => {
     const { documentRef, onAnimationEnd, isLoading } = useLogic(props);
     const { enabledZoom, isCentered, ...restProps } = props;
-    return (_jsx(StyledDocument, { ...restProps, "$isLoading": isLoading, className: classNames(pdfViewerClassnames.document, {
+    return (_jsx(StyledDocument, { ...restProps, "$isLoading": isLoading, className: cn(pdfViewerClassnames.document, {
             [pdfViewerClassnames.zoom]: enabledZoom,
             [pdfViewerClassnames.centered]: isCentered,
         }), inputRef: documentRef, onAnimationEnd: onAnimationEnd }));

package/components/PinButton/PinButton.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { PinOutlineMd } from '../../icons/PinOutlineMd';
 import { UnpinOutlineMd } from '../../icons/UnpinOutlineMd';
 import { Collapse } from '../Collapse';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { pinButtonClassnames } from './constants';
 import { Content, TogglerButton } from './styles';
 export const PinButton = (props) => {
     const { isPinned, collapsedIn, isUseCollapse = true, className, ...restProps } = props;
     const PinIcon = isPinned ? UnpinOutlineMd : PinOutlineMd;
-    return (_jsx(TogglerButton, { startIcon: _jsx(PinIcon, {}), variant: "text", className: classNames(className, pinButtonClassnames.root), ...restProps, children: isUseCollapse ? (_jsx(Collapse, { in: collapsedIn, orientation: "horizontal", children: _jsx(Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' }) })) : (_jsx(Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' })) }));
+    return (_jsx(TogglerButton, { startIcon: _jsx(PinIcon, {}), variant: "text", className: cn(className, pinButtonClassnames.root), ...restProps, children: isUseCollapse ? (_jsx(Collapse, { in: collapsedIn, orientation: "horizontal", children: _jsx(Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' }) })) : (_jsx(Content, { children: isPinned ? 'Открепить меню' : 'Закрепить меню' })) }));
 };

package/components/Radio/useLogic/useLogic.js

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useUpdateEffect } from '../../useUpdateEffect';
-import { classNames } from '../../utils/classNames';
+import { cn } from '../../utils/cn';
 import { radioClassnames } from '../constants';
 export const useLogic = ({ checked = false, disabled = false, isError = false, onChange: propsOnChange, className: propClassNames, name, style, inputRef, value, id, ...restProps }) => {
     const [isChecked, setIsChecked] = useState(checked);
@@ -11,7 +11,7 @@ export const useLogic = ({ checked = false, disabled = false, isError = false, o
         propsOnChange?.(event, event.target.checked);
         setIsChecked(event.target.checked);
     };
-    const className = useMemo(() => classNames(radioClassnames.root, isChecked ? radioClassnames.checked : '', disabled ? radioClassnames.disabled : '', propClassNames), [isChecked, disabled, propClassNames]);
+    const className = useMemo(() => cn(radioClassnames.root, isChecked ? radioClassnames.checked : '', disabled ? radioClassnames.disabled : '', propClassNames), [isChecked, disabled, propClassNames]);
     return {
         onChange,
         isChecked,

package/components/RadioCard/RadioCard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { RadioGroupContext } from '../RadioGroup';
-import { classNames } from '../utils/classNames';
+import { cn } from '../utils/cn';
 import { radioCardClassnames } from './constants';
 import { Content, StyledRadio, Wrapper } from './styles';
 export const RadioCard = ({ id, disabled: propsIsDisabled, className, header, children, value, ...props }) => {
     const { isError, value: groupValue, name, onChange, disabled, } = useContext(RadioGroupContext);
-    return (_jsxs(Wrapper, { className: classNames(className, radioCardClassnames.root), "$isError": isError, "$isChecked": groupValue === value, "$isDisabled": disabled || propsIsDisabled, children: [_jsx(StyledRadio, { disabled: disabled || propsIsDisabled, checked: groupValue === value, name: name, onChange: (event) => onChange?.(event, event.target.value), value: value, ...props }), _jsxs(Content, { className: radioCardClassnames.content, children: [_jsx("div", { children: header }), _jsx("div", { children: children })] })] }));
+    return (_jsxs(Wrapper, { className: cn(className, radioCardClassnames.root), "$isError": isError, "$isChecked": groupValue === value, "$isDisabled": disabled || propsIsDisabled, children: [_jsx(StyledRadio, { disabled: disabled || propsIsDisabled, checked: groupValue === value, name: name, onChange: (event) => onChange?.(event, event.target.value), value: value, ...props }), _jsxs(Content, { className: radioCardClassnames.content, children: [_jsx("div", { children: header }), _jsx("div", { children: children })] })] }));
 };