@cloud-ru/ds-uikit-product-page-layout 1.0.0

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

@@ -0,0 +1,13 @@
+import { DesktopPageCatalogProps } from './DesktopPageCatalog.js';
+import { MobilePageCatalogProps } from './MobilePageCatalog.js';
+export type PageCatalogProps = Omit<DesktopPageCatalogProps, 'actions'> & Pick<MobilePageCatalogProps, 'actions' | 'maxVisibleActionsItems'>;
+/**
+ * Адаптивный `PageCatalog`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageCatalog` со структурированными `actions`; на остальных раскладках оборачивает `actions`
+ * в `DesktopActions` и отдаёт `DesktopPageCatalog`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export declare function PageCatalog({ actions, maxVisibleActionsItems, ...props }: PageCatalogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageCatalog {
+    var displayName: string;
+}

package/dist/esm/components/PageCatalog/PageCatalog.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DesktopActions } from '../Actions/index.js';
+import { DesktopPageCatalog } from './DesktopPageCatalog.js';
+import { MobilePageCatalog } from './MobilePageCatalog.js';
+/**
+ * Адаптивный `PageCatalog`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageCatalog` со структурированными `actions`; на остальных раскладках оборачивает `actions`
+ * в `DesktopActions` и отдаёт `DesktopPageCatalog`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export function PageCatalog({ actions, maxVisibleActionsItems, ...props }) {
+    const { layoutType } = useAdaptiveLayout();
+    if (isMobileLayout(layoutType)) {
+        return _jsx(MobilePageCatalog, { actions: actions, maxVisibleActionsItems: maxVisibleActionsItems, ...props });
+    }
+    const actionsNode = actions ? _jsx(DesktopActions, { items: actions }) : undefined;
+    return _jsx(DesktopPageCatalog, { ...props, actions: actionsNode });
+}
+PageCatalog.displayName = 'PageCatalog';

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

@@ -0,0 +1,3 @@
+export * from './PageCatalog.js';
+export * from './DesktopPageCatalog.js';
+export * from './MobilePageCatalog.js';

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

@@ -0,0 +1,3 @@
+export * from './PageCatalog.js';
+export * from './DesktopPageCatalog.js';
+export * from './MobilePageCatalog.js';

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

@@ -0,0 +1,15 @@
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-l, 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));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}

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

@@ -0,0 +1,16 @@
+.catalog{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  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));
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+}

package/dist/esm/components/PageForm/DesktopPageForm.d.ts

@@ -0,0 +1,5 @@
+import { DesktopPageFormProps } from './types.js';
+export declare function DesktopPageForm({ children, stepper, title, subtitle, className, footer, sideBlock, priceSummary, stickyFooter, ...rest }: DesktopPageFormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DesktopPageForm {
+    var displayName: string;
+}

package/dist/esm/components/PageForm/DesktopPageForm.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Block, SIZE as BLOCK_SIZE } from '@cloud-ru/ds-block';
+import { APPEARANCE, SIZE, VIEW } from '@cloud-ru/ds-button';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { Headline } from '../Headline/index.js';
+import { useButtonWithTooltip, useGetButtonLabel, useStickyFooterShadow } from './hooks.js';
+import styles from './styles.module.css';
+export function DesktopPageForm({ children, stepper, title, subtitle, className, footer, sideBlock, priceSummary, stickyFooter, ...rest }) {
+    const getButtonLabel = useGetButtonLabel();
+    const { sentinelRef, atBottom } = useStickyFooterShadow(stickyFooter);
+    const moreItems = useMemo(() => [priceSummary?.content].concat(sideBlock?.map(item => item.content)).filter(Boolean), [priceSummary?.content, sideBlock]);
+    const PrimaryButton = useButtonWithTooltip({ view: VIEW.Filled, tooltip: footer?.buttonPrimary.tooltip });
+    const SecondaryButton = useButtonWithTooltip({ view: VIEW.Outline, tooltip: footer?.buttonSecondary?.tooltip });
+    const AdditionalButton = useButtonWithTooltip({ view: VIEW.Simple, tooltip: footer?.buttonAdditional?.tooltip });
+    return (_jsxs("div", { className: cn(styles.container, className), ...extractSupportProps(rest), children: [_jsxs(Block, { size: BLOCK_SIZE.L, className: styles.form, contentClassName: styles.formContent, children: [_jsx("div", { className: styles.headline, children: _jsx(Headline, { title: title, subtitle: subtitle }) }), stepper, _jsx("div", { className: styles.body, children: children }), footer && (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(styles.footer, {
+                                    [styles.footerSticky]: stickyFooter,
+                                    [styles.footerStuck]: stickyFooter && !atBottom,
+                                }), children: [footer.buttonSecondary && (_jsx(SecondaryButton, { ...footer.buttonSecondary, size: SIZE.M, appearance: APPEARANCE.Neutral, label: footer.buttonSecondary.variant === 'custom'
+                                            ? footer.buttonSecondary.label
+                                            : getButtonLabel(footer.buttonSecondary.variant) })), _jsxs("div", { className: styles.mainActions, children: [footer.buttonAdditional && (_jsx(AdditionalButton, { ...footer.buttonAdditional, size: SIZE.M, appearance: APPEARANCE.Neutral })), _jsx(PrimaryButton, { ...footer.buttonPrimary, size: SIZE.M, appearance: APPEARANCE.Primary, label: footer.buttonPrimary.variant === 'custom'
+                                                    ? footer.buttonPrimary.label
+                                                    : getButtonLabel(footer.buttonPrimary.variant) })] })] }), stickyFooter && (_jsx(_Fragment, { children: _jsx("div", { ref: sentinelRef, className: styles.footerSentinel, "aria-hidden": true }) }))] }))] }), moreItems.length > 0 && (_jsx("div", { className: styles.sideItems, children: moreItems.map((item, index) => (_jsx("div", { children: item }, index))) }))] }));
+}
+DesktopPageForm.displayName = 'DesktopPageForm';

package/dist/esm/components/PageForm/MobilePageForm.d.ts

@@ -0,0 +1,11 @@
+import { DesktopPageFormProps } from './types.js';
+export type MobilePageFormProps = DesktopPageFormProps;
+/**
+ * Мобильный `PageForm`. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`Dropdown` price-summary, `ModalCustom` sideBlock) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export declare const MobilePageForm: {
+    (props: DesktopPageFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { APPEARANCE, Button, BUTTON_GROUP_ACTION_SLOT, ButtonGroup, VIEW } from '@cloud-ru/ds-button';
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { ChevronRightSVG, KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { ModalCustom } from '@cloud-ru/ds-modal';
+import { WithTooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { Headline } from '../Headline/index.js';
+import { useGetButtonLabel } from './hooks.js';
+import styles from './mobileStyles.module.css';
+/** Убирает PageForm-специфичные поля (`variant`/`tooltip`/`size`), оставляя пропсы `@cloud-ru/ds-button` для `ButtonGroup`. */
+function stripFooterButton(button) {
+    const buttonProps = { ...button };
+    delete buttonProps.variant;
+    delete buttonProps.tooltip;
+    delete buttonProps.size;
+    return buttonProps;
+}
+function MobilePageFormBase({ children, title, subtitle, className, footer, stepper, priceSummary, sideBlock, ...rest }) {
+    const [openPriceSummary, setOpenPriceSummary] = useState(false);
+    const [openMore, setOpenMore] = useState(false);
+    const [openMoreContentIndex, setOpenMoreContentIndex] = useState(undefined);
+    const getButtonLabel = useGetButtonLabel();
+    const footerTooltips = footer && {
+        [BUTTON_GROUP_ACTION_SLOT.Primary]: footer.buttonPrimary.tooltip,
+        [BUTTON_GROUP_ACTION_SLOT.Secondary]: footer.buttonSecondary?.tooltip,
+        [BUTTON_GROUP_ACTION_SLOT.Tertiary]: footer.buttonAdditional?.tooltip,
+    };
+    return (_jsxs("div", { className: cn(styles.container, className), ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.header, children: [_jsx(Headline, { title: title, subtitle: subtitle, moreActions: sideBlock ? (_jsx(Droplist, { size: 'm', open: openMore, onOpenChange: setOpenMore, items: sideBlock.map(({ label }, idx) => ({
+                                id: idx,
+                                content: {
+                                    label: label,
+                                },
+                                onClick: () => {
+                                    setOpenMoreContentIndex(idx);
+                                    setOpenMore(false);
+                                },
+                            })), children: _jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, icon: _jsx(KebabSVG, {}), size: 'm' }) })) : undefined }), stepper] }), sideBlock && (_jsx(ModalCustom, { open: openMoreContentIndex !== undefined, onClose: () => setOpenMoreContentIndex(undefined), 
+                // Высоту листа задаёт сам sideBlock-элемент (`snapPoints`); напр. `[1]` — на всю высоту.
+                // По умолчанию — по высоте контента.
+                snapPoints: sideBlock[openMoreContentIndex ?? 0].snapPoints, children: _jsx(ModalCustom.Body, { content: sideBlock[openMoreContentIndex ?? 0].content }) })), _jsx("div", { className: styles.body, children: children }), (priceSummary || footer) && (_jsxs("div", { className: styles.footer, children: [priceSummary && (_jsxs("div", { className: styles.priceSummary, children: [_jsx(Typography, { variant: VARIANT.body, size: SIZE.m, className: styles.priceSummaryText, children: "\u041E\u0446\u0435\u043D\u043A\u0430 \u0431\u044E\u0434\u0436\u0435\u0442\u0430" }), _jsx(Dropdown, { open: openPriceSummary, onOpenChange: setOpenPriceSummary, content: _jsx("div", { className: styles.modalContent, children: priceSummary.content }), "data-test-id": TEST_IDS.pageForm.priceSummarySheet, children: _jsxs("div", { className: styles.priceSummaryRight, "data-test-id": TEST_IDS.pageForm.priceSummaryTrigger, children: [_jsx(Typography, { variant: VARIANT.label, size: SIZE.l, className: styles.priceSummaryTotal, children: priceSummary.total }), priceSummary.content && (_jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, size: 'm', icon: _jsx(ChevronRightSVG, {}) }))] }) })] })), footer && (_jsx(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];
+                            // disableSpanWrapper — чтобы кнопка осталась прямым flex-потомком группы (раскладка `filled`).
+                            return (_jsx(WithTooltip, { tooltip: tooltip && { ...tooltip, disableSpanWrapper: true }, children: button }));
+                        }, primaryAction: {
+                            ...stripFooterButton(footer.buttonPrimary),
+                            view: VIEW.Filled,
+                            appearance: APPEARANCE.Primary,
+                            label: footer.buttonPrimary.variant === 'custom'
+                                ? footer.buttonPrimary.label
+                                : getButtonLabel(footer.buttonPrimary.variant),
+                        }, secondaryAction: footer.buttonSecondary
+                            ? {
+                                ...stripFooterButton(footer.buttonSecondary),
+                                view: VIEW.Outline,
+                                appearance: APPEARANCE.Neutral,
+                                label: footer.buttonSecondary.variant === 'custom'
+                                    ? footer.buttonSecondary.label
+                                    : getButtonLabel(footer.buttonSecondary.variant),
+                            }
+                            : undefined, tertiaryAction: footer.buttonAdditional
+                            ? {
+                                ...stripFooterButton(footer.buttonAdditional),
+                                view: VIEW.Simple,
+                                appearance: APPEARANCE.Neutral,
+                            }
+                            : undefined }))] }))] }));
+}
+/**
+ * Мобильный `PageForm`. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`Dropdown` price-summary, `ModalCustom` sideBlock) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export const MobilePageForm = withLayoutType(MobilePageFormBase, LAYOUT_TYPE.Mobile);

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

@@ -0,0 +1,12 @@
+import { DesktopPageFormProps } from './types.js';
+export type PageFormProps = DesktopPageFormProps;
+/**
+ * Адаптивный `PageForm`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageForm` (sticky-футер, bottom-sheet для sideBlock / price-summary), на остальных
+ * раскладках — `DesktopPageForm`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export declare function PageForm(props: PageFormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageForm {
+    var displayName: string;
+}

package/dist/esm/components/PageForm/PageForm.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DesktopPageForm } from './DesktopPageForm.js';
+import { MobilePageForm } from './MobilePageForm.js';
+/**
+ * Адаптивный `PageForm`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageForm` (sticky-футер, bottom-sheet для sideBlock / price-summary), на остальных
+ * раскладках — `DesktopPageForm`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export function PageForm(props) {
+    const { layoutType } = useAdaptiveLayout();
+    if (isMobileLayout(layoutType)) {
+        return _jsx(MobilePageForm, { ...props });
+    }
+    return _jsx(DesktopPageForm, { ...props });
+}
+PageForm.displayName = 'PageForm';

package/dist/esm/components/PageForm/hooks.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps, View } from '@cloud-ru/ds-button';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '../../types.js';
+/**
+ * Возвращает компонент кнопки с заданным `view`. Если передан `tooltip`,
+ * кнопка оборачивается в `Tooltip`. Соответствует легаси-`useButtonWithTooltip`,
+ * где вместо `view` передавался отдельный компонент кнопки (`ButtonFilled`/`ButtonOutline`/`ButtonSimple`).
+ */
+export declare function useButtonWithTooltip({ view, tooltip }: {
+    view: View;
+    tooltip?: TooltipProps;
+}): (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Показывает тень у прилипшего футера, пока под ним есть прокручиваемый контент.
+ * Внизу формы стоит sentinel-элемент: когда он попадает в область видимости
+ * (прокрутка дошла до конца), тень скрывается.
+ */
+export declare function useStickyFooterShadow(enabled?: boolean): {
+    sentinelRef: import("react").RefObject<HTMLDivElement>;
+    atBottom: boolean;
+};
+export declare function useGetButtonLabel(): (variant: ButtonPrimaryVariant | ButtonSecondaryVariant) => string;

package/dist/esm/components/PageForm/hooks.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { useEffect, useRef, useState } from 'react';
+import { pageLayoutLocale } from '../../locale/index.js';
+/**
+ * Возвращает компонент кнопки с заданным `view`. Если передан `tooltip`,
+ * кнопка оборачивается в `Tooltip`. Соответствует легаси-`useButtonWithTooltip`,
+ * где вместо `view` передавался отдельный компонент кнопки (`ButtonFilled`/`ButtonOutline`/`ButtonSimple`).
+ */
+export function useButtonWithTooltip({ view, tooltip }) {
+    if (tooltip) {
+        return function ButtonWithTooltip(props) {
+            return (_jsx(Tooltip, { ...tooltip, children: _jsx(Button, { view: view, ...props }) }));
+        };
+    }
+    return function ButtonWithView(props) {
+        return _jsx(Button, { view: view, ...props });
+    };
+}
+/**
+ * Показывает тень у прилипшего футера, пока под ним есть прокручиваемый контент.
+ * Внизу формы стоит sentinel-элемент: когда он попадает в область видимости
+ * (прокрутка дошла до конца), тень скрывается.
+ */
+export function useStickyFooterShadow(enabled) {
+    const sentinelRef = useRef(null);
+    const [atBottom, setAtBottom] = useState(false);
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!enabled || !sentinel || typeof IntersectionObserver === 'undefined') {
+            setAtBottom(false);
+            return undefined;
+        }
+        const observer = new IntersectionObserver(([entry]) => setAtBottom(entry.isIntersecting), { threshold: 1 });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [enabled]);
+    return { sentinelRef, atBottom };
+}
+export function useGetButtonLabel() {
+    const { t } = pageLayoutLocale.useTranslations();
+    return function getButtonLabel(variant) {
+        return t(`PageForm.${variant}`);
+    };
+}

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

