@cloud-ru/ds-uikit-product-header 1.5.3 → 1.5.4-preview-71f1139f.0

package/README.md

@@ -656,7 +656,7 @@ export function Basic() {
       profile={{ fullName: 'Ivan Petrov', email: 'ipetrov@cloud.ru', inviteCount: 1 }}
       theme={{ value: 'light' }}
       settingItems={SETTING_ITEMS}
-      items={[{ content: { label: 'Option 1' } }, { content: { label: 'Option 2' } }]}
+      topItems={[{ content: { label: 'Option 1' } }, { content: { label: 'Option 2' } }]}
       data-test-id='header-user-menu-basic'
     />
   );
@@ -693,14 +693,16 @@ export function ControlledTheme() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `items` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — |  |
+| `bottomItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Пункты перед «Выйти из аккаунта». На desktop закреплены снизу |
 | `onClick` | `(() => void)` | — |  |
 | `onLogout` | `(() => void)` | — |  |
 | `open` | `boolean` | — |  |
+| `organizationItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Список организаций. На desktop — единственная прокручиваемая часть меню |
 | `profile` | `UserProfileProps` | `{}` |  |
 | `setOpen` | `((open: boolean) => void)` | — |  |
 | `settingItems` | `BaseItemProps` | — |  |
 | `theme` | `ThemeProps` | — |  |
+| `topItems` | `BaseItemWithoutNonGroup` \| `CommonGroupItem` \| `DroplistProps` \| `ScrollProps` | — | Пункты после темы. На desktop закреплены сверху вместе с профилем и темой |
 | `triggerTooltip` | `string` | — |  |
 
 ##### Related types
@@ -821,5 +823,4 @@ export function Basic() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `isMobile` | `boolean` | — |  |
 | `items` | `BreadcrumbsProps` \| `Item` | — |  |

package/dist/cjs/components/HeaderButton/HeaderButton.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderButton = HeaderButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
-const theme_1 = require("@cloud-ru/ds-theme");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
-const classnames_1 = __importDefault(require("classnames"));
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 /**
  * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
@@ -16,7 +14,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
  * остальное API `Button` и `Tooltip` передаётся как есть.
  */
 function HeaderButton({ tooltip, isMobile, className, ...rest }) {
-    const compactThemeClassName = (0, theme_1.useThemeClassnames)({ density: 'compact' });
     return (
     // FIXME: typescript ломается, если не указать tip явно
     //  пока не разбирался почему так
@@ -29,5 +26,5 @@ function HeaderButton({ tooltip, isMobile, className, ...rest }) {
                 placement: 'bottom',
                 ...tooltip,
                 triggerClassName: styles_module_scss_1.default.tooltipTrigger,
-            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.headerButton, compactThemeClassName, className) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: className }) }));
 }

package/dist/cjs/components/HeaderLayout/HeaderLayout.js

@@ -6,23 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderLayout = HeaderLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
-const theme_1 = require("@cloud-ru/ds-theme");
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
 const constants_1 = require("../../constants");
 const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
-    const headerRef = (0, react_1.useRef)(null);
-    const header = ((0, jsx_runtime_1.jsxs)("header", { ref: headerRef, className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
-    // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
-    // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
-    // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
-    // и класс, поставленный поверх, проиграл бы их собственному.
-    if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, rootRef: headerRef, children: header }));
-    }
-    return header;
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), "data-mobile": isMobile || undefined, ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...rest }), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu, isMobile && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' })] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }))] }));
 }

package/dist/cjs/components/HeaderLayout/styles.module.css

@@ -1,8 +1,3 @@
-.header{
-  box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
-}
-
 .top{
   display:flex;
   align-items:center;
@@ -18,7 +13,6 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }
 
 .left{
@@ -34,4 +28,16 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   height:100%;
+}
+
+.header{
+  box-sizing:border-box;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
+}
+.header[data-mobile] .top{
+  padding:0;
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:0;
 }

package/dist/cjs/components/Logo/Logo.js

@@ -29,7 +29,8 @@ function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest
                     setError(true);
                 } }));
         }
-        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.Prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
+        const showMode = mode && mode !== constants_1.HEADER_LOGO_MODE.Prod;
+        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, "data-with-mode": showMode || undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconHover) })] }), showMode && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { label: constants_1.MAP_LOGO_MODE_TO_LABEL[mode], size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
     }, [error, mode, path, logoThemeClassName]);
     return ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { as: 'a', tooltip: tooltip, className: (0, classnames_1.default)(styles_module_scss_1.default.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...(0, utils_1.extractDataTestProps)(rest) }));
 }

