@astral/ui 4.53.1 → 4.53.2

package/components/Alert/Alert.js

@@ -7,9 +7,29 @@ import { SuccessFillMd } from '../../icons/SuccessFillMd';
 import { WarningFillMd } from '../../icons/WarningFillMd';
 import { Collapse } from '../Collapse';
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { alertClassnames } from './constants';
 import { Content, IconWrapper, StyledGrid, StyledIconButton, StyledTypography, Title, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
+const alertCva = cva(alertClassnames.root, {
+    variants: {
+        hasTitle: {
+            true: alertClassnames.hasTitle,
+        },
+        hasCloseButton: {
+            true: alertClassnames.hasCloseButton,
+        },
+        hasActions: {
+            true: alertClassnames.hasActions,
+        },
+        severity: {
+            info: alertClassnames.severityInfo,
+            error: alertClassnames.severityError,
+            success: alertClassnames.severitySuccess,
+            warning: alertClassnames.severityWarning,
+        },
+    },
+});
 export const Alert = forwardRef(({ children, title, closeText = 'Скрыть', display = true, actions, onClose, severity = 'info', style, className, icon, unmountOnExit, }, ref) => {
     const { shouldRenderParagraph } = useLogic({ children });
     const renderCloseButton = () => {
@@ -22,7 +42,12 @@ export const Alert = forwardRef(({ children, title, closeText = 'Скрыть',
             success: _jsx(SuccessFillMd, {}),
             warning: _jsx(WarningFillMd, {}),
         };
-        return (_jsx(IconWrapper, { "$hasTitle": Boolean(title), "$severity": severity, "$hasCloseButton": Boolean(onClose), className: alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
+        return (_jsx(IconWrapper, { className: alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
     };
-    return (_jsx(Collapse, { in: display, unmountOnExit: unmountOnExit, children: _jsxs(Wrapper, { style: style, className: classNames(className, alertClassnames.root), role: "alert", ref: ref, "$severity": severity, "$hasTitle": Boolean(title), "$hasCloseButton": Boolean(onClose), "$hasActions": Boolean(actions), children: [_jsxs(Content, { "$hasTitle": Boolean(title), "$hasCloseButton": Boolean(onClose), className: alertClassnames.contentWrapper, children: [renderIcon(), title && (_jsx(Title, { variant: "h5", "$hasCloseButton": Boolean(onClose), className: alertClassnames.title, children: title })), onClose && renderCloseButton(), _jsx(StyledTypography, { component: shouldRenderParagraph ? 'p' : 'div', "$hasTitle": Boolean(title), "$hasCloseButton": Boolean(onClose), "$hasActions": Boolean(actions), className: alertClassnames.content, children: children })] }), actions && (_jsx(StyledGrid, { container: true, spacing: 4, children: actions }))] }) }));
+    return (_jsx(Collapse, { in: display, unmountOnExit: unmountOnExit, children: _jsxs(Wrapper, { style: style, className: classNames(alertCva({
+                hasTitle: Boolean(title),
+                hasCloseButton: Boolean(onClose),
+                hasActions: Boolean(actions),
+                severity,
+            }), className), role: "alert", ref: ref, children: [_jsxs(Content, { className: alertClassnames.contentWrapper, children: [renderIcon(), title && (_jsx(Title, { variant: "h5", className: alertClassnames.title, children: title })), onClose && renderCloseButton(), _jsx(StyledTypography, { component: shouldRenderParagraph ? 'p' : 'div', className: alertClassnames.content, children: children })] }), actions && (_jsx(StyledGrid, { container: true, spacing: 4, children: actions }))] }) }));
 });

package/components/Alert/constants.d.ts

@@ -5,4 +5,11 @@ export declare const alertClassnames: {
     closeButton: string;
     contentWrapper: string;
     content: string;
+    hasTitle: string;
+    hasCloseButton: string;
+    hasActions: string;
+    severityInfo: string;
+    severityError: string;
+    severitySuccess: string;
+    severityWarning: string;
 };

package/components/Alert/constants.js

@@ -6,4 +6,11 @@ export const alertClassnames = {
     closeButton: createUIKitClassname('alert__close-button'),
     contentWrapper: createUIKitClassname('alert__content-wrapper'),
     content: createUIKitClassname('alert__content'),
+    hasTitle: createUIKitClassname('alert_has-title'),
+    hasCloseButton: createUIKitClassname('alert_has-close-button'),
+    hasActions: createUIKitClassname('alert_has-actions'),
+    severityInfo: createUIKitClassname('alert_severity_info'),
+    severityError: createUIKitClassname('alert_severity_error'),
+    severitySuccess: createUIKitClassname('alert_severity_success'),
+    severityWarning: createUIKitClassname('alert_severity_warning'),
 };

package/components/Alert/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { AlertSeverity } from './types';
 export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("../Grid/styles").StyledGridProps, {}, {}>;
@@ -15,26 +14,14 @@ export declare const StyledIconButton: import("../styled").StyledComponent<Omit<
 export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $hasTitle?: boolean | undefined;
-    $severity: AlertSeverity;
-    $hasCloseButton?: boolean | undefined;
-    $hasActions?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $severity: AlertSeverity;
-    $hasTitle?: boolean | undefined;
-    $hasCloseButton?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Content: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $hasTitle: boolean;
-    $hasCloseButton?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTypography: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
@@ -45,10 +32,6 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $hasTitle?: boolean | undefined;
-    $hasCloseButton?: boolean | undefined;
-    $hasActions?: boolean | undefined;
 }, {}, {}>;
 export declare const Title: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
@@ -59,6 +42,4 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $hasCloseButton?: boolean | undefined;
 }, {}, {}>;

package/components/Alert/styles.js

@@ -3,87 +3,7 @@ import { IconButton } from '../IconButton';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
-const getBgColor = (theme, severity) => {
-    const bgColors = {
-        info: theme.palette.primary[100],
-        success: theme.palette.success[100],
-        error: theme.palette.error[100],
-        warning: theme.palette.warning[100],
-    };
-    return bgColors[severity];
-};
-const getBorderColor = (theme, severity) => {
-    const borderColors = {
-        info: theme.palette.primary[300],
-        success: theme.palette.success[300],
-        error: theme.palette.error[300],
-        warning: theme.palette.warning[300],
-    };
-    return borderColors[severity];
-};
-const getIconColor = (theme, severity) => {
-    const iconColor = {
-        info: theme.palette.primary[800],
-        success: theme.palette.success[800],
-        error: theme.palette.error[800],
-        warning: theme.palette.warning[800],
-    };
-    return iconColor[severity];
-};
-const getPadding = (theme, hasActions = false, hasCloseButton = false, hasTitle = false) => {
-    const paddingMap = {
-        '111': [6, 6, 8, 8],
-        '110': [6, 8, 8, 8],
-        '101': [6, 6, 6, 8],
-        '100': [6, 8, 6, 8],
-        '011': [6, 6, 8, 8],
-        '010': [9, 8, 8, 8],
-        '001': [6, 6, 6, 8],
-        '000': [9, 8, 9, 8],
-    };
-    const key = `${hasTitle ? 1 : 0}${hasActions ? 1 : 0}${hasCloseButton ? 1 : 0}`;
-    const [top, right, bottom, left] = paddingMap[key];
-    return theme.microSpacing(top, right, bottom, left);
-};
-const getMobilePadding = (theme, hasActions = false, hasCloseButton = false, hasTitle = false) => {
-    const mobilePaddingMap = {
-        '111': [4, 4, 10, 8],
-        '110': [8, 8, 10, 8],
-        '101': [4, 4, 8, 8],
-        '100': [8, 8, 8, 8],
-        '011': [4, 4, 10, 8],
-        '010': [8, 8, 10, 8],
-        '001': [4, 4, 9, 8],
-        '000': [8, 8, 9, 8],
-    };
-    const key = `${hasTitle ? 1 : 0}${hasActions ? 1 : 0}${hasCloseButton ? 1 : 0}`;
-    const [top, right, bottom, left] = mobilePaddingMap[key];
-    return theme.microSpacing(top, right, bottom, left);
-};
-const getMobileContentPadding = (theme, hasTitle, hasCloseButton) => {
-    if (hasTitle) {
-        return '0';
-    }
-    return hasCloseButton ? theme.microSpacing(5) : theme.microSpacing(1);
-};
-const getContentPadding = (theme, hasTitle, hasCloseButton, hasActions) => {
-    if (hasTitle || !hasCloseButton) {
-        return '0';
-    }
-    return hasActions ? theme.microSpacing(3, 0, 0) : theme.microSpacing(3, 0);
-};
-const getMobileIconPadding = (theme, hasTitle, hasCloseButton) => {
-    if (hasTitle || !hasCloseButton) {
-        return '0';
-    }
-    return theme.spacing(2);
-};
-const getContentGridRows = (hasTitle, hasCloseButton) => {
-    if (hasCloseButton) {
-        return hasTitle ? 'minmax(32px, auto) auto' : 'minmax(32px, auto)';
-    }
-    return hasTitle ? 'minmax(32px, auto) auto' : 'minmax(20px, auto)';
-};
+import { alertClassnames } from './constants';
 export const StyledGrid = styled(Grid) `
   grid-auto-flow: column;
   grid-column: 2 / -1;
@@ -100,32 +20,223 @@ export const StyledIconButton = styled(IconButton) `
 export const Wrapper = styled.div `
   display: grid;
   grid-template-columns: 20px 1fr 32px;
-  gap: ${({ theme, $hasTitle }) => $hasTitle ? theme.spacing(3, 2) : theme.microSpacing(7, 4)};
+  gap: ${({ theme }) => theme.microSpacing(7, 4)};
 
-  padding: ${({ theme, $hasCloseButton, $hasActions, $hasTitle }) => getPadding(theme, $hasActions, $hasCloseButton, $hasTitle)};
+  padding: ${({ theme }) => theme.microSpacing(9, 8, 9, 8)};
 
-  background-color: ${({ theme, $severity }) => getBgColor(theme, $severity)};
-  border: 1px solid
-    ${({ theme, $severity }) => getBorderColor(theme, $severity)};
+  border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.shape.medium};
 
+  &.${alertClassnames.severityInfo} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+    border-color: ${({ theme }) => theme.palette.primary[300]};
+
+    .${alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
+  }
+
+  &.${alertClassnames.severitySuccess} {
+    background-color: ${({ theme }) => theme.palette.success[100]};
+    border-color: ${({ theme }) => theme.palette.success[300]};
+
+    .${alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.success[800]};
+    }
+  }
+
+  &.${alertClassnames.severityError} {
+    background-color: ${({ theme }) => theme.palette.error[100]};
+    border-color: ${({ theme }) => theme.palette.error[300]};
+
+    .${alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.error[800]};
+    }
+  }
+
+  &.${alertClassnames.severityWarning} {
+    background-color: ${({ theme }) => theme.palette.warning[100]};
+    border-color: ${({ theme }) => theme.palette.warning[300]};
+
+    .${alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.warning[800]};
+    }
+  }
+
+  /* hasCloseButton only */
+  &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
+  }
+
+  /* hasActions only */
+  &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasCloseButton}) {
+    padding: ${({ theme }) => theme.microSpacing(9, 8, 8, 8)};
+  }
+
+  /* hasActions and hasCloseButton */
+  &.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
+  }
+
+  /* hasTitle only */
+  &.${alertClassnames.hasTitle}:not(.${alertClassnames.hasActions}):not(.${alertClassnames.hasCloseButton}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 8, 6, 8)};
+  }
+
+  /* hasTitle and hasCloseButton */
+  &.${alertClassnames.hasTitle}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasActions}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
+  }
+
+  /* hasTitle and hasActions */
+  &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}:not(.${alertClassnames.hasCloseButton}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 8, 8, 8)};
+  }
+
+  /* all three */
+  &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton} {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
+  }
+
+  &.${alertClassnames.hasTitle} {
+    gap: ${({ theme }) => theme.spacing(3, 2)};
+
+    .${alertClassnames.contentWrapper} {
+      grid-template-rows: minmax(32px, auto) auto;
+      align-items: center;
+    }
+
+    .${alertClassnames.content} {
+      grid-row: 2;
+    }
+  }
+
+  &:not(.${alertClassnames.hasTitle}) {
+    .${alertClassnames.contentWrapper} {
+      align-items: flex-start;
+    }
+  }
+
+  &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
+    .${alertClassnames.iconWrapper} {
+      padding-top: ${({ theme }) => theme.microSpacing(3)};
+    }
+  }
+
+  &.${alertClassnames.hasCloseButton} {
+    .${alertClassnames.title} {
+      grid-column: 2;
+    }
+
+    &:not(.${alertClassnames.hasTitle}) {
+      .${alertClassnames.content} {
+        grid-column: 2;
+      }
+
+      .${alertClassnames.contentWrapper} {
+        grid-template-rows: minmax(32px, auto);
+      }
+
+      .${alertClassnames.content} {
+        padding: ${({ theme }) => theme.microSpacing(3, 0)};
+      }
+    }
+
+    &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}) {
+      .${alertClassnames.content} {
+        padding: ${({ theme }) => theme.microSpacing(3, 0, 0)};
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-row-gap: ${({ theme }) => theme.spacing(4)};
     grid-template-columns: 24px 1fr 40px;
 
-    padding: ${({ theme, $hasCloseButton, $hasActions, $hasTitle }) => getMobilePadding(theme, $hasActions, $hasCloseButton, $hasTitle)};
+    padding: ${({ theme }) => theme.microSpacing(8, 8, 9, 8)};
+
+    .${alertClassnames.contentWrapper} {
+      grid-template-columns: 24px 1fr 40px;
+    }
+
+    /* hasCloseButton only */
+    &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}) {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 9, 8)};
+    }
+
+    /* hasActions only */
+    &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasCloseButton}) {
+      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
+    }
+
+    /* hasActions and hasCloseButton */
+    &.${alertClassnames.hasCloseButton}.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}) {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
+    }
+
+    /* hasTitle only */
+    &.${alertClassnames.hasTitle}:not(.${alertClassnames.hasActions}):not(.${alertClassnames.hasCloseButton}) {
+      padding: ${({ theme }) => theme.microSpacing(8, 8, 8, 8)};
+    }
+
+    /* hasTitle and hasCloseButton */
+    &.${alertClassnames.hasTitle}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasActions}) {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 8, 8)};
+    }
+
+    /* hasTitle and hasActions */
+    &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}:not(.${alertClassnames.hasCloseButton}) {
+      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
+    }
+
+    /* нет модификаторов */
+    &:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}):not(.${alertClassnames.hasCloseButton}) {
+      .${alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+      }
+    }
+
+    /* all three */
+    &.${alertClassnames.hasTitle}.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton} {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
+    }
+
+    /* for close button without title */
+    &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
+      .${alertClassnames.iconWrapper} {
+        padding-top: ${({ theme }) => theme.spacing(2)};
+      }
+    }
+
+    /* close button only case */
+    &.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasActions}) {
+      .${alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(5)};
+        padding-bottom: 0;
+      }
+    }
+
+    /* actions only case */
+    &.${alertClassnames.hasActions}:not(.${alertClassnames.hasTitle}):not(.${alertClassnames.hasCloseButton}) {
+      .${alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+        padding-bottom: 0;
+      }
+    }
+
+    /* actions + close button case */
+    &.${alertClassnames.hasActions}.${alertClassnames.hasCloseButton}:not(.${alertClassnames.hasTitle}) {
+      .${alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(5)};
+        padding-bottom: 0;
+      }
+    }
   }
 `;
 export const IconWrapper = styled.div `
   height: 20px;
-  padding-top: ${({ $hasTitle, theme, $hasCloseButton }) => $hasTitle || !$hasCloseButton ? '0' : theme.microSpacing(3)};
-
-  color: ${({ theme, $severity }) => getIconColor(theme, $severity)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    height: 24px;
-    padding-top: ${({ $hasTitle, theme, $hasCloseButton }) => getMobileIconPadding(theme, $hasTitle, $hasCloseButton)};
-  }
+  color: inherit;
 
   & .${svgIconClassnames.root} {
     font-size: 20px;
@@ -134,34 +245,30 @@ export const IconWrapper = styled.div `
       font-size: 24px;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 24px;
+  }
 `;
 export const Content = styled.div `
   display: grid;
   grid-column: 1 / -1;
   grid-gap: ${({ theme }) => theme.microSpacing(1, 4)};
   grid-template-columns: 20px 1fr 32px;
-  grid-template-rows: ${({ $hasTitle, $hasCloseButton }) => getContentGridRows($hasTitle, $hasCloseButton)};
-  align-items: ${({ $hasTitle }) => ($hasTitle ? 'center' : 'unset')};
+  grid-template-rows: minmax(20px, auto);
+  align-items: unset;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    grid-template-columns: 24px 1fr 40px;
-  }
 `;
-export const StyledTypography = styled(Typography, {
-    shouldForwardProp: (prop) => !['$hasTitle', '$hasCloseButton', '$hasActions'].includes(prop),
-}) `
-  grid-column: ${({ $hasTitle, $hasCloseButton }) => $hasTitle || !$hasCloseButton ? '2 / -1' : '2'};
-  grid-row: ${({ $hasTitle }) => ($hasTitle ? '2' : '1')};
+export const StyledTypography = styled(Typography) `
+  grid-column: 2 / -1;
+  grid-row: 1;
 
-  padding: ${({ $hasTitle, theme, $hasCloseButton, $hasActions }) => getContentPadding(theme, $hasTitle, $hasCloseButton, $hasActions)};
+  padding: 0;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding-top: ${({ $hasTitle, theme, $hasCloseButton }) => getMobileContentPadding(theme, $hasTitle, $hasCloseButton)};
-    padding-bottom: 0;
+  .${alertClassnames.hasTitle} & {
+    grid-row: 2;
   }
 `;
-export const Title = styled(Typography, {
-    shouldForwardProp: (prop) => !['$hasTitle', '$hasCloseButton'].includes(prop),
-}) `
-  grid-column: ${({ $hasCloseButton }) => ($hasCloseButton ? '2' : '2 / -1')};
+export const Title = styled(Typography) `
+  grid-column: 2 / -1;
 `;

package/components/ComplianceStatus/styles.js

@@ -20,7 +20,6 @@ export const Wrapper = styled.article `
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
   background-color: inherit;
-
   border-radius: ${({ theme }) => theme.shape.medium};
 
   &.${complianceStatusClassnames.contained} {

package/components/DashboardAlert/DashboardAlert.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '../Typography';
+import { classNames } from '../utils/classNames';
+import { dashboardAlertClassnames } from './constants';
 import { StyledAlert, StyledButton } from './styles';
 /**
  * Компонент отображения уведомления на всех страницах приложения
  */
 export const DashboardAlert = (props) => {
-    const { linkButtonProps, children, isShow, ...restProps } = props;
+    const { linkButtonProps, children, isShow, className, ...restProps } = props;
     const { name, color: linkButtonColor, ...restButtonProps } = linkButtonProps || {};
-    return (_jsx(StyledAlert, { display: isShow, ...restProps, children: _jsxs(Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && (_jsx(StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
+    return (_jsx(StyledAlert, { className: classNames(dashboardAlertClassnames.root, className), display: isShow, ...restProps, children: _jsxs(Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && (_jsx(StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
 };

package/components/DashboardAlert/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const dashboardAlertClassnames: {
+    root: string;
+};

package/components/DashboardAlert/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const dashboardAlertClassnames = {
+    root: createUIKitClassname('dashboard-alert'),
+};

package/components/DashboardAlert/styles.js

@@ -2,39 +2,41 @@ import { Alert, alertClassnames } from '../Alert';
 import { Button } from '../Button';
 import { svgIconClassnames } from '../SvgIcon';
 import { styled } from '../styled';
+import { dashboardAlertClassnames } from './constants';
 export const StyledAlert = styled(Alert) `
-  &.${alertClassnames.root} {
+  &.${alertClassnames.root}.${dashboardAlertClassnames.root}.${dashboardAlertClassnames.root} {
     grid-template-columns: 24px 1fr 32px;
 
     margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(3, 4)};
-  }
 
-  .${alertClassnames.contentWrapper} {
-    grid-template-columns: 24px 1fr 32px;
-    grid-template-rows: minmax(32px, auto);
-    align-items: center;
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      align-items: flex-start;
+    .${alertClassnames.contentWrapper} {
+      grid-template-columns: 24px 1fr 32px;
+      grid-template-rows: minmax(32px, auto);
+      align-items: center;
+
+      ${({ theme }) => theme.breakpoints.down('sm')} {
+        align-items: flex-start;
+      }
     }
-  }
 
-  .${alertClassnames.iconWrapper} {
-    height: 24px;
-    padding: 0;
+    .${alertClassnames.iconWrapper} {
+      height: 24px;
+      padding: 0;
 
-    & .${svgIconClassnames.root} {
-      font-size: 24px;
+      & .${svgIconClassnames.root} {
+        font-size: 24px;
+      }
     }
-  }
 
-  .${alertClassnames.content} {
-    padding: 0;
-  }
+    .${alertClassnames.content} {
+      padding: 0;
+    }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+    }
   }
 `;
 export const StyledButton = styled(Button) `

package/node/components/Alert/Alert.js

@@ -10,9 +10,29 @@ const SuccessFillMd_1 = require("../../icons/SuccessFillMd");
 const WarningFillMd_1 = require("../../icons/WarningFillMd");
 const Collapse_1 = require("../Collapse");
 const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const alertCva = (0, cva_1.cva)(constants_1.alertClassnames.root, {
+    variants: {
+        hasTitle: {
+            true: constants_1.alertClassnames.hasTitle,
+        },
+        hasCloseButton: {
+            true: constants_1.alertClassnames.hasCloseButton,
+        },
+        hasActions: {
+            true: constants_1.alertClassnames.hasActions,
+        },
+        severity: {
+            info: constants_1.alertClassnames.severityInfo,
+            error: constants_1.alertClassnames.severityError,
+            success: constants_1.alertClassnames.severitySuccess,
+            warning: constants_1.alertClassnames.severityWarning,
+        },
+    },
+});
 exports.Alert = (0, react_1.forwardRef)(({ children, title, closeText = 'Скрыть', display = true, actions, onClose, severity = 'info', style, className, icon, unmountOnExit, }, ref) => {
     const { shouldRenderParagraph } = (0, useLogic_1.useLogic)({ children });
     const renderCloseButton = () => {
@@ -25,7 +45,12 @@ exports.Alert = (0, react_1.forwardRef)(({ children, title, closeText = 'Скр
             success: (0, jsx_runtime_1.jsx)(SuccessFillMd_1.SuccessFillMd, {}),
             warning: (0, jsx_runtime_1.jsx)(WarningFillMd_1.WarningFillMd, {}),
         };
-        return ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { "$hasTitle": Boolean(title), "$severity": severity, "$hasCloseButton": Boolean(onClose), className: constants_1.alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
     };
-    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: display, unmountOnExit: unmountOnExit, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { style: style, className: (0, classNames_1.classNames)(className, constants_1.alertClassnames.root), role: "alert", ref: ref, "$severity": severity, "$hasTitle": Boolean(title), "$hasCloseButton": Boolean(onClose), "$hasActions": Boolean(actions), children: [(0, jsx_runtime_1.jsxs)(styles_1.Content, { "$hasTitle": Boolean(title), "$hasCloseButton": Boolean(onClose), className: constants_1.alertClassnames.contentWrapper, children: [renderIcon(), title && ((0, jsx_runtime_1.jsx)(styles_1.Title, { variant: "h5", "$hasCloseButton": Boolean(onClose), className: constants_1.alertClassnames.title, children: title })), onClose && renderCloseButton(), (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { component: shouldRenderParagraph ? 'p' : 'div', "$hasTitle": Boolean(title), "$hasCloseButton": Boolean(onClose), "$hasActions": Boolean(actions), className: constants_1.alertClassnames.content, children: children })] }), actions && ((0, jsx_runtime_1.jsx)(styles_1.StyledGrid, { container: true, spacing: 4, children: actions }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: display, unmountOnExit: unmountOnExit, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { style: style, className: (0, classNames_1.classNames)(alertCva({
+                hasTitle: Boolean(title),
+                hasCloseButton: Boolean(onClose),
+                hasActions: Boolean(actions),
+                severity,
+            }), className), role: "alert", ref: ref, children: [(0, jsx_runtime_1.jsxs)(styles_1.Content, { className: constants_1.alertClassnames.contentWrapper, children: [renderIcon(), title && ((0, jsx_runtime_1.jsx)(styles_1.Title, { variant: "h5", className: constants_1.alertClassnames.title, children: title })), onClose && renderCloseButton(), (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { component: shouldRenderParagraph ? 'p' : 'div', className: constants_1.alertClassnames.content, children: children })] }), actions && ((0, jsx_runtime_1.jsx)(styles_1.StyledGrid, { container: true, spacing: 4, children: actions }))] }) }));
 });

package/node/components/Alert/constants.d.ts

@@ -5,4 +5,11 @@ export declare const alertClassnames: {
     closeButton: string;
     contentWrapper: string;
     content: string;
+    hasTitle: string;
+    hasCloseButton: string;
+    hasActions: string;
+    severityInfo: string;
+    severityError: string;
+    severitySuccess: string;
+    severityWarning: string;
 };

package/node/components/Alert/constants.js

@@ -9,4 +9,11 @@ exports.alertClassnames = {
     closeButton: (0, createUIKitClassname_1.createUIKitClassname)('alert__close-button'),
     contentWrapper: (0, createUIKitClassname_1.createUIKitClassname)('alert__content-wrapper'),
     content: (0, createUIKitClassname_1.createUIKitClassname)('alert__content'),
+    hasTitle: (0, createUIKitClassname_1.createUIKitClassname)('alert_has-title'),
+    hasCloseButton: (0, createUIKitClassname_1.createUIKitClassname)('alert_has-close-button'),
+    hasActions: (0, createUIKitClassname_1.createUIKitClassname)('alert_has-actions'),
+    severityInfo: (0, createUIKitClassname_1.createUIKitClassname)('alert_severity_info'),
+    severityError: (0, createUIKitClassname_1.createUIKitClassname)('alert_severity_error'),
+    severitySuccess: (0, createUIKitClassname_1.createUIKitClassname)('alert_severity_success'),
+    severityWarning: (0, createUIKitClassname_1.createUIKitClassname)('alert_severity_warning'),
 };

package/node/components/Alert/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { AlertSeverity } from './types';
 export declare const StyledGrid: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & import("../Grid/styles").StyledGridProps, {}, {}>;
@@ -15,26 +14,14 @@ export declare const StyledIconButton: import("@emotion/styled/dist/declarations
 export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $hasTitle?: boolean | undefined;
-    $severity: AlertSeverity;
-    $hasCloseButton?: boolean | undefined;
-    $hasActions?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $severity: AlertSeverity;
-    $hasTitle?: boolean | undefined;
-    $hasCloseButton?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Content: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $hasTitle: boolean;
-    $hasCloseButton?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledTypography: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
@@ -45,10 +32,6 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $hasTitle?: boolean | undefined;
-    $hasCloseButton?: boolean | undefined;
-    $hasActions?: boolean | undefined;
 }, {}, {}>;
 export declare const Title: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
@@ -59,6 +42,4 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
     withoutCalt?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    $hasCloseButton?: boolean | undefined;
 }, {}, {}>;

package/node/components/Alert/styles.js

@@ -6,87 +6,7 @@ const IconButton_1 = require("../IconButton");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
-const getBgColor = (theme, severity) => {
-    const bgColors = {
-        info: theme.palette.primary[100],
-        success: theme.palette.success[100],
-        error: theme.palette.error[100],
-        warning: theme.palette.warning[100],
-    };
-    return bgColors[severity];
-};
-const getBorderColor = (theme, severity) => {
-    const borderColors = {
-        info: theme.palette.primary[300],
-        success: theme.palette.success[300],
-        error: theme.palette.error[300],
-        warning: theme.palette.warning[300],
-    };
-    return borderColors[severity];
-};
-const getIconColor = (theme, severity) => {
-    const iconColor = {
-        info: theme.palette.primary[800],
-        success: theme.palette.success[800],
-        error: theme.palette.error[800],
-        warning: theme.palette.warning[800],
-    };
-    return iconColor[severity];
-};
-const getPadding = (theme, hasActions = false, hasCloseButton = false, hasTitle = false) => {
-    const paddingMap = {
-        '111': [6, 6, 8, 8],
-        '110': [6, 8, 8, 8],
-        '101': [6, 6, 6, 8],
-        '100': [6, 8, 6, 8],
-        '011': [6, 6, 8, 8],
-        '010': [9, 8, 8, 8],
-        '001': [6, 6, 6, 8],
-        '000': [9, 8, 9, 8],
-    };
-    const key = `${hasTitle ? 1 : 0}${hasActions ? 1 : 0}${hasCloseButton ? 1 : 0}`;
-    const [top, right, bottom, left] = paddingMap[key];
-    return theme.microSpacing(top, right, bottom, left);
-};
-const getMobilePadding = (theme, hasActions = false, hasCloseButton = false, hasTitle = false) => {
-    const mobilePaddingMap = {
-        '111': [4, 4, 10, 8],
-        '110': [8, 8, 10, 8],
-        '101': [4, 4, 8, 8],
-        '100': [8, 8, 8, 8],
-        '011': [4, 4, 10, 8],
-        '010': [8, 8, 10, 8],
-        '001': [4, 4, 9, 8],
-        '000': [8, 8, 9, 8],
-    };
-    const key = `${hasTitle ? 1 : 0}${hasActions ? 1 : 0}${hasCloseButton ? 1 : 0}`;
-    const [top, right, bottom, left] = mobilePaddingMap[key];
-    return theme.microSpacing(top, right, bottom, left);
-};
-const getMobileContentPadding = (theme, hasTitle, hasCloseButton) => {
-    if (hasTitle) {
-        return '0';
-    }
-    return hasCloseButton ? theme.microSpacing(5) : theme.microSpacing(1);
-};
-const getContentPadding = (theme, hasTitle, hasCloseButton, hasActions) => {
-    if (hasTitle || !hasCloseButton) {
-        return '0';
-    }
-    return hasActions ? theme.microSpacing(3, 0, 0) : theme.microSpacing(3, 0);
-};
-const getMobileIconPadding = (theme, hasTitle, hasCloseButton) => {
-    if (hasTitle || !hasCloseButton) {
-        return '0';
-    }
-    return theme.spacing(2);
-};
-const getContentGridRows = (hasTitle, hasCloseButton) => {
-    if (hasCloseButton) {
-        return hasTitle ? 'minmax(32px, auto) auto' : 'minmax(32px, auto)';
-    }
-    return hasTitle ? 'minmax(32px, auto) auto' : 'minmax(20px, auto)';
-};
+const constants_1 = require("./constants");
 exports.StyledGrid = (0, styled_1.styled)(Grid_1.Grid) `
   grid-auto-flow: column;
   grid-column: 2 / -1;
@@ -103,32 +23,223 @@ exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
 exports.Wrapper = styled_1.styled.div `
   display: grid;
   grid-template-columns: 20px 1fr 32px;
-  gap: ${({ theme, $hasTitle }) => $hasTitle ? theme.spacing(3, 2) : theme.microSpacing(7, 4)};
+  gap: ${({ theme }) => theme.microSpacing(7, 4)};
 
-  padding: ${({ theme, $hasCloseButton, $hasActions, $hasTitle }) => getPadding(theme, $hasActions, $hasCloseButton, $hasTitle)};
+  padding: ${({ theme }) => theme.microSpacing(9, 8, 9, 8)};
 
-  background-color: ${({ theme, $severity }) => getBgColor(theme, $severity)};
-  border: 1px solid
-    ${({ theme, $severity }) => getBorderColor(theme, $severity)};
+  border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.shape.medium};
 
+  &.${constants_1.alertClassnames.severityInfo} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+    border-color: ${({ theme }) => theme.palette.primary[300]};
+
+    .${constants_1.alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
+  }
+
+  &.${constants_1.alertClassnames.severitySuccess} {
+    background-color: ${({ theme }) => theme.palette.success[100]};
+    border-color: ${({ theme }) => theme.palette.success[300]};
+
+    .${constants_1.alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.success[800]};
+    }
+  }
+
+  &.${constants_1.alertClassnames.severityError} {
+    background-color: ${({ theme }) => theme.palette.error[100]};
+    border-color: ${({ theme }) => theme.palette.error[300]};
+
+    .${constants_1.alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.error[800]};
+    }
+  }
+
+  &.${constants_1.alertClassnames.severityWarning} {
+    background-color: ${({ theme }) => theme.palette.warning[100]};
+    border-color: ${({ theme }) => theme.palette.warning[300]};
+
+    .${constants_1.alertClassnames.iconWrapper} {
+      color: ${({ theme }) => theme.palette.warning[800]};
+    }
+  }
+
+  /* hasCloseButton only */
+  &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
+  }
+
+  /* hasActions only */
+  &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasCloseButton}) {
+    padding: ${({ theme }) => theme.microSpacing(9, 8, 8, 8)};
+  }
+
+  /* hasActions and hasCloseButton */
+  &.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
+  }
+
+  /* hasTitle only */
+  &.${constants_1.alertClassnames.hasTitle}:not(.${constants_1.alertClassnames.hasActions}):not(.${constants_1.alertClassnames.hasCloseButton}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 8, 6, 8)};
+  }
+
+  /* hasTitle and hasCloseButton */
+  &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasActions}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
+  }
+
+  /* hasTitle and hasActions */
+  &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasCloseButton}) {
+    padding: ${({ theme }) => theme.microSpacing(6, 8, 8, 8)};
+  }
+
+  /* all three */
+  &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton} {
+    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
+  }
+
+  &.${constants_1.alertClassnames.hasTitle} {
+    gap: ${({ theme }) => theme.spacing(3, 2)};
+
+    .${constants_1.alertClassnames.contentWrapper} {
+      grid-template-rows: minmax(32px, auto) auto;
+      align-items: center;
+    }
+
+    .${constants_1.alertClassnames.content} {
+      grid-row: 2;
+    }
+  }
+
+  &:not(.${constants_1.alertClassnames.hasTitle}) {
+    .${constants_1.alertClassnames.contentWrapper} {
+      align-items: flex-start;
+    }
+  }
+
+  &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
+    .${constants_1.alertClassnames.iconWrapper} {
+      padding-top: ${({ theme }) => theme.microSpacing(3)};
+    }
+  }
+
+  &.${constants_1.alertClassnames.hasCloseButton} {
+    .${constants_1.alertClassnames.title} {
+      grid-column: 2;
+    }
+
+    &:not(.${constants_1.alertClassnames.hasTitle}) {
+      .${constants_1.alertClassnames.content} {
+        grid-column: 2;
+      }
+
+      .${constants_1.alertClassnames.contentWrapper} {
+        grid-template-rows: minmax(32px, auto);
+      }
+
+      .${constants_1.alertClassnames.content} {
+        padding: ${({ theme }) => theme.microSpacing(3, 0)};
+      }
+    }
+
+    &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}) {
+      .${constants_1.alertClassnames.content} {
+        padding: ${({ theme }) => theme.microSpacing(3, 0, 0)};
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-row-gap: ${({ theme }) => theme.spacing(4)};
     grid-template-columns: 24px 1fr 40px;
 
-    padding: ${({ theme, $hasCloseButton, $hasActions, $hasTitle }) => getMobilePadding(theme, $hasActions, $hasCloseButton, $hasTitle)};
+    padding: ${({ theme }) => theme.microSpacing(8, 8, 9, 8)};
+
+    .${constants_1.alertClassnames.contentWrapper} {
+      grid-template-columns: 24px 1fr 40px;
+    }
+
+    /* hasCloseButton only */
+    &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}) {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 9, 8)};
+    }
+
+    /* hasActions only */
+    &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasCloseButton}) {
+      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
+    }
+
+    /* hasActions and hasCloseButton */
+    &.${constants_1.alertClassnames.hasCloseButton}.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}) {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
+    }
+
+    /* hasTitle only */
+    &.${constants_1.alertClassnames.hasTitle}:not(.${constants_1.alertClassnames.hasActions}):not(.${constants_1.alertClassnames.hasCloseButton}) {
+      padding: ${({ theme }) => theme.microSpacing(8, 8, 8, 8)};
+    }
+
+    /* hasTitle and hasCloseButton */
+    &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasActions}) {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 8, 8)};
+    }
+
+    /* hasTitle and hasActions */
+    &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasCloseButton}) {
+      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
+    }
+
+    /* нет модификаторов */
+    &:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}):not(.${constants_1.alertClassnames.hasCloseButton}) {
+      .${constants_1.alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+      }
+    }
+
+    /* all three */
+    &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton} {
+      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
+    }
+
+    /* for close button without title */
+    &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
+      .${constants_1.alertClassnames.iconWrapper} {
+        padding-top: ${({ theme }) => theme.spacing(2)};
+      }
+    }
+
+    /* close button only case */
+    &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}) {
+      .${constants_1.alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(5)};
+        padding-bottom: 0;
+      }
+    }
+
+    /* actions only case */
+    &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasCloseButton}) {
+      .${constants_1.alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(1)};
+        padding-bottom: 0;
+      }
+    }
+
+    /* actions + close button case */
+    &.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
+      .${constants_1.alertClassnames.content} {
+        padding-top: ${({ theme }) => theme.microSpacing(5)};
+        padding-bottom: 0;
+      }
+    }
   }
 `;
 exports.IconWrapper = styled_1.styled.div `
   height: 20px;
-  padding-top: ${({ $hasTitle, theme, $hasCloseButton }) => $hasTitle || !$hasCloseButton ? '0' : theme.microSpacing(3)};
-
-  color: ${({ theme, $severity }) => getIconColor(theme, $severity)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    height: 24px;
-    padding-top: ${({ $hasTitle, theme, $hasCloseButton }) => getMobileIconPadding(theme, $hasTitle, $hasCloseButton)};
-  }
+  color: inherit;
 
   & .${SvgIcon_1.svgIconClassnames.root} {
     font-size: 20px;
@@ -137,34 +248,30 @@ exports.IconWrapper = styled_1.styled.div `
       font-size: 24px;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 24px;
+  }
 `;
 exports.Content = styled_1.styled.div `
   display: grid;
   grid-column: 1 / -1;
   grid-gap: ${({ theme }) => theme.microSpacing(1, 4)};
   grid-template-columns: 20px 1fr 32px;
-  grid-template-rows: ${({ $hasTitle, $hasCloseButton }) => getContentGridRows($hasTitle, $hasCloseButton)};
-  align-items: ${({ $hasTitle }) => ($hasTitle ? 'center' : 'unset')};
+  grid-template-rows: minmax(20px, auto);
+  align-items: unset;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    grid-template-columns: 24px 1fr 40px;
-  }
 `;
-exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography, {
-    shouldForwardProp: (prop) => !['$hasTitle', '$hasCloseButton', '$hasActions'].includes(prop),
-}) `
-  grid-column: ${({ $hasTitle, $hasCloseButton }) => $hasTitle || !$hasCloseButton ? '2 / -1' : '2'};
-  grid-row: ${({ $hasTitle }) => ($hasTitle ? '2' : '1')};
+exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
+  grid-column: 2 / -1;
+  grid-row: 1;
 
-  padding: ${({ $hasTitle, theme, $hasCloseButton, $hasActions }) => getContentPadding(theme, $hasTitle, $hasCloseButton, $hasActions)};
+  padding: 0;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding-top: ${({ $hasTitle, theme, $hasCloseButton }) => getMobileContentPadding(theme, $hasTitle, $hasCloseButton)};
-    padding-bottom: 0;
+  .${constants_1.alertClassnames.hasTitle} & {
+    grid-row: 2;
   }
 `;
-exports.Title = (0, styled_1.styled)(Typography_1.Typography, {
-    shouldForwardProp: (prop) => !['$hasTitle', '$hasCloseButton'].includes(prop),
-}) `
-  grid-column: ${({ $hasCloseButton }) => ($hasCloseButton ? '2' : '2 / -1')};
+exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
+  grid-column: 2 / -1;
 `;

package/node/components/ComplianceStatus/styles.js

@@ -23,7 +23,6 @@ exports.Wrapper = styled_1.styled.article `
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
   background-color: inherit;
-
   border-radius: ${({ theme }) => theme.shape.medium};
 
   &.${constants_1.complianceStatusClassnames.contained} {

package/node/components/DashboardAlert/DashboardAlert.js

@@ -3,13 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardAlert = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Typography_1 = require("../Typography");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
  * Компонент отображения уведомления на всех страницах приложения
  */
 const DashboardAlert = (props) => {
-    const { linkButtonProps, children, isShow, ...restProps } = props;
+    const { linkButtonProps, children, isShow, className, ...restProps } = props;
     const { name, color: linkButtonColor, ...restButtonProps } = linkButtonProps || {};
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledAlert, { display: isShow, ...restProps, children: (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledAlert, { className: (0, classNames_1.classNames)(constants_1.dashboardAlertClassnames.root, className), display: isShow, ...restProps, children: (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
 };
 exports.DashboardAlert = DashboardAlert;

package/node/components/DashboardAlert/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const dashboardAlertClassnames: {
+    root: string;
+};

package/node/components/DashboardAlert/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dashboardAlertClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.dashboardAlertClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-alert'),
+};

package/node/components/DashboardAlert/styles.js

@@ -5,39 +5,41 @@ const Alert_1 = require("../Alert");
 const Button_1 = require("../Button");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.StyledAlert = (0, styled_1.styled)(Alert_1.Alert) `
-  &.${Alert_1.alertClassnames.root} {
+  &.${Alert_1.alertClassnames.root}.${constants_1.dashboardAlertClassnames.root}.${constants_1.dashboardAlertClassnames.root} {
     grid-template-columns: 24px 1fr 32px;
 
     margin-bottom: ${({ theme }) => theme.spacing(4)};
     padding: ${({ theme }) => theme.spacing(3, 4)};
-  }
 
-  .${Alert_1.alertClassnames.contentWrapper} {
-    grid-template-columns: 24px 1fr 32px;
-    grid-template-rows: minmax(32px, auto);
-    align-items: center;
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
-      align-items: flex-start;
+    .${Alert_1.alertClassnames.contentWrapper} {
+      grid-template-columns: 24px 1fr 32px;
+      grid-template-rows: minmax(32px, auto);
+      align-items: center;
+
+      ${({ theme }) => theme.breakpoints.down('sm')} {
+        align-items: flex-start;
+      }
     }
-  }
 
-  .${Alert_1.alertClassnames.iconWrapper} {
-    height: 24px;
-    padding: 0;
+    .${Alert_1.alertClassnames.iconWrapper} {
+      height: 24px;
+      padding: 0;
 
-    & .${SvgIcon_1.svgIconClassnames.root} {
-      font-size: 24px;
+      & .${SvgIcon_1.svgIconClassnames.root} {
+        font-size: 24px;
+      }
     }
-  }
 
-  .${Alert_1.alertClassnames.content} {
-    padding: 0;
-  }
+    .${Alert_1.alertClassnames.content} {
+      padding: 0;
+    }
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+    }
   }
 `;
 exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.53.1",
+  "version": "4.53.2",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {