@alfalab/core-components-confirmation 12.1.3 → 12.2.0

package/countdown-section-d04caa75.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var cn = require('classnames');
+var utils = require('./utils.js');
+var context = require('./context.js');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
+var coreComponentsButton = require('@alfalab/core-components-button');
+var coreComponentsLoader = require('@alfalab/core-components-loader');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"confirmation__component_1bham","typographyTheme":"confirmation__typographyTheme_1bham","phone":"confirmation__phone_1bham","compact":"confirmation__compact_1bham","loaderWrap":"confirmation__loaderWrap_1bham","left":"confirmation__left_1bham","center":"confirmation__center_1bham","codeInput":"confirmation__codeInput_1bham","smsComeLink":"confirmation__smsComeLink_1bham","countdownContainer":"confirmation__countdownContainer_1bham","countdownMobile":"confirmation__countdownMobile_1bham","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1bham","getCodeButton":"confirmation__getCodeButton_1bham","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1bham","containerInput":"confirmation__containerInput_1bham"};
+require('./components/screens/initial/index.css')
+
+var CountdownSection = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _g = React.useContext(context.ConfirmationContext), state = _g.state, texts = _g.texts, timeLeft = _g.timeLeft, blockSmsRetry = _g.blockSmsRetry;
+    if (codeSendHintVisible) {
+        return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdownContainer, (_b = {},
+                _b[styles.countdownMobile] = mobile,
+                _b[styles.typographyTheme] = !mobile,
+                _b)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.codeSended));
+    }
+    if (processing) {
+        return (React__default['default'].createElement("div", { className: cn__default['default'](styles.loaderWrap, styles.countdownContainer, (_c = {},
+                _c[styles.countdownLoaderMobile] = mobile,
+                _c[styles.typographyTheme] = !mobile,
+                _c)) },
+            React__default['default'].createElement(coreComponentsLoader.Loader, null),
+            React__default['default'].createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdownContainer, (_d = {},
+                _d[styles.countdownMobile] = mobile,
+                _d[styles.typographyTheme] = !mobile,
+                _d)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, texts.noAttemptsLeft));
+    }
+    if (timePassed) {
+        return (React__default['default'].createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn__default['default'](styles.getCodeButton, (_e = {}, _e[styles.getCodeButtonMobile] = mobile, _e)) }, texts.buttonRetry));
+    }
+    return (React__default['default'].createElement(coreComponentsTypography.Typography.Text, { className: cn__default['default'](styles.countdown, styles.countdownContainer, (_f = {},
+            _f[styles.countdownMobile] = mobile,
+            _f[styles.typographyTheme] = !mobile,
+            _f)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' },
+        texts.countdown,
+        " ",
+        utils.formatMsAsMinutes(timeLeft)));
+};
+
+exports.CountdownSection = CountdownSection;
+exports.styles = styles;

package/cssm/component-5c5b24ae.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __await(v: any): any;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, privateMap: any): any;
+declare function __classPrivateFieldSet(receiver: any, privateMap: any, value: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+declare const BaseConfirmation: FC<ConfirmationProps>;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __assign, __createBinding, BaseConfirmation };

package/cssm/{component.js → component-5c5b24ae.js}

@@ -1,29 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var utils = require('./utils.js');
 var context = require('./context.js');
 var types = require('./types.js');
-require('@alfalab/core-components-code-input/cssm');
-require('@alfalab/core-components-link/cssm');
-require('./components/screens/initial/index.module.css');
-require('@alfalab/core-components-loader/cssm');
-require('@alfalab/core-components-button/cssm');
-require('./components/screens/initial/countdown-section.js');
 var components_screens_initial_component = require('./components/screens/initial/component.js');
-require('./components/screens/hint/index.module.css');
 var components_screens_hint_component = require('./components/screens/hint/component.js');
-require('./components/screens/fatal-error/index.module.css');
 var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
-require('./components/countdown-loader/index.module.css');
-require('./components/countdown-loader/component.js');
-require('./components/screens/temp-block/index.module.css');
 var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
-var styles = require('./index.module.css');
+var styles = require('./components/base-confirmation/index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -45,8 +32,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s)
@@ -55,7 +42,7 @@ var __assign = function () {
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return exports.__assign.apply(this, arguments);
 };
 function __rest(s, e) {
     var t = {};
@@ -76,8 +63,8 @@ var confirmationScreens = {
     FATAL_ERROR: components_screens_fatalError_component.FatalError,
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
-var Confirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished"]);
+var BaseConfirmation = function (_a) {
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b, children = _a.children, _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile"]);
     var _f = utils.useCountdown(countdownDuration), timeLeft = _f[0], startTimer = _f[1], stopTimer = _f[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {
@@ -114,7 +101,7 @@ var Confirmation = function (_a) {
     };
     var contextValue = {
         alignContent: alignContent,
-        texts: __assign(__assign({}, types.defaultTexts), restProps.texts),
+        texts: exports.__assign(exports.__assign({}, types.defaultTexts), restProps.texts),
         state: state,
         screen: screen,
         requiredCharAmount: requiredCharAmount,
@@ -133,7 +120,8 @@ var Confirmation = function (_a) {
     var screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
     var CurrentScreen = screensMap[screen];
     return (React__default['default'].createElement(context.ConfirmationContext.Provider, { value: contextValue },
-        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, null))));
+        React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent], className), "data-test-id": dataTestId }, CurrentScreen && React__default['default'].createElement(CurrentScreen, { mobile: mobile }))));
 };
 
-exports.Confirmation = Confirmation;
+exports.BaseConfirmation = BaseConfirmation;
+exports.__rest = __rest;

package/cssm/component.desktop.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
+export { DesktopConfirmationProps, ConfirmationDesktop };