package/dist/cjs/components/Logo/constants.d.ts

@@ -8,3 +8,5 @@ export declare const HEADER_LOGO_MODE: {
 };
 export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
 export declare const MAP_LOGO_MODE_TO_APPEARANCE: Record<Exclude<HeaderLogoMode, 'prod'>, PromoTagProps['appearance']>;
+/** Подпись тега режима, как в макете `logoEvo` */
+export declare const MAP_LOGO_MODE_TO_LABEL: Record<Exclude<HeaderLogoMode, 'prod'>, string>;

package/dist/cjs/components/Logo/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAP_LOGO_MODE_TO_APPEARANCE = exports.HEADER_LOGO_MODE = void 0;
+exports.MAP_LOGO_MODE_TO_LABEL = exports.MAP_LOGO_MODE_TO_APPEARANCE = exports.HEADER_LOGO_MODE = void 0;
 exports.HEADER_LOGO_MODE = {
     Develop: 'develop',
     Stage: 'stage',
@@ -12,3 +12,9 @@ exports.MAP_LOGO_MODE_TO_APPEARANCE = {
     [exports.HEADER_LOGO_MODE.Stage]: 'orange',
     [exports.HEADER_LOGO_MODE.Hybrid]: 'violet',
 };
+/** Подпись тега режима, как в макете `logoEvo` */
+exports.MAP_LOGO_MODE_TO_LABEL = {
+    [exports.HEADER_LOGO_MODE.Develop]: 'dev',
+    [exports.HEADER_LOGO_MODE.Stage]: 'stage',
+    [exports.HEADER_LOGO_MODE.Hybrid]: 'hybrid',
+};

package/dist/cjs/components/Logo/styles.module.css

@@ -9,6 +9,9 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
 }
+.logoWrap[data-with-mode]{
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
 
 .iconStack{
   position:relative;
@@ -36,6 +39,7 @@
 .logo{
   position:relative;
   flex-shrink:0;
+  box-sizing:border-box;
 }
 .logo:active:not([data-disabled]) .iconDefault{
   opacity:0;

package/dist/cjs/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -9,7 +9,6 @@ const button_1 = require("@cloud-ru/ds-button");
 const card_1 = require("@cloud-ru/ds-card");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const promo_tag_1 = require("@cloud-ru/ds-promo-tag");
-const theme_1 = require("@cloud-ru/ds-theme");
 const typography_1 = require("@cloud-ru/ds-typography");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -18,11 +17,10 @@ const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', 'data-test-id': dataTestId, ...rest }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    const compactThemeClassname = (0, theme_1.useThemeClassnames)({ density: 'compact' });
     const handleClose = (0, react_1.useCallback)(e => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     }, [onClose]);
-    return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: styles_module_scss_1.default.closeButton, view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css

@@ -11,6 +11,7 @@
 }
 
 .root{
+  box-sizing:border-box;
   width:100%;
   min-width:0;
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js

@@ -13,6 +13,7 @@ const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const locale_1 = require("../../../../locale");
+const emptyArray_1 = require("../../../../utils/emptyArray");
 const shouldBeOpenedInNewTab_1 = require("../../../../utils/shouldBeOpenedInNewTab");
 const utils_2 = require("../../utils");
 const constants_1 = require("./constants");
@@ -21,7 +22,7 @@ const SortableGroup_1 = require("./helperComponents/SortableGroup");
 const useContentSegmentsSortable_1 = require("./hooks/useContentSegmentsSortable");
 const useSegmentDnd_1 = require("./hooks/useSegmentDnd");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
+function Content({ searchValue, search, rightTop, segments, searchGroups = emptyArray_1.EMPTY_ARRAY, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
     const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
@@ -31,7 +32,7 @@
 .actions{
   display:flex;
   flex-shrink:0;
-  gap:var(--sn-primitive-dimension-8, 8px);
+  gap:0;
   align-items:center;
   margin-left:auto;
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.js

@@ -5,19 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortableGroupCards = SortableGroupCards;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const innerLink_1 = require("../../../../../utils/innerLink");
+const react_1 = require("react");
 const ServiceCard_1 = require("../../../../ServiceCard");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const utils_1 = require("../utils");
 const SubCategory_1 = require("./SubCategory");
 function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
-            if (service.hidden) {
-                return null;
+    const blocks = (0, react_1.useMemo)(() => (0, utils_1.splitIntoBlocks)(items), [items]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBlocks, children: blocks.map(block => {
+            if (block.type === 'subcategory') {
+                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: block.service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, String(groupId) + block.service.id));
             }
-            const key = String(groupId) + service.id;
-            if ((0, innerLink_1.isSubCategoryCard)(service)) {
-                return ((0, jsx_runtime_1.jsx)(SubCategory_1.SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, key));
-            }
-            return ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));
+            return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: block.services.map(service => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, String(groupId) + service.id))) }, String(groupId) + block.services[0].id));
         }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.js

