@cloud-ru/ds-uikit-product-page-layout 1.5.0 → 1.5.1-preview-a2208aeb.0

package/README.md

@@ -578,6 +578,7 @@ import {
 | `quotas` | `QuotaItem[]` | — | Список квот для отображения |
 | `quotasUrl` | `string` | — | Ссылка на страницу квот по проекту |
 | `size` | `"l"` \| `"m"` \| `"s"` \| `"xs"` | — | Размер <br/> Размер триггера; для `xs` применяется кнопка `s`. |
+| `skeletonRowCount` | `number` | `4` | Количество строк-заглушек, пока идёт загрузка. <br/> Строка — это ряд сетки: в две колонки (desktop-дропдаун) она даёт две карточки, <br/> в одну (mobile, аккордеон `QuotaWidgetMini`) — одну. |
 | `target` | `HTMLAttributeAnchorTarget` | — |  |
 | `tooltip` | `TooltipProps` | — |  |
 | `triggerClassName` | `string` | — | CSS-класс триггера |
@@ -622,6 +623,7 @@ import {
 | `projectName` | `string` | — | Название проекта, по которому отображаются квоты |
 | `quotas` | `QuotaItem` | — | Список квот для отображения |
 | `quotasUrl` | `string` | — | Ссылка на страницу квот по проекту |
+| `skeletonRowCount` | `number` | `4` | Количество строк-заглушек, пока идёт загрузка. <br/> Строка — это ряд сетки: в две колонки (desktop-дропдаун) она даёт две карточки, <br/> в одну (mobile, аккордеон `QuotaWidgetMini`) — одну. |
 
 ## ConditionalPopover
 

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

@@ -4,6 +4,7 @@
   flex-shrink:0;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
+  box-sizing:border-box;
   height:100%;
 }
 
@@ -13,6 +14,7 @@
   flex-shrink:0;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
+  box-sizing:border-box;
   width:100%;
 }
 

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

@@ -1,19 +1,20 @@
 .subtitle{
   display:flex;
   flex-direction:row;
-  gap:var(--sn-primitive-dimension-12, 12px);
+  gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
+  box-sizing:border-box;
 }
 
 .label{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
   display:flex;
   flex-direction:row;
-  gap:var(--sn-primitive-dimension-4, 4px);
+  gap:var(--sn-primitive-dimension-2, 2px);
   align-items:center;
 }

package/dist/cjs/components/Headline/Headline.js

@@ -5,13 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Headline = Headline;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
 const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
 const typography_1 = require("@cloud-ru/ds-typography");
 const utils_1 = require("@cloud-ru/ds-utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Headline({ title, actions, moreActions, slotBeforeTitle, slotAfterTitle, subtitle, truncateTitle, ...rest }) {
+    const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
+    const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
     const needsRender = Boolean(title || slotBeforeTitle || slotAfterTitle || subtitle || actions || moreActions);
     if (!needsRender)
         return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineLayout, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleLayout, children: [slotBeforeTitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.prefixButtonWrapper, children: slotBeforeTitle }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.headline, size: typography_1.SIZE.s, as: 'h1', className: styles_module_scss_1.default.title, children: truncateTitle ? (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: 'end', text: title, maxLines: 1 }) : title }), slotAfterTitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.statusWrapper, children: slotAfterTitle }), moreActions && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.moreActions, children: moreActions })] }), Boolean(actions) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.actions, children: actions })] }), subtitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subtitle, children: subtitle })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineLayout, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleLayout, children: [slotBeforeTitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.prefixButtonWrapper, children: slotBeforeTitle }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.headline, size: typography_1.SIZE.s, as: 'h1', className: styles_module_scss_1.default.title, children: truncateTitle ? (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { variant: 'end', text: title, maxLines: 1 }) : title }), slotAfterTitle && !isMobile && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.statusWrapper, children: slotAfterTitle }), moreActions && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.moreActions, children: moreActions })] }), Boolean(actions) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.actions, children: actions })] }), slotAfterTitle && isMobile && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.statusRow, children: slotAfterTitle }), subtitle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subtitle, children: subtitle })] }));
 }

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

