@cloud-ru/ds-uikit-product-header-legacy 0.1.21 → 0.1.22-preview-71f1139f.0

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

@@ -6,20 +6,9 @@ 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 styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, isMobile = false, ...rest }) {
-    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)(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: [menu, logo, !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' })] }))] }));
-    // Временная фиксация: на 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)(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: [menu, logo, !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;
   gap:var(--sn-primitive-dimension-8, 8px);
@@ -36,4 +31,17 @@
   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{
+  gap:var(--sn-primitive-dimension-4, 4px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-4, 4px);
 }

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

@@ -59,5 +59,5 @@ function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platf
     const hasBottomItems = Boolean(settingItems?.items.length) || Boolean(sidebarBottomSlot);
     const searchValue = search?.searchValue;
     const showSearch = Boolean(search) && !isInitialEmptyCards && (resultItems.length > 0 || Boolean(searchValue));
-    return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: isNeedRightBlock ? constants_1.DEFAULT_DRAWER_WIDTH : constants_1.LEFT_COLUMN_WIDTH, showButtonClosed: false, className: styles_module_scss_1.default.drawer, "data-test-id": constants_1.TEST_IDS.drawer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, "data-test-id": constants_1.TEST_IDS.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.left, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, "data-test-id": constants_1.TEST_IDS.leftTop, children: leftTop }), !isInitialEmptyCards ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftMain, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.leftMainScroll, overflow: { x: 'hidden' }, barHideStrategy: 'never', "data-test-id": constants_1.TEST_IDS.leftNavList, size: 's', children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.items, children: navGroupItems.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'button', type: 'button', title: item.label, onClick: item.onClick, truncate: { title: 2 }, className: styles_module_scss_1.default.item, "data-test-id": constants_1.TEST_IDS.navGroup(item.id) }, item.id))) }) }) })) : null, !leftTop && isInitialEmptyCards ? (0, jsx_runtime_1.jsx)("div", {}) : null, hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftBottom, "data-test-id": constants_1.TEST_IDS.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftBottomDivider, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftBottomItems, "data-test-id": constants_1.TEST_IDS.leftBottomItems, children: [settingItems?.items.map(item => ((0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles_module_scss_1.default.leftBottomCard, "data-test-id": constants_1.TEST_IDS.setting(item.id) }))), sidebarBottomSlot] })] })) : null] }), isNeedRightBlock ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', className: styles_module_scss_1.default.divider, "data-test-id": constants_1.TEST_IDS.divider }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.right, children: [showSearch && search ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchWrap, "data-test-id": constants_1.TEST_IDS.search, children: (0, jsx_runtime_1.jsx)(NavigationSearch_1.NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', children: [isInitialEmptyCards && rightTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }) : null, !isInitialEmptyCards ? ((0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.rightContent, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems, onLinkChange: onLinkChange })) : null] })] })] })) : null] }) }));
+    return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: isNeedRightBlock ? constants_1.DEFAULT_DRAWER_WIDTH : constants_1.LEFT_COLUMN_WIDTH, showButtonClosed: false, className: styles_module_scss_1.default.drawer, "data-test-id": constants_1.TEST_IDS.drawer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, "data-test-id": constants_1.TEST_IDS.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-test-id": constants_1.TEST_IDS.left, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, "data-test-id": constants_1.TEST_IDS.leftTop, children: leftTop }), !isInitialEmptyCards ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftMain, children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.leftMainScroll, overflow: { x: 'hidden' }, barHideStrategy: 'never', "data-test-id": constants_1.TEST_IDS.leftNavList, size: 's', children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.items, children: navGroupItems.map(item => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'button', type: 'button', title: item.label, onClick: item.onClick, truncate: { title: 2 }, className: styles_module_scss_1.default.item, "data-test-id": constants_1.TEST_IDS.navGroup(item.id) }, item.id))) }) }) })) : null, !leftTop && isInitialEmptyCards ? (0, jsx_runtime_1.jsx)("div", {}) : null, hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftBottom, "data-test-id": constants_1.TEST_IDS.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftBottomDivider, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftBottomItems, "data-test-id": constants_1.TEST_IDS.leftBottomItems, children: [settingItems?.items.length ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftBottomCards, children: settingItems.items.map(item => ((0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles_module_scss_1.default.leftBottomCard, "data-test-id": constants_1.TEST_IDS.setting(item.id) }))) })) : null, sidebarBottomSlot] })] })) : null] }), isNeedRightBlock ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', className: styles_module_scss_1.default.divider, "data-test-id": constants_1.TEST_IDS.divider }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.right, "data-test-id": constants_1.TEST_IDS.right, children: [showSearch && search ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchWrap, "data-test-id": constants_1.TEST_IDS.search, children: (0, jsx_runtime_1.jsx)(NavigationSearch_1.NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', children: [isInitialEmptyCards && rightTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }) : null, !isInitialEmptyCards ? ((0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.rightContent, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems, onLinkChange: onLinkChange })) : null] })] })] })) : null] }) }));
 }

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

