@cloud-ru/ds-popup-private 1.0.0

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

@@ -0,0 +1,109 @@
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.root{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
+  padding:0;
+  border:0 solid transparent;
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background:transparent;
+  outline:0;
+  min-width:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minHeight, var(--sn-primitive-dimension-32, 32px));
+  border-radius:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-borderRadius, var(--sn-brand-anatomy-radius-window-buttonClosed-m, var(--sn-primitive-dimension-full, 10000px)));
+}
+.root .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root .stateLayer[data-state=borderOnBackground]{
+  border-color: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)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root{
+}
+.root[data-loading] .stateLayer[data-state=borderOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=emptyVersionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading] .stateLayer[data-state=inversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyInversionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}

package/dist/cjs/components/PopupFooter/PopupFooter.d.ts

@@ -0,0 +1,3 @@
+import { PopupFooterProps } from '../../types';
+/** Нижняя action-зона overlay'я (рендерит `children` в `bottomBar`-секции). Раскладка по поверхности. */
+export declare function PopupFooter({ children, className, ...rest }: PopupFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PopupFooter/PopupFooter.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupFooter = PopupFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const overlaySurface_1 = require("../../context/overlaySurface");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Нижняя action-зона overlay'я (рендерит `children` в `bottomBar`-секции). Раскладка по поверхности. */
+function PopupFooter({ children, className, ...rest }) {
+    const surface = (0, overlaySurface_1.useSurfaceTokenSegment)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-surface": surface, "data-test-id": constants_1.TEST_IDS.footer, ...(0, utils_1.extractSupportProps)(rest), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: children }) }));
+}

package/dist/cjs/components/PopupFooter/index.d.ts

@@ -0,0 +1 @@
+export * from './PopupFooter';

package/dist/cjs/components/PopupFooter/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PopupFooter"), exports);

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

@@ -0,0 +1,32 @@
+.root{
+  display:flex;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.root[data-surface=bottomSheet]{
+  touch-action:none;
+  flex-direction:column;
+  align-items:stretch;
+  justify-content:center;
+  padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.root[data-surface=window]{
+  align-items:center;
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.contentWrapper{
+  display:flex;
+  flex-direction:column;
+}
+[data-surface=bottomSheet] .contentWrapper{
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+}
+[data-surface=window] .contentWrapper{
+  flex:1 0 0;
+  align-items:flex-start;
+  justify-content:center;
+}

package/dist/cjs/components/PopupHeader/PopupHeader.d.ts

@@ -0,0 +1,3 @@
+import { PopupHeaderProps } from '../../types';
+/** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
+export declare function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }: PopupHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PopupHeader/PopupHeader.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupHeader = PopupHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+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 classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const overlaySurface_1 = require("../../context/overlaySurface");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
+function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }) {
+    const surface = (0, overlaySurface_1.useSurfaceTokenSegment)();
+    // `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
+    const isSheet = (0, overlaySurface_1.useOverlaySurface)() === overlaySurface_1.OVERLAY_SURFACE.Sheet;
+    const hasHeadline = Boolean(title || onBackButtonClick || actionButton || slotAfterTitle);
+    // Мобильный sheet — крупный `title-l`; desktop window (modal/drawer) — `headline-s`.
+    const titleContent = truncate?.title !== undefined && typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: truncate.title, text: title })) : (title);
+    const subtitleContent = truncate?.subtitle !== undefined && typeof subtitle === 'string' ? ((0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { maxLines: truncate.subtitle, text: subtitle })) : (subtitle);
+    // Потребитель-обёртка может переопределить id слотов; пропущенные берём из `TEST_IDS`.
+    const ids = {
+        header: testIds?.header ?? constants_1.TEST_IDS.header,
+        title: testIds?.title ?? constants_1.TEST_IDS.title,
+        slotAfterTitle: testIds?.slotAfterTitle ?? constants_1.TEST_IDS.slotAfterTitle,
+        subtitle: testIds?.subtitle ?? constants_1.TEST_IDS.subtitle,
+        slotSecondTitle: testIds?.slotSecondTitle ?? constants_1.TEST_IDS.slotSecondTitle,
+        backButton: testIds?.backButton ?? constants_1.TEST_IDS.backButton,
+        actionButton: testIds?.actionButton ?? constants_1.TEST_IDS.actionButton,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-surface": surface, "data-with-before": Boolean(onBackButtonClick) || undefined, ...(0, utils_1.extractSupportProps)(rest), "data-test-id": ids.header, children: [hasHeadline && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headlineWrapper, "data-with-before": Boolean(onBackButtonClick) || undefined, "data-with-after": Boolean(actionButton) || undefined, children: [onBackButtonClick && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: 'm', icon: (0, jsx_runtime_1.jsx)(system_1.ArrowLeftSVG, {}), "aria-label": '\u041D\u0430\u0437\u0430\u0434', onClick: onBackButtonClick, "data-test-id": ids.backButton })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: isSheet ? 'title' : 'headline', size: isSheet ? 'l' : 's', id: titleId, className: styles_module_scss_1.default.title, "data-test-id": ids.title, children: titleContent })), slotAfterTitle && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.slotAfterTitle, "data-test-id": ids.slotAfterTitle, children: slotAfterTitle }))] }), actionButton && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.actionButton, "data-test-id": ids.actionButton, children: actionButton }))] })), subtitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subtitleWrapper, "data-test-id": ids.subtitle, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 'm', className: styles_module_scss_1.default.subtitle, children: subtitleContent }) })), isSheet && slotSecondTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.secondWrapper, "data-test-id": ids.slotSecondTitle, children: slotSecondTitle }))] }));
+}

package/dist/cjs/components/PopupHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './PopupHeader';

package/dist/cjs/components/PopupHeader/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PopupHeader"), exports);

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

@@ -0,0 +1,128 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.root[data-surface=bottomSheet]{
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-surface=window]{
+  align-items:flex-start;
+  align-self:stretch;
+  justify-content:center;
+  gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
+  padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+.root[data-surface=window]:not([data-with-before]){
+  gap:0;
+}
+
+.headlineWrapper{
+  display:flex;
+  align-items:center;
+}
+[data-surface=bottomSheet] .headlineWrapper{
+  touch-action:none;
+  gap:0;
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-before], [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-before]{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=bottomSheet] .headlineWrapper[data-with-after]{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+[data-surface=window] .headlineWrapper{
+  align-self:stretch;
+  gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  height:var(--sn-popupPrivate-anatomy-window-header-headline-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:0;
+}
+[data-surface=window] .headlineWrapper:not([data-with-before]){
+  padding-left:0;
+}
+
+.headline{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+}
+[data-surface=bottomSheet] .headline{
+  flex:1 1 auto;
+  gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
+}
+[data-surface=window] .headline{
+  flex:1 0 0;
+  gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=bottomSheet] .headlineWrapper:not([data-with-before]) .headline{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=bottomSheet] .headlineWrapper:not([data-with-after]) .headline{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+[data-surface=window] .headlineWrapper[data-with-before] .headline{
+  padding-left:0;
+}
+
+.title{
+  flex:0 1 auto;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.slotAfterTitle{
+  display:inline-flex;
+  flex:1 1 auto;
+  align-items:center;
+  min-width:0;
+}
+
+.actionButton{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+}
+
+.subtitleWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  box-sizing:border-box;
+}
+[data-surface=bottomSheet] .subtitleWrapper{
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+[data-surface=window] .subtitleWrapper{
+  align-self:stretch;
+  padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.subtitle{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.secondWrapper{
+  box-sizing:border-box;
+}
+[data-surface=bottomSheet] .secondWrapper{
+  padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+  padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
+}

package/dist/cjs/components/PopupMedia/PopupMedia.d.ts

@@ -0,0 +1,7 @@
+import { PopupMediaProps } from '../../types';
+type MediaProps = PopupMediaProps & {
+    className?: string;
+};
+/** Media-блок над headline: `kind='image'` — во всю ширину, `kind='icon'` — иконка. */
+export declare function PopupMedia({ src, alt, kind, className }: MediaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/PopupMedia/PopupMedia.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupMedia = PopupMedia;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Media-блок над headline: `kind='image'` — во всю ширину, `kind='icon'` — иконка. */
+function PopupMedia({ src, alt, kind = constants_1.MEDIA_KIND.Image, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-media-kind": kind, "data-test-id": constants_1.TEST_IDS.media, children: (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: kind === constants_1.MEDIA_KIND.Image ? styles_module_scss_1.default.image : styles_module_scss_1.default.icon }) }));
+}

package/dist/cjs/components/PopupMedia/index.d.ts

@@ -0,0 +1 @@
+export * from './PopupMedia';

package/dist/cjs/components/PopupMedia/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PopupMedia"), exports);

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

@@ -0,0 +1,27 @@
+.wrapper{
+  touch-action:none;
+  overflow:hidden;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.wrapper[data-media-kind=icon]{
+  padding-top:var(--sn-popupPrivate-anatomy-window-media-icon-paddingTop, var(--sn-primitive-dimension-32, 32px));
+}
+
+.image{
+  display:block;
+  width:100%;
+  min-height:184px;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.icon{
+  display:block;
+  max-width:100%;
+  height:auto;
+}

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './PopupHeader';
+export * from './PopupBody';
+export * from './PopupFooter';
+export * from './PopupMedia';
+export * from './PopupCloseButton';
+export * from './FooterActions';

package/dist/cjs/components/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PopupHeader"), exports);
+__exportStar(require("./PopupBody"), exports);
+__exportStar(require("./PopupFooter"), exports);
+__exportStar(require("./PopupMedia"), exports);
+__exportStar(require("./PopupCloseButton"), exports);
+__exportStar(require("./FooterActions"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Тип media-блока в overlay-шапке.
+ *
+ * - `Image` — изображение во всю ширину (высота 184px), прижато к шапке (убирается
+ *   верхний отступ контент-блока). Горизонтальные паддинги body этим не меняются — они отдельно через `bodyPadding`.
+ * - `Icon`  — иконка с `padding-top: 24px`.
+ *
+ * Соответствие Figma: `bottomSheetMediaImage` (360×184) и `bottomSheetMediaIcon` (360×104).
+ */
+export declare const MEDIA_KIND: {
+    readonly Image: "image";
+    readonly Icon: "icon";
+};
+/**
+ * Ориентация кнопок футера, собранных из `approveButton` / `cancelButton` / `additionalButton`.
+ * Применяется только при ровно двух кнопках (см. `footerActionsOrientation`).
+ *
+ * - `Horizontal` — кнопки в ряд через space-between: secondary слева, primary справа, ширина по
+ *   контенту. Дефолт — точное соответствие Figma `bottomBar.buttonGroup` (cancel/confirm).
+ * - `Vertical`   — кнопки в столбик, full-width (primary сверху).
+ */
+export declare const FOOTER_ACTIONS_ORIENTATION: {
+    readonly Vertical: "vertical";
+    readonly Horizontal: "horizontal";
+};
+/**
+ * Стабильные `data-test-id` для слотов overlay-chrome (header / body / footer / media / close).
+ *
+ * Используются для e2e-локаторов в Playwright и Storybook play-функциях. Реэкспортируется из
+ * `@cloud-ru/ds-bottom-sheet`, чтобы потребитель (приложение) ссылался на те же id, что и наши тесты.
+ *
+ * Значения намеренно сохраняют префикс `bottom-sheet__` — на фазе выноса слоя из `@cloud-ru/ds-bottom-sheet`
+ * они переносятся 1:1 без смены поведения; переименование в `popup-private__*` — отдельная фаза.
+ *
+ * Figma-typo-мост (см. `.claude/rules/figma-integration.md`):
+ *   Figma `badgeHandle`          → код `handle` (показывается при `swipeEnabled`)
+ *   Figma `blackout`             → код `backdrop` / `showBackdrop`
+ *   Figma `topBar`               → код `header` / `onBackButtonClick`
+ *   Figma `bottomBar`            → код `footer`
+ *   Figma `+ slotMedia`          → код `media`
+ *   Figma `+ slotSubtitle`      → код `subtitle` (текст под title)
+ *   Figma `+ slotSecondTitle`    → код `slotSecondTitle` (search/segment, только sheet)
+ *   Figma `+ slotAfterHeadline`  → код `slotAfterTitle`
+ *   Figma `+ slotBottomBar`      → код `footer` (ReactNode)
+ *   Figma `buttonBefore` (48×48) → код auto-back-button по `onBackButtonClick`
+ *   Figma `buttonAfter`  (48×48) → код `actionButton` (ReactNode)
+ */
+export declare const TEST_IDS: {
+    readonly root: "bottom-sheet";
+    readonly backdrop: "bottom-sheet__backdrop";
+    readonly handle: "bottom-sheet__handle";
+    readonly header: "bottom-sheet__header";
+    readonly title: "bottom-sheet__title";
+    readonly slotAfterTitle: "bottom-sheet__slot-after-title";
+    readonly subtitle: "bottom-sheet__subtitle";
+    readonly slotSecondTitle: "bottom-sheet__slot-second-title";
+    readonly backButton: "bottom-sheet__back-button";
+    readonly actionButton: "bottom-sheet__action-button";
+    readonly media: "bottom-sheet__media";
+    readonly closeButton: "popup__close-button";
+    readonly body: "bottom-sheet__body";
+    readonly footer: "bottom-sheet__footer";
+    readonly footerApprove: "bottom-sheet__footer-approve";
+    readonly footerCancel: "bottom-sheet__footer-cancel";
+    readonly footerAdditional: "bottom-sheet__footer-additional";
+    readonly dividerTop: "bottom-sheet__divider-top";
+    readonly dividerBottom: "bottom-sheet__divider-bottom";
+};

package/dist/cjs/constants.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.FOOTER_ACTIONS_ORIENTATION = exports.MEDIA_KIND = void 0;
+/**
+ * Тип media-блока в overlay-шапке.
+ *
+ * - `Image` — изображение во всю ширину (высота 184px), прижато к шапке (убирается
+ *   верхний отступ контент-блока). Горизонтальные паддинги body этим не меняются — они отдельно через `bodyPadding`.
+ * - `Icon`  — иконка с `padding-top: 24px`.
+ *
+ * Соответствие Figma: `bottomSheetMediaImage` (360×184) и `bottomSheetMediaIcon` (360×104).
+ */
+exports.MEDIA_KIND = {
+    Image: 'image',
+    Icon: 'icon',
+};
+/**
+ * Ориентация кнопок футера, собранных из `approveButton` / `cancelButton` / `additionalButton`.
+ * Применяется только при ровно двух кнопках (см. `footerActionsOrientation`).
+ *
+ * - `Horizontal` — кнопки в ряд через space-between: secondary слева, primary справа, ширина по
+ *   контенту. Дефолт — точное соответствие Figma `bottomBar.buttonGroup` (cancel/confirm).
+ * - `Vertical`   — кнопки в столбик, full-width (primary сверху).
+ */
+exports.FOOTER_ACTIONS_ORIENTATION = {
+    Vertical: 'vertical',
+    Horizontal: 'horizontal',
+};
+/**
+ * Стабильные `data-test-id` для слотов overlay-chrome (header / body / footer / media / close).
+ *
+ * Используются для e2e-локаторов в Playwright и Storybook play-функциях. Реэкспортируется из
+ * `@cloud-ru/ds-bottom-sheet`, чтобы потребитель (приложение) ссылался на те же id, что и наши тесты.
+ *
+ * Значения намеренно сохраняют префикс `bottom-sheet__` — на фазе выноса слоя из `@cloud-ru/ds-bottom-sheet`
+ * они переносятся 1:1 без смены поведения; переименование в `popup-private__*` — отдельная фаза.
+ *
+ * Figma-typo-мост (см. `.claude/rules/figma-integration.md`):
+ *   Figma `badgeHandle`          → код `handle` (показывается при `swipeEnabled`)
+ *   Figma `blackout`             → код `backdrop` / `showBackdrop`
+ *   Figma `topBar`               → код `header` / `onBackButtonClick`
+ *   Figma `bottomBar`            → код `footer`
+ *   Figma `+ slotMedia`          → код `media`
+ *   Figma `+ slotSubtitle`      → код `subtitle` (текст под title)
+ *   Figma `+ slotSecondTitle`    → код `slotSecondTitle` (search/segment, только sheet)
+ *   Figma `+ slotAfterHeadline`  → код `slotAfterTitle`
+ *   Figma `+ slotBottomBar`      → код `footer` (ReactNode)
+ *   Figma `buttonBefore` (48×48) → код auto-back-button по `onBackButtonClick`
+ *   Figma `buttonAfter`  (48×48) → код `actionButton` (ReactNode)
+ */
+exports.TEST_IDS = {
+    root: 'bottom-sheet',
+    backdrop: 'bottom-sheet__backdrop',
+    handle: 'bottom-sheet__handle',
+    header: 'bottom-sheet__header',
+    title: 'bottom-sheet__title',
+    slotAfterTitle: 'bottom-sheet__slot-after-title',
+    subtitle: 'bottom-sheet__subtitle',
+    slotSecondTitle: 'bottom-sheet__slot-second-title',
+    backButton: 'bottom-sheet__back-button',
+    actionButton: 'bottom-sheet__action-button',
+    media: 'bottom-sheet__media',
+    closeButton: 'popup__close-button',
+    body: 'bottom-sheet__body',
+    footer: 'bottom-sheet__footer',
+    footerApprove: 'bottom-sheet__footer-approve',
+    footerCancel: 'bottom-sheet__footer-cancel',
+    footerAdditional: 'bottom-sheet__footer-additional',
+    // Два разных разделителя (topBar↔body и body↔footer) — разные id, чтобы каждый адресовался
+    // однозначно (без strict-mode-коллизии `getByTestId`).
+    dividerTop: 'bottom-sheet__divider-top',
+    dividerBottom: 'bottom-sheet__divider-bottom',
+};