@alfalab/core-components 25.6.0 → 26.0.0

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

@@ -4,18 +4,20 @@ var React = require('react');
 var cn = require('classnames');
 require('../../../../base-modal/cssm');
 var Context = require('../../Context.js');
+var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Content = function (_a) {
     var _b;
-    var children = _a.children, flex = _a.flex, className = _a.className, styles = _a.styles;
+    var children = _a.children, flex = _a.flex, className = _a.className;
     var contentRef = React.useContext(Context.ModalContext).contentRef;
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, className, (_b = {},
-            _b[styles.flex] = flex,
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].content, className, (_b = {},
+            _b[styles__default['default'].flex] = flex,
             _b)), ref: contentRef }, children));
 };
 

package/modal/cssm/components/content/Component.mobile.js

@@ -2,17 +2,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('../../../../base-modal/cssm');
 require('../../Context.js');
+require('./index.module.css');
 var components_content_Component = require('./Component.js');
 var styles = require('./mobile.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-var ContentMobile = function (props) { return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ styles: styles__default['default'] }, props))); };
+var ContentMobile = function (_a) {
+    var className = _a.className, restProps = tslib_es6.__rest(_a, ["className"]);
+    return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ className: cn__default['default'](className, styles__default['default'].content) }, restProps)));
+};
 
 exports.ContentMobile = ContentMobile;

package/modal/cssm/components/content/desktop.module.css