@@ -56,9 +56,6 @@
   padding-right:var(--sn-primitive-dimension-16, 16px);
   padding-left:var(--sn-primitive-dimension-16, 16px);
 }
-.items > div{
-  gap:var(--sn-primitive-dimension-4, 4px);
-}
 
 .item{
   flex-shrink:0;
@@ -75,16 +72,21 @@
 
 .leftBottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .leftBottomItems{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-primitive-dimension-16, 16px);
   padding:0 var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
 }
 
+.leftBottomCards{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+
 .leftBottomCard{
   width:100%;
 }
@@ -107,7 +109,7 @@
 .searchWrap{
   flex-shrink:0;
   box-sizing:border-box;
-  padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
+  padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0;
   background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
@@ -115,7 +117,7 @@
   flex:1 1 auto;
   box-sizing:border-box;
   min-height:0;
-  padding:0 var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
+  padding:0 var(--sn-primitive-dimension-16, 16px);
 }
 .scroll:only-child{
   padding-top:var(--sn-primitive-dimension-16, 16px);

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

@@ -8,10 +8,8 @@ const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const adaptive_1 = require("@cloud-ru/ds-adaptive");
 const divider_1 = require("@cloud-ru/ds-divider");
-const theme_1 = require("@cloud-ru/ds-theme");
 const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
 const utils_1 = require("@cloud-ru/ds-utils");
-const classnames_1 = __importDefault(require("classnames"));
 const react_2 = require("react");
 const locale_1 = require("../../../../locale");
 const shouldBeOpenedInNewTab_1 = require("../../../../utils/shouldBeOpenedInNewTab");
@@ -52,13 +50,5 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
     const searchValue = search?.searchValue;
     const showSearch = Boolean(search) && !isInitialEmptyCards && (resultItems.length > 0 || Boolean(searchValue));
     const hasBottomItems = Boolean(settingItems?.items.length);
-    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
-    // `HeaderLayout`, поэтому объявляем плотность здесь же. Провайдер задаёт контекст (его читают
-    // вложенные поверхности, которые переэмитят тему на своём корне), класс — сам дровер: он тему
-    // из контекста не переэмитит и иначе остался бы с плотностью приложения.
-    const comfortThemeClassName = (0, theme_1.useThemeClassnames)({ density: theme_1.DENSITY.Comfort });
-    return (
-    // Обёртка провайдера 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)(desktopDrawer_1.DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: (0, classnames_1.default)(styles_module_scss_1.default.drawerMobile, comfortThemeClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.drawerMobile, children: (0, jsx_runtime_1.jsxs)(adaptive_1.AdaptiveProvider, { layoutType: layoutType, children: [(0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Header, { title: t('mainMenu.navigation'), className: styles_module_scss_1.default.header }), (0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Body, { bodyPadding: false, className: styles_module_scss_1.default.scrollBody, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.scrollMobile, children: [leftTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.main, children: [showSearch && search ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchItem, "data-test-id": constants_1.TEST_IDS.search, children: (0, jsx_runtime_1.jsx)(NavigationSearch_1.NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles_module_scss_1.default.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }) : null, hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomDivider, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => ((0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles_module_scss_1.default.bottomCard, "data-test-id": constants_1.TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: styles_module_scss_1.default.drawerMobile, closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.drawerMobile, children: (0, jsx_runtime_1.jsxs)(adaptive_1.AdaptiveProvider, { layoutType: layoutType, children: [(0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Header, { title: t('mainMenu.navigation') }), (0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Body, { className: styles_module_scss_1.default.scrollBody, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.scrollMobile, children: [leftTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.main, children: [showSearch && search ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchItem, "data-test-id": constants_1.TEST_IDS.search, children: (0, jsx_runtime_1.jsx)(NavigationSearch_1.NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles_module_scss_1.default.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }) : null, hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomDivider, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => ((0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles_module_scss_1.default.bottomCard, "data-test-id": constants_1.TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }));
 }

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

@@ -1,7 +1,3 @@
-.densityScope{
-  display:contents;
-}
-
 .drawerMobile{
   height:100%;
   min-height:0;
@@ -19,11 +15,6 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   box-sizing:border-box;
   min-height:100%;
-  padding:0 var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
-}
-
-.header{
-  padding-top:var(--sn-primitive-dimension-12, 12px);
 }
 
 .leftTop{
@@ -76,13 +67,13 @@
 
 .bottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .bottomItems{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:0;
 }
 
 .bottomCard{

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

@@ -2,6 +2,7 @@
   display:flex;
   flex-direction:column;
   align-self:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px);
 }

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

@@ -16,9 +16,37 @@
   background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-highlight]{
+  --highlight-border-color-from:hsl(155deg 48% 42% / 100%);
+  --highlight-border-color-to:hsl(155deg 48% 42% / 32%);
+  --highlight-background-color-from:hsl(0deg 0% 99% / 20%);
+  --highlight-background-color-to:hsl(152deg 39% 79% / 12%);
+  --highlight-background-color:hsl(0deg 0% 99% / 100%);
+  isolation:isolate;
   background-color:transparent;
-  background-image:linear-gradient(90deg, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 20%, transparent) 2.29%, color-mix(in srgb, var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb)) 12%, transparent) 97.84%), linear-gradient(var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))), var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))));
-  box-shadow:inset 0 0 0 var(--sn-primitive-strokeWeight-strokeRegular, 1px) var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
+}
+.root[data-highlight]::before, .root[data-highlight]::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  z-index:-1;
+}
+.root[data-highlight]::before{
+  inset:0;
+  border-radius:inherit;
+  opacity:0.64;
+  background-image:linear-gradient(90deg, var(--highlight-border-color-from) 0%, var(--highlight-border-color-to) 50%, var(--highlight-border-color-from) 100%);
+}
+.root[data-highlight]::after{
+  inset:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--sn-primitive-strokeWeight-strokeRegular, 1px));
+  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
+}
+:global(.sn-dark) .root[data-highlight]{
+  --highlight-border-color-from:hsl(153deg 30% 55% / 100%);
+  --highlight-border-color-to:hsl(157deg 51% 19% / 100%);
+  --highlight-background-color-from:hsl(240deg 14% 16% / 100%);
+  --highlight-background-color-to:hsl(157deg 51% 19% / 20%);
+  --highlight-background-color:hsl(240deg 14% 16% / 100%);
 }
 
 .title{
@@ -47,6 +75,7 @@
 }
 .services[data-mobile]{
   grid-template-columns:minmax(0, 1fr);
+  gap:0;
 }
 .services > *{
   min-width:0;

package/dist/cjs/style.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;
   gap:var(--sn-primitive-dimension-8, 8px);
@@ -37,6 +32,19 @@
   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{
+  gap:var(--sn-primitive-dimension-4, 4px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
 @charset "UTF-8";
 .logoImg{
   display:block;
@@ -159,9 +167,6 @@
   padding-right:var(--sn-primitive-dimension-16, 16px);
   padding-left:var(--sn-primitive-dimension-16, 16px);
 }
-.items > div{
-  gap:var(--sn-primitive-dimension-4, 4px);
-}
 
 .item{
   flex-shrink:0;
@@ -178,16 +183,21 @@
 
 .leftBottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .leftBottomItems{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-primitive-dimension-16, 16px);
   padding:0 var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
 }
 
+.leftBottomCards{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+
 .leftBottomCard{
   width:100%;
 }
@@ -210,7 +220,7 @@
 .searchWrap{
   flex-shrink:0;
   box-sizing:border-box;
-  padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
+  padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0;
   background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
@@ -218,7 +228,7 @@
   flex:1 1 auto;
   box-sizing:border-box;
   min-height:0;
-  padding:0 var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
+  padding:0 var(--sn-primitive-dimension-16, 16px);
 }
 .scroll:only-child{
   padding-top:var(--sn-primitive-dimension-16, 16px);
@@ -246,10 +256,6 @@
 .bannersWrap{
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
-.densityScope{
-  display:contents;
-}
-
 .drawerMobile{
   height:100%;
   min-height:0;
@@ -267,11 +273,6 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   box-sizing:border-box;
   min-height:100%;
-  padding:0 var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
-}
-
-.header{
-  padding-top:var(--sn-primitive-dimension-12, 12px);
 }
 
 .leftTop{
@@ -324,13 +325,13 @@
 
 .bottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .bottomItems{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:0;
 }
 
 .bottomCard{
@@ -340,6 +341,7 @@
   display:flex;
   flex-direction:column;
   align-self:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px);
 }
@@ -429,9 +431,37 @@
   background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-highlight]{
+  --highlight-border-color-from:hsl(155deg 48% 42% / 100%);
+  --highlight-border-color-to:hsl(155deg 48% 42% / 32%);
+  --highlight-background-color-from:hsl(0deg 0% 99% / 20%);
+  --highlight-background-color-to:hsl(152deg 39% 79% / 12%);
+  --highlight-background-color:hsl(0deg 0% 99% / 100%);
+  isolation:isolate;
   background-color:transparent;
-  background-image:linear-gradient(90deg, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 20%, transparent) 2.29%, color-mix(in srgb, var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb)) 12%, transparent) 97.84%), linear-gradient(var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))), var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))));
-  box-shadow:inset 0 0 0 var(--sn-primitive-strokeWeight-strokeRegular, 1px) var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
+}
+.root[data-highlight]::before, .root[data-highlight]::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  z-index:-1;
+}
+.root[data-highlight]::before{
+  inset:0;
+  border-radius:inherit;
+  opacity:0.64;
+  background-image:linear-gradient(90deg, var(--highlight-border-color-from) 0%, var(--highlight-border-color-to) 50%, var(--highlight-border-color-from) 100%);
+}
+.root[data-highlight]::after{
+  inset:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--sn-primitive-strokeWeight-strokeRegular, 1px));
+  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
+}
+:global(.sn-dark) .root[data-highlight]{
+  --highlight-border-color-from:hsl(153deg 30% 55% / 100%);
+  --highlight-border-color-to:hsl(157deg 51% 19% / 100%);
+  --highlight-background-color-from:hsl(240deg 14% 16% / 100%);
+  --highlight-background-color-to:hsl(157deg 51% 19% / 20%);
+  --highlight-background-color:hsl(240deg 14% 16% / 100%);
 }
 
 .title{
@@ -460,6 +490,7 @@
 }
 .services[data-mobile]{
   grid-template-columns:minmax(0, 1fr);
+  gap:0;
 }
 .services > *{
   min-width:0;

package/dist/esm/components/HeaderLayout/HeaderLayout.js

@@ -1,19 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
-import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { extractSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useRef } from 'react';
 import styles from './styles.module.css';
 export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, isMobile = false, ...rest }) {
-    const headerRef = useRef(null);
-    const header = (_jsxs("header", { ref: headerRef, className: cn(styles.header, className), ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [menu, logo, !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.bottom, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
-    // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
-    // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
-    // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
-    // и класс, поставленный поверх, проиграл бы их собственному.
-    if (isMobile) {
-        return (_jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, rootRef: headerRef, children: header }));
-    }
-    return header;
+    return (_jsxs("header", { className: cn(styles.header, className), "data-mobile": isMobile || undefined, ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [menu, logo, !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.bottom, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
 }

package/dist/esm/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;
   gap:var(--sn-primitive-dimension-8, 8px);
@@ -36,4 +31,17 @@
   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{
+  gap:var(--sn-primitive-dimension-4, 4px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-4, 4px);
 }

package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.js

@@ -53,5 +53,5 @@ export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems
     const hasBottomItems = Boolean(settingItems?.items.length) || Boolean(sidebarBottomSlot);
     const searchValue = search?.searchValue;
     const showSearch = Boolean(search) && !isInitialEmptyCards && (resultItems.length > 0 || Boolean(searchValue));
-    return (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: isNeedRightBlock ? DEFAULT_DRAWER_WIDTH : LEFT_COLUMN_WIDTH, showButtonClosed: false, className: styles.drawer, "data-test-id": TEST_IDS.drawer, children: _jsxs("div", { className: styles.menu, "data-test-id": TEST_IDS.content, children: [_jsxs("div", { className: styles.left, "data-test-id": TEST_IDS.left, children: [_jsx("div", { className: styles.leftTop, "data-test-id": TEST_IDS.leftTop, children: leftTop }), !isInitialEmptyCards ? (_jsx("div", { className: styles.leftMain, children: _jsx(Scroll, { className: styles.leftMainScroll, overflow: { x: 'hidden' }, barHideStrategy: 'never', "data-test-id": TEST_IDS.leftNavList, size: 's', children: _jsx("div", { className: styles.items, children: navGroupItems.map(item => (_jsx(CardServiceLight, { as: 'button', type: 'button', title: item.label, onClick: item.onClick, truncate: { title: 2 }, className: styles.item, "data-test-id": TEST_IDS.navGroup(item.id) }, item.id))) }) }) })) : null, !leftTop && isInitialEmptyCards ? _jsx("div", {}) : null, hasBottomItems ? (_jsxs("div", { className: styles.leftBottom, "data-test-id": TEST_IDS.leftBottom, children: [_jsx("div", { className: styles.leftBottomDivider, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.leftBottomItems, "data-test-id": TEST_IDS.leftBottomItems, children: [settingItems?.items.map(item => (_createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles.leftBottomCard, "data-test-id": TEST_IDS.setting(item.id) }))), sidebarBottomSlot] })] })) : null] }), isNeedRightBlock ? (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical', className: styles.divider, "data-test-id": TEST_IDS.divider }), _jsxs("div", { className: styles.right, "data-test-id": TEST_IDS.right, children: [showSearch && search ? (_jsx("div", { className: styles.searchWrap, "data-test-id": TEST_IDS.search, children: _jsx(NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, _jsxs(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', children: [isInitialEmptyCards && rightTop ? _jsx("div", { className: styles.bannersWrap, children: rightTop }) : null, !isInitialEmptyCards ? (_jsx(Content, { onClose: handleCloseDrawer, className: styles.rightContent, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems, onLinkChange: onLinkChange })) : null] })] })] })) : null] }) }));
+    return (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: isNeedRightBlock ? DEFAULT_DRAWER_WIDTH : LEFT_COLUMN_WIDTH, showButtonClosed: false, className: styles.drawer, "data-test-id": TEST_IDS.drawer, children: _jsxs("div", { className: styles.menu, "data-test-id": TEST_IDS.content, children: [_jsxs("div", { className: styles.left, "data-test-id": TEST_IDS.left, children: [_jsx("div", { className: styles.leftTop, "data-test-id": TEST_IDS.leftTop, children: leftTop }), !isInitialEmptyCards ? (_jsx("div", { className: styles.leftMain, children: _jsx(Scroll, { className: styles.leftMainScroll, overflow: { x: 'hidden' }, barHideStrategy: 'never', "data-test-id": TEST_IDS.leftNavList, size: 's', children: _jsx("div", { className: styles.items, children: navGroupItems.map(item => (_jsx(CardServiceLight, { as: 'button', type: 'button', title: item.label, onClick: item.onClick, truncate: { title: 2 }, className: styles.item, "data-test-id": TEST_IDS.navGroup(item.id) }, item.id))) }) }) })) : null, !leftTop && isInitialEmptyCards ? _jsx("div", {}) : null, hasBottomItems ? (_jsxs("div", { className: styles.leftBottom, "data-test-id": TEST_IDS.leftBottom, children: [_jsx("div", { className: styles.leftBottomDivider, children: _jsx(Divider, {}) }), _jsxs("div", { className: styles.leftBottomItems, "data-test-id": TEST_IDS.leftBottomItems, children: [settingItems?.items.length ? (_jsx("div", { className: styles.leftBottomCards, children: settingItems.items.map(item => (_createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles.leftBottomCard, "data-test-id": TEST_IDS.setting(item.id) }))) })) : null, sidebarBottomSlot] })] })) : null] }), isNeedRightBlock ? (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical', className: styles.divider, "data-test-id": TEST_IDS.divider }), _jsxs("div", { className: styles.right, "data-test-id": TEST_IDS.right, children: [showSearch && search ? (_jsx("div", { className: styles.searchWrap, "data-test-id": TEST_IDS.search, children: _jsx(NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, _jsxs(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', children: [isInitialEmptyCards && rightTop ? _jsx("div", { className: styles.bannersWrap, children: rightTop }) : null, !isInitialEmptyCards ? (_jsx(Content, { onClose: handleCloseDrawer, className: styles.rightContent, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems, onLinkChange: onLinkChange })) : null] })] })] })) : null] }) }));
 }

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

