@alfalab/core-components 35.2.0 → 36.1.0

package/modal/mobile.js

@@ -1,21 +1,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-c3a0823f.js');
+require('./tslib.es6-c33750f3.js');
 require('react');
 require('classnames');
-require('../base-modal');
 require('../icon-button');
 require('@alfalab/icons-glyph/CrossHeavyMIcon');
+require('../base-modal');
 require('./Context.js');
 require('./components/closer/Component.js');
+require('./ResponsiveContext.js');
 require('./components/content/Component.js');
 require('./components/footer/Component.js');
-require('./Component-c8d16513.js');
-require('./transitions.module-ff304bed.js');
-require('./components/content/Component.mobile.js');
-require('./components/footer/Component.mobile.js');
 require('@alfalab/icons-glyph/CrossMIcon');
-require('./components/header/Component.mobile.js');
+require('./components/header/Component.js');
+require('react-merge-refs');
+require('./Component.js');
 var Component_mobile = require('./Component.mobile.js');
 
 

package/modal/modern/Component.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { View } from "./typings";
+declare const Modal: React.ForwardRefExoticComponent<import("../../base-modal").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/modal/modern/Component.desktop.d.ts

@@ -1,53 +1,14 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "../../base-modal";
-type ModalDesktopProps = BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
-    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
-    /**
-     * Растягивает модальное окно на весь экран
-     * @deprecated Используйте размер fullscreen
-     */
-    fullscreen?: boolean;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
-    fixedPosition?: boolean;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean;
-};
-declare const ModalDesktop: React.ForwardRefExoticComponent<BaseModalProps & {
-    /**
-     * Ширина модального окна
-     * @default "m"
-     */
+declare const ModalDesktop: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
-    /**
-     * Растягивает модальное окно на весь экран
-     * @deprecated Используйте размер fullscreen
-     */
     fullscreen?: boolean | undefined;
-    /**
-     * Фиксирует позицию модального окна после открытия,
-     * предотвращая скачки, если контент внутри будет меняться
-     */
     fixedPosition?: boolean | undefined;
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps>;
-    Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+    Content: React.FC<import("./typings").ContentProps>;
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
-export { ModalDesktopProps, ModalDesktop };
+export { ModalDesktop };

package/modal/modern/Component.desktop.js

@@ -1,53 +1,23 @@
-import React, { forwardRef, useRef, useCallback, isValidElement, cloneElement } from 'react';
-import cn from 'classnames';
-import mergeRefs from 'react-merge-refs';
+import React, { forwardRef } from 'react';
+import 'classnames';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
-import { BaseModal } from '../../base-modal/modern';
-import './Context.js';
-import './Component-9e371a23.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import 'react-merge-refs';
 import '../../icon-button/modern';
+import '../../base-modal/modern';
+import './Context.js';
 import { Closer } from './components/closer/Component.js';
-import './components/content/Component.js';
-import { ContentDesktop } from './components/content/Component.desktop.js';
-import './components/footer/Component.js';
-import { FooterDesktop } from './components/footer/Component.desktop.js';
-import { HeaderDesktop } from './components/header/Component.desktop.js';
-import { t as transitions } from './transitions.module-0ff60fa0.js';
+import './ResponsiveContext.js';
+import { Content } from './components/content/Component.js';
+import { Footer } from './components/footer/Component.js';
+import { Header } from './components/header/Component.js';
+import { Modal } from './Component.js';
 
-var styles = {"wrapper":"modal__wrapper_1ccql","component":"modal__component_1ccql","fullscreen":"modal__fullscreen_1ccql","s":"modal__s_1ccql","m":"modal__m_1ccql","l":"modal__l_1ccql","xl":"modal__xl_1ccql"};
-require('./desktop.css');
-
-const ModalDesktopComponent = forwardRef(({ size = 's', fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, ...restProps }, ref) => {
-    // TODO: удалить, после удаления пропсы fullscreen
-    const componentSize = fullscreen ? 'fullscreen' : size;
-    const modalRef = useRef(null);
-    const handleEntered = useCallback((node, isAppearing) => {
-        if (fixedPosition && modalRef.current) {
-            const content = modalRef.current.querySelector(`.${styles.component}`);
-            if (content) {
-                const { marginTop } = window.getComputedStyle(content);
-                content.style.marginTop = marginTop;
-            }
-        }
-        if (transitionProps.onEntered) {
-            transitionProps.onEntered(node, isAppearing);
-        }
-    }, [fixedPosition, transitionProps]);
-    return (React.createElement(BaseModal, { ...restProps, ref: mergeRefs([ref, modalRef]), wrapperClassName: cn(styles.wrapper, wrapperClassName, {
-            [styles.fullscreen]: componentSize === 'fullscreen',
-        }), className: cn(styles.component, className, styles[componentSize]), backdropProps: {
-            invisible: componentSize === 'fullscreen',
-            ...restProps.backdropProps,
-        }, transitionProps: {
-            classNames: transitions,
-            ...transitionProps,
-            onEntered: handleEntered,
-        } }, React.Children.map(children, (child) => isValidElement(child) ? cloneElement(child, { size: componentSize }) : child)));
-});
+const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));
 const ModalDesktop = Object.assign(ModalDesktopComponent, {
-    Content: ContentDesktop,
-    Header: HeaderDesktop,
-    Footer: FooterDesktop,
+    Content,
+    Header,
+    Footer,
     Closer,
 });
 

