@rescui/tag 0.13.11 → 0.13.12-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.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.
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_18p83uf_4",
3
- "sizeXS": "_sizeXS_18p83uf_14",
4
- "sizeS": "_sizeS_18p83uf_18",
5
- "sizeM": "_sizeM_18p83uf_22",
6
- "sizeL": "_sizeL_18p83uf_26",
7
- "light": "_light_18p83uf_30",
8
- "dark": "_dark_18p83uf_34",
9
- "allVariants": "_allVariants_18p83uf_48",
10
- "variant16": "_variant16_18p83uf_53",
11
- "variant20": "_variant20_18p83uf_54",
12
- "variant24": "_variant24_18p83uf_55",
13
- "variant28": "_variant28_18p83uf_58"
2
+ "icon": "_icon_19upof9_4",
3
+ "sizeXS": "_sizeXS_19upof9_14",
4
+ "sizeS": "_sizeS_19upof9_18",
5
+ "sizeM": "_sizeM_19upof9_22",
6
+ "sizeL": "_sizeL_19upof9_26",
7
+ "light": "_light_19upof9_30",
8
+ "dark": "_dark_19upof9_34",
9
+ "allVariants": "_allVariants_19upof9_48",
10
+ "variant16": "_variant16_19upof9_53",
11
+ "variant20": "_variant20_19upof9_54",
12
+ "variant24": "_variant24_19upof9_55",
13
+ "variant28": "_variant28_19upof9_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_18p83uf_4{
1
+ ._icon_19upof9_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_18p83uf_4{
11
+ ._icon_19upof9_4{
12
12
  --_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)));
13
13
  --_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)));
14
14
  --_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)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_18p83uf_4{
20
+ ._icon_19upof9_4{
21
21
  --_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);
22
22
  --_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));
23
23
  --_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));
@@ -25,30 +25,30 @@
25
25
  --_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));
26
26
  }
27
27
  }