@@ -0,0 +1,4 @@
+export * from './PageForm.js';
+export * from './DesktopPageForm.js';
+export * from './MobilePageForm.js';
+export * from './types.js';

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

@@ -0,0 +1,4 @@
+export * from './PageForm.js';
+export * from './DesktopPageForm.js';
+export * from './MobilePageForm.js';
+export * from './types.js';

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

@@ -0,0 +1,75 @@
+.container{
+  position:relative;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  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)));
+}
+
+.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-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)));
+  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)));
+}
+
+.footer{
+  position:sticky;
+  z-index:1;
+  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);
+  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)));
+}
+
+.priceSummary{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:space-between;
+  min-height:var(--sn-primitive-dimension-40, 40px);
+}
+
+.priceSummaryText{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.priceSummaryRight{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+}
+
+.header{
+  position:sticky;
+  z-index:1;
+  top:0;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  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);
+  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)));
+}
+
+.modalContent{
+  padding:0 var(--sn-primitive-dimension-16, 16px);
+}

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

@@ -0,0 +1,104 @@
+.container{
+  display:flex;
+  gap:var(--sn-primitive-dimension-24, 24px);
+  justify-content:center;
+  box-sizing:border-box;
+  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));
+}
+
+.form{
+  flex-shrink:0;
+  width:800px;
+  min-height:100%;
+}
+
+.container > .form[data-size=l]{
+  padding:var(--sn-primitive-dimension-56, 56px);
+}
+
+.formContent{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-32, 32px);
+}
+
+.headline{
+  position:relative;
+}
+
+.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-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)));
+  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)));
+}
+
+.footer{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+
+.footerSticky{
+  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);
+  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;
+}
+.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-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;
+}
+
+.footerSentinel{
+  pointer-events:none;
+  position:absolute;
+  bottom:calc(0px - var(--sn-primitive-dimension-56, 56px));
+  left:50%;
+  transform:translateX(-50%);
+  width:var(--sn-primitive-dimension-2, 2px);
+  height:var(--sn-primitive-dimension-1, 1px);
+}
+
+.mainActions{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+  margin-left:auto;
+}
+
+.sideItems{
+  position:sticky;
+  top:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-self:flex-start;
+  width:304px;
+}

