@hh.ru/magritte-ui-pincode-input 2.4.5 → 2.4.7

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 (3) hide show
  1. package/PincodeInput.js +1 -1
  2. package/index.css +106 -106
  3. package/package.json +5 -5
package/PincodeInput.js CHANGED
@@ -10,7 +10,7 @@ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
10
10
  import { CheckCircleFilledSize24 } from '@hh.ru/magritte-ui-icon/variants/icon';
11
11
  import { useOTP } from './useOTP.js';
12
12
 
13
- var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-4-5","pincodeInput":"magritte-pincode-input___RpWyq_2-4-5","medium":"magritte-medium___wfRSc_2-4-5","focus":"magritte-focus___IuhXb_2-4-5","invalid":"magritte-invalid___hB8h2_2-4-5","loading":"magritte-loading___TbW3K_2-4-5","succeed":"magritte-succeed___32cIX_2-4-5","placeholder":"magritte-placeholder___10kQ0_2-4-5","focus-visible":"magritte-focus-visible___BN1eD_2-4-5","focusVisible":"magritte-focus-visible___BN1eD_2-4-5","loading-blink":"magritte-loading-blink___IELw-_2-4-5","loadingBlink":"magritte-loading-blink___IELw-_2-4-5","digit-box":"magritte-digit-box___6J0Q2_2-4-5","digitBox":"magritte-digit-box___6J0Q2_2-4-5","succeed-icon":"magritte-succeed-icon___Vag76_2-4-5","succeedIcon":"magritte-succeed-icon___Vag76_2-4-5","digit-box-container":"magritte-digit-box-container___BqMWw_2-4-5","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-4-5","digits-input":"magritte-digits-input___4QeLj_2-4-5","digitsInput":"magritte-digits-input___4QeLj_2-4-5","caret-left":"magritte-caret-left___iZMuA_2-4-5","caretLeft":"magritte-caret-left___iZMuA_2-4-5","caret-right":"magritte-caret-right___u8wNk_2-4-5","caretRight":"magritte-caret-right___u8wNk_2-4-5","caret-blink":"magritte-caret-blink___-bhg7_2-4-5","caretBlink":"magritte-caret-blink___-bhg7_2-4-5","value-container":"magritte-value-container___9JR3e_2-4-5","valueContainer":"magritte-value-container___9JR3e_2-4-5","ghost-value":"magritte-ghost-value___jPQwY_2-4-5","ghostValue":"magritte-ghost-value___jPQwY_2-4-5","current-value":"magritte-current-value___IT1-R_2-4-5","currentValue":"magritte-current-value___IT1-R_2-4-5"};
13
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-4-7","pincodeInput":"magritte-pincode-input___RpWyq_2-4-7","medium":"magritte-medium___wfRSc_2-4-7","focus":"magritte-focus___IuhXb_2-4-7","invalid":"magritte-invalid___hB8h2_2-4-7","loading":"magritte-loading___TbW3K_2-4-7","succeed":"magritte-succeed___32cIX_2-4-7","placeholder":"magritte-placeholder___10kQ0_2-4-7","focus-visible":"magritte-focus-visible___BN1eD_2-4-7","focusVisible":"magritte-focus-visible___BN1eD_2-4-7","loading-blink":"magritte-loading-blink___IELw-_2-4-7","loadingBlink":"magritte-loading-blink___IELw-_2-4-7","digit-box":"magritte-digit-box___6J0Q2_2-4-7","digitBox":"magritte-digit-box___6J0Q2_2-4-7","succeed-icon":"magritte-succeed-icon___Vag76_2-4-7","succeedIcon":"magritte-succeed-icon___Vag76_2-4-7","digit-box-container":"magritte-digit-box-container___BqMWw_2-4-7","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-4-7","digits-input":"magritte-digits-input___4QeLj_2-4-7","digitsInput":"magritte-digits-input___4QeLj_2-4-7","caret-left":"magritte-caret-left___iZMuA_2-4-7","caretLeft":"magritte-caret-left___iZMuA_2-4-7","caret-right":"magritte-caret-right___u8wNk_2-4-7","caretRight":"magritte-caret-right___u8wNk_2-4-7","caret-blink":"magritte-caret-blink___-bhg7_2-4-7","caretBlink":"magritte-caret-blink___-bhg7_2-4-7","value-container":"magritte-value-container___9JR3e_2-4-7","valueContainer":"magritte-value-container___9JR3e_2-4-7","ghost-value":"magritte-ghost-value___jPQwY_2-4-7","ghostValue":"magritte-ghost-value___jPQwY_2-4-7","current-value":"magritte-current-value___IT1-R_2-4-7","currentValue":"magritte-current-value___IT1-R_2-4-7"};
14
14
 
