@vchasno/ui-kit 0.3.30 → 0.3.32

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 (18) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/Select/index.cjs.js +1 -1
  3. package/dist/Select/index.js +1 -1
  4. package/dist/SelectCreatable/index.cjs.js +1 -1
  5. package/dist/SelectCreatable/index.js +1 -1
  6. package/dist/Snackbar/index.cjs.js +5 -5
  7. package/dist/Snackbar/index.cjs.js.map +1 -1
  8. package/dist/Snackbar/index.js +5 -5
  9. package/dist/Snackbar/index.js.map +1 -1
  10. package/dist/css/Checkbox.global.css +3 -1
  11. package/dist/css/Input.global.css +8 -0
  12. package/dist/css/MaskInput.global.css +0 -4
  13. package/dist/css/Select.global.css +5 -0
  14. package/dist/css/Title.global.css +11 -11
  15. package/dist/css/_theme.css +21 -4
  16. package/dist/index.js +5 -5
  17. package/dist/index.js.map +1 -1
  18. package/package.json +1 -1
package/dist/css/Checkbox.global.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: inline-flex;
3
3
  align-items: center;
4
4
  cursor: pointer;
5
- gap: 10px;
5
+ gap: 8px;
6
6
  user-select: none;
7
7
  }
8
8
 
@@ -48,6 +48,7 @@
48
48
  transform: scale(1) translateZ(0);
49
49
  }
50
50
 
51
+ .vchasno-ui-checkbox.--hover > input:not(:disabled) + .vchasno-ui-checkbox__box,
51
52
  .vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,
52
53
  .vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {
53
54
  border-color: var(--vchasno-ui-checkbox-bg-color, #3069fe);
@@ -55,6 +56,7 @@
55
56
  }
56
57
 
57
58
  .vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {
59
+ border-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
58
60
  background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);
59
61
  }
60
62
 
package/dist/css/Input.global.css CHANGED
@@ -88,3 +88,11 @@
88
88
  cursor: not-allowed;
89
89
  opacity: 0.8;
90
90
  }
91
+
92
+ .vchasno-ui-input:has(.vchasno-ui-label-text) input::placeholder {
93
+ visibility: hidden;
94
+ }
95
+
96
+ .vchasno-ui-input:focus-within:has(.vchasno-ui-label-text) input::placeholder {
97
+ visibility: visible;
98
+ }
package/dist/css/MaskInput.global.css CHANGED
@@ -10,7 +10,3 @@
10
10
  line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);
11
11
  transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
12
12
  }
13
-
14
- .vchasno-ui-mask-input:focus::placeholder {
15
- color: transparent;
16
- }
package/dist/css/Select.global.css CHANGED
@@ -135,6 +135,11 @@
135
135
  font-weight: 400;
136
136
  }
137
137
 
