@snack-uikit/chips 0.28.13 → 0.28.14

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 (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/ChipAssist/styles.module.css +33 -29
  3. package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css +60 -52
  4. package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.d.ts +1 -1
  5. package/dist/cjs/components/ChipChoice/components/ChipChoiceDateRange.js +1 -1
  6. package/dist/cjs/components/ChipChoice/styles.module.css +30 -26
  7. package/dist/cjs/components/ChipToggle/styles.module.css +14 -12
  8. package/dist/esm/components/ChipAssist/styles.module.css +33 -29
  9. package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css +60 -52
  10. package/dist/esm/components/ChipChoice/components/ChipChoiceDate.d.ts +1 -1
  11. package/dist/esm/components/ChipChoice/components/ChipChoiceDateRange.js +1 -1
  12. package/dist/esm/components/ChipChoice/styles.module.css +30 -26
  13. package/dist/esm/components/ChipToggle/styles.module.css +14 -12
  14. package/package.json +7 -7
  15. package/src/components/ChipChoice/components/ChipChoiceDate.tsx +1 -1
  16. package/src/components/ChipChoice/components/ChipChoiceDateRange.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## <small>0.28.14 (2026-02-18)</small>
7
+
8
+ * feat(PDS-2680)!: added mode "month-range" and "year-range" for calendar & rename "range" in "date-ra ([6fbf360](https://github.com/cloud-ru-tech/snack-uikit/commit/6fbf360))
9
+
10
+
11
+
12
+
13
+
6
14
  ## <small>0.28.13 (2026-01-19)</small>
7
15
 
8
16
  * chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
package/dist/cjs/components/ChipAssist/styles.module.css CHANGED
@@ -15,10 +15,6 @@
15
15
  border-style:solid;
16
16
  outline:0;
17
17
  outline-offset:0;
18
- justify-content:center;
19
- color:var(--sys-neutral-text-support, #6d707f);
20
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
21
- border-color:var(--sys-neutral-decor-default, #dde0ea);
22
18
  }
23
19
  .assistChip .spinner{
24
20
  display:inline-flex;
@@ -35,13 +31,6 @@
35
31
  align-items:center;
36
32
  min-width:0;
37
33
  }
38
- .assistChip[data-size=xs]{
39
- height:var(--size-chips-xs, 24px);
40
- padding-left:var(--space-chips-container-padding-xs, 3px);
41
- padding-right:var(--space-chips-container-padding-xs, 3px);
42
- border-radius:var(--radius-chips-xs, 12px);
43
- border-width:var(--border-width-chips-single, 1px);
44
- }
45
34
  .assistChip[data-size=xs] .label{
46
35
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
47
36
  font-weight:var(--sans-label-s-font-weight, Semibold);
@@ -54,11 +43,11 @@
54
43
  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
55
44
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
56
45
  }
57
- .assistChip[data-size=s]{
58
- height:var(--size-chips-s, 32px);
59
- padding-left:var(--space-chips-container-padding-s, 3px);
60
- padding-right:var(--space-chips-container-padding-s, 3px);
61
- border-radius:var(--radius-chips-s, 16px);
46
+ .assistChip[data-size=xs]{
47
+ height:var(--size-chips-xs, 24px);
48
+ padding-left:var(--space-chips-container-padding-xs, 3px);
49
+ padding-right:var(--space-chips-container-padding-xs, 3px);
50
+ border-radius:var(--radius-chips-xs, 12px);
62
51
  border-width:var(--border-width-chips-single, 1px);
63
52
  }
64
53
  .assistChip[data-size=s] .label{
@@ -73,11 +62,11 @@
73
62
  padding-left:var(--space-chips-label-layout-padding-s, 4px);
74
63
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
75
64
  }
76
- .assistChip[data-size=m]{
77
- height:var(--size-chips-m, 40px);
78
- padding-left:var(--space-chips-container-padding-m, 7px);
79
- padding-right:var(--space-chips-container-padding-m, 7px);
80
- border-radius:var(--radius-chips-m, 20px);
65
+ .assistChip[data-size=s]{
66
+ height:var(--size-chips-s, 32px);
67
+ padding-left:var(--space-chips-container-padding-s, 3px);
68
+ padding-right:var(--space-chips-container-padding-s, 3px);
69
+ border-radius:var(--radius-chips-s, 16px);
81
70
  border-width:var(--border-width-chips-single, 1px);
82
71
  }
83
72
  .assistChip[data-size=m] .label{
@@ -92,11 +81,11 @@
92
81
  padding-left:var(--space-chips-label-layout-padding-m, 8px);
93
82
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
94
83
  }
95
- .assistChip[data-size=l]{
96
- height:var(--size-chips-l, 48px);
97
- padding-left:var(--space-chips-container-padding-l, 11px);
98
- padding-right:var(--space-chips-container-padding-l, 11px);
99
- border-radius:var(--radius-chips-l, 24px);
84
+ .assistChip[data-size=m]{
85
+ height:var(--size-chips-m, 40px);
86
+ padding-left:var(--space-chips-container-padding-m, 7px);
87
+ padding-right:var(--space-chips-container-padding-m, 7px);
88
+ border-radius:var(--radius-chips-m, 20px);
100
89
  border-width:var(--border-width-chips-single, 1px);
101
90
  }
102
91
  .assistChip[data-size=l] .label{
@@ -111,6 +100,19 @@
111
100
  padding-left:var(--space-chips-label-layout-padding-l, 12px);
112
101
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
113
102
  }
103
+ .assistChip[data-size=l]{
104
+ height:var(--size-chips-l, 48px);
105
+ padding-left:var(--space-chips-container-padding-l, 11px);
106
+ padding-right:var(--space-chips-container-padding-l, 11px);
107
+ border-radius:var(--radius-chips-l, 24px);
108
+ border-width:var(--border-width-chips-single, 1px);
109
+ }
110
+ .assistChip{
111
+ justify-content:center;
112
+ color:var(--sys-neutral-text-support, #6d707f);
113
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
114
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
115
+ }
114
116
  .assistChip .icon{
115
117
  color:var(--sys-neutral-text-light, #8b8e9b);
116
118
  }
@@ -142,9 +144,6 @@
142
144
  }
143
145
  .assistChip[data-loading]{
144
146
  cursor:progress;
145
- color:var(--sys-neutral-text-main, #41424e);
146
- background-color:var(--sys-neutral-background, #eeeff3);
147
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
148
147
  }
149
148
  .assistChip[data-loading][data-variant=label-only] .label{
150
149
  opacity:var(--opacity-a0, 0);
@@ -158,4 +157,9 @@
158
157
  display:flex;
159
158
  align-items:center;
160
159
  justify-content:center;
160
+ }
161
+ .assistChip[data-loading]{
162
+ color:var(--sys-neutral-text-main, #41424e);
163
+ background-color:var(--sys-neutral-background, #eeeff3);
164
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
161
165
  }
package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -21,8 +21,6 @@
21
21
  border-style:solid;
22
22
  outline:0;
23
23
  outline-offset:0;
24
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
25
- border-color:var(--sys-neutral-decor-default, #dde0ea);
26
24
  }
27
25
  .choiceChip .spinner{
28
26
  display:inline-flex;
@@ -39,13 +37,6 @@
39
37
  align-items:center;
40
38
  min-width:0;
41
39
  }
42
- .choiceChip[data-size=xs]{
43
- height:var(--size-chips-xs, 24px);
44
- padding-left:var(--space-chips-container-padding-xs, 3px);
45
- padding-right:var(--space-chips-container-padding-xs, 3px);
46
- border-radius:var(--radius-chips-xs, 12px);
47
- border-width:var(--border-width-chips-single, 1px);
48
- }
49
40
  .choiceChip[data-size=xs] .label{
50
41
  font-family:var(--light-label-s-font-family, SB Sans Interface);
51
42
  font-weight:var(--light-label-s-font-weight, Regular);
@@ -59,11 +50,11 @@
59
50
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
60
51
  gap:var(--space-chips-label-layout-gap, 2px);
61
52
  }
62
- .choiceChip[data-size=s]{
63
- height:var(--size-chips-s, 32px);
64
- padding-left:var(--space-chips-container-padding-s, 3px);
65
- padding-right:var(--space-chips-container-padding-s, 3px);
66
- border-radius:var(--radius-chips-s, 16px);
53
+ .choiceChip[data-size=xs]{
54
+ height:var(--size-chips-xs, 24px);
55
+ padding-left:var(--space-chips-container-padding-xs, 3px);
56
+ padding-right:var(--space-chips-container-padding-xs, 3px);
57
+ border-radius:var(--radius-chips-xs, 12px);
67
58
  border-width:var(--border-width-chips-single, 1px);
68
59
  }
69
60
  .choiceChip[data-size=s] .label{
@@ -79,11 +70,11 @@
79
70
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
80
71
  gap:var(--space-chips-label-layout-gap, 2px);
81
72
  }
82
- .choiceChip[data-size=m]{
83
- height:var(--size-chips-m, 40px);
84
- padding-left:var(--space-chips-container-padding-m, 7px);
85
- padding-right:var(--space-chips-container-padding-m, 7px);
86
- border-radius:var(--radius-chips-m, 20px);
73
+ .choiceChip[data-size=s]{
74
+ height:var(--size-chips-s, 32px);
75
+ padding-left:var(--space-chips-container-padding-s, 3px);
76
+ padding-right:var(--space-chips-container-padding-s, 3px);
77
+ border-radius:var(--radius-chips-s, 16px);
87
78
  border-width:var(--border-width-chips-single, 1px);
88
79
  }
89
80
  .choiceChip[data-size=m] .label{
@@ -99,11 +90,11 @@
99
90
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
100
91
  gap:var(--space-chips-label-layout-gap, 2px);
101
92
  }
102
- .choiceChip[data-size=l]{
103
- height:var(--size-chips-l, 48px);
104
- padding-left:var(--space-chips-container-padding-l, 11px);
105
- padding-right:var(--space-chips-container-padding-l, 11px);
106
- border-radius:var(--radius-chips-l, 24px);
93
+ .choiceChip[data-size=m]{
94
+ height:var(--size-chips-m, 40px);
95
+ padding-left:var(--space-chips-container-padding-m, 7px);
96
+ padding-right:var(--space-chips-container-padding-m, 7px);
97
+ border-radius:var(--radius-chips-m, 20px);
107
98
  border-width:var(--border-width-chips-single, 1px);
108
99
  }
109
100
  .choiceChip[data-size=l] .label{
@@ -119,6 +110,17 @@
119
110
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
120
111
  gap:var(--space-chips-label-layout-gap, 2px);
121
112
  }
113
+ .choiceChip[data-size=l]{
114
+ height:var(--size-chips-l, 48px);
115
+ padding-left:var(--space-chips-container-padding-l, 11px);
116
+ padding-right:var(--space-chips-container-padding-l, 11px);
117
+ border-radius:var(--radius-chips-l, 24px);
118
+ border-width:var(--border-width-chips-single, 1px);
119
+ }
120
+ .choiceChip{
121
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
122
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
123
+ }
122
124
  .choiceChip .label,
123
125
  .choiceChip .value{
124
126
  color:var(--sys-neutral-text-support, #6d707f);
@@ -186,14 +188,16 @@
186
188
  }
187
189
  .choiceChip[data-loading]{
188
190
  cursor:progress;
189
- background-color:var(--sys-neutral-background, #eeeff3);
190
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
191
191
  }
192
192
  .choiceChip[data-loading] true .spinner{
193
193
  display:flex;
194
194
  align-items:center;
195
195
  justify-content:center;
196
196
  }
197
+ .choiceChip[data-loading]{
198
+ background-color:var(--sys-neutral-background, #eeeff3);
199
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
200
+ }
197
201
  .choiceChip[data-loading] .label,
198
202
  .choiceChip[data-loading] .value{
199
203
  color:var(--sys-neutral-text-support, #6d707f);
@@ -251,8 +255,6 @@
251
255
  border-style:solid;
252
256
  outline:0;
253
257
  outline-offset:0;
254
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
255
- border-color:var(--sys-neutral-decor-default, #dde0ea);
256
258
  }
257
259
  .choiceChip .spinner{
258
260
  display:inline-flex;
@@ -269,13 +271,6 @@
269
271
  align-items:center;
270
272
  min-width:0;
271
273
  }
272
- .choiceChip[data-size=xs]{
273
- height:var(--size-chips-xs, 24px);
274
- padding-left:var(--space-chips-container-padding-xs, 3px);
275
- padding-right:var(--space-chips-container-padding-xs, 3px);
276
- border-radius:var(--radius-chips-xs, 12px);
277
- border-width:var(--border-width-chips-single, 1px);
278
- }
279
274
  .choiceChip[data-size=xs] .label{
280
275
  font-family:var(--light-label-s-font-family, SB Sans Interface);
281
276
  font-weight:var(--light-label-s-font-weight, Regular);
@@ -289,11 +284,11 @@
289
284
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
290
285
  gap:var(--space-chips-label-layout-gap, 2px);
291
286
  }
292
- .choiceChip[data-size=s]{
293
- height:var(--size-chips-s, 32px);
294
- padding-left:var(--space-chips-container-padding-s, 3px);
295
- padding-right:var(--space-chips-container-padding-s, 3px);
296
- border-radius:var(--radius-chips-s, 16px);
287
+ .choiceChip[data-size=xs]{
288
+ height:var(--size-chips-xs, 24px);
289
+ padding-left:var(--space-chips-container-padding-xs, 3px);
290
+ padding-right:var(--space-chips-container-padding-xs, 3px);
291
+ border-radius:var(--radius-chips-xs, 12px);
297
292
  border-width:var(--border-width-chips-single, 1px);
298
293
  }
299
294
  .choiceChip[data-size=s] .label{
@@ -309,11 +304,11 @@
309
304
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
310
305
  gap:var(--space-chips-label-layout-gap, 2px);
311
306
  }
312
- .choiceChip[data-size=m]{
313
- height:var(--size-chips-m, 40px);
314
- padding-left:var(--space-chips-container-padding-m, 7px);
315
- padding-right:var(--space-chips-container-padding-m, 7px);
316
- border-radius:var(--radius-chips-m, 20px);
307
+ .choiceChip[data-size=s]{
308
+ height:var(--size-chips-s, 32px);
309
+ padding-left:var(--space-chips-container-padding-s, 3px);
310
+ padding-right:var(--space-chips-container-padding-s, 3px);
311
+ border-radius:var(--radius-chips-s, 16px);
317
312
  border-width:var(--border-width-chips-single, 1px);
318
313
  }
319
314
  .choiceChip[data-size=m] .label{
@@ -329,11 +324,11 @@
329
324
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
330
325
  gap:var(--space-chips-label-layout-gap, 2px);
331
326
  }
332
- .choiceChip[data-size=l]{
333
- height:var(--size-chips-l, 48px);
334
- padding-left:var(--space-chips-container-padding-l, 11px);
335
- padding-right:var(--space-chips-container-padding-l, 11px);
336
- border-radius:var(--radius-chips-l, 24px);
327
+ .choiceChip[data-size=m]{
328
+ height:var(--size-chips-m, 40px);
329
+ padding-left:var(--space-chips-container-padding-m, 7px);
330
+ padding-right:var(--space-chips-container-padding-m, 7px);
331
+ border-radius:var(--radius-chips-m, 20px);
337
332
  border-width:var(--border-width-chips-single, 1px);
338
333
  }
339
334
  .choiceChip[data-size=l] .label{
@@ -349,6 +344,17 @@
349
344
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
350
345
  gap:var(--space-chips-label-layout-gap, 2px);
351
346
  }
347
+ .choiceChip[data-size=l]{
348
+ height:var(--size-chips-l, 48px);
349
+ padding-left:var(--space-chips-container-padding-l, 11px);
350
+ padding-right:var(--space-chips-container-padding-l, 11px);
351
+ border-radius:var(--radius-chips-l, 24px);
352
+ border-width:var(--border-width-chips-single, 1px);
353
+ }
354
+ .choiceChip{
355
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
356
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
357
+ }
352
358
  .choiceChip .label,
353
359
  .choiceChip .value{
354
360
  color:var(--sys-neutral-text-support, #6d707f);
@@ -416,8 +422,6 @@
416
422
  }
417
423
  .choiceChip[data-loading]{
418
424
  cursor:progress;
419
- background-color:var(--sys-neutral-background, #eeeff3);
420
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
421
425
  }
422
426
  .choiceChip[data-loading]:not([data-label]) .value{
423
427
  opacity:var(--opacity-a0, 0);
@@ -427,6 +431,10 @@
427
431
  align-items:center;
428
432
  justify-content:center;
429
433
  }
434
+ .choiceChip[data-loading]{
435
+ background-color:var(--sys-neutral-background, #eeeff3);
436
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
437
+ }
430
438
  .choiceChip[data-loading] .label,
431
439
  .choiceChip[data-loading] .value{
432
440
  color:var(--sys-neutral-text-support, #6d707f);
package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.d.ts CHANGED
@@ -14,7 +14,7 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
14
14
  onChange?(value: Date): void;
15
15
  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
16
16
  valueRender?(value?: Date): ReactNode;
17
- mode?: Exclude<CalendarProps['mode'], 'range'>;
17
+ mode?: Exclude<CalendarProps['mode'], 'date-range' | 'month-range' | 'year-range'>;
18
18
  /** Колбек свойств для управления ячейками календаря */
19
19
  buildCalendarCellProps?: CalendarProps['buildCellProps'];
20
20
  } & (ChipChoiceDateWithSeconds | {
package/dist/cjs/components/ChipChoice/components/ChipChoiceDateRange.js CHANGED
@@ -67,7 +67,7 @@ function ChipChoiceDateRange(_a) {
67
67
  });
68
68
  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
69
69
  content: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
70
- mode: 'range',
70
+ mode: 'date-range',
71
71
  size: constants_2.CALENDAR_SIZE_MAP[size],
72
72
  value: selectedValue,
73
73
  onChangeValue: value => {
package/dist/cjs/components/ChipChoice/styles.module.css CHANGED
@@ -21,8 +21,6 @@
21
21
  border-style:solid;
22
22
  outline:0;
23
23
  outline-offset:0;
24
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
25
- border-color:var(--sys-neutral-decor-default, #dde0ea);
26
24
  }
27
25
  .choiceChip .spinner{
28
26
  display:inline-flex;
@@ -39,13 +37,6 @@
39
37
  align-items:center;
40
38
  min-width:0;
41
39
  }
42
- .choiceChip[data-size=xs]{
43
- height:var(--size-chips-xs, 24px);
44
- padding-left:var(--space-chips-container-padding-xs, 3px);
45
- padding-right:var(--space-chips-container-padding-xs, 3px);
46
- border-radius:var(--radius-chips-xs, 12px);
47
- border-width:var(--border-width-chips-single, 1px);
48
- }
49
40
  .choiceChip[data-size=xs] .label{
50
41
  font-family:var(--light-label-s-font-family, SB Sans Interface);
51
42
  font-weight:var(--light-label-s-font-weight, Regular);
@@ -59,11 +50,11 @@
59
50
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
60
51
  gap:var(--space-chips-label-layout-gap, 2px);
61
52
  }
62
- .choiceChip[data-size=s]{
63
- height:var(--size-chips-s, 32px);
64
- padding-left:var(--space-chips-container-padding-s, 3px);
65
- padding-right:var(--space-chips-container-padding-s, 3px);
66
- border-radius:var(--radius-chips-s, 16px);
53
+ .choiceChip[data-size=xs]{
54
+ height:var(--size-chips-xs, 24px);
55
+ padding-left:var(--space-chips-container-padding-xs, 3px);
56
+ padding-right:var(--space-chips-container-padding-xs, 3px);
57
+ border-radius:var(--radius-chips-xs, 12px);
67
58
  border-width:var(--border-width-chips-single, 1px);
68
59
  }
69
60
  .choiceChip[data-size=s] .label{
@@ -79,11 +70,11 @@
79
70
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
80
71
  gap:var(--space-chips-label-layout-gap, 2px);
81
72
  }
82
- .choiceChip[data-size=m]{
83
- height:var(--size-chips-m, 40px);
84
- padding-left:var(--space-chips-container-padding-m, 7px);
85
- padding-right:var(--space-chips-container-padding-m, 7px);
86
- border-radius:var(--radius-chips-m, 20px);
73
+ .choiceChip[data-size=s]{
74
+ height:var(--size-chips-s, 32px);
75
+ padding-left:var(--space-chips-container-padding-s, 3px);
76
+ padding-right:var(--space-chips-container-padding-s, 3px);
77
+ border-radius:var(--radius-chips-s, 16px);
87
78
  border-width:var(--border-width-chips-single, 1px);
88
79
  }
89
80
  .choiceChip[data-size=m] .label{
@@ -99,11 +90,11 @@
99
90
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
100
91
  gap:var(--space-chips-label-layout-gap, 2px);
101
92
  }
102
- .choiceChip[data-size=l]{
103
- height:var(--size-chips-l, 48px);
104
- padding-left:var(--space-chips-container-padding-l, 11px);
105
- padding-right:var(--space-chips-container-padding-l, 11px);
106
- border-radius:var(--radius-chips-l, 24px);
93
+ .choiceChip[data-size=m]{
94
+ height:var(--size-chips-m, 40px);
95
+ padding-left:var(--space-chips-container-padding-m, 7px);
96
+ padding-right:var(--space-chips-container-padding-m, 7px);
97
+ border-radius:var(--radius-chips-m, 20px);
107
98
  border-width:var(--border-width-chips-single, 1px);
108
99
  }
109
100
  .choiceChip[data-size=l] .label{
@@ -119,6 +110,17 @@
119
110
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
120
111
  gap:var(--space-chips-label-layout-gap, 2px);
121
112
  }
113
+ .choiceChip[data-size=l]{
114
+ height:var(--size-chips-l, 48px);
115
+ padding-left:var(--space-chips-container-padding-l, 11px);
116
+ padding-right:var(--space-chips-container-padding-l, 11px);
117
+ border-radius:var(--radius-chips-l, 24px);
118
+ border-width:var(--border-width-chips-single, 1px);
119
+ }
120
+ .choiceChip{
121
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
122
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
123
+ }
122
124
  .choiceChip .label,
123
125
  .choiceChip .value{
124
126
  color:var(--sys-neutral-text-support, #6d707f);
@@ -186,14 +188,16 @@
186
188
  }
187
189
  .choiceChip[data-loading]{
188
190
  cursor:progress;
189
- background-color:var(--sys-neutral-background, #eeeff3);
190
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
191
191
  }
192
192
  .choiceChip[data-loading] true .spinner{
193
193
  display:flex;
194
194
  align-items:center;
195
195
  justify-content:center;
196
196
  }
197
+ .choiceChip[data-loading]{
198
+ background-color:var(--sys-neutral-background, #eeeff3);
199
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
200
+ }
197
201
  .choiceChip[data-loading] .label,
198
202
  .choiceChip[data-loading] .value{
199
203
  color:var(--sys-neutral-text-support, #6d707f);
package/dist/cjs/components/ChipToggle/styles.module.css CHANGED
@@ -15,14 +15,16 @@
15
15
  border-style:solid;
16
16
  outline:0;
17
17
  outline-offset:0;
18
+ }
19
+ .toggleChipContent .spinner{
20
+ display:inline-flex;
21
+ }
22
+ .toggleChipContent{
18
23
  justify-content:center;
19
24
  color:var(--sys-neutral-text-support, #6d707f);
20
25
  background-color:var(--sys-neutral-background1-level, #fdfdfd);
21
26
  border-color:var(--sys-neutral-decor-default, #dde0ea);
22
27
  }
23
- .toggleChipContent .spinner{
24
- display:inline-flex;
25
- }
26
28
 
27
29
  .toggleChipInput{
28
30
  pointer-events:none;
@@ -44,15 +46,6 @@
44
46
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
45
47
  }
46
48
 
47
- .toggleChip{
48
- position:relative;
49
- min-width:0;
50
- margin:0;
51
- padding:0;
52
- border:none;
53
- outline:0;
54
- outline-offset:0;
55
- }
56
49
  .toggleChip .icon{
57
50
  display:inline-flex;
58
51
  }
@@ -141,6 +134,15 @@
141
134
  border-radius:var(--radius-chips-l, 24px);
142
135
  border-width:var(--border-width-chips-single, 1px);
143
136
  }
137
+ .toggleChip{
138
+ position:relative;
139
+ min-width:0;
140
+ margin:0;
141
+ padding:0;
142
+ border:none;
143
+ outline:0;
144
+ outline-offset:0;
145
+ }
144
146
  .toggleChip .icon{
145
147
  color:var(--sys-neutral-text-support, #6d707f);
146
148
  }
package/dist/esm/components/ChipAssist/styles.module.css CHANGED
@@ -15,10 +15,6 @@
15
15
  border-style:solid;
16
16
  outline:0;
17
17
  outline-offset:0;
18
- justify-content:center;
19
- color:var(--sys-neutral-text-support, #6d707f);
20
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
21
- border-color:var(--sys-neutral-decor-default, #dde0ea);
22
18
  }
23
19
  .assistChip .spinner{
24
20
  display:inline-flex;
@@ -35,13 +31,6 @@
35
31
  align-items:center;
36
32
  min-width:0;
37
33
  }
38
- .assistChip[data-size=xs]{
39
- height:var(--size-chips-xs, 24px);
40
- padding-left:var(--space-chips-container-padding-xs, 3px);
41
- padding-right:var(--space-chips-container-padding-xs, 3px);
42
- border-radius:var(--radius-chips-xs, 12px);
43
- border-width:var(--border-width-chips-single, 1px);
44
- }
45
34
  .assistChip[data-size=xs] .label{
46
35
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
47
36
  font-weight:var(--sans-label-s-font-weight, Semibold);
@@ -54,11 +43,11 @@
54
43
  padding-left:var(--space-chips-label-layout-padding-xs, 4px);
55
44
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
56
45
  }
57
- .assistChip[data-size=s]{
58
- height:var(--size-chips-s, 32px);
59
- padding-left:var(--space-chips-container-padding-s, 3px);
60
- padding-right:var(--space-chips-container-padding-s, 3px);
61
- border-radius:var(--radius-chips-s, 16px);
46
+ .assistChip[data-size=xs]{
47
+ height:var(--size-chips-xs, 24px);
48
+ padding-left:var(--space-chips-container-padding-xs, 3px);
49
+ padding-right:var(--space-chips-container-padding-xs, 3px);
50
+ border-radius:var(--radius-chips-xs, 12px);
62
51
  border-width:var(--border-width-chips-single, 1px);
63
52
  }
64
53
  .assistChip[data-size=s] .label{
@@ -73,11 +62,11 @@
73
62
  padding-left:var(--space-chips-label-layout-padding-s, 4px);
74
63
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
75
64
  }
76
- .assistChip[data-size=m]{
77
- height:var(--size-chips-m, 40px);
78
- padding-left:var(--space-chips-container-padding-m, 7px);
79
- padding-right:var(--space-chips-container-padding-m, 7px);
80
- border-radius:var(--radius-chips-m, 20px);
65
+ .assistChip[data-size=s]{
66
+ height:var(--size-chips-s, 32px);
67
+ padding-left:var(--space-chips-container-padding-s, 3px);
68
+ padding-right:var(--space-chips-container-padding-s, 3px);
69
+ border-radius:var(--radius-chips-s, 16px);
81
70
  border-width:var(--border-width-chips-single, 1px);
82
71
  }
83
72
  .assistChip[data-size=m] .label{
@@ -92,11 +81,11 @@
92
81
  padding-left:var(--space-chips-label-layout-padding-m, 8px);
93
82
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
94
83
  }
95
- .assistChip[data-size=l]{
96
- height:var(--size-chips-l, 48px);
97
- padding-left:var(--space-chips-container-padding-l, 11px);
98
- padding-right:var(--space-chips-container-padding-l, 11px);
99
- border-radius:var(--radius-chips-l, 24px);
84
+ .assistChip[data-size=m]{
85
+ height:var(--size-chips-m, 40px);
86
+ padding-left:var(--space-chips-container-padding-m, 7px);
87
+ padding-right:var(--space-chips-container-padding-m, 7px);
88
+ border-radius:var(--radius-chips-m, 20px);
100
89
  border-width:var(--border-width-chips-single, 1px);
101
90
  }
102
91
  .assistChip[data-size=l] .label{
@@ -111,6 +100,19 @@
111
100
  padding-left:var(--space-chips-label-layout-padding-l, 12px);
112
101
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
113
102
  }
103
+ .assistChip[data-size=l]{
104
+ height:var(--size-chips-l, 48px);
105
+ padding-left:var(--space-chips-container-padding-l, 11px);
106
+ padding-right:var(--space-chips-container-padding-l, 11px);
107
+ border-radius:var(--radius-chips-l, 24px);
108
+ border-width:var(--border-width-chips-single, 1px);
109
+ }
110
+ .assistChip{
111
+ justify-content:center;
112
+ color:var(--sys-neutral-text-support, #6d707f);
113
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
114
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
115
+ }
114
116
  .assistChip .icon{
115
117
  color:var(--sys-neutral-text-light, #8b8e9b);
116
118
  }
@@ -142,9 +144,6 @@
142
144
  }
143
145
  .assistChip[data-loading]{
144
146
  cursor:progress;
145
- color:var(--sys-neutral-text-main, #41424e);
146
- background-color:var(--sys-neutral-background, #eeeff3);
147
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
148
147
  }
149
148
  .assistChip[data-loading][data-variant=label-only] .label{
150
149
  opacity:var(--opacity-a0, 0);
@@ -158,4 +157,9 @@
158
157
  display:flex;
159
158
  align-items:center;
160
159
  justify-content:center;
160
+ }
161
+ .assistChip[data-loading]{
162
+ color:var(--sys-neutral-text-main, #41424e);
163
+ background-color:var(--sys-neutral-background, #eeeff3);
164
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
161
165
  }
package/dist/esm/components/ChipChoice/components/ChipChoiceBase/styles.module.css CHANGED
@@ -21,8 +21,6 @@
21
21
  border-style:solid;
22
22
  outline:0;
23
23
  outline-offset:0;
24
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
25
- border-color:var(--sys-neutral-decor-default, #dde0ea);
26
24
  }
27
25
  .choiceChip .spinner{
28
26
  display:inline-flex;
@@ -39,13 +37,6 @@
39
37
  align-items:center;
40
38
  min-width:0;
41
39
  }
42
- .choiceChip[data-size=xs]{
43
- height:var(--size-chips-xs, 24px);
44
- padding-left:var(--space-chips-container-padding-xs, 3px);
45
- padding-right:var(--space-chips-container-padding-xs, 3px);
46
- border-radius:var(--radius-chips-xs, 12px);
47
- border-width:var(--border-width-chips-single, 1px);
48
- }
49
40
  .choiceChip[data-size=xs] .label{
50
41
  font-family:var(--light-label-s-font-family, SB Sans Interface);
51
42
  font-weight:var(--light-label-s-font-weight, Regular);
@@ -59,11 +50,11 @@
59
50
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
60
51
  gap:var(--space-chips-label-layout-gap, 2px);
61
52
  }
62
- .choiceChip[data-size=s]{
63
- height:var(--size-chips-s, 32px);
64
- padding-left:var(--space-chips-container-padding-s, 3px);
65
- padding-right:var(--space-chips-container-padding-s, 3px);
66
- border-radius:var(--radius-chips-s, 16px);
53
+ .choiceChip[data-size=xs]{
54
+ height:var(--size-chips-xs, 24px);
55
+ padding-left:var(--space-chips-container-padding-xs, 3px);
56
+ padding-right:var(--space-chips-container-padding-xs, 3px);
57
+ border-radius:var(--radius-chips-xs, 12px);
67
58
  border-width:var(--border-width-chips-single, 1px);
68
59
  }
69
60
  .choiceChip[data-size=s] .label{
@@ -79,11 +70,11 @@
79
70
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
80
71
  gap:var(--space-chips-label-layout-gap, 2px);
81
72
  }
82
- .choiceChip[data-size=m]{
83
- height:var(--size-chips-m, 40px);
84
- padding-left:var(--space-chips-container-padding-m, 7px);
85
- padding-right:var(--space-chips-container-padding-m, 7px);
86
- border-radius:var(--radius-chips-m, 20px);
73
+ .choiceChip[data-size=s]{
74
+ height:var(--size-chips-s, 32px);
75
+ padding-left:var(--space-chips-container-padding-s, 3px);
76
+ padding-right:var(--space-chips-container-padding-s, 3px);
77
+ border-radius:var(--radius-chips-s, 16px);
87
78
  border-width:var(--border-width-chips-single, 1px);
88
79
  }
89
80
  .choiceChip[data-size=m] .label{
@@ -99,11 +90,11 @@
99
90
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
100
91
  gap:var(--space-chips-label-layout-gap, 2px);
101
92
  }
102
- .choiceChip[data-size=l]{
103
- height:var(--size-chips-l, 48px);
104
- padding-left:var(--space-chips-container-padding-l, 11px);
105
- padding-right:var(--space-chips-container-padding-l, 11px);
106
- border-radius:var(--radius-chips-l, 24px);
93
+ .choiceChip[data-size=m]{
94
+ height:var(--size-chips-m, 40px);
95
+ padding-left:var(--space-chips-container-padding-m, 7px);
96
+ padding-right:var(--space-chips-container-padding-m, 7px);
97
+ border-radius:var(--radius-chips-m, 20px);
107
98
  border-width:var(--border-width-chips-single, 1px);
108
99
  }
109
100
  .choiceChip[data-size=l] .label{
@@ -119,6 +110,17 @@
119
110
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
120
111
  gap:var(--space-chips-label-layout-gap, 2px);
121
112
  }
113
+ .choiceChip[data-size=l]{
114
+ height:var(--size-chips-l, 48px);
115
+ padding-left:var(--space-chips-container-padding-l, 11px);
116
+ padding-right:var(--space-chips-container-padding-l, 11px);
117
+ border-radius:var(--radius-chips-l, 24px);
118
+ border-width:var(--border-width-chips-single, 1px);
119
+ }
120
+ .choiceChip{
121
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
122
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
123
+ }
122
124
  .choiceChip .label,
123
125
  .choiceChip .value{
124
126
  color:var(--sys-neutral-text-support, #6d707f);
@@ -186,14 +188,16 @@
186
188
  }
187
189
  .choiceChip[data-loading]{
188
190
  cursor:progress;
189
- background-color:var(--sys-neutral-background, #eeeff3);
190
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
191
191
  }
192
192
  .choiceChip[data-loading] true .spinner{
193
193
  display:flex;
194
194
  align-items:center;
195
195
  justify-content:center;
196
196
  }
197
+ .choiceChip[data-loading]{
198
+ background-color:var(--sys-neutral-background, #eeeff3);
199
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
200
+ }
197
201
  .choiceChip[data-loading] .label,
198
202
  .choiceChip[data-loading] .value{
199
203
  color:var(--sys-neutral-text-support, #6d707f);
@@ -251,8 +255,6 @@
251
255
  border-style:solid;
252
256
  outline:0;
253
257
  outline-offset:0;
254
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
255
- border-color:var(--sys-neutral-decor-default, #dde0ea);
256
258
  }
257
259
  .choiceChip .spinner{
258
260
  display:inline-flex;
@@ -269,13 +271,6 @@
269
271
  align-items:center;
270
272
  min-width:0;
271
273
  }
272
- .choiceChip[data-size=xs]{
273
- height:var(--size-chips-xs, 24px);
274
- padding-left:var(--space-chips-container-padding-xs, 3px);
275
- padding-right:var(--space-chips-container-padding-xs, 3px);
276
- border-radius:var(--radius-chips-xs, 12px);
277
- border-width:var(--border-width-chips-single, 1px);
278
- }
279
274
  .choiceChip[data-size=xs] .label{
280
275
  font-family:var(--light-label-s-font-family, SB Sans Interface);
281
276
  font-weight:var(--light-label-s-font-weight, Regular);
@@ -289,11 +284,11 @@
289
284
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
290
285
  gap:var(--space-chips-label-layout-gap, 2px);
291
286
  }
292
- .choiceChip[data-size=s]{
293
- height:var(--size-chips-s, 32px);
294
- padding-left:var(--space-chips-container-padding-s, 3px);
295
- padding-right:var(--space-chips-container-padding-s, 3px);
296
- border-radius:var(--radius-chips-s, 16px);
287
+ .choiceChip[data-size=xs]{
288
+ height:var(--size-chips-xs, 24px);
289
+ padding-left:var(--space-chips-container-padding-xs, 3px);
290
+ padding-right:var(--space-chips-container-padding-xs, 3px);
291
+ border-radius:var(--radius-chips-xs, 12px);
297
292
  border-width:var(--border-width-chips-single, 1px);
298
293
  }
299
294
  .choiceChip[data-size=s] .label{
@@ -309,11 +304,11 @@
309
304
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
310
305
  gap:var(--space-chips-label-layout-gap, 2px);
311
306
  }
312
- .choiceChip[data-size=m]{
313
- height:var(--size-chips-m, 40px);
314
- padding-left:var(--space-chips-container-padding-m, 7px);
315
- padding-right:var(--space-chips-container-padding-m, 7px);
316
- border-radius:var(--radius-chips-m, 20px);
307
+ .choiceChip[data-size=s]{
308
+ height:var(--size-chips-s, 32px);
309
+ padding-left:var(--space-chips-container-padding-s, 3px);
310
+ padding-right:var(--space-chips-container-padding-s, 3px);
311
+ border-radius:var(--radius-chips-s, 16px);
317
312
  border-width:var(--border-width-chips-single, 1px);
318
313
  }
319
314
  .choiceChip[data-size=m] .label{
@@ -329,11 +324,11 @@
329
324
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
330
325
  gap:var(--space-chips-label-layout-gap, 2px);
331
326
  }
332
- .choiceChip[data-size=l]{
333
- height:var(--size-chips-l, 48px);
334
- padding-left:var(--space-chips-container-padding-l, 11px);
335
- padding-right:var(--space-chips-container-padding-l, 11px);
336
- border-radius:var(--radius-chips-l, 24px);
327
+ .choiceChip[data-size=m]{
328
+ height:var(--size-chips-m, 40px);
329
+ padding-left:var(--space-chips-container-padding-m, 7px);
330
+ padding-right:var(--space-chips-container-padding-m, 7px);
331
+ border-radius:var(--radius-chips-m, 20px);
337
332
  border-width:var(--border-width-chips-single, 1px);
338
333
  }
339
334
  .choiceChip[data-size=l] .label{
@@ -349,6 +344,17 @@
349
344
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
350
345
  gap:var(--space-chips-label-layout-gap, 2px);
351
346
  }
347
+ .choiceChip[data-size=l]{
348
+ height:var(--size-chips-l, 48px);
349
+ padding-left:var(--space-chips-container-padding-l, 11px);
350
+ padding-right:var(--space-chips-container-padding-l, 11px);
351
+ border-radius:var(--radius-chips-l, 24px);
352
+ border-width:var(--border-width-chips-single, 1px);
353
+ }
354
+ .choiceChip{
355
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
356
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
357
+ }
352
358
  .choiceChip .label,
353
359
  .choiceChip .value{
354
360
  color:var(--sys-neutral-text-support, #6d707f);
@@ -416,8 +422,6 @@
416
422
  }
417
423
  .choiceChip[data-loading]{
418
424
  cursor:progress;
419
- background-color:var(--sys-neutral-background, #eeeff3);
420
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
421
425
  }
422
426
  .choiceChip[data-loading]:not([data-label]) .value{
423
427
  opacity:var(--opacity-a0, 0);
@@ -427,6 +431,10 @@
427
431
  align-items:center;
428
432
  justify-content:center;
429
433
  }
434
+ .choiceChip[data-loading]{
435
+ background-color:var(--sys-neutral-background, #eeeff3);
436
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
437
+ }
430
438
  .choiceChip[data-loading] .label,
431
439
  .choiceChip[data-loading] .value{
432
440
  color:var(--sys-neutral-text-support, #6d707f);
package/dist/esm/components/ChipChoice/components/ChipChoiceDate.d.ts CHANGED
@@ -14,7 +14,7 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
14
14
  onChange?(value: Date): void;
15
15
  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
16
16
  valueRender?(value?: Date): ReactNode;
17
- mode?: Exclude<CalendarProps['mode'], 'range'>;
17
+ mode?: Exclude<CalendarProps['mode'], 'date-range' | 'month-range' | 'year-range'>;
18
18
  /** Колбек свойств для управления ячейками календаря */
19
19
  buildCalendarCellProps?: CalendarProps['buildCellProps'];
20
20
  } & (ChipChoiceDateWithSeconds | {
package/dist/esm/components/ChipChoice/components/ChipChoiceDateRange.js CHANGED
@@ -39,7 +39,7 @@ export function ChipChoiceDateRange(_a) {
39
39
  setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
40
40
  }, [setOpen]);
41
41
  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
42
- return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: 'range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
42
+ return (_jsx(Dropdown, { content: _jsx(Calendar, { mode: 'date-range', size: CALENDAR_SIZE_MAP[size], value: selectedValue, onChangeValue: value => {
43
43
  setSelectedValue(value);
44
44
  closeDroplist();
45
45
  }, locale: DEFAULT_LOCALE,
package/dist/esm/components/ChipChoice/styles.module.css CHANGED
@@ -21,8 +21,6 @@
21
21
  border-style:solid;
22
22
  outline:0;
23
23
  outline-offset:0;
24
- background-color:var(--sys-neutral-background1-level, #fdfdfd);
25
- border-color:var(--sys-neutral-decor-default, #dde0ea);
26
24
  }
27
25
  .choiceChip .spinner{
28
26
  display:inline-flex;
@@ -39,13 +37,6 @@
39
37
  align-items:center;
40
38
  min-width:0;
41
39
  }
42
- .choiceChip[data-size=xs]{
43
- height:var(--size-chips-xs, 24px);
44
- padding-left:var(--space-chips-container-padding-xs, 3px);
45
- padding-right:var(--space-chips-container-padding-xs, 3px);
46
- border-radius:var(--radius-chips-xs, 12px);
47
- border-width:var(--border-width-chips-single, 1px);
48
- }
49
40
  .choiceChip[data-size=xs] .label{
50
41
  font-family:var(--light-label-s-font-family, SB Sans Interface);
51
42
  font-weight:var(--light-label-s-font-weight, Regular);
@@ -59,11 +50,11 @@
59
50
  padding-right:var(--space-chips-label-layout-padding-xs, 4px);
60
51
  gap:var(--space-chips-label-layout-gap, 2px);
61
52
  }
62
- .choiceChip[data-size=s]{
63
- height:var(--size-chips-s, 32px);
64
- padding-left:var(--space-chips-container-padding-s, 3px);
65
- padding-right:var(--space-chips-container-padding-s, 3px);
66
- border-radius:var(--radius-chips-s, 16px);
53
+ .choiceChip[data-size=xs]{
54
+ height:var(--size-chips-xs, 24px);
55
+ padding-left:var(--space-chips-container-padding-xs, 3px);
56
+ padding-right:var(--space-chips-container-padding-xs, 3px);
57
+ border-radius:var(--radius-chips-xs, 12px);
67
58
  border-width:var(--border-width-chips-single, 1px);
68
59
  }
69
60
  .choiceChip[data-size=s] .label{
@@ -79,11 +70,11 @@
79
70
  padding-right:var(--space-chips-label-layout-padding-s, 4px);
80
71
  gap:var(--space-chips-label-layout-gap, 2px);
81
72
  }
82
- .choiceChip[data-size=m]{
83
- height:var(--size-chips-m, 40px);
84
- padding-left:var(--space-chips-container-padding-m, 7px);
85
- padding-right:var(--space-chips-container-padding-m, 7px);
86
- border-radius:var(--radius-chips-m, 20px);
73
+ .choiceChip[data-size=s]{
74
+ height:var(--size-chips-s, 32px);
75
+ padding-left:var(--space-chips-container-padding-s, 3px);
76
+ padding-right:var(--space-chips-container-padding-s, 3px);
77
+ border-radius:var(--radius-chips-s, 16px);
87
78
  border-width:var(--border-width-chips-single, 1px);
88
79
  }
89
80
  .choiceChip[data-size=m] .label{
@@ -99,11 +90,11 @@
99
90
  padding-right:var(--space-chips-label-layout-padding-m, 8px);
100
91
  gap:var(--space-chips-label-layout-gap, 2px);
101
92
  }
102
- .choiceChip[data-size=l]{
103
- height:var(--size-chips-l, 48px);
104
- padding-left:var(--space-chips-container-padding-l, 11px);
105
- padding-right:var(--space-chips-container-padding-l, 11px);
106
- border-radius:var(--radius-chips-l, 24px);
93
+ .choiceChip[data-size=m]{
94
+ height:var(--size-chips-m, 40px);
95
+ padding-left:var(--space-chips-container-padding-m, 7px);
96
+ padding-right:var(--space-chips-container-padding-m, 7px);
97
+ border-radius:var(--radius-chips-m, 20px);
107
98
  border-width:var(--border-width-chips-single, 1px);
108
99
  }
109
100
  .choiceChip[data-size=l] .label{
@@ -119,6 +110,17 @@
119
110
  padding-right:var(--space-chips-label-layout-padding-l, 12px);
120
111
  gap:var(--space-chips-label-layout-gap, 2px);
121
112
  }
113
+ .choiceChip[data-size=l]{
114
+ height:var(--size-chips-l, 48px);
115
+ padding-left:var(--space-chips-container-padding-l, 11px);
116
+ padding-right:var(--space-chips-container-padding-l, 11px);
117
+ border-radius:var(--radius-chips-l, 24px);
118
+ border-width:var(--border-width-chips-single, 1px);
119
+ }
120
+ .choiceChip{
121
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
122
+ border-color:var(--sys-neutral-decor-default, #dde0ea);
123
+ }
122
124
  .choiceChip .label,
123
125
  .choiceChip .value{
124
126
  color:var(--sys-neutral-text-support, #6d707f);
@@ -186,14 +188,16 @@
186
188
  }
187
189
  .choiceChip[data-loading]{
188
190
  cursor:progress;
189
- background-color:var(--sys-neutral-background, #eeeff3);
190
- border-color:var(--sys-neutral-decor-activated, #b6bac7);
191
191
  }
192
192
  .choiceChip[data-loading] true .spinner{
193
193
  display:flex;
194
194
  align-items:center;
195
195
  justify-content:center;
196
196
  }
197
+ .choiceChip[data-loading]{
198
+ background-color:var(--sys-neutral-background, #eeeff3);
199
+ border-color:var(--sys-neutral-decor-activated, #b6bac7);
200
+ }
197
201
  .choiceChip[data-loading] .label,
198
202
  .choiceChip[data-loading] .value{
199
203
  color:var(--sys-neutral-text-support, #6d707f);
package/dist/esm/components/ChipToggle/styles.module.css CHANGED
@@ -15,14 +15,16 @@
15
15
  border-style:solid;
16
16
  outline:0;
17
17
  outline-offset:0;
18
+ }
19
+ .toggleChipContent .spinner{
20
+ display:inline-flex;
21
+ }
22
+ .toggleChipContent{
18
23
  justify-content:center;
19
24
  color:var(--sys-neutral-text-support, #6d707f);
20
25
  background-color:var(--sys-neutral-background1-level, #fdfdfd);
21
26
  border-color:var(--sys-neutral-decor-default, #dde0ea);
22
27
  }
23
- .toggleChipContent .spinner{
24
- display:inline-flex;
25
- }
26
28
 
27
29
  .toggleChipInput{
28
30
  pointer-events:none;
@@ -44,15 +46,6 @@
44
46
  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
45
47
  }
46
48
 
47
- .toggleChip{
48
- position:relative;
49
- min-width:0;
50
- margin:0;
51
- padding:0;
52
- border:none;
53
- outline:0;
54
- outline-offset:0;
55
- }
56
49
  .toggleChip .icon{
57
50
  display:inline-flex;
58
51
  }
@@ -141,6 +134,15 @@
141
134
  border-radius:var(--radius-chips-l, 24px);
142
135
  border-width:var(--border-width-chips-single, 1px);
143
136
  }
137
+ .toggleChip{
138
+ position:relative;
139
+ min-width:0;
140
+ margin:0;
141
+ padding:0;
142
+ border:none;
143
+ outline:0;
144
+ outline-offset:0;
145
+ }
144
146
  .toggleChip .icon{
145
147
  color:var(--sys-neutral-text-support, #6d707f);
146
148
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Chips",
7
- "version": "0.28.13",
7
+ "version": "0.28.14",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,14 +37,14 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/button": "0.19.17",
40
- "@snack-uikit/calendar": "0.13.13",
40
+ "@snack-uikit/calendar": "0.13.14",
41
41
  "@snack-uikit/divider": "3.2.11",
42
42
  "@snack-uikit/dropdown": "0.5.4",
43
- "@snack-uikit/icons": "0.27.5",
44
- "@snack-uikit/list": "0.32.12",
43
+ "@snack-uikit/icons": "0.27.6",
44
+ "@snack-uikit/list": "0.32.13",
45
45
  "@snack-uikit/loaders": "0.9.10",
46
- "@snack-uikit/tooltip": "0.18.8",
47
- "@snack-uikit/truncate-string": "0.7.7",
46
+ "@snack-uikit/tooltip": "0.18.9",
47
+ "@snack-uikit/truncate-string": "0.7.8",
48
48
  "@snack-uikit/utils": "4.0.1",
49
49
  "classnames": "2.5.1",
50
50
  "fuzzy-search": "3.2.1",
@@ -57,5 +57,5 @@
57
57
  "peerDependencies": {
58
58
  "@snack-uikit/locale": "*"
59
59
  },
60
- "gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
60
+ "gitHead": "17b72086167d3d6503e4e74142358765230478c8"
61
61
  }
package/src/components/ChipChoice/components/ChipChoiceDate.tsx CHANGED
@@ -26,7 +26,7 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
26
26
  onChange?(value: Date): void;
27
27
  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
28
28
  valueRender?(value?: Date): ReactNode;
29
- mode?: Exclude<CalendarProps['mode'], 'range'>;
29
+ mode?: Exclude<CalendarProps['mode'], 'date-range' | 'month-range' | 'year-range'>;
30
30
  /** Колбек свойств для управления ячейками календаря */
31
31
  buildCalendarCellProps?: CalendarProps['buildCellProps'];
32
32
  } & (
package/src/components/ChipChoice/components/ChipChoiceDateRange.tsx CHANGED
@@ -74,7 +74,7 @@ export function ChipChoiceDateRange({
74
74
  <Dropdown
75
75
  content={
76
76
  <Calendar
77
- mode='range'
77
+ mode='date-range'
78
78
  size={CALENDAR_SIZE_MAP[size]}
79
79
  value={selectedValue}
80
80
  onChangeValue={value => {