15
15
  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
16
16
  const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, loading = false, succeed = false, name, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
package/index.css CHANGED
@@ -1,78 +1,78 @@
1
1
  :root{
2
- --magritte-color-background-positive-v24-4-1:#0dc267;
3
- --magritte-color-text-primary-v24-4-1:#000000;
4
- --magritte-color-component-input-stroke-state-field-hovered-v24-4-1:#CCD5DF;
5
- --magritte-color-component-input-stroke-state-field-loading-v24-4-1:#CCD5DF;
6
- --magritte-color-component-input-stroke-state-field-focused-v24-4-1:#0070ff;
7
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v24-4-1:#0070ff7a;
8
- --magritte-color-component-input-stroke-state-field-invalid-v24-4-1:#ff4d3a;
9
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v24-4-1:#ff4d3a7a;
10
- --magritte-color-component-input-background-field-v24-4-1:#ffffff;
11
- --magritte-color-component-input-background-state-field-loading-v24-4-1:#DCE3EB;
12
- --magritte-color-component-input-background-state-field-hovered-v24-4-1:#ffffff;
13
- --magritte-color-component-input-background-state-field-focused-v24-4-1:#ffffff;
14
- --magritte-color-component-input-background-state-field-invalid-v24-4-1:#ffffff;
15
- --magritte-color-component-input-stroke-field-v24-4-1:#DCE3EB;
16
- --magritte-color-component-input-text-state-content-loading-v24-4-1:#768694;
17
- --magritte-color-component-input-text-state-content-focused-v24-4-1:#000000;
18
- --magritte-color-component-input-text-state-placeholder-hovered-v24-4-1:#768694;
19
- --magritte-color-component-input-text-state-placeholder-focused-v24-4-1:#AABBCA;
20
- --magritte-color-component-input-text-state-placeholder-invalid-v24-4-1:#AABBCA;
21
- --magritte-color-component-input-text-placeholder-v24-4-1:#AABBCA;
2
+ --magritte-color-background-positive-v24-5-0:#0dc267;
3
+ --magritte-color-text-primary-v24-5-0:#000000;
4
+ --magritte-color-component-input-stroke-state-field-hovered-v24-5-0:#CCD5DF;
5
+ --magritte-color-component-input-stroke-state-field-loading-v24-5-0:#CCD5DF;
6
+ --magritte-color-component-input-stroke-state-field-focused-v24-5-0:#0070ff;
7
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v24-5-0:#0070ff7a;
8
+ --magritte-color-component-input-stroke-state-field-invalid-v24-5-0:#ff4d3a;
9
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v24-5-0:#ff4d3a7a;
10
+ --magritte-color-component-input-background-field-v24-5-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-loading-v24-5-0:#DCE3EB;
12
+ --magritte-color-component-input-background-state-field-hovered-v24-5-0:#ffffff;
13
+ --magritte-color-component-input-background-state-field-focused-v24-5-0:#ffffff;
14
+ --magritte-color-component-input-background-state-field-invalid-v24-5-0:#ffffff;
15
+ --magritte-color-component-input-stroke-field-v24-5-0:#DCE3EB;
16
+ --magritte-color-component-input-text-state-content-loading-v24-5-0:#768694;
17
+ --magritte-color-component-input-text-state-content-focused-v24-5-0:#000000;
18
+ --magritte-color-component-input-text-state-placeholder-hovered-v24-5-0:#768694;
19
+ --magritte-color-component-input-text-state-placeholder-focused-v24-5-0:#AABBCA;
20
+ --magritte-color-component-input-text-state-placeholder-invalid-v24-5-0:#AABBCA;
21
+ --magritte-color-component-input-text-placeholder-v24-5-0:#AABBCA;
22
22
  }
