@alfalab/core-components-modal 6.0.11 → 6.0.12

package/modern/Component.desktop.js

@@ -1,53 +1,23 @@
-import React, { forwardRef, useRef, useCallback, isValidElement, cloneElement } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { BaseModal } from '@alfalab/core-components-base-modal/modern';
+import React, { forwardRef } from 'react';
+import 'classnames';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-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 './Component-4974412a.js';
-import { HeaderDesktop } from './components/header/Component.desktop.js';
-import { t as transitions } from './transitions.module-053bd5b2.js';
+import './ResponsiveContext.js';
+import { Content } from './components/content/Component.js';
+import { Footer } from './components/footer/Component.js';
+import '@alfalab/icons-glyph/CrossMIcon';
+import { Header } from './components/header/Component.js';
+import 'react-merge-refs';
+import { Modal } from './Component.js';
 
-var styles = {"wrapper":"modal__wrapper_ctsqz","component":"modal__component_ctsqz","fullscreen":"modal__fullscreen_ctsqz","s":"modal__s_ctsqz","m":"modal__m_ctsqz","l":"modal__l_ctsqz","xl":"modal__xl_ctsqz"};
-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/modern/Component.js

@@ -0,0 +1,62 @@
+import React, { forwardRef, useRef, useMemo } from 'react';
+import cn from 'classnames';
+import { BaseModal } from '@alfalab/core-components-base-modal/modern';
+import { ResponsiveContext } from './ResponsiveContext.js';
+import mergeRefs from 'react-merge-refs';
+
+var desktopStyles = {"wrapper":"modal__wrapper_1kgjw","component":"modal__component_1kgjw","fullscreen":"modal__fullscreen_1kgjw","s":"modal__s_1kgjw","m":"modal__m_1kgjw","l":"modal__l_1kgjw","xl":"modal__xl_1kgjw"};
+require('./desktop.css')
+
+var mobileStyles = {"component":"modal__component_1po45"};
+require('./mobile.css')
+
+var transitions = {"appear":"modal__appear_5a8sg","enter":"modal__enter_5a8sg","appearActive":"modal__appearActive_5a8sg","enterActive":"modal__enterActive_5a8sg","exit":"modal__exit_5a8sg","exitActive":"modal__exitActive_5a8sg","exitDone":"modal__exitDone_5a8sg"};
+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/modern/Component.mobile.d.ts

@@ -1,23 +1,10 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-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/modern/Component.mobile.js

@@ -1,30 +1,23 @@
 import React, { forwardRef } from 'react';
-import cn from 'classnames';
-import { BaseModal } from '@alfalab/core-components-base-modal/modern';
+import 'classnames';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/modern';
 import './Context.js';
 import { Closer } from './components/closer/Component.js';
-import './components/content/Component.js';
-import './components/footer/Component.js';
-import './Component-4974412a.js';
-import { t as transitions } from './transitions.module-053bd5b2.js';
-import { ContentMobile } from './components/content/Component.mobile.js';
-import { FooterMobile } from './components/footer/Component.mobile.js';
+import './ResponsiveContext.js';
+import { Content } from './components/content/Component.js';
+import { Footer } from './components/footer/Component.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import { HeaderMobile } from './components/header/Component.mobile.js';
+import { Header } from './components/header/Component.js';
+import 'react-merge-refs';
+import { Modal } from './Component.js';
 
-var styles = {"component":"modal__component_1k5ny"};
-require('./mobile.css')
-
-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/modern/Component.responsive.d.ts

@@ -1,32 +1,16 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseModalProps } from "@alfalab/core-components-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/modern/Component.responsive.js

@@ -1,52 +1,30 @@
-import React, { forwardRef, useMemo, useContext } from 'react';
-import 'react-merge-refs';
+import React, { forwardRef } from 'react';
 import 'classnames';
-import '@alfalab/core-components-base-modal/modern';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/modern';
 import './Context.js';
 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 './Component-4974412a.js';
