@cloud-ru/ds-popup-private 1.0.0

package/dist/esm/components/FooterActions/styles.module.css

@@ -0,0 +1,20 @@
+.actions{
+  width:100%;
+}
+.actions > *{
+  max-width:100%;
+}
+
+.single{
+  justify-content:flex-end;
+}
+
+.compact{
+  align-self:flex-end;
+  justify-content:flex-end;
+  width:auto;
+}
+
+.actions.stackInverted{
+  flex-direction:column;
+}

package/dist/esm/components/PopupBody/PopupBody.d.ts

@@ -0,0 +1,3 @@
+import { PopupBodyProps } from '../../types.js';
+/** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
+export declare function PopupBody({ content, children, bodyPadding, className, ...rest }: PopupBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PopupBody/PopupBody.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+/** Контейнер основного содержимого overlay'я. Принимает `content` или `children`. */
+export function PopupBody({ content, children, bodyPadding = true, className, ...rest }) {
+    return (_jsx("div", { className: cn(styles.root, className), ...extractSupportProps(rest), "data-test-id": TEST_IDS.body, "data-no-padding": bodyPadding === false || undefined, children: children ?? content }));
+}

package/dist/esm/components/PopupBody/index.d.ts

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

package/dist/esm/components/PopupBody/index.js

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

package/dist/esm/components/PopupBody/styles.module.css

