@astral/ui 4.72.0 → 4.73.0

package/node/components/PageAside/public.js

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

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

@@ -3,3 +3,18 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const MobileAsideHeader: 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>, {}>;
+export declare const AsideHeader: 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>, {}>;
+export declare const StyledDivider: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Divider").DividerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const MobileAsideNavigation: 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/PageAside/styles.js

@@ -1,32 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = void 0;
+exports.MobileAsideNavigation = exports.StyledDivider = exports.AsideHeader = exports.MobileAsideHeader = exports.Wrapper = void 0;
+const Divider_1 = require("../Divider");
+const constants_1 = require("../PageAsideNavigation/constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.aside `
   overflow: auto;
   grid-column: 2;
   grid-row: 2;
 
-  width: ${constants_1.PAGE_ASIDE_WIDTH};
+  width: ${constants_2.PAGE_ASIDE_WIDTH};
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
   border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};
   border-left: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
+  &.${constants_2.pageAsideClassnames.withHeader} {
+    & .${constants_1.pageAsideNavigationClassnames.root} {
+      padding-top: ${({ theme }) => theme.spacing(5)};
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    overflow: unset;
+    display: none;
+  }
+`;
+exports.MobileAsideHeader = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
     order: 3;
 
-    width: unset;
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+    padding: ${({ theme }) => theme.microSpacing(0, 8, 5)};
+  }
+`;
+exports.AsideHeader = styled_1.styled.div `
+  position: relative;
+
+  padding: ${({ theme }) => theme.spacing(1, 0, 4)};
+`;
+exports.StyledDivider = (0, styled_1.styled)(Divider_1.Divider) `
+  position: absolute;
+  bottom: 0;
+  left: ${({ theme }) => theme.spacing(-6)};
 
-    background-color: ${({ theme }) => theme.palette.background.default};  
-    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
-    border-radius: ${({ theme }) => theme.shape.medium};
+  width: ${({ theme }) => `calc(100% + ${theme.spacing(12)})`};
+`;
+exports.MobileAsideNavigation = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
   }
 `;

package/node/components/PageAside/types.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from 'react';
+export type PageAsideProps = {
+    children?: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Заголовок боковой панели
+     */
+    header?: ReactNode;
+    /**
+     * Компонент для отображения навигации
+     * @example
+     * <PageAside navigation={
+     *   <PageAsideNavigation>
+     *     <PageAsideNavigationItem>
+     *       Home
+     *     </PageAsideNavigationItem>
+     *   </PageAsideNavigation>}
+     * />
+     */
+    navigation?: ReactNode;
+};

package/node/components/PageAside/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/PageAsideBlock/styles.js

@@ -25,11 +25,11 @@ exports.Wrapper = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(4, 0)};
 
     :first-of-type {
-      padding: ${({ theme }) => theme.spacing(3, 0, 4)};
+      padding: ${({ theme }) => theme.spacing(0, 0, 4)};
     }
 
     :last-of-type {
-      padding: ${({ theme }) => theme.spacing(4, 0, 3)};
+      padding: ${({ theme }) => theme.spacing(4, 0, 0)};
     }
   }
 `;

package/node/components/PageAsideNavigation/PageAsideNavigation.d.ts

@@ -0,0 +1,2 @@
+import { type PageAsideNavigationProps } from './types';
+export declare const PageAsideNavigation: ({ addonNavigation, children, className, addonNavigationPosition, }: PageAsideNavigationProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/PageAsideNavigation/PageAsideNavigation.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAsideNavigation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useScrollToActiveElement_1 = require("../useScrollToActiveElement");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const PageAsideNavigation = ({ addonNavigation, children, className, addonNavigationPosition = 'start', }) => {
+    const { containerRef } = (0, useScrollToActiveElement_1.useScrollToActiveElement)();
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(constants_1.pageAsideNavigationClassnames.root, className), children: [addonNavigationPosition === 'start' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation })), (0, jsx_runtime_1.jsx)(styles_1.NavigationList, { ref: containerRef, children: children }), addonNavigationPosition === 'end' && addonNavigation && ((0, jsx_runtime_1.jsx)(styles_1.AddonNavigationWrapper, { children: addonNavigation }))] }));
+};
+exports.PageAsideNavigation = PageAsideNavigation;