@@ -37,10 +37,10 @@ function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled
         return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: [(0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": 'expanded', "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) })] }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.subcategory, "data-test-id": `${constants_1.TEST_IDS.subcategory}-${service.id}`, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion, { selectionMode: 'single', expanded: isExpanded, onExpandedChange: handleExpandedChange, children: (0, jsx_runtime_1.jsx)(accordion_1.Accordion.CollapseBlockTertiary, { id: subcategoryId, showChevron: false, className: styles_module_scss_2.default.subcategoryAccordion, afterTitle: (0, jsx_runtime_1.jsx)(SubCategoryTitle_1.SubCategoryTitle, { groupId: groupId, service: service, expandable: {
                         value: Boolean(isExpanded),
                         onClick: handleExpandedChange,
-                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
+                    }, showDescription: showDescription, isMobile: isMobile, dragDisabled: dragDisabled, favorite: groupFavoritesEnabled ? favorite : undefined, onServiceClick: onServiceClick }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.groupBody, "data-subcategory-body": true, "data-mobile": isMobile || undefined, "data-show-description": showDescription || undefined, children: nestedItems.map(nestedService => ((0, jsx_runtime_1.jsx)(ServiceCard_1.DraggableServiceCard, { groupId: nestedGroupId, service: nestedService, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: dragDisabled }, nestedGroupId + nestedService.id))) }) }) }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -27,7 +27,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -40,16 +40,13 @@
   min-width:0;
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }
-.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
-  pointer-events:auto;
-  opacity:1;
-}
 
 .group{
   position:relative;
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
@@ -104,11 +101,23 @@
   outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
 }
 
