@hh.ru/magritte-ui-pincode-input 2.1.2 → 2.1.3

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 +34 -34
  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-1-2","pincodeInput":"magritte-pincode-input___RpWyq_2-1-2","medium":"magritte-medium___wfRSc_2-1-2","placeholder":"magritte-placeholder___10kQ0_2-1-2","focus":"magritte-focus___IuhXb_2-1-2","invalid":"magritte-invalid___hB8h2_2-1-2","focus-visible":"magritte-focus-visible___BN1eD_2-1-2","focusVisible":"magritte-focus-visible___BN1eD_2-1-2","loading":"magritte-loading___TbW3K_2-1-2","loading-blink":"magritte-loading-blink___IELw-_2-1-2","loadingBlink":"magritte-loading-blink___IELw-_2-1-2","digit-box":"magritte-digit-box___6J0Q2_2-1-2","digitBox":"magritte-digit-box___6J0Q2_2-1-2","succeed":"magritte-succeed___32cIX_2-1-2","succeed-icon":"magritte-succeed-icon___Vag76_2-1-2","succeedIcon":"magritte-succeed-icon___Vag76_2-1-2","digit-box-container":"magritte-digit-box-container___BqMWw_2-1-2","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-1-2","digits-input":"magritte-digits-input___4QeLj_2-1-2","digitsInput":"magritte-digits-input___4QeLj_2-1-2","caret-left":"magritte-caret-left___iZMuA_2-1-2","caretLeft":"magritte-caret-left___iZMuA_2-1-2","caret-right":"magritte-caret-right___u8wNk_2-1-2","caretRight":"magritte-caret-right___u8wNk_2-1-2","caret-blink":"magritte-caret-blink___-bhg7_2-1-2","caretBlink":"magritte-caret-blink___-bhg7_2-1-2","value-container":"magritte-value-container___9JR3e_2-1-2","valueContainer":"magritte-value-container___9JR3e_2-1-2","ghost-value":"magritte-ghost-value___jPQwY_2-1-2","ghostValue":"magritte-ghost-value___jPQwY_2-1-2","current-value":"magritte-current-value___IT1-R_2-1-2","currentValue":"magritte-current-value___IT1-R_2-1-2"};
13
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-1-3","pincodeInput":"magritte-pincode-input___RpWyq_2-1-3","medium":"magritte-medium___wfRSc_2-1-3","placeholder":"magritte-placeholder___10kQ0_2-1-3","focus":"magritte-focus___IuhXb_2-1-3","invalid":"magritte-invalid___hB8h2_2-1-3","focus-visible":"magritte-focus-visible___BN1eD_2-1-3","focusVisible":"magritte-focus-visible___BN1eD_2-1-3","loading":"magritte-loading___TbW3K_2-1-3","loading-blink":"magritte-loading-blink___IELw-_2-1-3","loadingBlink":"magritte-loading-blink___IELw-_2-1-3","digit-box":"magritte-digit-box___6J0Q2_2-1-3","digitBox":"magritte-digit-box___6J0Q2_2-1-3","succeed":"magritte-succeed___32cIX_2-1-3","succeed-icon":"magritte-succeed-icon___Vag76_2-1-3","succeedIcon":"magritte-succeed-icon___Vag76_2-1-3","digit-box-container":"magritte-digit-box-container___BqMWw_2-1-3","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-1-3","digits-input":"magritte-digits-input___4QeLj_2-1-3","digitsInput":"magritte-digits-input___4QeLj_2-1-3","caret-left":"magritte-caret-left___iZMuA_2-1-3","caretLeft":"magritte-caret-left___iZMuA_2-1-3","caret-right":"magritte-caret-right___u8wNk_2-1-3","caretRight":"magritte-caret-right___u8wNk_2-1-3","caret-blink":"magritte-caret-blink___-bhg7_2-1-3","caretBlink":"magritte-caret-blink___-bhg7_2-1-3","value-container":"magritte-value-container___9JR3e_2-1-3","valueContainer":"magritte-value-container___9JR3e_2-1-3","ghost-value":"magritte-ghost-value___jPQwY_2-1-3","ghostValue":"magritte-ghost-value___jPQwY_2-1-3","current-value":"magritte-current-value___IT1-R_2-1-3","currentValue":"magritte-current-value___IT1-R_2-1-3"};
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-3-0:#7195AF;
51
51
  }
52
- .magritte-pincode-input___RpWyq_2-1-2{
52
+ .magritte-pincode-input___RpWyq_2-1-3{
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-3-0);
74
74
  }
75
- .magritte-pincode-input___RpWyq_2-1-2.magritte-medium___wfRSc_2-1-2{
75
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-medium___wfRSc_2-1-3{
76
76
  font-size:28px;
77
77
  --magritte-pincode-input-padding-horizontal:16px;
78
78
  --magritte-pincode-input-padding-vertical:6px;
@@ -80,56 +80,56 @@
80
80
  border-radius:12px;
81
81
  height:76px;
82
82
  }
83
- .magritte-pincode-input___RpWyq_2-1-2:hover{
83
+ .magritte-pincode-input___RpWyq_2-1-3:hover{
84
84
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-3-0);
85
85
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-3-0);
86
86
  }