package/cssm/component.desktop.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-5c5b24ae.js');
+var React = require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('@alfalab/core-components-code-input/cssm');
+require('@alfalab/core-components-link/cssm');
+require('@alfalab/core-components-typography/cssm');
+require('@alfalab/core-components-button/cssm');
+require('./components/header/index.module.css');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader/cssm');
+require('./components/screens/initial/index.module.css');
+require('./components/screens/initial/countdown-section.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/index.module.css');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/index.module.css');
+require('./components/screens/temp-block/component.js');
+require('./components/base-confirmation/index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationDesktop = function (props) { return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({}, props))); };
+
+exports.ConfirmationDesktop = ConfirmationDesktop;

package/cssm/component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationMobile: FC<MobileConfirmationProps>;
+export { MobileConfirmationProps, ConfirmationMobile };

package/cssm/component.mobile.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-5c5b24ae.js');
+var React = require('react');
+var cn = require('classnames');
+require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('@alfalab/core-components-code-input/cssm');
+require('@alfalab/core-components-link/cssm');
+require('@alfalab/core-components-typography/cssm');
+require('@alfalab/core-components-button/cssm');
+require('./components/header/index.module.css');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader/cssm');
+require('./components/screens/initial/index.module.css');
+require('./components/screens/initial/countdown-section.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/index.module.css');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/index.module.css');
+require('./components/screens/temp-block/component.js');
+require('./components/base-confirmation/index.module.css');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var ConfirmationMobile = function (_a) {
+    var className = _a.className, resProps = components_baseConfirmation_component.__rest(_a, ["className"]);
+    return (React__default['default'].createElement(components_baseConfirmation_component.BaseConfirmation, components_baseConfirmation_component.__assign({ mobile: true, className: cn__default['default'](className, styles__default['default'].container) }, resProps)));
+};
+
+exports.ConfirmationMobile = ConfirmationMobile;

package/cssm/component.responsive.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "./types";
+type ResponsiveConfirmationProps = Omit<ConfirmationProps, 'confirmationScreens'>;
+type ConfirmationMedia = 'desktop' | 'mobile';
+declare const ConfirmationResponsive: FC<ResponsiveConfirmationProps>;
+export { ResponsiveConfirmationProps, ConfirmationMedia, ConfirmationResponsive };

package/cssm/component.responsive.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('./component-5c5b24ae.js');
+var React = require('react');
+require('classnames');
+var hooks = require('@alfalab/hooks');
+require('./utils.js');
+require('./context.js');
+require('./types.js');
+require('@alfalab/core-components-code-input/cssm');
+require('@alfalab/core-components-link/cssm');
+require('@alfalab/core-components-typography/cssm');
+require('@alfalab/core-components-button/cssm');
+require('./components/header/index.module.css');
+require('./components/header/component.js');
+require('@alfalab/core-components-loader/cssm');
+require('./components/screens/initial/index.module.css');
+require('./components/screens/initial/countdown-section.js');
+require('./components/screens/initial/component.js');
+require('./components/screens/hint/index.module.css');
+require('./components/screens/hint/component.js');
+require('./components/screens/fatal-error/index.module.css');
+require('./components/screens/fatal-error/component.js');
+require('./components/countdown-loader/index.module.css');
+require('./components/countdown-loader/component.js');
+require('./components/screens/temp-block/index.module.css');
+require('./components/screens/temp-block/component.js');
+require('./components/base-confirmation/index.module.css');
+var component_desktop = require('./component.desktop.js');
+require('./mobile.module.css');
+var component_mobile = require('./component.mobile.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ConfirmationResponsive = function (props) {
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    return view === 'desktop' ? (React__default['default'].createElement(component_desktop.ConfirmationDesktop, components_baseConfirmation_component.__assign({}, props))) : (React__default['default'].createElement(component_mobile.ConfirmationMobile, components_baseConfirmation_component.__assign({}, props)));
+};
+
+exports.ConfirmationResponsive = ConfirmationResponsive;

package/cssm/components/base-confirmation/component.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('../../component-5c5b24ae.js');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils.js');
+require('../../context.js');
+require('../../types.js');
+require('@alfalab/core-components-code-input/cssm');
+require('@alfalab/core-components-link/cssm');
+require('@alfalab/core-components-typography/cssm');
+require('@alfalab/core-components-button/cssm');
+require('../header/index.module.css');
+require('../header/component.js');
+require('@alfalab/core-components-loader/cssm');
+require('../screens/initial/index.module.css');
+require('../screens/initial/countdown-section.js');
+require('../screens/initial/component.js');
+require('../screens/hint/index.module.css');
+require('../screens/hint/component.js');
+require('../screens/fatal-error/index.module.css');
+require('../screens/fatal-error/component.js');
+require('../countdown-loader/index.module.css');
+require('../countdown-loader/component.js');
+require('../screens/temp-block/index.module.css');
+require('../screens/temp-block/component.js');
+require('./index.module.css');
+
+
+
+exports.BaseConfirmation = components_baseConfirmation_component.BaseConfirmation;

package/cssm/components/base-confirmation/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-5c5b24ae";

package/cssm/components/base-confirmation/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_baseConfirmation_component = require('../../component-5c5b24ae.js');
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils.js');
+require('../../context.js');
+require('../../types.js');
+require('@alfalab/core-components-code-input/cssm');
+require('@alfalab/core-components-link/cssm');
+require('@alfalab/core-components-typography/cssm');
+require('@alfalab/core-components-button/cssm');
+require('../header/index.module.css');
+require('../header/component.js');
+require('@alfalab/core-components-loader/cssm');
+require('../screens/initial/index.module.css');
+require('../screens/initial/countdown-section.js');
+require('../screens/initial/component.js');
+require('../screens/hint/index.module.css');
+require('../screens/hint/component.js');
+require('../screens/fatal-error/index.module.css');
+require('../screens/fatal-error/component.js');
+require('../countdown-loader/index.module.css');
+require('../countdown-loader/component.js');
+require('../screens/temp-block/index.module.css');
+require('../screens/temp-block/component.js');
+require('./index.module.css');
+
+
+
+exports.BaseConfirmation = components_baseConfirmation_component.BaseConfirmation;

package/cssm/components/base-confirmation/index.module.css

@@ -0,0 +1,23 @@
+:root {
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.component {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 388px;
+    margin: 0 auto;
+    color: var(--color-light-text-secondary);
+}
+.center {
+    align-items: center;
+    text-align: center;
+}

package/cssm/components/countdown-loader/index.module.css

@@ -9,15 +9,6 @@
 
     /* Hard up */
 }
-:root {
-    /* title */
-
-    /* text */
-
-    /* error */
-
-    /* input */
-}
 .circle {
     fill: transparent;
     stroke: var(--color-light-graphic-tertiary);

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/cssm/components/header/component.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var Header = function (_a) {
+    var _b;
+    var mobile = _a.mobile, children = _a.children;
+    return (React__default['default'].createElement(coreComponentsTypography.Typography.Title, { className: cn__default['default'](styles__default['default'].header, styles__default['default'].typography, (_b = {}, _b[styles__default['default'].typographyMobile] = mobile, _b)), tag: 'h3', color: 'primary' }, children));
+};
+
+exports.Header = Header;

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

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

package/cssm/components/header/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/core-components-typography/cssm');
+require('./index.module.css');
+var components_header_component = require('./component.js');
+
+
+
+exports.Header = components_header_component.Header;

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

@@ -0,0 +1,50 @@
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xl: 24px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* desktop */
+    --confirmation-header-desktop-font-size: 22px;
+    --confirmation-header-desktop-line-height: 26px;
+    --confirmation-header-desktop-font-weight: bold;
+    --confirmation-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+    --confirmation-header-mobile-font-size: 18px;
+    --confirmation-header-mobile-line-height: 22px;
+    --confirmation-header-mobile-font-weight: bold;
+    --confirmation-header-mobile-font-family: var(--font-family-system);
+
+    /* text */
+
+    /* header */
+    --confirmation-header-font-feature-settings: normal
+}
+.header {
+    margin-bottom: var(--gap-xl);
+}
+.typography {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-desktop-font-size);
+    line-height: var(--confirmation-header-desktop-line-height);
+    font-weight: var(--confirmation-header-desktop-font-weight);
+    font-family: var(--confirmation-header-desktop-font-family);
+}
+.typographyMobile {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-mobile-font-size);
+    line-height: var(--confirmation-header-mobile-line-height);
+    font-weight: var(--confirmation-header-mobile-font-weight);
+    font-family: var(--confirmation-header-mobile-font-family);
+}

