@alfalab/core-components 28.2.5 → 28.3.1

package/side-panel/components/closer/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"closer":"side-panel__closer_bttgq","button":"side-panel__button_bttgq","sticky":"side-panel__sticky_bttgq"};
+var styles = {"closer":"side-panel__closer_1j3v9","button":"side-panel__button_1j3v9","sticky":"side-panel__sticky_1j3v9"};
 require('./index.css');
 
 /**

package/side-panel/components/closer/index.css

@@ -1,4 +1,4 @@
-/* hash: wgw6z */
+/* hash: 1wmqg */
 :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_bttgq {
+.side-panel__closer_1j3v9 {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
@@ -34,13 +34,13 @@
     align-items: center;
     justify-content: center;
 }
-.side-panel__button_bttgq {
+.side-panel__button_1j3v9 {
     background: var(--side-panel-closer-bg-color);
     -webkit-backdrop-filter: blur(10px);
             backdrop-filter: blur(10px);
     border-radius: 50px;
 }
-.side-panel__sticky_bttgq {
+.side-panel__sticky_1j3v9 {
     position: sticky;
     top: 0;
 }

package/side-panel/components/content/Component.d.ts

@@ -8,6 +8,10 @@ type ContentProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
 };
 declare const Content: FC<ContentProps>;
 export { ContentProps, Content };

package/side-panel/components/content/Component.desktop.d.ts

@@ -1,11 +1,10 @@
 import { FC } from 'react';
 import { ContentProps } from "./Component";
-import { SidePanelDesktopProps } from "../../Component.desktop";
 type ContentDesktopProps = ContentProps & {
     /**
      * Размер
      */
-    size?: SidePanelDesktopProps['size'];
+    size?: 's';
 };
 declare const ContentDesktop: FC<ContentDesktopProps>;
 export { ContentDesktopProps, ContentDesktop };

package/side-panel/components/content/Component.desktop.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -12,12 +12,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"s":"side-panel__s_1r5pi"};
+var styles = {"s":"side-panel__s_1lmuc"};
 require('./desktop.css');
 
 var ContentDesktop = function (_a) {
-    var size = _a.size, className = _a.className, restProps = tslib_es6.__rest(_a, ["size", "className"]);
-    return (React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ className: cn__default['default'](className, size && styles[size]) }, restProps)));
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, restProps = tslib_es6.__rest(_a, ["size", "className"]);
+    return React__default['default'].createElement(components_content_Component.Content, tslib_es6.__assign({ className: cn__default['default'](className, size && styles[size]) }, restProps));
 };
 
 exports.ContentDesktop = ContentDesktop;

package/side-panel/components/content/Component.js

@@ -10,13 +10,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"content":"side-panel__content_iavdx","flex":"side-panel__flex_iavdx"};
+var styles = {"content":"side-panel__content_1taiy","flex":"side-panel__flex_1taiy"};
 require('./index.css');
 
 var Content = function (_a) {
-    var children = _a.children, className = _a.className;
+    var children = _a.children, className = _a.className, dataTestId = _a.dataTestId;
     var contentRef = React.useContext(Context.ModalContext).contentRef;
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, className, styles.flex), ref: contentRef }, children));
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, className, styles.flex), ref: contentRef, "data-test-id": dataTestId }, children));
 };
 
 exports.Content = Content;

