@astral/ui 4.53.1 → 4.54.0

package/icons/index.js

@@ -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';

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/node/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/node/icons/MaxFillMd/MaxFillMd.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxFillMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SvgIcon_1 = require("../../components/SvgIcon");
+const MaxFillMd = ({ ...props }) => ((0, jsx_runtime_1.jsxs)(SvgIcon_1.SvgIcon, { ...props, children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#maxFillMd_clip0)", children: [(0, jsx_runtime_1.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)" }), (0, jsx_runtime_1.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)" }), (0, jsx_runtime_1.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" })] }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "maxFillMd_paint0_linear", gradientUnits: "userSpaceOnUse", x1: "2.82833", x2: "24", y1: "18.2529", y2: "12", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#44CCFF" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.662", stopColor: "#5533EE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#9933DD" })] }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#0000FF" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopOpacity: 0 })] }), (0, jsx_runtime_1.jsx)("clipPath", { id: "maxFillMd_clip0", children: (0, jsx_runtime_1.jsx)("rect", { fill: "white", height: "24", width: "24" }) })] })] }));
+exports.MaxFillMd = MaxFillMd;

package/node/icons/MaxFillMd/index.d.ts

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

package/node/icons/MaxFillMd/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxFillMd = void 0;
+var public_1 = require("./public");
+Object.defineProperty(exports, "MaxFillMd", { enumerable: true, get: function () { return public_1.MaxFillMd; } });

package/node/icons/MaxFillMd/public.d.ts

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

package/node/icons/MaxFillMd/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxFillMd = void 0;
+var MaxFillMd_1 = require("./MaxFillMd");
+Object.defineProperty(exports, "MaxFillMd", { enumerable: true, get: function () { return MaxFillMd_1.MaxFillMd; } });

package/node/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>;