@@ -1,6 +1,8 @@
 .headline{
   display:flex;
   flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
 }
 
 .headlineLayout{
@@ -29,14 +31,14 @@
   display:flex;
   flex-shrink:0;
   align-items:center;
-  min-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  min-height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
 }
 
 .moreActions{
   display:flex;
   flex-shrink:0;
   align-items:center;
-  height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  height:var(--sn-regular-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
   margin-left:auto;
 }
 
@@ -48,7 +50,11 @@
   justify-content:flex-end;
 }
 
+.statusRow{
+  display:flex;
+  align-items:center;
+}
+
 .subtitle{
-  margin-top:var(--sn-primitive-dimension-4, 4px);
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }

package/dist/cjs/components/PageCatalog/mobileStyles.module.css

@@ -1,11 +1,11 @@
 .catalog{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
   box-sizing:border-box;
   width:100%;
   margin:0 auto;
-  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
 }
 
 .content{

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

@@ -1,12 +1,12 @@
 .catalog{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
   box-sizing:border-box;
   min-width:992px;
   max-width:min(100%, 1248px);
   margin:0 auto;
-  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
 }
 
 .content{

package/dist/cjs/components/PageForm/MobilePageForm.js

@@ -47,10 +47,10 @@ function MobilePageFormBase({ children, title, subtitle, className, footer, step
                                     setOpenMoreContentIndex(idx);
                                     setOpenMore(false);
                                 },
-                            })), children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, {}), size: 'm' }) })) : undefined }), stepper] }), sideBlock && ((0, jsx_runtime_1.jsx)(modal_1.ModalCustom, { open: openMoreContentIndex !== undefined, onClose: () => setOpenMoreContentIndex(undefined), 
+                            })), children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, {}), size: 's' }) })) : undefined }), stepper] }), sideBlock && ((0, jsx_runtime_1.jsx)(modal_1.ModalCustom, { open: openMoreContentIndex !== undefined, onClose: () => setOpenMoreContentIndex(undefined), 
                 // Высоту листа задаёт сам sideBlock-элемент (`snapPoints`); напр. `[1]` — на всю высоту.
                 // По умолчанию — по высоте контента.
-                snapPoints: sideBlock[openMoreContentIndex ?? 0].snapPoints, children: (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { content: sideBlock[openMoreContentIndex ?? 0].content }) })), (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.body, children: children }), (priceSummary || footer) && ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.footer, children: [priceSummary && ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.priceSummary, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.m, className: mobileStyles_module_scss_1.default.priceSummaryText, children: "\u041E\u0446\u0435\u043D\u043A\u0430 \u0431\u044E\u0434\u0436\u0435\u0442\u0430" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { open: openPriceSummary, onOpenChange: setOpenPriceSummary, content: (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.modalContent, children: priceSummary.content }), "data-test-id": constants_1.TEST_IDS.pageForm.priceSummarySheet, children: (0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.priceSummaryRight, "data-test-id": constants_1.TEST_IDS.pageForm.priceSummaryTrigger, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.label, size: typography_1.SIZE.l, className: mobileStyles_module_scss_1.default.priceSummaryTotal, children: priceSummary.total }), priceSummary.content && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 'm', icon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}) }))] }) })] })), footer && ((0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { size: 'l', filled: true, 
+                snapPoints: sideBlock[openMoreContentIndex ?? 0].snapPoints, children: (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { content: sideBlock[openMoreContentIndex ?? 0].content }) })), (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.body, children: children }), (priceSummary || footer) && ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.footer, children: [priceSummary && ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.priceSummary, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.m, className: mobileStyles_module_scss_1.default.priceSummaryText, children: "\u041E\u0446\u0435\u043D\u043A\u0430 \u0431\u044E\u0434\u0436\u0435\u0442\u0430" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { open: openPriceSummary, onOpenChange: setOpenPriceSummary, content: (0, jsx_runtime_1.jsx)("div", { className: mobileStyles_module_scss_1.default.modalContent, children: priceSummary.content }), "data-test-id": constants_1.TEST_IDS.pageForm.priceSummarySheet, children: typeof priceSummary.total === 'string' ? ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 's', label: priceSummary.total, icon: priceSummary.content ? (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}) : undefined, iconPosition: button_1.ICON_POSITION.After, "data-test-id": constants_1.TEST_IDS.pageForm.priceSummaryTrigger })) : ((0, jsx_runtime_1.jsxs)("div", { className: mobileStyles_module_scss_1.default.priceSummaryRight, "data-test-id": constants_1.TEST_IDS.pageForm.priceSummaryTrigger, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.label, size: typography_1.SIZE.s, children: priceSummary.total }), priceSummary.content && (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, { size: 16 })] })) })] })), footer && ((0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { size: 'm', filled: true, 
                         // 2 кнопки — в ряд (делят ширину); 3 — в столбик (правило футеров).
                         vertical: [footer.buttonPrimary, footer.buttonSecondary, footer.buttonAdditional].filter(Boolean).length >= 3, renderAction: (button, slot) => {
                             const tooltip = footerTooltips?.[slot];

package/dist/cjs/components/PageForm/mobileStyles.module.css

@@ -4,24 +4,24 @@
   display:flex;
   flex-direction:column;
   flex-grow:1;
-  gap:var(--sn-primitive-dimension-16, 16px);
+  gap:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
   box-sizing:border-box;
   width:100%;
   min-height:100%;
-  padding:var(--sn-primitive-dimension-16, 16px);
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .body{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
   flex:1;
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .footer{
@@ -30,12 +30,11 @@
   bottom:0;
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-8, 8px);
   box-sizing:border-box;
-  margin:0 calc(0px - var(--sn-primitive-dimension-16, 16px)) calc(0px - var(--sn-primitive-dimension-16, 16px));
-  padding:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px);
+  margin:0 calc(0px - var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) calc(0px - var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
+  padding:var(--sn-primitive-dimension-8, 8px) var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))) var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
   border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .priceSummary{
@@ -43,7 +42,6 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   justify-content:space-between;
-  min-height:var(--sn-primitive-dimension-40, 40px);
 }
 
 .priceSummaryText{
@@ -53,7 +51,9 @@
 .priceSummaryRight{
   cursor:pointer;
   display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
 }
 
 .header{
@@ -62,12 +62,12 @@
   top:0;
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-16, 16px);
+  gap:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
   box-sizing:border-box;
-  margin:calc(0px - var(--sn-primitive-dimension-16, 16px)) calc(0px - var(--sn-primitive-dimension-16, 16px)) 0;
-  padding:var(--sn-primitive-dimension-16, 16px);
+  margin:calc(0px - var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) calc(0px - var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) 0;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
   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)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .modalContent{

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

@@ -6,7 +6,7 @@
   min-width:-moz-fit-content;
   min-width:fit-content;
   min-height:100%;
-  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
 }
 
 .form{
@@ -15,10 +15,6 @@
   min-height:100%;
 }
 
-.container > .form[data-size=l]{
-  padding:var(--sn-primitive-dimension-56, 56px);
-}
-
 .formContent{
   display:flex;
   flex:1;
@@ -31,15 +27,15 @@
 }
 
 .body{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
   flex:1;
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .footer{
@@ -52,26 +48,22 @@
   position:sticky;
   bottom:0;
   box-sizing:border-box;
-  margin:calc(0px - var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)))) calc(0px - var(--sn-primitive-dimension-56, 56px)) calc(0px - var(--sn-primitive-dimension-56, 56px));
-  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px))) var(--sn-primitive-dimension-56, 56px) var(--sn-primitive-dimension-56, 56px);
+  margin:calc(0px - var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))))));
+  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
   border-radius:0 0 var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px))) var(--sn-block-anatomy-l-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-  transition:border-radius 0.15s ease, padding 0.15s ease;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .footerSticky::before{
   pointer-events:none;
   content:"";
   position:absolute;
   inset:0;
-  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
   border-radius:inherit;
   opacity:0;
   transition:opacity 0.15s ease;
 }
 
-.footerStuck{
-  padding:var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-}
 .footerStuck::before{
   opacity:1;
 }
@@ -79,7 +71,7 @@
 .footerSentinel{
   pointer-events:none;
   position:absolute;
-  bottom:calc(0px - var(--sn-primitive-dimension-56, 56px));
+  bottom:calc(0px - var(--sn-block-anatomy-l-padding, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))))));
   left:50%;
   transform:translateX(-50%);
   width:var(--sn-primitive-dimension-2, 2px);
