@rescui/chip-list 0.14.1-RUI-293-Update-menu-component-6ca9d26d3.22 → 0.14.1-RUI-293-Update-menu-component-0e65dd41c.30

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 (4) hide show
  1. package/lib/index.css +46 -46
  2. package/lib/parts/chip-list.p.module.css.js +24 -24
  3. package/llm/components/chip-list.md +47 -60
  4. package/package.json +4 -4
package/lib/index.css CHANGED
@@ -1,19 +1,19 @@
1
- ._light_1whu6yq_8{
1
+ ._light_136g8r1_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._dark_1whu6yq_11{
4
+ ._dark_136g8r1_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._alignLeft_1whu6yq_15{
7
+ ._alignLeft_136g8r1_15{
8
8
  --_rs-cl-align:left;
9
9
  }
10
- ._alignCenter_1whu6yq_18{
10
+ ._alignCenter_136g8r1_18{
11
11
  --_rs-cl-align:center;
12
12
  }
13
- ._alignRight_1whu6yq_21{
13
+ ._alignRight_136g8r1_21{
14
14
  --_rs-cl-align:right;
15
15
  }
16
- ._sizeXs_1whu6yq_25{
16
+ ._sizeXs_136g8r1_25{
17
17
  --_rs-cl-chip-base-border-radius:4px;
18
18
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
19
19
  --_rs-cl-chip-vertical-padding:2px;
@@ -27,7 +27,7 @@
27
27
  --_rs-cl-compact-horizontal-gap:4px;
28
28
  --_rs-cl-sparse-horizontal-gap:12px;
29
29
  }
30
- ._sizeXs_1whu6yq_25 [data-rs-internal='chip-list__chip']{
30
+ ._sizeXs_136g8r1_25 [data-rs-internal='chip-list__chip']{
31
31
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
32
32
  --_rs-typography-text-transform:initial;
33
33
  --_rs-typography-font-variant-numeric:initial;
@@ -62,7 +62,7 @@
62
62
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
63
63
  --_rs-typography-link-border-bottom-width-from-text:1px;
64
64
  }
65
- ._sizeS_1whu6yq_28{
65
+ ._sizeS_136g8r1_28{
66
66
  --_rs-cl-chip-base-border-radius:16px;
67
67
  --_rs-cl-chip-compact-border-radius:4px;
68
68
  --_rs-cl-chip-vertical-padding:6px;
@@ -76,7 +76,7 @@
76
76
  --_rs-cl-compact-horizontal-gap:6px;
77
77
  --_rs-cl-sparse-horizontal-gap:12px;
78
78
  }
79
- ._sizeS_1whu6yq_28 [data-rs-internal='chip-list__chip']{
79
+ ._sizeS_136g8r1_28 [data-rs-internal='chip-list__chip']{
80
80
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
81
81
  --_rs-typography-text-transform:initial;
82
82
  --_rs-typography-font-variant-numeric:initial;
@@ -111,7 +111,7 @@
111
111
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
112
112
  --_rs-typography-link-border-bottom-width-from-text:1px;
113
113
  }
114
- ._sizeM_1whu6yq_31{
114
+ ._sizeM_136g8r1_31{
115
115
  --_rs-cl-chip-base-border-radius:20px;
116
116
  --_rs-cl-chip-compact-border-radius:8px;
117
117
  --_rs-cl-chip-vertical-padding:8px;
@@ -125,7 +125,7 @@
125
125
  --_rs-cl-compact-horizontal-gap:6px;
126
126
  --_rs-cl-sparse-horizontal-gap:16px;
127
127
  }
128
- ._sizeM_1whu6yq_31 [data-rs-internal='chip-list__chip']{
128
+ ._sizeM_136g8r1_31 [data-rs-internal='chip-list__chip']{
129
129
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
130
130
  --_rs-typography-text-transform:initial;
131
131
  --_rs-typography-font-variant-numeric:initial;
@@ -164,11 +164,11 @@
164
164
  --_rs-typography-link-border-bottom-width-from-text:1px;
165
165
  }
166
166
  @media screen and (max-width: 640px){
167
- ._sizeM_1whu6yq_31 [data-rs-internal='chip-list__chip']{
167
+ ._sizeM_136g8r1_31 [data-rs-internal='chip-list__chip']{
168
168
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
169
169
  }
170
170
  }
171
- ._sizeL_1whu6yq_34{
171
+ ._sizeL_136g8r1_34{
172
172
  --_rs-cl-chip-base-border-radius:26px;
173
173
  --_rs-cl-chip-compact-border-radius:12px;
174
174
  --_rs-cl-chip-vertical-padding:12px;
@@ -183,11 +183,11 @@
183
183
  --_rs-cl-sparse-horizontal-gap:16px;
184
184
  }
185
185
  @media screen and (max-width: 640px){
186
- ._sizeL_1whu6yq_34{
186
+ ._sizeL_136g8r1_34{
187
187
  --_rs-cl-vertical-gap:12px;
188
188
  }
189
189
  }
190
- ._sizeL_1whu6yq_34 [data-rs-internal='chip-list__chip']{
190
+ ._sizeL_136g8r1_34 [data-rs-internal='chip-list__chip']{
191
191
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
192
192
  --_rs-typography-text-transform:initial;
193
193
  --_rs-typography-font-variant-numeric:initial;
@@ -226,34 +226,34 @@
226
226
  --_rs-typography-link-border-bottom-width-from-text:1px;
227
227
  }
228
228
  @media screen and (max-width: 640px){
229
- ._sizeL_1whu6yq_34 [data-rs-internal='chip-list__chip']{
229
+ ._sizeL_136g8r1_34 [data-rs-internal='chip-list__chip']{
230
230
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
231
231
  }
232
232
  }
233
- ._innerOffsetL_1whu6yq_38{
233
+ ._innerOffsetL_136g8r1_38{
234
234
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
235
235
  }
236
236
  @media screen and (max-width: 640px){
237
- ._innerOffsetL_1whu6yq_38{
237
+ ._innerOffsetL_136g8r1_38{
238
238
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
239
239
  }
240
240
  }
241
- ._innerOffsetM_1whu6yq_41{
241
+ ._innerOffsetM_136g8r1_41{
242
242
  --_rs-cl-horizontal-gap-from-sparse:initial;
243
243
  }
244
- ._classic_1whu6yq_45{
244
+ ._classic_136g8r1_45{
245
245
  --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
246
246
  --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
247
247
  --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
248
248
  --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
249
249
  }
250
- ._rock_1whu6yq_48{
250
+ ._rock_136g8r1_48{
251
251
  --_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
252
252
  --_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
253
253
  --_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
254
254
  --_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
255
255
  }
256
- ._compact_1whu6yq_52{
256
+ ._compact_136g8r1_52{
257
257
  --_rs-cl-chip-border-radius-from-compact:var(
258
258
  --_rs-cl-chip-compact-border-radius
259
259
  );
@@ -262,7 +262,7 @@
262
262
  );
263
263
  --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
264
264
  }
265
- ._main_1whu6yq_56{
265
+ ._main_136g8r1_56{
266
266
  --_rs-theme-dark:var(
267
267
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
268
268
  var(--rs-theme-dark, 0)
@@ -272,7 +272,7 @@
272
272
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
273
273
  }
274
274
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
275
- ._main_1whu6yq_56{
275
+ ._main_136g8r1_56{
276
276
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
277
277
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
278
278
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -281,7 +281,7 @@
281
281
  }
282
282
  }
283
283
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
284
- ._main_1whu6yq_56{
284
+ ._main_136g8r1_56{
285
285
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
286
286
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
287
287
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -289,7 +289,7 @@
289
289
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
290
290
  }
291
291
  }
292
- ._main_1whu6yq_56 {
292
+ ._main_136g8r1_56 {
293
293
  --_rs-cl-chip-border-radius:var(
294
294
  --_rs-cl-chip-border-radius-from-compact,
295
295
  var(--_rs-cl-chip-base-border-radius)
@@ -303,7 +303,7 @@
303
303
  var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
304
304
  );
305
305
  }
306
- ._chipsContainer_1whu6yq_62{
306
+ ._chipsContainer_136g8r1_62{
307
307
  position:relative;
308
308
 
309
309
  display:flex;
@@ -312,17 +312,17 @@
312
312
 
313
313
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
314
314
  }
315
- ._alignIconLeft_1whu6yq_72{
315
+ ._alignIconLeft_136g8r1_72{
316
316
  --_rs-cl-chip-icon-flex-direction:row;
317
317
  --_rs-cl-chip-icon-position-multiplier-left:1;
318
318
  --_rs-cl-chip-icon-position-multiplier-right:0;
319
319
  }
320
- ._alignIconRight_1whu6yq_75{
320
+ ._alignIconRight_136g8r1_75{
321
321
  --_rs-cl-chip-icon-flex-direction:row-reverse;
322
322
  --_rs-cl-chip-icon-position-multiplier-left:0;
323
323
  --_rs-cl-chip-icon-position-multiplier-right:1;
324
324
  }
325
- ._chip_1whu6yq_62{
325
+ ._chip_136g8r1_62{
326
326
  letter-spacing:var(
327
327
  --rs-text-base-letter-spacing,
328
328
  var(--_rs-typography-letter-spacing)
@@ -374,25 +374,25 @@
374
374
  -moz-osx-font-smoothing:inherit;
375
375
  -webkit-appearance:none;
376
376
  }
377
- ._chip_1whu6yq_62::-moz-focus-inner{
377
+ ._chip_136g8r1_62::-moz-focus-inner{
378
378
  padding:0;
379
379
 
380
380
  border:none;
381
381
  }
382
- ._chip_1whu6yq_62:hover,
383
- ._chip_1whu6yq_62:focus,
384
- ._chip_1whu6yq_62:active{
382
+ ._chip_136g8r1_62:hover,
383
+ ._chip_136g8r1_62:focus,
384
+ ._chip_136g8r1_62:active{
385
385
  outline:none;
386
386
 
387
387
  text-decoration:none;
388
388
  }
389
- ._chip_1whu6yq_62:focus[data-focus-method='key']{
389
+ ._chip_136g8r1_62:focus[data-focus-method='key']{
390
390
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
391
391
  }
392
- ._chip_1whu6yq_62:has(:focus[data-focus-method='key']){
392
+ ._chip_136g8r1_62:has(:focus[data-focus-method='key']){
393
393
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
394
394
  }
395
- ._chip_1whu6yq_62:focus{
395
+ ._chip_136g8r1_62:focus{
396
396
  --_rs-cl-chip-border-color:rgba(
397
397
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
398
398
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -401,7 +401,7 @@
401
401
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
402
402
  }
403
403
  @media (hover: hover){
404
- ._chip_1whu6yq_62:hover{
404
+ ._chip_136g8r1_62:hover{
405
405
  --_rs-cl-chip-border-color:rgba(
406
406
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
407
407
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -412,20 +412,20 @@
412
412
  background:var(--_rs-cl-chip-hover-background);
413
413
  }
414
414
  }
415
- ._chip_1whu6yq_62:active{
415
+ ._chip_136g8r1_62:active{
416
416
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
417
417
 
418
418
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
419
419
 
420
420
  background:var(--_rs-cl-chip-active-background);
421
421
  }
422
- ._chip_1whu6yq_62._selected_1whu6yq_176{
422
+ ._chip_136g8r1_62._selected_136g8r1_176{
423
423
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
424
424
  --_rs-cl-chip-border-width:2px;
425
425
 
426
426
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
427
427
  }
428
- ._disabled_1whu6yq_183 ._chip_1whu6yq_62{
428
+ ._disabled_136g8r1_183 ._chip_136g8r1_62{
429
429
  --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
430
430
 
431
431
  pointer-events:none;
@@ -434,10 +434,10 @@
434
434
 
435
435
  background:transparent;
436
436
  }
437
- ._disabled_1whu6yq_183 ._chip_1whu6yq_62._selected_1whu6yq_176{
437
+ ._disabled_136g8r1_183 ._chip_136g8r1_62._selected_136g8r1_176{
438
438
  --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
439
439
  }
440
- ._chip_1whu6yq_62::before{
440
+ ._chip_136g8r1_62::before{
441
441
  position:absolute;
442
442
  top:0;
443
443
  right:0;
@@ -454,7 +454,7 @@
454
454
 
455
455
  transition:border-color 100ms var(--rs-transition-function, ease);
456
456
  }
457
- ._chip_1whu6yq_62 ._icon_1whu6yq_216{
457
+ ._chip_136g8r1_62 ._icon_136g8r1_216{
458
458
  flex:0 0 auto;
459
459
 
460
460
  width:auto;
@@ -463,7 +463,7 @@
463
463
  margin:0;
464
464
  fill:currentColor;
465
465
  }
466
- ._hiddenInput_1whu6yq_227{
466
+ ._hiddenInput_136g8r1_227{
467
467
  position:absolute;
468
468
 
469
469
  overflow:hidden;
@@ -479,7 +479,7 @@
479
479
  white-space:nowrap;
480
480
  clip-path:inset(50%);
481
481
  }
482
- ._withoutText_1whu6yq_244{
482
+ ._withoutText_136g8r1_244{
483
483
  --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
484
484
  --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
485
485
  }
package/lib/parts/chip-list.p.module.css.js CHANGED
@@ -1,27 +1,27 @@
1
1
  var styles = {
2
- "light": "_light_1whu6yq_8",
3
- "dark": "_dark_1whu6yq_11",
4
- "alignLeft": "_alignLeft_1whu6yq_15",
5
- "alignCenter": "_alignCenter_1whu6yq_18",
6
- "alignRight": "_alignRight_1whu6yq_21",
7
- "sizeXs": "_sizeXs_1whu6yq_25",
8
- "sizeS": "_sizeS_1whu6yq_28",
9
- "sizeM": "_sizeM_1whu6yq_31",
10
- "sizeL": "_sizeL_1whu6yq_34",
11
- "innerOffsetL": "_innerOffsetL_1whu6yq_38",
12
- "innerOffsetM": "_innerOffsetM_1whu6yq_41",
13
- "classic": "_classic_1whu6yq_45",
14
- "rock": "_rock_1whu6yq_48",
15
- "compact": "_compact_1whu6yq_52",
16
- "main": "_main_1whu6yq_56",
17
- "chipsContainer": "_chipsContainer_1whu6yq_62",
18
- "alignIconLeft": "_alignIconLeft_1whu6yq_72",
19
- "alignIconRight": "_alignIconRight_1whu6yq_75",
20
- "chip": "_chip_1whu6yq_62",
21
- "selected": "_selected_1whu6yq_176",
22
- "disabled": "_disabled_1whu6yq_183",
23
- "icon": "_icon_1whu6yq_216",
24
- "hiddenInput": "_hiddenInput_1whu6yq_227",
25
- "withoutText": "_withoutText_1whu6yq_244"
2
+ "light": "_light_136g8r1_8",
3
+ "dark": "_dark_136g8r1_11",
4
+ "alignLeft": "_alignLeft_136g8r1_15",
5
+ "alignCenter": "_alignCenter_136g8r1_18",
6
+ "alignRight": "_alignRight_136g8r1_21",
7
+ "sizeXs": "_sizeXs_136g8r1_25",
8
+ "sizeS": "_sizeS_136g8r1_28",
9
+ "sizeM": "_sizeM_136g8r1_31",
10
+ "sizeL": "_sizeL_136g8r1_34",
11
+ "innerOffsetL": "_innerOffsetL_136g8r1_38",
12
+ "innerOffsetM": "_innerOffsetM_136g8r1_41",
13
+ "classic": "_classic_136g8r1_45",
14
+ "rock": "_rock_136g8r1_48",
15
+ "compact": "_compact_136g8r1_52",
16
+ "main": "_main_136g8r1_56",
17
+ "chipsContainer": "_chipsContainer_136g8r1_62",
18
+ "alignIconLeft": "_alignIconLeft_136g8r1_72",
19
+ "alignIconRight": "_alignIconRight_136g8r1_75",
20
+ "chip": "_chip_136g8r1_62",
21
+ "selected": "_selected_136g8r1_176",
22
+ "disabled": "_disabled_136g8r1_183",
23
+ "icon": "_icon_136g8r1_216",
24
+ "hiddenInput": "_hiddenInput_136g8r1_227",
25
+ "withoutText": "_withoutText_136g8r1_244"
26
26
  };
27
27
  export { styles as default };
package/llm/components/chip-list.md CHANGED
@@ -497,23 +497,27 @@ render(<Demo />);
497
497
 
498
498
  #### Demo
499
499
 
500
- Instead of separate classes, it may be a single class with `@media` queries inside:
500
+ Use the controls to see the effect at different viewport widths.
501
501
 
502
502
  ```tsx
503
503
  import { ChipList, ChipListMulti, Chip } from '@rescui/chip-list';
504
504
  import { useState } from 'react';
505
505
  import cn from 'classnames';
506
- import { TeamOutlineIcon, WinOutlineIcon, ThumbsUpOutlineIcon } from '@rescui/icons';
506
+ import {
507
+ TeamOutlineIcon,
508
+ WinOutlineIcon,
509
+ ThumbsUpOutlineIcon
510
+ } from '@rescui/icons';
507
511
 
508
- const MyChipLists = ({ singleClassName, multiClassName }) => {
512
+ const MyChipLists = () => {
509
513
  const [activeIndex, setActiveIndex] = useState(1);
510
514
  const [activeChips, setActiveChips] = useState(['second', 'third']);
511
515
  return (
512
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
516
+ <div>
513
517
  <ChipList
514
518
  value={activeIndex}
515
519
  onChange={v => setActiveIndex(v)}
516
- className={singleClassName}
520
+ className="my-chip-list"
517
521
  >
518
522
  <Chip className="my-chip" icon={<TeamOutlineIcon />}>
519
523
  First
@@ -528,7 +532,7 @@ const MyChipLists = ({ singleClassName, multiClassName }) => {
528
532
  <ChipListMulti
529
533
  value={activeChips}
530
534
  onChange={v => setActiveChips(v)}
531
- className={cn(multiClassName, 'rs-docs-offset-top-12')}
535
+ className={cn('my-chip-list-multi', 'rs-docs-offset-top-12')}
532
536
  >
533
537
  <Chip className="my-chip" icon={<TeamOutlineIcon />} value="first">
534
538
  First multi
@@ -544,72 +548,55 @@ const MyChipLists = ({ singleClassName, multiClassName }) => {
544
548
  );
545
549
  };
546
550
 
547
- render(
548
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
549
- <div>
550
- <p>Default:</p>
551
- <MyChipLists />
552
- </div>
553
- <div>
554
- <p>Var1:</p>
555
- <MyChipLists
556
- singleClassName={`my-chip-list-var-1`}
557
- multiClassName={`my-chip-list-multi-var-1`}
558
- />
559
- </div>
560
- <div>
561
- <p>Var1 & Var2 combined:</p>
562
- <MyChipLists
563
- singleClassName={`my-chip-list-var-1 my-chip-list-var-2`}
564
- multiClassName={`my-chip-list-multi-var-1 my-chip-list-multi-var-2`}
565
- />
566
- </div>
567
- </div>
568
- );
551
+ render(<MyChipLists />);
569
552
  ```
570
553
 
571
554
  ```postcss
572
555
  @import '@rescui/chip-list/lib/public-api.p.css';
573
556
 
574
- .my-chip-list-var-1 {
575
- @mixin rs-chip-list-size-l;
576
- @mixin rs-chip-list-mode-rock;
577
- @mixin rs-chip-list-align-center;
578
- @mixin rs-chip-list-sparse-true;
557
+ .my-chip-list {
558
+ @media (max-width: 640px) {
559
+ @mixin rs-chip-list-size-l;
560
+ @mixin rs-chip-list-mode-rock;
561
+ @mixin rs-chip-list-align-center;
562
+ @mixin rs-chip-list-sparse-true;
579
563
 
580
- .my-chip {
581
- @mixin rs-chip-icon-right;
564
+ .my-chip {
565
+ @mixin rs-chip-icon-right;
566
+ }
582
567
  }
583
- }
584
- .my-chip-list-var-2 {
585
- @mixin rs-chip-list-size-s;
586
- @mixin rs-chip-list-mode-classic;
587
- @mixin rs-chip-list-align-right;
588
- @mixin rs-chip-list-sparse-false;
589
-
590
- .my-chip {
591
- @mixin rs-chip-icon-left;
568
+ @media (max-width: 500px) {
569
+ @mixin rs-chip-list-size-s;
570
+ @mixin rs-chip-list-mode-classic;
571
+ @mixin rs-chip-list-align-right;
572
+ @mixin rs-chip-list-sparse-false;
573
+
574
+ .my-chip {
575
+ @mixin rs-chip-icon-left;
576
+ }
592
577
  }
593
578
  }
594
579
 
595
- .my-chip-list-multi-var-1 {
596
- @mixin rs-chip-list-multi-size-l;
597
- @mixin rs-chip-list-multi-mode-rock;
598
- @mixin rs-chip-list-multi-align-center;
599
- @mixin rs-chip-list-multi-sparse-true;
580
+ .my-chip-list-multi {
581
+ @media (max-width: 640px) {
582
+ @mixin rs-chip-list-multi-size-l;
583
+ @mixin rs-chip-list-multi-mode-rock;
584
+ @mixin rs-chip-list-multi-align-center;
585
+ @mixin rs-chip-list-multi-sparse-true;
600
586
 
601
- .my-chip {
602
- @mixin rs-chip-icon-right;
587
+ .my-chip {
588
+ @mixin rs-chip-icon-right;
589
+ }
603
590
  }
604
- }
605
- .my-chip-list-multi-var-2 {
606
- @mixin rs-chip-list-multi-size-s;
607
- @mixin rs-chip-list-multi-mode-classic;
608
- @mixin rs-chip-list-multi-align-right;
609
- @mixin rs-chip-list-multi-sparse-false;
610
-
611
- .my-chip {
612
- @mixin rs-chip-icon-left;
591
+ @media (max-width: 500px) {
592
+ @mixin rs-chip-list-multi-size-s;
593
+ @mixin rs-chip-list-multi-mode-classic;
594
+ @mixin rs-chip-list-multi-align-right;
595
+ @mixin rs-chip-list-multi-sparse-false;
596
+
597
+ .my-chip {
598
+ @mixin rs-chip-icon-left;
599
+ }
613
600
  }
614
601
  }
615
602
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/chip-list",
3
- "version": "0.14.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
3
+ "version": "0.14.1-RUI-293-Update-menu-component-0e65dd41c.30+0e65dd41c",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -25,9 +25,9 @@
25
25
  "react": ">=16.8.0 <20"
26
26
  },
27
27
  "devDependencies": {
28
- "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.57+6ca9d26d3",
28
+ "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-0e65dd41c.65+0e65dd41c",
29
29
  "@rescui/scripts": "0.5.2",
30
- "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
30
+ "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-0e65dd41c.30+0e65dd41c",
31
31
  "@rescui/visual-regression": "0.1.4"
32
32
  },
33
33
  "scripts": {
@@ -35,5 +35,5 @@
35
35
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
36
36
  },
37
37
  "nx": {},
38
- "gitHead": "6ca9d26d30da536dc5a10fdd86222129e2832efa"
38
+ "gitHead": "0e65dd41c5b827cd8e09582ea9f5ad24f61b1d96"
39
39
  }