package/node/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.d.ts

@@ -0,0 +1,18 @@
+import { type ElementType, type ForwardedRef } from 'react';
+import { type PageAsideNavigationItemProps } from './types';
+export declare const PageAsideNavigationItemInner: <TComponent extends ElementType = "a">({ children, component, icon, onClick, isActive, className, ...props }: PageAsideNavigationItemProps<TComponent>, ref: ForwardedRef<TComponent>) => import("react/jsx-runtime").JSX.Element;
+export declare const PageAsideNavigationItem: <TComponent extends ElementType = "a">(props: {
+    children: import("react").ReactNode;
+    className?: string | undefined;
+    isActive?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    icon?: import("react").ReactNode;
+    component?: TComponent | undefined;
+} & Omit<import("react").ComponentPropsWithRef<TComponent>, keyof {
+    children: import("react").ReactNode;
+    className?: string | undefined;
+    isActive?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    icon?: import("react").ReactNode;
+    component?: ElementType | undefined;
+}> & import("react").RefAttributes<TComponent>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/PageAsideNavigation/PageAsideNavigationItem/PageAsideNavigationItem.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAsideNavigationItem = exports.PageAsideNavigationItemInner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forwardRefWithGeneric_1 = require("../../forwardRefWithGeneric");
+const OverflowTypography_1 = require("../../OverflowTypography");
+const cva_1 = require("../../utils/cva");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const itemCva = (0, cva_1.cva)(constants_1.pageAsideNavigationItemClassnames.root, {
+    variants: {
+        isActive: {
+            true: constants_1.pageAsideNavigationItemClassnames.isActive,
+        },
+    },
+});
+const PageAsideNavigationItemInner = ({ children, component, icon, onClick, isActive, className, ...props }, ref) => {
+    const Component = component ?? 'a';
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsxs)(Component, { ref: ref, ...props, className: itemCva({ isActive }), onClick: onClick, "aria-selected": isActive, children: [(0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { children: icon }), (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { children: children })] }) }));
+};
+exports.PageAsideNavigationItemInner = PageAsideNavigationItemInner;
+exports.PageAsideNavigationItem = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(exports.PageAsideNavigationItemInner);

package/node/components/PageAsideNavigation/PageAsideNavigationItem/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const pageAsideNavigationItemClassnames: {
+    root: string;
+    isActive: string;
+};

package/node/components/PageAsideNavigation/PageAsideNavigationItem/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationItemClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.pageAsideNavigationItemClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-aside-navigation__item'),
+    isActive: (0, createUIKitClassname_1.createUIKitClassname)('page-aside-navigation__item_active'),
+};

package/node/components/PageAsideNavigation/PageAsideNavigationItem/index.d.ts

@@ -0,0 +1,3 @@
+export { PageAsideNavigationItem } from './PageAsideNavigationItem';
+export { pageAsideNavigationItemClassnames } from './constants';
+export type { PageAsideNavigationItemProps } from './types';