-import './components/header/Component.desktop.js';
-import { ModalDesktop } from './Component.desktop.js';
-import './transitions.module-053bd5b2.js';
-import './components/content/Component.mobile.js';
-import './components/footer/Component.mobile.js';
+import './ResponsiveContext.js';
+import { Content } from './components/content/Component.js';
+import { Footer } from './components/footer/Component.js';
 import '@alfalab/icons-glyph/CrossMIcon';
-import './components/header/Component.mobile.js';
-import { ModalMobile } from './Component.mobile.js';
+import { Header } from './components/header/Component.js';
+import 'react-merge-refs';
+import { Modal } from './Component.js';
 import { useMedia } from '@alfalab/hooks';
 
-// 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/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/modern/ResponsiveContext.js

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

package/modern/components/closer/Component.js

@@ -1,11 +1,11 @@
 import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
-import '@alfalab/core-components-base-modal/modern';
 import { IconButton } from '@alfalab/core-components-icon-button/modern';
 import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/core-components-base-modal/modern';
 import { ModalContext } from '../../Context.js';
 
-var styles = {"closer":"modal__closer_1vr38","button":"modal__button_1vr38","sticky":"modal__sticky_1vr38"};
+var styles = {"closer":"modal__closer_14cqc","button":"modal__button_14cqc","sticky":"modal__sticky_14cqc"};
 require('./index.css')
 
 /**

package/modern/components/closer/index.css

@@ -1,4 +1,4 @@
-/* hash: igf8m */
+/* hash: 19egz */
 :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_1vr38 {
+.modal__closer_14cqc {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -38,13 +38,13 @@
     align-items: center;
     justify-content: center;
 }
-.modal__button_1vr38 {
+.modal__button_14cqc {
     background: var(--modal-closer-bg-color);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
 }
-.modal__sticky_1vr38 {
+.modal__sticky_14cqc {
     position: sticky;
     top: calc(var(--modal-vertical-padding) * -1);
 }

package/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/modern/components/content/Component.js

@@ -2,14 +2,24 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/modern';
 import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
 
-var styles = {"content":"modal__content_13dck","flex":"modal__flex_13dck"};
+var desktopStyles = {"s":"modal__s_2wa82","m":"modal__m_2wa82","l":"modal__l_2wa82","xl":"modal__xl_2wa82","fullscreen":"modal__fullscreen_2wa82"};
+require('./desktop.css')
+
+var styles = {"content":"modal__content_xuwdw","flex":"modal__flex_xuwdw"};
 require('./index.css')
 
+var mobileStyles = {"content":"modal__content_6o7ja"};
+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/modern/components/content/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1lvg5 */
+/* hash: 526p9 */
 :root {
 
     /* Hard */
@@ -24,18 +24,18 @@
 
     /* mobile */
 }
-.modal__s_8eqeo,
-.modal__m_8eqeo {
+.modal__s_2wa82,
+.modal__m_2wa82 {
     padding: var(--modal-s-content-paddings)
 }
-.modal__s_8eqeo:last-child, .modal__m_8eqeo:last-child {
+.modal__s_2wa82:last-child, .modal__m_2wa82:last-child {
         padding-bottom: var(--modal-s-content-only-bottom-padding);
     }
-.modal__l_8eqeo,
-.modal__xl_8eqeo,
-.modal__fullscreen_8eqeo {
+.modal__l_2wa82,
+.modal__xl_2wa82,
+.modal__fullscreen_2wa82 {
     padding: 0 var(--gap-6xl)
 }
-.modal__l_8eqeo:last-child, .modal__xl_8eqeo:last-child, .modal__fullscreen_8eqeo:last-child {
+.modal__l_2wa82:last-child, .modal__xl_2wa82:last-child, .modal__fullscreen_2wa82:last-child {
         padding-bottom: var(--gap-6xl);
     }

package/modern/components/content/index.css

@@ -1,4 +1,4 @@
-/* hash: 1qtha */
+/* hash: a07ty */
 :root {
 
     /* Hard */
@@ -19,10 +19,10 @@
 
     /* mobile */
 }
-.modal__content_13dck {
+.modal__content_xuwdw {
     box-sizing: border-box;
     width: 100%;
 }
-.modal__flex_13dck {
+.modal__flex_xuwdw {
     flex: 1;
 }

package/modern/components/content/mobile.css

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

package/modern/components/footer/Component.js

@@ -2,21 +2,34 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/modern';
 import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
 
-var styles = {"footer":"modal__footer_1glbo","sticky":"modal__sticky_1glbo","highlighted":"modal__highlighted_1glbo"};
+var desktopStyles = {"footer":"modal__footer_mf0hw","sticky":"modal__sticky_mf0hw","fullscreen":"modal__fullscreen_mf0hw","s":"modal__s_mf0hw","m":"modal__m_mf0hw","l":"modal__l_mf0hw","xl":"modal__xl_mf0hw"};
+require('./desktop.css')
+
+var styles = {"footer":"modal__footer_1nmkm","sticky":"modal__sticky_1nmkm","highlighted":"modal__highlighted_1nmkm"};
 require('./index.css')
 
-var layoutStyles = {"column":"modal__column_1bhru","gap-16":"modal__gap-16_1bhru","gap-24":"modal__gap-24_1bhru","gap-32":"modal__gap-32_1bhru","start":"modal__start_1bhru","center":"modal__center_1bhru","space-between":"modal__space-between_1bhru"};
+var layoutStyles = {"column":"modal__column_1ij0s","gap-16":"modal__gap-16_1ij0s","gap-24":"modal__gap-24_1ij0s","gap-32":"modal__gap-32_1ij0s","start":"modal__start_1ij0s","center":"modal__center_1ij0s","space-between":"modal__space-between_1ij0s"};
 require('./layout.css')
 
+var mobileStyles = {"footer":"modal__footer_q351w","sticky":"modal__sticky_q351w"};
+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));
 };
 

package/modern/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 33mh5 */
+/* hash: 1l1qv */
 :root {
 
     /* Hard */
@@ -31,22 +31,22 @@
 
     /* mobile */
 }
-.modal__footer_fdrk0 {
+.modal__footer_mf0hw {
     border-bottom-left-radius: var(--modal-border-radius);
     border-bottom-right-radius: var(--modal-border-radius);
 }
-.modal__sticky_fdrk0 {
+.modal__sticky_mf0hw {
     bottom: calc(var(--modal-vertical-padding) * -1)
 }
-.modal__sticky_fdrk0.modal__fullscreen_fdrk0 {
+.modal__sticky_mf0hw.modal__fullscreen_mf0hw {
         bottom: 0;
     }
-.modal__s_fdrk0,
-.modal__m_fdrk0 {
+.modal__s_mf0hw,
+.modal__m_mf0hw {
     padding: var(--modal-s-footer-paddings);
 }
-.modal__l_fdrk0,
-.modal__xl_fdrk0,
-.modal__fullscreen_fdrk0 {
+.modal__l_mf0hw,
+.modal__xl_mf0hw,
+.modal__fullscreen_mf0hw {
     padding: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
 }

package/modern/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ubrm */
+/* hash: 1d8ry */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
@@ -26,16 +26,16 @@
 
     /* mobile */
 }
-.modal__footer_1glbo {
+.modal__footer_1nmkm {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
 }
-.modal__sticky_1glbo {
+.modal__sticky_1nmkm {
     background: var(--modal-footer-background);
     position: sticky;
 }
-.modal__highlighted_1glbo {
+.modal__highlighted_1nmkm {
     background: var(--modal-footer-highlight-background);
     box-shadow: var(--modal-footer-highlight-box-shadow);
 }