@alfalab/core-components 23.12.0 → 25.0.0

package/confirmation/components/countdown-loader/index.css

@@ -1,4 +1,4 @@
-/* hash: 1lcru */
+/* hash: 1ul0p */
 :root {
     --color-light-graphic-tertiary: #b6bcc3;
 }
@@ -19,7 +19,7 @@
 
     /* input */
 }
-.confirmation__circle_rnu3l {
+.confirmation__circle_qnot1 {
     fill: transparent;
     stroke: var(--color-light-graphic-tertiary);
     stroke-width: 2px;

package/confirmation/components/index.d.ts

@@ -1,4 +1,2 @@
-export * from "./countdown/index";
-export * from "./sign-confirmation/index";
+export * from "./screens/index";
 export * from "./countdown-loader/index";
-export * from "./overlimit/index";

package/confirmation/components/index.js

@@ -2,23 +2,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('classnames');
-require('../../button');
-require('../../link');
-require('@alfalab/utils');
 require('@alfalab/hooks');
-var components_countdownLoader_component = require('./countdown-loader/component.js');
-var components_countdown_component = require('./countdown/component.js');
+require('../utils.js');
+require('../context.js');
+require('../../code-input');
+require('../../link');
+require('../countdown-section-e9dd3f7c.js');
 require('../../loader');
-require('./code-input/component.js');
-require('./code-input/utils.js');
-var components_signConfirmation_component = require('./sign-confirmation/component.js');
-require('@alfalab/icons-glyph');
-var components_overlimit_component = require('./overlimit/component.js');
+require('../../button');
+var components_screens_initial_component = require('./screens/initial/component.js');
+var components_screens_hint_component = require('./screens/hint/component.js');
+var components_screens_fatalError_component = require('./screens/fatal-error/component.js');
+var components_countdownLoader_component = require('./countdown-loader/component.js');
+var components_screens_tempBlock_component = require('./screens/temp-block/component.js');
 
 
 
+exports.Initial = components_screens_initial_component.Initial;
+exports.Hint = components_screens_hint_component.Hint;
+exports.FatalError = components_screens_fatalError_component.FatalError;
 exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
-exports.Countdown = components_countdown_component.Countdown;
-exports.formatMsAsMinutes = components_countdown_component.formatMsAsMinutes;
-exports.SignConfirmation = components_signConfirmation_component.SignConfirmation;
-exports.Overlimit = components_overlimit_component.Overlimit;
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const FatalError: () => JSX.Element;
+export { FatalError };

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

@@ -0,0 +1,23 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../../../utils.js');
+var context = require('../../../context.js');
+var coreComponentsButton = require('../../../../button');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles = {"header":"confirmation__header_gahbi","description":"confirmation__description_gahbi"};
+require('./index.css');
+
+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.header }, texts.fatalErrorTitle),
+        React__default['default'].createElement("div", { className: styles.description }, texts.fatalErrorDescription),
+        React__default['default'].createElement(coreComponentsButton.Button, { size: 'xs', view: 'secondary', onClick: onFatalErrorOkButtonClick }, texts.fatalErrorButton)));
+};
+
+exports.FatalError = FatalError;

package/confirmation/components/screens/fatal-error/index.css

@@ -0,0 +1,61 @@
+/* hash: kn7da */
+:root {
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --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;
+
+    /* 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 */
+
+    /* input */
+}
+.confirmation__header_gahbi {
+    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__description_gahbi {
+    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);
+    color: var(--color-light-text-primary);
+}

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

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../../../utils.js');
+require('../../../context.js');
+require('../../../../button');
+var components_screens_fatalError_component = require('./component.js');
+
+
+
+exports.FatalError = components_screens_fatalError_component.FatalError;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Hint: () => JSX.Element;
+export { Hint };

package/confirmation/components/screens/hint/component.js

