@alfalab/core-components-confirmation 12.1.4 → 12.2.1

package/components/screens/hint/component.d.ts

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

package/components/screens/hint/component.js

@@ -7,39 +7,39 @@ var cn = require('classnames');
 require('../../../utils.js');
 var context = require('../../../context.js');
 var coreComponentsLink = require('@alfalab/core-components-link');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
 var coreComponentsButton = require('@alfalab/core-components-button');
+var components_header_component = require('../../header/component.js');
 
 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 = {"center":"confirmation__center_m8zyz","phoneHintWrap":"confirmation__phoneHintWrap_m8zyz","hintWrap":"confirmation__hintWrap_m8zyz","title":"confirmation__title_m8zyz","text":"confirmation__text_m8zyz","phonesWrap":"confirmation__phonesWrap_m8zyz","phoneWrap":"confirmation__phoneWrap_m8zyz","phoneLink":"confirmation__phoneLink_m8zyz","phoneDescription":"confirmation__phoneDescription_m8zyz","hintButton":"confirmation__hintButton_m8zyz"};
+var styles = {"center":"confirmation__center_1hlx4","hintWrap":"confirmation__hintWrap_1hlx4","text":"confirmation__text_1hlx4","typographyTheme":"confirmation__typographyTheme_1hlx4","phonesWrap":"confirmation__phonesWrap_1hlx4","phoneWrap":"confirmation__phoneWrap_1hlx4","phoneLink":"confirmation__phoneLink_1hlx4","hintButton":"confirmation__hintButton_1hlx4","phoneContentMobile":"confirmation__phoneContentMobile_1hlx4"};
 require('./index.css')
 
