@rescui/tag 0.2.0 → 0.3.2

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 +120 -107
  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 +4 -4
package/lib/index.css CHANGED
@@ -1,16 +1,20 @@
1
- ._wrapper_5eap17_41{
1
+ ._wrapper_1v5zbp8_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_5eap17_41 > *{
13
+ ._wrapper_1v5zbp8_36 > *{
10
14
  vertical-align:top;
11
15
  }
12
- ._sizeXs_5eap17_53,
13
- ._sizeS_5eap17_54{
16
+ ._sizeXs_1v5zbp8_48,
17
+ ._sizeS_1v5zbp8_49{
14
18
  letter-spacing:0.0045em;
15
19
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
16
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,10 +23,10 @@
19
23
  line-height:20px;
20
24
  line-height:var(--rs-text-3-line-height, 20px);
21
25
  }
22
- ._rs-reset-letter-spacing_5eap17_1 ._sizeXs_5eap17_53,._rs-reset-letter-spacing_5eap17_1 ._sizeS_5eap17_54{
26
+ ._rs-reset-letter-spacing_1v5zbp8_1 ._sizeXs_1v5zbp8_48,._rs-reset-letter-spacing_1v5zbp8_1 ._sizeS_1v5zbp8_49{
23
27
  letter-spacing:normal;
24
28
  }
25
- ._sizeM_5eap17_58{
29
+ ._sizeM_1v5zbp8_53{
26
30
  letter-spacing:0.0015em;
27
31
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
28
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));
@@ -32,10 +36,10 @@
32
36
  line-height:24px;
33
37
  line-height:var(--rs-text-2-line-height, 24px);
34
38
  }
35
- ._rs-reset-letter-spacing_5eap17_1 ._sizeM_5eap17_58{
39
+ ._rs-reset-letter-spacing_1v5zbp8_1 ._sizeM_1v5zbp8_53{
36
40
  letter-spacing:normal;
37
41
  }
38
- ._sizeL_5eap17_62{
42
+ ._sizeL_1v5zbp8_57{
39
43
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
40
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));
41
45
  font-size:19px;
@@ -44,55 +48,58 @@
44
48
  line-height:28px;
45
49
  line-height:var(--rs-text-1-line-height, 28px);
46
50
  }
47
- ._themeLight_5eap17_66{
51
+ ._themeLight_1v5zbp8_61{
48
52
  color:rgba(25,25,28,0.7);
49
53
  color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
50
54
  }
51
- ._themeLight_5eap17_66._disabled_5eap17_70{
55
+ ._themeLight_1v5zbp8_61._disabled_1v5zbp8_65{
52
56
  color:rgba(25,25,28,0.5);
53
57
  color:var(--rs-typography-color-pale, rgba(25,25,28,0.5));
54
58
  }
55
- ._themeDark_5eap17_74{
59
+ ._themeDark_1v5zbp8_69{
56
60
  color:rgba(255,255,255,0.7);
57
61
  color:var(--rs-typography-color-average, rgba(255,255,255,0.7));
58
62
  }
59
- ._themeDark_5eap17_74._disabled_5eap17_70{
63
+ ._themeDark_1v5zbp8_69._disabled_1v5zbp8_65{
60
64
  color:rgba(255,255,255,0.5);
61
65
  color:var(--rs-typography-color-pale, rgba(255,255,255,0.5));
62
66
  }
63
- ._disabled_5eap17_70{
67
+ ._disabled_1v5zbp8_65{
64
68
  pointer-events:none;
65
69
  }
66
- ._sizeXs_5eap17_53{
70
+ ._sizeXs_1v5zbp8_48{
67
71
  padding-left:8px;
68
72
 
69
73
  border-radius:4px;
70
74
  }
71
- ._sizeS_5eap17_54{
75
+ ._sizeS_1v5zbp8_49{
72
76
  padding-left:8px;
73
77
 
74
78
  border-radius:4px;
75
79
  }
76
- ._sizeM_5eap17_58{
80
+ ._sizeM_1v5zbp8_53{
77
81
  padding-left:12px;
78
82
 
79
83
  border-radius:6px;
80
84
  }
81
- ._sizeL_5eap17_62{
85
+ ._sizeL_1v5zbp8_57{
82
86
  padding-left:16px;
83
87
 
84
88
  border-radius:8px;
85
89
  }
86
- ._themeLight_5eap17_66{
90
+ ._themeLight_1v5zbp8_61{
87
91
  background-color:rgba(25,25,28,0.1);
88
92
  }
89
- ._themeDark_5eap17_74{
93
+ ._themeDark_1v5zbp8_69{
90
94
  background-color:rgba(255,255,255,0.1);
91
95
  }
92
- ._main_5eap17_115{
96
+ ._main_1v5zbp8_110{
93
97
  display:-webkit-inline-box;
94
98
  display:-ms-inline-flexbox;
95
99
  display:inline-flex;
100
+ -webkit-box-flex:1;
101
+ -ms-flex:1 1 auto;
102
+ flex:1 1 auto;
96
103
  -webkit-box-pack:center;
97
104
  -ms-flex-pack:center;
98
105
  justify-content:center;
@@ -104,27 +111,30 @@
104
111
 
105
112
  background:transparent;
106
113
  }
107
- ._sizeXs_5eap17_53 ._main_5eap17_115{
114
+ ._wrap_1v5zbp8_36 ._main_1v5zbp8_110{
115
+ white-space:normal;
116
+ }
117
+ ._sizeXs_1v5zbp8_48 ._main_1v5zbp8_110{
108
118
  padding-top:2px;
109
119
  padding-right:2px;
110
120
  padding-bottom:2px;
111
121
  }
112
- ._sizeS_5eap17_54 ._main_5eap17_115{
122
+ ._sizeS_1v5zbp8_49 ._main_1v5zbp8_110{
113
123
  padding-top:4px;
114
124
  padding-right:2px;
115
125
  padding-bottom:4px;
116
126
  }
117
- ._sizeM_5eap17_58 ._main_5eap17_115{
127
+ ._sizeM_1v5zbp8_53 ._main_1v5zbp8_110{
118
128
  padding-top:6px;
119
129
  padding-right:2px;
120
130
  padding-bottom:6px;
121
131
  }
122
- ._sizeL_5eap17_62 ._main_5eap17_115{
132
+ ._sizeL_1v5zbp8_57 ._main_1v5zbp8_110{
123
133
  padding-top:8px;
124
134
  padding-right:4px;
125
135
  padding-bottom:8px;
126
136
  }
127
- ._close_5eap17_146{
137
+ ._close_1v5zbp8_146{
128
138
  top:0;
129
139
  right:0;
130
140
  bottom:0;
@@ -135,6 +145,9 @@
135
145
 
136
146
  display:inline-flex;
137
147
  overflow:visible;
148
+ -webkit-box-flex:1;
149
+ -ms-flex:1 0 auto;
150
+ flex:1 0 auto;
138
151
  -webkit-box-pack:center;
139
152
  -ms-flex-pack:center;
140
153
  justify-content:center;
@@ -157,105 +170,105 @@
157
170
  -webkit-font-smoothing:inherit;
158
171
  -moz-osx-font-smoothing:inherit;
159
172
  }
160
- ._close_5eap17_146::-moz-focus-inner{
173
+ ._close_1v5zbp8_146::-moz-focus-inner{
161
174
  padding:0;
162
175
 
163
176
  border:0;
164
177
  }
165
- ._close_5eap17_146:active,
166
- ._close_5eap17_146:hover,
167
- ._close_5eap17_146:focus{
178
+ ._close_1v5zbp8_146:active,
179
+ ._close_1v5zbp8_146:hover,
180
+ ._close_1v5zbp8_146:focus{
168
181
  outline:none;
169
182
 
170
183
  text-decoration:none;
171
184
  }
172
- ._sizeXs_5eap17_53 ._close_5eap17_146{
185
+ ._sizeXs_1v5zbp8_48 ._close_1v5zbp8_146{
173
186
  width:28px;
174
- height:24px;
175
187
 
176
188
  border-radius:4px;
177
189
  }
178
- ._sizeS_5eap17_54 ._close_5eap17_146{
190
+ ._sizeS_1v5zbp8_49 ._close_1v5zbp8_146{
179
191
  width:28px;
180
- height:28px;
181
192
 
182
193
  border-radius:4px;
183
194
  }
184
- ._sizeM_5eap17_58 ._close_5eap17_146{
195
+ ._sizeM_1v5zbp8_53 ._close_1v5zbp8_146{
185
196
  width:36px;
186
- height:36px;
187
197
 
188
198
  border-radius:6px;
189
199
  }
190
- ._sizeL_5eap17_62 ._close_5eap17_146{
200
+ ._sizeL_1v5zbp8_57 ._close_1v5zbp8_146{
191
201
  width:44px;
192
- height:44px;
193
202
 
194
203
  border-radius:8px;
195
204
  }
196
- ._disabled_5eap17_70 ._close_5eap17_146{
205
+ ._disabled_1v5zbp8_65 ._close_1v5zbp8_146{
197
206
  pointer-events:none;
198
207
  }
199
- ._themeLight_5eap17_66 ._close_5eap17_146:hover{
208
+ ._themeLight_1v5zbp8_61 ._close_1v5zbp8_146:hover{
200
209
  color:#19191C;
201
210
  background-color:rgba(25,25,28,0.1);
202
211
  }
203
- ._themeDark_5eap17_74 ._close_5eap17_146:hover{
212
+ ._themeDark_1v5zbp8_69 ._close_1v5zbp8_146:hover{
204
213
  color:#FFFFFF;
205
214
  background-color:rgba(255,255,255,0.1);
206
215
  }
207
- ._themeLight_5eap17_66 ._close_5eap17_146:active{
216
+ ._themeLight_1v5zbp8_61 ._close_1v5zbp8_146:active{
208
217
  color:#19191C;
209
218
  background-color:rgba(25,25,28,0.2);
210
219
  }
211
- ._themeDark_5eap17_74 ._close_5eap17_146:active{
220
+ ._themeDark_1v5zbp8_69 ._close_1v5zbp8_146:active{
212
221
  color:#FFFFFF;
213
222
  background-color:rgba(255,255,255,0.2);
214
223
  }
215
- ._themeLight_5eap17_66 ._close_5eap17_146:focus[data-focus-method='key']{
224
+ ._themeLight_1v5zbp8_61 ._close_1v5zbp8_146:focus[data-focus-method='key']{
216
225
  -webkit-box-shadow:inset 0 0 0 4px #8979ff;
217
226
  -webkit-box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-light-theme, #8979ff);
218
227
  box-shadow:inset 0 0 0 4px #8979ff;
219
228
  box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-light-theme, #8979ff);
220
229
  }
221
- ._themeDark_5eap17_74 ._close_5eap17_146:focus[data-focus-method='key']{
230
+ ._themeDark_1v5zbp8_69 ._close_1v5zbp8_146:focus[data-focus-method='key']{
222
231
  -webkit-box-shadow:inset 0 0 0 4px #6f61d2;
223
232
  -webkit-box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-dark-theme, #6f61d2);
224
233
  box-shadow:inset 0 0 0 4px #6f61d2;
225
234
  box-shadow:inset 0 0 0 4px var(--rs-color-primary-dim-dark-theme, #6f61d2);
226
235
  }
227
- ._icon_5eap17_246{
236
+ ._icon_1v5zbp8_243{
237
+ -webkit-box-flex:1;
238
+ -ms-flex:1 0 auto;
239
+ flex:1 0 auto;
240
+
228
241
  margin-right:8px;
229
242
 
230
243
  vertical-align:top;
231
244
  fill:currentColor;
232
245
  }
233
- ._sizeXs_5eap17_53 ._icon_5eap17_246{
246
+ ._sizeXs_1v5zbp8_48 ._icon_1v5zbp8_243{
234
247
  width:20px;
235
248
  height:20px;
236
249
  margin-top:2px;
237
250
  margin-bottom:2px;
238
251
  }
239
- ._sizeS_5eap17_54 ._icon_5eap17_246{
252
+ ._sizeS_1v5zbp8_49 ._icon_1v5zbp8_243{
240
253
  width:20px;
241
254
  height:20px;
242
255
  margin-top:4px;
243
256
  margin-bottom:4px;
244
257
  }
245
- ._sizeM_5eap17_58 ._icon_5eap17_246{
258
+ ._sizeM_1v5zbp8_53 ._icon_1v5zbp8_243{
246
259
  width:24px;
247
260
  height:24px;
248
261
  margin-top:6px;
249
262
  margin-bottom:6px;
250
263
  }
251
- ._sizeL_5eap17_62 ._icon_5eap17_246{
264
+ ._sizeL_1v5zbp8_57 ._icon_1v5zbp8_243{
252
265
  width:28px;
253
266
  height:28px;
254
267
  margin-top:8px;
255
268
  margin-bottom:8px;
256
269
  }
257
270
 
258
- ._main_cxywu_25{
271
+ ._main_b47bx7_25{
259
272
  letter-spacing:0.0015em;
260
273
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
261
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));
@@ -265,10 +278,10 @@
265
278
  line-height:24px;
266
279
  line-height:var(--rs-text-2-line-height, 24px);
267
280
  }
268
- ._rs-reset-letter-spacing_cxywu_1 ._main_cxywu_25{
281
+ ._rs-reset-letter-spacing_b47bx7_1 ._main_b47bx7_25{
269
282
  letter-spacing:normal;
270
283
  }
271
- ._main_cxywu_25 {
284
+ ._main_b47bx7_25 {
272
285
 
273
286
  position:relative;
274
287
 
@@ -297,19 +310,19 @@
297
310
 
298
311
  background:transparent;
299
312
  }
300
- ._alignIconLeft_cxywu_46{
313
+ ._alignIconLeft_b47bx7_46{
301
314
  -webkit-box-orient:horizontal;
302
315
  -webkit-box-direction:normal;
303
316
  -ms-flex-direction:row;
304
317
  flex-direction:row;
305
318
  }
306
- ._alignIconRight_cxywu_50{
319
+ ._alignIconRight_b47bx7_50{
307
320
  -webkit-box-orient:horizontal;
308
321
  -webkit-box-direction:reverse;
309
322
  -ms-flex-direction:row-reverse;
310
323
  flex-direction:row-reverse;
311
324
  }
312
- ._sizeXs_cxywu_54{
325
+ ._sizeXs_b47bx7_54{
313
326
  letter-spacing:0.0045em;
314
327
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
315
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));
@@ -318,15 +331,15 @@
318
331
  line-height:20px;
319
332
  line-height:var(--rs-text-3-line-height, 20px);
320
333
  }
321
- ._rs-reset-letter-spacing_cxywu_1 ._sizeXs_cxywu_54{
334
+ ._rs-reset-letter-spacing_b47bx7_1 ._sizeXs_b47bx7_54{
322
335
  letter-spacing:normal;
323
336
  }
324
- ._sizeXs_cxywu_54 {
337
+ ._sizeXs_b47bx7_54 {
325
338
 
326
339
  padding:1px
327
340
  7px;
328
341
  }
329
- ._sizeS_cxywu_61{
342
+ ._sizeS_b47bx7_61{
330
343
  letter-spacing:0.0045em;
331
344
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
332
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));
@@ -335,15 +348,15 @@
335
348
  line-height:20px;
336
349
  line-height:var(--rs-text-3-line-height, 20px);
337
350
  }
338
- ._rs-reset-letter-spacing_cxywu_1 ._sizeS_cxywu_61{
351
+ ._rs-reset-letter-spacing_b47bx7_1 ._sizeS_b47bx7_61{
339
352
  letter-spacing:normal;
340
353
  }
341
- ._sizeS_cxywu_61 {
354
+ ._sizeS_b47bx7_61 {
342
355
 
343
356
  padding:3px
344
357
  7px;
345
358
  }
346
- ._sizeM_cxywu_68{
359
+ ._sizeM_b47bx7_68{
347
360
  letter-spacing:0.0015em;
348
361
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
349
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));
@@ -353,15 +366,15 @@
353
366
  line-height:24px;
354
367
  line-height:var(--rs-text-2-line-height, 24px);
355
368
  }
356
- ._rs-reset-letter-spacing_cxywu_1 ._sizeM_cxywu_68{
369
+ ._rs-reset-letter-spacing_b47bx7_1 ._sizeM_b47bx7_68{
357
370
  letter-spacing:normal;
358
371
  }
359
- ._sizeM_cxywu_68 {
372
+ ._sizeM_b47bx7_68 {
360
373
 
361
374
  padding:5px
362
375
  11px;
363
376
  }
364
- ._sizeL_cxywu_75{
377
+ ._sizeL_b47bx7_75{
365
378
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
366
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));
367
380
  font-size:19px;
@@ -373,152 +386,152 @@
373
386
  padding:7px
374
387
  15px;
375
388
  }
376
- ._icon_cxywu_82{
389
+ ._icon_b47bx7_82{
377
390
  fill:currentColor;
378
391
  }
379
- ._sizeXs_cxywu_54 ._icon_cxywu_82{
392
+ ._sizeXs_b47bx7_54 ._icon_b47bx7_82{
380
393
  width:20px;
381
394
  height:20px;
382
395
  }
383
- ._sizeS_cxywu_61 ._icon_cxywu_82{
396
+ ._sizeS_b47bx7_61 ._icon_b47bx7_82{
384
397
  width:20px;
385
398
  height:20px;
386
399
  }
387
- ._sizeM_cxywu_68 ._icon_cxywu_82{
400
+ ._sizeM_b47bx7_68 ._icon_b47bx7_82{
388
401
  width:24px;
389
402
  height:24px;
390
403
  }
391
- ._sizeL_cxywu_75 ._icon_cxywu_82{
404
+ ._sizeL_b47bx7_75 ._icon_b47bx7_82{
392
405
  width:28px;
393
406
  height:28px;
394
407
  }
395
- ._alignIconLeft_cxywu_46 ._icon_cxywu_82{
408
+ ._alignIconLeft_b47bx7_46 ._icon_b47bx7_82{
396
409
  margin-right:8px;
397
410
  margin-left:0;
398
411
  }
399
- ._alignIconRight_cxywu_50 ._icon_cxywu_82{
412
+ ._alignIconRight_b47bx7_50 ._icon_b47bx7_82{
400
413
  margin-right:0;
401
414
  margin-left:8px;
402
415
  }
403
- ._uppercase_cxywu_116{
416
+ ._uppercase_b47bx7_116{
404
417
  text-transform:uppercase;
405
418
 
406
419
  font-weight:530;
407
420
 
408
421
  font-weight:var(--rs-font-weight-semi-bold, 530);
409
422
  }
410
- ._uppercase_cxywu_116._sizeS_cxywu_61{
423
+ ._uppercase_b47bx7_116._sizeS_b47bx7_61{
411
424
  padding-right:9px;
412
425
  padding-left:9px;
413
426
  }
414
427
 
415
- ._wrapper_1ad73sa_10{
428
+ ._wrapper_1z0esb3_10{
416
429
  position:relative;
417
430
  }
418
- ._tag_1ad73sa_14{
431
+ ._tag_1z0esb3_14{
419
432
  position:absolute;
420
433
  }
421
- ._alignTop_1ad73sa_20._sizeXs_1ad73sa_21{
434
+ ._alignTop_1z0esb3_20._sizeXs_1z0esb3_21{
422
435
  border-radius:4px 4px 0 0;
423
436
  }
424
- ._alignTop_1ad73sa_20._sizeS_1ad73sa_24{
437
+ ._alignTop_1z0esb3_20._sizeS_1z0esb3_24{
425
438
  border-radius:4px 4px 0 0;
426
439
  }
427
- ._alignTop_1ad73sa_20._sizeM_1ad73sa_27{
440
+ ._alignTop_1z0esb3_20._sizeM_1z0esb3_27{
428
441
  border-radius:6px 6px 0 0;
429
442
  }
430
- ._alignTop_1ad73sa_20._sizeL_1ad73sa_30{
443
+ ._alignTop_1z0esb3_20._sizeL_1z0esb3_30{
431
444
  border-radius:8px 8px 0 0;
432
445
  }
433
- ._alignMiddle_1ad73sa_35._sizeXs_1ad73sa_21{
446
+ ._alignMiddle_1z0esb3_35._sizeXs_1z0esb3_21{
434
447
  border-radius:4px;
435
448
  }
436
- ._alignMiddle_1ad73sa_35._sizeS_1ad73sa_24{
449
+ ._alignMiddle_1z0esb3_35._sizeS_1z0esb3_24{
437
450
  border-radius:4px;
438
451
  }
439
- ._alignMiddle_1ad73sa_35._sizeM_1ad73sa_27{
452
+ ._alignMiddle_1z0esb3_35._sizeM_1z0esb3_27{
440
453
  border-radius:6px;
441
454
  }
442
- ._alignMiddle_1ad73sa_35._sizeL_1ad73sa_30{
455
+ ._alignMiddle_1z0esb3_35._sizeL_1z0esb3_30{
443
456
  border-radius:8px;
444
457
  }
445
- ._top_1ad73sa_52._start_1ad73sa_52._offset16_1ad73sa_53{
458
+ ._top_1z0esb3_52._start_1z0esb3_52._offset16_1z0esb3_53{
446
459
  left:16px;
447
460
  }
448
- ._top_1ad73sa_52._start_1ad73sa_52._offset24_1ad73sa_56{
461
+ ._top_1z0esb3_52._start_1z0esb3_52._offset24_1z0esb3_56{
449
462
  left:24px;
450
463
  }
451
- ._top_1ad73sa_52._start_1ad73sa_52._offset32_1ad73sa_59{
464
+ ._top_1z0esb3_52._start_1z0esb3_52._offset32_1z0esb3_59{
452
465
  left:32px;
453
466
  }
454
- ._top_1ad73sa_52._end_1ad73sa_64._offset16_1ad73sa_53{
467
+ ._top_1z0esb3_52._end_1z0esb3_64._offset16_1z0esb3_53{
455
468
  right:16px;
456
469
  }
457
- ._top_1ad73sa_52._end_1ad73sa_64._offset24_1ad73sa_56{
470
+ ._top_1z0esb3_52._end_1z0esb3_64._offset24_1z0esb3_56{
458
471
  right:24px;
459
472
  }
460
- ._top_1ad73sa_52._end_1ad73sa_64._offset32_1ad73sa_59{
473
+ ._top_1z0esb3_52._end_1z0esb3_64._offset32_1z0esb3_59{
461
474
  right:32px;
462
475
  }
463
- ._top_1ad73sa_52._alignTop_1ad73sa_20{
476
+ ._top_1z0esb3_52._alignTop_1z0esb3_20{
464
477
  -webkit-transform:translate(0, -100%);
465
478
  transform:translate(0, -100%);
466
479
  }
467
- ._top_1ad73sa_52._alignMiddle_1ad73sa_35{
480
+ ._top_1z0esb3_52._alignMiddle_1z0esb3_35{
468
481
  -webkit-transform:translate(0, -50%);
469
482
  transform:translate(0, -50%);
470
483
  }
471
- ._left_1ad73sa_86{
484
+ ._left_1z0esb3_86{
472
485
  right:100%;
473
486
 
474
487
  -webkit-transform-origin:100% 0;
475
488
 
476
489
  transform-origin:100% 0;
477
490
  }
478
- ._left_1ad73sa_86._start_1ad73sa_52._offset16_1ad73sa_53{
491
+ ._left_1z0esb3_86._start_1z0esb3_52._offset16_1z0esb3_53{
479
492
  top:16px;
480
493
  }
481
- ._left_1ad73sa_86._start_1ad73sa_52._offset24_1ad73sa_56{
494
+ ._left_1z0esb3_86._start_1z0esb3_52._offset24_1z0esb3_56{
482
495
  top:24px;
483
496
  }
484
- ._left_1ad73sa_86._start_1ad73sa_52._offset32_1ad73sa_59{
497
+ ._left_1z0esb3_86._start_1z0esb3_52._offset32_1z0esb3_59{
485
498
  top:32px;
486
499
  }
487
- ._left_1ad73sa_86._end_1ad73sa_64._offset16_1ad73sa_53{
500
+ ._left_1z0esb3_86._end_1z0esb3_64._offset16_1z0esb3_53{
488
501
  top:calc(100% - 16px);
489
502
  }
490
- ._left_1ad73sa_86._end_1ad73sa_64._offset24_1ad73sa_56{
503
+ ._left_1z0esb3_86._end_1z0esb3_64._offset24_1z0esb3_56{
491
504
  top:calc(100% - 24px);
492
505
  }
493
- ._left_1ad73sa_86._end_1ad73sa_64._offset32_1ad73sa_59{
506
+ ._left_1z0esb3_86._end_1z0esb3_64._offset32_1z0esb3_59{
494
507
  top:calc(100% - 32px);
495
508
  }
496
- ._left_1ad73sa_86._start_1ad73sa_52._alignTop_1ad73sa_20{
509
+ ._left_1z0esb3_86._start_1z0esb3_52._alignTop_1z0esb3_20{
497
510
  -webkit-transform:rotate(270deg) translate(0, -100%);
498
511
  transform:rotate(270deg) translate(0, -100%);
499
512
  }
500
- ._left_1ad73sa_86._end_1ad73sa_64._alignTop_1ad73sa_20{
513
+ ._left_1z0esb3_86._end_1z0esb3_64._alignTop_1z0esb3_20{
501
514
  -webkit-transform:rotate(270deg) translate(100%, -100%);
502
515
  transform:rotate(270deg) translate(100%, -100%);
503
516
  }
504
- ._left_1ad73sa_86._start_1ad73sa_52._alignMiddle_1ad73sa_35{
517
+ ._left_1z0esb3_86._start_1z0esb3_52._alignMiddle_1z0esb3_35{
505
518
  -webkit-transform:rotate(270deg) translate(0, -50%);
506
519
  transform:rotate(270deg) translate(0, -50%);
507
520
  }
508
- ._left_1ad73sa_86._end_1ad73sa_64._alignMiddle_1ad73sa_35{
521
+ ._left_1z0esb3_86._end_1z0esb3_64._alignMiddle_1z0esb3_35{
509
522
  -webkit-transform:rotate(270deg) translate(100%, -50%);
510
523
  transform:rotate(270deg) translate(100%, -50%);
511
524
  }
512
525
 
513
- ._sizeXs_ahbmu2_9{
526
+ ._sizeXs_zu13gf_9{
514
527
  border-radius:4px;
515
528
  }
516
- ._sizeS_ahbmu2_13{
529
+ ._sizeS_zu13gf_13{
517
530
  border-radius:4px;
518
531
  }
519
- ._sizeM_ahbmu2_17{
532
+ ._sizeM_zu13gf_17{
520
533
  border-radius:6px;
521
534
  }
522
- ._sizeL_ahbmu2_21{
535
+ ._sizeL_zu13gf_21{
523
536
  border-radius:8px;
524
537
  }
package/lib/parts/base-tag.module.pcss.js CHANGED
@@ -1,13 +1,13 @@
1
1
  var styles = {
2
- "main": "_main_cxywu_25",
3
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_cxywu_1",
4
- "alignIconLeft": "_alignIconLeft_cxywu_46",
5
- "alignIconRight": "_alignIconRight_cxywu_50",
6
- "sizeXs": "_sizeXs_cxywu_54",
7
- "sizeS": "_sizeS_cxywu_61",
8
- "sizeM": "_sizeM_cxywu_68",
9
- "sizeL": "_sizeL_cxywu_75",
10
- "icon": "_icon_cxywu_82",
11
- "uppercase": "_uppercase_cxywu_116"
2
+ "main": "_main_b47bx7_25",
3
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_b47bx7_1",
4
+ "alignIconLeft": "_alignIconLeft_b47bx7_46",
5
+ "alignIconRight": "_alignIconRight_b47bx7_50",
6
+ "sizeXs": "_sizeXs_b47bx7_54",
7
+ "sizeS": "_sizeS_b47bx7_61",
8
+ "sizeM": "_sizeM_b47bx7_68",
9
+ "sizeL": "_sizeL_b47bx7_75",
10
+ "icon": "_icon_b47bx7_82",
11
+ "uppercase": "_uppercase_b47bx7_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_5eap17_41",
3
- "sizeXs": "_sizeXs_5eap17_53",
4
- "sizeS": "_sizeS_5eap17_54",
5
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_5eap17_1",
6
- "sizeM": "_sizeM_5eap17_58",
7
- "sizeL": "_sizeL_5eap17_62",
8
- "themeLight": "_themeLight_5eap17_66",
9
- "disabled": "_disabled_5eap17_70",
10
- "themeDark": "_themeDark_5eap17_74",
11
- "main": "_main_5eap17_115",
12
- "close": "_close_5eap17_146",
13
- "icon": "_icon_5eap17_246"
2
+ "wrapper": "_wrapper_1v5zbp8_36",
3
+ "sizeXs": "_sizeXs_1v5zbp8_48",
4
+ "sizeS": "_sizeS_1v5zbp8_49",
5
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1v5zbp8_1",
6
+ "sizeM": "_sizeM_1v5zbp8_53",
7
+ "sizeL": "_sizeL_1v5zbp8_57",
8
+ "themeLight": "_themeLight_1v5zbp8_61",
9
+ "disabled": "_disabled_1v5zbp8_65",
10
+ "themeDark": "_themeDark_1v5zbp8_69",
11
+ "main": "_main_1v5zbp8_110",
12
+ "wrap": "_wrap_1v5zbp8_36",
13
+ "close": "_close_1v5zbp8_146",
14
+ "icon": "_icon_1v5zbp8_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_1ad73sa_10",
3
- "tag": "_tag_1ad73sa_14",
4
- "alignTop": "_alignTop_1ad73sa_20",
5
- "sizeXs": "_sizeXs_1ad73sa_21",
6
- "sizeS": "_sizeS_1ad73sa_24",
7
- "sizeM": "_sizeM_1ad73sa_27",
8
- "sizeL": "_sizeL_1ad73sa_30",
9
- "alignMiddle": "_alignMiddle_1ad73sa_35",
10
- "top": "_top_1ad73sa_52",
11
- "start": "_start_1ad73sa_52",
12
- "offset16": "_offset16_1ad73sa_53",
13
- "offset24": "_offset24_1ad73sa_56",
14
- "offset32": "_offset32_1ad73sa_59",
15
- "end": "_end_1ad73sa_64",
16
- "left": "_left_1ad73sa_86"
2
+ "wrapper": "_wrapper_1z0esb3_10",
3
+ "tag": "_tag_1z0esb3_14",
4
+ "alignTop": "_alignTop_1z0esb3_20",
5
+ "sizeXs": "_sizeXs_1z0esb3_21",
6
+ "sizeS": "_sizeS_1z0esb3_24",
7
+ "sizeM": "_sizeM_1z0esb3_27",
8
+ "sizeL": "_sizeL_1z0esb3_30",
9
+ "alignMiddle": "_alignMiddle_1z0esb3_35",
10
+ "top": "_top_1z0esb3_52",
11
+ "start": "_start_1z0esb3_52",
12
+ "offset16": "_offset16_1z0esb3_53",
13
+ "offset24": "_offset24_1z0esb3_56",
14
+ "offset32": "_offset32_1z0esb3_59",
15
+ "end": "_end_1z0esb3_64",
16
+ "left": "_left_1z0esb3_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_ahbmu2_9",
3
- "sizeS": "_sizeS_ahbmu2_13",
4
- "sizeM": "_sizeM_ahbmu2_17",
5
- "sizeL": "_sizeL_ahbmu2_21"
2
+ "sizeXs": "_sizeXs_zu13gf_9",
3
+ "sizeS": "_sizeS_zu13gf_13",
4
+ "sizeM": "_sizeM_zu13gf_17",
5
+ "sizeL": "_sizeL_zu13gf_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.2.0",
3
+ "version": "0.3.2",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,7 +16,7 @@
16
16
  "dependencies": {
17
17
  "@babel/runtime-corejs3": "^7.14.0",
18
18
  "@rescui/colors": "^0.1.0",
19
- "@rescui/icons": "^0.6.0",
19
+ "@rescui/icons": "^0.7.0",
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.6.0"
30
+ "@rescui/typography": "^0.7.0"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "rescui-scripts build"
34
34
  },
35
- "gitHead": "91cb43cee6ffc54aae5360a73437d97c3f4ed36d"
35
+ "gitHead": "b9d865165f162732befa0868ea1325d064313d9e"
36
36
  }