23
23
 
24
24
  :root{
25
- --magritte-semantic-animation-time-m-duration-v24-4-1:400ms;
26
- --magritte-semantic-animation-time-xl-duration-v24-4-1:800ms;
27
- --magritte-semantic-animation-ease-base-timing-function-v24-4-1:cubic-bezier(0.4, 0.24, 0, 1);
25
+ --magritte-semantic-animation-time-m-duration-v24-5-0:400ms;
26
+ --magritte-semantic-animation-time-xl-duration-v24-5-0:800ms;
27
+ --magritte-semantic-animation-ease-base-timing-function-v24-5-0:cubic-bezier(0.4, 0.24, 0, 1);
28
28
  }
29
29
 
30
30
  .magritte-night-theme{
31
- --magritte-color-background-positive-v24-4-1:#10b55f;
32
- --magritte-color-text-primary-v24-4-1:#ffffff;
33
- --magritte-color-component-input-stroke-state-field-hovered-v24-4-1:#3B3B3B;
34
- --magritte-color-component-input-stroke-state-field-loading-v24-4-1:#3B3B3B;
35
- --magritte-color-component-input-background-field-v24-4-1:#111;
36
- --magritte-color-component-input-background-state-field-hovered-v24-4-1:#111;
37
- --magritte-color-component-input-background-state-field-loading-v24-4-1:#474747;
38
- --magritte-color-component-input-background-state-field-focused-v24-4-1:#111;
39
- --magritte-color-component-input-background-state-field-invalid-v24-4-1:#111;
40
- --magritte-color-component-input-stroke-field-v24-4-1:#303030;
41
- --magritte-color-component-input-text-placeholder-v24-4-1:#535353;
42
- --magritte-color-component-input-text-state-content-loading-v24-4-1:#ABABAB;
43
- --magritte-color-component-input-text-state-content-focused-v24-4-1:#ffffff;
44
- --magritte-color-component-input-text-state-placeholder-hovered-v24-4-1:#5E5E5E;
45
- --magritte-color-component-input-text-state-placeholder-focused-v24-4-1:#535353;
46
- --magritte-color-component-input-text-state-placeholder-invalid-v24-4-1:#535353;
31
+ --magritte-color-background-positive-v24-5-0:#10b55f;
32
+ --magritte-color-text-primary-v24-5-0:#ffffff;
33
+ --magritte-color-component-input-stroke-state-field-hovered-v24-5-0:#3B3B3B;
34
+ --magritte-color-component-input-stroke-state-field-loading-v24-5-0:#3B3B3B;
35
+ --magritte-color-component-input-background-field-v24-5-0:#111;
36
+ --magritte-color-component-input-background-state-field-hovered-v24-5-0:#111;
37
+ --magritte-color-component-input-background-state-field-loading-v24-5-0:#474747;
38
+ --magritte-color-component-input-background-state-field-focused-v24-5-0:#111;
39
+ --magritte-color-component-input-background-state-field-invalid-v24-5-0:#111;
40
+ --magritte-color-component-input-stroke-field-v24-5-0:#303030;
41
+ --magritte-color-component-input-text-placeholder-v24-5-0:#535353;
42
+ --magritte-color-component-input-text-state-content-loading-v24-5-0:#ABABAB;
43
+ --magritte-color-component-input-text-state-content-focused-v24-5-0:#ffffff;
44
+ --magritte-color-component-input-text-state-placeholder-hovered-v24-5-0:#5E5E5E;
45
+ --magritte-color-component-input-text-state-placeholder-focused-v24-5-0:#535353;
46
+ --magritte-color-component-input-text-state-placeholder-invalid-v24-5-0:#535353;
47
47
  }
