@hh.ru/magritte-ui-pincode-input 2.5.8 → 2.5.10

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 +36 -36
  3. package/package.json +4 -4
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-5-8","pincodeInput":"magritte-pincode-input___RpWyq_2-5-8","medium":"magritte-medium___wfRSc_2-5-8","focus":"magritte-focus___IuhXb_2-5-8","invalid":"magritte-invalid___hB8h2_2-5-8","loading":"magritte-loading___TbW3K_2-5-8","succeed":"magritte-succeed___32cIX_2-5-8","placeholder":"magritte-placeholder___10kQ0_2-5-8","focus-visible":"magritte-focus-visible___BN1eD_2-5-8","focusVisible":"magritte-focus-visible___BN1eD_2-5-8","loading-blink":"magritte-loading-blink___IELw-_2-5-8","loadingBlink":"magritte-loading-blink___IELw-_2-5-8","digit-box":"magritte-digit-box___6J0Q2_2-5-8","digitBox":"magritte-digit-box___6J0Q2_2-5-8","succeed-icon":"magritte-succeed-icon___Vag76_2-5-8","succeedIcon":"magritte-succeed-icon___Vag76_2-5-8","digit-box-container":"magritte-digit-box-container___BqMWw_2-5-8","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-5-8","digits-input":"magritte-digits-input___4QeLj_2-5-8","digitsInput":"magritte-digits-input___4QeLj_2-5-8","caret-left":"magritte-caret-left___iZMuA_2-5-8","caretLeft":"magritte-caret-left___iZMuA_2-5-8","caret-right":"magritte-caret-right___u8wNk_2-5-8","caretRight":"magritte-caret-right___u8wNk_2-5-8","caret-blink":"magritte-caret-blink___-bhg7_2-5-8","caretBlink":"magritte-caret-blink___-bhg7_2-5-8","value-container":"magritte-value-container___9JR3e_2-5-8","valueContainer":"magritte-value-container___9JR3e_2-5-8","ghost-value":"magritte-ghost-value___jPQwY_2-5-8","ghostValue":"magritte-ghost-value___jPQwY_2-5-8","current-value":"magritte-current-value___IT1-R_2-5-8","currentValue":"magritte-current-value___IT1-R_2-5-8"};
13
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-5-10","pincodeInput":"magritte-pincode-input___RpWyq_2-5-10","medium":"magritte-medium___wfRSc_2-5-10","focus":"magritte-focus___IuhXb_2-5-10","invalid":"magritte-invalid___hB8h2_2-5-10","loading":"magritte-loading___TbW3K_2-5-10","succeed":"magritte-succeed___32cIX_2-5-10","placeholder":"magritte-placeholder___10kQ0_2-5-10","focus-visible":"magritte-focus-visible___BN1eD_2-5-10","focusVisible":"magritte-focus-visible___BN1eD_2-5-10","loading-blink":"magritte-loading-blink___IELw-_2-5-10","loadingBlink":"magritte-loading-blink___IELw-_2-5-10","digit-box":"magritte-digit-box___6J0Q2_2-5-10","digitBox":"magritte-digit-box___6J0Q2_2-5-10","succeed-icon":"magritte-succeed-icon___Vag76_2-5-10","succeedIcon":"magritte-succeed-icon___Vag76_2-5-10","digit-box-container":"magritte-digit-box-container___BqMWw_2-5-10","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-5-10","digits-input":"magritte-digits-input___4QeLj_2-5-10","digitsInput":"magritte-digits-input___4QeLj_2-5-10","caret-left":"magritte-caret-left___iZMuA_2-5-10","caretLeft":"magritte-caret-left___iZMuA_2-5-10","caret-right":"magritte-caret-right___u8wNk_2-5-10","caretRight":"magritte-caret-right___u8wNk_2-5-10","caret-blink":"magritte-caret-blink___-bhg7_2-5-10","caretBlink":"magritte-caret-blink___-bhg7_2-5-10","value-container":"magritte-value-container___9JR3e_2-5-10","valueContainer":"magritte-value-container___9JR3e_2-5-10","ghost-value":"magritte-ghost-value___jPQwY_2-5-10","ghostValue":"magritte-ghost-value___jPQwY_2-5-10","current-value":"magritte-current-value___IT1-R_2-5-10","currentValue":"magritte-current-value___IT1-R_2-5-10"};
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
@@ -49,7 +49,7 @@
49
49
  .magritte-zp-day-theme{
50
50
  --magritte-color-component-input-stroke-state-field-focused-v24-7-0:#7195AF;
51
51
  }
