@astral/ui 4.87.1 → 4.88.0

package/node/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/node/components/Alert/constants.js

@@ -8,7 +8,9 @@ exports.alertClassnames = {
     title: (0, createUIKitClassname_1.createUIKitClassname)('alert__title'),
     closeButton: (0, createUIKitClassname_1.createUIKitClassname)('alert__close-button'),
     contentWrapper: (0, createUIKitClassname_1.createUIKitClassname)('alert__content-wrapper'),
+    bodyWrapper: (0, createUIKitClassname_1.createUIKitClassname)('alert__body-wrapper'),
     content: (0, createUIKitClassname_1.createUIKitClassname)('alert__content'),
+    actions: (0, createUIKitClassname_1.createUIKitClassname)('alert__actions'),
     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'),

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

@@ -20,7 +20,7 @@ export declare const IconWrapper: import("@emotion/styled/dist/declarations/src/
     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("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const BodyWrapper: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/Alert/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = exports.StyledTypography = exports.Content = exports.IconWrapper = exports.Wrapper = exports.StyledIconButton = exports.StyledGrid = void 0;
+exports.Title = exports.StyledTypography = exports.BodyWrapper = exports.IconWrapper = exports.Wrapper = exports.StyledIconButton = exports.StyledGrid = void 0;
 const Grid_1 = require("../Grid");
 const IconButton_1 = require("../IconButton");
 const SvgIcon_1 = require("../SvgIcon");
@@ -9,23 +9,29 @@ const Typography_1 = require("../Typography");
 const constants_1 = require("./constants");
 exports.StyledGrid = (0, styled_1.styled)(Grid_1.Grid) `
   grid-auto-flow: column;
-  grid-column: 2 / -1;
   justify-content: flex-start;
 `;
 exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.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%);
   }
 `;
 exports.Wrapper = styled_1.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};
@@ -65,179 +71,17 @@ exports.Wrapper = styled_1.styled.div `
       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 }) => 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 `
+  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;
 
@@ -248,30 +92,40 @@ exports.IconWrapper = styled_1.styled.div `
       font-size: 24px;
     }
   }
+`;
+exports.BodyWrapper = styled_1.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)};
+
+  .${constants_1.alertClassnames.hasCloseButton} & {
+    margin-right: ${({ theme }) => theme.spacing(1)};
   }
-`;
-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: minmax(20px, auto);
-  align-items: unset;
 
+  & > .${constants_1.alertClassnames.title} + .${constants_1.alertClassnames.content} {
+    margin-top: ${({ theme }) => theme.spacing(1)};
+  }
+
+  & > .${constants_1.alertClassnames.actions} {
+    margin-top: ${({ theme }) => theme.spacing(2)};
+  }
 `;
 exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
-  grid-column: 2 / -1;
-  grid-row: 1;
+  align-self: stretch;
 
+  min-width: 0;
+  margin: 0;
   padding: 0;
 
-  .${constants_1.alertClassnames.hasTitle} & {
-    grid-row: 2;
-  }
+  overflow-wrap: break-word;
 `;
 exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
