@alfalab/core-components-confirmation 15.0.3 → 15.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/component.responsive.d.ts +1 -1
  2. package/components/base-confirmation/component.js.map +1 -1
  3. package/components/base-confirmation/index.css +2 -2
  4. package/components/base-confirmation/index.module.css.js +1 -1
  5. package/components/base-confirmation/index.module.css.js.map +1 -1
  6. package/components/countdown-loader/component.d.ts +1 -1
  7. package/components/countdown-loader/index.css +1 -1
  8. package/components/countdown-loader/index.module.css.js +1 -1
  9. package/components/countdown-loader/index.module.css.js.map +1 -1
  10. package/components/header/component.d.ts +1 -1
  11. package/components/header/index.css +1 -1
  12. package/components/header/index.module.css.js +1 -1
  13. package/components/screens/fatal-error/component.d.ts +1 -1
  14. package/components/screens/fatal-error/index.css +6 -6
  15. package/components/screens/fatal-error/index.module.css.js +1 -1
  16. package/components/screens/hint/component.d.ts +1 -1
  17. package/components/screens/hint/index.css +12 -12
  18. package/components/screens/hint/index.module.css.js +1 -1
  19. package/components/screens/initial/component.d.ts +1 -1
  20. package/components/screens/initial/component.js.map +1 -1
  21. package/components/screens/initial/countdown-section.d.ts +1 -1
  22. package/components/screens/initial/countdown-section.js.map +1 -1
  23. package/components/screens/initial/index.css +19 -19
  24. package/components/screens/initial/index.module.css.js +1 -1
  25. package/components/screens/temp-block/component.d.ts +1 -1
  26. package/components/screens/temp-block/component.js.map +1 -1
  27. package/components/screens/temp-block/index.css +8 -8
  28. package/components/screens/temp-block/index.module.css.js +1 -1
  29. package/components/screens/temp-block-over/component.d.ts +1 -1
  30. package/components/screens/temp-block-over/index.css +5 -5
  31. package/components/screens/temp-block-over/index.module.css.js +1 -1
  32. package/context.d.ts +0 -1
  33. package/cssm/component.responsive.d.ts +1 -1
  34. package/cssm/components/base-confirmation/component.js.map +1 -1
  35. package/cssm/components/countdown-loader/component.d.ts +1 -1
  36. package/cssm/components/header/component.d.ts +1 -1
  37. package/cssm/components/screens/fatal-error/component.d.ts +1 -1
  38. package/cssm/components/screens/hint/component.d.ts +1 -1
  39. package/cssm/components/screens/initial/component.d.ts +1 -1
  40. package/cssm/components/screens/initial/component.js.map +1 -1
  41. package/cssm/components/screens/initial/countdown-section.d.ts +1 -1
  42. package/cssm/components/screens/initial/countdown-section.js.map +1 -1
  43. package/cssm/components/screens/temp-block/component.d.ts +1 -1
  44. package/cssm/components/screens/temp-block/component.js.map +1 -1
  45. package/cssm/components/screens/temp-block-over/component.d.ts +1 -1
  46. package/cssm/context.d.ts +0 -1
  47. package/cssm/desktop/component.desktop.d.ts +1 -1
  48. package/cssm/mobile/component.mobile.d.ts +1 -1
  49. package/cssm/types.d.ts +3 -3
  50. package/cssm/utils.d.ts +2 -3
  51. package/cssm/utils.js.map +1 -1
  52. package/desktop/component.desktop.d.ts +1 -1
  53. package/esm/component.responsive.d.ts +1 -1
  54. package/esm/components/base-confirmation/component.js.map +1 -1
  55. package/esm/components/base-confirmation/index.css +2 -2
  56. package/esm/components/base-confirmation/index.module.css.js +1 -1
  57. package/esm/components/base-confirmation/index.module.css.js.map +1 -1
  58. package/esm/components/countdown-loader/component.d.ts +1 -1
  59. package/esm/components/countdown-loader/index.css +1 -1
  60. package/esm/components/countdown-loader/index.module.css.js +1 -1
  61. package/esm/components/countdown-loader/index.module.css.js.map +1 -1
  62. package/esm/components/header/component.d.ts +1 -1
  63. package/esm/components/header/index.css +1 -1
  64. package/esm/components/header/index.module.css.js +1 -1
  65. package/esm/components/screens/fatal-error/component.d.ts +1 -1
  66. package/esm/components/screens/fatal-error/index.css +6 -6
  67. package/esm/components/screens/fatal-error/index.module.css.js +1 -1
  68. package/esm/components/screens/hint/component.d.ts +1 -1
  69. package/esm/components/screens/hint/index.css +12 -12
  70. package/esm/components/screens/hint/index.module.css.js +1 -1
  71. package/esm/components/screens/initial/component.d.ts +1 -1
  72. package/esm/components/screens/initial/component.js.map +1 -1
  73. package/esm/components/screens/initial/countdown-section.d.ts +1 -1
  74. package/esm/components/screens/initial/countdown-section.js.map +1 -1
  75. package/esm/components/screens/initial/index.css +19 -19
  76. package/esm/components/screens/initial/index.module.css.js +1 -1
  77. package/esm/components/screens/temp-block/component.d.ts +1 -1
  78. package/esm/components/screens/temp-block/component.js.map +1 -1
  79. package/esm/components/screens/temp-block/index.css +8 -8
  80. package/esm/components/screens/temp-block/index.module.css.js +1 -1
  81. package/esm/components/screens/temp-block-over/component.d.ts +1 -1
  82. package/esm/components/screens/temp-block-over/index.css +5 -5
  83. package/esm/components/screens/temp-block-over/index.module.css.js +1 -1
  84. package/esm/context.d.ts +0 -1
  85. package/esm/desktop/component.desktop.d.ts +1 -1
  86. package/esm/mobile/component.mobile.d.ts +1 -1
  87. package/esm/types.d.ts +3 -3
  88. package/esm/utils.d.ts +2 -3
  89. package/esm/utils.js.map +1 -1
  90. package/mobile/component.mobile.d.ts +1 -1
  91. package/modern/component.responsive.d.ts +1 -1
  92. package/modern/components/base-confirmation/component.js.map +1 -1
  93. package/modern/components/base-confirmation/index.css +2 -2
  94. package/modern/components/base-confirmation/index.module.css.js +1 -1
  95. package/modern/components/base-confirmation/index.module.css.js.map +1 -1
  96. package/modern/components/countdown-loader/component.d.ts +1 -1
  97. package/modern/components/countdown-loader/index.css +1 -1
  98. package/modern/components/countdown-loader/index.module.css.js +1 -1
  99. package/modern/components/countdown-loader/index.module.css.js.map +1 -1
  100. package/modern/components/header/component.d.ts +1 -1
  101. package/modern/components/header/index.css +1 -1
  102. package/modern/components/header/index.module.css.js +1 -1
  103. package/modern/components/screens/fatal-error/component.d.ts +1 -1
  104. package/modern/components/screens/fatal-error/index.css +6 -6
  105. package/modern/components/screens/fatal-error/index.module.css.js +1 -1
  106. package/modern/components/screens/hint/component.d.ts +1 -1
  107. package/modern/components/screens/hint/index.css +12 -12
  108. package/modern/components/screens/hint/index.module.css.js +1 -1
  109. package/modern/components/screens/initial/component.d.ts +1 -1
  110. package/modern/components/screens/initial/component.js.map +1 -1
  111. package/modern/components/screens/initial/countdown-section.d.ts +1 -1
  112. package/modern/components/screens/initial/countdown-section.js.map +1 -1
  113. package/modern/components/screens/initial/index.css +19 -19
  114. package/modern/components/screens/initial/index.module.css.js +1 -1
  115. package/modern/components/screens/temp-block/component.d.ts +1 -1
  116. package/modern/components/screens/temp-block/component.js.map +1 -1
  117. package/modern/components/screens/temp-block/index.css +8 -8
  118. package/modern/components/screens/temp-block/index.module.css.js +1 -1
  119. package/modern/components/screens/temp-block-over/component.d.ts +1 -1
  120. package/modern/components/screens/temp-block-over/index.css +5 -5
  121. package/modern/components/screens/temp-block-over/index.module.css.js +1 -1
  122. package/modern/context.d.ts +0 -1
  123. package/modern/desktop/component.desktop.d.ts +1 -1
  124. package/modern/mobile/component.mobile.d.ts +1 -1
  125. package/modern/types.d.ts +3 -3
  126. package/modern/utils.d.ts +2 -3
  127. package/modern/utils.js.map +1 -1
  128. package/moderncssm/component.responsive.d.ts +1 -1
  129. package/moderncssm/components/base-confirmation/component.js.map +1 -1
  130. package/moderncssm/components/countdown-loader/component.d.ts +1 -1
  131. package/moderncssm/components/header/component.d.ts +1 -1
  132. package/moderncssm/components/screens/fatal-error/component.d.ts +1 -1
  133. package/moderncssm/components/screens/hint/component.d.ts +1 -1
  134. package/moderncssm/components/screens/initial/component.d.ts +1 -1
  135. package/moderncssm/components/screens/initial/component.js.map +1 -1
  136. package/moderncssm/components/screens/initial/countdown-section.d.ts +1 -1
  137. package/moderncssm/components/screens/initial/countdown-section.js.map +1 -1
  138. package/moderncssm/components/screens/temp-block/component.d.ts +1 -1
  139. package/moderncssm/components/screens/temp-block/component.js.map +1 -1
  140. package/moderncssm/components/screens/temp-block-over/component.d.ts +1 -1
  141. package/moderncssm/context.d.ts +0 -1
  142. package/moderncssm/desktop/component.desktop.d.ts +1 -1
  143. package/moderncssm/mobile/component.mobile.d.ts +1 -1
  144. package/moderncssm/types.d.ts +3 -3
  145. package/moderncssm/utils.d.ts +2 -3
  146. package/moderncssm/utils.js.map +1 -1
  147. package/package.json +8 -8
  148. package/src/components/base-confirmation/index.module.css +1 -1
  149. package/src/components/countdown-loader/index.module.css +1 -1
  150. package/src/vars.css +1 -1
  151. package/types.d.ts +3 -3
  152. package/utils.d.ts +2 -2
  153. package/utils.js.map +1 -1
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- declare type Props = {
2
+ type Props = {
3
3
  progress: number;
4
4
  className?: string;
5
5
  };
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --color-light-neutral-500: #babbc2;
3
3
  }