87
- .magritte-pincode-input___RpWyq_2-1-2:hover .magritte-placeholder___10kQ0_2-1-2{
87
+ .magritte-pincode-input___RpWyq_2-1-3:hover .magritte-placeholder___10kQ0_2-1-3{
88
88
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-3-0);
89
89
  }
90
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus___IuhXb_2-1-2{
90
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-focus___IuhXb_2-1-3{
91
91
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-3-0);
92
92
  background-color:var(--magritte-color-component-input-background-state-field-focused-v24-3-0);
93
93
  }
94
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus___IuhXb_2-1-2 .magritte-placeholder___10kQ0_2-1-2{
94
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-focus___IuhXb_2-1-3 .magritte-placeholder___10kQ0_2-1-3{
95
95
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-3-0);
96
96
  }
97
- .magritte-pincode-input___RpWyq_2-1-2.magritte-invalid___hB8h2_2-1-2{
97
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-invalid___hB8h2_2-1-3{
98
98
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-3-0);
99
99
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-3-0);
100
100
  }
101
- .magritte-pincode-input___RpWyq_2-1-2.magritte-invalid___hB8h2_2-1-2 .magritte-placeholder___10kQ0_2-1-2{
101
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-invalid___hB8h2_2-1-3 .magritte-placeholder___10kQ0_2-1-3{
102
102
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-3-0);
103
103
  }
104
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus-visible___BN1eD_2-1-2{
104
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-focus-visible___BN1eD_2-1-3{
105
105
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-3-0) solid 4px;
106
106
  }
107
- .magritte-pincode-input___RpWyq_2-1-2.magritte-focus-visible___BN1eD_2-1-2.magritte-invalid___hB8h2_2-1-2{
107
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-focus-visible___BN1eD_2-1-3.magritte-invalid___hB8h2_2-1-3{
108
108
  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-3-0);
109
109
  }
110
- .magritte-pincode-input___RpWyq_2-1-2.magritte-loading___TbW3K_2-1-2{
110
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-loading___TbW3K_2-1-3{
111
111
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-loading-v24-3-0);
112
112
  background-color:var(--magritte-color-component-input-background-state-field-loading-v24-3-0);
113
113
  color:var(--magritte-color-component-input-text-state-content-loading-v24-3-0);
114
114
  pointer-events:none;
115
115
  animation-delay:400ms;
116
- animation-name:magritte-loading-blink___IELw-_2-1-2;
116
+ animation-name:magritte-loading-blink___IELw-_2-1-3;
117
117
  animation-duration:calc(var(--magritte-semantic-animation-time-xl-duration-v24-3-0) + var(--magritte-semantic-animation-time-m-duration-v24-3-0) + 200ms);
118
118
  animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
119
119
  animation-iteration-count:infinite;
120
120
  }