package/dist/esm/components/PageForm/types.d.ts

@@ -0,0 +1,47 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { ModalCustomProps } from '@cloud-ru/ds-modal';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren, ReactNode } from 'react';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '../../types.js';
+import { HeadlineProps } from '../Headline/index.js';
+export type DesktopPageFormProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'subtitle'> & {
+    className?: string;
+    /** Закрепляет футер внизу формы при прокрутке контента. */
+    stickyFooter?: boolean;
+    stepper?: ReactNode;
+    priceSummary?: {
+        total: ReactNode;
+        content?: ReactNode;
+    };
+    sideBlock?: {
+        label: string;
+        content: ReactNode;
+        /**
+         * Только mobile: высота листа sideBlock'а (snap-точки `BottomSheet`). `[1]` — на всю высоту.
+         * По умолчанию — по высоте контента (fit-content).
+         */
+        snapPoints?: ModalCustomProps['snapPoints'];
+    }[];
+    footer?: {
+        buttonPrimary: ({
+            variant: ButtonPrimaryVariant;
+        } | {
+            variant: 'custom';
+            label: string;
+        }) & {
+            tooltip?: TooltipProps;
+        } & Omit<ButtonProps, 'label'>;
+        buttonSecondary?: ({
+            variant: ButtonSecondaryVariant;
+        } | {
+            variant: 'custom';
+            label: string;
+        }) & {
+            tooltip?: TooltipProps;
+        } & Omit<ButtonProps, 'label'>;
+        buttonAdditional?: ButtonProps & {
+            tooltip?: TooltipProps;
+        };
+    };
+}>>;