package/modal/modern/Component.js

@@ -0,0 +1,62 @@
+import React, { forwardRef, useRef, useMemo } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { BaseModal } from '../../base-modal/modern';
+import { ResponsiveContext } from './ResponsiveContext.js';
+
+var desktopStyles = {"wrapper":"modal__wrapper_xnsi1","component":"modal__component_xnsi1","fullscreen":"modal__fullscreen_xnsi1","s":"modal__s_xnsi1","m":"modal__m_xnsi1","l":"modal__l_xnsi1","xl":"modal__xl_xnsi1"};
+require('./desktop.css');
+
+var mobileStyles = {"component":"modal__component_8mm50"};
+require('./mobile.css');
+
+var transitions = {"appear":"modal__appear_n9uu6","enter":"modal__enter_n9uu6","appearActive":"modal__appearActive_n9uu6","enterActive":"modal__enterActive_n9uu6","exit":"modal__exit_n9uu6","exitActive":"modal__exitActive_n9uu6","exitDone":"modal__exitDone_n9uu6"};
+require('./transitions.css');
+
+const Modal = forwardRef(({ size = 's', fixedPosition, fullscreen, children, className, wrapperClassName, transitionProps = {}, view, ...restProps }, ref) => {
+    // TODO: удалить, после удаления пропсы fullscreen
+    const componentSize = fullscreen ? 'fullscreen' : size;
+    const modalRef = useRef(null);
+    const handleEntered = (node, isAppearing) => {
+        if (fixedPosition && modalRef.current) {
+            const content = modalRef.current.querySelector(`.${desktopStyles.component}`);
+            if (content) {
+                const { marginTop } = window.getComputedStyle(content);
+                content.style.marginTop = marginTop;
+            }
+        }
+        if (transitionProps.onEntered) {
+            transitionProps.onEntered(node, isAppearing);
+        }
+    };
+    const baseModalProps = view === 'desktop'
+        ? {
+            ref: mergeRefs([ref, modalRef]),
+            wrapperClassName: cn(desktopStyles.wrapper, wrapperClassName, {
+                [desktopStyles.fullscreen]: componentSize === 'fullscreen',
+            }),
+            className: cn(desktopStyles.component, className, desktopStyles[componentSize]),
+            backdropProps: {
+                invisible: componentSize === 'fullscreen',
+                ...restProps.backdropProps,
+            },
+            transitionProps: {
+                classNames: transitions,
+                ...transitionProps,
+                onEntered: handleEntered,
+            },
+        }
+        : {
+            ref,
+            transitionProps: {
+                classNames: transitions,
+                ...transitionProps,
+            },
+            className: cn(className, mobileStyles.component),
+        };
+    const contextValue = useMemo(() => ({ size: componentSize, view }), [componentSize, view]);
+    return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
+        React.createElement(BaseModal, { ...restProps, ...baseModalProps }, children)));
+});
+
+export { Modal };

package/modal/modern/Component.mobile.d.ts