121
- .magritte-pincode-input___RpWyq_2-1-2.magritte-loading___TbW3K_2-1-2 .magritte-digit-box___6J0Q2_2-1-2{
121
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-loading___TbW3K_2-1-3 .magritte-digit-box___6J0Q2_2-1-3{
122
122
  pointer-events:none;
123
123
  }
124
- .magritte-pincode-input___RpWyq_2-1-2.magritte-succeed___32cIX_2-1-2{
124
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-succeed___32cIX_2-1-3{
125
125
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-3-0);
126
126
  background-color:var(--magritte-color-background-positive-v24-3-0);
127
127
  }
128
- .magritte-pincode-input___RpWyq_2-1-2.magritte-succeed___32cIX_2-1-2 .magritte-digit-box___6J0Q2_2-1-2{
128
+ .magritte-pincode-input___RpWyq_2-1-3.magritte-succeed___32cIX_2-1-3 .magritte-digit-box___6J0Q2_2-1-3{
129
129
  opacity:0;
130
130
  visibility:hidden;
131
131
  }
132
- .magritte-succeed-icon___Vag76_2-1-2{
132
+ .magritte-succeed-icon___Vag76_2-1-3{
133
133
  position:absolute;
134
134
  inset:0;
135
135
  display:flex;
@@ -138,7 +138,7 @@
138
138
  pointer-events:none;
139
139
  z-index:1;
140
140
  }
141
- .magritte-digit-box-container___BqMWw_2-1-2{
141
+ .magritte-digit-box-container___BqMWw_2-1-3{
142
142
  display:flex;
143
143
  gap:var(--magritte-pincode-input-gap);
144
144
  position:absolute;
@@ -149,7 +149,7 @@
149
149
  pointer-events:none;
150
150
  z-index:0;
151
151
  }
152
- .magritte-digit-box___6J0Q2_2-1-2{
152
+ .magritte-digit-box___6J0Q2_2-1-3{
153
153
  flex:0 0 var(--magritte-digit-box-width);
154
154
  pointer-events:auto;
155
155
  display:flex;
@@ -160,13 +160,13 @@
160
160
  transition-duration:var(--magritte-semantic-animation-time-m-duration-v24-3-0);
161
161
  transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v24-3-0);
162
162
  }
163
- .magritte-digit-box___6J0Q2_2-1-2::selection{
163
+ .magritte-digit-box___6J0Q2_2-1-3::selection{
164
164
  background-color:transparent;
165
165
  }
166
- .magritte-digit-box___6J0Q2_2-1-2::-moz-selection{
166
+ .magritte-digit-box___6J0Q2_2-1-3::-moz-selection{
167
167
  background-color:transparent;
168
168
  }
169
- .magritte-digits-input___4QeLj_2-1-2{
169
+ .magritte-digits-input___4QeLj_2-1-3{
170
170
  display:block;
171
171
  position:absolute;
172
172
  top:0;
@@ -184,50 +184,50 @@
184
184
  appearance:none;
185
185
  caret-color:transparent;
186
186
  }
187
- .magritte-digits-input___4QeLj_2-1-2::selection{
187
+ .magritte-digits-input___4QeLj_2-1-3::selection{
188
188
  background-color:transparent;
189
189
  appearance:none;
190
190
  }
191
- .magritte-digits-input___4QeLj_2-1-2::-moz-selection{
191
+ .magritte-digits-input___4QeLj_2-1-3::-moz-selection{
192
192
  background-color:transparent;
193
193
  appearance:none;
194
194
  }
195
- .magritte-caret-left___iZMuA_2-1-2::before,
196
- .magritte-caret-right___u8wNk_2-1-2::after{
195
+ .magritte-caret-left___iZMuA_2-1-3::before,
196
+ .magritte-caret-right___u8wNk_2-1-3::after{
197
197
  content:'';
198
198
  position:absolute;
199
199
  top:50%;
200
200
  transform:translateY(-50%);
201
201
  block-size:1em;
202
202
  border-left:1px solid var(--magritte-color-text-primary-v24-3-0);
203
- animation:magritte-caret-blink___-bhg7_2-1-2 1s steps(1) infinite;
203
+ animation:magritte-caret-blink___-bhg7_2-1-3 1s steps(1) infinite;
204
204
  }
205
- .magritte-caret-left___iZMuA_2-1-2::before{
205
+ .magritte-caret-left___iZMuA_2-1-3::before{
206
206
  left:-1px;
207
207
  }
208
- .magritte-caret-right___u8wNk_2-1-2::after{
208
+ .magritte-caret-right___u8wNk_2-1-3::after{
209
209
  right:-1px;
210
210
  }
211
- .magritte-placeholder___10kQ0_2-1-2{
211
+ .magritte-placeholder___10kQ0_2-1-3{
212
212
  color:var(--magritte-color-component-input-text-placeholder-v24-3-0);
213
213
  }
214
- .magritte-value-container___9JR3e_2-1-2{
214
+ .magritte-value-container___9JR3e_2-1-3{
215
215
  pointer-events:none;
216
216
  position:relative;
217
217
  min-width:20px;
218
218
  text-align:center;
219
219
  display:grid;
220
220
  }
221
- .magritte-ghost-value___jPQwY_2-1-2{
221
+ .magritte-ghost-value___jPQwY_2-1-3{
222
222
  display:inline-block;
223
223
  visibility:hidden;
224
224
  }
225
- @keyframes magritte-caret-blink___-bhg7_2-1-2{
225
+ @keyframes magritte-caret-blink___-bhg7_2-1-3{
226
226
  50%{
227
227
  opacity:0;
228
228
  }
229
229
  }
230
- @keyframes magritte-loading-blink___IELw-_2-1-2{
230
+ @keyframes magritte-loading-blink___IELw-_2-1-3{
231
231
  0%{
232
232
  opacity:1;
233
233
  }
@@ -241,7 +241,7 @@
241
241
  opacity:1;
242
242
  }
243
243
  }
244
- .magritte-current-value___IT1-R_2-1-2{
244
+ .magritte-current-value___IT1-R_2-1-3{
245
245
  display:inline-block;
246
246
  grid-area:1 / 1;
247
247
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "2.1.2",
3
+ "version": "2.1.3",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -25,8 +25,8 @@
25
25
  "@hh.ru/magritte-common-keyboard": "4.1.5",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
27
27
  "@hh.ru/magritte-design-tokens": "24.3.0",
28
- "@hh.ru/magritte-ui-form-helper": "2.0.21",
29
- "@hh.ru/magritte-ui-icon": "13.7.3",
28
+ "@hh.ru/magritte-ui-form-helper": "2.0.22",
29
+ "@hh.ru/magritte-ui-icon": "13.7.4",
30
30
  "@hh.ru/magritte-ui-mock-component": "1.1.6"
31
31
  },
32
32
  "peerDependencies": {
@@ -34,5 +34,5 @@
34
34
  "motion": "^12.23.12",
35
35
  "react": ">=18.2.0"
36
36
  },
37
- "gitHead": "993ab7db5b0e21a46325640127f7abe9abfe799f"
37
+ "gitHead": "8803ab9556fee80accd1474be9447feb1be03f3c"
38
38
  }