@@ -7,7 +7,6 @@
     /* Hard up */
 }
 :root {
-    --gap-4xl: 48px;
     --gap-6xl: 72px;
 }
 :root {
@@ -15,33 +14,27 @@
     /* sizes */
 
     /* paddings */
-    --modal-s-content-paddings: 0 var(--gap-4xl) 0;
-    --modal-m-content-paddings: 0 var(--gap-4xl) 0;
-    --modal-l-content-paddings: 0 var(--gap-6xl) 0;
-    --modal-l-content-no-footer-bottom-padding: var(--gap-6xl);
-
-    /* sticky */
+    --modal-s-content-paddings: 0 56px;
+    --modal-s-content-only-bottom-padding: 56px;
 
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
-.content {
-    composes: content from 'index.module.css';
-}
-.flex {
-    composes: flex from 'index.module.css';
-}
-.s {
-    padding: var(--modal-s-content-paddings);
-}
+.s,
 .m {
-    padding: var(--modal-m-content-paddings);
+    padding: var(--modal-s-content-paddings)
 }
+.s:last-child, .m:last-child {
+        padding-bottom: var(--modal-s-content-only-bottom-padding);
+    }
 .l,
+.xl,
 .fullscreen {
-    padding: var(--modal-l-content-paddings)
+    padding: 0 var(--gap-6xl)
 }
-.l:last-child, .fullscreen:last-child {
-        padding-bottom: var(--modal-l-content-no-footer-bottom-padding);
+.l:last-child, .xl:last-child, .fullscreen:last-child {
+        padding-bottom: var(--gap-6xl);
     }

package/modal/cssm/components/content/index.module.css

@@ -6,34 +6,22 @@
 
     /* Hard up */
 }
-:root {
-    --gap-2xl: 32px;
-    --gap-4xl: 48px;
-}
 :root {
 
     /* sizes */
 
     /* paddings */
-    --modal-content-no-footer-bottom-padding: var(--gap-4xl);
-    --modal-content-no-header-top-padding: var(--gap-2xl);
-
-    /* sticky */
 
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
 .content {
     box-sizing: border-box;
-    width: 100%
+    width: 100%;
 }
-.content:first-child {
-        padding-top: var(--modal-content-no-header-top-padding);
-    }
-.content:last-child {
-        padding-bottom: var(--modal-content-no-footer-bottom-padding);
-    }
 .flex {
     flex: 1 1 auto;
 }

package/modal/cssm/components/content/mobile.module.css

@@ -15,17 +15,15 @@
 
     /* paddings */
 
-    /* sticky */
-
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
 .content {
-    composes: content from 'index.module.css';
-
-    padding: 0 var(--gap-m) 0;
-}
-.flex {
-    composes: flex from 'index.module.css';
+    padding: 0 var(--gap-m)
 }
+.content:last-child {
+        padding-bottom: var(--gap-m);
+    }

package/modal/cssm/components/footer/Component.d.ts

@@ -21,7 +21,5 @@ type FooterProps = {
      */
     gap?: 16 | 24 | 32;
 };
-declare const Footer: FC<FooterProps & {
-    styles: Record<string, string>;
-}>;
+declare const Footer: FC<FooterProps>;
 export { FooterProps, Footer };

package/modal/cssm/components/footer/Component.desktop.d.ts

@@ -1,14 +1,11 @@
 import { FC } from 'react';
 import { FooterProps } from "./Component";
+import { ModalDesktopProps } from "../../Component.desktop";
 type FooterDesktopProps = FooterProps & {
     /**
      * Размер
      */
-    size?: 's' | 'm' | 'l';
-    /**
-     * Флаг, что модальное окно открыто на весь экран
-     */
-    fullscreen?: boolean;
+    size?: ModalDesktopProps['size'];
 };
 declare const FooterDesktop: FC<FooterDesktopProps>;
 export { FooterDesktopProps, FooterDesktop };

package/modal/cssm/components/footer/Component.desktop.js

@@ -5,6 +5,7 @@ var React = require('react');
 var cn = require('classnames');
 require('../../../../base-modal/cssm');
 require('../../Context.js');
+require('./index.module.css');
 require('./layout.module.css');
 var components_footer_Component = require('./Component.js');
 var styles = require('./desktop.module.css');
@@ -16,8 +17,11 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var FooterDesktop = function (_a) {
-    var size = _a.size, className = _a.className, fullscreen = _a.fullscreen, restProps = tslib_es6.__rest(_a, ["size", "className", "fullscreen"]);
-    return (React__default['default'].createElement(components_footer_Component.Footer, tslib_es6.__assign({ className: cn__default['default'](className, size && styles__default['default'][size], fullscreen && styles__default['default'].fullscreen), styles: styles__default['default'] }, restProps)));
+    var _b;
+    var size = _a.size, className = _a.className, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["size", "className", "sticky"]);
+    return (React__default['default'].createElement(components_footer_Component.Footer, tslib_es6.__assign({ className: cn__default['default'](className, styles__default['default'].footer, size && styles__default['default'][size], (_b = {},
+            _b[styles__default['default'].sticky] = sticky,
+            _b)), sticky: sticky }, restProps)));
 };
 
 exports.FooterDesktop = FooterDesktop;

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

@@ -4,24 +4,26 @@ var React = require('react');
 var cn = require('classnames');
 require('../../../../base-modal/cssm');
 var Context = require('../../Context.js');
+var styles = require('./index.module.css');
 var layoutStyles = require('./layout.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 var layoutStyles__default = /*#__PURE__*/_interopDefaultLegacy(layoutStyles);
 
 var Footer = function (_a) {
     var _b;
-    var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap, styles = _a.styles;
+    var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap;
     var _d = React.useContext(Context.ModalContext), footerHighlighted = _d.footerHighlighted, setHasFooter = _d.setHasFooter;
     React.useEffect(function () {
         setHasFooter(true);
     }, [setHasFooter]);
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.footer, className, layoutStyles__default['default'][layout], gap && layoutStyles__default['default']["gap-" + gap], (_b = {},
-            _b[styles.highlighted] = sticky && footerHighlighted,
-            _b[styles.sticky] = sticky,
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].footer, className, layoutStyles__default['default'][layout], gap && layoutStyles__default['default']["gap-" + gap], (_b = {},
+            _b[styles__default['default'].highlighted] = sticky && footerHighlighted,
+            _b[styles__default['default'].sticky] = sticky,
             _b)) }, children));
 };
 

package/modal/cssm/components/footer/Component.mobile.js

@@ -2,9 +2,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('../../../../base-modal/cssm');
 require('../../Context.js');
+require('./index.module.css');
 require('./layout.module.css');
 var components_footer_Component = require('./Component.js');
 var styles = require('./mobile.module.css');
