@astral/ui 4.37.2 → 4.38.0

package/components/NotFoundPage/styles.js

@@ -37,6 +37,6 @@ export const Image = styled.img `
 `;
 export const StyledPageContent = styled(PageContent) `
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin: ${({ theme }) => theme.spacing(4)};
+    margin-top: ${({ theme }) => theme.spacing(4)};
   }
 `;

package/components/PageAside/styles.js

@@ -22,9 +22,8 @@ export const Wrapper = styled.aside `
     width: unset;
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
-    background-color: ${({ theme }) => theme.palette.background.default};
-    border-top: 0;
-    border-left: 0;
+    background-color: ${({ theme }) => theme.palette.background.default};  
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;

package/components/PageContent/PageContentHeader/styles.js

@@ -8,11 +8,13 @@ export const Wrapper = styled.header `
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
       margin: ${({ theme }) => theme.spacing(0, 4)};
 
       background-color: ${({ theme }) => theme.palette.background.default};
+      border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: none;
       border-top-left-radius: ${({ theme }) => theme.shape.medium};
       border-top-right-radius: ${({ theme }) => theme.shape.medium};
   }

package/components/PageContent/styles.js

@@ -1,3 +1,4 @@
+import { cardGridClassnames } from '../CardGridInfinite/constants';
 import { pdfViewerClassnames } from '../PdfViewer';
 import { styled } from '../styled';
 import { PAGE_CONTENT_ANIMATION, pageContentClassnames } from './constants';
@@ -74,8 +75,15 @@ export const Content = styled.div `
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: ${({ theme }) => theme.shape.medium};
 
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(.${cardGridClassnames.root}) {
+      border: none;
+    }
+
     &.${pageContentClassnames.contentHasHeader} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;

package/components/PageHeader/constants.d.ts

@@ -5,5 +5,6 @@ export declare const pageHeaderClassnames: {
     hasTitle: string;
     filters: string;
     quickFilters: string;
+    hasFilters: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/components/PageHeader/constants.js

@@ -6,5 +6,6 @@ export const pageHeaderClassnames = {
     hasTitle: createUIKitClassname('page-header_has-title'),
     filters: createUIKitClassname('page-header__filters'),
     quickFilters: createUIKitClassname('page-header__quick-filters'),
+    hasFilters: createUIKitClassname('page-header_has-filters'),
 };
 export const PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/components/PageHeader/styles.js

@@ -15,6 +15,10 @@ export const Wrapper = styled.header `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    top: ${PAGE_HEADER_HEIGHT_MOBILE};
+
     display: block;
 
     margin-bottom: ${({ theme }) => theme.spacing(4)};
@@ -31,6 +35,10 @@ export const Wrapper = styled.header `
       grid-column: 3;
       grid-row: 1 / -1;
     }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 
   .${pageHeaderClassnames.quickFilters} {
@@ -60,6 +68,10 @@ export const MobileTitleWrapper = styled.div `
     order: 1;
     
     background-color: ${({ theme }) => theme.palette.background.default};