48
48
 
49
49
  .magritte-zp-day-theme{
50
- --magritte-color-component-input-stroke-state-field-focused-v24-4-1:#7195AF;
50
+ --magritte-color-component-input-stroke-state-field-focused-v24-5-0:#7195AF;
51
51
  }
52
- .magritte-pincode-input___RpWyq_2-4-5{
52
+ .magritte-pincode-input___RpWyq_2-4-7{
53
53
  --magritte-pincode-input-padding-horizontal:20px;
54
54
  --magritte-pincode-input-padding-vertical:8px;
55
55
  --magritte-pincode-input-gap:6px;
56
56
  --magritte-digit-box-width:calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1)) - (var(--magritte-pincode-input-padding-horizontal) * 2)) / var(--magritte-pincode-digits-count));
57
57
  box-sizing:border-box;
58
58
  height:88px;
59
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-4-1);
59
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-5-0);
60
60
  border-radius:18px;
61
- background-color:var(--magritte-color-component-input-background-field-v24-4-1);
61
+ background-color:var(--magritte-color-component-input-background-field-v24-5-0);
62
62
  position:relative;
63
63
  overflow:clip;
64
64
  cursor:text;
65
65
  transition-property:background-color;
66
- transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-4-1);
67
- transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
66
+ transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-5-0);
67
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-5-0);
68
68
  font-family:hh sans;
69
69
  font-size:32px;
70
70
  font-style:normal;
71
71
  font-weight:normal;
72
72
  line-height:40px;
73
- color:var(--magritte-color-component-input-text-state-content-focused-v24-4-1);
73
+ color:var(--magritte-color-component-input-text-state-content-focused-v24-5-0);
74
74
  }
75
- .magritte-pincode-input___RpWyq_2-4-5.magritte-medium___wfRSc_2-4-5{
75
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-medium___wfRSc_2-4-7{
76
76
  font-size:28px;
77
77
  --magritte-pincode-input-padding-horizontal:16px;
78
78
  --magritte-pincode-input-padding-vertical:6px;
@@ -81,66 +81,66 @@
81
81
  height:76px;
82
82
  }
83
83
  @media (min-width: 1020px){
84
- body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-5:not(.magritte-focus___IuhXb_2-4-5):not(.magritte-invalid___hB8h2_2-4-5):not(.magritte-loading___TbW3K_2-4-5):not(.magritte-succeed___32cIX_2-4-5):hover{
85
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-4-1);
86
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-4-1);
84
+ body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-7:not(.magritte-focus___IuhXb_2-4-7):not(.magritte-invalid___hB8h2_2-4-7):not(.magritte-loading___TbW3K_2-4-7):not(.magritte-succeed___32cIX_2-4-7):hover{
85
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-5-0);
86
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-5-0);
87
87
  }
88
- body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-5:not(.magritte-focus___IuhXb_2-4-5):not(.magritte-invalid___hB8h2_2-4-5):not(.magritte-loading___TbW3K_2-4-5):not(.magritte-succeed___32cIX_2-4-5):hover .magritte-placeholder___10kQ0_2-4-5{
89
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-4-1);
88
+ body.magritte-old-layout .magritte-pincode-input___RpWyq_2-4-7:not(.magritte-focus___IuhXb_2-4-7):not(.magritte-invalid___hB8h2_2-4-7):not(.magritte-loading___TbW3K_2-4-7):not(.magritte-succeed___32cIX_2-4-7):hover .magritte-placeholder___10kQ0_2-4-7{
89
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-5-0);
90
90
  }
91
91
  }