package/dist/esm/components/PageForm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+export type PageLoadingProps = WithSupportProps<{
+    /** CSS-класс */
+    className?: string;
+}>;
+export declare function PageLoading({ className, ...rest }: PageLoadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PageLoading/PageLoading.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function PageLoading({ className, ...rest }) {
+    return (_jsx("div", { className: cn(styles.wrapper, className), ...extractSupportProps(rest), children: _jsx(Spinner, { size: LOADER_SIZE.M, className: styles.spinner }) }));
+}

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

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

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

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

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

@@ -0,0 +1,13 @@
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  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)));
+}
+
+.spinner{
+  flex-shrink:0;
+}

package/dist/esm/components/PageServices/DesktopPageServices.d.ts

@@ -0,0 +1,5 @@
+import { DesktopPageServicesProps } from './types.js';
+export declare function DesktopPageServices({ children, title, actions, className, sidebar, slotBeforeTitle, subtitle, slotAfterTitle, truncateTitle, autoHeight, limitContentMaxWidth, ...rest }: DesktopPageServicesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DesktopPageServices {
+    var displayName: string;
+}

package/dist/esm/components/PageServices/DesktopPageServices.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { Headline } from '../Headline/index.js';
+import { PageSidebar } from '../PageSidebar/index.js';
+import { usePageHeight } from './hooks.js';
+import styles from './styles.module.css';
+export function DesktopPageServices({ children, title, actions, className, sidebar, slotBeforeTitle, subtitle, slotAfterTitle, truncateTitle, autoHeight, limitContentMaxWidth, ...rest }) {
+    const height = usePageHeight(autoHeight);
+    return (_jsxs("div", { className: cn(styles.wrapper, className), ...(!autoHeight && { style: { height } }), ...extractSupportProps(rest), children: [_jsx("div", { className: styles.tempContainer, children: _jsxs("div", { className: styles.container, "data-limited": limitContentMaxWidth, children: [_jsx(Headline, { title: title, actions: actions, slotBeforeTitle: slotBeforeTitle, slotAfterTitle: slotAfterTitle, subtitle: subtitle, truncateTitle: truncateTitle }), _jsx("div", { className: styles.childWrapper, children: children })] }) }), sidebar && (_jsx("div", { className: styles.sidebar, children: _jsx(PageSidebar, { ...sidebar }) }))] }));
+}
+DesktopPageServices.displayName = 'DesktopPageServices';

package/dist/esm/components/PageServices/MobilePageServices.d.ts

@@ -0,0 +1,12 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { ActionsProps } from '../Actions/index.js';
+import { HeadlineProps } from '../Headline/index.js';
+import { SidebarSelectProps } from '../PageSidebar/index.js';
+export type MobilePageServicesProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'slotBeforeTitle' | 'subtitle' | 'slotAfterTitle'> & {
+    className?: string;
+    sidebar?: SidebarSelectProps;
+    actions?: ActionsProps['items'];
+    maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+}>>;
+export declare function MobilePageServices({ children, title, actions, className, sidebar, slotAfterTitle, subtitle, slotBeforeTitle, maxVisibleActionsItems, ...rest }: MobilePageServicesProps): import("react/jsx-runtime").JSX.Element;