@@ -0,0 +1,43 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+require('../../../utils.js');
+var context = require('../../../context.js');
+var coreComponentsLink = require('../../../../link');
+var coreComponentsButton = require('../../../../button');
+
+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_1dnpa","phoneHintWrap":"confirmation__phoneHintWrap_1dnpa","hintWrap":"confirmation__hintWrap_1dnpa","title":"confirmation__title_1dnpa","text":"confirmation__text_1dnpa","phonesWrap":"confirmation__phonesWrap_1dnpa","phoneWrap":"confirmation__phoneWrap_1dnpa","phoneLink":"confirmation__phoneLink_1dnpa","phoneDescription":"confirmation__phoneDescription_1dnpa","hintButton":"confirmation__hintButton_1dnpa"};
+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 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("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))));
+};
+
+exports.Hint = Hint;

package/confirmation/components/screens/hint/index.css

@@ -0,0 +1,103 @@
+/* hash: o20pv */
+:root {
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: #546272;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+: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;
+
+    /* 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 */
+
+    /* input */
+}
+.confirmation__center_1dnpa .confirmation__phoneHintWrap_1dnpa {
+        align-items: center;
+    }
+.confirmation__center_1dnpa .confirmation__hintWrap_1dnpa {
+        align-items: center;
+    }
+.confirmation__hintWrap_1dnpa {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.confirmation__title_1dnpa {
+    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__text_1dnpa {
+    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_1dnpa {
+    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);
+
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__phoneWrap_1dnpa {
+    margin-bottom: var(--gap-xs)
+}
+.confirmation__phoneWrap_1dnpa:last-child {
+        margin-bottom: 0;
+    }
+.confirmation__phoneLink_1dnpa {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500
+}
+.confirmation__phoneLink_1dnpa > span {
+        border-bottom: none;
+    }
+.confirmation__phoneDescription_1dnpa {
+    color: var(--confirmation-text-color);
+}
+.confirmation__hintButton_1dnpa {
+    margin-top: var(--gap-2xl);
+}

package/confirmation/components/screens/hint/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('../../../utils.js');
+require('../../../context.js');
+require('../../../../link');
+require('../../../../button');
+var components_screens_hint_component = require('./component.js');
+
+
+
+exports.Hint = components_screens_hint_component.Hint;

package/confirmation/components/screens/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./initial/index";
+export * from "./hint/index";
+export * from "./fatal-error/index";
+export * from "./temp-block/index";

package/confirmation/components/screens/index.js

@@ -0,0 +1,24 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../utils.js');
+require('../../context.js');
+require('../../../code-input');
+require('../../../link');
+require('../../countdown-section-e9dd3f7c.js');
+require('../../../loader');
+require('../../../button');
+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');
+require('../countdown-loader/component.js');
+var components_screens_tempBlock_component = require('./temp-block/component.js');
+
+
+
+exports.Initial = components_screens_initial_component.Initial;
+exports.Hint = components_screens_hint_component.Hint;
+exports.FatalError = components_screens_fatalError_component.FatalError;
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Initial: () => JSX.Element;
+export { Initial };

package/confirmation/components/screens/initial/component.js

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var hooks = require('@alfalab/hooks');
+require('../../../utils.js');
+var context = require('../../../context.js');
+var coreComponentsCodeInput = require('../../../../code-input');
+var coreComponentsLink = require('../../../../link');
+var components_screens_initial_countdownSection = require('../../../countdown-section-e9dd3f7c.js');
+require('../../../../loader');
+require('../../../../button');
+
+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 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 prevState = hooks.usePrevious(state);
+    var inputRef = React.useRef(null);
+    var _b = React.useState(false), codeSendHintVisible = _b[0], setCodeSendHintVisible = _b[1];
+    var timerId = React.useRef(0);
+    var handleInputComplete = function (code) {
+        onInputFinished(code);
+    };
+    var handleSmsHintLinkClick = function () {
+        onChangeScreen('HINT');
+    };
+    var handleInputChange = function () {
+        if (state === 'CODE_ERROR') {
+            onChangeState('INITIAL');
+        }
+    };
+    var handleSmsRetryClick = function () {
+        if (inputRef.current) {
+            inputRef.current.reset();
+        }
+        onSmsRetryClick();
+    };
+    var clearTimer = React.useCallback(function () {
+        window.clearTimeout(timerId.current);
+    }, []);
+    React.useEffect(function () {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+        return function () {
+            clearTimer();
+        };
+    }, [clearTimer]);
+    React.useEffect(function () {
+        if (!inputRef.current) {
+            return;
+        }
+        if (state === 'CODE_ERROR' && prevState !== 'CODE_ERROR') {
+            inputRef.current.focus(requiredCharAmount - 1);
+        }
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            inputRef.current.focus();
+        }
+    }, [prevState, state, requiredCharAmount]);
+    React.useLayoutEffect(function () {
+        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {
+            setCodeSendHintVisible(true);
+            clearTimer();
+            timerId.current = window.setTimeout(function () {
+                setCodeSendHintVisible(false);
+            }, CODE_SEND_HINT_VISIBLE_DURATION);
+        }
+    }, [prevState, state, clearTimer]);
+    var getCodeInputError = function () {
+        if (state === 'CODE_ERROR') {
+            return texts.codeError || true;
+        }
+        return false;
+    };
+    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 },
+            "\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)));
+};
+
+exports.Initial = Initial;

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

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('../../../utils.js');
+require('../../../context.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-e9dd3f7c.js');
+require('../../../../loader');
+require('../../../../button');
+
+
+
+exports.CountdownSection = components_screens_initial_countdownSection.CountdownSection;