-var Hint = function () {
-    var _a = React.useContext(context.ConfirmationContext), alignContent = _a.alignContent, texts = _a.texts, onChangeScreen = _a.onChangeScreen, onChangeState = _a.onChangeState;
+var Hint = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var mobile = _a.mobile;
+    var _h = React.useContext(context.ConfirmationContext), alignContent = _h.alignContent, texts = _h.texts, onChangeScreen = _h.onChangeScreen, onChangeState = _h.onChangeState;
     var handleReturnButtonClick = function () {
         onChangeScreen('INITIAL');
         onChangeState('INITIAL');
     };
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, styles[alignContent]) },
         React__default['default'].createElement("div", { className: styles.hintWrap },
-            React__default['default'].createElement("h3", { className: styles.title }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
-            React__default['default'].createElement("span", { className: styles.text }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0437\u0432\u043E\u043D\u0438\u0442\u0435 \u043D\u0430\u043C \u0438\u043B\u0438 \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432\u00A0\u043B\u044E\u0431\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430."),
+            React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
+            React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.text, (_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0437\u0432\u043E\u043D\u0438\u0442\u0435 \u043D\u0430\u043C \u0438\u043B\u0438 \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432\u00A0\u043B\u044E\u0431\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430."),
             React__default['default'].createElement("div", { className: styles.phonesWrap },
-                React__default['default'].createElement("div", { className: styles.phoneWrap },
-                    React__default['default'].createElement(coreComponentsLink.Link, { href: 'tel:+78002000000', className: styles.phoneLink }, "8 800 200-00-00"),
-                    React__default['default'].createElement("span", { className: styles.phoneDescription },
-                        ' ',
-                        "\u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")),
-                React__default['default'].createElement("div", { className: styles.phoneWrap },
-                    React__default['default'].createElement(coreComponentsLink.Link, { href: 'tel:+74957888878', className: styles.phoneLink }, "+7 495 78-888-78"),
-                    React__default['default'].createElement("span", { className: styles.phoneDescription },
-                        ' ',
-                        "\u2014\u00A0\u0432\u00A0\u041C\u043E\u0441\u043A\u0432\u0435 \u0438\u00A0\u0437\u0430\u00A0\u0433\u0440\u0430\u043D\u0438\u0446\u0435\u0439"))),
-            React__default['default'].createElement("span", { className: styles.text }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),
-            React__default['default'].createElement(coreComponentsButton.Button, { size: 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton }, texts.hintButton))));
+                React__default['default'].createElement("div", { className: cn__default['default'](styles.phoneWrap, (_c = {}, _c[styles.phoneContentMobile] = mobile, _c)) },
+                    React__default['default'].createElement(coreComponentsLink.Link, { href: 'tel:+78002000000', underline: false, className: styles.phoneLink }, "8 800 200-00-00"),
+                    React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.text, (_d = {}, _d[styles.typographyTheme] = !mobile, _d)) }, mobile ? (React__default['default'].createElement(React__default['default'].Fragment, null, "\u0414\u043B\u044F\u00A0 \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")) : (React__default['default'].createElement(React__default['default'].Fragment, null, " \u2014\u00A0\u0434\u043B\u044F \u0437\u0432\u043E\u043D\u043A\u043E\u0432 \u043F\u043E\u00A0\u0420\u043E\u0441\u0441\u0438\u0438")))),
+                React__default['default'].createElement("div", { className: cn__default['default'](styles.phoneWrap, (_e = {}, _e[styles.phoneContentMobile] = mobile, _e)) },
+                    React__default['default'].createElement(coreComponentsLink.Link, { href: 'tel:+74957888878', underline: false, className: styles.phoneLink }, "+7 495 78-888-78"),
+                    React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.text, (_f = {}, _f[styles.typographyTheme] = !mobile, _f)) }, mobile ? (React__default['default'].createElement(React__default['default'].Fragment, null, "\u0412\u00A0\u041C\u043E\u0441\u043A\u0432\u0435 \u0438\u00A0\u0437\u0430\u00A0\u0433\u0440\u0430\u043D\u0438\u0446\u0435\u0439")) : (React__default['default'].createElement(React__default['default'].Fragment, null, " \u2014\u00A0\u0432\u00A0\u041C\u043E\u0441\u043A\u0432\u0435 \u0438\u00A0\u0437\u0430\u00A0\u0433\u0440\u0430\u043D\u0438\u0446\u0435\u0439"))))),
+            React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.text, (_g = {}, _g[styles.typographyTheme] = !mobile, _g)) }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),
+            React__default['default'].createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 's', view: 'secondary', onClick: handleReturnButtonClick, className: styles.hintButton }, texts.hintButton))));
 };
 
 exports.Hint = Hint;

package/components/screens/hint/index.css

@@ -1,7 +1,6 @@
-/* hash: 1o3b1 */
+/* hash: 1pdya */
 :root {
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -21,83 +20,61 @@
         sans-serif;
 }
 :root {
-    /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
+    /* desktop */
+
+    /* mobile */
 
     /* text */
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
-    --confirmation-text-color: var(--color-light-text-secondary);
-
-    /* error */
+    --confirmation-text-color: var(--color-light-text-primary)
 
-    /* input */
+    /* header */
 }
