@astral/ui 4.87.1 → 4.88.1

package/components/Alert/Alert.js

@@ -9,7 +9,7 @@ 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 { BodyWrapper, IconWrapper, StyledGrid, StyledIconButton, StyledTypography, Title, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 const alertCva = cva(alertClassnames.root, {
     variants: {
@@ -30,8 +30,12 @@ const alertCva = cva(alertClassnames.root, {
         },
     },
 });
-export const Alert = forwardRef(({ children, title, closeText = 'Скрыть', display = true, actions, onClose, severity = 'info', style, className, icon, unmountOnExit, }, ref) => {
-    const { shouldRenderParagraph } = useLogic({ children });
+export const Alert = forwardRef(({ children, title, closeText = 'Скрыть', isShow, display, actions, onClose, severity = 'info', style, className, icon, unmountOnExit, }, ref) => {
+    const { shouldRenderParagraph, isVisible } = useLogic({
+        children,
+        isShow,
+        display,
+    });
     const renderCloseButton = () => {
         return (_jsx(StyledIconButton, { variant: "text", color: "grey", onClick: onClose, "aria-label": closeText, title: closeText, className: alertClassnames.closeButton, children: _jsx(CrossOutlineMd, {}) }));
     };
@@ -44,10 +48,10 @@ export const Alert = forwardRef(({ children, title, closeText = 'Скрыть',
         };
         return (_jsx(IconWrapper, { className: alertClassnames.iconWrapper, children: icon ?? iconMapping[severity] }));
     };
-    return (_jsx(Collapse, { in: display, unmountOnExit: unmountOnExit, children: _jsxs(Wrapper, { style: style, className: classNames(alertCva({
+    return (_jsx(Collapse, { in: isVisible, unmountOnExit: unmountOnExit, children: _jsxs(Wrapper, { style: style, className: classNames(alertClassnames.contentWrapper, 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 }))] }) }));
+            }), className), role: "alert", ref: ref, children: [renderIcon(), _jsxs(BodyWrapper, { className: alertClassnames.bodyWrapper, children: [title && (_jsx(Title, { variant: "h5", className: alertClassnames.title, children: title })), _jsx(StyledTypography, { component: shouldRenderParagraph ? 'p' : 'div', className: alertClassnames.content, children: children }), actions && (_jsx(StyledGrid, { container: true, spacing: 4, className: alertClassnames.actions, children: actions }))] }), onClose && renderCloseButton()] }) }));
 });

package/components/Alert/constants.d.ts

@@ -4,7 +4,9 @@ export declare const alertClassnames: {
     title: string;
     closeButton: string;
     contentWrapper: string;
+    bodyWrapper: string;
     content: string;
+    actions: string;
     hasTitle: string;
     hasCloseButton: string;
     hasActions: string;

package/components/Alert/constants.js

@@ -5,7 +5,9 @@ export const alertClassnames = {
     title: createUIKitClassname('alert__title'),
     closeButton: createUIKitClassname('alert__close-button'),
     contentWrapper: createUIKitClassname('alert__content-wrapper'),
+    bodyWrapper: createUIKitClassname('alert__body-wrapper'),
     content: createUIKitClassname('alert__content'),
+    actions: createUIKitClassname('alert__actions'),
     hasTitle: createUIKitClassname('alert_has-title'),
     hasCloseButton: createUIKitClassname('alert_has-close-button'),
     hasActions: createUIKitClassname('alert_has-actions'),

package/components/Alert/styles.d.ts

@@ -20,7 +20,7 @@ export declare const IconWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import("../styled").StyledComponent<{
+export declare const BodyWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Alert/styles.js

@@ -6,23 +6,29 @@ import { Typography } from '../Typography';
 import { alertClassnames } from './constants';
 export const StyledGrid = styled(Grid) `
   grid-auto-flow: column;
-  grid-column: 2 / -1;
   justify-content: flex-start;
 `;
 export const StyledIconButton = styled(IconButton) `
-  grid-column: 3;
-  grid-row: 1;
+  flex-shrink: 0;
+  align-self: flex-start;
+
+  /* Центрируем кнопку по ее строке, как и иконку:
+     отступ строки сверху + половина разницы высот кнопки и строки */
+  margin-top: ${({ theme }) => `calc(${theme.microSpacing(3)} + (20px - 32px) / 2)`};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-top: ${({ theme }) => `calc(${theme.microSpacing(3)} + (20px - 40px) / 2)`};
+  }
 
   &:hover {
     background-color: rgb(0 0 0 / 4%);
   }
 `;
 export const Wrapper = styled.div `
-  display: grid;
-  grid-template-columns: 20px 1fr 32px;
-  gap: ${({ theme }) => theme.microSpacing(7, 4)};
+  display: flex;
+  align-items: flex-start;
 
-  padding: ${({ theme }) => theme.microSpacing(9, 8, 9, 8)};
+  padding: ${({ theme }) => theme.spacing(3, 4)};
 
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.shape.medium};
@@ -62,179 +68,17 @@ export const Wrapper = styled.div `
       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 }) => 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 `
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+
+  /* Высота строки текста (line-height body1): иконка центрируется по первой строке,
+     а не по собственному боксу, поэтому высота не зависит от размера иконки */
   height: 20px;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  margin-block: ${({ theme }) => theme.microSpacing(3)};
 
   color: inherit;
 
@@ -245,30 +89,40 @@ export const IconWrapper = styled.div `
       font-size: 24px;
     }
   }
+`;
+export const BodyWrapper = styled.div `
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    height: 24px;
+  min-width: 0;
+  margin-block: ${({ theme }) => theme.microSpacing(3)};
+
+  .${alertClassnames.hasCloseButton} & {
+    margin-right: ${({ theme }) => theme.spacing(1)};
   }
-`;
-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: minmax(20px, auto);
-  align-items: unset;
 
+  & > .${alertClassnames.title} + .${alertClassnames.content} {
+    margin-top: ${({ theme }) => theme.spacing(1)};
+  }
+
+  & > .${alertClassnames.actions} {
+    margin-top: ${({ theme }) => theme.spacing(2)};
+  }
 `;
 export const StyledTypography = styled(Typography) `
-  grid-column: 2 / -1;
-  grid-row: 1;
+  align-self: stretch;
 
+  min-width: 0;
+  margin: 0;
   padding: 0;
 
-  .${alertClassnames.hasTitle} & {
-    grid-row: 2;
-  }
+  overflow-wrap: break-word;
 `;
 export const Title = styled(Typography) `
-  grid-column: 2 / -1;
+  min-width: 0;
+  margin: 0;
+
+  overflow-wrap: break-word;
 `;

package/components/Alert/types.d.ts

@@ -20,9 +20,16 @@ export type AlertProps = {
      * Используется для отображения набора действий
      */
     actions?: ReactNode;
+    /**
+     * @example <Alert isShow={false}>Сообщение</Alert>
+     * Флаг для отображения/скрытия компонента Alert
+     */
+    isShow?: boolean;
     /**
      * @example <Alert display={false}>Сообщение</Alert>
      * Флаг для отображения/скрытия компонента Alert
+     *
+     * @deprecated Используйте `isShow`. Проп будет удалён в следующей major версии пакета.
      */
     display?: boolean;
     /**

package/components/Alert/useLogic/useLogic.d.ts

@@ -1,6 +1,7 @@
 import { type AlertProps } from '../types';
-type UseLogicParams = Pick<AlertProps, 'children'>;
-export declare const useLogic: ({ children }: UseLogicParams) => {
+type UseLogicParams = Pick<AlertProps, 'children' | 'isShow' | 'display'>;
+export declare const useLogic: ({ children, isShow, display }: UseLogicParams) => {
     shouldRenderParagraph: boolean;
+    isVisible: boolean;
 };
 export {};

package/components/Alert/useLogic/useLogic.js

@@ -1,4 +1,6 @@
-export const useLogic = ({ children }) => {
+export const useLogic = ({ children, isShow, display }) => {
     const shouldRenderParagraph = typeof children === 'string' || typeof children === 'number';
-    return { shouldRenderParagraph };
+    // display - deprecated проп, поддерживается для обратной совместимости, приоритет у isShow
+    const isVisible = isShow ?? display ?? true;
+    return { shouldRenderParagraph, isVisible };
 };

package/components/CollapsableAlert/CollapsableAlert.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
 import { type AccordionProps } from '../Accordion';
 import { type AlertProps } from '../Alert';
-export declare const CollapsableAlert: import("react").ForwardRefExoticComponent<Pick<AlertProps, "display" | "icon" | "actions" | "severity"> & Omit<AccordionProps, "onChange" | "summary" | "startAdornment"> & {
+export declare const CollapsableAlert: import("react").ForwardRefExoticComponent<Pick<AlertProps, "icon" | "actions" | "severity"> & Omit<AccordionProps, "onChange" | "summary" | "startAdornment"> & {
     title: AccordionProps['summary'];
     onExpandedChange?: AccordionProps['onChange'];
+    /**
+     * @example <CollapsableAlert display={false}>Сообщение</CollapsableAlert>
+     * Флаг для отображения/скрытия компонента
+     */
+    display?: boolean | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/components/CollapsableAlert/CollapsableAlert.js

@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
 import { Accordion } from '../Accordion';
 import { Alert } from '../Alert';
 export const CollapsableAlert = forwardRef(({ title, icon, severity = 'info', actions, display = true, children, isExpanded, onExpandedChange, subtitle, summaryVariant, }, ref) => {
-    return (_jsx(Alert, { ref: ref, severity: severity, icon: icon, display: display, actions: actions, children: _jsx(Accordion, { summary: title, isExpanded: isExpanded, onChange: onExpandedChange, subtitle: subtitle, summaryVariant: summaryVariant, children: children }) }));
+    return (_jsx(Alert, { ref: ref, severity: severity, icon: icon, isShow: display, actions: actions, children: _jsx(Accordion, { summary: title, isExpanded: isExpanded, onChange: onExpandedChange, subtitle: subtitle, summaryVariant: summaryVariant, children: children }) }));
 });

package/components/DashboardAlert/DashboardAlert.d.ts

@@ -1,5 +1,9 @@
 import type { DashboardAlertProps } from './types';
 /**
  * Компонент отображения уведомления на всех страницах приложения
+ *
+ * @deprecated Компонент будет удалён — планируется полный переход на {@link Alert}.
+ * Не используйте `DashboardAlert` в новом коде, вместо него используйте `Alert`.
+ * Подробнее — в разделе «DashboardAlert / PageAlert» V5 Migration Guide.
  */
 export declare const DashboardAlert: (props: DashboardAlertProps) => import("react/jsx-runtime").JSX.Element;

package/components/DashboardAlert/DashboardAlert.js

@@ -5,9 +5,13 @@ import { dashboardAlertClassnames } from './constants';
 import { StyledAlert, StyledButton } from './styles';
 /**
  * Компонент отображения уведомления на всех страницах приложения
+ *
+ * @deprecated Компонент будет удалён — планируется полный переход на {@link Alert}.
+ * Не используйте `DashboardAlert` в новом коде, вместо него используйте `Alert`.
+ * Подробнее — в разделе «DashboardAlert / PageAlert» V5 Migration Guide.
  */
 export const DashboardAlert = (props) => {
     const { linkButtonProps, children, isShow, className, ...restProps } = props;
     const { name, color: linkButtonColor, ...restButtonProps } = linkButtonProps || {};
-    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 }))] }) }));
+    return (_jsx(StyledAlert, { className: classNames(dashboardAlertClassnames.root, className), isShow: isShow, ...restProps, children: _jsxs(Typography, { variant: "body1", children: [children, "\u00A0", linkButtonProps && (_jsx(StyledButton, { variant: "link", ...restButtonProps, children: name }))] }) }));
 };