@@ -1,23 +1,10 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "../../base-modal";
-type ModalMobileProps = BaseModalProps & {
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean;
-};
-declare const ModalMobile: React.ForwardRefExoticComponent<BaseModalProps & {
-    /**
-     * Управление наличием закрывающего крестика
-     * @default false
-     */
-    hasCloser?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("./components/content/Component").ContentProps>;
-    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+import { ModalMobileProps } from "./typings";
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./typings").ContentProps>;
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
-export { ModalMobileProps, ModalMobile };
+export { ModalMobile };

package/modal/modern/Component.mobile.js

@@ -1,30 +1,23 @@
 import React, { forwardRef } from 'react';
-import cn from 'classnames';
+import 'classnames';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
-import { BaseModal } from '../../base-modal/modern';
-import './Context.js';
-import './Component-9e371a23.js';
+import 'react-merge-refs';
 import '../../icon-button/modern';
+import '../../base-modal/modern';
+import './Context.js';
 import { Closer } from './components/closer/Component.js';
-import './components/content/Component.js';
-import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-0ff60fa0.js';
-import { ContentMobile } from './components/content/Component.mobile.js';
-import { FooterMobile } from './components/footer/Component.mobile.js';
-import { HeaderMobile } from './components/header/Component.mobile.js';
-
-var styles = {"component":"modal__component_5k3yd"};
-require('./mobile.css');
+import './ResponsiveContext.js';
+import { Content } from './components/content/Component.js';
+import { Footer } from './components/footer/Component.js';
+import { Header } from './components/header/Component.js';
+import { Modal } from './Component.js';
 
-const ModalMobileComponent = forwardRef(({ children, className, ...restProps }, ref) => (React.createElement(BaseModal, { ...restProps, ref: ref, transitionProps: {
-        classNames: transitions,
-        ...restProps.transitionProps,
-    }, className: cn(className, styles.component) }, children)));
+const ModalMobileComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'mobile' })));
 const ModalMobile = Object.assign(ModalMobileComponent, {
-    Content: ContentMobile,
-    Header: HeaderMobile,
-    Footer: FooterMobile,
+    Content,
+    Header,
+    Footer,
     Closer,
 });
 

package/modal/modern/Component.responsive.d.ts

@@ -1,32 +1,16 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "../../base-modal";
-import { ModalDesktopProps } from "./Component.desktop";
-import { ModalMobileProps } from "./Component.mobile";
-type ModalResponsiveProps = ModalMobileProps & ModalDesktopProps & {
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
-    breakpoint?: number;
-};
-declare const ModalResponsive: React.ForwardRefExoticComponent<BaseModalProps & {
-    hasCloser?: boolean | undefined;
-} & {
+declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/base-modal/src").BaseModalProps & {
     size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
 } & {
-    /**
-     * Контрольная точка, с нее начинается desktop версия
-     * @default 1024
-     */
     breakpoint?: number | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
-    Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
-    Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Content: React.FC<import("./typings").ContentProps>;
+    Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };
-export { ModalResponsiveProps, ModalResponsive };
+export { ModalResponsive };

package/modal/modern/Component.responsive.js

@@ -1,52 +1,30 @@
-import React, { forwardRef, useMemo, useContext } from 'react';
+import React, { forwardRef } from 'react';
 import 'classnames';
-import 'react-merge-refs';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import '@alfalab/icons-glyph/CrossMIcon';
+import 'react-merge-refs';
 import { useMedia } from '@alfalab/hooks';
+import '../../icon-button/modern';
 import '../../base-modal/modern';
 import './Context.js';
-import './Component-9e371a23.js';
-import '../../icon-button/modern';
 import { Closer } from './components/closer/Component.js';
-import './components/content/Component.js';
-import './components/content/Component.desktop.js';
-import './components/footer/Component.js';
-import './components/footer/Component.desktop.js';
-import './components/header/Component.desktop.js';
-import './transitions.module-0ff60fa0.js';
-import { ModalDesktop } from './Component.desktop.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
-import './components/header/Component.mobile.js';
-import { ModalMobile } from './Component.mobile.js';
+import './ResponsiveContext.js';
+import { Content } from './components/content/Component.js';
+import { Footer } from './components/footer/Component.js';
+import { Header } from './components/header/Component.js';
+import { Modal } from './Component.js';
 
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-const ResponsiveContext = React.createContext({
-    view: 'desktop',
-});
-function createResponsive(desktop, mobile) {
-    function ResponsiveChild(props) {
-        const { view } = useContext(ResponsiveContext);
-        const Child = view === 'desktop' ? desktop : mobile;
-        return React.createElement(Child, { ...props });
-    }
-    return ResponsiveChild;
-}
 const ModalResponsiveComponent = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
     const [view] = useMedia([
         ['mobile', `(max-width: ${breakpoint - 1}px)`],
         ['desktop', `(min-width: ${breakpoint}px)`],
     ], 'desktop');