138
+ .vchasno-ui-select:not(:focus-within, :not(:has(.vchasno-ui-label-text)))
139
+ .vchasno-ui-select__placeholder {
140
+ visibility: hidden;
141
+ }
142
+
138
143
  .vchasno-ui-select .vchasno-ui-select__clear-indicator {
139
144
  padding: 0;
140
145
  border-radius: 4px;
package/dist/css/Title.global.css CHANGED
@@ -15,34 +15,34 @@
15
15
  h1.vchasno-ui-title,
16
16
  .vchasno-ui-title h1 {
17
17
  font-size: 32px;
18
- font-weight: 500;
19
- line-height: 1.35;
18
+ font-weight: 700;
19
+ line-height: 40px;
20
20
  }
21
21
 
22
22
  h2.vchasno-ui-title,
23
23
  .vchasno-ui-title h2 {
24
- font-size: 30px;
25
- font-weight: 500;
26
- line-height: 1.35;
24
+ font-size: 24px;
25
+ font-weight: 700;
26
+ line-height: 28px;
27
27
  }
28
28
 
29
29
  h3.vchasno-ui-title,
30
30
  .vchasno-ui-title h3 {
31
- font-size: 24px;
31
+ font-size: 20px;
32
32
  font-weight: 500;
33
- line-height: 1.35;
33
+ line-height: 24px;
34
34
  }
35
35
 
36
36
  h4.vchasno-ui-title,
37
37
  .vchasno-ui-title h4 {
38
- font-size: 20px;
38
+ font-size: 16px;
39
39
  font-weight: 400;
40
- line-height: 1.4;
40
+ line-height: 20px;
41
41
  }
42
42
 
43
43
  h5.vchasno-ui-title,
44
44
  .vchasno-ui-title h5 {
45
- font-size: 16px;
45
+ font-size: 12px;
46
46
  font-weight: 400;
47
- line-height: 1.5;
47
+ line-height: 14px;
48
48
  }
package/dist/css/_theme.css CHANGED
@@ -42,7 +42,7 @@
42
42
  --vchasno-ui-checkbox-disabled-bg: #b6cadb;
43
43
  --vchasno-ui-checkbox-border-color: #b6cadb;
44
44
  --vchasno-ui-checkbox-icon-color: #fff;
45
- --vchasno-ui-checkbox-font-size: 12px;
45
+ --vchasno-ui-checkbox-font-size: 14px;
46
46
  --vchasno-ui-select-option-bg-selected: #f3f6f8;
47
47
  --vchasno-ui-select-option-color-selected: #333;
48
48
  --vchasno-ui-select-menu-border-color: transparent;
@@ -142,11 +142,14 @@
142
142
  }
143
143
 
144
144
  :root .vchasno-ui-kit-theme-edo {
145
+ /* Button */
145
146
  --vchasno-ui-btn-primary-bg: #ffb200;
146
147
  --vchasno-ui-btn-primary-hover-bg: #ff9c01;
147
148
  --vchasno-ui-input-border-color-focused: #ffb200;
148
- --vchasno-ui-checkbox-bg-color: #ffb200;
149
- --vchasno-ui-checkbox-outline-color: #fff0ce;
149
+
150
+ /* Checkbox */
151
+ --vchasno-ui-checkbox-bg-color: #1a66c8;
152
+ --vchasno-ui-checkbox-outline-color: #e0eeff;
150
153
  --vchasno-ui-select-menu-border-color: #ffb200;
151
154
  --vchasno-ui-calendar-color: #ffb200;
152
155
  --vchasno-ui-pagination-border-color: #ffb200;
@@ -158,21 +161,35 @@
158
161
  --vchasno-ui-input-font-color: #333;
159
162
  --vchasno-ui-text-primary-color: #333;
160
163
  --vchasno-ui-input-bg-color: #fff;
161
- --vchasno-ui-checkbox-font-size: 13px;
162
164
  }
163
165
 
164
166
  :root .vchasno-ui-kit-theme-edi {
167
+ /* Button */
165
168
  --vchasno-ui-btn-primary-bg: #00c5ff;
166
169
  --vchasno-ui-btn-primary-hover-bg: #00aee2;
170
+
171
+ /* Checkbox */
172
+ --vchasno-ui-checkbox-bg-color: #00c5ff;
173
+ --vchasno-ui-checkbox-outline-color: #d8f4fc;
167
174
  }
168
175
 
169
176
  :root .vchasno-ui-kit-theme-kasa,
170
177
  :root .vchasno-ui-kit-theme-dm {
178
+ /* Button */
171
179
  --vchasno-ui-btn-primary-bg: #e579ff;
172
180
  --vchasno-ui-btn-primary-hover-bg: #c055da;
181
+
182
+ /* Checkbox */
183
+ --vchasno-ui-checkbox-bg-color: #e579ff;
184
+ --vchasno-ui-checkbox-outline-color: #fbe6ff;
173
185
  }
174
186
 