92
92
  @media (min-width: 1024px){
93
- body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-5:not(.magritte-focus___IuhXb_2-4-5):not(.magritte-invalid___hB8h2_2-4-5):not(.magritte-loading___TbW3K_2-4-5):not(.magritte-succeed___32cIX_2-4-5):hover{
94
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-4-1);
95
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-4-1);
93
+ body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-7:not(.magritte-focus___IuhXb_2-4-7):not(.magritte-invalid___hB8h2_2-4-7):not(.magritte-loading___TbW3K_2-4-7):not(.magritte-succeed___32cIX_2-4-7):hover{
94
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-5-0);
95
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-5-0);
96
96
  }
97
- body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-5:not(.magritte-focus___IuhXb_2-4-5):not(.magritte-invalid___hB8h2_2-4-5):not(.magritte-loading___TbW3K_2-4-5):not(.magritte-succeed___32cIX_2-4-5):hover .magritte-placeholder___10kQ0_2-4-5{
98
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-4-1);
97
+ body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-4-7:not(.magritte-focus___IuhXb_2-4-7):not(.magritte-invalid___hB8h2_2-4-7):not(.magritte-loading___TbW3K_2-4-7):not(.magritte-succeed___32cIX_2-4-7):hover .magritte-placeholder___10kQ0_2-4-7{
98
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-5-0);
99
99
  }
100
100
  }
101
- .magritte-pincode-input___RpWyq_2-4-5.magritte-focus___IuhXb_2-4-5{
102
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-4-1);
103
- background-color:var(--magritte-color-component-input-background-state-field-focused-v24-4-1);
101
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-focus___IuhXb_2-4-7{
102
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-5-0);
103
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v24-5-0);
104
104
  }
105
- .magritte-pincode-input___RpWyq_2-4-5.magritte-focus___IuhXb_2-4-5 .magritte-placeholder___10kQ0_2-4-5{
106
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-4-1);
105
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-focus___IuhXb_2-4-7 .magritte-placeholder___10kQ0_2-4-7{
106
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-5-0);
107
107
  }
108
- .magritte-pincode-input___RpWyq_2-4-5.magritte-invalid___hB8h2_2-4-5{
109
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-4-1);
110
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-4-1);
108
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-invalid___hB8h2_2-4-7{
109
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-5-0);
110
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-5-0);
111
111
  }
112
- .magritte-pincode-input___RpWyq_2-4-5.magritte-invalid___hB8h2_2-4-5 .magritte-placeholder___10kQ0_2-4-5{
113
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-4-1);
112
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-invalid___hB8h2_2-4-7 .magritte-placeholder___10kQ0_2-4-7{
113
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-5-0);
114
114
  }
115
- .magritte-pincode-input___RpWyq_2-4-5.magritte-focus-visible___BN1eD_2-4-5{
116
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-4-1) solid 4px;
115
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-focus-visible___BN1eD_2-4-7{
116
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-5-0) solid 4px;
117
117
  }
118
- .magritte-pincode-input___RpWyq_2-4-5.magritte-focus-visible___BN1eD_2-4-5.magritte-invalid___hB8h2_2-4-5{
119
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-4-1);
118
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-focus-visible___BN1eD_2-4-7.magritte-invalid___hB8h2_2-4-7{
119
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-5-0);
120
120
  }
121
- .magritte-pincode-input___RpWyq_2-4-5.magritte-loading___TbW3K_2-4-5{
122
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-4-1);
123
- background-color:var(--magritte-color-component-input-background-state-field-loading-v24-4-1);
124
- color:var(--magritte-color-component-input-text-state-content-loading-v24-4-1);
121
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-loading___TbW3K_2-4-7{
122
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-5-0);
123
+ background-color:var(--magritte-color-component-input-background-state-field-loading-v24-5-0);
124
+ color:var(--magritte-color-component-input-text-state-content-loading-v24-5-0);
125
125
  pointer-events:none;
126
126
  animation-delay:400ms;
127
- animation-name:magritte-loading-blink___IELw-_2-4-5;
128
- animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-4-1) + var(--magritte-semantic-animation-time-m-duration-v24-4-1) + 200ms);
129
- animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
127
+ animation-name:magritte-loading-blink___IELw-_2-4-7;
128
+ animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-5-0) + var(--magritte-semantic-animation-time-m-duration-v24-5-0) + 200ms);
129
+ animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-5-0);
130
130
  animation-iteration-count:infinite;