-    const contextValue = useMemo(() => ({ view }), [view]);
-    const Component = view === 'desktop' ? ModalDesktop : ModalMobile;
-    return (React.createElement(ResponsiveContext.Provider, { value: contextValue },
-        React.createElement(Component, { ref: ref, ...restProps }, children)));
+    return (React.createElement(Modal, { ref: ref, ...restProps, view: view }, children));
 });
 const ModalResponsive = Object.assign(ModalResponsiveComponent, {
-    Header: createResponsive(ModalDesktop.Header, ModalMobile.Header),
-    Content: createResponsive(ModalDesktop.Content, ModalMobile.Content),
-    Footer: createResponsive(ModalDesktop.Footer, ModalMobile.Footer),
+    Header,
+    Content,
+    Footer,
     Closer,
 });
 

package/modal/modern/ResponsiveContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/modal/modern/ResponsiveContext.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ResponsiveContext = React.createContext({
+    view: 'desktop',
+    size: 's',
+});
+
+export { ResponsiveContext };

package/modal/modern/components/closer/Component.js

@@ -1,11 +1,11 @@
 import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { IconButton } from '../../../../icon-button/modern';
 import '../../../../base-modal/modern';
 import { ModalContext } from '../../Context.js';
-import { IconButton } from '../../../../icon-button/modern';
 
-var styles = {"closer":"modal__closer_w8x1b","button":"modal__button_w8x1b","sticky":"modal__sticky_w8x1b"};
+var styles = {"closer":"modal__closer_hjyxy","button":"modal__button_hjyxy","sticky":"modal__sticky_hjyxy"};
 require('./index.css');
 
 /**

package/modal/modern/components/closer/index.css

@@ -1,4 +1,4 @@
-/* hash: 19egz */
+/* hash: rqprz */
 :root {
     --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
 }
@@ -29,7 +29,7 @@
 :root {
     --modal-closer-bg-color: var(--color-light-bg-primary-alpha-40);
 }
