@alfalab/core-components-side-panel 2.0.2 → 2.1.2

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

@@ -40,6 +40,10 @@ type HeaderProps = {
      * Фиксирует шапку
      */
     sticky?: boolean;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/cssm/components/header/Component.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib_es6 = require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
 require('@alfalab/core-components-base-modal/cssm');
@@ -16,17 +17,18 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Header = function (_a) {
     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, dataTestId = _a.dataTestId;
+    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, imageUrl = _a.imageUrl, dataTestId = _a.dataTestId;
     var _f = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
     var hasContent = Boolean(title || children);
     React.useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].header, className, (_b = {},
+            _b[styles__default['default'].backgroundImage] = imageUrl,
             _b[styles__default['default'].highlighted] = hasContent && sticky && headerHighlighted,
             _b[styles__default['default'].sticky] = sticky,
             _b[styles__default['default'].hasContent] = hasContent,
-            _b)), "data-test-id": dataTestId },
+            _b)), "data-test-id": dataTestId, style: tslib_es6.__assign({}, (imageUrl && { backgroundImage: "url(" + imageUrl + ")" })) },
         leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].addon, addonClassName) }, leftAddons),
         hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].content, contentClassName, styles__default['default'][align], (_c = {},
                 _c[styles__default['default'].trim] = trim,

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

@@ -45,6 +45,10 @@
 .sticky.hasContent {
         background: var(--side-panel-header-background);
     }
+.header.backgroundImage {
+    background: center no-repeat;
+    background-size: cover;
+}
 .content {
     flex-grow: 1;
 }

package/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 17o53 */
+/* hash: rs8k1 */
 :root {
 
     /* Hard */
@@ -20,9 +20,9 @@
 
     /* mobile */
 }
-.side-panel__s_is6nq {
+.side-panel__s_4vlmi {
     width: var(--side-panel-s-width);
 }
-.side-panel__hidden_is6nq {
+.side-panel__hidden_4vlmi {
     overflow-x: hidden;
 }

package/desktop.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-e9774cb8.js');
+require('./tslib.es6-83df3c48.js');
 require('react');
 require('classnames');
 require('@alfalab/core-components-drawer');

package/esm/Component.desktop.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from './tslib.es6-395a8f91.js';
 import React, { forwardRef, useRef, isValidElement, cloneElement } from 'react';
 import cn from 'classnames';
 import { Drawer } from '@alfalab/core-components-drawer/esm';
@@ -15,10 +15,10 @@ import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
 
-var styles = {"s":"side-panel__s_is6nq","hidden":"side-panel__hidden_is6nq"};
+var styles = {"s":"side-panel__s_4vlmi","hidden":"side-panel__hidden_4vlmi"};
 require('./desktop.css')
 
-var transitions = {"appear":"side-panel__appear_121gq","enter":"side-panel__enter_121gq","appearActive":"side-panel__appearActive_121gq","enterActive":"side-panel__enterActive_121gq","exit":"side-panel__exit_121gq","exitActive":"side-panel__exitActive_121gq","exitDone":"side-panel__exitDone_121gq"};
+var transitions = {"appear":"side-panel__appear_o4vp6","enter":"side-panel__enter_o4vp6","appearActive":"side-panel__appearActive_o4vp6","enterActive":"side-panel__enterActive_o4vp6","exit":"side-panel__exit_o4vp6","exitActive":"side-panel__exitActive_o4vp6","exitDone":"side-panel__exitDone_o4vp6"};
 require('./transitions.desktop.css')
 
 var SidePanelDesktopComponent = forwardRef(function (_a, ref) {

package/esm/Component.mobile.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from './tslib.es6-395a8f91.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/esm';
@@ -14,10 +14,10 @@ import { HeaderMobile } from './components/header/Component.mobile.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';
 
-var styles = {"component":"side-panel__component_p4itn"};
+var styles = {"component":"side-panel__component_cqv0y"};
 require('./mobile.css')
 
-var transitions = {"appear":"side-panel__appear_rtpkz","enter":"side-panel__enter_rtpkz","appearActive":"side-panel__appearActive_rtpkz","enterActive":"side-panel__enterActive_rtpkz","exit":"side-panel__exit_rtpkz","exitActive":"side-panel__exitActive_rtpkz","exitDone":"side-panel__exitDone_rtpkz"};
+var transitions = {"appear":"side-panel__appear_fg1sb","enter":"side-panel__enter_fg1sb","appearActive":"side-panel__appearActive_fg1sb","enterActive":"side-panel__enterActive_fg1sb","exit":"side-panel__exit_fg1sb","exitActive":"side-panel__exitActive_fg1sb","exitDone":"side-panel__exitDone_fg1sb"};
 require('./transitions.mobile.css')
 
 var SidePanelMobileComponent = forwardRef(function (_a, ref) {

package/esm/Component.responsive.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from './tslib.es6-395a8f91.js';
 import React, { forwardRef, useMemo, useContext } from 'react';
 import 'classnames';
 import '@alfalab/core-components-drawer/esm';

package/esm/components/closer/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React, { useContext, useCallback } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
@@ -6,7 +6,7 @@ import { ModalContext } from '../../Context.js';
 import { IconButton } from '@alfalab/core-components-icon-button/esm';
 import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
 
-var styles = {"closer":"side-panel__closer_1nfmj","button":"side-panel__button_1nfmj","sticky":"side-panel__sticky_1nfmj"};
+var styles = {"closer":"side-panel__closer_isdho","button":"side-panel__button_isdho","sticky":"side-panel__sticky_isdho"};
 require('./index.css')
 
 /**

package/esm/components/closer/index.css

@@ -1,4 +1,4 @@
-/* hash: 179zv */
+/* hash: re3cd */
 :root {
     --color-light-bg-primary-alpha-40: rgba(255, 255, 255, 0.4);
 }
@@ -25,7 +25,7 @@
 :root {
     --side-panel-closer-bg-color: var(--color-light-bg-primary-alpha-40);
 }
-.side-panel__closer_1nfmj {
+.side-panel__closer_isdho {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -34,13 +34,13 @@
     align-items: center;
     justify-content: center;
 }
-.side-panel__button_1nfmj {
+.side-panel__button_isdho {
     background: var(--side-panel-closer-bg-color);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
 }
-.side-panel__sticky_1nfmj {
+.side-panel__sticky_isdho {
     position: sticky;
     top: 0;
 }

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

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import '../../Context.js';
 import { Content } from './Component.js';
 
-var styles = {"s":"side-panel__s_yj347"};
+var styles = {"s":"side-panel__s_1awqw"};
 require('./desktop.css')
 
 var ContentDesktop = function (_a) {

package/esm/components/content/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import { ModalContext } from '../../Context.js';
 
-var styles = {"content":"side-panel__content_wzyus","flex":"side-panel__flex_wzyus"};
+var styles = {"content":"side-panel__content_136mi","flex":"side-panel__flex_136mi"};
 require('./index.css')
 
 var Content = function (_a) {

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

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import '../../Context.js';
 import { Content } from './Component.js';
 
-var styles = {"content":"side-panel__content_10zvp"};
+var styles = {"content":"side-panel__content_1ewgr"};
 require('./mobile.css')
 
 var ContentMobile = function (_a) {

package/esm/components/content/desktop.css

@@ -1,4 +1,4 @@
-/* hash: urvn0 */
+/* hash: hkwiq */
 :root {
 
     /* Hard */
@@ -23,9 +23,9 @@
 
     /* mobile */
 }
-.side-panel__s_yj347 {
+.side-panel__s_1awqw {
     padding: var(--side-panel-s-content-paddings)
 }
-.side-panel__s_yj347:last-child {
+.side-panel__s_1awqw:last-child {
         padding-bottom: var(--gap-2xl);
     }

package/esm/components/content/index.css

@@ -1,4 +1,4 @@
-/* hash: 1g8cg */
+/* hash: 131dc */
 :root {
 
     /* Hard */
@@ -19,10 +19,10 @@
 
     /* mobile */
 }
-.side-panel__content_wzyus {
+.side-panel__content_136mi {
     box-sizing: border-box;
     width: 100%;
 }
-.side-panel__flex_wzyus {
+.side-panel__flex_136mi {
     flex: 1 1 auto;
 }

package/esm/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: kl8zz */
+/* hash: kqqd2 */
 :root {
 
     /* Hard */
@@ -22,9 +22,9 @@
 
     /* mobile */
 }
-.side-panel__content_10zvp {
+.side-panel__content_1ewgr {
     padding: 0 var(--gap-m)
 }
-.side-panel__content_10zvp:last-child {
+.side-panel__content_1ewgr:last-child {
         padding-bottom: var(--gap-m);
     }

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

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import '../../Context.js';
 import { Footer } from './Component.js';
 
-var styles = {"sticky":"side-panel__sticky_hqdfw","s":"side-panel__s_hqdfw"};
+var styles = {"sticky":"side-panel__sticky_1kup9","s":"side-panel__s_1kup9"};
 require('./desktop.css')
 
 var FooterDesktop = function (_a) {

package/esm/components/footer/Component.js

@@ -3,10 +3,10 @@ import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import { ModalContext } from '../../Context.js';
 
-var styles = {"footer":"side-panel__footer_9pru0","sticky":"side-panel__sticky_9pru0","highlighted":"side-panel__highlighted_9pru0"};
+var styles = {"footer":"side-panel__footer_m3fmp","sticky":"side-panel__sticky_m3fmp","highlighted":"side-panel__highlighted_m3fmp"};
 require('./index.css')
 
-var layoutStyles = {"column":"side-panel__column_1i46u","gap-16":"side-panel__gap-16_1i46u","gap-24":"side-panel__gap-24_1i46u","gap-32":"side-panel__gap-32_1i46u","start":"side-panel__start_1i46u","center":"side-panel__center_1i46u","space-between":"side-panel__space-between_1i46u"};
+var layoutStyles = {"column":"side-panel__column_m7em9","gap-16":"side-panel__gap-16_m7em9","gap-24":"side-panel__gap-24_m7em9","gap-32":"side-panel__gap-32_m7em9","start":"side-panel__start_m7em9","center":"side-panel__center_m7em9","space-between":"side-panel__space-between_m7em9"};
 require('./layout.css')
 
 var Footer = function (_a) {

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

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import '../../Context.js';
 import { Footer } from './Component.js';
 
-var styles = {"footer":"side-panel__footer_4ndt6","sticky":"side-panel__sticky_4ndt6"};
+var styles = {"footer":"side-panel__footer_19amv","sticky":"side-panel__sticky_19amv"};
 require('./mobile.css')
 
 var FooterMobile = function (_a) {

package/esm/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: ferk3 */
+/* hash: 13mi1 */
 :root {
 
     /* Hard */
@@ -24,9 +24,9 @@
 
     /* mobile */
 }
-.side-panel__sticky_hqdfw {
+.side-panel__sticky_1kup9 {
     bottom: 0;
 }
-.side-panel__s_hqdfw {
+.side-panel__s_1kup9 {
     padding: var(--side-panel-s-footer-paddings);
 }

package/esm/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sozt */
+/* hash: hvm9a */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
@@ -26,16 +26,16 @@
 
     /* mobile */
 }
-.side-panel__footer_9pru0 {
+.side-panel__footer_m3fmp {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
 }
-.side-panel__sticky_9pru0 {
+.side-panel__sticky_m3fmp {
     background: var(--side-panel-footer-background);
     position: sticky;
 }
-.side-panel__highlighted_9pru0 {
+.side-panel__highlighted_m3fmp {
     background: var(--side-panel-footer-highlight-background);
     box-shadow: var(--side-panel-footer-highlight-box-shadow);
 }

package/esm/components/footer/layout.css

@@ -1,4 +1,4 @@
-/* hash: 1f43z */
+/* hash: 4aqet */
 :root {
 
     /* Hard */
@@ -25,60 +25,60 @@
 
     /* mobile */
 }
-.side-panel__column_1i46u {
+.side-panel__column_m7em9 {
     display: flex;
     flex-direction: column
 }
-.side-panel__column_1i46u > * {
+.side-panel__column_m7em9 > * {
         margin-bottom: var(--side-panel-footer-default-gap);
     }
-.side-panel__column_1i46u > *:last-child,
-    .side-panel__column_1i46u > *:only-child {
+.side-panel__column_m7em9 > *:last-child,
+    .side-panel__column_m7em9 > *:only-child {
         margin-bottom: 0;
     }
-.side-panel__column_1i46u.side-panel__gap-16_1i46u > * {
+.side-panel__column_m7em9.side-panel__gap-16_m7em9 > * {
         margin-bottom: var(--gap-m);
     }
-.side-panel__column_1i46u.side-panel__gap-24_1i46u > * {
+.side-panel__column_m7em9.side-panel__gap-24_m7em9 > * {
         margin-bottom: var(--gap-xl);
     }
-.side-panel__column_1i46u.side-panel__gap-32_1i46u > * {
+.side-panel__column_m7em9.side-panel__gap-32_m7em9 > * {
         margin-bottom: var(--gap-2xl);
     }
-.side-panel__start_1i46u {
+.side-panel__start_m7em9 {
     justify-content: flex-start;
 }
-.side-panel__center_1i46u {
+.side-panel__center_m7em9 {
     justify-content: center;
 }
-.side-panel__space-between_1i46u {
+.side-panel__space-between_m7em9 {
     justify-content: space-between
 }
-.side-panel__space-between_1i46u > * {
+.side-panel__space-between_m7em9 > * {
         flex: 1;
     }
-.side-panel__start_1i46u,
-.side-panel__center_1i46u,
-.side-panel__space-between_1i46u {
+.side-panel__start_m7em9,
+.side-panel__center_m7em9,
+.side-panel__space-between_m7em9 {
     display: flex
 }
-.side-panel__start_1i46u > *, .side-panel__center_1i46u > *, .side-panel__space-between_1i46u > * {
+.side-panel__start_m7em9 > *, .side-panel__center_m7em9 > *, .side-panel__space-between_m7em9 > * {
         margin-right: var(--side-panel-footer-default-gap);
     }
-.side-panel__start_1i46u > *:last-child,
-    .side-panel__start_1i46u > *:only-child,
-    .side-panel__center_1i46u > *:last-child,
-    .side-panel__center_1i46u > *:only-child,
-    .side-panel__space-between_1i46u > *:last-child,
-    .side-panel__space-between_1i46u > *:only-child {
+.side-panel__start_m7em9 > *:last-child,
+    .side-panel__start_m7em9 > *:only-child,
+    .side-panel__center_m7em9 > *:last-child,
+    .side-panel__center_m7em9 > *:only-child,
+    .side-panel__space-between_m7em9 > *:last-child,
+    .side-panel__space-between_m7em9 > *:only-child {
         margin-right: 0;
     }
-.side-panel__start_1i46u.side-panel__gap-16_1i46u > *, .side-panel__center_1i46u.side-panel__gap-16_1i46u > *, .side-panel__space-between_1i46u.side-panel__gap-16_1i46u > * {
+.side-panel__start_m7em9.side-panel__gap-16_m7em9 > *, .side-panel__center_m7em9.side-panel__gap-16_m7em9 > *, .side-panel__space-between_m7em9.side-panel__gap-16_m7em9 > * {
         margin-right: var(--gap-m);
     }
-.side-panel__start_1i46u.side-panel__gap-24_1i46u > *, .side-panel__center_1i46u.side-panel__gap-24_1i46u > *, .side-panel__space-between_1i46u.side-panel__gap-24_1i46u > * {
+.side-panel__start_m7em9.side-panel__gap-24_m7em9 > *, .side-panel__center_m7em9.side-panel__gap-24_m7em9 > *, .side-panel__space-between_m7em9.side-panel__gap-24_m7em9 > * {
         margin-right: var(--gap-xl);
     }
-.side-panel__start_1i46u.side-panel__gap-32_1i46u > *, .side-panel__center_1i46u.side-panel__gap-32_1i46u > *, .side-panel__space-between_1i46u.side-panel__gap-32_1i46u > * {
+.side-panel__start_m7em9.side-panel__gap-32_m7em9 > *, .side-panel__center_m7em9.side-panel__gap-32_m7em9 > *, .side-panel__space-between_m7em9.side-panel__gap-32_m7em9 > * {
         margin-right: var(--gap-2xl);
     }

package/esm/components/footer/mobile.css

@@ -1,4 +1,4 @@
-/* hash: rq7e9 */
+/* hash: 17m3x */
 :root {
 
     /* Hard */
@@ -22,9 +22,9 @@
 
     /* mobile */
 }
-.side-panel__footer_4ndt6 {
+.side-panel__footer_19amv {
     padding: var(--gap-m);
 }
-.side-panel__sticky_4ndt6 {
+.side-panel__sticky_19amv {
     bottom: 0;
 }

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

@@ -40,6 +40,10 @@ type HeaderProps = {
      * Фиксирует шапку
      */
     sticky?: boolean;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

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

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
@@ -8,7 +8,7 @@ import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import { Closer } from '../closer/Component.js';
 
-var styles = {"content":"side-panel__content_1pwun","s":"side-panel__s_1pwun","hasContent":"side-panel__hasContent_1pwun","sticky":"side-panel__sticky_1pwun"};
+var styles = {"content":"side-panel__content_u02f3","s":"side-panel__s_u02f3","hasContent":"side-panel__hasContent_u02f3","sticky":"side-panel__sticky_u02f3"};
 require('./desktop.css')
 
 var HeaderDesktop = function (_a) {

package/esm/components/header/Component.js

@@ -1,24 +1,26 @@
+import { a as __assign } from '../../tslib.es6-395a8f91.js';
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
 import { ModalContext } from '../../Context.js';
 
-var styles = {"header":"side-panel__header_1jok5","hasContent":"side-panel__hasContent_1jok5","highlighted":"side-panel__highlighted_1jok5","sticky":"side-panel__sticky_1jok5","content":"side-panel__content_1jok5","title":"side-panel__title_1jok5","addon":"side-panel__addon_1jok5","closer":"side-panel__closer_1jok5","left":"side-panel__left_1jok5","center":"side-panel__center_1jok5","right":"side-panel__right_1jok5","trim":"side-panel__trim_1jok5"};
+var styles = {"header":"side-panel__header_1w27y","hasContent":"side-panel__hasContent_1w27y","highlighted":"side-panel__highlighted_1w27y","sticky":"side-panel__sticky_1w27y","backgroundImage":"side-panel__backgroundImage_1w27y","content":"side-panel__content_1w27y","title":"side-panel__title_1w27y","addon":"side-panel__addon_1w27y","closer":"side-panel__closer_1w27y","left":"side-panel__left_1w27y","center":"side-panel__center_1w27y","right":"side-panel__right_1w27y","trim":"side-panel__trim_1w27y"};
 require('./index.css')
 
 var Header = function (_a) {
     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, dataTestId = _a.dataTestId;
+    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, imageUrl = _a.imageUrl, dataTestId = _a.dataTestId;
     var _f = useContext(ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
     var hasContent = Boolean(title || children);
     useEffect(function () {
         setHasHeader(true);
     }, [setHasHeader]);
     return (React.createElement("div", { className: cn(styles.header, className, (_b = {},
+            _b[styles.backgroundImage] = imageUrl,
             _b[styles.highlighted] = hasContent && sticky && headerHighlighted,
             _b[styles.sticky] = sticky,
             _b[styles.hasContent] = hasContent,
-            _b)), "data-test-id": dataTestId },
+            _b)), "data-test-id": dataTestId, style: __assign({}, (imageUrl && { backgroundImage: "url(" + imageUrl + ")" })) },
         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,

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

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-805b81fd.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-395a8f91.js';
 import React from 'react';
 import cn from 'classnames';
 import '@alfalab/core-components-base-modal/esm';
@@ -9,7 +9,7 @@ import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import { Closer } from '../closer/Component.js';
 import CrossMIcon from '@alfalab/icons-glyph/CrossMIcon';
 
-var styles = {"sticky":"side-panel__sticky_3sq8y","content":"side-panel__content_3sq8y"};
+var styles = {"sticky":"side-panel__sticky_18fzb","content":"side-panel__content_18fzb"};
 require('./mobile.css')
 
 var HeaderMobile = function (_a) {

package/esm/components/header/desktop.css

@@ -1,4 +1,4 @@
-/* hash: fa4ff */
+/* hash: htkh3 */
 :root {
 
     /* Hard */
@@ -34,21 +34,21 @@
 
     /* mobile */
 }
-.side-panel__content_1pwun {
+.side-panel__content_u02f3 {
     font-weight: var(--side-panel-header-desktop-font-weight);
     font-family: var(--side-panel-header-desktop-font-family);
 }
-.side-panel__s_1pwun .side-panel__content_1pwun {
+.side-panel__s_u02f3 .side-panel__content_u02f3 {
     padding: var(--side-panel-s-header-desktop-content-paddings);
     font-size: var(--side-panel-s-header-desktop-font-size);
     line-height: var(--side-panel-s-header-desktop-line-height);
 }
-.side-panel__s_1pwun {
+.side-panel__s_u02f3 {
     padding: var(--side-panel-s-header-paddings)
 }
-.side-panel__s_1pwun:not(.side-panel__hasContent_1pwun) {
+.side-panel__s_u02f3:not(.side-panel__hasContent_u02f3) {
         padding-bottom: 0;
     }
-.side-panel__sticky_1pwun {
+.side-panel__sticky_u02f3 {
     top: 0;
 }