52
- .magritte-pincode-input___RpWyq_2-5-8{
52
+ .magritte-pincode-input___RpWyq_2-5-10{
53
53
  --magritte-pincode-input-padding-horizontal:20px;
54
54
  --magritte-pincode-input-padding-vertical:8px;
55
55
  --magritte-pincode-input-gap:6px;
@@ -72,7 +72,7 @@
72
72
  line-height:40px;
73
73
  color:var(--magritte-color-component-input-text-state-content-focused-v24-7-0);
74
74
  }
75
- .magritte-pincode-input___RpWyq_2-5-8.magritte-medium___wfRSc_2-5-8{
75
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-medium___wfRSc_2-5-10{
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-5-8:not(.magritte-focus___IuhXb_2-5-8):not(.magritte-invalid___hB8h2_2-5-8):not(.magritte-loading___TbW3K_2-5-8):not(.magritte-succeed___32cIX_2-5-8):hover{
84
+ body.magritte-old-layout .magritte-pincode-input___RpWyq_2-5-10:not(.magritte-focus___IuhXb_2-5-10):not(.magritte-invalid___hB8h2_2-5-10):not(.magritte-loading___TbW3K_2-5-10):not(.magritte-succeed___32cIX_2-5-10):hover{
85
85
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-7-0);
86
86
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-7-0);
87
87
  }
88
- body.magritte-old-layout .magritte-pincode-input___RpWyq_2-5-8:not(.magritte-focus___IuhXb_2-5-8):not(.magritte-invalid___hB8h2_2-5-8):not(.magritte-loading___TbW3K_2-5-8):not(.magritte-succeed___32cIX_2-5-8):hover .magritte-placeholder___10kQ0_2-5-8{
88
+ body.magritte-old-layout .magritte-pincode-input___RpWyq_2-5-10:not(.magritte-focus___IuhXb_2-5-10):not(.magritte-invalid___hB8h2_2-5-10):not(.magritte-loading___TbW3K_2-5-10):not(.magritte-succeed___32cIX_2-5-10):hover .magritte-placeholder___10kQ0_2-5-10{
89
89
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-7-0);
90
90
  }
91
91
  }
92
92
  @media (min-width: 1024px){
93
- body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-5-8:not(.magritte-focus___IuhXb_2-5-8):not(.magritte-invalid___hB8h2_2-5-8):not(.magritte-loading___TbW3K_2-5-8):not(.magritte-succeed___32cIX_2-5-8):hover{
93
+ body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-5-10:not(.magritte-focus___IuhXb_2-5-10):not(.magritte-invalid___hB8h2_2-5-10):not(.magritte-loading___TbW3K_2-5-10):not(.magritte-succeed___32cIX_2-5-10):hover{
94
94
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-7-0);
95
95
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-7-0);
96
96
  }
97
- body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-5-8:not(.magritte-focus___IuhXb_2-5-8):not(.magritte-invalid___hB8h2_2-5-8):not(.magritte-loading___TbW3K_2-5-8):not(.magritte-succeed___32cIX_2-5-8):hover .magritte-placeholder___10kQ0_2-5-8{
97
+ body:not(.magritte-old-layout) .magritte-pincode-input___RpWyq_2-5-10:not(.magritte-focus___IuhXb_2-5-10):not(.magritte-invalid___hB8h2_2-5-10):not(.magritte-loading___TbW3K_2-5-10):not(.magritte-succeed___32cIX_2-5-10):hover .magritte-placeholder___10kQ0_2-5-10{
98
98
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-7-0);
99
99
  }
100
100
  }