+
+     &:not(.${pageHeaderClassnames.hasFilters}) {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
     
     &.${pageHeaderClassnames.hasTitle} {
       display: flex;

package/components/PageHeader/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;

package/components/PageHeader/useLogic/useLogic.js

@@ -3,7 +3,7 @@ import { PageContext } from '../../PageContext';
 import { classNames } from '../../utils/classNames';
 import { pageHeaderClassnames } from '../constants';
 import { usePageTitle } from '../hooks/usePageTitle';
-export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
+export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }) => {
     //Переопределение Html title на title из параметров
     usePageTitle({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = useContext(PageContext);
@@ -11,6 +11,7 @@ export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle,
     const mobileClassnames = useMemo(() => classNames(pageHeaderClassnames.pageHeaderMobileTitle, {
         [pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
         [pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+        [pageHeaderClassnames.hasFilters]: Boolean(filters),
     }), [title, backButton, isLoading]);
     return {
         isShowMobileActions,

package/components/PageLayout/PageLayout.js

@@ -4,14 +4,17 @@ import { PageAside } from '../PageAside';
 import { PageContent } from '../PageContent';
 import { PageContextProvider } from '../PageContext';
 import { PageHeader } from '../PageHeader';
-import { PageLayoutContainer } from '../PageLayoutContainer';
+import { PageLayoutContainer, pageLayoutClassnames, } from '../PageLayoutContainer';
 import { LoadingPlaceholder } from '../placeholders/LoadingPlaceholder';
+import { classNames } from '../utils/classNames';
 import { DesktopAlertWrapper, LoaderWrapper, MobileAlertWrapper, } from './styles';
 import { useLogic } from './useLogic';
 export const PageLayout = (props) => {
     const { header, content, aside, footer, className, alert, isLoading } = props;
     const { hasAside, ref } = useLogic(props);
-    return (_jsxs(PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: className, ref: ref, children: [alert && _jsx(MobileAlertWrapper, { children: alert }), isValidElement(header)
+    return (_jsxs(PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && _jsx(DesktopAlertWrapper, { children: alert }), _jsxs(PageLayoutContainer, { className: classNames(className, {
+                    [pageLayoutClassnames.withoutHeader]: !header,
+                }), ref: ref, children: [alert && _jsx(MobileAlertWrapper, { children: alert }), isValidElement(header)
                         ? header
                         : header && _jsx(PageHeader, { ...header }), isLoading ? (_jsx(LoaderWrapper, { children: _jsx(LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) })) : (_jsxs(_Fragment, { children: [isValidElement(content) ? (content) : (_jsx(PageContent, { ...content, footer: footer })), aside && !isValidElement(aside) && (_jsx(PageAside, { ...aside })), isValidElement(aside) && aside] }))] })] }));
 };

package/components/PageLayoutContainer/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const pageLayoutClassnames: {
     root: string;
+    withoutHeader: string;
 };

package/components/PageLayoutContainer/constants.js

@@ -1,4 +1,5 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const pageLayoutClassnames = {
     root: createUIKitClassname('page-layout'),
+    withoutHeader: createUIKitClassname('page-layout_without-header'),
 };

package/components/PageLayoutContainer/styles.js

@@ -1,5 +1,6 @@
 import { Paper } from '../Paper';
 import { styled } from '../styled';
+import { pageLayoutClassnames } from './constants';
 export const Wrapper = styled.div `
   display: grid;
   grid-row-gap: ${({ theme }) => theme.spacing(4)};
@@ -39,5 +40,9 @@ export const StylePaper = styled(Paper) `
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     border: unset;
+
+    .${pageLayoutClassnames.withoutHeader} {
+      padding-top: ${({ theme }) => theme.spacing(4)};
+    }
   }
 `;

package/components/PagePinnableAside/styles.js

@@ -31,6 +31,7 @@ export const Aside = styled('aside', {
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;

package/hook-form/FormPageLayoutBase/styles.js

@@ -33,13 +33,14 @@ export const StyledPageContent = styled(PageContent) `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-bottom: ${({ theme }) => theme.spacing(24)};
+    margin-bottom: ${({ theme }) => theme.spacing(20)};
+    padding-top: 0;
 
     &.${formPageContentClassnames.formPageContentSecondaryActions} {
-      margin-bottom: ${({ theme }) => theme.spacing(38)};
+      margin-bottom: ${({ theme }) => theme.spacing(32)};
 
       &.${formPageContentClassnames.formWizardPageContentActions} {
-        margin-bottom: ${({ theme }) => theme.spacing(52)};
+        margin-bottom: ${({ theme }) => theme.spacing(50)};
       }
     }
   }

package/node/components/NotFoundPage/styles.js

@@ -40,6 +40,6 @@ exports.Image = styled_1.styled.img `
 `;
 exports.StyledPageContent = (0, styled_1.styled)(PageContent_1.PageContent) `
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin: ${({ theme }) => theme.spacing(4)};
+    margin-top: ${({ theme }) => theme.spacing(4)};
   }
 `;

package/node/components/PageAside/styles.js

@@ -25,9 +25,8 @@ exports.Wrapper = styled_1.styled.aside `
     width: unset;
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
-    background-color: ${({ theme }) => theme.palette.background.default};
-    border-top: 0;
-    border-left: 0;
+    background-color: ${({ theme }) => theme.palette.background.default};  
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;

package/node/components/PageContent/PageContentHeader/styles.js

@@ -11,11 +11,13 @@ exports.Wrapper = styled_1.styled.header `
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
       margin: ${({ theme }) => theme.spacing(0, 4)};
 
       background-color: ${({ theme }) => theme.palette.background.default};
+      border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      border-bottom: none;
       border-top-left-radius: ${({ theme }) => theme.shape.medium};
       border-top-right-radius: ${({ theme }) => theme.shape.medium};
   }

package/node/components/PageContent/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Wrapper = void 0;
+const constants_1 = require("../CardGridInfinite/constants");
 const PdfViewer_1 = require("../PdfViewer");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getPaddingContent = (theme, hasAside) => {
     return hasAside ? theme.spacing(4, 6, 4) : theme.spacing(0, 6, 4);
 };
@@ -31,7 +32,7 @@ exports.Wrapper = (0, styled_1.styled)('article', {
     border-top: none;
   }
 
-  @keyframes ${constants_1.PAGE_CONTENT_ANIMATION} {
+  @keyframes ${constants_2.PAGE_CONTENT_ANIMATION} {
     0% {
       display: none;
 
@@ -49,8 +50,8 @@ exports.Wrapper = (0, styled_1.styled)('article', {
     }
   }
 
-  &.${constants_1.pageContentClassnames.animation} > * {
-    animation: ${({ theme }) => `${constants_1.PAGE_CONTENT_ANIMATION} ${theme.transitions.duration.complex * 2}ms`};
+  &.${constants_2.pageContentClassnames.animation} > * {
+    animation: ${({ theme }) => `${constants_2.PAGE_CONTENT_ANIMATION} ${theme.transitions.duration.complex * 2}ms`};
   }
 `;
 exports.Content = styled_1.styled.div `
@@ -77,9 +78,16 @@ exports.Content = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: ${({ theme }) => theme.shape.medium};
 
-    &.${constants_1.pageContentClassnames.contentHasHeader} {
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(.${constants_1.cardGridClassnames.root}) {
+      border: none;
+    }
+
+    &.${constants_2.pageContentClassnames.contentHasHeader} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }

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

@@ -5,5 +5,6 @@ export declare const pageHeaderClassnames: {
     hasTitle: string;
     filters: string;
     quickFilters: string;
+    hasFilters: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/node/components/PageHeader/constants.js

@@ -9,5 +9,6 @@ exports.pageHeaderClassnames = {
     hasTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-title'),
     filters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__filters'),
     quickFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__quick-filters'),
+    hasFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-filters'),
 };
 exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/node/components/PageHeader/styles.js

@@ -18,6 +18,10 @@ exports.Wrapper = styled_1.styled.header `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.fab};
+    top: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+
     display: block;
 
     margin-bottom: ${({ theme }) => theme.spacing(4)};
@@ -34,6 +38,10 @@ exports.Wrapper = styled_1.styled.header `
       grid-column: 3;
       grid-row: 1 / -1;
     }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 
   .${constants_1.pageHeaderClassnames.quickFilters} {
@@ -63,6 +71,10 @@ exports.MobileTitleWrapper = styled_1.styled.div `
     order: 1;
     
     background-color: ${({ theme }) => theme.palette.background.default};
+
+     &:not(.${constants_1.pageHeaderClassnames.hasFilters}) {
+      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+    }
     
     &.${constants_1.pageHeaderClassnames.hasTitle} {
       display: flex;

package/node/components/PageHeader/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;

package/node/components/PageHeader/useLogic/useLogic.js

@@ -6,7 +6,7 @@ const PageContext_1 = require("../../PageContext");
 const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
 const usePageTitle_1 = require("../hooks/usePageTitle");
-const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
+const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, filters, }) => {
     //Переопределение Html title на title из параметров
     (0, usePageTitle_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
@@ -14,6 +14,7 @@ const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backBu
     const mobileClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
         [constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
         [constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+        [constants_1.pageHeaderClassnames.hasFilters]: Boolean(filters),
     }), [title, backButton, isLoading]);
     return {
         isShowMobileActions,

package/node/components/PageLayout/PageLayout.js

@@ -9,12 +9,15 @@ const PageContext_1 = require("../PageContext");
 const PageHeader_1 = require("../PageHeader");
 const PageLayoutContainer_1 = require("../PageLayoutContainer");
 const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");
+const classNames_1 = require("../utils/classNames");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PageLayout = (props) => {
     const { header, content, aside, footer, className, alert, isLoading } = props;
     const { hasAside, ref } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: className, ref: ref, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.MobileAlertWrapper, { children: alert }), (0, react_1.isValidElement)(header)
+    return ((0, jsx_runtime_1.jsxs)(PageContext_1.PageContextProvider, { hasAside: hasAside, isLoading: isLoading, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.DesktopAlertWrapper, { children: alert }), (0, jsx_runtime_1.jsxs)(PageLayoutContainer_1.PageLayoutContainer, { className: (0, classNames_1.classNames)(className, {
+                    [PageLayoutContainer_1.pageLayoutClassnames.withoutHeader]: !header,
+                }), ref: ref, children: [alert && (0, jsx_runtime_1.jsx)(styles_1.MobileAlertWrapper, { children: alert }), (0, react_1.isValidElement)(header)
                         ? header
                         : header && (0, jsx_runtime_1.jsx)(PageHeader_1.PageHeader, { ...header }), isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0434\u0430\u043D\u043D\u044B\u0445..." }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(content) ? (content) : ((0, jsx_runtime_1.jsx)(PageContent_1.PageContent, { ...content, footer: footer })), aside && !(0, react_1.isValidElement)(aside) && ((0, jsx_runtime_1.jsx)(PageAside_1.PageAside, { ...aside })), (0, react_1.isValidElement)(aside) && aside] }))] })] }));
 };

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

@@ -1,3 +1,4 @@
 export declare const pageLayoutClassnames: {
     root: string;
+    withoutHeader: string;
 };

package/node/components/PageLayoutContainer/constants.js

@@ -4,4 +4,5 @@ exports.pageLayoutClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pageLayoutClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('page-layout'),
+    withoutHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-layout_without-header'),
 };

package/node/components/PageLayoutContainer/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylePaper = exports.Wrapper = void 0;
 const Paper_1 = require("../Paper");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   display: grid;
   grid-row-gap: ${({ theme }) => theme.spacing(4)};
@@ -42,5 +43,9 @@ exports.StylePaper = (0, styled_1.styled)(Paper_1.Paper) `
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     border: unset;
+
+    .${constants_1.pageLayoutClassnames.withoutHeader} {
+      padding-top: ${({ theme }) => theme.spacing(4)};
+    }
   }
 `;

package/node/components/PagePinnableAside/styles.js

@@ -34,6 +34,7 @@ exports.Aside = (0, styled_1.styled)('aside', {
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;

package/node/hook-form/FormPageLayoutBase/styles.js

@@ -36,13 +36,14 @@ exports.StyledPageContent = (0, styled_1.styled)(PageContent_1.PageContent) `
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-bottom: ${({ theme }) => theme.spacing(24)};
+    margin-bottom: ${({ theme }) => theme.spacing(20)};
+    padding-top: 0;
 
     &.${constants_1.formPageContentClassnames.formPageContentSecondaryActions} {
-      margin-bottom: ${({ theme }) => theme.spacing(38)};
+      margin-bottom: ${({ theme }) => theme.spacing(32)};
 
       &.${constants_1.formPageContentClassnames.formWizardPageContentActions} {
-        margin-bottom: ${({ theme }) => theme.spacing(52)};
+        margin-bottom: ${({ theme }) => theme.spacing(50)};
       }
     }
   }

package/package.json

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