4
- .confirmation__circle_1njn5 {
4
+ .confirmation__circle_19her {
5
5
  fill: transparent;
6
6
  stroke: var(--color-light-neutral-500);
7
7
  stroke-width: 2px;
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"circle":"confirmation__circle_1njn5"};
3
+ const styles = {"circle":"confirmation__circle_19her"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["../../src/components/countdown-loader/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-typography-index.css';\n\n.circle {\n fill: transparent;\n stroke: var(--color-light-neutral-500);\n stroke-width: 2px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,4BAA4B,CAAC;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["../../src/components/countdown-loader/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.circle {\n fill: transparent;\n stroke: var(--color-light-neutral-500);\n stroke-width: 2px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,QAAQ,CAAC,4BAA4B,CAAC;;;;"}
@@ -1,5 +1,5 @@
1
1
  import { type FC, type ReactNode } from 'react';
2
- export declare type HeaderProps = {
2
+ export type HeaderProps = {
3
3
  /**
4
4
  * Контент шапки
5
5
  */
@@ -2,6 +2,6 @@
2
2
  --gap-xl: 24px;
3
3
  --gap-24: var(--gap-xl);
4
4
  }
5
- .confirmation__header_tm0me.confirmation__header_tm0me {
5
+ .confirmation__header_1g6bf.confirmation__header_1g6bf {
6
6
  margin-bottom: var(--gap-24);
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"header":"confirmation__header_tm0me"};
3
+ const styles = {"header":"confirmation__header_1g6bf"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- export declare type FatalErrorProps = {
2
+ export type FatalErrorProps = {
3
3
  /**
4
4
  * Отображать в мобильной версии экран компонента
5
5
  */
@@ -13,27 +13,27 @@
13
13
  :root {
14
14
  --confirmation-text-color: var(--color-light-text-primary)
15
15
  }
16
- .confirmation__component_dn5ug {
16
+ .confirmation__component_134w7 {
17
17
  display: flex;
18
18
  flex-direction: column;
19
19
  }
20
- .confirmation__typographyTheme_dn5ug.confirmation__typographyTheme_dn5ug {
20
+ .confirmation__typographyTheme_134w7.confirmation__typographyTheme_134w7 {
21
21
  font-size: 16px;
22
22
  line-height: 24px;
23
23
  font-weight: 400;
24
24
  font-family: var(--font-family-system);
25
25
  color: var(--confirmation-text-color);
26
26
  }
27
- .confirmation__typographyThemeMobile_dn5ug.confirmation__typographyThemeMobile_dn5ug {
27
+ .confirmation__typographyThemeMobile_134w7.confirmation__typographyThemeMobile_134w7 {
28
28
  color: var(--color-light-text-secondary);
29
29
  }
30
- .confirmation__left_dn5ug {
30
+ .confirmation__left_134w7 {
31
31
  align-items: flex-start;
32
32
  }
33
- .confirmation__center_dn5ug {
33
+ .confirmation__center_134w7 {
34
34
  align-items: center;
35
35
  text-align: center;
36
36
  }
37
- .confirmation__button_dn5ug.confirmation__button_dn5ug {
37
+ .confirmation__button_134w7.confirmation__button_134w7 {
38
38
  margin-top: var(--gap-32);
39
39
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"confirmation__component_dn5ug","typographyTheme":"confirmation__typographyTheme_dn5ug","typographyThemeMobile":"confirmation__typographyThemeMobile_dn5ug","left":"confirmation__left_dn5ug","center":"confirmation__center_dn5ug","button":"confirmation__button_dn5ug"};
3
+ const styles = {"component":"confirmation__component_134w7","typographyTheme":"confirmation__typographyTheme_134w7","typographyThemeMobile":"confirmation__typographyThemeMobile_134w7","left":"confirmation__left_134w7","center":"confirmation__center_134w7","button":"confirmation__button_134w7"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- export declare type HintProps = {
2
+ export type HintProps = {
3
3
  /**
4
4
  * Отображать в мобильной версии экран компонента
5
5
  */
@@ -18,52 +18,52 @@
18
18
  :root {
19
19
  --confirmation-text-color: var(--color-light-text-primary)
20
20
  }
21
- .confirmation__component_1ohce {
21
+ .confirmation__component_id3gu {
22
22
  display: flex;
23
23
  flex-direction: column;
24
24
  align-items: flex-start;
25
25
  }
26
- .confirmation__component_1ohce span:last-of-type {
26
+ .confirmation__component_id3gu span:last-of-type {
27
27
  margin-bottom: var(--gap-0);
28
28
  }
29
- .confirmation__center_1ohce {
29
+ .confirmation__center_id3gu {
30
30
  align-items: center;
31
31
  text-align: center;
32
32
  }
33
- .confirmation__text_1ohce.confirmation__text_1ohce {
33
+ .confirmation__text_id3gu.confirmation__text_id3gu {
34
34
  margin-bottom: var(--gap-24);
35
35
  }
36
- .confirmation__typographyTheme_1ohce.confirmation__typographyTheme_1ohce {
36
+ .confirmation__typographyTheme_id3gu.confirmation__typographyTheme_id3gu {
37
37
  font-size: 16px;
38
38
  line-height: 24px;
39
39
  font-weight: 400;
40
40
  font-family: var(--font-family-system);
41
41
  color: var(--confirmation-text-color);
42
42
  }
43
- .confirmation__typographyThemeMobile_1ohce.confirmation__typographyThemeMobile_1ohce {
43
+ .confirmation__typographyThemeMobile_id3gu.confirmation__typographyThemeMobile_id3gu {
44
44
  color: var(--color-light-text-secondary);
45
45
  }
46
- .confirmation__phonesWrap_1ohce {
46
+ .confirmation__phonesWrap_id3gu {
47
47
  display: flex;
48
48
  flex-direction: column;
49
49
  margin-bottom: var(--gap-24);
50
50
  }
51
- .confirmation__phoneWrap_1ohce {
51
+ .confirmation__phoneWrap_id3gu {
52
52
  margin-bottom: var(--gap-8);
53
53
  }
54
- .confirmation__phoneWrap_1ohce:last-child {
54
+ .confirmation__phoneWrap_id3gu:last-child {
55
55
  margin-bottom: var(--gap-0);
56
56
  }
57
- .confirmation__phoneLink_1ohce.confirmation__phoneLink_1ohce {
57
+ .confirmation__phoneLink_id3gu.confirmation__phoneLink_id3gu {
58
58
  font-size: 16px;
59
59
  line-height: 24px;
60
60
  font-weight: 500;
61
61
  font-family: var(--font-family-system);
62
62
  }
63
- .confirmation__hintButton_1ohce {
63
+ .confirmation__hintButton_id3gu {
64
64
  margin-top: var(--gap-32);
65
65
  }
66
- .confirmation__phoneContentMobile_1ohce {
66
+ .confirmation__phoneContentMobile_id3gu {
67
67
  display: flex;
68
68
  flex-direction: column;
69
69
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"confirmation__component_1ohce","center":"confirmation__center_1ohce","text":"confirmation__text_1ohce","typographyTheme":"confirmation__typographyTheme_1ohce","typographyThemeMobile":"confirmation__typographyThemeMobile_1ohce","phonesWrap":"confirmation__phonesWrap_1ohce","phoneWrap":"confirmation__phoneWrap_1ohce","phoneLink":"confirmation__phoneLink_1ohce","hintButton":"confirmation__hintButton_1ohce","phoneContentMobile":"confirmation__phoneContentMobile_1ohce"};
3
+ const styles = {"component":"confirmation__component_id3gu","center":"confirmation__center_id3gu","text":"confirmation__text_id3gu","typographyTheme":"confirmation__typographyTheme_id3gu","typographyThemeMobile":"confirmation__typographyThemeMobile_id3gu","phonesWrap":"confirmation__phonesWrap_id3gu","phoneWrap":"confirmation__phoneWrap_id3gu","phoneLink":"confirmation__phoneLink_id3gu","hintButton":"confirmation__hintButton_id3gu","phoneContentMobile":"confirmation__phoneContentMobile_id3gu"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- export declare type InitialProps = {
2
+ export type InitialProps = {
3
3
  /**
4
4
  * Отображать в мобильной версии экран компонента
5
5
  */
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n type BaseCodeInputProps,\n type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n const {\n state,\n alignContent,\n titleTag,\n texts,\n requiredCharAmount,\n timeLeft,\n phone,\n clearCodeOnError,\n hideCountdownSection,\n initialScreenHintSlot,\n errorVisibleDuration,\n onChangeState,\n onInputFinished,\n onChangeScreen,\n onSmsRetryClick,\n } = useContext(ConfirmationContext);\n\n const prevState = usePrevious(state);\n\n const inputRef = useRef<CustomInputRef>(null);\n\n const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n const timerId = useRef(0);\n\n const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n onInputFinished(code);\n };\n\n const handleSmsHintLinkClick = () => {\n onChangeScreen('HINT');\n };\n\n const handleInputChange = () => {\n if (state === 'CODE_ERROR') {\n onChangeState('INITIAL');\n }\n };\n\n const handleSmsRetryClick = () => {\n if (inputRef.current) {\n inputRef.current.reset();\n }\n\n onSmsRetryClick();\n };\n\n const handleErrorAnimationEnd = () => {\n if (clearCodeOnError && state !== 'INITIAL') {\n onChangeState('INITIAL');\n }\n };\n\n const clearTimer = useCallback(() => {\n window.clearTimeout(timerId.current);\n }, []);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n return () => {\n clearTimer();\n };\n }, [clearTimer]);\n\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n inputRef.current.focus();\n }\n }, [prevState, state, requiredCharAmount]);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n setCodeSendHintVisible(true);\n\n clearTimer();\n\n timerId.current = window.setTimeout(() => {\n setCodeSendHintVisible(false);\n }, CODE_SEND_HINT_VISIBLE_DURATION);\n }\n }, [prevState, state, clearTimer]);\n\n const getCodeInputError = (): string | boolean => {\n if (state === 'CODE_EXPIRED') {\n return texts.codeErrorExpired || true;\n }\n\n if (state === 'CODE_EXPIRED_ENDED') {\n return texts.codeErrorExpiredEnded || true;\n }\n\n if (state === 'CODE_ERROR') {\n return texts.codeError || true;\n }\n\n return false;\n };\n\n const renderHintButton = () => {\n if (initialScreenHintSlot) {\n return initialScreenHintSlot;\n }\n\n if (mobile) {\n return (\n <ButtonMobile\n onClick={handleSmsHintLinkClick}\n className={styles.smsBtn}\n view='text'\n size={40}\n >\n {texts.linkToHint}\n </ButtonMobile>\n );\n }\n\n return (\n <Link\n onClick={handleSmsHintLinkClick}\n className={styles.smsComeLink}\n view={mobile ? 'primary' : 'secondary'}\n pseudo={true}\n >\n {texts.linkToHint}\n </Link>\n );\n };\n\n const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n const timePassed = timeLeft === 0;\n\n const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.title}\n </Header>\n\n {phone ? (\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.phone, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n Отправили на {phone}\n </TypographyText>\n ) : null}\n <ComponentCodeInput\n disabled={processing}\n error={getCodeInputError()}\n ref={inputRef}\n fields={requiredCharAmount}\n className={cn(styles.containerInput, styles.codeInput)}\n onComplete={handleInputComplete}\n onChange={handleInputChange}\n clearCodeOnError={clearCodeOnError}\n errorVisibleDuration={errorVisibleDuration}\n onErrorAnimationEnd={handleErrorAnimationEnd}\n />\n {!hideCountdownSection && (\n <CountdownSection\n processing={processing}\n timePassed={timePassed}\n codeSendHintVisible={codeSendHintVisible}\n handleSmsRetryClick={handleSmsRetryClick}\n mobile={mobile}\n />\n )}\n\n {renderHintButton()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n type BaseCodeInputProps,\n type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n const {\n state,\n alignContent,\n titleTag,\n texts,\n requiredCharAmount,\n timeLeft,\n phone,\n clearCodeOnError,\n hideCountdownSection,\n initialScreenHintSlot,\n errorVisibleDuration,\n onChangeState,\n onInputFinished,\n onChangeScreen,\n onSmsRetryClick,\n } = useContext(ConfirmationContext);\n\n const prevState = usePrevious(state);\n\n const inputRef = useRef<CustomInputRef>(null);\n\n const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n const timerId = useRef(0);\n\n const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n onInputFinished(code);\n };\n\n const handleSmsHintLinkClick = () => {\n onChangeScreen('HINT');\n };\n\n const handleInputChange = () => {\n if (state === 'CODE_ERROR') {\n onChangeState('INITIAL');\n }\n };\n\n const handleSmsRetryClick = () => {\n if (inputRef.current) {\n inputRef.current.reset();\n }\n\n onSmsRetryClick();\n };\n\n const handleErrorAnimationEnd = () => {\n if (clearCodeOnError && state !== 'INITIAL') {\n onChangeState('INITIAL');\n }\n };\n\n const clearTimer = useCallback(() => {\n window.clearTimeout(timerId.current);\n }, []);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n return () => {\n clearTimer();\n };\n }, [clearTimer]);\n\n useEffect(() => {\n if (!inputRef.current) {\n return;\n }\n\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n inputRef.current.focus();\n }\n }, [prevState, state, requiredCharAmount]);\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n setCodeSendHintVisible(true);\n\n clearTimer();\n\n timerId.current = window.setTimeout(() => {\n setCodeSendHintVisible(false);\n }, CODE_SEND_HINT_VISIBLE_DURATION);\n }\n }, [prevState, state, clearTimer]);\n\n const getCodeInputError = (): string | boolean => {\n if (state === 'CODE_EXPIRED') {\n return texts.codeErrorExpired || true;\n }\n\n if (state === 'CODE_EXPIRED_ENDED') {\n return texts.codeErrorExpiredEnded || true;\n }\n\n if (state === 'CODE_ERROR') {\n return texts.codeError || true;\n }\n\n return false;\n };\n\n const renderHintButton = () => {\n if (initialScreenHintSlot) {\n return initialScreenHintSlot;\n }\n\n if (mobile) {\n return (\n <ButtonMobile\n onClick={handleSmsHintLinkClick}\n className={styles.smsBtn}\n view='text'\n size={40}\n >\n {texts.linkToHint}\n </ButtonMobile>\n );\n }\n\n return (\n <Link\n onClick={handleSmsHintLinkClick}\n className={styles.smsComeLink}\n view={mobile ? 'primary' : 'secondary'}\n pseudo={true}\n >\n {texts.linkToHint}\n </Link>\n );\n };\n\n const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n const timePassed = timeLeft === 0;\n\n const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.title}\n </Header>\n\n {phone ? (\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.phone, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n Отправили на {phone}\n </TypographyText>\n ) : null}\n <ComponentCodeInput\n disabled={processing}\n error={getCodeInputError()}\n ref={inputRef}\n fields={requiredCharAmount}\n className={cn(styles.containerInput, styles.codeInput)}\n onComplete={handleInputComplete}\n onChange={handleInputChange}\n clearCodeOnError={clearCodeOnError}\n errorVisibleDuration={errorVisibleDuration}\n onErrorAnimationEnd={handleErrorAnimationEnd}\n />\n {!hideCountdownSection && (\n <CountdownSection\n processing={processing}\n timePassed={timePassed}\n codeSendHintVisible={codeSendHintVisible}\n handleSmsRetryClick={handleSmsRetryClick}\n mobile={mobile}\n />\n )}\n\n {renderHintButton()}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- declare type CountdownSectionProps = {
2
+ type CountdownSectionProps = {
3
3
  codeSendHintVisible: boolean;
4
4
  timePassed: boolean;
5
5
  processing: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n codeSendHintVisible: boolean;\n timePassed: boolean;\n processing: boolean;\n mobile?: boolean;\n handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n codeSendHintVisible,\n timePassed,\n processing,\n mobile,\n handleSmsRetryClick,\n}) => {\n const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n useContext(ConfirmationContext);\n\n const renderText = (content: ReactNode) => (\n <TypographyText\n className={cn(styles.countdownContainer, {\n [styles.countdownMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n view={mobile ? 'primary-small' : 'primary-medium'}\n tag='div'\n >\n {content}\n </TypographyText>\n );\n\n if (codeSendHintVisible) return renderText(texts.codeSended);\n\n if (processing) {\n return (\n <div\n className={cn(styles.loaderWrap, styles.countdownContainer, {\n [styles.countdownLoaderMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n >\n <Spinner preset={24} visible={true} />\n\n <span className={styles.loaderText}>\n {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n </span>\n </div>\n );\n }\n\n if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n if (timePassed) {\n return (\n <Button\n size={mobile ? 40 : 32}\n view='secondary'\n onClick={handleSmsRetryClick}\n className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n breakpoint={breakpoint}\n client={client}\n >\n {texts.buttonRetry}\n </Button>\n );\n }\n\n return renderText(\n <Fragment>\n {texts.countdown}\n {'\\u00A0'}\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </Fragment>,\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACK,CACpB;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAE5D,IAAA,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;AAEb;AAED,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;AAE1D,IAAA,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,EACtB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;AAEhB;IAED,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}
1
+ {"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n codeSendHintVisible: boolean;\n timePassed: boolean;\n processing: boolean;\n mobile?: boolean;\n handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n codeSendHintVisible,\n timePassed,\n processing,\n mobile,\n handleSmsRetryClick,\n}) => {\n const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n useContext(ConfirmationContext);\n\n const renderText = (content: ReactNode) => (\n <TypographyText\n className={cn(styles.countdownContainer, {\n [styles.countdownMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n view={mobile ? 'primary-small' : 'primary-medium'}\n tag='div'\n >\n {content}\n </TypographyText>\n );\n\n if (codeSendHintVisible) return renderText(texts.codeSended);\n\n if (processing) {\n return (\n <div\n className={cn(styles.loaderWrap, styles.countdownContainer, {\n [styles.countdownLoaderMobile]: mobile,\n [styles.typographyTheme]: !mobile,\n })}\n >\n <Spinner preset={24} visible={true} />\n\n <span className={styles.loaderText}>\n {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n </span>\n </div>\n );\n }\n\n if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n if (timePassed) {\n return (\n <Button\n size={mobile ? 40 : 32}\n view='secondary'\n onClick={handleSmsRetryClick}\n className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n breakpoint={breakpoint}\n client={client}\n >\n {texts.buttonRetry}\n </Button>\n );\n }\n\n return renderText(\n <Fragment>\n {texts.countdown}\n {'\\u00A0'}\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </Fragment>,\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACK,CACpB;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;IAE5D,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;;AAId,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;IAE1D,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,EACtB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;;IAIjB,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}
@@ -27,64 +27,64 @@
27
27
  :root {
28
28
  --confirmation-text-color: var(--color-light-text-primary)
29
29
  }
30
- .confirmation__component_wi31u {
30
+ .confirmation__component_1b20n {
31
31
  display: flex;
32
32
  flex-direction: column;
33
33
  }
34
- .confirmation__phone_wi31u.confirmation__phone_wi31u {
34
+ .confirmation__phone_1b20n.confirmation__phone_1b20n {
35
35
  color: var(--color-light-text-primary);
36
36
  margin-bottom: var(--gap-32);
37
37
  }
38
- .confirmation__typographyTheme_wi31u.confirmation__typographyTheme_wi31u {
38
+ .confirmation__typographyTheme_1b20n.confirmation__typographyTheme_1b20n {
39
39
  font-size: 16px;
40
40
  line-height: 24px;
41
41
  font-weight: 400;
42
42
  font-family: var(--font-family-system);
43
43
  color: var(--confirmation-text-color);
44
44
  }
45
- .confirmation__typographyThemeMobile_wi31u.confirmation__typographyThemeMobile_wi31u {
45
+ .confirmation__typographyThemeMobile_1b20n.confirmation__typographyThemeMobile_1b20n {
46
46
  color: var(--color-light-text-secondary);
47
47
  }
48
- .confirmation__compact_wi31u {
48
+ .confirmation__compact_1b20n {
49
49
  margin-bottom: var(--gap-24);
50
50
  }
51
- .confirmation__loaderWrap_wi31u {
51
+ .confirmation__loaderWrap_1b20n {
52
52
  display: flex;
53
53
  align-items: center;
54
54
  }
55
- .confirmation__left_wi31u {
55
+ .confirmation__left_1b20n {
56
56
  align-items: flex-start;
57
57
  }
58
- .confirmation__center_wi31u {
58
+ .confirmation__center_1b20n {
59
59
  align-items: center;
60
60
  text-align: center;
61
61
  }
62
- .confirmation__center_wi31u .confirmation__loaderWrap_wi31u {
62
+ .confirmation__center_1b20n .confirmation__loaderWrap_1b20n {
63
63
  justify-content: center;
64
64
  }
65
- .confirmation__codeInput_wi31u {
65
+ .confirmation__codeInput_1b20n {
66
66
  margin-bottom: var(--gap-12);
67
67
  }
68
- .confirmation__smsBtn_wi31u.confirmation__smsBtn_wi31u {
68
+ .confirmation__smsBtn_1b20n.confirmation__smsBtn_1b20n {
69
69
  min-height: var(--size-xs-height);
70
70
  }
71
- .confirmation__smsComeLink_wi31u.confirmation__smsComeLink_wi31u {
71
+ .confirmation__smsComeLink_1b20n.confirmation__smsComeLink_1b20n {
72
72
  font-size: 14px;
73
73
  line-height: 20px;
74
74
  font-weight: 500;
75
75
  font-family: var(--font-family-system);
76
76
  }
77
- .confirmation__countdownContainer_wi31u.confirmation__countdownContainer_wi31u {
77
+ .confirmation__countdownContainer_1b20n.confirmation__countdownContainer_1b20n {
78
78
  color: var(--color-light-text-secondary);
79
79
  margin-bottom: var(--gap-24);
80
80
  }
81
- .confirmation__countdownMobile_wi31u.confirmation__countdownMobile_wi31u {
81
+ .confirmation__countdownMobile_1b20n.confirmation__countdownMobile_1b20n {
82
82
  margin-bottom: var(--gap-20);
83
83
  }
84
- .confirmation__countdownLoaderMobile_wi31u.confirmation__countdownLoaderMobile_wi31u {
84
+ .confirmation__countdownLoaderMobile_1b20n.confirmation__countdownLoaderMobile_1b20n {
85
85
  margin-bottom: var(--gap-16);
86
86
  }
87
- .confirmation__timeCounter_wi31u {
87
+ .confirmation__timeCounter_1b20n {
88
88
  display: inline-block;
89
89
  min-width: 47px;
90
90
  color: var(--color-light-text-secondary);
@@ -92,14 +92,14 @@
92
92
  font-feature-settings: lining-nums tabular-nums;
93
93
  font-variant-numeric: lining-nums tabular-nums;
94
94
  }
95
- .confirmation__getCodeButton_wi31u {
95
+ .confirmation__getCodeButton_1b20n {
96
96
  position: relative;
97
97
  top: var(--gap-4-neg);
98
98
  margin-bottom: var(--gap-16);
99
99
  }
100
- .confirmation__getCodeButtonMobile_wi31u {
100
+ .confirmation__getCodeButtonMobile_1b20n {
101
101
  margin-bottom: var(--gap-0);
102
102
  }
103
- .confirmation__containerInput_wi31u {
103
+ .confirmation__containerInput_1b20n {
104
104
  min-height: 80px;
105
105
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"confirmation__component_wi31u","phone":"confirmation__phone_wi31u","typographyTheme":"confirmation__typographyTheme_wi31u","typographyThemeMobile":"confirmation__typographyThemeMobile_wi31u","compact":"confirmation__compact_wi31u","loaderWrap":"confirmation__loaderWrap_wi31u","left":"confirmation__left_wi31u","center":"confirmation__center_wi31u","codeInput":"confirmation__codeInput_wi31u","smsBtn":"confirmation__smsBtn_wi31u","smsComeLink":"confirmation__smsComeLink_wi31u","countdownContainer":"confirmation__countdownContainer_wi31u","countdownMobile":"confirmation__countdownMobile_wi31u","countdownLoaderMobile":"confirmation__countdownLoaderMobile_wi31u","timeCounter":"confirmation__timeCounter_wi31u","getCodeButton":"confirmation__getCodeButton_wi31u","getCodeButtonMobile":"confirmation__getCodeButtonMobile_wi31u","containerInput":"confirmation__containerInput_wi31u"};
3
+ const styles = {"component":"confirmation__component_1b20n","phone":"confirmation__phone_1b20n","typographyTheme":"confirmation__typographyTheme_1b20n","typographyThemeMobile":"confirmation__typographyThemeMobile_1b20n","compact":"confirmation__compact_1b20n","loaderWrap":"confirmation__loaderWrap_1b20n","left":"confirmation__left_1b20n","center":"confirmation__center_1b20n","codeInput":"confirmation__codeInput_1b20n","smsBtn":"confirmation__smsBtn_1b20n","smsComeLink":"confirmation__smsComeLink_1b20n","countdownContainer":"confirmation__countdownContainer_1b20n","countdownMobile":"confirmation__countdownMobile_1b20n","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1b20n","timeCounter":"confirmation__timeCounter_1b20n","getCodeButton":"confirmation__getCodeButton_1b20n","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1b20n","containerInput":"confirmation__containerInput_1b20n"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- export declare type TempBlockProps = {
2
+ export type TempBlockProps = {
3
3
  /**
4
4
  * Отображать в мобильной версии экран компонента
5
5
  */
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n const {\n alignContent,\n titleTag,\n texts,\n tempBlockDuration,\n onChangeScreen,\n onTempBlockFinished,\n } = useContext(ConfirmationContext);\n\n const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n if (timeLeft === 0 && onTempBlockFinished) {\n onTempBlockFinished();\n }\n }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.tempBlockTitle}\n </Header>\n\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.description, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n {texts.tempBlockDescription}\n </TypographyText>\n\n <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n <CountdownLoader\n progress={1 - timeLeft / tempBlockDuration}\n className={styles.loader}\n />\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;MAmBa,SAAS,GAAuB,CAAC,EAAE,MAAM,EAAE,KAAI;AACxD,IAAA,MAAM,EACF,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,GAAG,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;IAE9D,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE;AACxB;KACJ,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC;AAEnD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,cAAc,CAChB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,oBAAoB,CACd;AAEjB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM,EAAE,CAAC,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,CAAC,GAAG,QAAQ,GAAG,iBAAiB,EAC1C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,EAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CACvE,CACJ;AAEd;;;;"}
1
+ {"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n /**\n * Отображать в мобильной версии экран компонента\n */\n mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n const {\n alignContent,\n titleTag,\n texts,\n tempBlockDuration,\n onChangeScreen,\n onTempBlockFinished,\n } = useContext(ConfirmationContext);\n\n const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n useEffect(() => {\n startTimer();\n }, [startTimer]);\n\n useEffect(() => {\n if (timeLeft === 0 && onTempBlockFinished) {\n onTempBlockFinished();\n }\n }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n return (\n <div className={cn(styles.component, styles[alignContent])}>\n <Header mobile={mobile} titleTag={titleTag}>\n {texts.tempBlockTitle}\n </Header>\n\n <TypographyText\n view='primary-medium'\n color='primary'\n className={cn(styles.description, {\n [styles.typographyTheme]: !mobile,\n [styles.typographyThemeMobile]: mobile,\n })}\n >\n {texts.tempBlockDescription}\n </TypographyText>\n\n <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n <CountdownLoader\n progress={1 - timeLeft / tempBlockDuration}\n className={styles.loader}\n />\n <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;MAmBa,SAAS,GAAuB,CAAC,EAAE,MAAM,EAAE,KAAI;AACxD,IAAA,MAAM,EACF,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,GAAG,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;IAE9D,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE;;KAE5B,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC;AAEnD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,cAAc,CAChB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EACX,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,oBAAoB,CACd;AAEjB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM,EAAE,CAAC,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,CAAC,GAAG,QAAQ,GAAG,iBAAiB,EAC1C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,EAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CACvE,CACJ;AAEd;;;;"}
@@ -13,32 +13,32 @@
13
13
  :root {
14
14
  --confirmation-text-color: var(--color-light-text-primary)
15
15
  }
16
- .confirmation__component_t3lv4 {
16
+ .confirmation__component_me36e {
17
17
  display: flex;
18
18
  flex-direction: column;
19
19
  }
20
- .confirmation__center_t3lv4 {
20
+ .confirmation__center_me36e {
21
21
  align-items: center;
22
22
  text-align: center;
23
23
  }
24
- .confirmation__typographyTheme_t3lv4.confirmation__typographyTheme_t3lv4 {
24
+ .confirmation__typographyTheme_me36e.confirmation__typographyTheme_me36e {
25
25
  font-size: 16px;
26
26
  line-height: 24px;
27
27
  font-weight: 400;
28
28
  font-family: var(--font-family-system);
29
29
  color: var(--confirmation-text-color);
30
30
  }
31
- .confirmation__typographyThemeMobile_t3lv4.confirmation__typographyThemeMobile_t3lv4 {
31
+ .confirmation__typographyThemeMobile_me36e.confirmation__typographyThemeMobile_me36e {
32
32
  color: var(--color-light-text-secondary);
33
33
  }
34
- .confirmation__description_t3lv4.confirmation__description_t3lv4 {
34
+ .confirmation__description_me36e.confirmation__description_me36e {
35
35
  margin-bottom: var(--gap-8);
36
36
  }
37
- .confirmation__countdownWrap_t3lv4 {
37
+ .confirmation__countdownWrap_me36e {
38
38
  display: flex;
39
39
  align-items: center;
40
40
  }
41
- .confirmation__timeCounter_t3lv4 {
41
+ .confirmation__timeCounter_me36e {
42
42
  display: inline-block;
43
43
  min-width: 47px;
44
44
  color: var(--color-light-text-secondary);
@@ -46,6 +46,6 @@
46
46
  font-feature-settings: lining-nums tabular-nums;
47
47
  font-variant-numeric: lining-nums tabular-nums;
48
48
  }
49
- .confirmation__loader_t3lv4 {
49
+ .confirmation__loader_me36e {
50
50
  margin-right: var(--gap-8);
51
51
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"confirmation__component_t3lv4","center":"confirmation__center_t3lv4","typographyTheme":"confirmation__typographyTheme_t3lv4","typographyThemeMobile":"confirmation__typographyThemeMobile_t3lv4","description":"confirmation__description_t3lv4","countdownWrap":"confirmation__countdownWrap_t3lv4","timeCounter":"confirmation__timeCounter_t3lv4","loader":"confirmation__loader_t3lv4"};
3
+ const styles = {"component":"confirmation__component_me36e","center":"confirmation__center_me36e","typographyTheme":"confirmation__typographyTheme_me36e","typographyThemeMobile":"confirmation__typographyThemeMobile_me36e","description":"confirmation__description_me36e","countdownWrap":"confirmation__countdownWrap_me36e","timeCounter":"confirmation__timeCounter_me36e","loader":"confirmation__loader_me36e"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,5 +1,5 @@
1
1
  import { type FC } from 'react';
2
- export declare type TempBlockOverProps = {
2
+ export type TempBlockOverProps = {
3
3
  /**
4
4
  * Отображать в мобильной версии экран компонента
5
5
  */
@@ -13,24 +13,24 @@
13
13
  :root {
14
14
  --confirmation-text-color: var(--color-light-text-primary)
15
15
  }
16
- .confirmation__component_12w3p {
16
+ .confirmation__component_zlep4 {
17
17
  display: flex;
18
18
  flex-direction: column;
19
19
  }
20
- .confirmation__center_12w3p {
20
+ .confirmation__center_zlep4 {
21
21
  align-items: center;
22
22
  text-align: center;
23
23
  }
24
- .confirmation__typographyTheme_12w3p.confirmation__typographyTheme_12w3p {
24
+ .confirmation__typographyTheme_zlep4.confirmation__typographyTheme_zlep4 {
25
25
  font-size: 16px;
26
26
  line-height: 24px;
27
27
  font-weight: 400;
28
28
  font-family: var(--font-family-system);
29
29
  color: var(--confirmation-text-color);
30
30
  }
31
- .confirmation__typographyThemeMobile_12w3p.confirmation__typographyThemeMobile_12w3p {
31
+ .confirmation__typographyThemeMobile_zlep4.confirmation__typographyThemeMobile_zlep4 {
32
32
  color: var(--color-light-text-secondary);
33
33
  }
34
- .confirmation__button_12w3p.confirmation__button_12w3p {
34
+ .confirmation__button_zlep4.confirmation__button_zlep4 {
35
35
  margin-top: var(--gap-32);
36
36
  }
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"confirmation__component_12w3p","center":"confirmation__center_12w3p","typographyTheme":"confirmation__typographyTheme_12w3p","typographyThemeMobile":"confirmation__typographyThemeMobile_12w3p","button":"confirmation__button_12w3p"};
3
+ const styles = {"component":"confirmation__component_zlep4","center":"confirmation__center_zlep4","typographyTheme":"confirmation__typographyTheme_zlep4","typographyThemeMobile":"confirmation__typographyThemeMobile_zlep4","button":"confirmation__button_zlep4"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { type TConfirmationContext } from './types';
3
2
  export declare const ConfirmationContext: import("react").Context<TConfirmationContext>;
@@ -1,4 +1,4 @@
1
1
  import { type FC } from 'react';
2
2
  import { type ConfirmationProps } from '../types';
3
- export declare type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
3
+ export type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
4
4
  export declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
@@ -1,4 +1,4 @@
1
1
  import { type FC } from 'react';
2
2
  import { type ConfirmationProps } from '../types';
3
- export declare type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
3
+ export type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
4
4
  export declare const ConfirmationMobile: FC<MobileConfirmationProps>;
package/modern/types.d.ts CHANGED
@@ -118,7 +118,7 @@ export interface ConfirmationProps {
118
118
  */
119
119
  errorVisibleDuration?: number;
120
120
  }
121
- export declare type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
121
+ export type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
122
122
  timeLeft: number;
123
123
  };
124
124
  export interface ConfirmationTexts {
@@ -163,8 +163,8 @@ export interface ConfirmationTexts {
163
163
  tempBlockOverDescription?: ReactNode;
164
164
  tempBlockOverButton?: string;
165
165
  }
166
- export declare type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
167
- export declare type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
166
+ export type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
167
+ export type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
168
168
  export interface ScreensMap {
169
169
  [key: string]: ComponentType;
170
170
  }
package/modern/utils.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { type ConfirmationProps } from './types';
3
2
  /**
4
3
  * Форматирование миллисекунд в hh:mm:ss.
@@ -7,14 +6,14 @@ import { type ConfirmationProps } from './types';
7
6
  * @returns {String} время в формате mm:ss
8
7
  */
9
8
  export declare function formatMsAsMinutes(ms: number): string;
10
- declare type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
9
+ type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
11
10
  /**
12
11
  * Возвращает время, которое осталось до истечения таймера в ms
13
12
  */
14
13
  export declare const useCountdown: UseCountdown;
15
14
  export declare const ONE_DAY: number;
16
15
  export declare const ONE_MINUTE: number;
17
- declare type UseConfirmationParams = {
16
+ type UseConfirmationParams = {
18
17
  state?: ConfirmationProps['state'];
19
18
  screen?: ConfirmationProps['screen'];
20
19
  blockSmsRetry?: ConfirmationProps['blockSmsRetry'];