package/components/DashboardAlert/styles.js

@@ -5,25 +5,13 @@ import { styled } from '../styled';
 import { dashboardAlertClassnames } from './constants';
 export const StyledAlert = styled(Alert) `
   &.${alertClassnames.root}.${dashboardAlertClassnames.root}.${dashboardAlertClassnames.root} {
-    grid-template-columns: 24px 1fr 32px;
+    align-items: center;
 
-    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.iconWrapper} {
       height: 24px;
-      padding: 0;
+      margin-block: 0;
 
       & .${svgIconClassnames.root} {
         font-size: 24px;
@@ -35,7 +23,17 @@ export const StyledAlert = styled(Alert) `
     }
 
     ${({ theme }) => theme.breakpoints.down('sm')} {
-      margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+      align-items: flex-start;
+
+      /* иконка 24px, выравниваем текст к ней, как в старой вёрстке */
+      .${alertClassnames.bodyWrapper} {
+        margin-block: ${({ theme }) => theme.microSpacing(1, 0)};
+      }
+
+      /* и кнопку закрытия к ней же: половина разницы высот кнопки и иконки */
+      .${alertClassnames.closeButton} {
+        margin-top: calc((24px - 40px) / 2);
+      }
     }
   }
 `;

package/components/DashboardAlert/types.d.ts

@@ -4,7 +4,10 @@ import type { ButtonProps } from '../Button';
 export type LinkButtonProps<TComponent extends ElementType = ElementType> = Omit<ButtonProps<TComponent>, 'children' | 'size' | 'color' | 'key'> & {
     name?: string;
 } & Omit<ComponentProps<TComponent>, ''>;
-export type DashboardAlertProps = Omit<AlertProps, 'actions' | 'slotProps' | 'slots' | 'title' | 'display'> & {
+/**
+ * @deprecated Тип будет удалён вместе с `DashboardAlert` — переход на {@link Alert} / `AlertProps`.
+ */
+export type DashboardAlertProps = Omit<AlertProps, 'actions' | 'slotProps' | 'slots' | 'title' | 'display' | 'isShow'> & {
     /**
      * Параметры ссылки
      */

package/components/DashboardLayout/Main/Main.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { dashboardLayoutMainClassnames } from './constants';
-import { AlertWrapper, MainRoot } from './styles';
+import { AlertContainer, AlertWrapper, MainRoot } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Основной контент приложения
  */
 export const Main = forwardRef(({ children, alert }, ref) => {
     const { onAnimationEnd, alertContainerRef } = useLogic();
-    return (_jsxs(_Fragment, { children: [_jsx(AlertWrapper, { ref: alertContainerRef, className: dashboardLayoutMainClassnames.alert, children: alert }), _jsx(MainRoot, { className: dashboardLayoutMainClassnames.main, ref: ref, onAnimationEnd: onAnimationEnd, children: children })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AlertWrapper, { ref: alertContainerRef, className: dashboardLayoutMainClassnames.alert, children: alert && _jsx(AlertContainer, { children: alert }) }), _jsx(MainRoot, { className: dashboardLayoutMainClassnames.main, ref: ref, onAnimationEnd: onAnimationEnd, children: children })] }));
 });

package/components/DashboardLayout/Main/styles.d.ts

@@ -7,3 +7,7 @@ export declare const AlertWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AlertContainer: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardLayout/Main/styles.js

@@ -20,3 +20,10 @@ export const AlertWrapper = styled.div `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
+export const AlertContainer = styled.div `
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+  }
+`;

