@alfalab/core-components-modal 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-modal@4.1.0...@alfalab/core-components-modal@4.2.0) (2022-03-04)
+
+
+### Features
+
+* **modal:** mobile header ([#1018](https://github.com/alfa-laboratory/core-components/issues/1018)) ([54b879f](https://github.com/alfa-laboratory/core-components/commit/54b879f500d1124a6956d3d5a57349c856a09904))
+
+
+
+
+
 # [4.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-modal@4.0.7...@alfalab/core-components-modal@4.1.0) (2022-03-01)
 
 

package/dist/Component.desktop.js

@@ -2,21 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('./tslib.es6-7f8fab53.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
 var mergeRefs = require('react-merge-refs');
 require('./Context.js');
-require('@alfalab/core-components-button');
-var components_closer_Component = require('./components/closer/Component.js');
 require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+var components_closer_Component = require('./components/closer/Component.js');
 var components_header_Component_desktop = require('./components/header/Component.desktop.js');
 require('./components/content/Component.js');
 var components_content_Component_desktop = require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 var components_footer_Component_desktop = require('./components/footer/Component.desktop.js');
-var transitions_module = require('./transitions.module-336e79fe.js');
+var transitions_module = require('./transitions.module-b2682a08.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,7 +25,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var styles = {"wrapper":"modal__wrapper_155wd","component":"modal__component_155wd","fullscreen":"modal__fullscreen_155wd","s":"modal__s_155wd","m":"modal__m_155wd","l":"modal__l_155wd"};
+var styles = {"wrapper":"modal__wrapper_1c75b","component":"modal__component_1c75b","fullscreen":"modal__fullscreen_1c75b","s":"modal__s_1c75b","m":"modal__m_1c75b","l":"modal__l_1c75b"};
 require('./desktop.css')
 
 var ModalDesktopComponent = React.forwardRef(function (_a, ref) {

package/dist/Component.mobile.d.ts

@@ -16,7 +16,7 @@ declare const ModalMobile: React.ForwardRefExoticComponent<BaseModalProps & {
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
     Content: React.FC<import("./components/content/Component").ContentProps>;
-    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;
 };

package/dist/Component.mobile.js

@@ -2,18 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('./tslib.es6-7f8fab53.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
 require('./Context.js');
-require('@alfalab/core-components-button');
-var components_closer_Component = require('./components/closer/Component.js');
 require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+var components_closer_Component = require('./components/closer/Component.js');
 require('./components/content/Component.js');
 require('./components/footer/Component.js');
-var transitions_module = require('./transitions.module-336e79fe.js');
+var transitions_module = require('./transitions.module-b2682a08.js');
 var hooks = require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CrossMIcon');
 var components_header_Component_mobile = require('./components/header/Component.mobile.js');
 var components_content_Component_mobile = require('./components/content/Component.mobile.js');
 var components_footer_Component_mobile = require('./components/footer/Component.mobile.js');
@@ -23,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"modal__component_17zgd"};
+var styles = {"component":"modal__component_cp777"};
 require('./mobile.css')
 
 var ModalMobileComponent = React.forwardRef(function (_a, ref) {

package/dist/Component.responsive.d.ts

@@ -11,7 +11,7 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component").HeaderProps>;
+    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
     Content: React.FC<import("./components/content/Component.desktop").ContentDesktopProps> | React.FC<import("./components/content/Component").ContentProps>;
     Footer: React.FC<import("./components/footer/Component.desktop").FooterDesktopProps> | React.FC<import("./components/footer/Component").FooterProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;

package/dist/Component.responsive.js

@@ -2,23 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('./tslib.es6-7f8fab53.js');
 var React = require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal');
 require('react-merge-refs');
 require('./Context.js');
-require('@alfalab/core-components-button');
-var components_closer_Component = require('./components/closer/Component.js');
 require('./components/header/Component.js');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/icons-glyph/CrossHeavyMIcon');
+var components_closer_Component = require('./components/closer/Component.js');
 require('./components/header/Component.desktop.js');
 require('./components/content/Component.js');
 require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
 var Component_desktop = require('./Component.desktop.js');
-require('./transitions.module-336e79fe.js');
+require('./transitions.module-b2682a08.js');
 var hooks = require('@alfalab/hooks');
+require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');
 require('./components/footer/Component.mobile.js');

package/dist/components/closer/Component.d.ts

@@ -1,4 +1,5 @@
-import { ButtonHTMLAttributes, FC } from 'react';
+import { ButtonHTMLAttributes, ElementType, FC } from 'react';
+import { IconButtonProps } from "@alfalab/core-components-icon-button";
 type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
      * Дополнительный класс
@@ -8,6 +9,14 @@ type CloserProps = ButtonHTMLAttributes<HTMLButtonElement> & {
      * Позиция крестика
      */
     align?: 'left' | 'right';
+    /**
+     * Размер кнопки
+     */
+    size?: IconButtonProps['size'];
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
     /**
      * Флаг, что модальное окно открыто на весь экран
      */

package/dist/components/closer/Component.js

@@ -2,28 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('../../tslib.es6-7f8fab53.js');
 var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal');
 var Context = require('../../Context.js');
-var coreComponentsButton = require('@alfalab/core-components-button');
+var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
+var CrossHeavyMIcon = require('@alfalab/icons-glyph/CrossHeavyMIcon');
 
 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 = {"closer":"modal__closer_p22te","left":"modal__left_p22te","right":"modal__right_p22te","fullscreen":"modal__fullscreen_p22te"};
+var styles = {"closer":"modal__closer_w3br9","left":"modal__left_w3br9","right":"modal__right_w3br9","fullscreen":"modal__fullscreen_w3br9"};
 require('./index.css')
 
 var Closer = function (_a) {
-    var className = _a.className, fullscreen = _a.fullscreen, align = _a.align, restProps = tslib_es6.__rest(_a, ["className", "fullscreen", "align"]);
+    var className = _a.className, fullscreen = _a.fullscreen, align = _a.align, _b = _a.size, size = _b === void 0 ? 's' : _b, _c = _a.icon, icon = _c === void 0 ? CrossHeavyMIcon.CrossHeavyMIcon : _c, restProps = tslib_es6.__rest(_a, ["className", "fullscreen", "align", "size", "icon"]);
     var onClose = React.useContext(Context.ModalContext).onClose;
     var handleClick = React.useCallback(function (event) {
         onClose(event, 'closerClick');
     }, [onClose]);
-    return (React__default['default'].createElement(coreComponentsButton.Button, tslib_es6.__assign({ type: 'button', view: 'ghost', className: cn__default['default'](styles.closer, className, fullscreen && styles.fullscreen, align && styles[align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick }, restProps)));
+    return (React__default['default'].createElement(coreComponentsIconButton.IconButton, tslib_es6.__assign({ size: size, className: cn__default['default'](styles.closer, className, fullscreen && styles.fullscreen, align && styles[align]), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon }, restProps)));
 };
 
 exports.Closer = Closer;

package/dist/components/closer/index.css

@@ -1,4 +1,4 @@
-/* hash: 127s2 */
+/* hash: a0u92 */
 :root {
 
     /* Hard */
@@ -17,36 +17,28 @@
 
     /* paddings */
 
-    /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
-
     /* sticky */
 
     /* scroll */
+
+    /* mobile */
 }
-.modal__closer_p22te {
-    width: 48px;
-    height: 48px;
-    background-image: var(--modal-closer-icon);
-    background-position: center;
-    background-repeat: no-repeat;
+.modal__closer_w3br9 {
     flex-shrink: 0;
-    transition: opacity 0.2s ease-out
+
+    background: rgba(255, 255, 255, 0.4);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    border-radius: 50px;
 }
-.modal__closer_p22te:hover {
-        opacity: 0.7;
-    }
-.modal__closer_p22te:active {
-        opacity: 0.5;
-    }
-.modal__left_p22te,
-.modal__right_p22te {
+.modal__left_w3br9,
+.modal__right_w3br9 {
     position: sticky;
     top: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__right_p22te {
+.modal__right_w3br9 {
     margin-left: auto;
 }
-.modal__fullscreen_p22te {
+.modal__fullscreen_w3br9 {
     top: 0;
 }

package/dist/components/content/Component.desktop.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('../../tslib.es6-7f8fab53.js');
 var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal');
@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"content":"modal__content_h1xad modal__content_1c0jg","flex":"modal__flex_h1xad modal__flex_1c0jg","s":"modal__s_h1xad","m":"modal__m_h1xad","l":"modal__l_h1xad","fullscreen":"modal__fullscreen_h1xad"};
+var styles = {"content":"modal__content_1ooog modal__content_km6k3","flex":"modal__flex_1ooog modal__flex_km6k3","s":"modal__s_1ooog","m":"modal__m_1ooog","l":"modal__l_1ooog","fullscreen":"modal__fullscreen_1ooog"};
 require('./desktop.css')
 
 var ContentDesktop = function (_a) {

package/dist/components/content/Component.mobile.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('../../tslib.es6-7f8fab53.js');
 var React = require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal');
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"content":"modal__content_2lw1d modal__content_1c0jg","flex":"modal__flex_2lw1d modal__flex_1c0jg"};
+var styles = {"content":"modal__content_1ulr5 modal__content_km6k3","flex":"modal__flex_1ulr5 modal__flex_km6k3"};
 require('./mobile.css')
 
 var ContentMobile = function (props) { return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ styles: styles }, props))); };

package/dist/components/content/desktop.css

@@ -1,4 +1,4 @@
-/* hash: jvvhn */
+/* hash: 10bmf */
 :root {
 }:root {
 }:root {
@@ -29,19 +29,19 @@
     --modal-l-content-no-footer-bottom-padding: var(--gap-6xl);
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
-    /* closer */
-
     /* sticky */
 
     /* scroll */
-}.modal__content_1c0jg {
+
+    /* mobile */
+}.modal__content_km6k3 {
     box-sizing: border-box;
     width: 100%
-}.modal__content_1c0jg:first-child {
+}.modal__content_km6k3:first-child {
         padding-top: var(--modal-content-no-header-top-padding);
-    }.modal__content_1c0jg:last-child {
+    }.modal__content_km6k3:last-child {
         padding-bottom: var(--modal-content-no-footer-bottom-padding);
-    }.modal__flex_1c0jg {
+    }.modal__flex_km6k3 {
     flex: 1 1 auto;
 }
 :root {
@@ -588,33 +588,36 @@
     --modal-l-content-no-footer-bottom-padding: var(--gap-6xl);
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
-    /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
-
     /* sticky */
     --modal-footer-sticky-box-shadow: none;
     --modal-footer-sticky-background: var(--modal-header-background);
 
     /* scroll */
-    --modal-header-highlight-box-shadow: var(--shadow-s);
+    --modal-header-highlight-box-shadow: none;
     --modal-header-highlight-background: var(--color-light-bg-primary);
-    --modal-footer-highlight-box-shadow: var(--shadow-s-up);
+    --modal-footer-highlight-box-shadow: none;
     --modal-footer-highlight-background: var(--color-light-bg-primary);
+
+    /* mobile */
+    --modal-header-mobile-top-padding: var(--gap-s);
+    --modal-header-mobile-font-size: 18px;
+    --modal-header-mobile-line-height: 24px;
+    --modal-header-mobile-font-family: var(--font-family-system);
 }
-.modal__content_h1xad {
+.modal__content_1ooog {
 }
-.modal__flex_h1xad {
+.modal__flex_1ooog {
 }
-.modal__s_h1xad {
+.modal__s_1ooog {
     padding: var(--modal-s-content-paddings);
 }
-.modal__m_h1xad {
+.modal__m_1ooog {
     padding: var(--modal-m-content-paddings);
 }
-.modal__l_h1xad,
-.modal__fullscreen_h1xad {
+.modal__l_1ooog,
+.modal__fullscreen_1ooog {
     padding: var(--modal-l-content-paddings)
 }
-.modal__l_h1xad:last-child, .modal__fullscreen_h1xad:last-child {
+.modal__l_1ooog:last-child, .modal__fullscreen_1ooog:last-child {
         padding-bottom: var(--modal-l-content-no-footer-bottom-padding);
     }

package/dist/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 18qmb */
+/* hash: uchoi */
 :root {
 }:root {
 }:root {
@@ -25,19 +25,19 @@
     --modal-content-no-footer-bottom-padding: var(--gap-4xl);
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
-    /* closer */
-
     /* sticky */
 
     /* scroll */
-}.modal__content_1c0jg {
+
+    /* mobile */
+}.modal__content_km6k3 {
     box-sizing: border-box;
     width: 100%
-}.modal__content_1c0jg:first-child {
+}.modal__content_km6k3:first-child {
         padding-top: var(--modal-content-no-header-top-padding);
-    }.modal__content_1c0jg:last-child {
+    }.modal__content_km6k3:last-child {
         padding-bottom: var(--modal-content-no-footer-bottom-padding);
-    }.modal__flex_1c0jg {
+    }.modal__flex_km6k3 {
     flex: 1 1 auto;
 }
 :root {
@@ -584,22 +584,25 @@
     --modal-l-content-no-footer-bottom-padding: var(--gap-6xl);
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
-    /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
-
     /* sticky */
     --modal-footer-sticky-box-shadow: none;
     --modal-footer-sticky-background: var(--modal-header-background);
 
     /* scroll */
-    --modal-header-highlight-box-shadow: var(--shadow-s);
+    --modal-header-highlight-box-shadow: none;
     --modal-header-highlight-background: var(--color-light-bg-primary);
-    --modal-footer-highlight-box-shadow: var(--shadow-s-up);
+    --modal-footer-highlight-box-shadow: none;
     --modal-footer-highlight-background: var(--color-light-bg-primary);
+
+    /* mobile */
+    --modal-header-mobile-top-padding: var(--gap-s);
+    --modal-header-mobile-font-size: 18px;
+    --modal-header-mobile-line-height: 24px;
+    --modal-header-mobile-font-family: var(--font-family-system);
 }
-.modal__content_2lw1d {
+.modal__content_1ulr5 {
 
     padding: 0 var(--gap-m) 0;
 }
-.modal__flex_2lw1d {
+.modal__flex_1ulr5 {
 }

package/dist/components/footer/Component.desktop.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('../../tslib.es6-7f8fab53.js');
 var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal');
@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"footer":"modal__footer_11fvz modal__footer_3mc22","highlighted":"modal__highlighted_11fvz modal__highlighted_3mc22","sticky":"modal__sticky_11fvz modal__sticky_3mc22","fullscreen":"modal__fullscreen_11fvz","s":"modal__s_11fvz","m":"modal__m_11fvz","l":"modal__l_11fvz"};
+var styles = {"footer":"modal__footer_1ud1n modal__footer_wjhpf","highlighted":"modal__highlighted_1ud1n modal__highlighted_wjhpf","sticky":"modal__sticky_1ud1n modal__sticky_wjhpf","fullscreen":"modal__fullscreen_1ud1n","s":"modal__s_1ud1n","m":"modal__m_1ud1n","l":"modal__l_1ud1n"};
 require('./desktop.css')
 
 var FooterDesktop = function (_a) {

package/dist/components/footer/Component.js

@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var layoutStyles = {"column":"modal__column_1xjwa","gap-16":"modal__gap-16_1xjwa","gap-24":"modal__gap-24_1xjwa","gap-32":"modal__gap-32_1xjwa","start":"modal__start_1xjwa","center":"modal__center_1xjwa","space-between":"modal__space-between_1xjwa"};
+var layoutStyles = {"column":"modal__column_rfxw4","gap-16":"modal__gap-16_rfxw4","gap-24":"modal__gap-24_rfxw4","gap-32":"modal__gap-32_rfxw4","start":"modal__start_rfxw4","center":"modal__center_rfxw4","space-between":"modal__space-between_rfxw4"};
 require('./layout.css')
 
 var Footer = function (_a) {

package/dist/components/footer/Component.mobile.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ae9d9dce.js');
+var tslib_es6 = require('../../tslib.es6-7f8fab53.js');
 var React = require('react');
 require('classnames');
 require('@alfalab/core-components-base-modal');
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var styles = {"footer":"modal__footer_1usq0 modal__footer_3mc22","highlighted":"modal__highlighted_1usq0 modal__highlighted_3mc22","sticky":"modal__sticky_1usq0 modal__sticky_3mc22"};
+var styles = {"footer":"modal__footer_1a25a modal__footer_wjhpf","highlighted":"modal__highlighted_1a25a modal__highlighted_wjhpf","sticky":"modal__sticky_1a25a modal__sticky_wjhpf"};
 require('./mobile.css')
 
 var FooterMobile = function (props) { return React__default['default'].createElement(components_footer_Component.Footer, tslib_es6.__assign({ styles: styles }, props)); };

package/dist/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 1vyzn */
+/* hash: n5s4v */
 :root {
 }:root {
 }:root {
@@ -9,7 +9,6 @@
     /* Hard */
 
     /* Up */
-    --shadow-s-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08);
 
     /* Hard up */
 }:root {
@@ -33,25 +32,25 @@
     --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);
 
-    /* closer */
-
     /* sticky */
     --modal-footer-sticky-box-shadow: none;
     --modal-footer-sticky-background: var(--modal-header-background);
 
     /* scroll */
-    --modal-footer-highlight-box-shadow: var(--shadow-s-up);
+    --modal-footer-highlight-box-shadow: none;
     --modal-footer-highlight-background: var(--color-light-bg-primary);
-}.modal__footer_3mc22 {
+
+    /* mobile */
+}.modal__footer_wjhpf {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
     background: var(--modal-header-background);
-}.modal__sticky_3mc22 {
+}.modal__sticky_wjhpf {
     background: var(--modal-footer-sticky-background);
     box-shadow: var(--modal-footer-sticky-box-shadow);
     position: sticky;
-}.modal__highlighted_3mc22 {
+}.modal__highlighted_wjhpf {
     background: var(--modal-footer-highlight-background);
     box-shadow: var(--modal-footer-highlight-box-shadow);
 }
@@ -599,40 +598,43 @@
     --modal-l-content-no-footer-bottom-padding: var(--gap-6xl);
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
-    /* closer */
-    --modal-closer-icon: url('https://alfabank.gcdn.co/icons/glyph_cross_m.svg');
-
     /* sticky */
     --modal-footer-sticky-box-shadow: none;
     --modal-footer-sticky-background: var(--modal-header-background);
 
     /* scroll */
-    --modal-header-highlight-box-shadow: var(--shadow-s);
+    --modal-header-highlight-box-shadow: none;
     --modal-header-highlight-background: var(--color-light-bg-primary);
-    --modal-footer-highlight-box-shadow: var(--shadow-s-up);
+    --modal-footer-highlight-box-shadow: none;
     --modal-footer-highlight-background: var(--color-light-bg-primary);
+
+    /* mobile */
+    --modal-header-mobile-top-padding: var(--gap-s);
+    --modal-header-mobile-font-size: 18px;
+    --modal-header-mobile-line-height: 24px;
+    --modal-header-mobile-font-family: var(--font-family-system);
 }
-.modal__footer_11fvz {
+.modal__footer_1ud1n {
 
     border-bottom-left-radius: var(--modal-border-radius);
     border-bottom-right-radius: var(--modal-border-radius);
 }
-.modal__highlighted_11fvz {
+.modal__highlighted_1ud1n {
 }
-.modal__sticky_11fvz {
+.modal__sticky_1ud1n {
 
     bottom: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__fullscreen_11fvz {
+.modal__fullscreen_1ud1n {
     bottom: 0;
 }
-.modal__s_11fvz {
+.modal__s_1ud1n {
     padding: var(--modal-s-footer-paddings);
 }
-.modal__m_11fvz {
+.modal__m_1ud1n {
     padding: var(--modal-m-footer-paddings);
 }
-.modal__l_11fvz,
-.modal__fullscreen_11fvz {
+.modal__l_1ud1n,
+.modal__fullscreen_1ud1n {
     padding: var(--modal-l-footer-paddings);
 }