131
131
  }
132
- .magritte-pincode-input___RpWyq_2-4-5.magritte-loading___TbW3K_2-4-5 .magritte-digit-box___6J0Q2_2-4-5{
132
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-loading___TbW3K_2-4-7 .magritte-digit-box___6J0Q2_2-4-7{
133
133
  pointer-events:none;
134
134
  }
135
- .magritte-pincode-input___RpWyq_2-4-5.magritte-succeed___32cIX_2-4-5{
136
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-4-1);
137
- background-color:var(--magritte-color-background-positive-v24-4-1);
135
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-succeed___32cIX_2-4-7{
136
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-5-0);
137
+ background-color:var(--magritte-color-background-positive-v24-5-0);
138
138
  }
139
- .magritte-pincode-input___RpWyq_2-4-5.magritte-succeed___32cIX_2-4-5 .magritte-digit-box___6J0Q2_2-4-5{
139
+ .magritte-pincode-input___RpWyq_2-4-7.magritte-succeed___32cIX_2-4-7 .magritte-digit-box___6J0Q2_2-4-7{
140
140
  opacity:0;
141
141
  visibility:hidden;
142
142
  }
143
- .magritte-succeed-icon___Vag76_2-4-5{
143
+ .magritte-succeed-icon___Vag76_2-4-7{
144
144
  position:absolute;
145
145
  inset:0;
146
146
  display:flex;
@@ -149,7 +149,7 @@
149
149
  pointer-events:none;
150
150
  z-index:1;
151
151
  }
152
- .magritte-digit-box-container___BqMWw_2-4-5{
152
+ .magritte-digit-box-container___BqMWw_2-4-7{
153
153
  display:flex;
154
154
  gap:var(--magritte-pincode-input-gap);
155
155
  position:absolute;
@@ -160,7 +160,7 @@
160
160
  pointer-events:none;
161
161
  z-index:0;
162
162
  }
163
- .magritte-digit-box___6J0Q2_2-4-5{
163
+ .magritte-digit-box___6J0Q2_2-4-7{
164
164
  flex:0 0 var(--magritte-digit-box-width);
165
165
  pointer-events:auto;
166
166
  display:flex;
@@ -168,16 +168,16 @@
168
168
  justify-content:center;
169
169
  user-select:none;
170
170
  transition-property:opacity, visibility;
171
- transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-4-1);
172
- transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
171
+ transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-5-0);
172
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-5-0);
173
173
  }
174
- .magritte-digit-box___6J0Q2_2-4-5::selection{
174
+ .magritte-digit-box___6J0Q2_2-4-7::selection{
175
175
  background-color:transparent;
176
176
  }
177
- .magritte-digit-box___6J0Q2_2-4-5::-moz-selection{
177
+ .magritte-digit-box___6J0Q2_2-4-7::-moz-selection{
178
178
  background-color:transparent;
179
179
  }
180
- .magritte-digits-input___4QeLj_2-4-5{
180
+ .magritte-digits-input___4QeLj_2-4-7{
181
181
  display:block;
182
182
  position:absolute;
183
183
  top:0;
@@ -195,50 +195,50 @@
195
195
  appearance:none;
196
196
  caret-color:transparent;
197
197
  }
198
- .magritte-digits-input___4QeLj_2-4-5::selection{
198
+ .magritte-digits-input___4QeLj_2-4-7::selection{
199
199
  background-color:transparent;
200
200
  appearance:none;
201
201
  }
202
- .magritte-digits-input___4QeLj_2-4-5::-moz-selection{
202
+ .magritte-digits-input___4QeLj_2-4-7::-moz-selection{
203
203
  background-color:transparent;
204
204
  appearance:none;
205
205
  }
206
- .magritte-caret-left___iZMuA_2-4-5::before,
207
- .magritte-caret-right___u8wNk_2-4-5::after{
206
+ .magritte-caret-left___iZMuA_2-4-7::before,
207
+ .magritte-caret-right___u8wNk_2-4-7::after{
208
208
  content:'';
209
209
  position:absolute;
210
210
  top:50%;
211
211
  transform:translateY(-50%);
212
212
  block-size:1em;
213
- border-left:1px solid var(--magritte-color-text-primary-v24-4-1);
214
- animation:magritte-caret-blink___-bhg7_2-4-5 1s steps(1) infinite;
213
+ border-left:1px solid var(--magritte-color-text-primary-v24-5-0);
214
+ animation:magritte-caret-blink___-bhg7_2-4-7 1s steps(1) infinite;
215
215
  }
216
- .magritte-caret-left___iZMuA_2-4-5::before{
216
+ .magritte-caret-left___iZMuA_2-4-7::before{
217
217
  left:-1px;
218
218
  }
219
- .magritte-caret-right___u8wNk_2-4-5::after{
219
+ .magritte-caret-right___u8wNk_2-4-7::after{
220
220
  right:-1px;
221
221
  }
222
- .magritte-placeholder___10kQ0_2-4-5{
223
- color:var(--magritte-color-component-input-text-placeholder-v24-4-1);
222
+ .magritte-placeholder___10kQ0_2-4-7{
223
+ color:var(--magritte-color-component-input-text-placeholder-v24-5-0);
224
224
  }
225
- .magritte-value-container___9JR3e_2-4-5{
225
+ .magritte-value-container___9JR3e_2-4-7{
226
226
  pointer-events:none;
227
227
  position:relative;
228
228
  min-width:20px;
229
229
  text-align:center;
230
230
  display:grid;
231
231
  }
232
- .magritte-ghost-value___jPQwY_2-4-5{
232
+ .magritte-ghost-value___jPQwY_2-4-7{
233
233
  display:inline-block;
234
234
  visibility:hidden;
235
235
  }
236
- @keyframes magritte-caret-blink___-bhg7_2-4-5{
236
+ @keyframes magritte-caret-blink___-bhg7_2-4-7{
237
237
  50%{
238
238
  opacity:0;
239
239
  }
240
240
  }
241
- @keyframes magritte-loading-blink___IELw-_2-4-5{
241
+ @keyframes magritte-loading-blink___IELw-_2-4-7{
242
242
  0%{
243
243
  opacity:1;
244
244
  }
@@ -252,7 +252,7 @@
252
252
  opacity:1;
253
253
  }
254
254
  }
255
- .magritte-current-value___IT1-R_2-4-5{
255
+ .magritte-current-value___IT1-R_2-4-7{
256
256
  display:inline-block;
257
257
  grid-area:1 / 1;
258
258
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "2.4.5",
3
+ "version": "2.4.7",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -24,10 +24,10 @@
24
24
  "dependencies": {
25
25
  "@hh.ru/magritte-common-keyboard": "4.3.1",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
27
- "@hh.ru/magritte-design-tokens": "24.4.1",
27
+ "@hh.ru/magritte-design-tokens": "24.5.0",
28
28
  "@hh.ru/magritte-ui-breakpoint": "6.0.8",
29
- "@hh.ru/magritte-ui-form-helper": "2.1.2",
30
- "@hh.ru/magritte-ui-icon": "13.11.2",
29
+ "@hh.ru/magritte-ui-form-helper": "2.1.4",
30
+ "@hh.ru/magritte-ui-icon": "13.11.4",
31
31
  "@hh.ru/magritte-ui-mock-component": "1.1.7"
32
32
  },
33
33
  "peerDependencies": {
@@ -35,5 +35,5 @@
35
35
  "motion": "^12.23.12",
36
36
  "react": ">=18.2.0"
37
37
  },
38
- "gitHead": "9a088ded46caac9429f3e9fadaf055300b36990e"
38
+ "gitHead": "0d147efb00e0803c03ee0ac99525211ce44788e1"
39
39
  }