package/side-panel/components/content/Component.mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -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 styles = {"content":"side-panel__content_uqnf5"};
+var styles = {"content":"side-panel__content_ovh84"};
 require('./mobile.css');
 
 var ContentMobile = function (_a) {

package/side-panel/components/content/desktop.css

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

package/side-panel/components/content/index.css

@@ -1,4 +1,4 @@
-/* hash: 98jxd */
+/* hash: pg5tt */
 :root {
 
     /* Hard */
@@ -19,10 +19,10 @@
 
     /* mobile */
 }
-.side-panel__content_iavdx {
+.side-panel__content_1taiy {
     box-sizing: border-box;
     width: 100%;
 }
-.side-panel__flex_iavdx {
+.side-panel__flex_1taiy {
     flex: 1 1 auto;
 }

package/side-panel/components/content/mobile.css

@@ -1,4 +1,4 @@
-/* hash: fnxig */
+/* hash: 1fl5c */
 :root {
 
     /* Hard */
@@ -22,9 +22,9 @@
 
     /* mobile */
 }
-.side-panel__content_uqnf5 {
+.side-panel__content_ovh84 {
     padding: 0 var(--gap-m)
 }
-.side-panel__content_uqnf5:last-child {
+.side-panel__content_ovh84:last-child {
         padding-bottom: var(--gap-m);
     }

package/side-panel/components/footer/Component.d.ts

@@ -20,6 +20,10 @@ type FooterProps = {
      * Отступы между элементами футера
      */
     gap?: 16 | 24 | 32;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
 };
 declare const Footer: FC<FooterProps>;
 export { FooterProps, Footer };

package/side-panel/components/footer/Component.desktop.d.ts

@@ -1,11 +1,10 @@
 import { FC } from 'react';
 import { FooterProps } from "./Component";
-import { SidePanelDesktopProps } from "../../Component.desktop";
 type FooterDesktopProps = FooterProps & {
     /**
      * Размер
      */
-    size?: SidePanelDesktopProps['size'];
+    size?: 's';
 };
 declare const FooterDesktop: FC<FooterDesktopProps>;
 export { FooterDesktopProps, FooterDesktop };

package/side-panel/components/footer/Component.desktop.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -12,12 +12,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"sticky":"side-panel__sticky_1mkmc","s":"side-panel__s_1mkmc"};
+var styles = {"sticky":"side-panel__sticky_1hfg6","s":"side-panel__s_1hfg6"};
 require('./desktop.css');
 
 var FooterDesktop = function (_a) {
     var _b;
-    var size = _a.size, className = _a.className, sticky = _a.sticky, restProps = tslib_es6.__rest(_a, ["size", "className", "sticky"]);
+    var _c = _a.size, size = _c === void 0 ? 's' : _c, 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, size && styles[size], (_b = {},
             _b[styles.sticky] = sticky,
             _b)), sticky: sticky }, restProps)));

package/side-panel/components/footer/Component.js

@@ -10,15 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"footer":"side-panel__footer_mumjx","sticky":"side-panel__sticky_mumjx","highlighted":"side-panel__highlighted_mumjx"};
+var styles = {"footer":"side-panel__footer_1081o","sticky":"side-panel__sticky_1081o","highlighted":"side-panel__highlighted_1081o"};
 require('./index.css');
 
-var layoutStyles = {"column":"side-panel__column_15h6u","gap-16":"side-panel__gap-16_15h6u","gap-24":"side-panel__gap-24_15h6u","gap-32":"side-panel__gap-32_15h6u","start":"side-panel__start_15h6u","center":"side-panel__center_15h6u","space-between":"side-panel__space-between_15h6u"};
+var layoutStyles = {"column":"side-panel__column_10c0o","gap-16":"side-panel__gap-16_10c0o","gap-24":"side-panel__gap-24_10c0o","gap-32":"side-panel__gap-32_10c0o","start":"side-panel__start_10c0o","center":"side-panel__center_10c0o","space-between":"side-panel__space-between_10c0o"};
 require('./layout.css');
 
 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;
+    var children = _a.children, className = _a.className, sticky = _a.sticky, _c = _a.layout, layout = _c === void 0 ? 'start' : _c, gap = _a.gap, dataTestId = _a.dataTestId;
     var _d = React.useContext(Context.ModalContext), footerHighlighted = _d.footerHighlighted, setHasFooter = _d.setHasFooter;
     React.useEffect(function () {
         setHasFooter(true);
@@ -26,7 +26,7 @@ var Footer = function (_a) {
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.footer, className, layoutStyles[layout], gap && layoutStyles["gap-" + gap], (_b = {},
             _b[styles.highlighted] = sticky && footerHighlighted,
             _b[styles.sticky] = sticky,
-            _b)) }, children));
+            _b)), "data-test-id": dataTestId }, children));
 };
 
 exports.Footer = Footer;

