@alfalab/core-components-confirmation 8.4.0 → 9.0.1

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 (40) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/dist/component.js +1 -1
  3. package/dist/components/code-input/component.js +2 -1
  4. package/dist/components/code-input/index.css +13 -9
  5. package/dist/components/countdown/component.js +1 -1
  6. package/dist/components/countdown/index.css +13 -13
  7. package/dist/components/countdown-loader/component.js +1 -1
  8. package/dist/components/countdown-loader/index.css +2 -2
  9. package/dist/components/overlimit/component.js +1 -1
  10. package/dist/components/overlimit/index.css +9 -9
  11. package/dist/components/sign-confirmation/component.js +1 -1
  12. package/dist/components/sign-confirmation/index.css +13 -13
  13. package/dist/cssm/components/code-input/component.js +1 -0
  14. package/dist/cssm/components/code-input/index.module.css +4 -0
  15. package/dist/esm/component.js +1 -1
  16. package/dist/esm/components/code-input/component.js +2 -1
  17. package/dist/esm/components/code-input/index.css +13 -9
  18. package/dist/esm/components/countdown/component.js +1 -1
  19. package/dist/esm/components/countdown/index.css +13 -13
  20. package/dist/esm/components/countdown-loader/component.js +1 -1
  21. package/dist/esm/components/countdown-loader/index.css +2 -2
  22. package/dist/esm/components/overlimit/component.js +1 -1
  23. package/dist/esm/components/overlimit/index.css +9 -9
  24. package/dist/esm/components/sign-confirmation/component.js +1 -1
  25. package/dist/esm/components/sign-confirmation/index.css +13 -13
  26. package/dist/esm/index.css +14 -14
  27. package/dist/index.css +14 -14
  28. package/dist/modern/component.js +1 -1
  29. package/dist/modern/components/code-input/component.js +2 -1
  30. package/dist/modern/components/code-input/index.css +13 -9
  31. package/dist/modern/components/countdown/component.js +1 -1
  32. package/dist/modern/components/countdown/index.css +13 -13
  33. package/dist/modern/components/countdown-loader/component.js +1 -1
  34. package/dist/modern/components/countdown-loader/index.css +2 -2
  35. package/dist/modern/components/overlimit/component.js +1 -1
  36. package/dist/modern/components/overlimit/index.css +9 -9
  37. package/dist/modern/components/sign-confirmation/component.js +1 -1
  38. package/dist/modern/components/sign-confirmation/index.css +13 -13
  39. package/dist/modern/index.css +14 -14
  40. package/package.json +7 -7
@@ -1,4 +1,4 @@
1
- /* hash: 19t4o */
1
+ /* hash: e7tjx */
2
2
  :root {
3
3
  --color-static-status-red: #d91d0b;
4
4
  }
@@ -45,12 +45,12 @@
45
45
 
46
46
  /* input */
47
47
  }
