@astral/ui 4.53.1 → 4.54.0

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/icons/MaxFillMd/MaxFillMd.d.ts

@@ -0,0 +1,3 @@
+import type { FunctionComponent } from 'react';
+import { type SvgIconProps } from '../../components/SvgIcon';
+export declare const MaxFillMd: FunctionComponent<SvgIconProps>;

package/icons/MaxFillMd/MaxFillMd.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '../../components/SvgIcon';
+export const MaxFillMd = ({ ...props }) => (_jsxs(SvgIcon, { ...props, children: [_jsxs("g", { clipPath: "url(#maxFillMd_clip0)", children: [_jsx("path", { d: "M18.0077 0H5.99234C2.68286 0 0 2.68286 0 5.99234V18.0077C0 21.3171 2.68286 24 5.99234 24H18.0077C21.3171 24 24 21.3171 24 18.0077V5.99234C24 2.68286 21.3171 0 18.0077 0Z", fill: "url(#maxFillMd_paint0_linear)" }), _jsx("path", { d: "M18.0077 0H5.99234C2.68286 0 0 2.68286 0 5.99234V18.0077C0 21.3171 2.68286 24 5.99234 24H18.0077C21.3171 24 24 21.3171 24 18.0077V5.99234C24 2.68286 21.3171 0 18.0077 0Z", fill: "url(#maxFillMd_paint1_radial)" }), _jsx("path", { clipRule: "evenodd", d: "M12.1971 21.0799C10.3969 21.0799 9.56037 20.8171 8.10623 19.7659C7.18643 20.9485 4.27377 21.8727 4.14674 20.2915C4.14674 19.1045 3.88394 18.1015 3.5861 17.0065C3.23133 15.6575 2.82837 14.1551 2.82837 11.9783C2.82837 6.7793 7.09447 2.868 12.1489 2.868C17.2078 2.868 21.1717 6.97202 21.1717 12.0265C21.1886 17.0028 17.1734 21.0533 12.1971 21.0799ZM12.2716 7.36183C9.81004 7.23482 7.8916 8.93863 7.46675 11.6104C7.11635 13.8223 7.73831 16.516 8.26828 16.6561C8.52232 16.7174 9.1618 16.2006 9.56037 15.802C10.2194 16.2573 10.9869 16.5308 11.7854 16.5948C14.336 16.7175 16.5153 14.7757 16.6866 12.228C16.7863 9.67483 14.8225 7.51233 12.2716 7.36622V7.36183Z", fill: "white", fillRule: "evenodd" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "maxFillMd_paint0_linear", gradientUnits: "userSpaceOnUse", x1: "2.82833", x2: "24", y1: "18.2529", y2: "12", children: [_jsx("stop", { stopColor: "#44CCFF" }), _jsx("stop", { offset: "0.662", stopColor: "#5533EE" }), _jsx("stop", { offset: "1", stopColor: "#9933DD" })] }), _jsxs("radialGradient", { id: "maxFillMd_paint1_radial", cx: "0", cy: "0", gradientTransform: "translate(-0.570979 -10.5404) rotate(51.356) scale(29.1244 12)", gradientUnits: "userSpaceOnUse", r: "1", children: [_jsx("stop", { stopColor: "#0000FF" }), _jsx("stop", { offset: "1", stopOpacity: 0 })] }), _jsx("clipPath", { id: "maxFillMd_clip0", children: _jsx("rect", { fill: "white", height: "24", width: "24" }) })] })] }));

package/icons/MaxFillMd/index.d.ts

@@ -0,0 +1 @@
+export { MaxFillMd } from './public';

package/icons/MaxFillMd/index.js

@@ -0,0 +1 @@
+export { MaxFillMd } from './public';

package/icons/MaxFillMd/public.d.ts

@@ -0,0 +1 @@
+export { MaxFillMd } from './MaxFillMd';

package/icons/MaxFillMd/public.js

@@ -0,0 +1 @@
+export { MaxFillMd } from './MaxFillMd';

package/icons/MaxMonochromeFillMd/MaxMonochromeFillMd.d.ts

@@ -0,0 +1,3 @@
+import type { FunctionComponent } from 'react';
+import { type SvgIconProps } from '../../components/SvgIcon';
+export declare const MaxMonochromeFillMd: FunctionComponent<SvgIconProps>;

package/icons/MaxMonochromeFillMd/MaxMonochromeFillMd.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from '../../components/SvgIcon';
+export const MaxMonochromeFillMd = ({ ...props }) => (_jsxs(SvgIcon, { ...props, children: [_jsx("g", { clipPath: "url(#maxMono_clip0)", children: _jsx("path", { d: "M11.68 0.320001C4.72669 0.683334 0.136688 6.13667 0.426688 13.0133C0.553355 16.0233 1.76335 18.6133 2.05002 21.47C2.12335 22.21 1.91002 23.1233 2.76335 23.4467C3.81335 23.8433 5.42335 23.1767 6.30335 22.5667C6.60335 22.3633 6.89002 22.1267 7.11002 21.8333C8.02002 22.4367 8.88335 23.02 9.96669 23.28C14.7367 24.4233 19.9634 21.8067 22.2867 17.6033C26.6534 9.70667 20.75 -0.153332 11.68 0.320001ZM8.98002 16.8C8.60335 17.0933 8.24002 17.4933 7.82335 17.7233C7.22002 18.0467 7.03335 17.71 6.80669 17.1767C6.09335 15.48 6.00669 12.59 6.42335 10.8133C6.98335 8.39667 8.85335 6.27 11.4234 6.04333C14.0234 5.81333 16.4367 7.13333 17.5267 9.51667C19.94 14.82 13.7634 20.0567 8.98002 16.8033V16.8Z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "maxMono_clip0", children: _jsx("rect", { fill: "white", height: "24", width: "24" }) }) })] }));

package/icons/MaxMonochromeFillMd/index.d.ts

@@ -0,0 +1 @@
+export { MaxMonochromeFillMd } from './public';

package/icons/MaxMonochromeFillMd/index.js

@@ -0,0 +1 @@
+export { MaxMonochromeFillMd } from './public';

package/icons/MaxMonochromeFillMd/public.d.ts

@@ -0,0 +1 @@
+export { MaxMonochromeFillMd } from './MaxMonochromeFillMd';

package/icons/MaxMonochromeFillMd/public.js

@@ -0,0 +1 @@
+export { MaxMonochromeFillMd } from './MaxMonochromeFillMd';

package/icons/index.d.ts

@@ -65,6 +65,8 @@ export { FacebookFillMd } from './FacebookFillMd';
 export { GoogleFillMd } from './GoogleFillMd';
 export { GoogleMonochromeFillMd } from './GoogleMonochromeFillMd';
 export { JacartaFillMd } from './JacartaFillMd';
+export { MaxFillMd } from './MaxFillMd';
+export { MaxMonochromeFillMd } from './MaxMonochromeFillMd';
 export { OkFillMd } from './OkFillMd';
 export { OkMonochromeFillMd } from './OkMonochromeFillMd';
 export { RutokenFillMd } from './RutokenFillMd';