@@ -0,0 +1,16 @@
+.root{
+  touch-action:pan-y;
+  overflow-y:auto;
+  overscroll-behavior:contain;
+  flex:1 1 auto;
+  box-sizing:border-box;
+  min-height:0;
+  padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.root[data-no-padding]{
+  padding-top:0;
+  padding-right:0;
+  padding-left:0;
+}

package/dist/esm/components/PopupCloseButton/PopupCloseButton.d.ts

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+export type PopupCloseButtonProps = WithSupportProps<{
+    /** Действие при клике. */
+    onClick(): void;
+    /** CSS-класс. */
+    className?: string;
+    /** Доступное имя кнопки. По умолчанию `close popup`. */
+    'aria-label'?: string;
+}>;
+/** Единая кнопка закрытия overlay'я (крестик в правом верхнем углу). */
+export declare function PopupCloseButton({ onClick, className, 'aria-label': ariaLabel, ...rest }: PopupCloseButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PopupCloseButton/PopupCloseButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+/** Единая кнопка закрытия overlay'я (крестик в правом верхнем углу). */
+export function PopupCloseButton({ onClick, className, 'aria-label': ariaLabel = 'close popup', ...rest }) {
+    return (_jsxs("button", { type: 'button', className: cn(styles.root, className), onClick: onClick, "aria-label": ariaLabel, "data-test-id": TEST_IDS.closeButton, ...extractSupportProps(rest), children: [_jsx("div", { className: styles.stateLayer, "aria-hidden": true, "data-state": 'versionOnColor' }), _jsx(CrossSVG, {})] }));
+}

package/dist/esm/components/PopupCloseButton/index.d.ts

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

package/dist/esm/components/PopupCloseButton/index.js

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

package/dist/esm/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/esm/components/PopupFooter/PopupFooter.d.ts

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

package/dist/esm/components/PopupFooter/PopupFooter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { TEST_IDS } from '../../constants.js';
+import { useSurfaceTokenSegment } from '../../context/overlaySurface.js';
+import styles from './styles.module.css';
+/** Нижняя action-зона overlay'я (рендерит `children` в `bottomBar`-секции). Раскладка по поверхности. */
+export function PopupFooter({ children, className, ...rest }) {
+    const surface = useSurfaceTokenSegment();
+    return (_jsx("div", { className: cn(styles.root, className), "data-surface": surface, "data-test-id": TEST_IDS.footer, ...extractSupportProps(rest), children: _jsx("div", { className: styles.contentWrapper, children: children }) }));
+}

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

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

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

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

package/dist/esm/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/esm/components/PopupHeader/PopupHeader.d.ts

@@ -0,0 +1,3 @@
+import { PopupHeaderProps } from '../../types.js';
+/** 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/esm/components/PopupHeader/PopupHeader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { ArrowLeftSVG } from '@cloud-ru/ds-icons/interface/system';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { Typography } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { TEST_IDS } from '../../constants.js';
+import { OVERLAY_SURFACE, useOverlaySurface, useSurfaceTokenSegment } from '../../context/overlaySurface.js';
+import styles from './styles.module.css';
+/** Header overlay'я: back-button + title + slotAfterTitle + actionButton + subtitle + slotSecondTitle. */
+export function PopupHeader({ title, titleId, slotAfterTitle, subtitle, slotSecondTitle, onBackButtonClick, actionButton, truncate, testIds, className, ...rest }) {
+    const surface = useSurfaceTokenSegment();
+    // `slotSecondTitle` (search/segment) есть только в мастере bottomSheet — на window/modal/drawer игнор.
+    const isSheet = useOverlaySurface() === 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' ? (_jsx(TruncateString, { maxLines: truncate.title, text: title })) : (title);
+    const subtitleContent = truncate?.subtitle !== undefined && typeof subtitle === 'string' ? (_jsx(TruncateString, { maxLines: truncate.subtitle, text: subtitle })) : (subtitle);
+    // Потребитель-обёртка может переопределить id слотов; пропущенные берём из `TEST_IDS`.
+    const ids = {
+        header: testIds?.header ?? TEST_IDS.header,
+        title: testIds?.title ?? TEST_IDS.title,
+        slotAfterTitle: testIds?.slotAfterTitle ?? TEST_IDS.slotAfterTitle,
+        subtitle: testIds?.subtitle ?? TEST_IDS.subtitle,
+        slotSecondTitle: testIds?.slotSecondTitle ?? TEST_IDS.slotSecondTitle,
+        backButton: testIds?.backButton ?? TEST_IDS.backButton,
+        actionButton: testIds?.actionButton ?? TEST_IDS.actionButton,
+    };
+    return (_jsxs("div", { className: cn(styles.root, className), "data-surface": surface, "data-with-before": Boolean(onBackButtonClick) || undefined, ...extractSupportProps(rest), "data-test-id": ids.header, children: [hasHeadline && (_jsxs("div", { className: styles.headlineWrapper, "data-with-before": Boolean(onBackButtonClick) || undefined, "data-with-after": Boolean(actionButton) || undefined, children: [onBackButtonClick && (_jsx(Button, { view: 'function', appearance: 'neutral', size: 'm', icon: _jsx(ArrowLeftSVG, {}), "aria-label": '\u041D\u0430\u0437\u0430\u0434', onClick: onBackButtonClick, "data-test-id": ids.backButton })), _jsxs("div", { className: styles.headline, children: [title && (_jsx(Typography, { variant: isSheet ? 'title' : 'headline', size: isSheet ? 'l' : 's', id: titleId, className: styles.title, "data-test-id": ids.title, children: titleContent })), slotAfterTitle && (_jsx("span", { className: styles.slotAfterTitle, "data-test-id": ids.slotAfterTitle, children: slotAfterTitle }))] }), actionButton && (_jsx("span", { className: styles.actionButton, "data-test-id": ids.actionButton, children: actionButton }))] })), subtitle && (_jsx("div", { className: styles.subtitleWrapper, "data-test-id": ids.subtitle, children: _jsx(Typography, { variant: 'body', size: 'm', className: styles.subtitle, children: subtitleContent }) })), isSheet && slotSecondTitle && (_jsx("div", { className: styles.secondWrapper, "data-test-id": ids.slotSecondTitle, children: slotSecondTitle }))] }));
+}

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

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

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

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

package/dist/esm/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/esm/components/PopupMedia/PopupMedia.d.ts

@@ -0,0 +1,7 @@
+import { PopupMediaProps } from '../../types.js';
+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/esm/components/PopupMedia/PopupMedia.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { MEDIA_KIND, TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+/** Media-блок над headline: `kind='image'` — во всю ширину, `kind='icon'` — иконка. */
+export function PopupMedia({ src, alt, kind = MEDIA_KIND.Image, className }) {
+    return (_jsx("div", { className: cn(styles.wrapper, className), "data-media-kind": kind, "data-test-id": TEST_IDS.media, children: _jsx("img", { src: src, alt: alt, className: kind === MEDIA_KIND.Image ? styles.image : styles.icon }) }));
+}

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

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

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

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

package/dist/esm/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/esm/components/index.d.ts

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

package/dist/esm/components/index.js

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

package/dist/esm/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";
+};