@alfalab/core-components 39.2.1 → 39.3.0

package/system-message/cssm/Component.js

@@ -0,0 +1,53 @@
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var Context = require('./Context.js');
+var desktopStyles = require('./desktop.module.css');
+var styles = require('./index.module.css');
+var mobileStyles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+
+var isControlsElement = function (obj) {
+    return typeof obj === 'object' && obj.type.displayName === 'Controls';
+};
+var SystemMessage = function (_a) {
+    var _b;
+    var view = _a.view, dataTestId = _a.dataTestId, children = _a.children, fullHeight = _a.fullHeight, className = _a.className;
+    var contextValue = React.useMemo(function () { return ({ dataTestId: dataTestId, view: view, fullHeight: fullHeight }); }, [view, dataTestId, fullHeight]);
+    var renderChildrenWithFullHeight = function () {
+        var renderCloned = function (child, extraClassName) {
+            return React__default.default.cloneElement(child, tslib.__assign(tslib.__assign({}, child.props), { className: cn__default.default(child.props.className, extraClassName) }));
+        };
+        var childrenArray = React__default.default.Children.toArray(children);
+        var childrenCount = childrenArray.length;
+        return childrenArray.map(function (child, idx) {
+            var isFirstElement = idx === 0;
+            var isLastElement = idx + 1 === childrenCount;
+            if (isFirstElement && React.isValidElement(child)) {
+                if (isLastElement) {
+                    return renderCloned(child, styles__default.default.both);
+                }
+                return renderCloned(child, styles__default.default.first);
+            }
+            if (isLastElement && React.isValidElement(child)) {
+                return renderCloned(child, isControlsElement(child) ? styles__default.default.controls : styles__default.default.last);
+            }
+            return child;
+        });
+    };
+    return (React__default.default.createElement(Context.SystemMessageContext.Provider, { value: contextValue },
+        React__default.default.createElement("div", { "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_b = {},
+                _b[mobileStyles__default.default.component] = view === 'mobile',
+                _b[desktopStyles__default.default.component] = view === 'desktop',
+                _b[styles__default.default.fullHeight] = fullHeight,
+                _b)) }, fullHeight ? renderChildrenWithFullHeight() : children)));
+};
+
+exports.SystemMessage = SystemMessage;

package/system-message/cssm/Component.mobile.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageMobileProps } from "./types";
+declare const SystemMessageMobile: React.FC<SystemMessageMobileProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageMobile };

package/system-message/cssm/Component.mobile.js

@@ -0,0 +1,36 @@
+var tslib = require('tslib');
+var React = require('react');
+var Component = require('./Component.js');
+var utils = require('./utils.js');
+require('classnames');
+require('./Context.js');
+require('./desktop.module.css');
+require('./index.module.css');
+require('./mobile.module.css');
+require('./components/caption/Component.js');
+require('./getDataTestId-5c876d98.js');
+require('./components/caption/index.module.css');
+require('./components/controls/Component.js');
+require('./components/controls/desktop.module.css');
+require('./components/controls/index.module.css');
+require('./components/controls/mobile.module.css');
+require('./components/graphic/Component.js');
+require('./components/graphic/index.module.css');
+require('./components/subtitle/Component.js');
+require('./components/subtitle/index.module.css');
+require('./components/title/Component.js');
+require('./components/title/desktop.module.css');
+require('./components/title/index.module.css');
+require('./components/title/mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SystemMessageMobileComponent = function (_a) {
+    var children = _a.children, restProps = tslib.__rest(_a, ["children"]);
+    return (React__default.default.createElement(Component.SystemMessage, tslib.__assign({}, restProps, { view: 'mobile' }), children));
+};
+var SystemMessageMobile = utils.createCompound(SystemMessageMobileComponent);
+
+exports.SystemMessageMobile = SystemMessageMobile;