101
- .magritte-pincode-input___RpWyq_2-5-8.magritte-focus___IuhXb_2-5-8{
101
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-focus___IuhXb_2-5-10{
102
102
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-7-0);
103
103
  background-color:var(--magritte-color-component-input-background-state-field-focused-v24-7-0);
104
104
  }
105
- .magritte-pincode-input___RpWyq_2-5-8.magritte-focus___IuhXb_2-5-8 .magritte-placeholder___10kQ0_2-5-8{
105
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-focus___IuhXb_2-5-10 .magritte-placeholder___10kQ0_2-5-10{
106
106
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-7-0);
107
107
  }
108
- .magritte-pincode-input___RpWyq_2-5-8.magritte-invalid___hB8h2_2-5-8{
108
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-invalid___hB8h2_2-5-10{
109
109
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-7-0);
110
110
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-7-0);
111
111
  }
112
- .magritte-pincode-input___RpWyq_2-5-8.magritte-invalid___hB8h2_2-5-8 .magritte-placeholder___10kQ0_2-5-8{
112
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-invalid___hB8h2_2-5-10 .magritte-placeholder___10kQ0_2-5-10{
113
113
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-7-0);
114
114
  }
115
- .magritte-pincode-input___RpWyq_2-5-8.magritte-focus-visible___BN1eD_2-5-8{
115
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-focus-visible___BN1eD_2-5-10{
116
116
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-7-0) solid 4px;
117
117
  }
118
- .magritte-pincode-input___RpWyq_2-5-8.magritte-focus-visible___BN1eD_2-5-8.magritte-invalid___hB8h2_2-5-8{
118
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-focus-visible___BN1eD_2-5-10.magritte-invalid___hB8h2_2-5-10{
119
119
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-7-0);
120
120
  }
121
- .magritte-pincode-input___RpWyq_2-5-8.magritte-loading___TbW3K_2-5-8{
121
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-loading___TbW3K_2-5-10{
122
122
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-7-0);
123
123
  background-color:var(--magritte-color-component-input-background-state-field-loading-v24-7-0);
124
124
  color:var(--magritte-color-component-input-text-state-content-loading-v24-7-0);
125
125
  pointer-events:none;
126
126
  animation-delay:400ms;
127
- animation-name:magritte-loading-blink___IELw-_2-5-8;
127
+ animation-name:magritte-loading-blink___IELw-_2-5-10;
128
128
  animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-7-0) + var(--magritte-semantic-animation-time-m-duration-v24-7-0) + 200ms);
129
129
  animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-7-0);
130
130
  animation-iteration-count:infinite;
131
131
  }