+.groupBlocks{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-2, 2px);
+}
+
 .groupBody{
   display:grid;
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody:not([data-subcategory-body]){
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.groupBody:not([data-show-description]){
+  gap:0;
+}
 @container (width <= 728px){
   .groupBody:not([data-mobile]){
     grid-template-columns:repeat(2, minmax(auto, 1fr));
@@ -125,7 +134,7 @@
 }
 
 .decoration{
-  --highlight-border-width:1px;
+  --highlight-border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
   position:absolute;
   top:0;
   left:0;

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/utils.d.ts

@@ -0,0 +1,10 @@
+import { InnerLink } from '../../../../types';
+export type GroupBlock = {
+    type: 'subcategory';
+    service: InnerLink;
+} | {
+    type: 'cards';
+    services: InnerLink[];
+};
+/** Разбивает сервисы группы на блоки, как в макете: подкатегория — свой блок, подряд идущие карточки — общий. */
+export declare function splitIntoBlocks(items: InnerLink[]): GroupBlock[];

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitIntoBlocks = splitIntoBlocks;
+const innerLink_1 = require("../../../../utils/innerLink");
+/** Разбивает сервисы группы на блоки, как в макете: подкатегория — свой блок, подряд идущие карточки — общий. */
+function splitIntoBlocks(items) {
+    return items.reduce((blocks, service) => {
+        if (service.hidden) {
+            return blocks;
+        }
+        if ((0, innerLink_1.isSubCategoryCard)(service)) {
+            return [...blocks, { type: 'subcategory', service }];
+        }
+        const last = blocks[blocks.length - 1];
+        if (last?.type === 'cards') {
+            last.services.push(service);
+            return blocks;
+        }
+        return [...blocks, { type: 'cards', services: [service] }];
+    }, []);
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/Favorites.js

@@ -14,6 +14,7 @@ const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
+const useDesktopComfortClassName_1 = require("../../../../hooks/useDesktopComfortClassName");
 const locale_1 = require("../../../../locale");
 const utils_2 = require("../../utils");
 const components_1 = require("./components");
@@ -23,6 +24,7 @@ const utils_3 = require("./utils");
 function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const loading = favorite.loading;
+    const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [segment, setSegment] = (0, utils_1.useValueControl)({
         value: favorite.segment,
         defaultValue: constants_1.FAVORITES_SEGMENT.Favorites,
@@ -65,5 +67,5 @@ function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
                                     onChange: favorite.onChange(service.id),
                                 }, ...(0, utils_3.getCommonCardProps)(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : ((0, jsx_runtime_1.jsx)(components_1.FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
     })();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css

@@ -47,16 +47,18 @@
 
 .listScrollInner{
   height:100%;
-  max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-8, 8px));
 }
 .listScrollInner[data-mobile]{
-  max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-40, 40px) + var(--sn-primitive-dimension-4, 4px)) * 6 + var(--sn-primitive-dimension-8, 8px));
 }
 
 .list{
   display:flex;
   flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
@@ -82,6 +84,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-8, 8px);
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/MenuBottom.d.ts

@@ -3,6 +3,7 @@ import { MainMenuSettingsItem } from '../../types';
 type MenuBottomProps = {
     settingItems?: MainMenuSettingsItem[];
     leftBottom: ReactNode;
+    isMobile?: boolean;
 };
-export declare function MenuBottom({ settingItems, leftBottom }: MenuBottomProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuBottom({ settingItems, leftBottom, isMobile }: MenuBottomProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/MenuBottom.js

@@ -11,6 +11,6 @@ const react_1 = require("react");
 const constants_1 = require("../../../../constants");
 const utils_1 = require("../../utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuBottom({ settingItems, leftBottom }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }, item.id))) })), leftBottom] }));
+function MenuBottom({ settingItems, leftBottom, isMobile }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottom, children: [Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-mobile": isMobile || undefined, "data-test-id": constants_1.TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [item.divider === 'before' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), title: item.label, icon: (0, utils_1.getLinkEmblem)(item), onClick: item.onClick, className: styles_module_scss_1.default.bottomCard, "data-test-id": `header__drawer-menu__setting-${item.id}` }), item.divider === 'after' && (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal', className: styles_module_scss_1.default.bottomDivider })] }, item.id))) })), leftBottom] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuBottom/styles.module.css

@@ -1,6 +1,10 @@
 .bottomItems{
   width:100%;
 }
+.bottomItems[data-mobile] .bottomCard{
+  min-height:var(--sn-primitive-dimension-40, 40px);
+  padding-left:var(--sn-primitive-dimension-4, 4px);
+}
 
 .bottom{
   display:flex;

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css

@@ -56,13 +56,14 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
 .menu{
-  --snack-menu-header-height:40px;
+  --snack-menu-header-height:var(--sn-primitive-dimension-40, 40px);
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;

package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/MenuHeaderBrand.d.ts

@@ -3,5 +3,6 @@ export type MenuHeaderBrandProps = {
     logo?: ReactNode;
     onClose(): void;
     className?: string;
+    isMobile?: boolean;
 };
-export declare function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuHeaderBrand({ logo, onClose, className, isMobile }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/MenuHeaderBrand.js

@@ -11,7 +11,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const locale_1 = require("../../../../locale");
 const HeaderButton_1 = require("../../../HeaderButton");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function MenuHeaderBrand({ logo, onClose, className }) {
+function MenuHeaderBrand({ logo, onClose, className, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), children: [logo, (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { className: styles_module_scss_1.default.closeButton, onClick: onClose, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), label: t('close') })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), "data-mobile": isMobile || undefined, children: [logo, (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { className: styles_module_scss_1.default.closeButton, onClick: onClose, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), label: t('close') })] }));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.css

@@ -5,9 +5,18 @@
   box-sizing:border-box;
   background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
+.container[data-mobile]{
+  gap:0;
+}
 
 .closeButton{
   flex-grow:1;
   flex-shrink:1;
   justify-content:flex-start;
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+.closeButton.closeButton[data-view=simple][data-appearance=neutral] [aria-hidden][data-text-opacity]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuMobile = MenuMobile;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
-const theme_1 = require("@cloud-ru/ds-theme");
 const utils_1 = require("@cloud-ru/ds-utils");
 const react_1 = require("react");
 const constants_1 = require("../../../../constants");
@@ -40,9 +39,5 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen(false);
     }, [setOpen]);
-    return (
-    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
-    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
-    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
-    (0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, className: styles_module_scss_1.default.densityScope, children: (0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader, isMobile: true }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom, isMobile: true })] }) }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/styles.module.css

@@ -1,10 +1,5 @@
-.densityScope{
-  display:contents;
-}
-
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
-  padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
 .rightContent{
@@ -22,6 +17,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
   min-height:100%;
   margin-top:calc(var(--sn-primitive-dimension-40, 40px) + var(--sn-divider-anatomy-container-height, var(--sn-primitive-dimension-1, 1px)));
   padding:var(--sn-primitive-dimension-16, 16px);