-  grid-column: 2 / -1;
+  min-width: 0;
+  margin: 0;
+
+  overflow-wrap: break-word;
 `;

package/node/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/node/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/node/components/Alert/useLogic/useLogic.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
-const useLogic = ({ children }) => {
+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 };
 };
 exports.useLogic = useLogic;

package/node/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/node/components/CollapsableAlert/CollapsableAlert.js

@@ -6,5 +6,5 @@ const react_1 = require("react");
 const Accordion_1 = require("../Accordion");
 const Alert_1 = require("../Alert");
 exports.CollapsableAlert = (0, react_1.forwardRef)(({ title, icon, severity = 'info', actions, display = true, children, isExpanded, onExpandedChange, subtitle, summaryVariant, }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { ref: ref, severity: severity, icon: icon, display: display, actions: actions, children: (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { summary: title, isExpanded: isExpanded, onChange: onExpandedChange, subtitle: subtitle, summaryVariant: summaryVariant, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(Alert_1.Alert, { ref: ref, severity: severity, icon: icon, isShow: display, actions: actions, children: (0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { summary: title, isExpanded: isExpanded, onChange: onExpandedChange, subtitle: subtitle, summaryVariant: summaryVariant, children: children }) }));
 });

package/node/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/node/components/DashboardAlert/DashboardAlert.js

@@ -8,10 +8,14 @@ const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
  * Компонент отображения уведомления на всех страницах приложения
+ *
+ * @deprecated Компонент будет удалён — планируется полный переход на {@link Alert}.
+ * Не используйте `DashboardAlert` в новом коде, вместо него используйте `Alert`.
+ * Подробнее — в разделе «DashboardAlert / PageAlert» V5 Migration Guide.
  */
 const DashboardAlert = (props) => {
     const { linkButtonProps, children, isShow, className, ...restProps } = props;
     const { name, color: linkButtonColor, ...restButtonProps } = linkButtonProps || {};
-    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 }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledAlert, { className: (0, classNames_1.classNames)(constants_1.dashboardAlertClassnames.root, className), isShow: 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/styles.js

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

package/node/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/node/components/DashboardLayout/Main/Main.js

@@ -11,5 +11,5 @@ const useLogic_1 = require("./useLogic");
  */
 exports.Main = (0, react_1.forwardRef)(({ children, alert }, ref) => {
     const { onAnimationEnd, alertContainerRef } = (0, useLogic_1.useLogic)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.AlertWrapper, { ref: alertContainerRef, className: constants_1.dashboardLayoutMainClassnames.alert, children: alert }), (0, jsx_runtime_1.jsx)(styles_1.MainRoot, { className: constants_1.dashboardLayoutMainClassnames.main, ref: ref, onAnimationEnd: onAnimationEnd, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.AlertWrapper, { ref: alertContainerRef, className: constants_1.dashboardLayoutMainClassnames.alert, children: alert && (0, jsx_runtime_1.jsx)(styles_1.AlertContainer, { children: alert }) }), (0, jsx_runtime_1.jsx)(styles_1.MainRoot, { className: constants_1.dashboardLayoutMainClassnames.main, ref: ref, onAnimationEnd: onAnimationEnd, children: children })] }));
 });

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

@@ -7,3 +7,7 @@ export declare const AlertWrapper: import("@emotion/styled/dist/declarations/src
     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("@emotion/styled/dist/declarations/src/types").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/node/components/DashboardLayout/Main/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlertWrapper = exports.MainRoot = void 0;
+exports.AlertContainer = exports.AlertWrapper = exports.MainRoot = void 0;
 const styled_1 = require("../../styled");
 exports.MainRoot = styled_1.styled.main `
   overflow: hidden;
@@ -23,3 +23,10 @@ exports.AlertWrapper = styled_1.styled.div `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
+exports.AlertContainer = styled_1.styled.div `
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(3, 4, 1)};
+  }
+`;

package/node/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/node/components/PageAlert/PageAlert.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageAlert = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("./styles");
+const DashboardAlert_1 = require("../DashboardAlert");
 /**
  * Компонент отображения уведомления на странице приложения
+ *
+ * @deprecated Компонент будет удалён — планируется полный переход на {@link Alert}.
+ * Не используйте `PageAlert` в новом коде, вместо него используйте `Alert`.
+ * Подробнее — в разделе «DashboardAlert / PageAlert» V5 Migration Guide.
  */
 const PageAlert = (props) => {
-    return (0, jsx_runtime_1.jsx)(styles_1.StyledDashboardAlert, { ...props });
+    return (0, jsx_runtime_1.jsx)(DashboardAlert_1.DashboardAlert, { ...props });
 };
 exports.PageAlert = PageAlert;

package/node/components/PageLayout/styles.js

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

package/node/components/fileUploading/FileUploader/faker.d.ts

@@ -1,2 +1,2 @@
 import { type AxiosRequestConfig } from 'axios';
-export declare const fakeFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+export declare const fakeFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}, any>>;

package/node/components/fileUploading/PreviewFileUploader/faker.d.ts

@@ -1,2 +1,2 @@
 import { type AxiosRequestConfig } from 'axios';
-export declare const fakePreviewFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+export declare const fakePreviewFileUploadQuery: (formData: FormData, options?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any, {}, any>>;

package/node/hook-form/EditableText/EditingForm/useLogic/useLogic.d.ts

@@ -5,7 +5,7 @@ type UseLogicParams<TValue> = EditingFormProps<TValue>;
 export declare const useLogic: <TValue>({ initialValue, children, validate, onClose, onSubmit, }: UseLogicParams<TValue>) => {
     formProps: {
         form: import("react-hook-form").UseFormReturn<FormValues, any>;
-        onSubmit: (e?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+        onSubmit: (e?: import("react").BaseSyntheticEvent<object, any, any> | undefined) => Promise<void | undefined>;
     };
 };
 export {};