@alfalab/core-components 46.2.1 → 46.3.0-beta.1

package/comment/index.css

@@ -18,19 +18,19 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .comment__component_1j626 {
+} .comment__component_1xdx5 {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
     background-color: var(--color-light-neutral-100);
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
-} .comment__rowLimit2_1j626 {
+} .comment__rowLimit2_1xdx5 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_1j626 {
+} .comment__rowLimit5_1xdx5 {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/comment/modern/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/modern';
 
-const styles = {"component":"comment__component_1j626","rowLimit2":"comment__rowLimit2_1j626","rowLimit5":"comment__rowLimit5_1j626"};
+const styles = {"component":"comment__component_1xdx5","rowLimit2":"comment__rowLimit2_1xdx5","rowLimit5":"comment__rowLimit5_1xdx5"};
 require('./index.css');
 
 const Comment = ({ className, dataTestId, children, rowLimit }) => {

package/comment/modern/index.css

@@ -18,19 +18,19 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .comment__component_1j626 {
+} .comment__component_1xdx5 {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
     background-color: var(--color-light-neutral-100);
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
-} .comment__rowLimit2_1j626 {
+} .comment__rowLimit2_1xdx5 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_1j626 {
+} .comment__rowLimit5_1xdx5 {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/confirmation/component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
+var coreComponentsShared = require('../shared');
 var desktop_component_desktop = require('./desktop/component.desktop.js');
 var mobile_component_mobile = require('./mobile/component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var ConfirmationResponsive = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), true)[0];
     return isDesktop ? (React__default.default.createElement(desktop_component_desktop.ConfirmationDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(mobile_component_mobile.ConfirmationMobile, tslib.__assign({ breakpoint: breakpoint }, restProps)));
 };

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../shared');
 var hooks = require('@alfalab/hooks');
 var context = require('../../context.js');
 var types = require('../../types.js');
@@ -17,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"confirmation__component_8qtax"};
+var styles = {"component":"confirmation__component_1u0lr"};
 require('./index.css');
 
 var confirmationScreens = {
@@ -27,7 +28,7 @@ var confirmationScreens = {
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
 var BaseConfirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? 1024 : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? coreComponentsShared.getComponentBreakpoint() : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
     var _j = utils.useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {

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

@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .confirmation__component_8qtax {
+} .confirmation__component_1u0lr {
     width: 100%;
     max-width: 388px;
     margin: 0 auto;

package/confirmation/components/countdown-loader/component.js

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"circle":"confirmation__circle_1ls0u"};
+var styles = {"circle":"confirmation__circle_10qvl"};
 require('./index.css');
 
 var SIZE = 16;

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

@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .confirmation__circle_1ls0u {
+} .confirmation__circle_10qvl {
     fill: transparent;
     stroke: var(--color-light-neutral-500);
     stroke-width: 2px;

package/confirmation/components/header/component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"header":"confirmation__header_3jhc1","typography":"confirmation__typography_3jhc1","typographyMobile":"confirmation__typographyMobile_3jhc1"};
+var styles = {"header":"confirmation__header_5hos5","typography":"confirmation__typography_5hos5","typographyMobile":"confirmation__typographyMobile_5hos5"};
 require('./index.css');
 
 var Header = function (_a) {

package/confirmation/components/header/index.css

@@ -34,15 +34,15 @@
 
     /* header */
     --confirmation-header-font-feature-settings: normal
-} .confirmation__header_3jhc1.confirmation__header_3jhc1 {
+} .confirmation__header_5hos5.confirmation__header_5hos5 {
     margin-bottom: var(--gap-xl);
-} .confirmation__typography_3jhc1.confirmation__typography_3jhc1.confirmation__typography_3jhc1 {
+} .confirmation__typography_5hos5.confirmation__typography_5hos5.confirmation__typography_5hos5 {
     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);
-} .confirmation__typographyMobile_3jhc1.confirmation__typographyMobile_3jhc1.confirmation__typographyMobile_3jhc1 {
+} .confirmation__typographyMobile_5hos5.confirmation__typographyMobile_5hos5.confirmation__typographyMobile_5hos5 {
     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);

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

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"confirmation__component_172mz","typographyTheme":"confirmation__typographyTheme_172mz","left":"confirmation__left_172mz","center":"confirmation__center_172mz","button":"confirmation__button_172mz"};
+var styles = {"component":"confirmation__component_190ug","typographyTheme":"confirmation__typographyTheme_190ug","left":"confirmation__left_190ug","center":"confirmation__center_190ug","button":"confirmation__button_190ug"};
 require('./index.css');
 
 var FatalError = function (_a) {

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

@@ -31,20 +31,20 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_172mz {
+} .confirmation__component_190ug {
     display: flex;
     flex-direction: column;
-} .confirmation__typographyTheme_172mz.confirmation__typographyTheme_172mz {
+} .confirmation__typographyTheme_190ug.confirmation__typographyTheme_190ug {
     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__left_172mz {
+} .confirmation__left_190ug {
     align-items: flex-start;
-} .confirmation__center_172mz {
+} .confirmation__center_190ug {
     align-items: center;
     text-align: center;
-} .confirmation__button_172mz.confirmation__button_172mz {
+} .confirmation__button_190ug.confirmation__button_190ug {
     margin-top: var(--gap-2xl);
 }

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

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"confirmation__component_1hbu3","center":"confirmation__center_1hbu3","text":"confirmation__text_1hbu3","typographyTheme":"confirmation__typographyTheme_1hbu3","phonesWrap":"confirmation__phonesWrap_1hbu3","phoneWrap":"confirmation__phoneWrap_1hbu3","phoneLink":"confirmation__phoneLink_1hbu3","hintButton":"confirmation__hintButton_1hbu3","phoneContentMobile":"confirmation__phoneContentMobile_1hbu3"};
+var styles = {"component":"confirmation__component_13kii","center":"confirmation__center_13kii","text":"confirmation__text_13kii","typographyTheme":"confirmation__typographyTheme_13kii","phonesWrap":"confirmation__phonesWrap_13kii","phoneWrap":"confirmation__phoneWrap_13kii","phoneLink":"confirmation__phoneLink_13kii","hintButton":"confirmation__hintButton_13kii","phoneContentMobile":"confirmation__phoneContentMobile_13kii"};
 require('./index.css');
 
 var Hint = function (_a) {

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

@@ -33,38 +33,38 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_1hbu3 {
+} .confirmation__component_13kii {
     display: flex;
     flex-direction: column;
     align-items: flex-start
-} .confirmation__component_1hbu3 span:last-of-type {
+} .confirmation__component_13kii span:last-of-type {
         margin-bottom: 0;
-    } .confirmation__center_1hbu3 {
+    } .confirmation__center_13kii {
     align-items: center;
     text-align: center;
-} .confirmation__text_1hbu3.confirmation__text_1hbu3 {
+} .confirmation__text_13kii.confirmation__text_13kii {
     margin-bottom: var(--gap-xl);
-} .confirmation__typographyTheme_1hbu3.confirmation__typographyTheme_1hbu3 {
+} .confirmation__typographyTheme_13kii.confirmation__typographyTheme_13kii {
     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_1hbu3 {
+} .confirmation__phonesWrap_13kii {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--gap-xl);
-} .confirmation__phoneWrap_1hbu3 {
+} .confirmation__phoneWrap_13kii {
     margin-bottom: var(--gap-xs)
-} .confirmation__phoneWrap_1hbu3:last-child {
+} .confirmation__phoneWrap_13kii:last-child {
         margin-bottom: 0;
-    } .confirmation__phoneLink_1hbu3.confirmation__phoneLink_1hbu3 {
+    } .confirmation__phoneLink_13kii.confirmation__phoneLink_13kii {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
-} .confirmation__hintButton_1hbu3 {
+} .confirmation__hintButton_13kii {
     margin-top: var(--gap-2xl);
-} .confirmation__phoneContentMobile_1hbu3 {
+} .confirmation__phoneContentMobile_13kii {
     display: flex;
     flex-direction: column;
 }

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

@@ -10,7 +10,7 @@ var coreComponentsTypography = require('../../../../typography');
 var hooks = require('@alfalab/hooks');
 var context = require('../../../context.js');
 var components_header_component = require('../../header/component.js');
-var components_screens_initial_countdownSection = require('../../../countdown-section-382b7f1f.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-43d652bc.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -7,7 +7,7 @@ require('../../../../spinner');
 require('../../../../typography');
 require('../../../context.js');
 require('../../../utils.js');
-var components_screens_initial_countdownSection = require('../../../countdown-section-382b7f1f.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-43d652bc.js');
 
 
 

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

@@ -38,51 +38,51 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_pm6vv {
+} .confirmation__component_uxt3s {
     display: flex;
     flex-direction: column;
-} .confirmation__typographyTheme_pm6vv.confirmation__typographyTheme_pm6vv {
+} .confirmation__typographyTheme_uxt3s.confirmation__typographyTheme_uxt3s {
     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__phone_pm6vv.confirmation__phone_pm6vv {
+} .confirmation__phone_uxt3s.confirmation__phone_uxt3s {
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-2xl);
-} .confirmation__compact_pm6vv {
+} .confirmation__compact_uxt3s {
     margin-bottom: var(--gap-xl);
-} .confirmation__loaderWrap_pm6vv {
+} .confirmation__loaderWrap_uxt3s {
     display: flex;
     align-items: center;
-} .confirmation__left_pm6vv {
+} .confirmation__left_uxt3s {
     align-items: flex-start;
-} .confirmation__center_pm6vv {
+} .confirmation__center_uxt3s {
     align-items: center;
     text-align: center
-} .confirmation__center_pm6vv .confirmation__loaderWrap_pm6vv {
+} .confirmation__center_uxt3s .confirmation__loaderWrap_uxt3s {
         justify-content: center;
-    } .confirmation__codeInput_pm6vv {
+    } .confirmation__codeInput_uxt3s {
     margin-bottom: var(--gap-s);
-} .confirmation__smsBtn_pm6vv.confirmation__smsBtn_pm6vv {
+} .confirmation__smsBtn_uxt3s.confirmation__smsBtn_uxt3s {
     min-height: var(--size-xs-height);
-} .confirmation__smsComeLink_pm6vv.confirmation__smsComeLink_pm6vv {
+} .confirmation__smsComeLink_uxt3s.confirmation__smsComeLink_uxt3s {
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
-} .confirmation__countdownContainer_pm6vv.confirmation__countdownContainer_pm6vv {
+} .confirmation__countdownContainer_uxt3s.confirmation__countdownContainer_uxt3s {
     color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-xl);
-} .confirmation__countdownMobile_pm6vv.confirmation__countdownMobile_pm6vv {
+} .confirmation__countdownMobile_uxt3s.confirmation__countdownMobile_uxt3s {
     margin-bottom: var(--gap-l);
-} .confirmation__countdownLoaderMobile_pm6vv.confirmation__countdownLoaderMobile_pm6vv {
+} .confirmation__countdownLoaderMobile_uxt3s.confirmation__countdownLoaderMobile_uxt3s {
     margin-bottom: var(--gap-m);
-} .confirmation__getCodeButton_pm6vv {
+} .confirmation__getCodeButton_uxt3s {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
-} .confirmation__getCodeButtonMobile_pm6vv {
+} .confirmation__getCodeButtonMobile_uxt3s {
     margin-bottom: 0;
-} .confirmation__containerInput_pm6vv {
+} .confirmation__containerInput_uxt3s {
     min-height: 80px;
 }

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

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"confirmation__component_5pydx","center":"confirmation__center_5pydx","typographyTheme":"confirmation__typographyTheme_5pydx","description":"confirmation__description_5pydx","countdownWrap":"confirmation__countdownWrap_5pydx","loader":"confirmation__loader_5pydx"};
+var styles = {"component":"confirmation__component_b1klu","center":"confirmation__center_b1klu","typographyTheme":"confirmation__typographyTheme_b1klu","description":"confirmation__description_b1klu","countdownWrap":"confirmation__countdownWrap_b1klu","loader":"confirmation__loader_b1klu"};
 require('./index.css');
 
 var TempBlock = function (_a) {

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

@@ -31,23 +31,23 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_5pydx {
+} .confirmation__component_b1klu {
     display: flex;
     flex-direction: column;
-} .confirmation__center_5pydx {
+} .confirmation__center_b1klu {
     align-items: center;
     text-align: center;
-} .confirmation__typographyTheme_5pydx.confirmation__typographyTheme_5pydx {
+} .confirmation__typographyTheme_b1klu.confirmation__typographyTheme_b1klu {
     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__description_5pydx.confirmation__description_5pydx {
+} .confirmation__description_b1klu.confirmation__description_b1klu {
     margin-bottom: var(--gap-xs);
-} .confirmation__countdownWrap_5pydx {
+} .confirmation__countdownWrap_b1klu {
     display: flex;
     align-items: center;
-} .confirmation__loader_5pydx {
+} .confirmation__loader_b1klu {
     margin-right: var(--gap-xs);
 }

package/confirmation/{countdown-section-382b7f1f.js → countdown-section-43d652bc.js}

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"confirmation__component_pm6vv","typographyTheme":"confirmation__typographyTheme_pm6vv","phone":"confirmation__phone_pm6vv","compact":"confirmation__compact_pm6vv","loaderWrap":"confirmation__loaderWrap_pm6vv","left":"confirmation__left_pm6vv","center":"confirmation__center_pm6vv","codeInput":"confirmation__codeInput_pm6vv","smsBtn":"confirmation__smsBtn_pm6vv","smsComeLink":"confirmation__smsComeLink_pm6vv","countdownContainer":"confirmation__countdownContainer_pm6vv","countdownMobile":"confirmation__countdownMobile_pm6vv","countdownLoaderMobile":"confirmation__countdownLoaderMobile_pm6vv","getCodeButton":"confirmation__getCodeButton_pm6vv","getCodeButtonMobile":"confirmation__getCodeButtonMobile_pm6vv","containerInput":"confirmation__containerInput_pm6vv"};
+var styles = {"component":"confirmation__component_uxt3s","typographyTheme":"confirmation__typographyTheme_uxt3s","phone":"confirmation__phone_uxt3s","compact":"confirmation__compact_uxt3s","loaderWrap":"confirmation__loaderWrap_uxt3s","left":"confirmation__left_uxt3s","center":"confirmation__center_uxt3s","codeInput":"confirmation__codeInput_uxt3s","smsBtn":"confirmation__smsBtn_uxt3s","smsComeLink":"confirmation__smsComeLink_uxt3s","countdownContainer":"confirmation__countdownContainer_uxt3s","countdownMobile":"confirmation__countdownMobile_uxt3s","countdownLoaderMobile":"confirmation__countdownLoaderMobile_uxt3s","getCodeButton":"confirmation__getCodeButton_uxt3s","getCodeButtonMobile":"confirmation__getCodeButtonMobile_uxt3s","containerInput":"confirmation__containerInput_uxt3s"};
 require('./components/screens/initial/index.css');
 
 var CountdownSection = function (_a) {

package/confirmation/cssm/component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 var desktop_component_desktop = require('./desktop/component.desktop.js');
 var mobile_component_mobile = require('./mobile/component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var ConfirmationResponsive = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), true)[0];
     return isDesktop ? (React__default.default.createElement(desktop_component_desktop.ConfirmationDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(mobile_component_mobile.ConfirmationMobile, tslib.__assign({ breakpoint: breakpoint }, restProps)));
 };

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
+var coreComponentsShared = require('../../../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var context = require('../../context.js');
 var types = require('../../types.js');
@@ -26,7 +27,7 @@ var confirmationScreens = {
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
 var BaseConfirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? 1024 : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? coreComponentsShared.getComponentBreakpoint() : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
     var _j = utils.useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {

package/confirmation/esm/component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { ConfirmationDesktop } from './desktop/component.desktop.js';
 import { ConfirmationMobile } from './mobile/component.mobile.js';
 import './components/base-confirmation/component.js';
@@ -16,7 +17,7 @@ import '../../code-input/esm/mobile';
 import '../../link/esm';
 import '../../typography/esm';
 import './components/header/component.js';
-import './countdown-section-63e032d2.js';
+import './countdown-section-fa359ca6.js';
 import '../../button/esm';
 import '../../spinner/esm';
 import './components/screens/hint/component.js';
@@ -25,7 +26,7 @@ import './components/screens/temp-block/component.js';
 import './components/countdown-loader/component.js';
 
 var ConfirmationResponsive = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), true)[0];
     return isDesktop ? (React.createElement(ConfirmationDesktop, __assign({}, restProps))) : (React.createElement(ConfirmationMobile, __assign({ breakpoint: breakpoint }, restProps)));
 };

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

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { useEffect, useMemo } from 'react';
 import cn from 'classnames';
+import { getComponentBreakpoint } from '../../../../shared/esm';
 import { usePrevious } from '@alfalab/hooks';
 import { ConfirmationContext } from '../../context.js';
 import { defaultTexts } from '../../types.js';
@@ -15,12 +16,12 @@ import '../../../../code-input/esm/mobile';
 import '../../../../link/esm';
 import '../../../../typography/esm';
 import '../header/component.js';
-import '../../countdown-section-63e032d2.js';
+import '../../countdown-section-fa359ca6.js';
 import '../../../../button/esm';
 import '../../../../spinner/esm';
 import '../countdown-loader/component.js';
 
-var styles = {"component":"confirmation__component_8qtax"};
+var styles = {"component":"confirmation__component_1u0lr"};
 require('./index.css');
 
 var confirmationScreens = {
@@ -30,7 +31,7 @@ var confirmationScreens = {
     TEMP_BLOCK: TempBlock,
 };
 var BaseConfirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? 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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? 1024 : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? 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, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? getComponentBreakpoint() : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = __rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
     var _j = useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
     var prevState = usePrevious(state);
     useEffect(function () {

package/confirmation/esm/components/base-confirmation/index.css

@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .confirmation__component_8qtax {
+} .confirmation__component_1u0lr {
     width: 100%;
     max-width: 388px;
     margin: 0 auto;

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

@@ -2,6 +2,7 @@ export { BaseConfirmation } from './component.js';
 import 'tslib';
 import 'react';
 import 'classnames';
+import '../../../../shared/esm';
 import '@alfalab/hooks';
 import '../../context.js';
 import '../../utils.js';
@@ -13,7 +14,7 @@ import '../../../../code-input/esm/mobile';
 import '../../../../link/esm';
 import '../../../../typography/esm';
 import '../header/component.js';
-import '../../countdown-section-63e032d2.js';
+import '../../countdown-section-fa359ca6.js';
 import '../../../../button/esm';
 import '../../../../spinner/esm';
 import '../screens/hint/component.js';

package/confirmation/esm/components/countdown-loader/component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-var styles = {"circle":"confirmation__circle_1ls0u"};
+var styles = {"circle":"confirmation__circle_10qvl"};
 require('./index.css');
 
 var SIZE = 16;

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

@@ -15,7 +15,7 @@
 } :root {
 } :root {
 } :root {
-} .confirmation__circle_1ls0u {
+} .confirmation__circle_10qvl {
     fill: transparent;
     stroke: var(--color-light-neutral-500);
     stroke-width: 2px;

package/confirmation/esm/components/header/component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../../../typography/esm';
 
-var styles = {"header":"confirmation__header_3jhc1","typography":"confirmation__typography_3jhc1","typographyMobile":"confirmation__typographyMobile_3jhc1"};
+var styles = {"header":"confirmation__header_5hos5","typography":"confirmation__typography_5hos5","typographyMobile":"confirmation__typographyMobile_5hos5"};
 require('./index.css');
 
 var Header = function (_a) {

package/confirmation/esm/components/header/index.css

@@ -34,15 +34,15 @@
 
     /* header */
     --confirmation-header-font-feature-settings: normal
-} .confirmation__header_3jhc1.confirmation__header_3jhc1 {
+} .confirmation__header_5hos5.confirmation__header_5hos5 {
     margin-bottom: var(--gap-xl);
-} .confirmation__typography_3jhc1.confirmation__typography_3jhc1.confirmation__typography_3jhc1 {
+} .confirmation__typography_5hos5.confirmation__typography_5hos5.confirmation__typography_5hos5 {
     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);
-} .confirmation__typographyMobile_3jhc1.confirmation__typographyMobile_3jhc1.confirmation__typographyMobile_3jhc1 {
+} .confirmation__typographyMobile_5hos5.confirmation__typographyMobile_5hos5.confirmation__typographyMobile_5hos5 {
     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);

package/confirmation/esm/components/index.js

@@ -14,6 +14,6 @@ import '@alfalab/hooks';
 import '../context.js';
 import '../utils.js';
 import './header/component.js';
-import '../countdown-section-63e032d2.js';
+import '../countdown-section-fa359ca6.js';
 import '../../../button/esm';
 import '../../../spinner/esm';

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

@@ -6,7 +6,7 @@ import { ConfirmationContext } from '../../../context.js';
 import { Header } from '../../header/component.js';
 import '../../../utils.js';
 
-var styles = {"component":"confirmation__component_172mz","typographyTheme":"confirmation__typographyTheme_172mz","left":"confirmation__left_172mz","center":"confirmation__center_172mz","button":"confirmation__button_172mz"};
+var styles = {"component":"confirmation__component_190ug","typographyTheme":"confirmation__typographyTheme_190ug","left":"confirmation__left_190ug","center":"confirmation__center_190ug","button":"confirmation__button_190ug"};
 require('./index.css');
 
 var FatalError = function (_a) {