package/components/PageAlert/PageAlert.d.ts

@@ -1,6 +1,13 @@
 import { type DashboardAlertProps } from '../DashboardAlert';
+/**
+ * @deprecated Тип будет удалён вместе с `PageAlert` — переход на {@link Alert} / `AlertProps`.
+ */
 export type PageAlertProps = DashboardAlertProps;
 /**
  * Компонент отображения уведомления на странице приложения
+ *
+ * @deprecated Компонент будет удалён — планируется полный переход на {@link Alert}.
+ * Не используйте `PageAlert` в новом коде, вместо него используйте `Alert`.
+ * Подробнее — в разделе «DashboardAlert / PageAlert» V5 Migration Guide.
  */
 export declare const PageAlert: (props: PageAlertProps) => import("react/jsx-runtime").JSX.Element;

package/components/PageAlert/PageAlert.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StyledDashboardAlert } from './styles';
+import { DashboardAlert } from '../DashboardAlert';
 /**
  * Компонент отображения уведомления на странице приложения
+ *
+ * @deprecated Компонент будет удалён — планируется полный переход на {@link Alert}.
+ * Не используйте `PageAlert` в новом коде, вместо него используйте `Alert`.
+ * Подробнее — в разделе «DashboardAlert / PageAlert» V5 Migration Guide.
  */
 export const PageAlert = (props) => {
-    return _jsx(StyledDashboardAlert, { ...props });
+    return _jsx(DashboardAlert, { ...props });
 };