package/node/components/PageAsideNavigation/PageAsideNavigationItem/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationItemClassnames = exports.PageAsideNavigationItem = void 0;
+var PageAsideNavigationItem_1 = require("./PageAsideNavigationItem");
+Object.defineProperty(exports, "PageAsideNavigationItem", { enumerable: true, get: function () { return PageAsideNavigationItem_1.PageAsideNavigationItem; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideNavigationItemClassnames", { enumerable: true, get: function () { return constants_1.pageAsideNavigationItemClassnames; } });

package/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+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;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = exports.Wrapper = void 0;
+const constants_1 = require("../../SvgIcon/constants");
+const styled_1 = require("../../styled");
+const constants_2 = require("./constants");
+exports.Wrapper = styled_1.styled.li `
+  cursor: pointer;
+
+  height: 44px;
+
+  & .${constants_2.pageAsideNavigationItemClassnames.root} {
+    cursor: pointer;
+    
+    position: relative;
+
+    overflow: hidden;
+    display: flex;
+    gap: ${({ theme }) => theme.spacing(3)};
+    align-items: center;
+
+    width: 100%;
+    margin: 0;
+    padding: ${({ theme }) => theme.microSpacing(6, 5)};
+
+    color: ${({ theme }) => theme.palette.grey[800]};
+    text-decoration: none;
+
+    /* Сбрасываем стандартные стили */
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border: none;
+    border-radius: ${({ theme }) => theme.shape.small};
+    outline: none;
+
+    &:visited, &:link {
+      color: ${({ theme }) => theme.palette.grey[800]};
+    }
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
+
+    &:active {
+      color: ${({ theme }) => theme.palette.primary[900]};
+    }
+  }
+
+  & .${constants_2.pageAsideNavigationItemClassnames.isActive} {
+    background-color: ${({ theme }) => theme.palette.primary[100]};
+
+    &::before {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      width: 10px;
+
+      border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
+    }
+  }
+
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 40px;
+    -webkit-tap-highlight-color: transparent;
+    
+    & .${constants_2.pageAsideNavigationItemClassnames.root} {
+      box-sizing: border-box;
+      height: inherit;
+      padding: ${({ theme }) => theme.microSpacing(5, 6)};
+
+      border: 1px solid ${({ theme }) => theme.palette.grey[400]};
+      border-radius: ${({ theme }) => theme.shape.medium};
+
+      transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
+    duration: theme.transitions.duration.shortest,
+})};
+      
+      &:hover {
+        color: ${({ theme }) => theme.palette.grey[800]};
+      }
+
+      &:active {
+        color: ${({ theme }) => theme.palette.grey[800]};
+
+        border-color: ${({ theme }) => theme.palette.grey[800]};
+      }
+    }
+
+    & .${constants_2.pageAsideNavigationItemClassnames.isActive} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+      border-color: ${({ theme }) => theme.palette.grey[800]};
+
+      &::before {
+        display: none;
+      }
+
+      &:active {
+        border-color: ${({ theme }) => theme.palette.grey[400]};
+      }
+    }
+  }
+`;
+exports.IconWrapper = styled_1.styled.div `
+  display: flex;
+
+  & .${constants_1.svgIconClassnames.root} {
+    width: 20px;
+    height: 20px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/PageAsideNavigation/PageAsideNavigationItem/types.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
+type PageAsideNavigationItemOwnProps<TComponent extends ElementType> = {
+    children: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Флаг активности элемента
+     */
+    isActive?: boolean;
+    /**
+     * Функция вызываемая при клике на элемент
+     */
+    onClick?: () => void;
+    /**
+     * Иконка элемента
+     */
+    icon?: ReactNode;
+    /**
+     * Тип элемента
+     */
+    component?: TComponent;
+};
+export type PageAsideNavigationItemProps<TComponent extends ElementType> = PageAsideNavigationItemOwnProps<TComponent> & Omit<ComponentPropsWithRef<TComponent>, keyof PageAsideNavigationItemOwnProps<ElementType>>;
+export {};

package/node/components/PageAsideNavigation/PageAsideNavigationItem/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/node/components/PageAsideNavigation/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.pageAsideNavigationClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-aside-navigation'),
+};

package/node/components/PageAsideNavigation/index.d.ts

@@ -0,0 +1,4 @@
+export type { PageAsideNavigationProps } from './types';
+export { PageAsideNavigation } from './PageAsideNavigation';
+export { PageAsideNavigationItem, type PageAsideNavigationItemProps, pageAsideNavigationItemClassnames, } from './PageAsideNavigationItem';
+export { pageAsideNavigationClassnames } from './constants';

package/node/components/PageAsideNavigation/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationClassnames = exports.pageAsideNavigationItemClassnames = exports.PageAsideNavigationItem = exports.PageAsideNavigation = void 0;
+var PageAsideNavigation_1 = require("./PageAsideNavigation");
+Object.defineProperty(exports, "PageAsideNavigation", { enumerable: true, get: function () { return PageAsideNavigation_1.PageAsideNavigation; } });
+var PageAsideNavigationItem_1 = require("./PageAsideNavigationItem");
+Object.defineProperty(exports, "PageAsideNavigationItem", { enumerable: true, get: function () { return PageAsideNavigationItem_1.PageAsideNavigationItem; } });
+Object.defineProperty(exports, "pageAsideNavigationItemClassnames", { enumerable: true, get: function () { return PageAsideNavigationItem_1.pageAsideNavigationItemClassnames; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideNavigationClassnames", { enumerable: true, get: function () { return constants_1.pageAsideNavigationClassnames; } });

package/node/components/PageAsideNavigation/public.d.ts

@@ -0,0 +1,3 @@
+export { pageAsideNavigationClassnames } from './constants';
+export { PageAsideNavigation } from './PageAsideNavigation';
+export { PageAsideNavigationItem, type PageAsideNavigationItemProps, pageAsideNavigationItemClassnames, } from './PageAsideNavigationItem';

package/node/components/PageAsideNavigation/public.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageAsideNavigationItemClassnames = exports.PageAsideNavigationItem = exports.PageAsideNavigation = exports.pageAsideNavigationClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageAsideNavigationClassnames", { enumerable: true, get: function () { return constants_1.pageAsideNavigationClassnames; } });
+var PageAsideNavigation_1 = require("./PageAsideNavigation");
+Object.defineProperty(exports, "PageAsideNavigation", { enumerable: true, get: function () { return PageAsideNavigation_1.PageAsideNavigation; } });
+var PageAsideNavigationItem_1 = require("./PageAsideNavigationItem");
+Object.defineProperty(exports, "PageAsideNavigationItem", { enumerable: true, get: function () { return PageAsideNavigationItem_1.PageAsideNavigationItem; } });
+Object.defineProperty(exports, "pageAsideNavigationItemClassnames", { enumerable: true, get: function () { return PageAsideNavigationItem_1.pageAsideNavigationItemClassnames; } });

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavigationList: 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<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const AddonNavigationWrapper: 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/PageAsideNavigation/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddonNavigationWrapper = exports.NavigationList = exports.Wrapper = void 0;
+const styled_1 = require("../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(10)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    width: 100%;
+    padding: ${({ theme }) => theme.spacing(0, 0, 3)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
+  }
+`;
+exports.NavigationList = styled_1.styled.ul `
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Убираем видимую полосу прокрутки в firefox */
+    scrollbar-width: none;
+
+    overflow-x: auto;
+    flex-direction: row;
+    gap: ${({ theme }) => theme.spacing(2)};
+
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+
+    /* Убираем видимую полосу прокрутки в chrome */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+  }
+`;
+exports.AddonNavigationWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+`;

package/node/components/PageAsideNavigation/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type PageAsideNavigationProps = {
+    children?: ReactNode;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Дополнительный контент для навигации
+     */
+    addonNavigation?: ReactNode;
+    /**
+     * Позиционирование дополнительного контента для навигации
+     * @default 'start'
+     */
+    addonNavigationPosition?: 'start' | 'end';
+};

package/node/components/PageAsideNavigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/PageHeader/HeaderContent/styles.js

@@ -20,8 +20,6 @@ exports.PageSubheader = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
-
-    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 exports.DesktopTitleWrapper = styled_1.styled.div `

package/node/components/PageHeader/PageHeader.js

@@ -25,6 +25,12 @@ const rootCva = (0, cva_1.cva)(constants_1.pageHeaderClassnames.root, {
         hasActions: {
             true: constants_1.pageHeaderClassnames.hasActions,
         },
+        hasSubheader: {
+            true: constants_1.pageHeaderClassnames.hasSubheader,
+        },
+        hasFilters: {
+            true: constants_1.pageHeaderClassnames.hasFilters,
+        },
     },
 });
 const PageHeader = (props) => {
@@ -33,6 +39,10 @@ const PageHeader = (props) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
                     hasBackButton: Boolean(backButton),
-                }), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(rootCva({ hasActions: Boolean(actions) }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(rootCva({
+                    hasActions: Boolean(actions),
+                    hasSubheader: Boolean(subheader),
+                    hasFilters: Boolean(filters),
+                }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };
 exports.PageHeader = PageHeader;