package/confirmation/components/screens/initial/index.css

@@ -0,0 +1,101 @@
+/* hash: 1tjph */
+:root {
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xs: 4px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+    --gap-2xs-neg: -4px;
+}
+: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;
+
+    /* text */
+
+    /* error */
+
+    /* input */
+}
+.confirmation__component_phw9y {
+    display: flex;
+    flex-direction: column;
+}
+.confirmation__header_phw9y {
+    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_phw9y {
+    margin-bottom: var(--gap-2xl);
+    color: var(--color-light-text-primary);
+}
+.confirmation__inputContainer_phw9y {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-2xl);
+}
+.confirmation__compact_phw9y {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__loaderWrap_phw9y {
+    display: flex;
+    align-items: center;
+}
+.confirmation__center_phw9y {
+    align-items: center;
+    text-align: center
+}
+.confirmation__center_phw9y .confirmation__codeInput_phw9y,
+    .confirmation__center_phw9y .confirmation__loaderWrap_phw9y {
+        justify-content: center;
+    }
+.confirmation__center_phw9y input {
+        margin: 0 var(--gap-2xs);
+    }
+.confirmation__smsComeLink_phw9y {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+}
+.confirmation__countdownContainer_phw9y {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__getCodeButton_phw9y {
+    position: relative;
+    top: var(--gap-2xs-neg);
+    margin-bottom: var(--gap-m);
+}
+.confirmation__countdown_phw9y {
+    display: flex;
+}
+.confirmation__countdownTimer_phw9y {
+    display: flex;
+    justify-content: flex-start;
+    min-width: 45px;
+    margin-left: var(--gap-2xs);
+}

package/confirmation/components/screens/initial/index.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('classnames');
+require('@alfalab/hooks');
+require('../../../utils.js');
+require('../../../context.js');
+require('../../../../code-input');
+require('../../../../link');
+require('../../../countdown-section-e9dd3f7c.js');
+require('../../../../loader');
+require('../../../../button');
+var components_screens_initial_component = require('./component.js');
+
+
+
+exports.Initial = components_screens_initial_component.Initial;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TempBlock: () => JSX.Element;
+export { TempBlock };

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

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('../../../utils.js');
+var context = require('../../../context.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 styles = {"header":"confirmation__header_1c17o","description":"confirmation__description_1c17o","countdownWrap":"confirmation__countdownWrap_1c17o","loader":"confirmation__loader_1c17o"};
+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];
+    React.useEffect(function () {
+        startTimer();
+    }, [startTimer]);
+    React.useEffect(function () {
+        if (timeLeft === 0 && onTempBlockFinished) {
+            onTempBlockFinished();
+        }
+    }, [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_countdownLoader_component.CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
+            utils.formatMsAsMinutes(timeLeft))));
+};
+
+exports.TempBlock = TempBlock;