package/system-message/cssm/Components.responsive.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { SystemMessageResponsiveProps } from "./types";
+declare const SystemMessageResponsive: React.FC<SystemMessageResponsiveProps> & {
+    Graphic: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Title: React.FC<{
+        className?: string | undefined;
+        tag?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        children: React.ReactNode;
+    }>;
+    Subtitle: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Caption: React.FC<{
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+    Controls: React.FC<{
+        direction?: "column" | "row" | undefined;
+        className?: string | undefined;
+        children: React.ReactNode;
+    }>;
+};
+export { SystemMessageResponsive };

package/system-message/cssm/Components.responsive.js

@@ -0,0 +1,42 @@
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../mq/cssm');
+var Component = require('./Component.js');
+var utils = require('./utils.js');
+require('classnames');
+require('./Context.js');
+require('./desktop.module.css');
+require('./index.module.css');
+require('./mobile.module.css');
+require('./components/caption/Component.js');
+require('./getDataTestId-5c876d98.js');
+require('./components/caption/index.module.css');
+require('./components/controls/Component.js');
+require('./components/controls/desktop.module.css');
+require('./components/controls/index.module.css');
+require('./components/controls/mobile.module.css');
+require('./components/graphic/Component.js');
+require('./components/graphic/index.module.css');
+require('./components/subtitle/Component.js');
+require('./components/subtitle/index.module.css');
+require('./components/title/Component.js');
+require('./components/title/desktop.module.css');
+require('./components/title/index.module.css');
+require('./components/title/mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var isClient = function () { return typeof window !== 'undefined'; };
+
+var SystemMessageResponsiveComponent = function (_a) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var query = "(min-width: ".concat(breakpoint, "px)");
+    var getDefaultValue = function () { return (isClient() ? window.matchMedia(query).matches : false); };
+    var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];
+    return (React__default.default.createElement(Component.SystemMessage, tslib.__assign({}, restProps, { view: isDesktop ? 'desktop' : 'mobile' }), children));
+};
+var SystemMessageResponsive = utils.createCompound(SystemMessageResponsiveComponent);
+
+exports.SystemMessageResponsive = SystemMessageResponsive;

package/system-message/cssm/Context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TSystemMessageContext } from "./types";
+declare const SystemMessageContext: React.Context<TSystemMessageContext>;
+export { SystemMessageContext };

package/system-message/cssm/Context.js

@@ -0,0 +1,11 @@
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SystemMessageContext = React__default.default.createContext({
+    view: 'desktop',
+});
+
+exports.SystemMessageContext = SystemMessageContext;

package/system-message/cssm/components/caption/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type CaptionProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: React.ReactNode;
+};
+declare const Caption: React.FC<CaptionProps>;
+export { Caption };

package/system-message/cssm/components/caption/Component.js

@@ -0,0 +1,19 @@
+var React = require('react');
+var cn = require('classnames');
+var getDataTestId = require('../../getDataTestId-5c876d98.js');
+var Context = require('../../Context.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Caption = function (_a) {
+    var className = _a.className, children = _a.children;
+    var dataTestId = React.useContext(Context.SystemMessageContext).dataTestId;
+    return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.component, className), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'caption') }, children));
+};
+
+exports.Caption = Caption;

package/system-message/cssm/components/caption/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/system-message/cssm/components/caption/index.js

@@ -0,0 +1,10 @@
+var components_caption_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('../../getDataTestId-5c876d98.js');
+require('../../Context.js');
+require('./index.module.css');
+
+
+
+exports.Caption = components_caption_Component.Caption;

package/system-message/cssm/components/caption/index.module.css

@@ -0,0 +1,26 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+} :root {
+} :root {
+} .component {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+
+    text-align: center;
+    color: var(--color-light-text-secondary);
+    padding-bottom: var(--gap-s);
+}

package/system-message/cssm/components/controls/Component.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import React from 'react';
+type ControlsProps = {
+    /**
+     * Расположение элементов футера
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: React.ReactNode;
+};
+declare const Controls: React.FC<ControlsProps>;
+export { Controls };

package/system-message/cssm/components/controls/Component.js

@@ -0,0 +1,35 @@
+var React = require('react');
+var cn = require('classnames');
+var getDataTestId = require('../../getDataTestId-5c876d98.js');
+var Context = require('../../Context.js');
+var desktopStyles = require('./desktop.module.css');
+var styles = require('./index.module.css');
+var mobileStyles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var desktopStyles__default = /*#__PURE__*/_interopDefaultCompat(desktopStyles);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
+
+var Controls = function (_a) {
+    var _b;
+    var directionProp = _a.direction, children = _a.children, className = _a.className;
+    var _c = React.useContext(Context.SystemMessageContext), dataTestId = _c.dataTestId, view = _c.view;
+    var defaultDirection = view === 'mobile' ? 'column' : 'row';
+    var direction = directionProp || defaultDirection;
+    var isMultipleElements = React__default.default.Children.toArray(children).length > 1;
+    var isColumn = isMultipleElements && direction === 'column' && view === 'mobile';
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className, (_b = {},
+            _b[styles__default.default.row] = !isColumn,
+            _b[styles__default.default.column] = isColumn,
+            _b[desktopStyles__default.default.component] = view === 'desktop',
+            _b[desktopStyles__default.default.multiple] = isMultipleElements,
+            _b[mobileStyles__default.default.component] = view === 'mobile',
+            _b)), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'controls') }, children));
+};
+Controls.displayName = 'Controls';
+
+exports.Controls = Controls;