48
- .confirmation__component_19t4o {
48
+ .confirmation__component_ze27g {
49
49
  display: flex;
50
50
  flex-direction: column;
51
51
  align-items: center;
52
52
  }
53
- .confirmation__title_19t4o {
53
+ .confirmation__title_ze27g {
54
54
  font-size: var(--confirmation-title-font-size);
55
55
  line-height: var(--confirmation-title-line-height);
56
56
  font-weight: var(--confirmation-title-font-weight);
@@ -60,30 +60,30 @@
60
60
 
61
61
  margin-bottom: var(--gap-3xl);
62
62
  }
63
- .confirmation__description_19t4o {
63
+ .confirmation__description_ze27g {
64
64
  font-size: var(--confirmation-text-font-size);
65
65
  line-height: var(--confirmation-text-line-height);
66
66
  font-weight: var(--confirmation-text-font-weight);
67
67
  font-family: var(--confirmation-text-font-family);
68
68
  color: var(--confirmation-text-color);
69
69
  }
70
- .confirmation__countdown_19t4o {
70
+ .confirmation__countdown_ze27g {
71
71
  display: flex;
72
72
  align-items: center;
73
73
  justify-content: center;
74
74
  margin-top: var(--gap-2xs);
75
75
  }
76
- .confirmation__loader_19t4o {
76
+ .confirmation__loader_ze27g {
77
77
  margin-right: var(--gap-xs);
78
78
  }
79
- .confirmation__timePassed_19t4o {
79
+ .confirmation__timePassed_ze27g {
80
80
  display: flex;
81
81
  min-width: 3em;
82
82
  }
83
- .confirmation__getCodeButton_19t4o {
83
+ .confirmation__getCodeButton_ze27g {
84
84
  margin-top: var(--gap-2xl);
85
85
  }
86
- .confirmation__alertIcon_19t4o {
86
+ .confirmation__alertIcon_ze27g {
87
87
  text-align: center;
88
88
  margin-bottom: var(--gap-xl);
89
89
  color: var(--color-static-status-red);
@@ -10,7 +10,7 @@ import { Loader } from '@alfalab/core-components-loader/dist/esm';
10
10
  import { CodeInput } from '../code-input/component.js';
11
11
  import '../code-input/utils.js';
12
12
 
13
- var styles = {"component":"confirmation__component_ns4by","countdown":"confirmation__countdown_ns4by","hidden":"confirmation__hidden_ns4by","header":"confirmation__header_ns4by","inputContainer":"confirmation__inputContainer_ns4by","smsComeLinkWrap":"confirmation__smsComeLinkWrap_ns4by","smsComeLink":"confirmation__smsComeLink_ns4by","error":"confirmation__error_ns4by","loaderWrap":"confirmation__loaderWrap_ns4by","loaderText":"confirmation__loaderText_ns4by","center":"confirmation__center_ns4by","codeInput":"confirmation__codeInput_ns4by"};
13
+ var styles = {"component":"confirmation__component_1ch90","countdown":"confirmation__countdown_1ch90","hidden":"confirmation__hidden_1ch90","header":"confirmation__header_1ch90","inputContainer":"confirmation__inputContainer_1ch90","smsComeLinkWrap":"confirmation__smsComeLinkWrap_1ch90","smsComeLink":"confirmation__smsComeLink_1ch90","error":"confirmation__error_1ch90","loaderWrap":"confirmation__loaderWrap_1ch90","loaderText":"confirmation__loaderText_1ch90","center":"confirmation__center_1ch90","codeInput":"confirmation__codeInput_1ch90"};
14
14
  require('./index.css')
15
15
 
16
16
  var SignConfirmation = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: ns4by */
1
+ /* hash: 306rr */
2
2
  :root {
3
3
  --color-light-text-negative: #d91d0b;
4
4
  --color-light-text-primary: #0b1f35;
@@ -43,20 +43,20 @@
43
43
 
44
44
  /* input */
45
45
  }
46
- .confirmation__component_ns4by {
46
+ .confirmation__component_1ch90 {
47
47
  display: flex;
48
48
  flex-direction: column;
49
49
  }
50
- .confirmation__countdown_ns4by {
50
+ .confirmation__countdown_1ch90 {
51
51
  max-height: 300px;
52
52
  overflow: hidden;
53
53
  transition: max-height 0.15s ease;
54
54
  }
55
- .confirmation__hidden_ns4by {
55
+ .confirmation__hidden_1ch90 {
56
56
  opacity: 0;
57
57
  max-height: 0;
58
58
  }
59
- .confirmation__header_ns4by {
59
+ .confirmation__header_1ch90 {
60
60
  font-size: var(--confirmation-title-font-size);
61
61
  line-height: var(--confirmation-title-line-height);
62
62
  font-weight: var(--confirmation-title-font-weight);
@@ -67,19 +67,19 @@
67
67
  margin-bottom: var(--gap-3xl);
68
68
  color: var(--confirmation-title-color);
69
69
  }
70
- .confirmation__inputContainer_ns4by {
70
+ .confirmation__inputContainer_1ch90 {
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  }
74
- .confirmation__smsComeLinkWrap_ns4by {
74
+ .confirmation__smsComeLinkWrap_1ch90 {
75
75
  margin-top: var(--gap-l);
76
76
  }
77
- .confirmation__smsComeLink_ns4by {
77
+ .confirmation__smsComeLink_1ch90 {
78
78
  font-size: 14px;
79
79
  line-height: 20px;
80
80
  font-weight: 400;
81
81
  }
82
- .confirmation__error_ns4by {
82
+ .confirmation__error_1ch90 {
83
83
  font-size: 14px;
84
84
  line-height: 20px;
85
85
  font-weight: 400;
@@ -87,12 +87,12 @@
87
87
  margin-top: var(--gap-xs);
88
88
  color: var(--confirmation-error-color);
89
89
  }
90
- .confirmation__loaderWrap_ns4by {
90
+ .confirmation__loaderWrap_1ch90 {
91
91
  display: flex;
92
92
  align-items: center;
93
93
  margin: var(--gap-3xl) 0 var(--gap-xs);
94
94
  }
95
- .confirmation__loaderText_ns4by {
95
+ .confirmation__loaderText_1ch90 {
96
96
  font-size: var(--confirmation-text-font-size);
97
97
  line-height: var(--confirmation-text-line-height);
98
98
  font-weight: var(--confirmation-text-font-weight);
@@ -102,7 +102,7 @@
102
102
  margin-left: var(--gap-s);
103
103
  color: var(--confirmation-text-color);
104
104
  }
105
- .confirmation__center_ns4by .confirmation__codeInput_ns4by,
106
- .confirmation__center_ns4by .confirmation__loaderWrap_ns4by {
105
+ .confirmation__center_1ch90 .confirmation__codeInput_1ch90,
106
+ .confirmation__center_1ch90 .confirmation__loaderWrap_1ch90 {
107
107
  justify-content: center;
108
108
  }
@@ -1,4 +1,4 @@
1
- /* hash: xa4zp */
1
+ /* hash: 1svg4 */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  --color-light-text-secondary: #546272;
@@ -41,18 +41,18 @@
41
41
 
42
42
  /* input */
43
43
  }
44
- .confirmation__component_xa4zp {
44
+ .confirmation__component_1esi9 {
45
45
  display: flex;
46
46
  flex-direction: column;
47
47
  width: 100%;
48
48
  font-family: var(--confirmation-font-family);
49
49
  }
50
- .confirmation__error_xa4zp {
50
+ .confirmation__error_1esi9 {
51
51
  display: flex;
52
52
  flex-direction: column;
53
53
  align-items: flex-start;
54
54
  }
55
- .confirmation__errorHeader_xa4zp {
55
+ .confirmation__errorHeader_1esi9 {
56
56
  font-size: var(--confirmation-title-font-size);
57
57
  line-height: var(--confirmation-title-line-height);
58
58
  font-weight: var(--confirmation-title-font-weight);
@@ -63,7 +63,7 @@
63
63
  margin-bottom: var(--gap-2xl);
64
64
  color: var(--confirmation-title-color);
65
65
  }
66
- .confirmation__errorText_xa4zp {
66
+ .confirmation__errorText_1esi9 {
67
67
  font-size: var(--confirmation-text-font-size);
68
68
  line-height: var(--confirmation-text-line-height);
69
69
  font-weight: var(--confirmation-text-font-weight);
@@ -73,12 +73,12 @@
73
73
  margin-bottom: var(--gap-2xl);
74
74
  color: var(--confirmation-text-color);
75
75
  }
76
- .confirmation__phoneHintWrap_xa4zp {
76
+ .confirmation__phoneHintWrap_1esi9 {
77
77
  display: flex;
78
78
  flex-direction: column;
79
79
  align-items: flex-start;
80
80
  }
81
- .confirmation__phoneHintText_xa4zp {
81
+ .confirmation__phoneHintText_1esi9 {
82
82
  font-size: var(--confirmation-text-font-size);
83
83
  line-height: var(--confirmation-text-line-height);
84
84
  font-weight: var(--confirmation-text-font-weight);
@@ -88,7 +88,7 @@
88
88
  margin-bottom: var(--gap-xl);
89
89
  color: var(--confirmation-text-color);
90
90
  }
91
- .confirmation__phonesWrap_xa4zp {
91
+ .confirmation__phonesWrap_1esi9 {
92
92
  font-size: var(--confirmation-text-font-size);
93
93
  line-height: var(--confirmation-text-line-height);
94
94
  font-weight: var(--confirmation-text-font-weight);
@@ -99,21 +99,21 @@
99
99
  flex-direction: column;
100
100
  margin-bottom: var(--gap-4xl);
101
101
  }
102
- .confirmation__phoneWrap_xa4zp {
102
+ .confirmation__phoneWrap_1esi9 {
103
103
  margin-bottom: var(--gap-xs)
104
104
  }
105
- .confirmation__phoneWrap_xa4zp:last-child {
105
+ .confirmation__phoneWrap_1esi9:last-child {
106
106
  margin-bottom: 0;
107
107
  }
108
- .confirmation__phoneDescription_xa4zp {
108
+ .confirmation__phoneDescription_1esi9 {
109
109
  color: var(--confirmation-text-color);
110
110
  }
111
- .confirmation__component_xa4zp.confirmation__center_xa4zp {
111
+ .confirmation__component_1esi9.confirmation__center_1esi9 {
112
112
  text-align: center;
113
113
  }
114
- .confirmation__center_xa4zp .confirmation__phoneHintWrap_xa4zp {
114
+ .confirmation__center_1esi9 .confirmation__phoneHintWrap_1esi9 {
115
115
  align-items: center;
116
116
  }
117
- .confirmation__center_xa4zp .confirmation__error_xa4zp {
117
+ .confirmation__center_1esi9 .confirmation__error_1esi9 {
118
118
  align-items: center;
119
119
  }
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: xa4zp */
1
+ /* hash: 1svg4 */
2
2
  :root {
3
3
  --color-light-text-primary: #0b1f35;
4
4
  --color-light-text-secondary: #546272;
@@ -41,18 +41,18 @@
41
41
 
42
42
  /* input */
43
43
  }
44
- .confirmation__component_xa4zp {
44
+ .confirmation__component_1esi9 {
45
45
  display: flex;
46
46
  flex-direction: column;
47
47
  width: 100%;
48
48
  font-family: var(--confirmation-font-family);
49
49
  }
50
- .confirmation__error_xa4zp {
50
+ .confirmation__error_1esi9 {
51
51
  display: flex;
52
52
  flex-direction: column;
53
53
  align-items: flex-start;
54
54
  }
55
- .confirmation__errorHeader_xa4zp {
55
+ .confirmation__errorHeader_1esi9 {
56
56
  font-size: var(--confirmation-title-font-size);
57
57
  line-height: var(--confirmation-title-line-height);
58
58
  font-weight: var(--confirmation-title-font-weight);
@@ -63,7 +63,7 @@
63
63
  margin-bottom: var(--gap-2xl);
64
64
  color: var(--confirmation-title-color);
65
65
  }
66
- .confirmation__errorText_xa4zp {
66
+ .confirmation__errorText_1esi9 {
67
67
  font-size: var(--confirmation-text-font-size);
68
68
  line-height: var(--confirmation-text-line-height);
69
69
  font-weight: var(--confirmation-text-font-weight);
@@ -73,12 +73,12 @@
73
73
  margin-bottom: var(--gap-2xl);
74
74
  color: var(--confirmation-text-color);
75
75
  }
76
- .confirmation__phoneHintWrap_xa4zp {
76
+ .confirmation__phoneHintWrap_1esi9 {
77
77
  display: flex;
78
78
  flex-direction: column;
79
79
  align-items: flex-start;
80
80
  }
81
- .confirmation__phoneHintText_xa4zp {
81
+ .confirmation__phoneHintText_1esi9 {
82
82
  font-size: var(--confirmation-text-font-size);
83
83
  line-height: var(--confirmation-text-line-height);
84
84
  font-weight: var(--confirmation-text-font-weight);
@@ -88,7 +88,7 @@
88
88
  margin-bottom: var(--gap-xl);
89
89
  color: var(--confirmation-text-color);
90
90
  }
91
- .confirmation__phonesWrap_xa4zp {
91
+ .confirmation__phonesWrap_1esi9 {
92
92
  font-size: var(--confirmation-text-font-size);
93
93
  line-height: var(--confirmation-text-line-height);
94
94
  font-weight: var(--confirmation-text-font-weight);
@@ -99,21 +99,21 @@
99
99
  flex-direction: column;
100
100
  margin-bottom: var(--gap-4xl);
101
101
  }
102
- .confirmation__phoneWrap_xa4zp {
102
+ .confirmation__phoneWrap_1esi9 {
103
103
  margin-bottom: var(--gap-xs)
104
104
  }
105
- .confirmation__phoneWrap_xa4zp:last-child {
105
+ .confirmation__phoneWrap_1esi9:last-child {
106
106
  margin-bottom: 0;
107
107
  }
108
- .confirmation__phoneDescription_xa4zp {
108
+ .confirmation__phoneDescription_1esi9 {
109
109
  color: var(--confirmation-text-color);
110
110
  }
111
- .confirmation__component_xa4zp.confirmation__center_xa4zp {
111
+ .confirmation__component_1esi9.confirmation__center_1esi9 {
112
112
  text-align: center;
113
113
  }
114
- .confirmation__center_xa4zp .confirmation__phoneHintWrap_xa4zp {
114
+ .confirmation__center_1esi9 .confirmation__phoneHintWrap_1esi9 {
115
115
  align-items: center;
116
116
  }
117
- .confirmation__center_xa4zp .confirmation__error_xa4zp {
117
+ .confirmation__center_1esi9 .confirmation__error_1esi9 {
118
118
  align-items: center;
119
119
  }
@@ -13,7 +13,7 @@ import { SignConfirmation } from './components/sign-confirmation/component.js';
13
13
  import '@alfalab/icons-glyph';
14
14
  import { Overlimit } from './components/overlimit/component.js';
15
15
 
16
- var styles = {"component":"confirmation__component_xa4zp","error":"confirmation__error_xa4zp","errorHeader":"confirmation__errorHeader_xa4zp","errorText":"confirmation__errorText_xa4zp","phoneHintWrap":"confirmation__phoneHintWrap_xa4zp","phoneHintText":"confirmation__phoneHintText_xa4zp","phonesWrap":"confirmation__phonesWrap_xa4zp","phoneWrap":"confirmation__phoneWrap_xa4zp","phoneDescription":"confirmation__phoneDescription_xa4zp","center":"confirmation__center_xa4zp"};
16
+ var styles = {"component":"confirmation__component_1esi9","error":"confirmation__error_1esi9","errorHeader":"confirmation__errorHeader_1esi9","errorText":"confirmation__errorText_1esi9","phoneHintWrap":"confirmation__phoneHintWrap_1esi9","phoneHintText":"confirmation__phoneHintText_1esi9","phonesWrap":"confirmation__phonesWrap_1esi9","phoneWrap":"confirmation__phoneWrap_1esi9","phoneDescription":"confirmation__phoneDescription_1esi9","center":"confirmation__center_1esi9"};
17
17
  require('./index.css')
18
18
 
19
19
  const Confirmation = forwardRef(({ additionalContent, className, countdownDuration = 60000, dataTestId, errorIsFatal, errorTitle = 'Превышено количество попыток ввода кода', error = false, errorOverlimit = false, errorOverlimitIsFatal = false, errorText, hasPhoneMask = true, hasSmsCountdown = true, phone, requiredCharAmount = 5, signTitle = 'Введите код из\xa0сообщения', overlimitTitle = 'Превышено количество\n попыток ввода кода', overlimitText = 'Повторное подтверждение кодом из SMS\n будет возможно через', overlimitCountdownDuration, code, codeSending = false, codeChecking = false, codeCheckingText = 'Проверка кода', codeSendingText = 'Отправляем код', buttonErrorText = 'Понятно', buttonReturnText = 'Вернуться назад', buttonRetryText = 'Запросить новый код', alignContent = 'left', noAttemptsLeftMessage, countdownContent, onInputFinished, onSmsRetryClick, onOverlimitSmsRetryClick, onActionWithFatalError, onCountdownFinished, onOverlimitCountdownFinished, onInputChange, onSmsHintLinkClick, }, ref) => {
@@ -3,7 +3,7 @@ import cn from 'classnames';
3
3
  import { usePrevious } from '@alfalab/hooks';
4
4
  import { mergeArrays } from './utils.js';
5
5
 
6
- var styles = {"component":"confirmation__component_1wkkx","input":"confirmation__input_1wkkx","hasError":"confirmation__hasError_1wkkx","center":"confirmation__center_1wkkx","disabled":"confirmation__disabled_1wkkx","shake":"confirmation__shake_1wkkx"};
6
+ var styles = {"component":"confirmation__component_1lg2z","input":"confirmation__input_1lg2z","hasError":"confirmation__hasError_1lg2z","center":"confirmation__center_1lg2z","disabled":"confirmation__disabled_1lg2z","compact":"confirmation__compact_1lg2z","shake":"confirmation__shake_1lg2z"};
7
7
  require('./index.css')
8
8
 
9
9
  const Input = ({ index, slotsCount, error, processing, value, alignContent, handleChange, handleInputKeyDown, setRef, focus, }) => {
@@ -114,6 +114,7 @@ const CodeInput = forwardRef(({ processing, value = '', slotsCount, error, handl
114
114
  }, [value.length, prevValue.length, slotsCount, focus]);
115
115
  return (React.createElement("div", { className: cn(styles.component, className, {
116
116
  [styles.shake]: Boolean(error),
117
+ [styles.compact]: slotsCount > 6,
117
118
  }) }, new Array(slotsCount).fill('').map((_, index) => (React.createElement(Input, { value: value, index: index, error: error, processing: processing, slotsCount: slotsCount, alignContent: alignContent, handleChange: handleChange, handleInputKeyDown: handleInputKeyDown, setRef: setRef, focus: focus,
118
119
  // eslint-disable-next-line react/no-array-index-key
119
120
  key: index })))));
@@ -1,4 +1,4 @@
1
- /* hash: 1wkkx */
1
+ /* hash: y7f27 */
2
2
  :root {
3
3
  --color-light-bg-negative-muted: #feebea;
4
4
  --color-light-bg-secondary: #f3f4f5;
@@ -41,10 +41,10 @@
41
41
  --confirmation-input-bg-color: var(--color-light-bg-secondary);
42
42
  --confirmation-input-error-bg-color: var(--color-light-bg-negative-muted);
43
43
  }
44
- .confirmation__component_1wkkx {
44
+ .confirmation__component_1lg2z {
45
45
  display: flex;
46
46
  }
47
- .confirmation__input_1wkkx {
47
+ .confirmation__input_1lg2z {
48
48
  flex-shrink: 0;
49
49
  width: 36px;
50
50
  height: 48px;
@@ -61,19 +61,23 @@
61
61
  font-weight: var(--confirmation-input-font-weight);
62
62
  font-family: var(--confirmation-input-font-family)
63
63
  }
64
- .confirmation__input_1wkkx.confirmation__hasError_1wkkx {
64
+ .confirmation__input_1lg2z.confirmation__hasError_1lg2z {
65
65
  color: var(--confirmation-error-color);
66
66
  caret-color: var(--confirmation-input-text-color);
67
67
  background-color: var(--confirmation-input-error-bg-color);
68
68
  }
69
- .confirmation__input_1wkkx.confirmation__center_1wkkx {
69
+ .confirmation__input_1lg2z.confirmation__center_1lg2z {
70
70
  margin: 0 var(--gap-2xs);
71
71
  }
72
- .confirmation__input_1wkkx.confirmation__disabled_1wkkx {
72
+ .confirmation__input_1lg2z.confirmation__disabled_1lg2z {
73
73
  color: var(--color-light-text-tertiary);
74
74
  opacity: 1;
75
75
  }
76
- @keyframes confirmation__shake_1wkkx {
76
+ .confirmation__compact_1lg2z .confirmation__input_1lg2z {
77
+ width: 28px;
78
+ height: 40px;
79
+ }
80
+ @keyframes confirmation__shake_1lg2z {
77
81
  0% {
78
82
  transform: translateX(0);
79
83
  }
@@ -90,6 +94,6 @@
90
94
  transform: translateX(0);
91
95
  }
92
96
  }
93
- .confirmation__shake_1wkkx {
94
- animation: confirmation__shake_1wkkx 0.15s linear 0s 3;
97
+ .confirmation__shake_1lg2z {
98
+ animation: confirmation__shake_1lg2z 0.15s linear 0s 3;
95
99
  }
@@ -5,7 +5,7 @@ import { phoneNumber } from '@alfalab/utils';
5
5
  import { usePrevious } from '@alfalab/hooks';
6
6
  import { CountdownLoader } from '../countdown-loader/component.js';
7
7
 
8
- var styles = {"component":"confirmation__component_fsbo8","hasError":"confirmation__hasError_fsbo8","getCodeButton":"confirmation__getCodeButton_fsbo8","info":"confirmation__info_fsbo8","customContent":"confirmation__customContent_fsbo8","loaderWrap":"confirmation__loaderWrap_fsbo8","loader":"confirmation__loader_fsbo8","center":"confirmation__center_fsbo8","timePassed":"confirmation__timePassed_fsbo8","noAttemptsLeftMessage":"confirmation__noAttemptsLeftMessage_fsbo8"};
8
+ var styles = {"component":"confirmation__component_srfcc","hasError":"confirmation__hasError_srfcc","getCodeButton":"confirmation__getCodeButton_srfcc","info":"confirmation__info_srfcc","customContent":"confirmation__customContent_srfcc","loaderWrap":"confirmation__loaderWrap_srfcc","loader":"confirmation__loader_srfcc","center":"confirmation__center_srfcc","timePassed":"confirmation__timePassed_srfcc","noAttemptsLeftMessage":"confirmation__noAttemptsLeftMessage_srfcc"};
9
9
  require('./index.css')
10
10
 
11
11
  /**
@@ -1,4 +1,4 @@
1
- /* hash: fsbo8 */
1
+ /* hash: 1iil8 */
2
2
  :root {
3
3
  --color-light-text-secondary: #546272;
4
4
  }
@@ -34,7 +34,7 @@
34
34
 
35
35
  /* input */
36
36
  }
37
- .confirmation__component_fsbo8 {
37
+ .confirmation__component_srfcc {
38
38
  font-size: var(--confirmation-text-font-size);
39
39
  line-height: var(--confirmation-text-line-height);
40
40
  font-weight: var(--confirmation-text-font-weight);
@@ -47,39 +47,39 @@
47
47
  margin-top: var(--gap-3xl);
48
48
  color: var(--confirmation-text-color);
49
49
  }
50
- .confirmation__hasError_fsbo8 .confirmation__getCodeButton_fsbo8 {
50
+ .confirmation__hasError_srfcc .confirmation__getCodeButton_srfcc {
51
51
  margin-top: 0;
52
52
  }
53
- .confirmation__hasError_fsbo8 .confirmation__info_fsbo8 {
53
+ .confirmation__hasError_srfcc .confirmation__info_srfcc {
54
54
  margin-top: 0;
55
55
  }
56
- .confirmation__hasError_fsbo8 .confirmation__customContent_fsbo8 {
56
+ .confirmation__hasError_srfcc .confirmation__customContent_srfcc {
57
57
  margin-bottom: var(--gap-2xl);
58
58
  }
59
- .confirmation__info_fsbo8 {
59
+ .confirmation__info_srfcc {
60
60
  margin: var(--gap-2xs) 0;
61
61
  }
62
- .confirmation__loaderWrap_fsbo8 {
62
+ .confirmation__loaderWrap_srfcc {
63
63
  display: flex;
64
64
  align-items: center;
65
65
  margin-bottom: var(--gap-xs);
66
66
  }
67
- .confirmation__loader_fsbo8 {
67
+ .confirmation__loader_srfcc {
68
68
  margin-right: var(--gap-xs);
69
69
  }
70
- .confirmation__center_fsbo8 {
70
+ .confirmation__center_srfcc {
71
71
  align-items: center
72
72
  }
73
- .confirmation__center_fsbo8 .confirmation__loaderWrap_fsbo8 {
73
+ .confirmation__center_srfcc .confirmation__loaderWrap_srfcc {
74
74
  justify-content: center;
75
75
  }
76
- .confirmation__timePassed_fsbo8 {
76
+ .confirmation__timePassed_srfcc {
77
77
  display: flex;
78
78
  min-width: 3em;
79
79
  }
80
- .confirmation__getCodeButton_fsbo8 {
80
+ .confirmation__getCodeButton_srfcc {
81
81
  margin-top: var(--gap-2xl);
82
82
  }
83
- .confirmation__noAttemptsLeftMessage_fsbo8 {
83
+ .confirmation__noAttemptsLeftMessage_srfcc {
84
84
  margin: var(--gap-2xs) 0 var(--gap-xs);
85
85
  }
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- var styles = {"circle":"confirmation__circle_18uc4"};
3
+ var styles = {"circle":"confirmation__circle_mge9i"};
4
4
  require('./index.css')
5
5
 
6
6
  const SIZE = 16;
@@ -1,4 +1,4 @@
1
- /* hash: 18uc4 */
1
+ /* hash: 1g0vg */
2
2
  :root {
3
3
  --color-light-graphic-tertiary: #b6bcc3;
4
4
  }
@@ -19,7 +19,7 @@
19
19
 
20
20
  /* input */
21
21
  }
22
- .confirmation__circle_18uc4 {
22
+ .confirmation__circle_mge9i {
23
23
  fill: transparent;
24
24
  stroke: var(--color-light-graphic-tertiary);
25
25
  stroke-width: 2px;
@@ -7,7 +7,7 @@ import { CountdownLoader } from '../countdown-loader/component.js';
7
7
  import { formatMsAsMinutes } from '../countdown/component.js';
8
8
  import { CrossCircleMIcon } from '@alfalab/icons-glyph';
9
9
 
10
- var styles = {"component":"confirmation__component_19t4o","title":"confirmation__title_19t4o","description":"confirmation__description_19t4o","countdown":"confirmation__countdown_19t4o","loader":"confirmation__loader_19t4o","timePassed":"confirmation__timePassed_19t4o","getCodeButton":"confirmation__getCodeButton_19t4o","alertIcon":"confirmation__alertIcon_19t4o"};
10
+ var styles = {"component":"confirmation__component_ze27g","title":"confirmation__title_ze27g","description":"confirmation__description_ze27g","countdown":"confirmation__countdown_ze27g","loader":"confirmation__loader_ze27g","timePassed":"confirmation__timePassed_ze27g","getCodeButton":"confirmation__getCodeButton_ze27g","alertIcon":"confirmation__alertIcon_ze27g"};
11
11
  require('./index.css')
12
12
 
13
13
  const Overlimit = ({ duration = 60000, buttonRetryText, hasFatalError, onOverlimitRepeatSms, onOverlimitCountdownFinished, text, title, }) => {
@@ -1,4 +1,4 @@
1
- /* hash: 19t4o */
1
+ /* hash: e7tjx */
2
2
  :root {
3
3
  --color-static-status-red: #d91d0b;
4
4
  }
@@ -45,12 +45,12 @@
45
45
 
46
46
  /* input */
47
47
  }
48
- .confirmation__component_19t4o {
48
+ .confirmation__component_ze27g {
49
49
  display: flex;
50
50
  flex-direction: column;
51
51
  align-items: center;
52
52
  }
53
- .confirmation__title_19t4o {
53
+ .confirmation__title_ze27g {
54
54
  font-size: var(--confirmation-title-font-size);
55
55
  line-height: var(--confirmation-title-line-height);
56
56
  font-weight: var(--confirmation-title-font-weight);
@@ -60,30 +60,30 @@
60
60
 
61
61
  margin-bottom: var(--gap-3xl);
62
62
  }
63
- .confirmation__description_19t4o {
63
+ .confirmation__description_ze27g {
64
64
  font-size: var(--confirmation-text-font-size);
65
65
  line-height: var(--confirmation-text-line-height);
66
66
  font-weight: var(--confirmation-text-font-weight);
67
67
  font-family: var(--confirmation-text-font-family);
68
68
  color: var(--confirmation-text-color);
69
69
  }
70
- .confirmation__countdown_19t4o {
70
+ .confirmation__countdown_ze27g {
71
71
  display: flex;
72
72
  align-items: center;
73
73
  justify-content: center;
74
74
  margin-top: var(--gap-2xs);
75
75
  }
76
- .confirmation__loader_19t4o {
76
+ .confirmation__loader_ze27g {
77
77
  margin-right: var(--gap-xs);
78
78
  }
79
- .confirmation__timePassed_19t4o {
79
+ .confirmation__timePassed_ze27g {
80
80
  display: flex;
81
81
  min-width: 3em;
82
82
  }
83
- .confirmation__getCodeButton_19t4o {
83
+ .confirmation__getCodeButton_ze27g {
84
84
  margin-top: var(--gap-2xl);
85
85
  }
86
- .confirmation__alertIcon_19t4o {
86
+ .confirmation__alertIcon_ze27g {
87
87
  text-align: center;
88
88
  margin-bottom: var(--gap-xl);
89
89
  color: var(--color-static-status-red);
@@ -10,7 +10,7 @@ import { Loader } from '@alfalab/core-components-loader/dist/modern';
10
10
  import '../code-input/utils.js';
11
11
  import { CodeInput } from '../code-input/component.js';
12
12
 
13
- var styles = {"component":"confirmation__component_ns4by","countdown":"confirmation__countdown_ns4by","hidden":"confirmation__hidden_ns4by","header":"confirmation__header_ns4by","inputContainer":"confirmation__inputContainer_ns4by","smsComeLinkWrap":"confirmation__smsComeLinkWrap_ns4by","smsComeLink":"confirmation__smsComeLink_ns4by","error":"confirmation__error_ns4by","loaderWrap":"confirmation__loaderWrap_ns4by","loaderText":"confirmation__loaderText_ns4by","center":"confirmation__center_ns4by","codeInput":"confirmation__codeInput_ns4by"};
13
+ var styles = {"component":"confirmation__component_1ch90","countdown":"confirmation__countdown_1ch90","hidden":"confirmation__hidden_1ch90","header":"confirmation__header_1ch90","inputContainer":"confirmation__inputContainer_1ch90","smsComeLinkWrap":"confirmation__smsComeLinkWrap_1ch90","smsComeLink":"confirmation__smsComeLink_1ch90","error":"confirmation__error_1ch90","loaderWrap":"confirmation__loaderWrap_1ch90","loaderText":"confirmation__loaderText_1ch90","center":"confirmation__center_1ch90","codeInput":"confirmation__codeInput_1ch90"};
14
14
  require('./index.css')
15
15
 
16
16
  const SignConfirmation = ({ codeChecking, codeSending, smsHintVisible, requiredCharAmount, countdownDuration, additionalContent, hasPhoneMask, phone, code: inputValue, error, errorText, title, hasSmsCountdown, inputRef, codeCheckingText, codeSendingText, alignContent, noAttemptsLeftMessage, buttonRetryText, countdownContent, onInputFinished, onInputChange, onSmsRetryClick, onCountdownFinished, onSmsHintLinkClick, }) => {