package/components/PageHeader/HeaderContent/styles.js

@@ -1,4 +1,5 @@
 import { styled } from '../../styled';
+import { tabsClassnames } from '../../Tabs';
 export const BreadcrumbsWrapper = styled.div `
   grid-column: 2;
   grid-row: 1;
@@ -13,10 +14,14 @@ export const TabsWrapper = styled.div `
   grid-column: 1 / -1;
   grid-row: 4;
 
-  padding-top:  ${({ theme }) => theme.spacing(3)};
+  padding-top:  ${({ theme }) => theme.spacing(4)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+    padding: ${({ theme }) => theme.spacing(0, 0, 4, 0)};
+
+    .${tabsClassnames.root} {
+      margin: ${({ theme }) => theme.spacing(0, 4)};
+    }
   }
 `;
 export const PageSubheader = styled.div `

package/components/PageLayout/styles.js

@@ -4,12 +4,16 @@ export const MobileAlertWrapper = styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: block;
 
+    margin: ${({ theme }) => theme.spacing(3, 4, 0, 4)};
+
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
 export const DesktopAlertWrapper = styled.div `
   display: block;
 
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }

package/components/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
 import type { TabsProps as MuiTabsProps } from '@mui/material/Tabs';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type TabsProps = WithoutEmotionSpecific<MuiTabsProps>;
-export declare const Tabs: ({ ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ className, ...tabsProps }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/components/Tabs/Tabs.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useScrollToActiveElement } from '../useScrollToActiveElement';
+import { classNames } from '../utils/classNames';
+import { tabsClassnames } from './constants';
 import { Container, Divider, StyledTabs, Wrapper } from './styles';
-export const Tabs = ({ ...tabsProps }) => {
+export const Tabs = ({ className, ...tabsProps }) => {
     const { containerRef } = useScrollToActiveElement();
-    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef }), _jsx(Divider, {})] }) }));
+    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(StyledTabs, { ...tabsProps, ref: containerRef, className: classNames(className, tabsClassnames.root) }), _jsx(Divider, {})] }) }));
 };

package/components/Tabs/constants.d.ts

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

package/components/Tabs/constants.js

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

package/components/Tabs/index.d.ts

@@ -1,2 +1,3 @@
-export * from './Tabs';
+export { tabsClassnames } from './constants';
 export * from './Tab';
+export * from './Tabs';