package/side-panel/components/footer/Component.mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -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 styles = {"footer":"side-panel__footer_1nylm","sticky":"side-panel__sticky_1nylm"};
+var styles = {"footer":"side-panel__footer_1bwqo","sticky":"side-panel__sticky_1bwqo"};
 require('./mobile.css');
 
 var FooterMobile = function (_a) {

package/side-panel/components/footer/desktop.css

@@ -1,4 +1,4 @@
-/* hash: 9tomp */
+/* hash: 4d03g */
 :root {
 
     /* Hard */
@@ -24,9 +24,9 @@
 
     /* mobile */
 }
-.side-panel__sticky_1mkmc {
+.side-panel__sticky_1hfg6 {
     bottom: 0;
 }
-.side-panel__s_1mkmc {
+.side-panel__s_1hfg6 {
     padding: var(--side-panel-s-footer-paddings);
 }

package/side-panel/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1n3ww */
+/* hash: 174xf */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
@@ -26,16 +26,16 @@
 
     /* mobile */
 }
-.side-panel__footer_mumjx {
+.side-panel__footer_1081o {
     width: 100%;
     box-sizing: border-box;
     transition: box-shadow 0.2s ease, background 0.2s ease;
 }
-.side-panel__sticky_mumjx {
+.side-panel__sticky_1081o {
     background: var(--side-panel-footer-background);
     position: sticky;
 }
-.side-panel__highlighted_mumjx {
+.side-panel__highlighted_1081o {
     background: var(--side-panel-footer-highlight-background);
     box-shadow: var(--side-panel-footer-highlight-box-shadow);
 }

package/side-panel/components/footer/layout.css

@@ -1,4 +1,4 @@
-/* hash: 19j12 */
+/* hash: 142ci */
 :root {
 
     /* Hard */
@@ -25,60 +25,60 @@
 
     /* mobile */
 }
-.side-panel__column_15h6u {
+.side-panel__column_10c0o {
     display: flex;
     flex-direction: column
 }
-.side-panel__column_15h6u > * {
+.side-panel__column_10c0o > * {
         margin-bottom: var(--side-panel-footer-default-gap);
     }
-.side-panel__column_15h6u > *:last-child,
-    .side-panel__column_15h6u > *:only-child {
+.side-panel__column_10c0o > *:last-child,
+    .side-panel__column_10c0o > *:only-child {
         margin-bottom: 0;
     }
-.side-panel__column_15h6u.side-panel__gap-16_15h6u > * {
+.side-panel__column_10c0o.side-panel__gap-16_10c0o > * {
         margin-bottom: var(--gap-m);
     }
-.side-panel__column_15h6u.side-panel__gap-24_15h6u > * {
+.side-panel__column_10c0o.side-panel__gap-24_10c0o > * {
         margin-bottom: var(--gap-xl);
     }
-.side-panel__column_15h6u.side-panel__gap-32_15h6u > * {
+.side-panel__column_10c0o.side-panel__gap-32_10c0o > * {
         margin-bottom: var(--gap-2xl);
     }
-.side-panel__start_15h6u {
+.side-panel__start_10c0o {
     justify-content: flex-start;
 }
-.side-panel__center_15h6u {
+.side-panel__center_10c0o {
     justify-content: center;
 }
-.side-panel__space-between_15h6u {
+.side-panel__space-between_10c0o {
     justify-content: space-between
 }
-.side-panel__space-between_15h6u > * {
+.side-panel__space-between_10c0o > * {
         flex: 1;
     }
-.side-panel__start_15h6u,
-.side-panel__center_15h6u,
-.side-panel__space-between_15h6u {
+.side-panel__start_10c0o,
+.side-panel__center_10c0o,
+.side-panel__space-between_10c0o {
     display: flex
 }
-.side-panel__start_15h6u > *, .side-panel__center_15h6u > *, .side-panel__space-between_15h6u > * {
+.side-panel__start_10c0o > *, .side-panel__center_10c0o > *, .side-panel__space-between_10c0o > * {
         margin-right: var(--side-panel-footer-default-gap);
     }
-.side-panel__start_15h6u > *:last-child,
-    .side-panel__start_15h6u > *:only-child,
-    .side-panel__center_15h6u > *:last-child,
-    .side-panel__center_15h6u > *:only-child,
-    .side-panel__space-between_15h6u > *:last-child,
-    .side-panel__space-between_15h6u > *:only-child {
+.side-panel__start_10c0o > *:last-child,
+    .side-panel__start_10c0o > *:only-child,
+    .side-panel__center_10c0o > *:last-child,
+    .side-panel__center_10c0o > *:only-child,
+    .side-panel__space-between_10c0o > *:last-child,
+    .side-panel__space-between_10c0o > *:only-child {
         margin-right: 0;
     }
-.side-panel__start_15h6u.side-panel__gap-16_15h6u > *, .side-panel__center_15h6u.side-panel__gap-16_15h6u > *, .side-panel__space-between_15h6u.side-panel__gap-16_15h6u > * {
+.side-panel__start_10c0o.side-panel__gap-16_10c0o > *, .side-panel__center_10c0o.side-panel__gap-16_10c0o > *, .side-panel__space-between_10c0o.side-panel__gap-16_10c0o > * {
         margin-right: var(--gap-m);
     }
-.side-panel__start_15h6u.side-panel__gap-24_15h6u > *, .side-panel__center_15h6u.side-panel__gap-24_15h6u > *, .side-panel__space-between_15h6u.side-panel__gap-24_15h6u > * {
+.side-panel__start_10c0o.side-panel__gap-24_10c0o > *, .side-panel__center_10c0o.side-panel__gap-24_10c0o > *, .side-panel__space-between_10c0o.side-panel__gap-24_10c0o > * {
         margin-right: var(--gap-xl);
     }
-.side-panel__start_15h6u.side-panel__gap-32_15h6u > *, .side-panel__center_15h6u.side-panel__gap-32_15h6u > *, .side-panel__space-between_15h6u.side-panel__gap-32_15h6u > * {
+.side-panel__start_10c0o.side-panel__gap-32_10c0o > *, .side-panel__center_10c0o.side-panel__gap-32_10c0o > *, .side-panel__space-between_10c0o.side-panel__gap-32_10c0o > * {
         margin-right: var(--gap-2xl);
     }

package/side-panel/components/footer/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 12jb2 */
+/* hash: 2dgst */
 :root {
 
     /* Hard */
@@ -22,9 +22,9 @@
 
     /* mobile */
 }
-.side-panel__footer_1nylm {
+.side-panel__footer_1bwqo {
     padding: var(--gap-m);
 }
-.side-panel__sticky_1nylm {
+.side-panel__sticky_1bwqo {
     bottom: 0;
 }

package/side-panel/components/header/Component.d.ts

@@ -40,6 +40,10 @@ type HeaderProps = {
      * Фиксирует шапку
      */
     sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
 };
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/side-panel/components/header/Component.desktop.d.ts

@@ -1,11 +1,10 @@
 import { FC } from 'react';
 import { HeaderProps } from "./Component";
-import { SidePanelDesktopProps } from "../../Component.desktop";
 type HeaderDesktopProps = Omit<HeaderProps, 'closer'> & {
     /**
      * Размер
      */
-    size?: SidePanelDesktopProps['size'];
+    size?: 's';
     /**
      * Наличие крестика
      */

package/side-panel/components/header/Component.desktop.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -15,12 +15,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"content":"side-panel__content_1k1et","s":"side-panel__s_1k1et","hasContent":"side-panel__hasContent_1k1et","sticky":"side-panel__sticky_1k1et"};
+var styles = {"content":"side-panel__content_1ew8n","s":"side-panel__s_1ew8n","hasContent":"side-panel__hasContent_1ew8n","sticky":"side-panel__sticky_1ew8n"};
 require('./desktop.css');
 
 var HeaderDesktop = function (_a) {
     var _b;
-    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 _c = _a.size, size = _c === void 0 ? 's' : _c, className = _a.className, contentClassName = _a.contentClassName, _d = _a.hasCloser, hasCloser = _d === void 0 ? true : _d, sticky = _a.sticky, _e = _a.leftAddons, leftAddons = _e === void 0 ? React__default['default'].createElement("span", null) : _e, title = _a.title, children = _a.children, restProps = tslib_es6.__rest(_a, ["size", "className", "contentClassName", "hasCloser", "sticky", "leftAddons", "title", "children"]);
     var hasContent = Boolean(title || children);
     return (React__default['default'].createElement(components_header_Component.Header, tslib_es6.__assign({ className: cn__default['default'](className, size && styles[size], (_b = {},
             _b[styles.sticky] = sticky,

package/side-panel/components/header/Component.js

@@ -10,12 +10,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"header":"side-panel__header_1m13x","hasContent":"side-panel__hasContent_1m13x","highlighted":"side-panel__highlighted_1m13x","sticky":"side-panel__sticky_1m13x","content":"side-panel__content_1m13x","title":"side-panel__title_1m13x","addon":"side-panel__addon_1m13x","closer":"side-panel__closer_1m13x","left":"side-panel__left_1m13x","center":"side-panel__center_1m13x","right":"side-panel__right_1m13x","trim":"side-panel__trim_1m13x"};
+var styles = {"header":"side-panel__header_df05k","hasContent":"side-panel__hasContent_df05k","highlighted":"side-panel__highlighted_df05k","sticky":"side-panel__sticky_df05k","content":"side-panel__content_df05k","title":"side-panel__title_df05k","addon":"side-panel__addon_df05k","closer":"side-panel__closer_df05k","left":"side-panel__left_df05k","center":"side-panel__center_df05k","right":"side-panel__right_df05k","trim":"side-panel__trim_df05k"};
 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;
+    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 _f = React.useContext(Context.ModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader;
     var hasContent = Boolean(title || children);
     React.useEffect(function () {
@@ -25,7 +25,7 @@ var Header = function (_a) {
             _b[styles.highlighted] = hasContent && sticky && headerHighlighted,
             _b[styles.sticky] = sticky,
             _b[styles.hasContent] = hasContent,
-            _b)) },
+            _b)), "data-test-id": dataTestId },
         leftAddons && React__default['default'].createElement("div", { className: cn__default['default'](styles.addon, addonClassName) }, leftAddons),
         hasContent && (React__default['default'].createElement("div", { className: cn__default['default'](styles.content, contentClassName, styles[align], (_c = {},
                 _c[styles.trim] = trim,

package/side-panel/components/header/Component.mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-51867a4f.js');
+var tslib_es6 = require('../../tslib.es6-ed7ccd5c.js');
 var React = require('react');
 var cn = require('classnames');
 require('../../../base-modal');
@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var CrossMIcon__default = /*#__PURE__*/_interopDefaultLegacy(CrossMIcon);
 
-var styles = {"sticky":"side-panel__sticky_tuoc2","content":"side-panel__content_tuoc2"};
+var styles = {"sticky":"side-panel__sticky_1llql","content":"side-panel__content_1llql"};
 require('./mobile.css');
 
 var HeaderMobile = function (_a) {

package/side-panel/components/header/desktop.css

@@ -1,4 +1,4 @@
-/* hash: slrau */
+/* hash: 18kqr */
 :root {
 
     /* Hard */
@@ -34,21 +34,21 @@
 
     /* mobile */
 }
-.side-panel__content_1k1et {
+.side-panel__content_1ew8n {
     font-weight: var(--side-panel-header-desktop-font-weight);
     font-family: var(--side-panel-header-desktop-font-family);
 }
-.side-panel__s_1k1et .side-panel__content_1k1et {
+.side-panel__s_1ew8n .side-panel__content_1ew8n {
     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_1k1et {
+.side-panel__s_1ew8n {
     padding: var(--side-panel-s-header-paddings)
 }
-.side-panel__s_1k1et:not(.side-panel__hasContent_1k1et) {
+.side-panel__s_1ew8n:not(.side-panel__hasContent_1ew8n) {
         padding-bottom: 0;
     }
-.side-panel__sticky_1k1et {
+.side-panel__sticky_1ew8n {
     top: 0;
 }