package/system-message/cssm/components/controls/desktop.module.css

@@ -0,0 +1,21 @@
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xl: 24px;
+} :root {
+} :root {
+} .component {
+    padding: var(--gap-xl) 0;
+} .multiple > * {
+    flex: 1;
+}

package/system-message/cssm/components/controls/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/system-message/cssm/components/controls/index.js

@@ -0,0 +1,12 @@
+var components_controls_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('../../getDataTestId-5c876d98.js');
+require('../../Context.js');
+require('./desktop.module.css');
+require('./index.module.css');
+require('./mobile.module.css');
+
+
+
+exports.Controls = components_controls_Component.Controls;

package/system-message/cssm/components/controls/index.module.css

@@ -0,0 +1,35 @@
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+} :root {
+} :root {
+} .component {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+} .column {
+    flex-flow: column nowrap
+} .column > * {
+        margin-bottom: var(--gap-m);
+    } .column > *:last-child,
+    .column > *:only-child {
+        margin-bottom: 0;
+    } .row {
+    flex-flow: row nowrap
+} .row > * {
+        margin-right: var(--gap-m);
+    } .row > *:last-child,
+    .row > *:only-child {
+        margin-right: 0;
+    }

package/system-message/cssm/components/controls/mobile.module.css

@@ -0,0 +1,21 @@
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-m: 16px;
+} :root {
+} :root {
+} .component {
+    padding-top: var(--gap-m)
+} .component > * {
+        flex: 1;
+    }

package/system-message/cssm/components/graphic/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type GraphicProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Элемент с иконкой
+     */
+    children: React.ReactNode;
+};
+declare const Graphic: React.FC<GraphicProps>;
+export { Graphic };

package/system-message/cssm/components/graphic/Component.js

@@ -0,0 +1,19 @@
+var React = require('react');
+var cn = require('classnames');
+var getDataTestId = require('../../getDataTestId-5c876d98.js');
+var Context = require('../../Context.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Graphic = function (_a) {
+    var children = _a.children, className = _a.className;
+    var dataTestId = React.useContext(Context.SystemMessageContext).dataTestId;
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'graphic') }, children));
+};
+
+exports.Graphic = Graphic;

package/system-message/cssm/components/graphic/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/system-message/cssm/components/graphic/index.js

@@ -0,0 +1,10 @@
+var components_graphic_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('../../getDataTestId-5c876d98.js');
+require('../../Context.js');
+require('./index.module.css');
+
+
+
+exports.Graphic = components_graphic_Component.Graphic;

package/system-message/cssm/components/graphic/index.module.css

@@ -0,0 +1,22 @@
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xl: 24px;
+} :root {
+} :root {
+} .component {
+    display: flex;
+    justify-content: center;
+    align-self: stretch;
+    padding-bottom: var(--gap-xl);
+}

package/system-message/cssm/components/subtitle/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+type SubtitleProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * Заголовок
+     */
+    children: React.ReactNode;
+};
+declare const Subtitle: React.FC<SubtitleProps>;
+export { Subtitle };

package/system-message/cssm/components/subtitle/Component.js

@@ -0,0 +1,19 @@
+var React = require('react');
+var cn = require('classnames');
+var getDataTestId = require('../../getDataTestId-5c876d98.js');
+var Context = require('../../Context.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Subtitle = function (_a) {
+    var className = _a.className, children = _a.children;
+    var dataTestId = React.useContext(Context.SystemMessageContext).dataTestId;
+    return (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.component, className), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'subtitle') }, children));
+};
+
+exports.Subtitle = Subtitle;

package/system-message/cssm/components/subtitle/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/system-message/cssm/components/subtitle/index.js

@@ -0,0 +1,10 @@
+var components_subtitle_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('../../getDataTestId-5c876d98.js');
+require('../../Context.js');
+require('./index.module.css');
+
+
+
+exports.Subtitle = components_subtitle_Component.Subtitle;

package/system-message/cssm/components/subtitle/index.module.css

@@ -0,0 +1,26 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-text-primary: #0b1f35; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+} :root {
+} :root {
+} .component {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    text-align: center;
+    color: var(--color-light-text-primary);
+    padding-bottom: var(--gap-s);
+}

package/system-message/cssm/components/title/Component.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import React from 'react';
+type TitleProps = {
+    /**
+     * Дополнительно имя класса
+     */
+    className?: string;
+    /**
+     * HTML тег
+     * @default h3
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+    /**
+     * Заголовок
+     */
+    children: React.ReactNode;
+};
+declare const Title: React.FC<TitleProps>;
+export { Title };