@@ -56,9 +56,6 @@
   padding-right:var(--sn-primitive-dimension-16, 16px);
   padding-left:var(--sn-primitive-dimension-16, 16px);
 }
-.items > div{
-  gap:var(--sn-primitive-dimension-4, 4px);
-}
 
 .item{
   flex-shrink:0;
@@ -75,16 +72,21 @@
 
 .leftBottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .leftBottomItems{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-primitive-dimension-16, 16px);
   padding:0 var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
 }
 
+.leftBottomCards{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+
 .leftBottomCard{
   width:100%;
 }
@@ -107,7 +109,7 @@
 .searchWrap{
   flex-shrink:0;
   box-sizing:border-box;
-  padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
+  padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0;
   background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
@@ -115,7 +117,7 @@
   flex:1 1 auto;
   box-sizing:border-box;
   min-height:0;
-  padding:0 var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
+  padding:0 var(--sn-primitive-dimension-16, 16px);
 }
 .scroll:only-child{
   padding-top:var(--sn-primitive-dimension-16, 16px);

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

@@ -2,10 +2,8 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdaptiveProvider, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
 import { Divider } from '@cloud-ru/ds-divider';
-import { ChildThemeProvider, DENSITY, useThemeClassnames } from '@cloud-ru/ds-theme';
 import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { useValueControl } from '@cloud-ru/ds-utils';
-import cn from 'classnames';
 import { useCallback } from 'react';
 import { headerLegacyLocale } from '../../../../locale/index.js';
 import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab.js';
@@ -46,13 +44,5 @@ export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems,
     const searchValue = search?.searchValue;
     const showSearch = Boolean(search) && !isInitialEmptyCards && (resultItems.length > 0 || Boolean(searchValue));
     const hasBottomItems = Boolean(settingItems?.items.length);
-    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
-    // `HeaderLayout`, поэтому объявляем плотность здесь же. Провайдер задаёт контекст (его читают
-    // вложенные поверхности, которые переэмитят тему на своём корне), класс — сам дровер: он тему
-    // из контекста не переэмитит и иначе остался бы с плотностью приложения.
-    const comfortThemeClassName = useThemeClassnames({ density: DENSITY.Comfort });
-    return (
-    // Обёртка провайдера layout-прозрачная (`display: contents`) — меню рендерится порталом,
-    // лишний бокс в строке шапки не нужен.
-    _jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, className: styles.densityScope, children: _jsx(DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: cn(styles.drawerMobile, comfortThemeClassName), closeOnPopstate: true, "data-test-id": TEST_IDS.drawerMobile, children: _jsxs(AdaptiveProvider, { layoutType: layoutType, children: [_jsx(DesktopDrawerCustom.Header, { title: t('mainMenu.navigation'), className: styles.header }), _jsx(DesktopDrawerCustom.Body, { bodyPadding: false, className: styles.scrollBody, children: _jsxs("div", { className: styles.scrollMobile, children: [leftTop ? _jsx("div", { className: styles.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? (_jsxs("div", { className: styles.main, children: [showSearch && search ? (_jsx("div", { className: styles.searchItem, "data-test-id": TEST_IDS.search, children: _jsx(NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, _jsx(Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? _jsx("div", { className: styles.bannersWrap, children: rightTop }) : null, hasBottomItems ? (_jsxs("div", { className: styles.bottom, "data-test-id": TEST_IDS.leftBottom, children: [_jsx("div", { className: styles.bottomDivider, children: _jsx(Divider, {}) }), _jsx("div", { className: styles.bottomItems, "data-test-id": TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => (_createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles.bottomCard, "data-test-id": TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }) }));
+    return (_jsx(DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: styles.drawerMobile, closeOnPopstate: true, "data-test-id": TEST_IDS.drawerMobile, children: _jsxs(AdaptiveProvider, { layoutType: layoutType, children: [_jsx(DesktopDrawerCustom.Header, { title: t('mainMenu.navigation') }), _jsx(DesktopDrawerCustom.Body, { className: styles.scrollBody, children: _jsxs("div", { className: styles.scrollMobile, children: [leftTop ? _jsx("div", { className: styles.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? (_jsxs("div", { className: styles.main, children: [showSearch && search ? (_jsx("div", { className: styles.searchItem, "data-test-id": TEST_IDS.search, children: _jsx(NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, _jsx(Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? _jsx("div", { className: styles.bannersWrap, children: rightTop }) : null, hasBottomItems ? (_jsxs("div", { className: styles.bottom, "data-test-id": TEST_IDS.leftBottom, children: [_jsx("div", { className: styles.bottomDivider, children: _jsx(Divider, {}) }), _jsx("div", { className: styles.bottomItems, "data-test-id": TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => (_createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles.bottomCard, "data-test-id": TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }));
 }

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

@@ -1,7 +1,3 @@
-.densityScope{
-  display:contents;
-}
-
 .drawerMobile{
   height:100%;
   min-height:0;
@@ -19,11 +15,6 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   box-sizing:border-box;
   min-height:100%;
-  padding:0 var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
-}
-
-.header{
-  padding-top:var(--sn-primitive-dimension-12, 12px);
 }
 
 .leftTop{
@@ -76,13 +67,13 @@
 
 .bottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .bottomItems{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:0;
 }
 
 .bottomCard{

package/dist/esm/components/MainMenu/helperComponents/NavigationSearch/styles.module.css

@@ -2,6 +2,7 @@
   display:flex;
   flex-direction:column;
   align-self:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px);
 }