@alfalab/core-components 47.12.0 → 47.12.1-beta.0

package/collapse/moderncssm/index.js

@@ -0,0 +1,9 @@
+export { Collapse } from './Component.js';
+import 'react';
+import '@juggle/resize-observer';
+import 'classnames';
+import 'lodash.debounce';
+import '../../link/moderncssm';
+import '@alfalab/icons-glyph/ChevronDownSIcon';
+import '@alfalab/icons-glyph/ChevronUpSIcon';
+import './index.module.css';

package/collapse/moderncssm/index.module.css

@@ -0,0 +1,33 @@
+/* */
+
+.collapse {
+    font-family: var(--font-family);
+}
+
+.collapse *,
+.collapse:before,
+.collapse:after {
+    box-sizing: border-box;
+}
+
+.content {
+    position: relative;
+    overflow: hidden;
+    visibility: hidden;
+    height: 0;
+    transition: height 0.2s;
+}
+
+.expandedContent {
+    visibility: visible;
+    height: auto;
+    transform: translate3d(0, 0, 0);
+}
+
+.expandedLabel.expandedLabel {
+    margin-top: 15px;
+}
+
+.toggleIcon {
+    margin: var(--gap-2xs);
+}

package/comment/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 = {"component":"comment__component_1oh54","rowLimit2":"comment__rowLimit2_1oh54","rowLimit5":"comment__rowLimit5_1oh54"};
+var styles = {"component":"comment__component_iv5zs","rowLimit2":"comment__rowLimit2_iv5zs","rowLimit5":"comment__rowLimit5_iv5zs"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/esm';
 
-var styles = {"component":"comment__component_1oh54","rowLimit2":"comment__rowLimit2_1oh54","rowLimit5":"comment__rowLimit5_1oh54"};
+var styles = {"component":"comment__component_iv5zs","rowLimit2":"comment__rowLimit2_iv5zs","rowLimit5":"comment__rowLimit5_iv5zs"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/index.css

@@ -22,19 +22,19 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .comment__component_1oh54 {
+} .comment__component_iv5zs {
     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_1oh54 {
+} .comment__rowLimit2_iv5zs {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_1oh54 {
+} .comment__rowLimit5_iv5zs {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/comment/index.css

@@ -22,19 +22,19 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .comment__component_1oh54 {
+} .comment__component_iv5zs {
     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_1oh54 {
+} .comment__rowLimit2_iv5zs {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_1oh54 {
+} .comment__rowLimit5_iv5zs {
     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_1oh54","rowLimit2":"comment__rowLimit2_1oh54","rowLimit5":"comment__rowLimit5_1oh54"};
+const styles = {"component":"comment__component_iv5zs","rowLimit2":"comment__rowLimit2_iv5zs","rowLimit5":"comment__rowLimit5_iv5zs"};
 require('./index.css');
 
 const Comment = ({ className, dataTestId, children, rowLimit }) => {

package/comment/modern/index.css

@@ -22,19 +22,19 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .comment__component_1oh54 {
+} .comment__component_iv5zs {
     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_1oh54 {
+} .comment__rowLimit2_iv5zs {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_1oh54 {
+} .comment__rowLimit5_iv5zs {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/comment/moderncssm/Component.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+type CommentProps = {
+    /**
+     * Количество строк
+     */
+    rowLimit?: 2 | 5;
+    /**
+     *  Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Comment: React.FC<CommentProps>;
+export { CommentProps, Comment };

package/comment/moderncssm/Component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+import { Typography } from '../../typography/moderncssm';
+import styles from './index.module.css';
+
+const Comment = ({ className, dataTestId, children, rowLimit }) => {
+    const textClassName = rowLimit && styles[`rowLimit${rowLimit}`];
+    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
+        React.createElement(Typography.Text, { tag: 'div', view: 'component-primary', className: textClassName, color: 'primary' }, children)));
+};
+
+export { Comment };

package/comment/moderncssm/index.d.ts

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

package/comment/moderncssm/index.js

@@ -0,0 +1,5 @@
+export { Comment } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../typography/moderncssm';
+import './index.module.css';

package/comment/moderncssm/index.module.css

@@ -0,0 +1,24 @@
+/* */
+
+.component {
+    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);
+}
+
+.rowLimit2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.rowLimit5 {
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}

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

@@ -17,7 +17,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_gc6pk"};
+var styles = {"component":"confirmation__component_1h6f6"};
 require('./index.css');
 
 var confirmationScreens = {

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

@@ -19,7 +19,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .confirmation__component_gc6pk {
+} .confirmation__component_1h6f6 {
     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_y7lwk"};
+var styles = {"circle":"confirmation__circle_1fc9y"};
 require('./index.css');
 
 var SIZE = 16;

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

@@ -19,7 +19,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .confirmation__circle_y7lwk {
+} .confirmation__circle_1fc9y {
     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_v2ejj","typography":"confirmation__typography_v2ejj","typographyMobile":"confirmation__typographyMobile_v2ejj"};
+var styles = {"header":"confirmation__header_z7019","typography":"confirmation__typography_z7019","typographyMobile":"confirmation__typographyMobile_z7019"};
 require('./index.css');
 
 var Header = function (_a) {

package/confirmation/components/header/index.css

@@ -38,15 +38,15 @@
 
     /* header */
     --confirmation-header-font-feature-settings: normal
-} .confirmation__header_v2ejj.confirmation__header_v2ejj {
+} .confirmation__header_z7019.confirmation__header_z7019 {
     margin-bottom: var(--gap-xl);
-} .confirmation__typography_v2ejj.confirmation__typography_v2ejj.confirmation__typography_v2ejj {
+} .confirmation__typography_z7019.confirmation__typography_z7019.confirmation__typography_z7019 {
     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_v2ejj.confirmation__typographyMobile_v2ejj.confirmation__typographyMobile_v2ejj {
+} .confirmation__typographyMobile_z7019.confirmation__typographyMobile_z7019.confirmation__typographyMobile_z7019 {
     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_1t625","typographyTheme":"confirmation__typographyTheme_1t625","left":"confirmation__left_1t625","center":"confirmation__center_1t625","button":"confirmation__button_1t625"};
+var styles = {"component":"confirmation__component_1xanm","typographyTheme":"confirmation__typographyTheme_1xanm","left":"confirmation__left_1xanm","center":"confirmation__center_1xanm","button":"confirmation__button_1xanm"};
 require('./index.css');
 
 var FatalError = function (_a) {

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

@@ -35,20 +35,20 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_1t625 {
+} .confirmation__component_1xanm {
     display: flex;
     flex-direction: column;
-} .confirmation__typographyTheme_1t625.confirmation__typographyTheme_1t625 {
+} .confirmation__typographyTheme_1xanm.confirmation__typographyTheme_1xanm {
     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_1t625 {
+} .confirmation__left_1xanm {
     align-items: flex-start;
-} .confirmation__center_1t625 {
+} .confirmation__center_1xanm {
     align-items: center;
     text-align: center;
-} .confirmation__button_1t625.confirmation__button_1t625 {
+} .confirmation__button_1xanm.confirmation__button_1xanm {
     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_178bj","center":"confirmation__center_178bj","text":"confirmation__text_178bj","typographyTheme":"confirmation__typographyTheme_178bj","phonesWrap":"confirmation__phonesWrap_178bj","phoneWrap":"confirmation__phoneWrap_178bj","phoneLink":"confirmation__phoneLink_178bj","hintButton":"confirmation__hintButton_178bj","phoneContentMobile":"confirmation__phoneContentMobile_178bj"};
+var styles = {"component":"confirmation__component_91fyp","center":"confirmation__center_91fyp","text":"confirmation__text_91fyp","typographyTheme":"confirmation__typographyTheme_91fyp","phonesWrap":"confirmation__phonesWrap_91fyp","phoneWrap":"confirmation__phoneWrap_91fyp","phoneLink":"confirmation__phoneLink_91fyp","hintButton":"confirmation__hintButton_91fyp","phoneContentMobile":"confirmation__phoneContentMobile_91fyp"};
 require('./index.css');
 
 var Hint = function (_a) {

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

@@ -37,38 +37,38 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_178bj {
+} .confirmation__component_91fyp {
     display: flex;
     flex-direction: column;
     align-items: flex-start
-} .confirmation__component_178bj span:last-of-type {
+} .confirmation__component_91fyp span:last-of-type {
         margin-bottom: 0;
-    } .confirmation__center_178bj {
+    } .confirmation__center_91fyp {
     align-items: center;
     text-align: center;
-} .confirmation__text_178bj.confirmation__text_178bj {
+} .confirmation__text_91fyp.confirmation__text_91fyp {
     margin-bottom: var(--gap-xl);
-} .confirmation__typographyTheme_178bj.confirmation__typographyTheme_178bj {
+} .confirmation__typographyTheme_91fyp.confirmation__typographyTheme_91fyp {
     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_178bj {
+} .confirmation__phonesWrap_91fyp {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--gap-xl);
-} .confirmation__phoneWrap_178bj {
+} .confirmation__phoneWrap_91fyp {
     margin-bottom: var(--gap-xs)
-} .confirmation__phoneWrap_178bj:last-child {
+} .confirmation__phoneWrap_91fyp:last-child {
         margin-bottom: 0;
-    } .confirmation__phoneLink_178bj.confirmation__phoneLink_178bj {
+    } .confirmation__phoneLink_91fyp.confirmation__phoneLink_91fyp {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
-} .confirmation__hintButton_178bj {
+} .confirmation__hintButton_91fyp {
     margin-top: var(--gap-2xl);
-} .confirmation__phoneContentMobile_178bj {
+} .confirmation__phoneContentMobile_91fyp {
     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-d69c8271.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-5f076d84.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-d69c8271.js');
+var components_screens_initial_countdownSection = require('../../../countdown-section-5f076d84.js');
 
 
 

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

@@ -42,51 +42,51 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_4qseq {
+} .confirmation__component_199ht {
     display: flex;
     flex-direction: column;
-} .confirmation__typographyTheme_4qseq.confirmation__typographyTheme_4qseq {
+} .confirmation__typographyTheme_199ht.confirmation__typographyTheme_199ht {
     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_4qseq.confirmation__phone_4qseq {
+} .confirmation__phone_199ht.confirmation__phone_199ht {
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-2xl);
-} .confirmation__compact_4qseq {
+} .confirmation__compact_199ht {
     margin-bottom: var(--gap-xl);
-} .confirmation__loaderWrap_4qseq {
+} .confirmation__loaderWrap_199ht {
     display: flex;
     align-items: center;
-} .confirmation__left_4qseq {
+} .confirmation__left_199ht {
     align-items: flex-start;
-} .confirmation__center_4qseq {
+} .confirmation__center_199ht {
     align-items: center;
     text-align: center
-} .confirmation__center_4qseq .confirmation__loaderWrap_4qseq {
+} .confirmation__center_199ht .confirmation__loaderWrap_199ht {
         justify-content: center;
-    } .confirmation__codeInput_4qseq {
+    } .confirmation__codeInput_199ht {
     margin-bottom: var(--gap-s);
-} .confirmation__smsBtn_4qseq.confirmation__smsBtn_4qseq {
+} .confirmation__smsBtn_199ht.confirmation__smsBtn_199ht {
     min-height: var(--size-xs-height);
-} .confirmation__smsComeLink_4qseq.confirmation__smsComeLink_4qseq {
+} .confirmation__smsComeLink_199ht.confirmation__smsComeLink_199ht {
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
-} .confirmation__countdownContainer_4qseq.confirmation__countdownContainer_4qseq {
+} .confirmation__countdownContainer_199ht.confirmation__countdownContainer_199ht {
     color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-xl);
-} .confirmation__countdownMobile_4qseq.confirmation__countdownMobile_4qseq {
+} .confirmation__countdownMobile_199ht.confirmation__countdownMobile_199ht {
     margin-bottom: var(--gap-l);
-} .confirmation__countdownLoaderMobile_4qseq.confirmation__countdownLoaderMobile_4qseq {
+} .confirmation__countdownLoaderMobile_199ht.confirmation__countdownLoaderMobile_199ht {
     margin-bottom: var(--gap-m);
-} .confirmation__getCodeButton_4qseq {
+} .confirmation__getCodeButton_199ht {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
-} .confirmation__getCodeButtonMobile_4qseq {
+} .confirmation__getCodeButtonMobile_199ht {
     margin-bottom: 0;
-} .confirmation__containerInput_4qseq {
+} .confirmation__containerInput_199ht {
     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_as7bi","center":"confirmation__center_as7bi","typographyTheme":"confirmation__typographyTheme_as7bi","description":"confirmation__description_as7bi","countdownWrap":"confirmation__countdownWrap_as7bi","loader":"confirmation__loader_as7bi"};
+var styles = {"component":"confirmation__component_6nlts","center":"confirmation__center_6nlts","typographyTheme":"confirmation__typographyTheme_6nlts","description":"confirmation__description_6nlts","countdownWrap":"confirmation__countdownWrap_6nlts","loader":"confirmation__loader_6nlts"};
 require('./index.css');
 
 var TempBlock = function (_a) {

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

@@ -35,23 +35,23 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_as7bi {
+} .confirmation__component_6nlts {
     display: flex;
     flex-direction: column;
-} .confirmation__center_as7bi {
+} .confirmation__center_6nlts {
     align-items: center;
     text-align: center;
-} .confirmation__typographyTheme_as7bi.confirmation__typographyTheme_as7bi {
+} .confirmation__typographyTheme_6nlts.confirmation__typographyTheme_6nlts {
     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_as7bi.confirmation__description_as7bi {
+} .confirmation__description_6nlts.confirmation__description_6nlts {
     margin-bottom: var(--gap-xs);
-} .confirmation__countdownWrap_as7bi {
+} .confirmation__countdownWrap_6nlts {
     display: flex;
     align-items: center;
-} .confirmation__loader_as7bi {
+} .confirmation__loader_6nlts {
     margin-right: var(--gap-xs);
 }

package/confirmation/countdown-section-5f076d84.js

@@ -0,0 +1,47 @@
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsButton = require('../button');
+var coreComponentsSpinner = require('../spinner');
+var coreComponentsTypography = require('../typography');
+var context = require('./context.js');
+var utils = require('./utils.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"confirmation__component_199ht","typographyTheme":"confirmation__typographyTheme_199ht","phone":"confirmation__phone_199ht","compact":"confirmation__compact_199ht","loaderWrap":"confirmation__loaderWrap_199ht","left":"confirmation__left_199ht","center":"confirmation__center_199ht","codeInput":"confirmation__codeInput_199ht","smsBtn":"confirmation__smsBtn_199ht","smsComeLink":"confirmation__smsComeLink_199ht","countdownContainer":"confirmation__countdownContainer_199ht","countdownMobile":"confirmation__countdownMobile_199ht","countdownLoaderMobile":"confirmation__countdownLoaderMobile_199ht","getCodeButton":"confirmation__getCodeButton_199ht","getCodeButtonMobile":"confirmation__getCodeButtonMobile_199ht","containerInput":"confirmation__containerInput_199ht"};
+require('./components/screens/initial/index.css');
+
+var CountdownSection = function (_a) {
+    var _b, _c;
+    var codeSendHintVisible = _a.codeSendHintVisible, timePassed = _a.timePassed, processing = _a.processing, mobile = _a.mobile, handleSmsRetryClick = _a.handleSmsRetryClick;
+    var _d = React.useContext(context.ConfirmationContext), state = _d.state, texts = _d.texts, timeLeft = _d.timeLeft, blockSmsRetry = _d.blockSmsRetry, breakpoint = _d.breakpoint;
+    var renderText = function (text) {
+        var _a;
+        return (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: cn__default.default(styles.countdownContainer, (_a = {},
+                _a[styles.countdownMobile] = mobile,
+                _a[styles.typographyTheme] = !mobile,
+                _a)), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, text));
+    };
+    if (codeSendHintVisible)
+        return renderText(texts.codeSended);
+    if (processing) {
+        return (React__default.default.createElement("div", { className: cn__default.default(styles.loaderWrap, styles.countdownContainer, (_b = {},
+                _b[styles.countdownLoaderMobile] = mobile,
+                _b[styles.typographyTheme] = !mobile,
+                _b)) },
+            React__default.default.createElement(coreComponentsSpinner.Spinner, { visible: true }),
+            React__default.default.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry)
+        return renderText(texts.noAttemptsLeft);
+    if (timePassed) {
+        return (React__default.default.createElement(coreComponentsButton.Button, { size: mobile ? 'xs' : 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: cn__default.default(styles.getCodeButton, (_c = {}, _c[styles.getCodeButtonMobile] = mobile, _c)), breakpoint: breakpoint }, texts.buttonRetry));
+    }
+    return renderText("".concat(texts.countdown, " ").concat(utils.formatMsAsMinutes(timeLeft)));
+};
+
+exports.CountdownSection = CountdownSection;
+exports.styles = styles;

package/confirmation/esm/component.responsive.js

@@ -16,7 +16,7 @@ import '../../code-input/esm/mobile';
 import '../../link/esm';
 import '../../typography/esm';
 import './components/header/component.js';
-import './countdown-section-c7d064f4.js';
+import './countdown-section-a29855ee.js';
 import '../../button/esm';
 import '../../spinner/esm';
 import './components/screens/hint/component.js';

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

@@ -15,12 +15,12 @@ import '../../../../code-input/esm/mobile';
 import '../../../../link/esm';
 import '../../../../typography/esm';
 import '../header/component.js';
-import '../../countdown-section-c7d064f4.js';
+import '../../countdown-section-a29855ee.js';
 import '../../../../button/esm';
 import '../../../../spinner/esm';
 import '../countdown-loader/component.js';
 
-var styles = {"component":"confirmation__component_gc6pk"};
+var styles = {"component":"confirmation__component_1h6f6"};
 require('./index.css');
 
 var confirmationScreens = {

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

@@ -19,7 +19,7 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} .confirmation__component_gc6pk {
+} .confirmation__component_1h6f6 {
     width: 100%;
     max-width: 388px;
     margin: 0 auto;

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

@@ -13,7 +13,7 @@ import '../../../../code-input/esm/mobile';
 import '../../../../link/esm';
 import '../../../../typography/esm';
 import '../header/component.js';
-import '../../countdown-section-c7d064f4.js';
+import '../../countdown-section-a29855ee.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_y7lwk"};
+var styles = {"circle":"confirmation__circle_1fc9y"};
 require('./index.css');
 
 var SIZE = 16;