package/cssm/components/index.js

@@ -9,9 +9,12 @@ require('../utils.js');
 require('../context.js');
 require('@alfalab/core-components-code-input/cssm');
 require('@alfalab/core-components-link/cssm');
-require('./screens/initial/index.module.css');
-require('@alfalab/core-components-loader/cssm');
+require('@alfalab/core-components-typography/cssm');
 require('@alfalab/core-components-button/cssm');
+require('./header/index.module.css');
+require('./header/component.js');
+require('@alfalab/core-components-loader/cssm');
+require('./screens/initial/index.module.css');
 require('./screens/initial/countdown-section.js');
 var components_screens_initial_component = require('./screens/initial/component.js');
 require('./screens/hint/index.module.css');

package/cssm/components/screens/fatal-error/component.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
-declare const FatalError: () => JSX.Element;
-export { FatalError };
+import { FC } from 'react';
+type FatalErrorProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+declare const FatalError: FC<FatalErrorProps>;
+export { FatalErrorProps, FatalError };

package/cssm/components/screens/fatal-error/component.js

@@ -3,22 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('classnames');
 require('../../../utils.js');
 var context = require('../../../context.js');
+var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
 var coreComponentsButton = require('@alfalab/core-components-button/cssm');
+require('../../header/index.module.css');
+var components_header_component = require('../../header/component.js');
 var styles = require('./index.module.css');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-var FatalError = function () {
-    var _a = React.useContext(context.ConfirmationContext), texts = _a.texts, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick;
-    return (React__default['default'].createElement(React.Fragment, null,
-        React__default['default'].createElement("h3", { className: styles__default['default'].header }, texts.fatalErrorTitle),
-        React__default['default'].createElement("div", { className: styles__default['default'].description }, texts.fatalErrorDescription),
-        React__default['default'].createElement(coreComponentsButton.Button, { size: 'xs', view: 'secondary', onClick: onFatalErrorOkButtonClick }, texts.fatalErrorButton)));
+var FatalError = function (_a) {
+    var _b;
+    var mobile = _a.mobile;
+    var _c = React.useContext(context.ConfirmationContext), alignContent = _c.alignContent, texts = _c.texts, onFatalErrorOkButtonClick = _c.onFatalErrorOkButtonClick;
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, styles__default['default'][alignContent]) },
+        React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.fatalErrorTitle),
+        React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default']((_b = {}, _b[styles__default['default'].typographyTheme] = !mobile, _b)) }, texts.fatalErrorDescription),
+        React__default['default'].createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: onFatalErrorOkButtonClick, className: styles__default['default'].button }, texts.fatalErrorButton)));
 };
 
 exports.FatalError = FatalError;

package/cssm/components/screens/fatal-error/index.js

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
+require('classnames');
 require('../../../utils.js');
 require('../../../context.js');
+require('@alfalab/core-components-typography/cssm');
 require('@alfalab/core-components-button/cssm');
+require('../../header/index.module.css');
+require('../../header/component.js');
 require('./index.module.css');
 var components_screens_fatalError_component = require('./component.js');