@@ -12,8 +13,15 @@ var styles = require('./mobile.module.css');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-var FooterMobile = function (props) { return React__default['default'].createElement(components_footer_Component.Footer, tslib_es6.__assign({ styles: styles__default['default'] }, props)); };
+var FooterMobile = function (_a) {
+    var _b;
+    var className = _a.className, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["className", "sticky"]);
+    return (React__default['default'].createElement(components_footer_Component.Footer, tslib_es6.__assign({ className: cn__default['default'](className, styles__default['default'].footer, (_b = {},
+            _b[styles__default['default'].sticky] = sticky,
+            _b)), sticky: sticky }, restProps)));
+};
 
 exports.FooterMobile = FooterMobile;

package/modal/cssm/components/footer/desktop.module.css

@@ -8,54 +8,44 @@
 }
 :root {
     --gap-xl: 24px;
+    --gap-2xl: 32px;
     --gap-3xl: 40px;
-    --gap-4xl: 48px;
     --gap-6xl: 72px;
 }
 :root {
-    --border-radius-m: 8px;
+    --border-radius-l: 12px;
 }
 :root {
-    --modal-border-radius: var(--border-radius-m);
+    --modal-border-radius: var(--border-radius-l);
     --modal-vertical-padding: var(--gap-3xl);
 
     /* sizes */
 
     /* paddings */
-    --modal-s-footer-paddings: var(--gap-xl) var(--gap-4xl) var(--gap-4xl);
-    --modal-m-footer-paddings: var(--gap-xl) var(--gap-4xl) var(--gap-4xl);
-    --modal-l-footer-paddings: var(--gap-xl) var(--gap-6xl) var(--gap-6xl);
-
-    /* sticky */
+    --modal-s-footer-paddings: var(--gap-xl) 56px 56px;
 
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
 .footer {
-    composes: footer from 'index.module.css';
-
     border-bottom-left-radius: var(--modal-border-radius);
     border-bottom-right-radius: var(--modal-border-radius);
 }
-.highlighted {
-    composes: highlighted from 'index.module.css';
-}
 .sticky {
-    composes: sticky from 'index.module.css';
-
-    bottom: calc(var(--modal-vertical-padding) * -1);
-}
-.fullscreen {
-    bottom: 0;
-}
-.s {
-    padding: var(--modal-s-footer-paddings);
+    bottom: calc(var(--modal-vertical-padding) * -1)
 }
+.sticky.fullscreen {
+        bottom: 0;
+    }
+.s,
 .m {
-    padding: var(--modal-m-footer-paddings);
+    padding: var(--modal-s-footer-paddings);
 }
 .l,
+.xl,
 .fullscreen {
-    padding: var(--modal-l-footer-paddings);
+    padding: var(--gap-2xl) var(--gap-6xl) var(--gap-6xl);
 }

package/modal/cssm/components/footer/index.module.css

@@ -1,5 +1,6 @@
 :root {
     --color-light-bg-primary: #fff;
+    --color-light-border-primary: #dbdee1;
 }
 :root {
 
@@ -10,19 +11,17 @@
     /* Hard up */
 }
 :root {
-    --modal-header-background: var(--color-light-bg-primary);
+    --modal-footer-background: var(--color-light-bg-primary);
 
     /* sizes */
 
     /* paddings */
 
-    /* sticky */
-    --modal-footer-sticky-box-shadow: none;
-    --modal-footer-sticky-background: var(--modal-header-background);
-
     /* scroll */
-    --modal-footer-highlight-box-shadow: none;
     --modal-footer-highlight-background: var(--color-light-bg-primary);
+    --modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-border-primary);
+
+    /* desktop */
 
     /* mobile */
 }