28
- ._icon_18p83uf_4{
28
+ ._icon_19upof9_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_18p83uf_14{
35
+ ._sizeXS_19upof9_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_18p83uf_18{
38
+ ._sizeS_19upof9_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_18p83uf_22{
41
+ ._sizeM_19upof9_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_18p83uf_26{
44
+ ._sizeL_19upof9_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_18p83uf_30{
47
+ ._light_19upof9_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(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));
50
50
  }
51
- ._dark_18p83uf_34{
51
+ ._dark_19upof9_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(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));
54
54
  }
@@ -60,55 +60,55 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_18p83uf_48{
63
+ ._allVariants_19upof9_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_18p83uf_53,
68
- ._variant20_18p83uf_54,
69
- ._variant24_18p83uf_55{
67
+ ._variant16_19upof9_53,
68
+ ._variant20_19upof9_54,
69
+ ._variant24_19upof9_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_18p83uf_58{
72
+ ._variant28_19upof9_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_18p83uf_55{
76
+ ._variant24_19upof9_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_18p83uf_58{
79
+ ._variant28_19upof9_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_18p83uf_54{
84
+ ._variant20_19upof9_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_18p83uf_55{
87
+ ._variant24_19upof9_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_18p83uf_53{
92
+ ._variant16_19upof9_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_18p83uf_54{
95
+ ._variant20_19upof9_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._alignIconLeft_3teyd1_7{
99
+ ._alignIconLeft_qnyffr_7{
100
100
  --_rs-tag-flex-direction:row;
101
101
  }
102
- ._alignIconRight_3teyd1_10{
102
+ ._alignIconRight_qnyffr_10{
103
103
  --_rs-tag-flex-direction:row-reverse;
104
104
  }
105
- ._uppercase_3teyd1_14{
105
+ ._uppercase_qnyffr_14{
106
106
  --_rs-tag-text-transform:uppercase;
107
107
  --_rs-tag-horizontal-padding-or-initial:var(
108
108
  --_rs-tag-uppercase-horizontal-padding
109
109
  );
110
110
  }
111
- ._sizeXs_3teyd1_18{
111
+ ._sizeXs_qnyffr_18{
112
112
  --_rs-tag-vertical-padding:2px;
113
113
  --_rs-tag-base-horizontal-padding:8px;
114
114
  --_rs-tag-uppercase-horizontal-padding:var(
@@ -150,7 +150,7 @@
150
150
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
151
151
  --_rs-typography-link-border-bottom-width-from-text:1px;
152
152
  }
153
- ._sizeS_3teyd1_21{
153
+ ._sizeS_qnyffr_21{
154
154
  --_rs-tag-vertical-padding:4px;
155
155
  --_rs-tag-base-horizontal-padding:8px;
156
156
  --_rs-tag-uppercase-horizontal-padding:10px;
@@ -190,7 +190,7 @@
190
190
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
191
191
  --_rs-typography-link-border-bottom-width-from-text:1px;
192
192
  }
193
- ._sizeM_3teyd1_24{
193
+ ._sizeM_qnyffr_24{
194
194
  --_rs-tag-vertical-padding:6px;
195
195
  --_rs-tag-base-horizontal-padding:12px;
196
196
  --_rs-tag-uppercase-horizontal-padding:var(
@@ -236,11 +236,11 @@
236
236
  --_rs-typography-link-border-bottom-width-from-text:1px;
237
237
  }
238
238
  @media screen and (max-width: 640px){
239
- ._sizeM_3teyd1_24{
239
+ ._sizeM_qnyffr_24{
240
240
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
241
241
  }
242
242
  }
243
- ._sizeL_3teyd1_27{
243
+ ._sizeL_qnyffr_27{
244
244
  --_rs-tag-vertical-padding:8px;
245
245
  --_rs-tag-base-horizontal-padding:16px;
246
246
  --_rs-tag-uppercase-horizontal-padding:var(
@@ -286,11 +286,11 @@
286
286
  --_rs-typography-link-border-bottom-width-from-text:1px;
287
287
  }
288
288
  @media screen and (max-width: 640px){
289
- ._sizeL_3teyd1_27{
289
+ ._sizeL_qnyffr_27{
290
290
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
291
291
  }
292
292
  }
293
- ._main_3teyd1_31{
293
+ ._main_qnyffr_31{
294
294
  --_rs-tag-border-width:1px;
295
295
 
296
296
  --_rs-tag-horizontal-padding:var(
@@ -331,34 +331,34 @@
331
331
  background:transparent;
332
332
  gap:8px;
333
333
  }
334
- ._main_3teyd1_31 ._icon_3teyd1_60{
334
+ ._main_qnyffr_31 ._icon_qnyffr_60{
335
335
  fill:currentColor;
336
336
 
337
337
  width:auto;
338
338
  height:var(--_rs-tag-icon-size);
339
339
  }
340
340
 
341
- ._main_1j1j1dv_1{
341
+ ._main_1vzrsi9_1{
342
342
  border-radius:var(--_rs-tag-border-radius);
343
343
  }
344
344
 
345
- ._themeLight_jnskcc_7{
345
+ ._themeLight_mpsmni_7{
346
346
  --rs-theme-dark:0;
347
347
  }
348
- ._themeDark_jnskcc_10{
348
+ ._themeDark_mpsmni_10{
349
349
  --rs-theme-dark:1;
350
350
  }
351
- ._sizeXs_jnskcc_14{
351
+ ._sizeXs_mpsmni_14{
352
352
  --_rs-tag-removable-vertical-padding:2px;
353
353
  --_rs-tag-removable-left-padding:8px;
354
354
  --_rs-tag-removable-border-radius:4px;
355
355
  --_rs-tag-removable-close-part-size:24px;
356
356
  --_rs-tag-removable-custom-icon-size:16px;
357
357
  }
358
- ._sizeXs_jnskcc_14 [data-rs-internal="removable-tag__close-icon"]:not(html){
358
+ ._sizeXs_mpsmni_14 [data-rs-internal="removable-tag__close-icon"]:not(html){
359
359
  --_rs-icons-height:16px;
360
360
  }
361
- ._sizeXs_jnskcc_14 {
361
+ ._sizeXs_mpsmni_14 {
362
362
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
363
363
  --_rs-typography-text-transform:initial;
364
364
  --_rs-typography-font-variant-numeric:initial;
@@ -393,17 +393,17 @@
393
393
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
394
394
  --_rs-typography-link-border-bottom-width-from-text:1px;
395
395
  }
396
- ._sizeS_jnskcc_17{
396
+ ._sizeS_mpsmni_17{
397
397
  --_rs-tag-removable-vertical-padding:4px;
398
398
  --_rs-tag-removable-left-padding:8px;
399
399
  --_rs-tag-removable-border-radius:4px;
400
400
  --_rs-tag-removable-close-part-size:28px;
401
401
  --_rs-tag-removable-custom-icon-size:20px;
402
402
  }
403
- ._sizeS_jnskcc_17 [data-rs-internal="removable-tag__close-icon"]:not(html){
403
+ ._sizeS_mpsmni_17 [data-rs-internal="removable-tag__close-icon"]:not(html){
404
404
  --_rs-icons-height:20px;
405
405
  }
406
- ._sizeS_jnskcc_17 {
406
+ ._sizeS_mpsmni_17 {
407
407
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
408
408
  --_rs-typography-text-transform:initial;
409
409
  --_rs-typography-font-variant-numeric:initial;
@@ -438,17 +438,17 @@
438
438
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
439
439
  --_rs-typography-link-border-bottom-width-from-text:1px;
440
440
  }
441
- ._sizeM_jnskcc_20{
441
+ ._sizeM_mpsmni_20{
442
442
  --_rs-tag-removable-vertical-padding:6px;
443
443
  --_rs-tag-removable-left-padding:12px;
444
444
  --_rs-tag-removable-border-radius:6px;
445
445
  --_rs-tag-removable-close-part-size:36px;
446
446
  --_rs-tag-removable-custom-icon-size:24px;
447
447
  }
448
- ._sizeM_jnskcc_20 [data-rs-internal="removable-tag__close-icon"]:not(html){
448
+ ._sizeM_mpsmni_20 [data-rs-internal="removable-tag__close-icon"]:not(html){
449
449
  --_rs-icons-height:24px;
450
450
  }
451
- ._sizeM_jnskcc_20 {
451
+ ._sizeM_mpsmni_20 {
452
452
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
453
453
  --_rs-typography-text-transform:initial;
454
454
  --_rs-typography-font-variant-numeric:initial;
@@ -487,21 +487,21 @@
487
487
  --_rs-typography-link-border-bottom-width-from-text:1px;
488
488
  }
489
489
  @media screen and (max-width: 640px){
490
- ._sizeM_jnskcc_20 {
490
+ ._sizeM_mpsmni_20 {
491
491
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
492
492
  }
493
493
  }
494
- ._sizeL_jnskcc_23{
494
+ ._sizeL_mpsmni_23{
495
495
  --_rs-tag-removable-vertical-padding:8px;
496
496
  --_rs-tag-removable-left-padding:16px;
497
497
  --_rs-tag-removable-border-radius:8px;
498
498
  --_rs-tag-removable-close-part-size:44px;
499
499
  --_rs-tag-removable-custom-icon-size:28px;
500
500
  }
501
- ._sizeL_jnskcc_23 [data-rs-internal="removable-tag__close-icon"]:not(html){
501
+ ._sizeL_mpsmni_23 [data-rs-internal="removable-tag__close-icon"]:not(html){
502
502
  --_rs-icons-height:28px;
503
503
  }
504
- ._sizeL_jnskcc_23 {
504
+ ._sizeL_mpsmni_23 {
505
505
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
506
506
  --_rs-typography-text-transform:initial;
507
507
  --_rs-typography-font-variant-numeric:initial;
@@ -540,11 +540,11 @@
540
540
  --_rs-typography-link-border-bottom-width-from-text:1px;
541
541
  }
542
542
  @media screen and (max-width: 640px){
543
- ._sizeL_jnskcc_23 {
543
+ ._sizeL_mpsmni_23 {
544
544
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
545
545
  }
546
546
  }
547
- ._wrapper_jnskcc_27{
547
+ ._wrapper_mpsmni_27{
548
548
  --_rs-theme-dark:var(
549
549
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
550
550
  var(--rs-theme-dark, 0)
@@ -554,7 +554,7 @@
554
554
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
555
555
  }
556
556
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
557
- ._wrapper_jnskcc_27{
557
+ ._wrapper_mpsmni_27{
558
558
  --_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)));
559
559
  --_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)));
560
560
  --_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)));
@@ -563,7 +563,7 @@
563
563
  }
564
564
  }
565
565
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
566
- ._wrapper_jnskcc_27{
566
+ ._wrapper_mpsmni_27{
567
567
  --_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);
568
568
  --_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));
569
569
  --_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));
@@ -571,7 +571,7 @@
571
571
  --_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));
572
572
  }
573
573
  }
574
- ._wrapper_jnskcc_27 {
574
+ ._wrapper_mpsmni_27 {
575
575
  letter-spacing:var(
576
576
  --rs-text-base-letter-spacing,
577
577
  var(--_rs-typography-letter-spacing)
@@ -600,10 +600,10 @@
600
600
 
601
601
  background-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.1);
602
602
  }
603
- ._wrapper_jnskcc_27 > *{
603
+ ._wrapper_mpsmni_27 > *{
604
604
  vertical-align:top;
605
605
  }
606
- ._wrapper_jnskcc_27 ._icon_jnskcc_49{
606
+ ._wrapper_mpsmni_27 ._icon_mpsmni_49{
607
607
  flex:1 0 auto;
608
608
  align-self:center;
609
609
 
@@ -614,14 +614,14 @@
614
614
  vertical-align:top;
615
615
  fill:currentColor;
616
616
  }
617
- ._disabled_jnskcc_62{
617
+ ._disabled_mpsmni_62{
618
618
  pointer-events:none;
619
619
  color:var(
620
620
  --rs-color-pale,
621
621
  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.5)
622
622
  );
623
623
  }
624
- ._main_jnskcc_67{
624
+ ._main_mpsmni_67{
625
625
  display:inline-flex;
626
626
  flex:1 1 auto;
627
627
  justify-content:center;
@@ -635,10 +635,10 @@
635
635
 
636
636
  background:transparent;
637
637
  }
638
- ._wrap_jnskcc_27 ._main_jnskcc_67{
638
+ ._wrap_mpsmni_27 ._main_mpsmni_67{
639
639
  white-space:normal;
640
640
  }
641
- ._close_jnskcc_86{
641
+ ._close_mpsmni_86{
642
642
  top:0;
643
643
  right:0;
644
644
  bottom:0;
@@ -666,82 +666,82 @@
666
666
  -webkit-font-smoothing:inherit;
667
667
  -moz-osx-font-smoothing:inherit;
668
668
  }
669
- ._close_jnskcc_86::-moz-focus-inner{
669
+ ._close_mpsmni_86::-moz-focus-inner{
670
670
  padding:0;
671
671
 
672
672
  border:0;
673
673
  }
674
- ._close_jnskcc_86:active,
675
- ._close_jnskcc_86:hover,
676
- ._close_jnskcc_86:focus{
674
+ ._close_mpsmni_86:active,
675
+ ._close_mpsmni_86:hover,
676
+ ._close_mpsmni_86:focus{
677
677
  outline:none;
678
678
 
679
679
  text-decoration:none;
680
680
  }
681
- ._close_jnskcc_86:hover{
681
+ ._close_mpsmni_86:hover{
682
682
  color:rgb(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));
683
683
  background-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.1);
684
684
  }
685
- ._close_jnskcc_86:active{
685
+ ._close_mpsmni_86:active{
686
686
  color:rgb(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));
687
687
  background-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);
688
688
  }
689
- ._close_jnskcc_86:focus[data-focus-method='key']{
689
+ ._close_mpsmni_86:focus[data-focus-method='key']{
690
690
  box-shadow:inset 0 0 0 4px var(--_rs-color-primary-dim);
691
691
  }
692
- ._disabled_jnskcc_62 ._close_jnskcc_86{
692
+ ._disabled_mpsmni_62 ._close_mpsmni_86{
693
693
  pointer-events:none;
694
694
  }
695
695
 
696
- ._wrapper_1o3l76p_3{
696
+ ._wrapper_j4620j_3{
697
697
  position:relative;
698
698
  }
699
- ._offset16_1o3l76p_7{
699
+ ._offset16_j4620j_7{
700
700
  --_rs-tag-sticky-side-offset:16px;
701
701
  }
702
- ._offset24_1o3l76p_10{
702
+ ._offset24_j4620j_10{
703
703
  --_rs-tag-sticky-side-offset:24px;
704
704
  }
705
- ._offset32_1o3l76p_13{
705
+ ._offset32_j4620j_13{
706
706
  --_rs-tag-sticky-side-offset:32px;
707
707
  }
708
- ._alignTop_1o3l76p_17{
708
+ ._alignTop_j4620j_17{
709
709
  --_rs-tag-sticky-border-radius:var(--_rs-tag-border-radius) var(--_rs-tag-border-radius) 0 0;
710
710
  --_rs-tag-sticky-translate-y:-100%;
711
711
  }
712
- ._alignMiddle_1o3l76p_20{
712
+ ._alignMiddle_j4620j_20{
713
713
  --_rs-tag-sticky-border-radius:var(--_rs-tag-border-radius);
714
714
  --_rs-tag-sticky-translate-y:-50%;
715
715
  }
716
- ._topStart_1o3l76p_24{
716
+ ._topStart_j4620j_24{
717
717
  --_rs-tag-sticky-top:0;
718
718
  --_rs-tag-sticky-right:initial;
719
719
  --_rs-tag-sticky-left:var(--_rs-tag-sticky-side-offset);
720
720
  --_rs-tag-sticky-transform:translate(0, var(--_rs-tag-sticky-translate-y));
721
721
  --_rs-tag-sticky-transform-origin:initial;
722
722
  }
723
- ._topEnd_1o3l76p_27{
723
+ ._topEnd_j4620j_27{
724
724
  --_rs-tag-sticky-top:0;
725
725
  --_rs-tag-sticky-right:var(--_rs-tag-sticky-side-offset);
726
726
  --_rs-tag-sticky-left:initial;
727
727
  --_rs-tag-sticky-transform:translate(0, var(--_rs-tag-sticky-translate-y));
728
728
  --_rs-tag-sticky-transform-origin:initial;
729
729
  }
730
- ._leftStart_1o3l76p_30{
730
+ ._leftStart_j4620j_30{
731
731
  --_rs-tag-sticky-top:var(--_rs-tag-sticky-side-offset);
732
732
  --_rs-tag-sticky-right:100%;
733
733
  --_rs-tag-sticky-left:initial;
734
734
  --_rs-tag-sticky-transform:rotate(270deg) translate(0, var(--_rs-tag-sticky-translate-y));
735
735
  --_rs-tag-sticky-transform-origin:100% 0;
736
736
  }
737
- ._leftEnd_1o3l76p_33{
737
+ ._leftEnd_j4620j_33{
738
738
  --_rs-tag-sticky-top:calc(100% - var(--_rs-tag-sticky-side-offset));
739
739
  --_rs-tag-sticky-right:100%;
740
740
  --_rs-tag-sticky-left:initial;
741
741
  --_rs-tag-sticky-transform:rotate(270deg) translate(100%, var(--_rs-tag-sticky-translate-y));
742
742
  --_rs-tag-sticky-transform-origin:100% 0;
743
743
  }
744
- ._tag_1o3l76p_37{
744
+ ._tag_j4620j_37{
745
745
  position:absolute;
746
746
  top:var(--_rs-tag-sticky-top);
747
747
  right:var(--_rs-tag-sticky-right);
@@ -1,12 +1,12 @@
1
1
  var styles = {
2
- "alignIconLeft": "_alignIconLeft_3teyd1_7",
3
- "alignIconRight": "_alignIconRight_3teyd1_10",
4
- "uppercase": "_uppercase_3teyd1_14",
5
- "sizeXs": "_sizeXs_3teyd1_18",
6
- "sizeS": "_sizeS_3teyd1_21",
7
- "sizeM": "_sizeM_3teyd1_24",
8
- "sizeL": "_sizeL_3teyd1_27",
9
- "main": "_main_3teyd1_31",
10
- "icon": "_icon_3teyd1_60"
2
+ "alignIconLeft": "_alignIconLeft_qnyffr_7",
3
+ "alignIconRight": "_alignIconRight_qnyffr_10",
4
+ "uppercase": "_uppercase_qnyffr_14",
5
+ "sizeXs": "_sizeXs_qnyffr_18",
6
+ "sizeS": "_sizeS_qnyffr_21",
7
+ "sizeM": "_sizeM_qnyffr_24",
8
+ "sizeL": "_sizeL_qnyffr_27",
9
+ "main": "_main_qnyffr_31",
10
+ "icon": "_icon_qnyffr_60"
11
11
  };
12
12
  export { styles as default };
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_jnskcc_7",
3
- "themeDark": "_themeDark_jnskcc_10",
4
- "sizeXs": "_sizeXs_jnskcc_14",
5
- "sizeS": "_sizeS_jnskcc_17",
6
- "sizeM": "_sizeM_jnskcc_20",
7
- "sizeL": "_sizeL_jnskcc_23",
8
- "wrapper": "_wrapper_jnskcc_27",
9
- "icon": "_icon_jnskcc_49",
10
- "disabled": "_disabled_jnskcc_62",
11
- "main": "_main_jnskcc_67",
12
- "wrap": "_wrap_jnskcc_27",
13
- "close": "_close_jnskcc_86"
2
+ "themeLight": "_themeLight_mpsmni_7",
3
+ "themeDark": "_themeDark_mpsmni_10",
4
+ "sizeXs": "_sizeXs_mpsmni_14",
5
+ "sizeS": "_sizeS_mpsmni_17",
6
+ "sizeM": "_sizeM_mpsmni_20",
7
+ "sizeL": "_sizeL_mpsmni_23",
8
+ "wrapper": "_wrapper_mpsmni_27",
9
+ "icon": "_icon_mpsmni_49",
10
+ "disabled": "_disabled_mpsmni_62",
11
+ "main": "_main_mpsmni_67",
12
+ "wrap": "_wrap_mpsmni_27",
13
+ "close": "_close_mpsmni_86"
14
14
  };
15
15
  export { styles as default };
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_1o3l76p_3",
3
- "offset16": "_offset16_1o3l76p_7",
4
- "offset24": "_offset24_1o3l76p_10",
5
- "offset32": "_offset32_1o3l76p_13",
6
- "alignTop": "_alignTop_1o3l76p_17",
7
- "alignMiddle": "_alignMiddle_1o3l76p_20",
8
- "topStart": "_topStart_1o3l76p_24",
9
- "topEnd": "_topEnd_1o3l76p_27",
10
- "leftStart": "_leftStart_1o3l76p_30",
11
- "leftEnd": "_leftEnd_1o3l76p_33",
12
- "tag": "_tag_1o3l76p_37"
2
+ "wrapper": "_wrapper_j4620j_3",
3
+ "offset16": "_offset16_j4620j_7",
4
+ "offset24": "_offset24_j4620j_10",
5
+ "offset32": "_offset32_j4620j_13",
6
+ "alignTop": "_alignTop_j4620j_17",
7
+ "alignMiddle": "_alignMiddle_j4620j_20",
8
+ "topStart": "_topStart_j4620j_24",
9
+ "topEnd": "_topEnd_j4620j_27",
10
+ "leftStart": "_leftStart_j4620j_30",
11
+ "leftEnd": "_leftEnd_j4620j_33",
12
+ "tag": "_tag_j4620j_37"
13
13
  };
14
14
  export { styles as default };
@@ -1,4 +1,4 @@
1
1
  var styles = {
2
- "main": "_main_1j1j1dv_1"
2
+ "main": "_main_1vzrsi9_1"
3
3
  };
4
4
  export { styles as default };
@@ -439,57 +439,42 @@ import { PersonOutlineIcon } from '@rescui/icons';
439
439
 
440
440
  ##### Demo
441
441
 
442
- Instead of separate classes, it may be a single class with `@media` queries inside:
442
+ Use the controls to see the effect at different viewport widths.
443
443
 
444
444
  ```tsx
445
445
  import { Tag, presets } from '@rescui/tag';
446
446
  import { PersonIcon } from '@rescui/icons';
447
447
 
448
- const MyTag = ({ className }) => {
448
+ const MyTag = () => {
449
449
  return (
450
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
451
- <Tag
452
- {...presets['classic-light']}
453
- size={'m'}
454
- icon={<PersonIcon />}
455
- className={className}
456
- >
457
- Tag
458
- </Tag>
459
- </div>
450
+ <Tag
451
+ {...presets['classic-light']}
452
+ size={'m'}
453
+ icon={<PersonIcon />}
454
+ className="my-tag"
455
+ >
456
+ Tag
457
+ </Tag>
460
458
  );
461
459
  };
462
460
 
463
- render(
464
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
465
- <div>
466
- <p>Default:</p>
467
- <MyTag />
468
- </div>
469
- <div>
470
- <p>Var1:</p>
471
- <MyTag className={`my-tag-var-1`} />
472
- </div>
473
- <div>
474
- <p>Var1 & Var2 combined:</p>
475
- <MyTag className={`my-tag-var-1 my-tag-var-2`} />
476
- </div>
477
- </div>
478
- );
461
+ render(<MyTag />);
479
462
  ```
480
463
 
481
464
  ```postcss
482
465
  @import '@rescui/tag/lib/public-api.p.css';
483
466
 
484
- .my-tag-var-1 {
485
- @mixin rs-tag-size-l;
486
- @mixin rs-tag-align-icon-right;
487
- @mixin rs-tag-uppercase-true;
488
- }
489
- .my-tag-var-2 {
490
- @mixin rs-tag-size-xs;
491
- @mixin rs-tag-align-icon-left;
492
- @mixin rs-tag-uppercase-false;
467
+ .my-tag {
468
+ @media (max-width: 640px) {
469
+ @mixin rs-tag-size-l;
470
+ @mixin rs-tag-align-icon-right;
471
+ @mixin rs-tag-uppercase-true;
472
+ }
473
+ @media (max-width: 500px) {
474
+ @mixin rs-tag-size-xs;
475
+ @mixin rs-tag-align-icon-left;
476
+ @mixin rs-tag-uppercase-false;
477
+ }
493
478
  }
494
479
  ```
495
480
 
@@ -517,7 +502,7 @@ render(
517
502
 
518
503
  ##### Demo
519
504
 
520
- Instead of separate classes, it may be a single class with `@media` queries inside:
505
+ Use the controls to see the effect at different viewport widths.
521
506
 
522
507
  ```tsx
523
508
  import { StickyTag, presets } from '@rescui/tag';
@@ -525,65 +510,49 @@ import { PersonIcon } from '@rescui/icons';
525
510
  import { textCn } from '@rescui/typography';
526
511
  import { cardCn } from '@rescui/card';
527
512
 
528
- const MyStickyTag = ({ className }) => {
513
+ const MyStickyTag = () => {
529
514
  return (
530
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)', maxWidth: 400 }}>
531
- <StickyTag
532
- content="Sale"
533
- {...presets['classic-light']}
534
- icon={<PersonIcon />}
535
- className={className}
536
- >
537
- <div className={cardCn({ theme: 'light' })}>
538
- <h3 className={textCn('rs-h3')}>Card content</h3>
539
- <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
540
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
541
- amet, atque dolore enim eum fuga in itaque iure nisi, nostrum
542
- numquam odio perspiciatis provident quas quo, ratione saepe sunt.
543
- Tempora.
544
- </p>
545
- </div>
546
- </StickyTag>
547
- </div>
515
+ <StickyTag
516
+ content="Sale"
517
+ {...presets['classic-light']}
518
+ icon={<PersonIcon />}
519
+ className="my-sticky-tag"
520
+ >
521
+ <div className={cardCn({ theme: 'light' })}>
522
+ <h3 className={textCn('rs-h3')}>Card content</h3>
523
+ <p className={`${textCn('rs-text-2')} rs-docs-offset-top-24`}>
524
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet,
525
+ atque dolore enim eum fuga in itaque iure nisi, nostrum numquam odio
526
+ perspiciatis provident quas quo, ratione saepe sunt. Tempora.
527
+ </p>
528
+ </div>
529
+ </StickyTag>
548
530
  );
549
531
  };
550
532
 
551
- render(
552
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
553
- <div>
554
- <p>Default:</p>
555
- <MyStickyTag />
556
- </div>
557
- <div>
558
- <p>Var1:</p>
559
- <MyStickyTag className={`my-sticky-tag-var-1`} />
560
- </div>
561
- <div>
562
- <p>Var1 & Var2 combined:</p>
563
- <MyStickyTag className={`my-sticky-tag-var-1 my-sticky-tag-var-2`} />
564
- </div>
565
- </div>
566
- );
533
+ render(<MyStickyTag />);
567
534
  ```
568
535
 
569
536
  ```postcss attached
570
537
  @import '@rescui/tag/lib/public-api.p.css';
571
538
 
572
- .my-sticky-tag-var-1 {
573
- @mixin rs-sticky-tag-size-l;
574
- @mixin rs-sticky-tag-align-icon-right;
575
- @mixin rs-sticky-tag-uppercase-true;
576
- @mixin rs-sticky-tag-offset-32;
577
- @mixin rs-sticky-tag-align-middle;
578
- @mixin rs-sticky-tag-placement-top-start;
579
- }
580
- .my-sticky-tag-var-2 {
581
- @mixin rs-sticky-tag-size-m;
582
- @mixin rs-sticky-tag-align-icon-left;
583
- @mixin rs-sticky-tag-uppercase-false;
584
- @mixin rs-sticky-tag-offset-16;
585
- @mixin rs-sticky-tag-align-top;
586
- @mixin rs-sticky-tag-placement-left-end;
539
+ .my-sticky-tag {
540
+ @media (max-width: 640px) {
541
+ @mixin rs-sticky-tag-size-l;
542
+ @mixin rs-sticky-tag-align-icon-right;
543
+ @mixin rs-sticky-tag-uppercase-true;
544
+ @mixin rs-sticky-tag-offset-32;
545
+ @mixin rs-sticky-tag-align-middle;
546
+ @mixin rs-sticky-tag-placement-top-start;
547
+ }
548
+ @media (max-width: 500px) {
549
+ @mixin rs-sticky-tag-size-m;
550
+ @mixin rs-sticky-tag-align-icon-left;
551
+ @mixin rs-sticky-tag-uppercase-false;
552
+ @mixin rs-sticky-tag-offset-16;
553
+ @mixin rs-sticky-tag-align-top;
554
+ @mixin rs-sticky-tag-placement-left-end;
555
+ }
587
556
  }
588
557
  ```
589
558
 
@@ -598,57 +567,35 @@ render(
598
567
 
599
568
  ##### Demo
600
569
 
601
- Instead of separate classes, it may be a single class with `@media` queries inside:
570
+ Use the controls to see the effect at different viewport widths.
602
571
 
603
572
  ```tsx
604
573
  import { RemovableTag } from '@rescui/tag';
605
574
 
606
- const MyRemovableTag = ({ className }) => {
575
+ const MyRemovableTag = () => {
607
576
  return (
608
- <div
609
- style={{
610
- padding: 12,
611
- backgroundColor: 'var(--rs-color-black-t5)'
612
- }}
577
+ <RemovableTag
578
+ onRemoveClick={() => console.log('removed')}
579
+ className="my-removable-tag"
613
580
  >
614
- <RemovableTag
615
- onRemoveClick={() => console.log('removed')}
616
- className={className}
617
- >
618
- Test Tag
619
- </RemovableTag>
620
- </div>
581
+ Test Tag
582
+ </RemovableTag>
621
583
  );
622
584
  };
623
585
 
624
- render(
625
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
626
- <div>
627
- <p>Default:</p>
628
- <MyRemovableTag />
629
- </div>
630
- <div>
631
- <p>Var1:</p>
632
- <MyRemovableTag className={`my-removable-tag-var-1`} />
633
- </div>
634
- <div>
635
- <p>Var1 & Var2 combined:</p>
636
- <MyRemovableTag
637
- className={`my-removable-tag-var-1 my-removable-tag-var-2`}
638
- />
639
- </div>
640
- </div>
641
- );
586
+ render(<MyRemovableTag />);
642
587
  ```
643
588
 
644
589
  ```postcss
645
590
  @import '@rescui/tag/lib/public-api.p.css';
646
591
 
647
- .my-removable-tag-var-1 {
648
- @mixin rs-removable-tag-size-l;
649
- }
650
- .my-removable-tag-var-2 {
651
- @mixin rs-removable-tag-size-m;
592
+ .my-removable-tag {
593
+ @media (max-width: 640px) {
594
+ @mixin rs-removable-tag-size-l;
595
+ }
596
+ @media (max-width: 500px) {
597
+ @mixin rs-removable-tag-size-m;
598
+ }
652
599
  }
653
600
  ```
654
601
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tag",
3
- "version": "0.13.11",
3
+ "version": "0.13.12-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,23 +17,23 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime-corejs3": "^7.26.0",
20
- "@rescui/colors": "^0.3.2",
20
+ "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
21
21
  "classnames": "^2.3.1"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "@rescui/ui-contexts": "^0.6.0",
25
25
  "prop-types": "^15",
26
- "react": ">=16.8.0 <20"
26
+ "react": ">=17.0.0 <20"
27
27
  },
28
28
  "devDependencies": {
29
- "@rescui/icons": "^1.8.2",
30
- "@rescui/scripts": "^0.5.2",
31
- "@rescui/typography": "^0.27.2"
29
+ "@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
30
+ "@rescui/scripts": "0.5.2",
31
+ "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rescui-scripts build && yarn run build-pcss-api",
35
35
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
36
36
  },
37
37
  "nx": {},
38
- "gitHead": "d60e4f3491c7cdb9ef684d08940869914492a61b"
38
+ "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
39
39
  }