@rescui/tag 0.1.0 → 0.3.0

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 (9) hide show
  1. package/lib/index.css +130 -130
  2. package/lib/parts/base-tag.module.pcss.js +10 -10
  3. package/lib/parts/presets.js +3 -3
  4. package/lib/parts/removable-tag.d.ts +2 -0
  5. package/lib/parts/removable-tag.js +11 -7
  6. package/lib/parts/removable-tag.module.pcss.js +13 -12
  7. package/lib/parts/sticky-tag.module.pcss.js +15 -15
  8. package/lib/parts/tag.module.pcss.js +4 -4
  9. package/package.json +5 -5
package/lib/index.css CHANGED
@@ -1,19 +1,21 @@
1
- ._wrapper_vd286z_41{
1
+ ._wrapper_1cdlqwk_36{
2
2
  position:relative;
3
3
 
4
- display:inline-block;
4
+ display:-webkit-inline-box;
5
+
6
+ display:-ms-inline-flexbox;
7
+
8
+ display:inline-flex;
5
9
 
6
10
  white-space:nowrap;
7
11
  }
8
12
 
9
- ._wrapper_vd286z_41 > *{
13
+ ._wrapper_1cdlqwk_36 > *{
10
14
  vertical-align:top;
11
15
  }
12
- ._sizeXs_vd286z_53,
13
- ._sizeS_vd286z_54{
16
+ ._sizeXs_1cdlqwk_48,
17
+ ._sizeS_1cdlqwk_49{
14
18
  letter-spacing:0.0045em;
15
- color:rgba(25,25,28,0.7);
16
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
17
19
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
18
20
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
19
21
  font-size:13px;
@@ -21,13 +23,11 @@
21
23
  line-height:20px;
22
24
  line-height:var(--rs-text-3-line-height, 20px);
23
25
  }
24
- ._rs-reset-letter-spacing_vd286z_1 ._sizeXs_vd286z_53,._rs-reset-letter-spacing_vd286z_1 ._sizeS_vd286z_54{
26
+ ._rs-reset-letter-spacing_1cdlqwk_1 ._sizeXs_1cdlqwk_48,._rs-reset-letter-spacing_1cdlqwk_1 ._sizeS_1cdlqwk_49{
25
27
  letter-spacing:normal;
26
28
  }
27
- ._sizeM_vd286z_58{
29
+ ._sizeM_1cdlqwk_53{
28
30
  letter-spacing:0.0015em;
29
- color:rgba(25,25,28,0.7);
30
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
31
31
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
32
32
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
33
33
  font-size:16px;
@@ -36,12 +36,10 @@
36
36
  line-height:24px;
37
37
  line-height:var(--rs-text-2-line-height, 24px);
38
38
  }
39
- ._rs-reset-letter-spacing_vd286z_1 ._sizeM_vd286z_58{
39
+ ._rs-reset-letter-spacing_1cdlqwk_1 ._sizeM_1cdlqwk_53{
40
40
  letter-spacing:normal;
41
41
  }
42
- ._sizeL_vd286z_62{
43
- color:rgba(25,25,28,0.7);
44
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
42
+ ._sizeL_1cdlqwk_57{
45
43
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
46
44
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
47
45
  font-size:19px;
@@ -50,51 +48,58 @@
50
48
  line-height:28px;
51
49
  line-height:var(--rs-text-1-line-height, 28px);
52
50
  }
53
- ._themeLight_vd286z_66._disabled_vd286z_66{
51
+ ._themeLight_1cdlqwk_61{
52
+ color:rgba(25,25,28,0.7);
53
+ color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
54
+ }
55
+ ._themeLight_1cdlqwk_61._disabled_1cdlqwk_65{
54
56
  color:rgba(25,25,28,0.5);
55
57
  color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
56
58
  }
57
- ._themeDark_vd286z_70{
59
+ ._themeDark_1cdlqwk_69{
58
60
  color:rgba(255,255,255,0.7);
59
61
  color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
60
62
  }
61
- ._themeDark_vd286z_70._disabled_vd286z_66{
63
+ ._themeDark_1cdlqwk_69._disabled_1cdlqwk_65{
62
64
  color:rgba(255,255,255,0.5);
63
65
  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
64
66
  }
65
- ._disabled_vd286z_66{
67
+ ._disabled_1cdlqwk_65{
66
68
  pointer-events:none;
67
69
  }
68
- ._sizeXs_vd286z_53{
70
+ ._sizeXs_1cdlqwk_48{
69
71
  padding-left:8px;
70
72
 
71
73
  border-radius:4px;
72
74
  }
73
- ._sizeS_vd286z_54{
75
+ ._sizeS_1cdlqwk_49{
74
76
  padding-left:8px;
75
77
 
76
78
  border-radius:4px;
77
79
  }
78
- ._sizeM_vd286z_58{
80
+ ._sizeM_1cdlqwk_53{
79
81
  padding-left:12px;
80
82
 
81
83
  border-radius:6px;
82
84
  }
83
- ._sizeL_vd286z_62{
85
+ ._sizeL_1cdlqwk_57{
84
86
  padding-left:16px;
85
87
 
86
88
  border-radius:8px;
87
89
  }
88
- ._themeLight_vd286z_66{
90
+ ._themeLight_1cdlqwk_61{
89
91
  background-color:rgba(25,25,28,0.1);
90
92
  }
91
- ._themeDark_vd286z_70{
93
+ ._themeDark_1cdlqwk_69{
92
94
  background-color:rgba(255,255,255,0.1);
93
95
  }
94
- ._main_vd286z_111{
96
+ ._main_1cdlqwk_110{
95
97
  display:-webkit-inline-box;
96
98
  display:-ms-inline-flexbox;
97
99
  display:inline-flex;
100
+ -webkit-box-flex:1;
101
+ -ms-flex:1 1 auto;
102
+ flex:1 1 auto;
98
103
  -webkit-box-pack:center;
99
104
  -ms-flex-pack:center;
100
105
  justify-content:center;
@@ -106,27 +111,30 @@
106
111
 
107
112
  background:transparent;
108
113
  }
109
- ._sizeXs_vd286z_53 ._main_vd286z_111{
114
+ ._wrap_1cdlqwk_36 ._main_1cdlqwk_110{
115
+ white-space:normal;
116
+ }
117
+ ._sizeXs_1cdlqwk_48 ._main_1cdlqwk_110{
110
118
  padding-top:2px;
111
119
  padding-right:2px;
112
120
  padding-bottom:2px;
113
121
  }
114
- ._sizeS_vd286z_54 ._main_vd286z_111{
122
+ ._sizeS_1cdlqwk_49 ._main_1cdlqwk_110{
115
123
  padding-top:4px;
116
124
  padding-right:2px;
117
125
  padding-bottom:4px;
118
126
  }
119
- ._sizeM_vd286z_58 ._main_vd286z_111{
127
+ ._sizeM_1cdlqwk_53 ._main_1cdlqwk_110{
120
128
  padding-top:6px;
121
129
  padding-right:2px;
122
130
  padding-bottom:6px;
123
131
  }
124
- ._sizeL_vd286z_62 ._main_vd286z_111{
132
+ ._sizeL_1cdlqwk_57 ._main_1cdlqwk_110{
125
133
  padding-top:8px;
126
134
  padding-right:4px;
127
135
  padding-bottom:8px;
128
136
  }
129
- ._close_vd286z_142{
137
+ ._close_1cdlqwk_146{
130
138
  top:0;
131
139
  right:0;
132
140
  bottom:0;
@@ -137,6 +145,9 @@
137
145
 
138
146
  display:inline-flex;
139
147
  overflow:visible;
148
+ -webkit-box-flex:1;
149
+ -ms-flex:1 0 auto;
150
+ flex:1 0 auto;
140
151
  -webkit-box-pack:center;
141
152
  -ms-flex-pack:center;
142
153
  justify-content:center;
@@ -159,109 +170,106 @@
159
170
  -webkit-font-smoothing:inherit;
160
171
  -moz-osx-font-smoothing:inherit;
161
172
  }
162
- ._close_vd286z_142::-moz-focus-inner{
173
+ ._close_1cdlqwk_146::-moz-focus-inner{
163
174
  padding:0;
164
175
 
165
176
  border:0;
166
177
  }
167
- ._close_vd286z_142:active,
168
- ._close_vd286z_142:hover,
169
- ._close_vd286z_142:focus{
178
+ ._close_1cdlqwk_146:active,
179
+ ._close_1cdlqwk_146:hover,
180
+ ._close_1cdlqwk_146:focus{
170
181
  outline:none;
171
182
 
172
183
  text-decoration:none;
173
184
  }
174
- ._sizeXs_vd286z_53 ._close_vd286z_142{
185
+ ._sizeXs_1cdlqwk_48 ._close_1cdlqwk_146{
175
186
  width:28px;
176
- height:24px;
177
187
 
178
188
  border-radius:4px;
179
189
  }
180
- ._sizeS_vd286z_54 ._close_vd286z_142{
190
+ ._sizeS_1cdlqwk_49 ._close_1cdlqwk_146{
181
191
  width:28px;
182
- height:28px;
183
192
 
184
193
  border-radius:4px;
185
194
  }
186
- ._sizeM_vd286z_58 ._close_vd286z_142{
195
+ ._sizeM_1cdlqwk_53 ._close_1cdlqwk_146{
187
196
  width:36px;
188
- height:36px;
189
197
 
190
198
  border-radius:6px;
191
199
  }
192
- ._sizeL_vd286z_62 ._close_vd286z_142{
200
+ ._sizeL_1cdlqwk_57 ._close_1cdlqwk_146{
193
201
  width:44px;
194
- height:44px;
195
202
 
196
203
  border-radius:8px;
197
204
  }
198
- ._disabled_vd286z_66 ._close_vd286z_142{
205
+ ._disabled_1cdlqwk_65 ._close_1cdlqwk_146{
199
206
  pointer-events:none;
200
207
  }
201
- ._themeLight_vd286z_66 ._close_vd286z_142:hover{
208
+ ._themeLight_1cdlqwk_61 ._close_1cdlqwk_146:hover{
202
209
  color:#19191C;
203
210
  background-color:rgba(25,25,28,0.1);
204
211
  }
205
- ._themeDark_vd286z_70 ._close_vd286z_142:hover{
212
+ ._themeDark_1cdlqwk_69 ._close_1cdlqwk_146:hover{
206
213
  color:#FFFFFF;
207
214
  background-color:rgba(255,255,255,0.1);
208
215
  }
209
- ._themeLight_vd286z_66 ._close_vd286z_142:active{
216
+ ._themeLight_1cdlqwk_61 ._close_1cdlqwk_146:active{
210
217
  color:#19191C;
211
218
  background-color:rgba(25,25,28,0.2);
212
219
  }
213
- ._themeDark_vd286z_70 ._close_vd286z_142:active{
220
+ ._themeDark_1cdlqwk_69 ._close_1cdlqwk_146:active{
214
221
  color:#FFFFFF;
215
222
  background-color:rgba(255,255,255,0.2);
216
223
  }
217
- ._themeLight_vd286z_66 ._close_vd286z_142:focus[data-focus-method='key']{
218
- -webkit-box-shadow:inset 0 0 0 4px #4597ff;
219
- -webkit-box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-light-theme, #4597ff);
220
- box-shadow:inset 0 0 0 4px #4597ff;
221
- box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-light-theme, #4597ff);
224
+ ._themeLight_1cdlqwk_61 ._close_1cdlqwk_146:focus[data-focus-method='key']{
225
+ -webkit-box-shadow:inset 0 0 0 4px #8979ff;
226
+ -webkit-box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-light-theme, #8979ff);
227
+ box-shadow:inset 0 0 0 4px #8979ff;
228
+ box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-light-theme, #8979ff);
222
229
  }
223
- ._themeDark_vd286z_70 ._close_vd286z_142:focus[data-focus-method='key']{
224
- -webkit-box-shadow:inset 0 0 0 4px #428ad2;
225
- -webkit-box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-dark-theme, #428ad2);
226
- box-shadow:inset 0 0 0 4px #428ad2;
227
- box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-dark-theme, #428ad2);
230
+ ._themeDark_1cdlqwk_69 ._close_1cdlqwk_146:focus[data-focus-method='key']{
231
+ -webkit-box-shadow:inset 0 0 0 4px #6f61d2;
232
+ -webkit-box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-dark-theme, #6f61d2);
233
+ box-shadow:inset 0 0 0 4px #6f61d2;
234
+ box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-dark-theme, #6f61d2);
228
235
  }
229
- ._icon_vd286z_242{
236
+ ._icon_1cdlqwk_243{
237
+ -webkit-box-flex:1;
238
+ -ms-flex:1 0 auto;
239
+ flex:1 0 auto;
230
240
 
231
241
  margin-right:8px;
232
242
 
233
243
  vertical-align:top;
234
244
  fill:currentColor;
235
245
  }
236
- ._sizeXs_vd286z_53 ._icon_vd286z_242{
246
+ ._sizeXs_1cdlqwk_48 ._icon_1cdlqwk_243{
237
247
  width:20px;
238
248
  height:20px;
239
249
  margin-top:2px;
240
250
  margin-bottom:2px;
241
251
  }
242
- ._sizeS_vd286z_54 ._icon_vd286z_242{
252
+ ._sizeS_1cdlqwk_49 ._icon_1cdlqwk_243{
243
253
  width:20px;
244
254
  height:20px;
245
255
  margin-top:4px;
246
256
  margin-bottom:4px;
247
257
  }
248
- ._sizeM_vd286z_58 ._icon_vd286z_242{
258
+ ._sizeM_1cdlqwk_53 ._icon_1cdlqwk_243{
249
259
  width:24px;
250
260
  height:24px;
251
261
  margin-top:6px;
252
262
  margin-bottom:6px;
253
263
  }
254
- ._sizeL_vd286z_62 ._icon_vd286z_242{
264
+ ._sizeL_1cdlqwk_57 ._icon_1cdlqwk_243{
255
265
  width:28px;
256
266
  height:28px;
257
267
  margin-top:8px;
258
268
  margin-bottom:8px;
259
269
  }
260
270
 
261
- ._main_1dgx41h_25{
271
+ ._main_1m5h21f_25{
262
272
  letter-spacing:0.0015em;
263
- color:rgba(25,25,28,0.7);
264
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
265
273
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
266
274
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
267
275
  font-size:16px;
@@ -270,10 +278,10 @@
270
278
  line-height:24px;
271
279
  line-height:var(--rs-text-2-line-height, 24px);
272
280
  }
273
- ._rs-reset-letter-spacing_1dgx41h_1 ._main_1dgx41h_25{
281
+ ._rs-reset-letter-spacing_1m5h21f_1 ._main_1m5h21f_25{
274
282
  letter-spacing:normal;
275
283
  }
276
- ._main_1dgx41h_25 {
284
+ ._main_1m5h21f_25 {
277
285
 
278
286
  position:relative;
279
287
 
@@ -302,22 +310,20 @@
302
310
 
303
311
  background:transparent;
304
312
  }
305
- ._alignIconLeft_1dgx41h_46{
313
+ ._alignIconLeft_1m5h21f_46{
306
314
  -webkit-box-orient:horizontal;
307
315
  -webkit-box-direction:normal;
308
316
  -ms-flex-direction:row;
309
317
  flex-direction:row;
310
318
  }
311
- ._alignIconRight_1dgx41h_50{
319
+ ._alignIconRight_1m5h21f_50{
312
320
  -webkit-box-orient:horizontal;
313
321
  -webkit-box-direction:reverse;
314
322
  -ms-flex-direction:row-reverse;
315
323
  flex-direction:row-reverse;
316
324
  }
317
- ._sizeXs_1dgx41h_54{
325
+ ._sizeXs_1m5h21f_54{
318
326
  letter-spacing:0.0045em;
319
- color:rgba(25,25,28,0.7);
320
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
321
327
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
322
328
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
323
329
  font-size:13px;
@@ -325,18 +331,16 @@
325
331
  line-height:20px;
326
332
  line-height:var(--rs-text-3-line-height, 20px);
327
333
  }
328
- ._rs-reset-letter-spacing_1dgx41h_1 ._sizeXs_1dgx41h_54{
334
+ ._rs-reset-letter-spacing_1m5h21f_1 ._sizeXs_1m5h21f_54{
329
335
  letter-spacing:normal;
330
336
  }
331
- ._sizeXs_1dgx41h_54 {
337
+ ._sizeXs_1m5h21f_54 {
332
338
 
333
339
  padding:1px
334
340
  7px;
335
341
  }
336
- ._sizeS_1dgx41h_61{
342
+ ._sizeS_1m5h21f_61{
337
343
  letter-spacing:0.0045em;
338
- color:rgba(25,25,28,0.7);
339
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
340
344
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
341
345
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
342
346
  font-size:13px;
@@ -344,18 +348,16 @@
344
348
  line-height:20px;
345
349
  line-height:var(--rs-text-3-line-height, 20px);
346
350
  }
347
- ._rs-reset-letter-spacing_1dgx41h_1 ._sizeS_1dgx41h_61{
351
+ ._rs-reset-letter-spacing_1m5h21f_1 ._sizeS_1m5h21f_61{
348
352
  letter-spacing:normal;
349
353
  }
350
- ._sizeS_1dgx41h_61 {
354
+ ._sizeS_1m5h21f_61 {
351
355
 
352
356
  padding:3px
353
357
  7px;
354
358
  }
355
- ._sizeM_1dgx41h_68{
359
+ ._sizeM_1m5h21f_68{
356
360
  letter-spacing:0.0015em;
357
- color:rgba(25,25,28,0.7);
358
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
359
361
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
360
362
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
361
363
  font-size:16px;
@@ -364,17 +366,15 @@
364
366
  line-height:24px;
365
367
  line-height:var(--rs-text-2-line-height, 24px);
366
368
  }
367
- ._rs-reset-letter-spacing_1dgx41h_1 ._sizeM_1dgx41h_68{
369
+ ._rs-reset-letter-spacing_1m5h21f_1 ._sizeM_1m5h21f_68{
368
370
  letter-spacing:normal;
369
371
  }
370
- ._sizeM_1dgx41h_68 {
372
+ ._sizeM_1m5h21f_68 {
371
373
 
372
374
  padding:5px
373
375
  11px;
374
376
  }
375
- ._sizeL_1dgx41h_75{
376
- color:rgba(25,25,28,0.7);
377
- color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
377
+ ._sizeL_1m5h21f_75{
378
378
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
379
379
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
380
380
  font-size:19px;
@@ -386,152 +386,152 @@
386
386
  padding:7px
387
387
  15px;
388
388
  }
389
- ._icon_1dgx41h_82{
389
+ ._icon_1m5h21f_82{
390
390
  fill:currentColor;
391
391
  }
392
- ._sizeXs_1dgx41h_54 ._icon_1dgx41h_82{
392
+ ._sizeXs_1m5h21f_54 ._icon_1m5h21f_82{
393
393
  width:20px;
394
394
  height:20px;
395
395
  }
396
- ._sizeS_1dgx41h_61 ._icon_1dgx41h_82{
396
+ ._sizeS_1m5h21f_61 ._icon_1m5h21f_82{
397
397
  width:20px;
398
398
  height:20px;
399
399
  }
400
- ._sizeM_1dgx41h_68 ._icon_1dgx41h_82{
400
+ ._sizeM_1m5h21f_68 ._icon_1m5h21f_82{
401
401
  width:24px;
402
402
  height:24px;
403
403
  }
404
- ._sizeL_1dgx41h_75 ._icon_1dgx41h_82{
404
+ ._sizeL_1m5h21f_75 ._icon_1m5h21f_82{
405
405
  width:28px;
406
406
  height:28px;
407
407
  }
408
- ._alignIconLeft_1dgx41h_46 ._icon_1dgx41h_82{
408
+ ._alignIconLeft_1m5h21f_46 ._icon_1m5h21f_82{
409
409
  margin-right:8px;
410
410
  margin-left:0;
411
411
  }
412
- ._alignIconRight_1dgx41h_50 ._icon_1dgx41h_82{
412
+ ._alignIconRight_1m5h21f_50 ._icon_1m5h21f_82{
413
413
  margin-right:0;
414
414
  margin-left:8px;
415
415
  }
416
- ._uppercase_1dgx41h_116{
416
+ ._uppercase_1m5h21f_116{
417
417
  text-transform:uppercase;
418
418
 
419
419
  font-weight:530;
420
420
 
421
421
  font-weight:var(--rs-font-weight-semi-bold, 530);
422
422
  }
423
- ._uppercase_1dgx41h_116._sizeS_1dgx41h_61{
423
+ ._uppercase_1m5h21f_116._sizeS_1m5h21f_61{
424
424
  padding-right:9px;
425
425
  padding-left:9px;
426
426
  }
427
427
 
428
- ._wrapper_17tnjix_10{
428
+ ._wrapper_1b3yzpj_10{
429
429
  position:relative;
430
430
  }
431
- ._tag_17tnjix_14{
431
+ ._tag_1b3yzpj_14{
432
432
  position:absolute;
433
433
  }
434
- ._alignTop_17tnjix_20._sizeXs_17tnjix_21{
434
+ ._alignTop_1b3yzpj_20._sizeXs_1b3yzpj_21{
435
435
  border-radius:4px 4px 0 0;
436
436
  }
437
- ._alignTop_17tnjix_20._sizeS_17tnjix_24{
437
+ ._alignTop_1b3yzpj_20._sizeS_1b3yzpj_24{
438
438
  border-radius:4px 4px 0 0;
439
439
  }
440
- ._alignTop_17tnjix_20._sizeM_17tnjix_27{
440
+ ._alignTop_1b3yzpj_20._sizeM_1b3yzpj_27{
441
441
  border-radius:6px 6px 0 0;
442
442
  }
443
- ._alignTop_17tnjix_20._sizeL_17tnjix_30{
443
+ ._alignTop_1b3yzpj_20._sizeL_1b3yzpj_30{
444
444
  border-radius:8px 8px 0 0;
445
445
  }
446
- ._alignMiddle_17tnjix_35._sizeXs_17tnjix_21{
446
+ ._alignMiddle_1b3yzpj_35._sizeXs_1b3yzpj_21{
447
447
  border-radius:4px;
448
448
  }
449
- ._alignMiddle_17tnjix_35._sizeS_17tnjix_24{
449
+ ._alignMiddle_1b3yzpj_35._sizeS_1b3yzpj_24{
450
450
  border-radius:4px;
451
451
  }
452
- ._alignMiddle_17tnjix_35._sizeM_17tnjix_27{
452
+ ._alignMiddle_1b3yzpj_35._sizeM_1b3yzpj_27{
453
453
  border-radius:6px;
454
454
  }
455
- ._alignMiddle_17tnjix_35._sizeL_17tnjix_30{
455
+ ._alignMiddle_1b3yzpj_35._sizeL_1b3yzpj_30{
456
456
  border-radius:8px;
457
457
  }
458
- ._top_17tnjix_52._start_17tnjix_52._offset16_17tnjix_53{
458
+ ._top_1b3yzpj_52._start_1b3yzpj_52._offset16_1b3yzpj_53{
459
459
  left:16px;
460
460
  }
461
- ._top_17tnjix_52._start_17tnjix_52._offset24_17tnjix_56{
461
+ ._top_1b3yzpj_52._start_1b3yzpj_52._offset24_1b3yzpj_56{
462
462
  left:24px;
463
463
  }
464
- ._top_17tnjix_52._start_17tnjix_52._offset32_17tnjix_59{
464
+ ._top_1b3yzpj_52._start_1b3yzpj_52._offset32_1b3yzpj_59{
465
465
  left:32px;
466
466
  }
467
- ._top_17tnjix_52._end_17tnjix_64._offset16_17tnjix_53{
467
+ ._top_1b3yzpj_52._end_1b3yzpj_64._offset16_1b3yzpj_53{
468
468
  right:16px;
469
469
  }
470
- ._top_17tnjix_52._end_17tnjix_64._offset24_17tnjix_56{
470
+ ._top_1b3yzpj_52._end_1b3yzpj_64._offset24_1b3yzpj_56{
471
471
  right:24px;
472
472
  }
473
- ._top_17tnjix_52._end_17tnjix_64._offset32_17tnjix_59{
473
+ ._top_1b3yzpj_52._end_1b3yzpj_64._offset32_1b3yzpj_59{
474
474
  right:32px;
475
475
  }
476
- ._top_17tnjix_52._alignTop_17tnjix_20{
476
+ ._top_1b3yzpj_52._alignTop_1b3yzpj_20{
477
477
  -webkit-transform:translate(0, -100%);
478
478
  transform:translate(0, -100%);
479
479
  }
480
- ._top_17tnjix_52._alignMiddle_17tnjix_35{
480
+ ._top_1b3yzpj_52._alignMiddle_1b3yzpj_35{
481
481
  -webkit-transform:translate(0, -50%);
482
482
  transform:translate(0, -50%);
483
483
  }
484
- ._left_17tnjix_86{
484
+ ._left_1b3yzpj_86{
485
485
  right:100%;
486
486
 
487
487
  -webkit-transform-origin:100% 0;
488
488
 
489
489
  transform-origin:100% 0;
490
490
  }
491
- ._left_17tnjix_86._start_17tnjix_52._offset16_17tnjix_53{
491
+ ._left_1b3yzpj_86._start_1b3yzpj_52._offset16_1b3yzpj_53{
492
492
  top:16px;
493
493
  }
494
- ._left_17tnjix_86._start_17tnjix_52._offset24_17tnjix_56{
494
+ ._left_1b3yzpj_86._start_1b3yzpj_52._offset24_1b3yzpj_56{
495
495
  top:24px;
496
496
  }
497
- ._left_17tnjix_86._start_17tnjix_52._offset32_17tnjix_59{
497
+ ._left_1b3yzpj_86._start_1b3yzpj_52._offset32_1b3yzpj_59{
498
498
  top:32px;
499
499
  }
500
- ._left_17tnjix_86._end_17tnjix_64._offset16_17tnjix_53{
500
+ ._left_1b3yzpj_86._end_1b3yzpj_64._offset16_1b3yzpj_53{
501
501
  top:calc(100% - 16px);
502
502
  }
503
- ._left_17tnjix_86._end_17tnjix_64._offset24_17tnjix_56{
503
+ ._left_1b3yzpj_86._end_1b3yzpj_64._offset24_1b3yzpj_56{
504
504
  top:calc(100% - 24px);
505
505
  }
506
- ._left_17tnjix_86._end_17tnjix_64._offset32_17tnjix_59{
506
+ ._left_1b3yzpj_86._end_1b3yzpj_64._offset32_1b3yzpj_59{
507
507
  top:calc(100% - 32px);
508
508
  }
509
- ._left_17tnjix_86._start_17tnjix_52._alignTop_17tnjix_20{
509
+ ._left_1b3yzpj_86._start_1b3yzpj_52._alignTop_1b3yzpj_20{
510
510
  -webkit-transform:rotate(270deg) translate(0, -100%);
511
511
  transform:rotate(270deg) translate(0, -100%);
512
512
  }
513
- ._left_17tnjix_86._end_17tnjix_64._alignTop_17tnjix_20{
513
+ ._left_1b3yzpj_86._end_1b3yzpj_64._alignTop_1b3yzpj_20{
514
514
  -webkit-transform:rotate(270deg) translate(100%, -100%);
515
515
  transform:rotate(270deg) translate(100%, -100%);
516
516
  }
517
- ._left_17tnjix_86._start_17tnjix_52._alignMiddle_17tnjix_35{
517
+ ._left_1b3yzpj_86._start_1b3yzpj_52._alignMiddle_1b3yzpj_35{
518
518
  -webkit-transform:rotate(270deg) translate(0, -50%);
519
519
  transform:rotate(270deg) translate(0, -50%);
520
520
  }
521
- ._left_17tnjix_86._end_17tnjix_64._alignMiddle_17tnjix_35{
521
+ ._left_1b3yzpj_86._end_1b3yzpj_64._alignMiddle_1b3yzpj_35{
522
522
  -webkit-transform:rotate(270deg) translate(100%, -50%);
523
523
  transform:rotate(270deg) translate(100%, -50%);
524
524
  }
525
525
 
526
- ._sizeXs_o9nqsp_9{
526
+ ._sizeXs_13uwson_9{
527
527
  border-radius:4px;
528
528
  }
529
- ._sizeS_o9nqsp_13{
529
+ ._sizeS_13uwson_13{
530
530
  border-radius:4px;
531
531
  }
532
- ._sizeM_o9nqsp_17{
532
+ ._sizeM_13uwson_17{
533
533
  border-radius:6px;
534
534
  }
535
- ._sizeL_o9nqsp_21{
535
+ ._sizeL_13uwson_21{
536
536
  border-radius:8px;
537
537
  }
package/lib/parts/base-tag.module.pcss.js CHANGED
@@ -1,13 +1,13 @@
1
1
  var styles = {
2
- "main": "_main_1dgx41h_25",
3
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1dgx41h_1",
4
- "alignIconLeft": "_alignIconLeft_1dgx41h_46",
5
- "alignIconRight": "_alignIconRight_1dgx41h_50",
6
- "sizeXs": "_sizeXs_1dgx41h_54",
7
- "sizeS": "_sizeS_1dgx41h_61",
8
- "sizeM": "_sizeM_1dgx41h_68",
9
- "sizeL": "_sizeL_1dgx41h_75",
10
- "icon": "_icon_1dgx41h_82",
11
- "uppercase": "_uppercase_1dgx41h_116"
2
+ "main": "_main_1m5h21f_25",
3
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1m5h21f_1",
4
+ "alignIconLeft": "_alignIconLeft_1m5h21f_46",
5
+ "alignIconRight": "_alignIconRight_1m5h21f_50",
6
+ "sizeXs": "_sizeXs_1m5h21f_54",
7
+ "sizeS": "_sizeS_1m5h21f_61",
8
+ "sizeM": "_sizeM_1m5h21f_68",
9
+ "sizeL": "_sizeL_1m5h21f_75",
10
+ "icon": "_icon_1m5h21f_82",
11
+ "uppercase": "_uppercase_1m5h21f_116"
12
12
  };
13
13
  export default styles;
package/lib/parts/presets.js CHANGED
@@ -1,4 +1,4 @@
1
- import { RS_COLOR_WHITE, RS_COLOR_PRIMARY_LIGHT_THEME, RS_COLOR_BLACK, RS_COLOR_BLACK_T10, RS_COLOR_PRIMARY_DARK_THEME, RS_COLOR_WHITE_T10 } from '@rescui/colors';
1
+ import { RS_COLOR_WHITE, RS_COLOR_PRIMARY_LIGHT_THEME, RS_COLOR_BLACK, RS_COLOR_BLACK_T70, RS_COLOR_BLACK_T10, RS_COLOR_PRIMARY_DARK_THEME, RS_COLOR_WHITE_T70, RS_COLOR_WHITE_T10 } from '@rescui/colors';
2
2
  var presets = {
3
3
  classicLight: {
4
4
  color: RS_COLOR_WHITE,
@@ -9,7 +9,7 @@ var presets = {
9
9
  backgroundColor: RS_COLOR_BLACK
10
10
  },
11
11
  filledLight: {
12
- color: RS_COLOR_BLACK,
12
+ color: RS_COLOR_BLACK_T70,
13
13
  backgroundColor: RS_COLOR_BLACK_T10
14
14
  },
15
15
  outlineLight: {
@@ -25,7 +25,7 @@ var presets = {
25
25
  backgroundColor: RS_COLOR_WHITE
26
26
  },
27
27
  filledDark: {
28
- color: RS_COLOR_WHITE,
28
+ color: RS_COLOR_WHITE_T70,
29
29
  backgroundColor: RS_COLOR_WHITE_T10
30
30
  },
31
31
  outlineDark: {
package/lib/parts/removable-tag.d.ts CHANGED
@@ -10,5 +10,7 @@ export declare type RemovableTagProps = {
10
10
  /** Additional left icon */
11
11
  icon?: React.ReactNode;
12
12
  onRemoveClick: () => void;
13
+ /** @ignore */
14
+ wrap?: boolean;
13
15
  };
14
16
  export declare const RemovableTag: React.ForwardRefExoticComponent<RemovableTagProps & React.RefAttributes<HTMLSpanElement>>;
package/lib/parts/removable-tag.js CHANGED
@@ -6,7 +6,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
6
6
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
7
7
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
8
8
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
9
- var _excluded = ["className", "disabled", "size", "theme", "children", "icon", "onRemoveClick"];
9
+ var _excluded = ["className", "disabled", "size", "theme", "children", "icon", "onRemoveClick", "wrap"];
10
10
 
11
11
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
12
12
 
@@ -43,22 +43,26 @@ var RemovableTag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
43
43
  icon = _ref.icon,
44
44
  _ref$onRemoveClick = _ref.onRemoveClick,
45
45
  onRemoveClick = _ref$onRemoveClick === void 0 ? function () {} : _ref$onRemoveClick,
46
+ _ref$wrap = _ref.wrap,
47
+ wrap = _ref$wrap === void 0 ? false : _ref$wrap,
46
48
  restProps = _objectWithoutProperties(_ref, _excluded);
47
49
 
48
50
  var theme = useTheme(themeFromProps);
49
- return /*#__PURE__*/React.createElement("span", {
50
- className: cn(styles.wrapper, SIZE_STYLES[size], THEME_STYLES[theme], disabled && styles.disabled, className),
51
- "data-test": 'removable-tag-wrapper',
51
+ return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
52
+ className: cn(styles.wrapper, SIZE_STYLES[size], THEME_STYLES[theme], disabled && styles.disabled, wrap && styles.wrap, className),
53
+ "data-test": 'removable-tag-wrapper'
54
+ }, restProps), {}, {
52
55
  ref: ref
53
- }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
56
+ }), /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
54
57
  className: cn(icon.props.className, styles.icon)
55
- }), /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, restProps), {}, {
58
+ }), /*#__PURE__*/React.createElement("span", {
56
59
  className: styles.main,
57
60
  "data-test": "removable-tag"
58
- }), children), /*#__PURE__*/React.createElement("button", {
61
+ }, children), /*#__PURE__*/React.createElement("button", {
59
62
  type: "button",
60
63
  "data-test": "removable-tag-remove-icon",
61
64
  className: styles.close,
65
+ tabIndex: disabled ? -1 : 0,
62
66
  onClick: function onClick(e) {
63
67
  e.stopPropagation();
64
68
  onRemoveClick();
package/lib/parts/removable-tag.module.pcss.js CHANGED
@@ -1,15 +1,16 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_vd286z_41",
3
- "sizeXs": "_sizeXs_vd286z_53",
4
- "sizeS": "_sizeS_vd286z_54",
5
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_vd286z_1",
6
- "sizeM": "_sizeM_vd286z_58",
7
- "sizeL": "_sizeL_vd286z_62",
8
- "themeLight": "_themeLight_vd286z_66",
9
- "disabled": "_disabled_vd286z_66",
10
- "themeDark": "_themeDark_vd286z_70",
11
- "main": "_main_vd286z_111",
12
- "close": "_close_vd286z_142",
13
- "icon": "_icon_vd286z_242"
2
+ "wrapper": "_wrapper_1cdlqwk_36",
3
+ "sizeXs": "_sizeXs_1cdlqwk_48",
4
+ "sizeS": "_sizeS_1cdlqwk_49",
5
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1cdlqwk_1",
6
+ "sizeM": "_sizeM_1cdlqwk_53",
7
+ "sizeL": "_sizeL_1cdlqwk_57",
8
+ "themeLight": "_themeLight_1cdlqwk_61",
9
+ "disabled": "_disabled_1cdlqwk_65",
10
+ "themeDark": "_themeDark_1cdlqwk_69",
11
+ "main": "_main_1cdlqwk_110",
12
+ "wrap": "_wrap_1cdlqwk_36",
13
+ "close": "_close_1cdlqwk_146",
14
+ "icon": "_icon_1cdlqwk_243"
14
15
  };
15
16
  export default styles;
package/lib/parts/sticky-tag.module.pcss.js CHANGED
@@ -1,18 +1,18 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_17tnjix_10",
3
- "tag": "_tag_17tnjix_14",
4
- "alignTop": "_alignTop_17tnjix_20",
5
- "sizeXs": "_sizeXs_17tnjix_21",
6
- "sizeS": "_sizeS_17tnjix_24",
7
- "sizeM": "_sizeM_17tnjix_27",
8
- "sizeL": "_sizeL_17tnjix_30",
9
- "alignMiddle": "_alignMiddle_17tnjix_35",
10
- "top": "_top_17tnjix_52",
11
- "start": "_start_17tnjix_52",
12
- "offset16": "_offset16_17tnjix_53",
13
- "offset24": "_offset24_17tnjix_56",
14
- "offset32": "_offset32_17tnjix_59",
15
- "end": "_end_17tnjix_64",
16
- "left": "_left_17tnjix_86"
2
+ "wrapper": "_wrapper_1b3yzpj_10",
3
+ "tag": "_tag_1b3yzpj_14",
4
+ "alignTop": "_alignTop_1b3yzpj_20",
5
+ "sizeXs": "_sizeXs_1b3yzpj_21",
6
+ "sizeS": "_sizeS_1b3yzpj_24",
7
+ "sizeM": "_sizeM_1b3yzpj_27",
8
+ "sizeL": "_sizeL_1b3yzpj_30",
9
+ "alignMiddle": "_alignMiddle_1b3yzpj_35",
10
+ "top": "_top_1b3yzpj_52",
11
+ "start": "_start_1b3yzpj_52",
12
+ "offset16": "_offset16_1b3yzpj_53",
13
+ "offset24": "_offset24_1b3yzpj_56",
14
+ "offset32": "_offset32_1b3yzpj_59",
15
+ "end": "_end_1b3yzpj_64",
16
+ "left": "_left_1b3yzpj_86"
17
17
  };
18
18
  export default styles;
package/lib/parts/tag.module.pcss.js CHANGED
@@ -1,7 +1,7 @@
1
1
  var styles = {
2
- "sizeXs": "_sizeXs_o9nqsp_9",
3
- "sizeS": "_sizeS_o9nqsp_13",
4
- "sizeM": "_sizeM_o9nqsp_17",
5
- "sizeL": "_sizeL_o9nqsp_21"
2
+ "sizeXs": "_sizeXs_13uwson_9",
3
+ "sizeS": "_sizeS_13uwson_13",
4
+ "sizeM": "_sizeM_13uwson_17",
5
+ "sizeL": "_sizeL_13uwson_21"
6
6
  };
7
7
  export default styles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tag",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -15,8 +15,8 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
- "@rescui/colors": "^0.0.6",
19
- "@rescui/icons": "^0.5.1",
18
+ "@rescui/colors": "^0.1.0",
19
+ "@rescui/icons": "^0.6.1",
20
20
  "classnames": "^2.3.1",
21
21
  "core-js": "^3.9.1"
22
22
  },
@@ -27,10 +27,10 @@
27
27
  },
28
28
  "devDependencies": {
29
29
  "@rescui/scripts": "^0.1.4",
30
- "@rescui/typography": "^0.5.0"
30
+ "@rescui/typography": "^0.7.0"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "rescui-scripts build"
34
34
  },
35
- "gitHead": "0303dab2dea78cc6ba3a4970148de62fca11a225"
35
+ "gitHead": "90715a8ea8c558b23c243bc092be4ded23e4192c"
36
36
  }