-.confirmation__center_m8zyz .confirmation__phoneHintWrap_m8zyz {
+.confirmation__center_1hlx4 .confirmation__hintWrap_1hlx4 {
         align-items: center;
     }
-.confirmation__center_m8zyz .confirmation__hintWrap_m8zyz {
-        align-items: center;
-    }
-.confirmation__hintWrap_m8zyz {
+.confirmation__hintWrap_1hlx4 {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: flex-start
 }
-.confirmation__title_m8zyz {
-    margin: 0;
+.confirmation__hintWrap_1hlx4 span:last-of-type {
+        margin-bottom: 0;
+    }
+.confirmation__text_1hlx4 {
     margin-bottom: var(--gap-xl);
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
 }
-.confirmation__text_m8zyz {
+.confirmation__typographyTheme_1hlx4 {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
-
-    margin-bottom: var(--gap-xl);
 }
-.confirmation__phonesWrap_m8zyz {
-    font-size: var(--confirmation-text-font-size);
-    line-height: var(--confirmation-text-line-height);
-    font-weight: var(--confirmation-text-font-weight);
-    font-family: var(--confirmation-text-font-family);
-    color: var(--confirmation-text-color);
-
+.confirmation__phonesWrap_1hlx4 {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--gap-xl);
 }
-.confirmation__phoneWrap_m8zyz {
+.confirmation__phoneWrap_1hlx4 {
     margin-bottom: var(--gap-xs)
 }
-.confirmation__phoneWrap_m8zyz:last-child {
+.confirmation__phoneWrap_1hlx4:last-child {
         margin-bottom: 0;
     }
-.confirmation__phoneLink_m8zyz {
+.confirmation__phoneLink_1hlx4 {
     font-size: 16px;
     line-height: 24px;
-    font-weight: 500
-}
-.confirmation__phoneLink_m8zyz > span {
-        border-bottom: none;
-    }
-.confirmation__phoneDescription_m8zyz {
-    color: var(--confirmation-text-color);
+    font-weight: 500;
 }
-.confirmation__hintButton_m8zyz {
+.confirmation__hintButton_1hlx4 {
     margin-top: var(--gap-2xl);
 }
+.confirmation__phoneContentMobile_1hlx4 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

package/components/screens/hint/index.js

@@ -7,7 +7,9 @@ require('classnames');
 require('../../../utils.js');
 require('../../../context.js');
 require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('../../header/component.js');
 var components_screens_hint_component = require('./component.js');
 
 

package/components/screens/index.js

@@ -9,9 +9,11 @@ require('../../utils.js');
 require('../../context.js');
 require('@alfalab/core-components-code-input');
 require('@alfalab/core-components-link');
-require('../../countdown-section-c2901a7e.js');
-require('@alfalab/core-components-loader');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('../header/component.js');
+require('@alfalab/core-components-loader');
+require('../../countdown-section-d2ec5a14.js');
 var components_screens_initial_component = require('./initial/component.js');
 var components_screens_hint_component = require('./hint/component.js');
 var components_screens_fatalError_component = require('./fatal-error/component.js');

package/components/screens/initial/component.d.ts

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

package/components/screens/initial/component.js

@@ -9,9 +9,11 @@ require('../../../utils.js');
 var context = require('../../../context.js');
 var coreComponentsCodeInput = require('@alfalab/core-components-code-input');
 var coreComponentsLink = require('@alfalab/core-components-link');
-var components_screens_initial_countdownSection = require('../../../countdown-section-c2901a7e.js');
+var coreComponentsTypography = require('@alfalab/core-components-typography');
+var coreComponentsButton = require('@alfalab/core-components-button');
+var components_header_component = require('../../header/component.js');
 require('@alfalab/core-components-loader');
-require('@alfalab/core-components-button');
+var components_screens_initial_countdownSection = require('../../../countdown-section-d2ec5a14.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,11 +21,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
 var CODE_SEND_HINT_VISIBLE_DURATION = 2000;
-var Initial = function () {
-    var _a = React.useContext(context.ConfirmationContext), state = _a.state, alignContent = _a.alignContent, texts = _a.texts, requiredCharAmount = _a.requiredCharAmount, timeLeft = _a.timeLeft, phone = _a.phone, onChangeState = _a.onChangeState, onInputFinished = _a.onInputFinished, onChangeScreen = _a.onChangeScreen, onSmsRetryClick = _a.onSmsRetryClick;
+var Initial = function (_a) {
+    var _b;
+    var mobile = _a.mobile;
+    var _c = React.useContext(context.ConfirmationContext), state = _c.state, alignContent = _c.alignContent, texts = _c.texts, requiredCharAmount = _c.requiredCharAmount, timeLeft = _c.timeLeft, phone = _c.phone, onChangeState = _c.onChangeState, onInputFinished = _c.onInputFinished, onChangeScreen = _c.onChangeScreen, onSmsRetryClick = _c.onSmsRetryClick;
     var prevState = hooks.usePrevious(state);
     var inputRef = React.useRef(null);
-    var _b = React.useState(false), codeSendHintVisible = _b[0], setCodeSendHintVisible = _b[1];
+    var _d = React.useState(false), codeSendHintVisible = _d[0], setCodeSendHintVisible = _d[1];
     var timerId = React.useRef(0);
     var handleInputComplete = function (code) {
         onInputFinished(code);
@@ -82,14 +86,13 @@ var Initial = function () {
     var processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);
     var timePassed = timeLeft === 0;
     return (React__default['default'].createElement("div", { className: cn__default['default'](components_screens_initial_countdownSection.styles.component, components_screens_initial_countdownSection.styles[alignContent]) },
-        React__default['default'].createElement("h3", { className: components_screens_initial_countdownSection.styles.header }, texts.title),
-        phone && React__default['default'].createElement("div", { className: components_screens_initial_countdownSection.styles.phone },
+        React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.title),
+        React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](components_screens_initial_countdownSection.styles.phone, (_b = {}, _b[components_screens_initial_countdownSection.styles.typographyTheme] = !mobile, _b)) },
             "\u041A\u043E\u0434 \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ",
             phone),
-        React__default['default'].createElement("div", { className: components_screens_initial_countdownSection.styles.inputContainer },
-            React__default['default'].createElement(coreComponentsCodeInput.CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: components_screens_initial_countdownSection.styles.codeInput, onComplete: handleInputComplete, onChange: handleInputChange })),
-        React__default['default'].createElement(components_screens_initial_countdownSection.CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick }),
-        React__default['default'].createElement(coreComponentsLink.Link, { onClick: handleSmsHintLinkClick, className: components_screens_initial_countdownSection.styles.smsComeLink, view: 'secondary', pseudo: true }, texts.linkToHint)));
+        React__default['default'].createElement(coreComponentsCodeInput.CodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, className: cn__default['default'](components_screens_initial_countdownSection.styles.containerInput, components_screens_initial_countdownSection.styles.codeInput), onComplete: handleInputComplete, onChange: handleInputChange }),
+        React__default['default'].createElement(components_screens_initial_countdownSection.CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick, mobile: mobile }),
+        mobile ? (React__default['default'].createElement(coreComponentsButton.Button, { onClick: handleSmsHintLinkClick, view: 'link', size: 'xs' }, texts.linkToHint)) : (React__default['default'].createElement(coreComponentsLink.Link, { onClick: handleSmsHintLinkClick, className: components_screens_initial_countdownSection.styles.smsComeLink, view: mobile ? 'primary' : 'secondary', pseudo: true }, texts.linkToHint))));
 };
 
 exports.Initial = Initial;

package/components/screens/initial/countdown-section.js

@@ -6,9 +6,10 @@ require('react');
 require('classnames');
 require('../../../utils.js');
 require('../../../context.js');
-var components_screens_initial_countdownSection = require('../../../countdown-section-c2901a7e.js');
-require('@alfalab/core-components-loader');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('@alfalab/core-components-loader');
+var components_screens_initial_countdownSection = require('../../../countdown-section-d2ec5a14.js');
 
 
 

package/components/screens/initial/index.css

@@ -1,6 +1,7 @@
-/* hash: 1ktvw */
+/* hash: 1s91r */
 :root {
     --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {
 
@@ -12,7 +13,9 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-s: 12px;
     --gap-m: 16px;
+    --gap-l: 20px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
     --gap-2xs-neg: -4px;
@@ -22,80 +25,80 @@
         sans-serif;
 }
 :root {
-    /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
+    /* desktop */
 
-    /* text */
+    /* mobile */
 
-    /* error */
+    /* text */
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-font-family: var(--font-family-system);
+    --confirmation-text-color: var(--color-light-text-primary)
 
-    /* input */
+    /* header */
 }
-.confirmation__component_38eal {
+.confirmation__component_q2tga {
     display: flex;
     flex-direction: column;
 }
-.confirmation__header_38eal {
-    margin: 0;
-    margin-bottom: var(--gap-xl);
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
-}
-.confirmation__phone_38eal {
-    margin-bottom: var(--gap-2xl);
-    color: var(--color-light-text-primary);
+.confirmation__typographyTheme_q2tga {
+    font-size: var(--confirmation-text-font-size);
+    line-height: var(--confirmation-text-line-height);
+    font-weight: var(--confirmation-text-font-weight);
+    font-family: var(--confirmation-text-font-family);
+    color: var(--confirmation-text-color);
 }
-.confirmation__inputContainer_38eal {
-    display: flex;
-    flex-direction: column;
+.confirmation__phone_q2tga {
+    color: var(--color-light-text-primary);
     margin-bottom: var(--gap-2xl);
 }
-.confirmation__compact_38eal {
+.confirmation__compact_q2tga {
     margin-bottom: var(--gap-xl);
 }
-.confirmation__loaderWrap_38eal {
+.confirmation__loaderWrap_q2tga {
     display: flex;
     align-items: center;
 }
-.confirmation__center_38eal {
+.confirmation__left_q2tga {
+    align-items: flex-start;
+}
+.confirmation__center_q2tga {
     align-items: center;
     text-align: center
 }
-.confirmation__center_38eal .confirmation__codeInput_38eal,
-    .confirmation__center_38eal .confirmation__loaderWrap_38eal {
+.confirmation__center_q2tga .confirmation__loaderWrap_q2tga {
         justify-content: center;
     }
-.confirmation__center_38eal input {
+.confirmation__center_q2tga input {
         margin: 0 var(--gap-2xs);
     }
-.confirmation__smsComeLink_38eal {
+.confirmation__codeInput_q2tga {
+    margin-bottom: var(--gap-s);
+}
+.confirmation__smsComeLink_q2tga {
     font-size: 14px;
     line-height: 20px;
-    font-weight: 400;
+    font-weight: 500;
 }
-.confirmation__countdownContainer_38eal {
+.confirmation__countdownContainer_q2tga {
+    color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-xl);
 }
-.confirmation__getCodeButton_38eal {
+.confirmation__countdownMobile_q2tga {
+    margin-bottom: var(--gap-l);
+}
+.confirmation__countdownLoaderMobile_q2tga {
+    margin-bottom: var(--gap-m);
+}
+.confirmation__getCodeButton_q2tga {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
 }
-.confirmation__countdown_38eal {
-    display: flex;
+.confirmation__getCodeButtonMobile_q2tga {
+    margin-bottom: 0;
 }
-.confirmation__countdownTimer_38eal {
-    display: flex;
-    justify-content: flex-start;
-    min-width: 45px;
-    margin-left: var(--gap-2xs);
+.confirmation__containerInput_q2tga {
+    min-height: 80px;
 }

package/components/screens/initial/index.js

@@ -9,9 +9,11 @@ require('../../../utils.js');
 require('../../../context.js');
 require('@alfalab/core-components-code-input');
 require('@alfalab/core-components-link');
-require('../../../countdown-section-c2901a7e.js');
-require('@alfalab/core-components-loader');
+require('@alfalab/core-components-typography');
 require('@alfalab/core-components-button');
+require('../../header/component.js');
+require('@alfalab/core-components-loader');
+require('../../../countdown-section-d2ec5a14.js');
 var components_screens_initial_component = require('./component.js');
 
 

package/components/screens/temp-block/component.d.ts

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

package/components/screens/temp-block/component.js

@@ -3,20 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 components_header_component = require('../../header/component.js');
 var components_countdownLoader_component = require('../../countdown-loader/component.js');
 
 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 = {"header":"confirmation__header_1g2lg","description":"confirmation__description_1g2lg","countdownWrap":"confirmation__countdownWrap_1g2lg","loader":"confirmation__loader_1g2lg"};
+var styles = {"typographyTheme":"confirmation__typographyTheme_3vwk1","description":"confirmation__description_3vwk1","countdownWrap":"confirmation__countdownWrap_3vwk1","loader":"confirmation__loader_3vwk1"};
 require('./index.css')
 
-var TempBlock = function () {
-    var _a = React.useContext(context.ConfirmationContext), texts = _a.texts, tempBlockDuration = _a.tempBlockDuration, onChangeScreen = _a.onChangeScreen, onTempBlockFinished = _a.onTempBlockFinished;
-    var _b = utils.useCountdown(tempBlockDuration), timeLeft = _b[0], startTimer = _b[1];
+var TempBlock = function (_a) {
+    var _b, _c;
+    var mobile = _a.mobile;
+    var _d = React.useContext(context.ConfirmationContext), texts = _d.texts, tempBlockDuration = _d.tempBlockDuration, onChangeScreen = _d.onChangeScreen, onTempBlockFinished = _d.onTempBlockFinished;
+    var _e = utils.useCountdown(tempBlockDuration), timeLeft = _e[0], startTimer = _e[1];
     React.useEffect(function () {
         startTimer();
     }, [startTimer]);
@@ -26,9 +32,9 @@ var TempBlock = function () {
         }
     }, [timeLeft, onChangeScreen, onTempBlockFinished]);
     return (React__default['default'].createElement(React.Fragment, null,
-        React__default['default'].createElement("h3", { className: styles.header }, texts.tempBlockTitle),
-        React__default['default'].createElement("div", { className: styles.description }, texts.tempBlockDescription),
-        React__default['default'].createElement("div", { className: styles.countdownWrap },
+        React__default['default'].createElement(components_header_component.Header, { mobile: mobile }, texts.tempBlockTitle),
+        React__default['default'].createElement(coreComponentsTypography.Typography.Text, { view: 'primary-medium', color: 'primary', className: cn__default['default'](styles.description, (_b = {}, _b[styles.typographyTheme] = !mobile, _b)) }, texts.tempBlockDescription),
+        React__default['default'].createElement("div", { className: cn__default['default'](styles.countdownWrap, (_c = {}, _c[styles.typographyTheme] = !mobile, _c)) },
             React__default['default'].createElement(components_countdownLoader_component.CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
             utils.formatMsAsMinutes(timeLeft))));
 };

package/components/screens/temp-block/index.css

@@ -1,7 +1,6 @@
-/* hash: 18khf */
+/* hash: 1at28 */
 :root {
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
 }
 :root {
 
@@ -13,56 +12,39 @@
 }
 :root {
     --gap-xs: 8px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
 :root {
-    /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
+    /* desktop */
+
+    /* mobile */
 
     /* text */
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
-    --confirmation-text-color: var(--color-light-text-secondary);
-
-    /* error */
+    --confirmation-text-color: var(--color-light-text-primary)
 
-    /* input */
-}
-.confirmation__header_1g2lg {
-    margin: 0;
-    margin-bottom: var(--gap-xl);
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
+    /* header */
 }
-.confirmation__description_1g2lg {
+.confirmation__typographyTheme_3vwk1 {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
-
-    margin-bottom: var(--gap-2xl);
 }
-.confirmation__countdownWrap_1g2lg {
+.confirmation__description_3vwk1 {
+    margin-bottom: var(--gap-xs);
+}
+.confirmation__countdownWrap_3vwk1 {
     display: flex;
     align-items: center;
 }
-.confirmation__loader_1g2lg {
+.confirmation__loader_3vwk1 {
     margin-right: var(--gap-xs);
 }

package/components/screens/temp-block/index.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
+require('classnames');
 require('../../../utils.js');
 require('../../../context.js');
+require('@alfalab/core-components-typography');
+require('../../header/component.js');
 require('../../countdown-loader/component.js');
 var components_screens_tempBlock_component = require('./component.js');
 

package/{esm/countdown-section-694d1c59.d.ts → countdown-section-d2ec5a14.d.ts}

@@ -3,6 +3,7 @@ type CountdownSectionProps = {
     codeSendHintVisible: boolean;
     timePassed: boolean;
     processing: boolean;
+    mobile?: boolean;
     handleSmsRetryClick: () => void;
 };
 declare const CountdownSection: FC<CountdownSectionProps>;