132
- .magritte-pincode-input___RpWyq_2-5-8.magritte-loading___TbW3K_2-5-8 .magritte-digit-box___6J0Q2_2-5-8{
132
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-loading___TbW3K_2-5-10 .magritte-digit-box___6J0Q2_2-5-10{
133
133
  pointer-events:none;
134
134
  }
135
- .magritte-pincode-input___RpWyq_2-5-8.magritte-succeed___32cIX_2-5-8{
135
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-succeed___32cIX_2-5-10{
136
136
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-7-0);
137
137
  background-color:var(--magritte-color-background-positive-v24-7-0);
138
138
  }
139
- .magritte-pincode-input___RpWyq_2-5-8.magritte-succeed___32cIX_2-5-8 .magritte-digit-box___6J0Q2_2-5-8{
139
+ .magritte-pincode-input___RpWyq_2-5-10.magritte-succeed___32cIX_2-5-10 .magritte-digit-box___6J0Q2_2-5-10{
140
140
  opacity:0;
141
141
  visibility:hidden;
142
142
  }
143
- .magritte-succeed-icon___Vag76_2-5-8{
143
+ .magritte-succeed-icon___Vag76_2-5-10{
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-5-8{
152
+ .magritte-digit-box-container___BqMWw_2-5-10{
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-5-8{
163
+ .magritte-digit-box___6J0Q2_2-5-10{
164
164
  flex:0 0 var(--magritte-digit-box-width);
165
165
  pointer-events:auto;
166
166
  display:flex;
@@ -171,13 +171,13 @@
171
171
  transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-7-0);
172
172
  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-7-0);
173
173
  }
174
- .magritte-digit-box___6J0Q2_2-5-8::selection{
174
+ .magritte-digit-box___6J0Q2_2-5-10::selection{
175
175
  background-color:transparent;
176
176
  }
177
- .magritte-digit-box___6J0Q2_2-5-8::-moz-selection{
177
+ .magritte-digit-box___6J0Q2_2-5-10::-moz-selection{
178
178
  background-color:transparent;
179
179
  }
180
- .magritte-digits-input___4QeLj_2-5-8{
180
+ .magritte-digits-input___4QeLj_2-5-10{
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-5-8::selection{
198
+ .magritte-digits-input___4QeLj_2-5-10::selection{
199
199
  background-color:transparent;
200
200
  appearance:none;
201
201
  }
202
- .magritte-digits-input___4QeLj_2-5-8::-moz-selection{
202
+ .magritte-digits-input___4QeLj_2-5-10::-moz-selection{
203
203
  background-color:transparent;
204
204
  appearance:none;
205
205
  }
206
- .magritte-caret-left___iZMuA_2-5-8::before,
207
- .magritte-caret-right___u8wNk_2-5-8::after{
206
+ .magritte-caret-left___iZMuA_2-5-10::before,
207
+ .magritte-caret-right___u8wNk_2-5-10::after{
208
208
  content:'';
209
209
  position:absolute;
210
210
  top:50%;
211
211
  transform:translateY(-50%);
212
212
  block-size:1em;
213
213
  border-left:1px solid var(--magritte-color-text-primary-v24-7-0);
214
- animation:magritte-caret-blink___-bhg7_2-5-8 1s steps(1) infinite;
214
+ animation:magritte-caret-blink___-bhg7_2-5-10 1s steps(1) infinite;
215
215
  }
216
- .magritte-caret-left___iZMuA_2-5-8::before{
216
+ .magritte-caret-left___iZMuA_2-5-10::before{
217
217
  left:-1px;
218
218
  }
219
- .magritte-caret-right___u8wNk_2-5-8::after{
219
+ .magritte-caret-right___u8wNk_2-5-10::after{
220
220
  right:-1px;
221
221
  }
222
- .magritte-placeholder___10kQ0_2-5-8{
222
+ .magritte-placeholder___10kQ0_2-5-10{
223
223
  color:var(--magritte-color-component-input-text-placeholder-v24-7-0);
224
224
  }
225
- .magritte-value-container___9JR3e_2-5-8{
225
+ .magritte-value-container___9JR3e_2-5-10{
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-5-8{
232
+ .magritte-ghost-value___jPQwY_2-5-10{
233
233
  display:inline-block;
234
234
  visibility:hidden;
235
235
  }
236
- @keyframes magritte-caret-blink___-bhg7_2-5-8{
236
+ @keyframes magritte-caret-blink___-bhg7_2-5-10{
237
237
  50%{
238
238
  opacity:0;
239
239
  }
240
240
  }
241
- @keyframes magritte-loading-blink___IELw-_2-5-8{
241
+ @keyframes magritte-loading-blink___IELw-_2-5-10{
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-5-8{
255
+ .magritte-current-value___IT1-R_2-5-10{
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.5.8",
3
+ "version": "2.5.10",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -26,8 +26,8 @@
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.11",
27
27
  "@hh.ru/magritte-design-tokens": "24.7.0",
28
28
  "@hh.ru/magritte-ui-breakpoint": "6.0.8",
29
- "@hh.ru/magritte-ui-form-helper": "2.1.9",
30
- "@hh.ru/magritte-ui-icon": "14.2.2",
29
+ "@hh.ru/magritte-ui-form-helper": "2.1.10",
30
+ "@hh.ru/magritte-ui-icon": "14.2.3",
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": "51be7ed6961adec8151cea784853cb439bcf92c8"
38
+ "gitHead": "00be18722ce9e4f80437fa85595a5efa344d3e28"
39
39
  }