@@ -30,11 +29,9 @@
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
-    background: var(--modal-header-background);
 }
 .sticky {
-    background: var(--modal-footer-sticky-background);
-    box-shadow: var(--modal-footer-sticky-box-shadow);
+    background: var(--modal-footer-background);
     position: sticky;
 }
 .highlighted {

package/modal/cssm/components/footer/layout.module.css

@@ -18,10 +18,10 @@
 
     /* paddings */
 
-    /* sticky */
-
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
 .column {

package/modal/cssm/components/footer/mobile.module.css

@@ -8,7 +8,6 @@
 }
 :root {
     --gap-m: 16px;
-    --gap-xl: 24px;
 }
 :root {
 
@@ -16,22 +15,15 @@
 
     /* paddings */
 
-    /* sticky */
-
     /* scroll */
 
+    /* desktop */
+
     /* mobile */
 }
 .footer {
-    composes: footer from 'index.module.css';
-
-    padding: var(--gap-xl) var(--gap-m);
-}
-.highlighted {
-    composes: highlighted from 'index.module.css';
+    padding: var(--gap-m);
 }
 .sticky {
-    composes: sticky from 'index.module.css';
-
     bottom: 0;
 }

package/modal/cssm/components/header/Component.d.ts

@@ -31,7 +31,10 @@ type HeaderProps = {
     /**
      * Выравнивание заголовка
      */
-    align?: 'left' | 'right' | 'center';
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
     trim?: boolean;
     /**
      * Фиксирует шапку

package/modal/cssm/components/header/Component.desktop.d.ts

@@ -1,14 +1,11 @@
 import { FC } from 'react';
 import { HeaderProps } from "./Component";
+import { ModalDesktopProps } from "../../Component.desktop";
 type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
     /**
      * Размер
      */
-    size?: 's' | 'm' | 'l';
-    /**
-     * Флаг, что модальное окно открыто на весь экран
-     */
-    fullscreen?: boolean;
+    size?: ModalDesktopProps['size'];
     /**
      * Наличие крестика
      */

package/modal/cssm/components/header/Component.desktop.js

@@ -21,11 +21,12 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var HeaderDesktop = function (_a) {
     var _b;
-    var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, fullscreen = _a.fullscreen, hasCloser = _a.hasCloser, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["size", "className", "contentClassName", "fullscreen", "hasCloser", "sticky"]);
+    var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, _d = _a.leftAddons, leftAddons = _d === void 0 ? React__default['default'].createElement("span", null) : _d, title = _a.title, children = _a.children, restProps = tslib_es6.__rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children"]);
+    var hasContent = title || Boolean(children);
     return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, styles__default['default'].header, size && styles__default['default'][size], (_b = {},
-            _b[styles__default['default'].fullscreen] = fullscreen,
             _b[styles__default['default'].sticky] = sticky,
-            _b)), contentClassName: cn__default['default'](styles__default['default'].content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, null) : null, sticky: sticky }, restProps)));
+            _b[styles__default['default'].hasContent] = hasContent,
+            _b)), contentClassName: cn__default['default'](styles__default['default'].content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, null) : null, leftAddons: leftAddons, sticky: sticky, title: title }, restProps), children));
 };
 
 exports.HeaderDesktop = HeaderDesktop;

package/modal/cssm/components/header/Component.js

@@ -31,7 +31,7 @@ var Header = function (_a) {
                 _c)) },
             children,
             title && React__default['default'].createElement("div", { className: styles__default['default'].title }, title))),
-        closer && React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, addonClassName) }, closer)));
+        closer && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, styles__default['default'].closer, addonClassName) }, closer))));
 };
 
 exports.Header = Header;

package/modal/cssm/components/header/Component.mobile.js

@@ -23,7 +23,7 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var HeaderMobile = function (_a) {
     var _b;
-    var className = _a.className, hasCloser = _a.hasCloser, sticky = _a.sticky, contentClassName = _a.contentClassName, restProps = tslib_es6.__rest(_a, ["className", "hasCloser", "sticky", "contentClassName"]);
+    var className = _a.className, contentClassName = _a.contentClassName, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["className", "contentClassName", "hasCloser", "sticky"]);
     return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, (_b = {},
             _b[styles__default['default'].sticky] = sticky,
             _b)), contentClassName: cn__default['default'](styles__default['default'].content, contentClassName), closer: hasCloser ? React__default['default'].createElement(components_closer_Component.Closer, { icon: CrossMIcon__default['default'], size: 'xs' }) : null, sticky: sticky }, restProps)));

package/modal/cssm/components/header/desktop.module.css