@@ -95,7 +87,7 @@
 
 .sideItems{
   position:sticky;
-  top:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  top:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);

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

@@ -5,7 +5,7 @@
   box-sizing:border-box;
   width:100%;
   height:100%;
-  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
 }
 
 .spinner{

package/dist/cjs/components/PageServices/mobileStyles.module.css

@@ -7,16 +7,16 @@
 }
 
 .sidebarSelect{
-  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  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)));
 }
 
 .body{
   display:flex;
   flex-direction:column;
   flex-grow:1;
-  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
   box-sizing:border-box;
-  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
 }
 
 .childWrapper{

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

@@ -2,6 +2,7 @@
   display:flex;
   flex-direction:row-reverse;
   justify-content:flex-end;
+  box-sizing:border-box;
   min-width:100%;
   height:100%;
 }
@@ -29,10 +30,10 @@
   position:relative;
   display:flex;
   flex-direction:column;
-  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
   box-sizing:border-box;
   min-height:100%;
-  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
 }
 .container[data-limited=true]{
   max-width:1248px;

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/SidebarSelect.js

@@ -35,7 +35,7 @@ function SidebarSelectBase({ className, items, footerItems = [], selected, onSel
     };
     const allItems = (0, react_1.useMemo)(() => [...list, ...footerList], [list, footerList]);
     const shouldShowSearch = hasSearch ?? (allItems.length > 15 || Boolean(searchValue));
-    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', selection: { mode: 'single', value: selected, onChange: handleSelect }, items: allItems, open: isOpen, onOpenChange: setIsOpen, collapse: searchValue ? searchCollapseState : collapse || selectedCollapsedState, search: shouldShowSearch ? { value: searchValue, onChange: setSearchValue } : undefined, scrollToSelectedItem: true, children: (0, jsx_runtime_1.jsxs)("div", { role: 'button', tabIndex: 0, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-test-id": constants_1.TEST_IDS.sidebarSelect.trigger, ...(0, utils_1.extractSupportProps)(otherProps), children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.triggerText, text: selectedItem.item?.label || '' }), selectedItem.item?.afterContent, isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', selection: { mode: 'single', value: selected, onChange: handleSelect }, items: allItems, open: isOpen, onOpenChange: setIsOpen, collapse: searchValue ? searchCollapseState : collapse || selectedCollapsedState, search: shouldShowSearch ? { value: searchValue, onChange: setSearchValue } : undefined, scrollToSelectedItem: true, children: (0, jsx_runtime_1.jsxs)("div", { role: 'button', tabIndex: 0, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-test-id": constants_1.TEST_IDS.sidebarSelect.trigger, ...(0, utils_1.extractSupportProps)(otherProps), children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.triggerText, text: selectedItem.item?.label || '' }), selectedItem.item?.afterContent, (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.chevron, children: isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) })] }) }));
 }
 /**
  * Мобильный select-сайдбар. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы адаптивный

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/styles.module.css

@@ -1,19 +1,27 @@
 .wrapper{
-  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
-  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
-  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
-  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
   cursor:pointer;
   display:flex;
-  gap:var(--sn-primitive-dimension-8, 8px);
+  gap:var(--sn-list-anatomy-size-m-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
   align-items:center;
-  height:var(--sn-primitive-dimension-48, 48px);
-  padding:0 var(--sn-primitive-dimension-12, 12px);
-  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  box-sizing:border-box;
+  padding:var(--sn-list-anatomy-size-m-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-list-anatomy-size-m-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
 }
 
 .triggerText{
   flex-grow:1;
+  padding:var(--sn-list-anatomy-size-m-listItem-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-list-anatomy-size-m-listItem-contentWrapper-textWrapper-textContent-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+}
+
+.chevron{
+  display:flex;
+  flex-shrink:0;
+  padding-block:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
+  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/PageSidebar/helperComponents/SidebarTitle/styles.module.css

@@ -3,6 +3,7 @@
   flex-direction:row;
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
+  box-sizing:border-box;
   min-width:0;
 }
 

package/dist/cjs/components/PageSidebar/hooks/useItemsCreator.js

@@ -9,7 +9,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const list_1 = require("@cloud-ru/ds-list");
 const tooltip_1 = require("@cloud-ru/ds-tooltip");
-const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const constants_1 = require("../../../constants");
 const locale_1 = require("../../../locale");
@@ -31,7 +30,7 @@ function useTopPinnedContent(header, hasSearch) {
                             // Кнопка поиска живёт в `content` рядом с заголовком/полем, а не в `afterContent`:
                             // отдельный слот `afterContent` центрируется по-своему и ломает вертикальное
                             // выравнивание кнопки с полем.
-                            content: ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.pinnedHeaderSlot, hasSearch && searchOpened && styles_module_scss_1.default.pinnedHeaderSlotSearch), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pinnedHeaderContent, children: 
+                            content: ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.pinnedHeaderSlot, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pinnedHeaderContent, children: 
                                         // При открытом поиске строка заголовка заменяется полем поиска (без наложения).
                                         hasSearch && searchOpened ? ((0, jsx_runtime_1.jsx)(SidebarSearch_1.SidebarSearch, {})) : ((0, jsx_runtime_1.jsx)(SidebarTitle_1.SidebarTitle, { title: header.label, icon: header.icon, afterContent: header.afterContent })) }), hasSearch && (0, jsx_runtime_1.jsx)(SidebarSearchToggle_1.SidebarSearchToggle, {})] })),
                             inactive: true,

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

@@ -1,4 +1,5 @@
 .wrapper{
+  box-sizing:border-box;
   width:256px;
 }
 .wrapper[data-collapsed]{
@@ -41,12 +42,15 @@
   box-sizing:border-box;
   padding:var(--sn-primitive-dimension-4, 4px) 0;
   border-right:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 .wrapper .content[data-collapsed]{
-  margin:var(--sn-primitive-dimension-4, 4px);
+  flex-shrink:0;
+  width:256px;
+  margin:var(--sn-primitive-dimension-4, 4px) 0 var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
   border-right:none;
-  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
 }
 .wrapper .list{
   position:relative;
@@ -70,7 +74,7 @@
 }
 
 .button{
-  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
 }
 
 .pinnedHeaderSlot{
@@ -79,14 +83,11 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   min-height:calc(var(--sn-primitive-dimension-44, 44px) - var(--sn-primitive-strokeWeight-strokeRegular, 1px));
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
 }
 
 .pinnedHeaderContent{
   display:flex;
   flex-grow:1;
   min-width:0;
-}
-
-.pinnedHeaderSlotSearch{
-  padding-inline:var(--sn-primitive-dimension-4, 4px);
 }

package/dist/cjs/components/TreeNavigation/TreeNavigation.js

@@ -23,5 +23,5 @@ function TreeNavigation({ header: { title, icon, description, status, actions },
     const isFixed = mode === constants_1.TREE_NAVIGATION_MODE.Fixed;
     const isAsideOpen = isFixed || (mode === constants_1.TREE_NAVIGATION_MODE.Aside && Boolean(open));
     const menu = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(helperComponents_1.Menu, { menuItems: items, menuTitle: menuTitle, enableShrinkMenuButton: enableShrinkMenuButton, withDefaultOpenedMenuList: withDefaultOpenedMenuList, selected: selected, onSelect: onSelect })), [onSelect, selected, items, menuTitle, enableShrinkMenuButton, withDefaultOpenedMenuList]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleInner, children: [!isFixed && ((0, jsx_runtime_1.jsx)(helperComponents_1.ConditionalPopover, { isOpen: Boolean(open), onOpenChange: setOpen, tip: menu, withPopover: mode === constants_1.TREE_NAVIGATION_MODE.Popover, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Simple, appearance: button_1.APPEARANCE.Neutral, size: button_1.SIZE.S, "aria-label": open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu'), icon: open ? (0, jsx_runtime_1.jsx)(product_1.CloseSVG, {}) : (0, jsx_runtime_1.jsx)(product_1.BurgerSVG, {}), onClick: () => setOpen(!open) }) }) })), icon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.icon, children: icon }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.l, className: styles_module_scss_1.default.title, children: title }), status && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(status_1.Status, { ...status }) }))] }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, className: styles_module_scss_1.default.description, children: description }))] }), actions && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerActions, children: actions })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [isAsideOpen && (0, jsx_runtime_1.jsx)("aside", { className: styles_module_scss_1.default.sidebar, children: menu }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.main, contentClassName), children: content })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleInner, children: [!isFixed && ((0, jsx_runtime_1.jsx)(helperComponents_1.ConditionalPopover, { isOpen: Boolean(open), onOpenChange: setOpen, tip: menu, withPopover: mode === constants_1.TREE_NAVIGATION_MODE.Popover, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: button_1.SIZE.S, "aria-label": open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu'), icon: open ? (0, jsx_runtime_1.jsx)(product_1.CloseSVG, {}) : (0, jsx_runtime_1.jsx)(product_1.BurgerSVG, {}), onClick: () => setOpen(!open) }) }) })), icon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.icon, children: icon }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.l, className: styles_module_scss_1.default.title, children: title }), status && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(status_1.Status, { ...status }) }))] }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, className: styles_module_scss_1.default.description, children: description }))] }), actions && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerActions, children: actions })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [isAsideOpen && (0, jsx_runtime_1.jsx)("aside", { className: styles_module_scss_1.default.sidebar, children: menu }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.main, contentClassName), children: content })] })] }));
 }

package/dist/cjs/components/TreeNavigation/helperComponents/ConditionalPopover/ConditionalPopover.js

@@ -9,7 +9,7 @@ const popover_1 = require("@cloud-ru/ds-popover");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }) {
     if (withPopover) {
-        return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: styles_module_scss_1.default.popover, open: isOpen, onOpenChange: nextOpen => onOpenChange(nextOpen), content: tip, trigger: popover_1.TRIGGER.Click, placement: popover_1.PLACEMENT.BottomStart, children: children }));
+        return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { open: isOpen, onOpenChange: nextOpen => onOpenChange(nextOpen), content: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.content, children: tip }), trigger: popover_1.TRIGGER.Click, placement: popover_1.PLACEMENT.BottomStart, children: children }));
     }
     return children;
 }

package/dist/cjs/components/TreeNavigation/helperComponents/ConditionalPopover/styles.module.css

@@ -1,6 +1,4 @@
-.popover{
-  max-height:80%;
-}
-.popover > div{
+.content{
   overflow:auto;
+  max-height:80vh;
 }

package/dist/cjs/components/TreeNavigation/helperComponents/Menu/Menu.js

@@ -21,5 +21,5 @@ function Menu({ menuTitle, menuItems, enableShrinkMenuButton = true, withDefault
     const handleExpandAll = () => setExpandedNodes((0, utils_1.getExpandedNodes)(menuItems));
     const handleCollapseAll = () => setExpandedNodes([]);
     const showSubheader = Boolean(menuTitle || enableShrinkMenuButton);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sidebar, children: [showSubheader && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subheader, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.m, children: menuTitle }), enableShrinkMenuButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Simple, appearance: button_1.APPEARANCE.Neutral, label: isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll'), icon: isExpanded ? (0, jsx_runtime_1.jsx)(product_1.HorizontalMenuCloseSVG, {}) : (0, jsx_runtime_1.jsx)(product_1.HorizontalMenuOpenSVG, {}), onClick: isExpanded ? handleCollapseAll : handleExpandAll }))] })), (0, jsx_runtime_1.jsx)(tree_1.Tree, { data: menuItems, selectionMode: 'single', expandedNodes: expandedNodes, onExpand: setExpandedNodes, selected: selected, onSelect: onSelect })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sidebar, children: [showSubheader && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subheader, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.m, children: menuTitle }), enableShrinkMenuButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: 's', label: isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll'), icon: isExpanded ? (0, jsx_runtime_1.jsx)(product_1.HorizontalMenuCloseSVG, {}) : (0, jsx_runtime_1.jsx)(product_1.HorizontalMenuOpenSVG, {}), onClick: isExpanded ? handleCollapseAll : handleExpandAll }))] })), (0, jsx_runtime_1.jsx)(tree_1.Tree, { data: menuItems, selectionMode: 'single', expandedNodes: expandedNodes, onExpand: setExpandedNodes, selected: selected, onSelect: onSelect })] }));
 }

package/dist/cjs/components/TreeNavigation/helperComponents/Menu/styles.module.css

@@ -1,7 +1,8 @@
 .sidebar{
   display:flex;
   flex-direction:column;
-  gap:var(--sn-primitive-dimension-12, 12px);
+  gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
   min-width:292px;
 }