175
187
  :root .vchasno-ui-kit-theme-kep {
188
+ /* Button */
176
189
  --vchasno-ui-btn-primary-bg: #ff5a5f;
177
190
  --vchasno-ui-btn-primary-hover-bg: #e75459;
191
+
192
+ /* Checkbox */
193
+ --vchasno-ui-checkbox-bg-color: #47a0e4;
194
+ --vchasno-ui-checkbox-outline-color: #e0f1ff;
178
195
  }
package/dist/index.js CHANGED
@@ -278,7 +278,7 @@ var LabelText = function (_a) {
278
278
  React$1.createElement("sup", null, "*")));
279
279
  };
280
280
 
281
- var css_248z$i = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n min-height: 50px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 16px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n background-color: var(--vchasno-ui-input-bg-color);\n outline: solid 3px transparent;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n margin-right: 5px;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
281
+ var css_248z$i = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n min-height: 50px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 16px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n background-color: var(--vchasno-ui-input-bg-color);\n outline: solid 3px transparent;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n margin-right: 5px;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-input:has(.vchasno-ui-label-text) input::placeholder {\n visibility: hidden;\n}\n\n.vchasno-ui-input:focus-within:has(.vchasno-ui-label-text) input::placeholder {\n visibility: visible;\n}\n";
282
282
  styleInject(css_248z$i);
283
283
 
284
284
  var Input = function (_a) {
@@ -292,7 +292,7 @@ var Input = function (_a) {
292
292
  React$1.createElement("span", { className: "vchasno-ui-input__wrapper" },
293
293
  startElement && (React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement)),
294
294
  children,
295
- React$1.createElement(LabelText, null, label),
295
+ label && React$1.createElement(LabelText, null, label),
296
296
  React$1.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React$1.createElement(Spinner, { height: "100%" })),
297
297
  endElement),
298
298
  hideEmptyMeta && !error && !hint ? null : React$1.createElement(InputMeta, { error: error, hint: hint })));
@@ -308,7 +308,7 @@ var reactTextMask = {exports: {}};
308
308
  var reactTextMaskExports = reactTextMask.exports;
309
309
  var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
310
310
 
311
- var css_248z$h = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-mask-input:focus::placeholder {\n color: transparent;\n}\n";
311
+ var css_248z$h = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n";
312
312
  styleInject(css_248z$h);
313
313
 
314
314
  var MaskInput = function (_a) {
@@ -443,7 +443,7 @@ Text.displayName = 'Text';
443
443
  var css_248z$d = ".--text-start {\n text-align: start;\n}\n\n.--text-center {\n text-align: center;\n}\n\n.--text-end {\n text-align: end;\n}\n\n.--text-justify {\n text-align: justify;\n}\n";
444
444
  styleInject(css_248z$d);
445
445
 
446
- var css_248z$c = ".vchasno-ui-title {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--pretty {\n text-wrap: pretty;\n}\n\n.vchasno-ui-title.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n font-size: 32px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n font-size: 30px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n font-size: 24px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n}\n";
446
+ var css_248z$c = ".vchasno-ui-title {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--pretty {\n text-wrap: pretty;\n}\n\n.vchasno-ui-title.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n font-size: 32px;\n font-weight: 700;\n line-height: 40px;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n font-size: 16px;\n font-weight: 400;\n line-height: 20px;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n font-size: 12px;\n font-weight: 400;\n line-height: 14px;\n}\n";
447
447
  styleInject(css_248z$c);
448
448
 
449
449
  var Title = React$1.forwardRef(function (_a, ref) {
@@ -3022,7 +3022,7 @@ var Tabs = function (_a) {
3022
3022
  React$1.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
3023
3023
  };
3024
3024
 
3025
- var css_248z$6 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #3069fe);\n outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
3025
+ var css_248z$6 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 8px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox.--hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #3069fe);\n outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
3026
3026
  styleInject(css_248z$6);
3027
3027
 
3028
3028
  var Checkbox = React$1.forwardRef(function (_a, ref) {