@alfalab/core-components-side-panel 3.0.16 → 4.0.0

package/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: nijjd */
+/* hash: 19s6s */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -32,42 +32,42 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__header_18jha {
+} .side-panel__header_15gdd {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease
-} .side-panel__header_18jha:not(.side-panel__hasContent_18jha) {
+} .side-panel__header_15gdd:not(.side-panel__hasContent_15gdd) {
         pointer-events: none;
-    } .side-panel__highlighted_18jha {
+    } .side-panel__highlighted_15gdd {
     background: var(--side-panel-header-highlight-background);
     box-shadow: var(--side-panel-header-highlight-box-shadow);
-} .side-panel__sticky_18jha {
+} .side-panel__sticky_15gdd {
     position: sticky;
     z-index: 1
-} .side-panel__sticky_18jha.side-panel__hasContent_18jha {
+} .side-panel__sticky_15gdd.side-panel__hasContent_15gdd {
         background: var(--side-panel-header-background);
-    } .side-panel__header_18jha.side-panel__backgroundImage_18jha {
+    } .side-panel__header_15gdd.side-panel__backgroundImage_15gdd {
     background: center no-repeat;
     background-size: cover;
-} .side-panel__content_18jha {
+} .side-panel__content_15gdd {
     flex-grow: 1;
-} .side-panel__title_18jha {
+} .side-panel__title_15gdd {
     word-break: break-word;
-} .side-panel__addon_18jha {
+} .side-panel__addon_15gdd {
     min-width: 48px;
     height: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: all;
-} .side-panel__closer_18jha {
+} .side-panel__closer_15gdd {
     margin-left: auto;
-} .side-panel__right_18jha {
+} .side-panel__right_15gdd {
     justify-content: flex-end;
     text-align: right;
-} .side-panel__trim_18jha {
+} .side-panel__trim_15gdd {
     overflow: hidden
-} .side-panel__trim_18jha .side-panel__title_18jha {
+} .side-panel__trim_15gdd .side-panel__title_15gdd {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

package/modern/components/header/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1qec0 */
+/* hash: qdp72 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -38,11 +38,11 @@
 
     /* paddings */
     --side-panel-header-mobile-paddings: var(--gap-2xs) var(--gap-xs);
-} .side-panel__header_ah76r {
+} .side-panel__header_6bhp6 {
     padding: var(--side-panel-header-mobile-paddings);
-} .side-panel__sticky_ah76r {
+} .side-panel__sticky_6bhp6 {
     top: 0;
-} .side-panel__content_ah76r {
+} .side-panel__content_6bhp6 {
     font-size: var(--side-panel-header-mobile-font-size);
     line-height: var(--side-panel-header-mobile-line-height);
     font-family: var(--side-panel-header-mobile-font-family);

package/modern/desktop.css

@@ -1,4 +1,4 @@
-/* hash: up6dh */
+/* hash: di9bv */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -28,8 +28,8 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__s_164lo {
+} .side-panel__s_1ke29 {
     width: var(--side-panel-s-width);
-} .side-panel__hidden_164lo {
+} .side-panel__hidden_1ke29 {
     overflow-x: hidden;
 }

package/modern/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./responsive";
-export * from "./Context";
+export { SidePanelResponsive as SidePanel, SidePanelResponsiveProps as SidePanelProps } from "./Component.responsive";
+export {};

package/modern/index.js

@@ -1,10 +1,12 @@
-export { SidePanelResponsive } from './Component.responsive.js';
-export { ModalContext } from './Context.js';
+export { SidePanelResponsive as SidePanel } from './Component.responsive.js';
 import 'react';
 import '@alfalab/core-components-mq/modern';
+import '@alfalab/core-components-shared/modern';
 import './components/header/Component.js';
 import 'classnames';
 import '@alfalab/core-components-navigation-bar/modern';
+import './Context.js';
+import '@alfalab/core-components-base-modal/modern';
 import './ResponsiveContext.js';
 import './Component.desktop.js';
 import 'react-merge-refs';
@@ -14,6 +16,5 @@ import './components/content/Component.js';
 import './components/footer/Component.desktop.js';
 import './components/footer/Component.js';
 import './Component.mobile.js';
-import '@alfalab/core-components-base-modal/modern';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: bmcw8 */
+/* hash: nnz71 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -27,7 +27,7 @@
     /* mobile */
 
     /* paddings */
-} .side-panel__component_1fi8z {
+} .side-panel__component_ar6xg {
     position: fixed;
     top: 0;
     flex: 1;
@@ -36,7 +36,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     max-width: 600px;
-} .side-panel__mobileContent_1fi8z {
+} .side-panel__mobileContent_ar6xg {
     display: flex;
     flex-direction: column;
     width: 100%;

package/modern/shared.d.ts

@@ -0,0 +1 @@
+export { ModalContext } from "./Context";

package/modern/shared.js

@@ -0,0 +1,2 @@
+export { ModalContext } from './Context.js';
+import '@alfalab/core-components-base-modal/modern';

package/modern/transitions.desktop.css

@@ -1,32 +1,32 @@
-/* hash: 1q3gi */
-.side-panel__enterRight_1av3a {
+/* hash: 19z9l */
+.side-panel__enterRight_co1v7 {
     opacity: 0;
     transform: translateX(15px);
 }
 
-.side-panel__enterLeft_1av3a {
+.side-panel__enterLeft_co1v7 {
     opacity: 0;
     transform: translateX(-15px);
 }
 
-.side-panel__enterActive_1av3a {
+.side-panel__enterActive_co1v7 {
     opacity: 1;
     transform: translateX(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_1av3a {
+.side-panel__exit_co1v7 {
     opacity: 1;
     transform: translateX(0);
 }
 
-.side-panel__exitActiveRight_1av3a {
+.side-panel__exitActiveRight_co1v7 {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(15px);
 }
 
-.side-panel__exitActiveLeft_1av3a {
+.side-panel__exitActiveLeft_co1v7 {
     opacity: 0;
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     transform: translateX(-15px);

package/modern/transitions.mobile.css

@@ -1,24 +1,24 @@
-/* hash: dqsky */
-.side-panel__appear_fbxtx,
-.side-panel__enter_fbxtx {
+/* hash: 1qi9d */
+.side-panel__appear_1rr7d,
+.side-panel__enter_1rr7d {
     opacity: 0;
     transform: translateY(15px);
 }
 
-.side-panel__appearActive_fbxtx,
-.side-panel__enterActive_fbxtx {
+.side-panel__appearActive_1rr7d,
+.side-panel__enterActive_1rr7d {
     opacity: 1;
     transform: translateY(0);
     transition: opacity 200ms ease-in, transform 200ms ease-in;
 }
 
-.side-panel__exit_fbxtx {
+.side-panel__exit_1rr7d {
     opacity: 1;
     transform: translateY(0);
 }
 
-.side-panel__exitActive_fbxtx,
-.side-panel__exitDone_fbxtx {
+.side-panel__exitActive_1rr7d,
+.side-panel__exitDone_1rr7d {
     opacity: 0;
     transform: translateY(15px);
     transition: opacity 200ms ease-out, transform 200ms ease-out;

package/package.json

@@ -1,11 +1,35 @@
 {
     "name": "@alfalab/core-components-side-panel",
-    "version": "3.0.16",
+    "version": "4.0.0",
     "description": "SidePanel component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./shared": {
+            "import": "./esm/shared.js",
+            "require": "./shared.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -14,10 +38,11 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^5.2.1",
-        "@alfalab/core-components-drawer": "^4.2.12",
-        "@alfalab/core-components-mq": "^4.1.5",
-        "@alfalab/core-components-navigation-bar": "^0.3.7",
+        "@alfalab/core-components-base-modal": "^5.3.0",
+        "@alfalab/core-components-drawer": "^5.0.0",
+        "@alfalab/core-components-mq": "^4.2.0",
+        "@alfalab/core-components-navigation-bar": "^0.4.0",
+        "@alfalab/core-components-shared": "^0.1.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"

package/shared.d.ts

@@ -0,0 +1 @@
+export { ModalContext } from "./Context";

package/shared.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Context = require('./Context.js');
+require('@alfalab/core-components-base-modal');
+
+
+
+exports.ModalContext = Context.ModalContext;

package/src/Component.desktop.tsx

@@ -0,0 +1,105 @@
+import React, { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { BaseModalProps } from '@alfalab/core-components-base-modal';
+import { Drawer, DrawerProps } from '@alfalab/core-components-drawer';
+
+import { ContentDesktop } from './components/content/Component.desktop';
+import { FooterDesktop } from './components/footer/Component.desktop';
+import { Header } from './components/header/Component';
+import { ResponsiveContext } from './ResponsiveContext';
+import { TResponsiveModalContext } from './typings';
+
+import styles from './desktop.module.css';
+import transitions from './transitions.desktop.module.css';
+
+export type SidePanelDesktopProps = BaseModalProps &
+    Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {
+        /**
+         * Ширина модального окна
+         * @default "s"
+         */
+        size?: 's';
+
+        /**
+         * Управление наличием закрывающего крестика
+         * @default false
+         */
+        hasCloser?: boolean;
+    };
+
+const SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopProps>(
+    (
+        {
+            size = 's',
+            children,
+            className,
+            wrapperClassName,
+            contentTransitionProps = {},
+            backdropProps,
+            placement = 'right',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const responsiveContext = useContext(ResponsiveContext);
+        const modalRef = useRef<HTMLElement>(null);
+
+        const enterCn = cn({
+            [transitions.appearRight]: placement === 'right',
+            [transitions.appearLeft]: placement === 'left',
+        });
+
+        const exitCn = cn({
+            [transitions.exitActiveRight]: placement === 'right',
+            [transitions.exitActiveLeft]: placement === 'left',
+        });
+
+        const contextValue = React.useMemo<TResponsiveModalContext>(
+            () => ({ size, view: 'desktop' }),
+            [size],
+        );
+
+        const renderContent = () => (
+            <Drawer
+                {...restProps}
+                ref={mergeRefs([ref, modalRef])}
+                placement={placement}
+                wrapperClassName={wrapperClassName}
+                className={cn(className, styles[size], styles.hidden)}
+                backdropProps={backdropProps}
+                contentTransitionProps={{
+                    classNames: {
+                        appear: enterCn,
+                        enter: enterCn,
+                        appearActive: transitions.enterActive,
+                        enterActive: transitions.enterActive,
+                        exit: transitions.exit,
+                        exitActive: exitCn,
+                        exitDone: exitCn,
+                    },
+                    ...contentTransitionProps,
+                }}
+            >
+                {React.Children.map(children, (child) =>
+                    isValidElement(child) ? cloneElement(child, { size }) : child,
+                )}
+            </Drawer>
+        );
+
+        const renderWithContext = () => (
+            <ResponsiveContext.Provider value={contextValue}>
+                {renderContent()}
+            </ResponsiveContext.Provider>
+        );
+
+        return responsiveContext ? renderContent() : renderWithContext();
+    },
+);
+
+export const SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {
+    Content: ContentDesktop,
+    Header,
+    Footer: FooterDesktop,
+});

package/src/Component.mobile.tsx

@@ -0,0 +1,57 @@
+import React, { forwardRef, useContext } from 'react';
+import cn from 'classnames';
+
+import { BaseModal, BaseModalProps } from '@alfalab/core-components-base-modal';
+
+import { ContentMobile } from './components/content/Component.mobile';
+import { FooterMobile } from './components/footer/Component.mobile';
+import { Header } from './components/header/Component';
+import { ResponsiveContext } from './ResponsiveContext';
+
+import styles from './mobile.module.css';
+import transitions from './transitions.mobile.module.css';
+
+export type SidePanelMobileProps = BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+
+const contextValue = { size: 's', view: 'mobile' } as const;
+
+const SidePanelMobileComponent = forwardRef<HTMLDivElement, SidePanelMobileProps>(
+    ({ children, className, transitionProps, ...restProps }, ref) => {
+        const responsiveContext = useContext(ResponsiveContext);
+
+        const renderContent = () => (
+            <BaseModal
+                {...restProps}
+                ref={ref}
+                transitionProps={{
+                    classNames: transitions,
+                    ...transitionProps,
+                }}
+                className={cn(className, styles.component)}
+                scrollHandler='content'
+            >
+                <div className={styles.mobileContent}>{children}</div>
+            </BaseModal>
+        );
+
+        const renderWithContext = () => (
+            <ResponsiveContext.Provider value={contextValue}>
+                {renderContent()}
+            </ResponsiveContext.Provider>
+        );
+
+        return responsiveContext ? renderContent() : renderWithContext();
+    },
+);
+
+export const SidePanelMobile = Object.assign(SidePanelMobileComponent, {
+    Content: ContentMobile,
+    Header,
+    Footer: FooterMobile,
+});

package/src/Component.responsive.tsx

@@ -0,0 +1,83 @@
+import React, { FC, forwardRef, useContext, useMemo } from 'react';
+
+import { BaseModalProps } from '@alfalab/core-components-base-modal';
+import { DrawerProps } from '@alfalab/core-components-drawer';
+import { useMatchMedia } from '@alfalab/core-components-mq';
+import { isClient } from '@alfalab/core-components-shared';
+
+import { Header } from './components/header/Component';
+import { SidePanelDesktop } from './Component.desktop';
+import { SidePanelMobile } from './Component.mobile';
+import { ResponsiveContext } from './ResponsiveContext';
+import { TResponsiveModalContext } from './typings';
+
+export type SidePanelResponsiveProps = BaseModalProps &
+    Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {
+        /**
+         * Ширина модального окна
+         * @default "s"
+         */
+        size?: 's';
+
+        /**
+         * Управление наличием закрывающего крестика
+         * @default false
+         */
+        hasCloser?: boolean;
+
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+
+        /**
+         * Значение по-умолчанию для хука useMatchMedia
+         */
+        defaultMatchMediaValue?: boolean | (() => boolean);
+    };
+
+function createResponsive<DesktopType extends FC, MobileType extends FC>(
+    desktop: DesktopType,
+    mobile: MobileType,
+) {
+    // eslint-disable-next-line
+    function ResponsiveChild(props: any) {
+        const { view = 'desktop' } = useContext(ResponsiveContext) || {};
+
+        const Child = view === 'desktop' ? desktop : mobile;
+
+        return <Child {...props} />;
+    }
+
+    return ResponsiveChild as DesktopType | MobileType;
+}
+
+const SidePanelResponsiveComponent = forwardRef<HTMLDivElement, SidePanelResponsiveProps>(
+    ({ children, breakpoint = 1024, size = 's', defaultMatchMediaValue, ...restProps }, ref) => {
+        const query = `(min-width: ${breakpoint}px)`;
+        const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
+
+        const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);
+
+        const view = isDesktop ? 'desktop' : 'mobile';
+
+        const contextValue = useMemo<TResponsiveModalContext>(() => ({ view, size }), [view, size]);
+
+        const Component = isDesktop ? SidePanelDesktop : SidePanelMobile;
+
+        return (
+            <ResponsiveContext.Provider value={contextValue}>
+                <Component ref={ref} size={size} {...restProps}>
+                    {children}
+                </Component>
+            </ResponsiveContext.Provider>
+        );
+    },
+);
+
+export const SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
+    Header,
+    Content: createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content),
+    Footer: createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer),
+});

package/src/Context.tsx

@@ -0,0 +1,3 @@
+import { BaseModalContext } from '@alfalab/core-components-base-modal';
+
+export const ModalContext = BaseModalContext;

package/src/ResponsiveContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import type { TResponsiveModalContext } from './typings';
+
+export const ResponsiveContext = React.createContext<TResponsiveModalContext>(null);

package/src/components/content/Component.desktop.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { Content, ContentProps } from './Component';
+
+import styles from './desktop.module.css';
+
+export type ContentDesktopProps = ContentProps & {
+    /**
+     * Размер (только для desktop версии компонента)
+     */
+    size?: 's';
+};
+
+export const ContentDesktop: FC<ContentDesktopProps> = ({
+    size = 's',
+    className,
+    ...restProps
+}) => <Content className={cn(className, size && styles[size])} {...restProps} />;

package/src/components/content/Component.mobile.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { Content, ContentProps } from './Component';
+
+import styles from './mobile.module.css';
+
+export type ContentMobileProps = ContentProps;
+
+export const ContentMobile: FC<ContentMobileProps> = ({ className, ...restProps }) => (
+    <Content className={cn(className, styles.content)} {...restProps} />
+);

package/src/components/content/Component.tsx

@@ -0,0 +1,39 @@
+import React, { FC, ReactNode, Ref, useContext } from 'react';
+import cn from 'classnames';
+
+import { ModalContext } from '../../Context';
+
+import styles from './index.module.css';
+
+export type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Content: FC<ContentProps> = ({ children, className, dataTestId }) => {
+    const { contentRef, hasHeader } = useContext(ModalContext);
+
+    return (
+        <div
+            className={cn(styles.content, className, styles.flex, {
+                [styles.withHeader]: hasHeader,
+            })}
+            ref={contentRef as Ref<HTMLDivElement>}
+            data-test-id={dataTestId}
+        >
+            {children}
+        </div>
+    );
+};

package/src/components/content/desktop.module.css

@@ -0,0 +1,9 @@
+@import '../../vars.css';
+
+.s {
+    padding: var(--side-panel-s-content-paddings);
+
+    &:last-child {
+        padding-bottom: var(--gap-2xl);
+    }
+}