@alfalab/core-components-modal 4.0.6 → 4.2.0

package/dist/esm/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 7ir00 */
+/* 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_ufzbz {
+
+    /* mobile */
+}.modal__content_km6k3 {
     box-sizing: border-box;
     width: 100%
-}.modal__content_ufzbz:first-child {
+}.modal__content_km6k3:first-child {
         padding-top: var(--modal-content-no-header-top-padding);
-    }.modal__content_ufzbz:last-child {
+    }.modal__content_km6k3:last-child {
         padding-bottom: var(--modal-content-no-footer-bottom-padding);
-    }.modal__flex_ufzbz {
+    }.modal__flex_km6k3 {
     flex: 1 1 auto;
 }
 :root {
@@ -339,6 +339,7 @@
     --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
     --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
     --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
     --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -402,6 +403,7 @@
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
     --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
     --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
     --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
@@ -582,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_y6uri {
+.modal__content_1ulr5 {
 
     padding: 0 var(--gap-m) 0;
 }
-.modal__flex_y6uri {
+.modal__flex_1ulr5 {
 }

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

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-980e4c5b.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-38b70e5e.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import '../../Context.js';
 import { Footer } from './Component.js';
 
-var styles = {"footer":"modal__footer_vue3z modal__footer_1ydvs","highlighted":"modal__highlighted_vue3z modal__highlighted_1ydvs","sticky":"modal__sticky_vue3z modal__sticky_1ydvs","fullscreen":"modal__fullscreen_vue3z","s":"modal__s_vue3z","m":"modal__m_vue3z","l":"modal__l_vue3z"};
+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/esm/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import { ModalContext } from '../../Context.js';
 
-var layoutStyles = {"column":"modal__column_2k8js","gap-16":"modal__gap-16_2k8js","gap-24":"modal__gap-24_2k8js","gap-32":"modal__gap-32_2k8js","start":"modal__start_2k8js","center":"modal__center_2k8js","space-between":"modal__space-between_2k8js"};
+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/esm/components/footer/Component.mobile.js

@@ -1,11 +1,11 @@
-import { a as __assign } from '../../tslib.es6-980e4c5b.js';
+import { a as __assign } from '../../tslib.es6-38b70e5e.js';
 import React from 'react';
 import 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import '../../Context.js';
 import { Footer } from './Component.js';
 
-var styles = {"footer":"modal__footer_1sge0 modal__footer_1ydvs","highlighted":"modal__highlighted_1sge0 modal__highlighted_1ydvs","sticky":"modal__sticky_1sge0 modal__sticky_1ydvs"};
+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.createElement(Footer, __assign({ styles: styles }, props)); };

package/dist/esm/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: hrah7 */
+/* 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_1ydvs {
+
+    /* 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_1ydvs {
+}.modal__sticky_wjhpf {
     background: var(--modal-footer-sticky-background);
     box-shadow: var(--modal-footer-sticky-box-shadow);
     position: sticky;
-}.modal__highlighted_1ydvs {
+}.modal__highlighted_wjhpf {
     background: var(--modal-footer-highlight-background);
     box-shadow: var(--modal-footer-highlight-box-shadow);
 }
@@ -354,6 +353,7 @@
     --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
     --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
     --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
     --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -417,6 +417,7 @@
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
     --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
     --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
     --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
@@ -597,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_vue3z {
+.modal__footer_1ud1n {
 
     border-bottom-left-radius: var(--modal-border-radius);
     border-bottom-right-radius: var(--modal-border-radius);
 }
-.modal__highlighted_vue3z {
+.modal__highlighted_1ud1n {
 }
-.modal__sticky_vue3z {
+.modal__sticky_1ud1n {
 
     bottom: calc(var(--modal-vertical-padding) * -1);
 }
-.modal__fullscreen_vue3z {
+.modal__fullscreen_1ud1n {
     bottom: 0;
 }
-.modal__s_vue3z {
+.modal__s_1ud1n {
     padding: var(--modal-s-footer-paddings);
 }
-.modal__m_vue3z {
+.modal__m_1ud1n {
     padding: var(--modal-m-footer-paddings);
 }
-.modal__l_vue3z,
-.modal__fullscreen_vue3z {
+.modal__l_1ud1n,
+.modal__fullscreen_1ud1n {
     padding: var(--modal-l-footer-paddings);
 }

package/dist/esm/components/footer/layout.css

@@ -1,4 +1,4 @@
-/* hash: menod */
+/* hash: rt5c0 */
 :root {
 
     /* Hard */
@@ -19,66 +19,66 @@
 
     /* paddings */
 
-    /* closer */
-
     /* sticky */
 
     /* scroll */
+
+    /* mobile */
 }
-.modal__column_2k8js {
+.modal__column_rfxw4 {
     display: flex;
     flex-direction: column
 }
-.modal__column_2k8js > * {
+.modal__column_rfxw4 > * {
         margin-bottom: var(--modal-footer-default-gap);
     }
-.modal__column_2k8js > *:last-child,
-    .modal__column_2k8js > *:only-child {
+.modal__column_rfxw4 > *:last-child,
+    .modal__column_rfxw4 > *:only-child {
         margin-bottom: 0;
     }
-.modal__column_2k8js.modal__gap-16_2k8js > * {
+.modal__column_rfxw4.modal__gap-16_rfxw4 > * {
         margin-bottom: var(--gap-m);
     }
-.modal__column_2k8js.modal__gap-24_2k8js > * {
+.modal__column_rfxw4.modal__gap-24_rfxw4 > * {
         margin-bottom: var(--gap-xl);
     }
-.modal__column_2k8js.modal__gap-32_2k8js > * {
+.modal__column_rfxw4.modal__gap-32_rfxw4 > * {
         margin-bottom: var(--gap-2xl);
     }
-.modal__start_2k8js {
+.modal__start_rfxw4 {
     justify-content: flex-start;
 }
-.modal__center_2k8js {
+.modal__center_rfxw4 {
     justify-content: center;
 }
-.modal__space-between_2k8js {
+.modal__space-between_rfxw4 {
     justify-content: space-between
 }
-.modal__space-between_2k8js > * {
+.modal__space-between_rfxw4 > * {
         flex: 1;
     }
-.modal__start_2k8js,
-.modal__center_2k8js,
-.modal__space-between_2k8js {
+.modal__start_rfxw4,
+.modal__center_rfxw4,
+.modal__space-between_rfxw4 {
     display: flex
 }
-.modal__start_2k8js > *, .modal__center_2k8js > *, .modal__space-between_2k8js > * {
+.modal__start_rfxw4 > *, .modal__center_rfxw4 > *, .modal__space-between_rfxw4 > * {
         margin-right: var(--modal-footer-default-gap);
     }
-.modal__start_2k8js > *:last-child,
-    .modal__start_2k8js > *:only-child,
-    .modal__center_2k8js > *:last-child,
-    .modal__center_2k8js > *:only-child,
-    .modal__space-between_2k8js > *:last-child,
-    .modal__space-between_2k8js > *:only-child {
+.modal__start_rfxw4 > *:last-child,
+    .modal__start_rfxw4 > *:only-child,
+    .modal__center_rfxw4 > *:last-child,
+    .modal__center_rfxw4 > *:only-child,
+    .modal__space-between_rfxw4 > *:last-child,
+    .modal__space-between_rfxw4 > *:only-child {
         margin-right: 0;
     }
-.modal__start_2k8js.modal__gap-16_2k8js > *, .modal__center_2k8js.modal__gap-16_2k8js > *, .modal__space-between_2k8js.modal__gap-16_2k8js > * {
+.modal__start_rfxw4.modal__gap-16_rfxw4 > *, .modal__center_rfxw4.modal__gap-16_rfxw4 > *, .modal__space-between_rfxw4.modal__gap-16_rfxw4 > * {
         margin-right: var(--gap-m);
     }
-.modal__start_2k8js.modal__gap-24_2k8js > *, .modal__center_2k8js.modal__gap-24_2k8js > *, .modal__space-between_2k8js.modal__gap-24_2k8js > * {
+.modal__start_rfxw4.modal__gap-24_rfxw4 > *, .modal__center_rfxw4.modal__gap-24_rfxw4 > *, .modal__space-between_rfxw4.modal__gap-24_rfxw4 > * {
         margin-right: var(--gap-xl);
     }
-.modal__start_2k8js.modal__gap-32_2k8js > *, .modal__center_2k8js.modal__gap-32_2k8js > *, .modal__space-between_2k8js.modal__gap-32_2k8js > * {
+.modal__start_rfxw4.modal__gap-32_rfxw4 > *, .modal__center_rfxw4.modal__gap-32_rfxw4 > *, .modal__space-between_rfxw4.modal__gap-32_rfxw4 > * {
         margin-right: var(--gap-2xl);
     }

package/dist/esm/components/footer/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 7jwkd */
+/* hash: ktzhy */
 :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 {
@@ -25,25 +24,25 @@
 
     /* paddings */
 
-    /* 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_1ydvs {
+
+    /* 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_1ydvs {
+}.modal__sticky_wjhpf {
     background: var(--modal-footer-sticky-background);
     box-shadow: var(--modal-footer-sticky-box-shadow);
     position: sticky;
-}.modal__highlighted_1ydvs {
+}.modal__highlighted_wjhpf {
     background: var(--modal-footer-highlight-background);
     box-shadow: var(--modal-footer-highlight-box-shadow);
 }
@@ -346,6 +345,7 @@
     --color-dark-graphic-primary-alpha-30: rgba(255, 255, 255, 0.3);
     --color-dark-graphic-primary-alpha-40: rgba(255, 255, 255, 0.4);
     --color-dark-graphic-primary-alpha-50: rgba(255, 255, 255, 0.5);
+    --color-dark-graphic-primary-shade-15: rgb(217, 217, 217);
     --color-dark-graphic-primary-shade-30: rgb(179, 179, 179);
     --color-dark-graphic-primary-shade-50: rgb(128, 128, 128);
     --color-dark-graphic-primary-tint-10: rgb(255, 255, 255);
@@ -409,6 +409,7 @@
     --color-light-graphic-primary-alpha-30: rgba(11, 31, 53, 0.3);
     --color-light-graphic-primary-alpha-40: rgba(11, 31, 53, 0.4);
     --color-light-graphic-primary-alpha-50: rgba(11, 31, 53, 0.5);
+    --color-light-graphic-primary-tint-15: rgb(48, 65, 83);
     --color-light-graphic-primary-tint-30: rgb(84, 98, 114);
     --color-light-graphic-primary-tint-50: rgb(133, 143, 154);
     --color-light-graphic-primary-shade-10: rgb(10, 28, 48);
@@ -589,26 +590,29 @@
     --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_1sge0 {
+.modal__footer_1a25a {
 
     padding: var(--gap-xl) var(--gap-m);
 }
-.modal__highlighted_1sge0 {
+.modal__highlighted_1a25a {
 }
-.modal__sticky_1sge0 {
+.modal__sticky_1a25a {
 
     bottom: 0;
 }

package/dist/esm/components/header/Component.d.ts

@@ -5,23 +5,38 @@ type HeaderProps = {
      */
     children?: ReactNode;
     /**
-     * Наличие крестика
+     * Слот слева
      */
-    hasCloser?: boolean;
+    leftAddons?: ReactNode;
+    /**
+     * Компонент крестика
+     */
+    closer?: ReactNode;
     /**
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
     /**
      * Заголовок шапки
      */
     title?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'right' | 'center';
+    trim?: boolean;
     /**
      * Фиксирует шапку
      */
     sticky?: boolean;
 };
-declare const Header: FC<HeaderProps & {
-    styles: Record<string, string>;
-}>;
+declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/dist/esm/components/header/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { HeaderProps } from "./Component";
-type HeaderDesktopProps = HeaderProps & {
+type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
     /**
      * Размер
      */
@@ -9,6 +9,10 @@ type HeaderDesktopProps = HeaderProps & {
      * Флаг, что модальное окно открыто на весь экран
      */
     fullscreen?: boolean;
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
 };
 declare const HeaderDesktop: FC<HeaderDesktopProps>;
 export { HeaderDesktopProps, HeaderDesktop };

package/dist/esm/components/header/Component.desktop.js

@@ -1,18 +1,23 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-980e4c5b.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-38b70e5e.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import '../../Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import '../closer/Component.js';
 import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
 
-var styles = {"header":"modal__header_11dwz modal__header_1u7ld","s":"modal__s_11dwz","m":"modal__m_11dwz","l":"modal__l_11dwz","fullscreen":"modal__fullscreen_11dwz","sticky":"modal__sticky_11dwz modal__sticky_1u7ld","highlighted":"modal__highlighted_11dwz modal__highlighted_1u7ld","content":"modal__content_11dwz modal__content_1u7ld","title":"modal__title_11dwz modal__title_1u7ld"};
+var styles = {"header":"modal__header_1jiyl","content":"modal__content_1jiyl","s":"modal__s_1jiyl","m":"modal__m_1jiyl","l":"modal__l_1jiyl","fullscreen":"modal__fullscreen_1jiyl","sticky":"modal__sticky_1jiyl"};
 require('./desktop.css')
 
 var HeaderDesktop = function (_a) {
-    var size = _a.size, className = _a.className, fullscreen = _a.fullscreen, restProps = __rest(_a, ["size", "className", "fullscreen"]);
-    return (React.createElement(Header, __assign({ className: cn(className, size && styles[size], fullscreen && styles.fullscreen), styles: styles }, restProps)));
+    var _b;
+    var size = _a.size, className = _a.className, contentClassName = _a.contentClassName, fullscreen = _a.fullscreen, hasCloser = _a.hasCloser, sticky = _a.sticky, restProps = __rest(_a, ["size", "className", "contentClassName", "fullscreen", "hasCloser", "sticky"]);
+    return (React.createElement(Header, __assign({ className: cn(className, styles.header, size && styles[size], (_b = {},
+            _b[styles.fullscreen] = fullscreen,
+            _b[styles.sticky] = sticky,
+            _b)), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, null) : null, sticky: sticky }, restProps)));
 };
 
 export { HeaderDesktop };

package/dist/esm/components/header/Component.js

@@ -1,27 +1,31 @@
-import '../../tslib.es6-980e4c5b.js';
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import { ModalContext } from '../../Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import { Closer } from '../closer/Component.js';
+
+var styles = {"header":"modal__header_117ge","highlighted":"modal__highlighted_117ge","sticky":"modal__sticky_117ge","hasContent":"modal__hasContent_117ge","content":"modal__content_117ge","title":"modal__title_117ge","addon":"modal__addon_117ge","left":"modal__left_117ge","center":"modal__center_117ge","right":"modal__right_117ge","trim":"modal__trim_117ge"};
+require('./index.css')
 
 var Header = function (_a) {
-    var _b;
-    var className = _a.className, children = _a.children, title = _a.title, _c = _a.hasCloser, hasCloser = _c === void 0 ? true : _c, sticky = _a.sticky, styles = _a.styles;
-    var _d = useContext(ModalContext), headerHighlighted = _d.headerHighlighted, setHasHeader = _d.setHasHeader;
+    var _b, _c;
+    var className = _a.className, addonClassName = _a.addonClassName, contentClassName = _a.contentClassName, leftAddons = _a.leftAddons, children = _a.children, _d = _a.align, align = _d === void 0 ? 'left' : _d, _e = _a.trim, trim = _e === void 0 ? true : _e, title = _a.title, closer = _a.closer, sticky = _a.sticky;
+    var _f = useContext(ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
     var hasContent = title || Boolean(children);
     useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
     return (React.createElement("div", { className: cn(styles.header, className, (_b = {},
-            _b[styles.highlighted] = sticky && headerHighlighted,
+            _b[styles.highlighted] = hasContent && sticky && headerHighlighted,
             _b[styles.sticky] = sticky,
+            _b[styles.hasContent] = hasContent,
             _b)) },
-        hasContent && (React.createElement("div", { className: styles.content },
+        leftAddons && React.createElement("div", { className: cn(styles.addon, addonClassName) }, leftAddons),
+        hasContent && (React.createElement("div", { className: cn(styles.content, contentClassName, styles[align], (_c = {},
+                _c[styles.trim] = trim,
+                _c)) },
             children,
             title && React.createElement("div", { className: styles.title }, title))),
-        hasCloser && React.createElement(Closer, null)));
+        closer && React.createElement("div", { className: cn(styles.addon, addonClassName) }, closer)));
 };
 
 export { Header };

package/dist/esm/components/header/Component.mobile.d.ts

@@ -1,5 +1,10 @@
 import { FC } from 'react';
 import { HeaderProps } from "./Component";
-type HeaderMobileProps = HeaderProps;
+type HeaderMobileProps = Omit<HeaderProps, 'closer'> & {
+    /**
+     * Наличие крестика
+     */
+    hasCloser?: boolean;
+};
 declare const HeaderMobile: FC<HeaderMobileProps>;
 export { HeaderMobileProps, HeaderMobile };

package/dist/esm/components/header/Component.mobile.js

@@ -1,15 +1,23 @@
-import { a as __assign } from '../../tslib.es6-980e4c5b.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-38b70e5e.js';
 import React from 'react';
-import 'classnames';
+import cn from 'classnames';
 import '@alfalab/core-components-base-modal/dist/esm';
 import '../../Context.js';
-import '@alfalab/core-components-button/dist/esm';
-import '../closer/Component.js';
 import { Header } from './Component.js';
+import '@alfalab/core-components-icon-button/dist/esm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { Closer } from '../closer/Component.js';
+import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
 
-var styles = {"header":"modal__header_1i22q modal__header_1u7ld","sticky":"modal__sticky_1i22q modal__sticky_1u7ld","highlighted":"modal__highlighted_1i22q modal__highlighted_1u7ld","content":"modal__content_1i22q modal__content_1u7ld","title":"modal__title_1i22q modal__title_1u7ld"};
+var styles = {"sticky":"modal__sticky_1h82s","content":"modal__content_1h82s"};
 require('./mobile.css')
 
-var HeaderMobile = function (props) { return React.createElement(Header, __assign({ styles: styles }, props)); };
+var HeaderMobile = function (_a) {
+    var _b;
+    var className = _a.className, hasCloser = _a.hasCloser, sticky = _a.sticky, contentClassName = _a.contentClassName, restProps = __rest(_a, ["className", "hasCloser", "sticky", "contentClassName"]);
+    return (React.createElement(Header, __assign({ className: cn(className, (_b = {},
+            _b[styles.sticky] = sticky,
+            _b)), contentClassName: cn(styles.content, contentClassName), closer: hasCloser ? React.createElement(Closer, { icon: CrossMIcon, size: 'xs' }) : null, sticky: sticky }, restProps)));
+};
 
 export { HeaderMobile };