-.modal__closer_w8x1b {
+.modal__closer_hjyxy {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -38,13 +38,13 @@
     align-items: center;
     justify-content: center;
 }
-.modal__button_w8x1b {
+.modal__button_hjyxy {
     background: var(--modal-closer-bg-color);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
 }
-.modal__sticky_w8x1b {
+.modal__sticky_hjyxy {
     position: sticky;
     top: calc(var(--modal-vertical-padding) * -1);
 }

package/modal/modern/components/content/Component.d.ts

@@ -1,17 +1,4 @@
-import { FC, ReactNode } from 'react';
-type ContentProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Растягивает контент на всю высоту
-     */
-    flex?: boolean;
-};
+import { FC } from 'react';
+import { ContentProps } from "../../typings";
 declare const Content: FC<ContentProps>;
-export { ContentProps, Content };
+export { Content };

package/modal/modern/components/content/Component.js

@@ -2,14 +2,24 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/modern';
 import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
 
-var styles = {"content":"modal__content_ixsis","flex":"modal__flex_ixsis"};
+var desktopStyles = {"s":"modal__s_1jxs8","m":"modal__m_1jxs8","l":"modal__l_1jxs8","xl":"modal__xl_1jxs8","fullscreen":"modal__fullscreen_1jxs8"};
+require('./desktop.css');
+
+var styles = {"content":"modal__content_fvac6","flex":"modal__flex_fvac6"};
 require('./index.css');
 
+var mobileStyles = {"content":"modal__content_1ma9v"};
+require('./mobile.css');
+
 const Content = ({ children, flex, className }) => {
     const { contentRef } = useContext(ModalContext);
+    const { size, view } = useContext(ResponsiveContext);
     return (React.createElement("div", { className: cn(styles.content, className, {
             [styles.flex]: flex,
+            [desktopStyles[size]]: view === 'desktop' && size,
+            [mobileStyles.content]: view === 'mobile',
         }), ref: contentRef }, children));
 };
 

package/modal/modern/components/content/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 526p9 */
+/* hash: wq4uq */
 :root {
 
     /* Hard */
@@ -24,18 +24,18 @@
 
     /* mobile */
 }
-.modal__s_1n0ae,
-.modal__m_1n0ae {
+.modal__s_1jxs8,
+.modal__m_1jxs8 {
     padding: var(--modal-s-content-paddings)
 }
-.modal__s_1n0ae:last-child, .modal__m_1n0ae:last-child {
+.modal__s_1jxs8:last-child, .modal__m_1jxs8:last-child {
         padding-bottom: var(--modal-s-content-only-bottom-padding);
     }
-.modal__l_1n0ae,
-.modal__xl_1n0ae,
-.modal__fullscreen_1n0ae {
+.modal__l_1jxs8,
+.modal__xl_1jxs8,
+.modal__fullscreen_1jxs8 {
     padding: 0 var(--gap-6xl)
 }
-.modal__l_1n0ae:last-child, .modal__xl_1n0ae:last-child, .modal__fullscreen_1n0ae:last-child {
+.modal__l_1jxs8:last-child, .modal__xl_1jxs8:last-child, .modal__fullscreen_1jxs8:last-child {
         padding-bottom: var(--gap-6xl);
     }

package/modal/modern/components/content/index.css

@@ -1,4 +1,4 @@
-/* hash: a07ty */
+/* hash: 11o5z */
 :root {
 
     /* Hard */
@@ -19,10 +19,10 @@
 
     /* mobile */
 }
-.modal__content_ixsis {
+.modal__content_fvac6 {
     box-sizing: border-box;
     width: 100%;
 }
-.modal__flex_ixsis {
+.modal__flex_fvac6 {
     flex: 1;
 }

package/modal/modern/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 192cy */
+/* hash: 1i7nt */
 :root {
 
     /* Hard */
@@ -22,9 +22,9 @@
 
     /* mobile */
 }
-.modal__content_17lbs {
+.modal__content_1ma9v {
     padding: 0 var(--gap-m)
 }
-.modal__content_17lbs:last-child {
+.modal__content_1ma9v:last-child {
         padding-bottom: var(--gap-m);
     }

package/modal/modern/components/footer/Component.js

@@ -2,21 +2,34 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/modern';
 import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
 
-var styles = {"footer":"modal__footer_1vglw","sticky":"modal__sticky_1vglw","highlighted":"modal__highlighted_1vglw"};
+var desktopStyles = {"footer":"modal__footer_13q8p","sticky":"modal__sticky_13q8p","fullscreen":"modal__fullscreen_13q8p","s":"modal__s_13q8p","m":"modal__m_13q8p","l":"modal__l_13q8p","xl":"modal__xl_13q8p"};
+require('./desktop.css');
+
+var styles = {"footer":"modal__footer_5wos0","sticky":"modal__sticky_5wos0","highlighted":"modal__highlighted_5wos0"};
 require('./index.css');
 
-var layoutStyles = {"column":"modal__column_1qd22","gap-16":"modal__gap-16_1qd22","gap-24":"modal__gap-24_1qd22","gap-32":"modal__gap-32_1qd22","start":"modal__start_1qd22","center":"modal__center_1qd22","space-between":"modal__space-between_1qd22"};
+var layoutStyles = {"column":"modal__column_t4yq9","gap-16":"modal__gap-16_t4yq9","gap-24":"modal__gap-24_t4yq9","gap-32":"modal__gap-32_t4yq9","start":"modal__start_t4yq9","center":"modal__center_t4yq9","space-between":"modal__space-between_t4yq9"};
 require('./layout.css');
 
+var mobileStyles = {"footer":"modal__footer_y6ay7","sticky":"modal__sticky_y6ay7"};
+require('./mobile.css');
+
 const Footer = ({ children, className, sticky, layout = 'start', gap }) => {
     const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+    const { size, view } = useContext(ResponsiveContext);
     useEffect(() => {
         setHasFooter(true);
     }, [setHasFooter]);
     return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
             [styles.highlighted]: sticky && footerHighlighted,
             [styles.sticky]: sticky,
+            [desktopStyles.footer]: view === 'desktop',
+            [desktopStyles.sticky]: view === 'desktop' && sticky,
+            [desktopStyles[size]]: view === 'desktop',
+            [mobileStyles.footer]: view === 'mobile',
+            [mobileStyles.sticky]: view === 'mobile' && sticky,
         }) }, children));
 };