@@ -9,64 +9,78 @@
 :root {
     --gap-xs: 8px;
     --gap-m: 16px;
+    --gap-xl: 24px;
     --gap-3xl: 40px;
-    --gap-4xl: 48px;
-    --gap-6xl: 72px;
 }
 :root {
-    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
-        'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
 }
 :root {
-    --border-radius-m: 8px;
+    --border-radius-l: 12px;
 }
 :root {
-    --modal-border-radius: var(--border-radius-m);
+    --modal-border-radius: var(--border-radius-l);
     --modal-vertical-padding: var(--gap-3xl);
 
     /* sizes */
-    --modal-header-min-height: 48px;
-    --modal-header-l-min-height: 72px;
 
     /* paddings */
-    --modal-s-header-paddings: 0 0 0 var(--gap-4xl);
-    --modal-m-header-paddings: 0 0 0 var(--gap-4xl);
-    --modal-l-header-paddings: 0 0 0 var(--gap-6xl);
-
-    /* sticky */
+    --modal-s-header-paddings: var(--gap-xs) var(--gap-xs) var(--gap-m);
 
     /* scroll */
 
+    /* desktop */
+    --modal-s-header-desktop-content-paddings: var(--gap-3xl) var(--gap-m) 0 0;
+    --modal-s-header-desktop-font-size: 22px;
+    --modal-s-header-desktop-line-height: 26px;
+    --modal-l-header-desktop-content-paddings: var(--gap-3xl) var(--gap-m) 0 0;
+    --modal-l-header-desktop-font-size: 30px;
+    --modal-l-header-desktop-line-height: 36px;
+    --modal-header-desktop-font-weight: bold;
+    --modal-header-desktop-font-family: var(--font-family-system);
+
     /* mobile */
 }
 .header {
-    min-height: var(--modal-header-min-height);
     border-top-left-radius: var(--modal-border-radius);
     border-top-right-radius: var(--modal-border-radius);
 }
 .content {
-    font-size: 24px;
-    line-height: 32px;
-    font-weight: 500;
-    font-feature-settings: 'ss01';
-    font-family: var(--font-family-styrene);
-
-    margin: var(--gap-xs) var(--gap-m) var(--gap-xs) 0;
+    font-weight: var(--modal-header-desktop-font-weight);
+    font-family: var(--modal-header-desktop-font-family);
 }
-.s {
-    padding: var(--modal-s-header-paddings);
+.s .content,
+.m .content {
+    padding: var(--modal-s-header-desktop-content-paddings);
+    font-size: var(--modal-s-header-desktop-font-size);
+    line-height: var(--modal-s-header-desktop-line-height);
 }
+.l .content,
+.xl .content,
+.fullscreen .content {
+    padding: var(--modal-l-header-desktop-content-paddings);
+    font-size: var(--modal-l-header-desktop-font-size);
+    line-height: var(--modal-l-header-desktop-line-height);
+}
+.s,
 .m {
-    padding: var(--modal-m-header-paddings);
+    padding: var(--modal-s-header-paddings)
 }
+.s:not(.hasContent), .m:not(.hasContent) {
+        padding-bottom: 0;
+    }
 .l,
+.xl,
 .fullscreen {
-    min-height: var(--modal-header-l-min-height);
-    padding: var(--modal-l-header-paddings);
+    padding: var(--gap-xl) var(--gap-xl) var(--gap-m)
 }
+.l:not(.hasContent), .xl:not(.hasContent), .fullscreen:not(.hasContent) {
+        padding-bottom: var(--gap-m);
+    }
 .sticky {
-    top: calc(var(--modal-vertical-padding) * -1);
-}
-.fullscreen {
-    top: 0;
+    top: calc(var(--modal-vertical-padding) * -1)
 }
+.sticky.fullscreen {
+        top: 0;
+    }

package/modal/cssm/components/header/index.module.css

@@ -16,11 +16,11 @@
 
     /* paddings */
 
-    /* sticky */
-
     /* scroll */
-    --modal-header-highlight-box-shadow: none;
     --modal-header-highlight-background: var(--color-light-bg-primary);
+    --modal-header-highlight-box-shadow: none;
+
+    /* desktop */
 
     /* mobile */
 }
@@ -29,9 +29,12 @@
     box-sizing: border-box;
     display: flex;
     align-items: stretch;
-    justify-content: flex-end;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
+    justify-content: space-between;
+    transition: box-shadow 0.2s ease, background 0.2s ease
 }
+.header:not(.hasContent) {
+        pointer-events: none;
+    }
 .highlighted {
     background: var(--modal-header-highlight-background);
     box-shadow: var(--modal-header-highlight-box-shadow);
@@ -54,6 +57,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    pointer-events: all;
+}
+.closer {
+    margin-left: auto;
 }
 .left {
     justify-content: flex-start;