@charcoal-ui/react 4.0.0-beta.13 → 4.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/layered.css +1214 -0
  2. package/dist/layered.css.map +1 -0
  3. package/package.json +11 -7
package/dist/layered.css ADDED
@@ -0,0 +1,1214 @@
1
+ @layer charcoal {/* src/components/Button/index.css */
2
+ .charcoal-button {
3
+ -webkit-appearance: none;
4
+ -moz-appearance: none;
5
+ appearance: none;
6
+ background: transparent;
7
+ box-sizing: border-box;
8
+ padding: 0 24px;
9
+ border-style: none;
10
+ outline: none;
11
+ text-rendering: inherit;
12
+ letter-spacing: inherit;
13
+ word-spacing: inherit;
14
+ text-decoration: none;
15
+ font: inherit;
16
+ margin: 0;
17
+ overflow: visible;
18
+ text-transform: none;
19
+ width: -moz-min-content;
20
+ width: min-content;
21
+ display: inline-grid;
22
+ align-items: center;
23
+ justify-content: center;
24
+ cursor: pointer;
25
+ -webkit-user-select: none;
26
+ -moz-user-select: none;
27
+ user-select: none;
28
+ white-space: nowrap;
29
+ border-radius: 999999px;
30
+ font-size: 14px;
31
+ line-height: 22px;
32
+ font-weight: bold;
33
+ color: var(--charcoal-text2);
34
+ background-color: var(--charcoal-surface3);
35
+ transition:
36
+ 0.2s color,
37
+ 0.2s background-color,
38
+ 0.2s box-shadow;
39
+ height: 40px;
40
+ }
41
+ .charcoal-button:disabled {
42
+ cursor: default;
43
+ opacity: 0.32;
44
+ }
45
+ .charcoal-button:not(:disabled):focus-visible {
46
+ outline: none;
47
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
48
+ }
49
+ .charcoal-button:not(:disabled):hover {
50
+ color: var(--charcoal-text2-hover);
51
+ background-color: var(--charcoal-surface3-hover);
52
+ }
53
+ .charcoal-button:not(:disabled):active,
54
+ .charcoal-button[data-active=true] {
55
+ color: var(--charcoal-text2-press);
56
+ background-color: var(--charcoal-surface3-press);
57
+ }
58
+ .charcoal-button[data-variant=Primary] {
59
+ color: var(--charcoal-text5);
60
+ background-color: var(--charcoal-brand);
61
+ }
62
+ .charcoal-button[data-variant=Primary]:hover:not(:disabled) {
63
+ color: var(--charcoal-text5-hover);
64
+ background-color: var(--charcoal-brand-hover);
65
+ }
66
+ .charcoal-button[data-variant=Primary]:active:not(:disabled),
67
+ .charcoal-button[data-variant=Primary][data-active=true] {
68
+ color: var(--charcoal-text5-press);
69
+ background-color: var(--charcoal-brand-press);
70
+ }
71
+ .charcoal-button[data-variant=Overlay] {
72
+ color: var(--charcoal-text5);
73
+ background-color: var(--charcoal-surface4);
74
+ }
75
+ .charcoal-button[data-variant=Overlay]:hover:not(:disabled) {
76
+ color: var(--charcoal-text5-hover);
77
+ background-color: var(--charcoal-surface4-hover);
78
+ }
79
+ .charcoal-button[data-variant=Overlay]:active:not(:disabled),
80
+ .charcoal-button[data-variant=Overlay][data-active=true] {
81
+ color: var(--charcoal-text5-press);
82
+ background-color: var(--charcoal-surface4-press);
83
+ }
84
+ .charcoal-button[data-variant=Navigation] {
85
+ color: var(--charcoal-text5);
86
+ background-color: var(--charcoal-surface6);
87
+ }
88
+ .charcoal-button[data-variant=Navigation]:hover:not(:disabled) {
89
+ color: var(--charcoal-text5-hover);
90
+ background-color: var(--charcoal-surface6-hover);
91
+ }
92
+ .charcoal-button[data-variant=Navigation]:active:not(:disabled),
93
+ .charcoal-button[data-variant=Navigation][data-active=true] {
94
+ color: var(--charcoal-text5-press);
95
+ background-color: var(--charcoal-surface6-press);
96
+ }
97
+ .charcoal-button[data-variant=Danger] {
98
+ color: var(--charcoal-text5);
99
+ background-color: var(--charcoal-assertive);
100
+ }
101
+ .charcoal-button[data-variant=Danger]:hover:not(:disabled) {
102
+ color: var(--charcoal-text5-hover);
103
+ background-color: var(--charcoal-assertive-hover);
104
+ }
105
+ .charcoal-button[data-variant=Danger]:active:not(:disabled),
106
+ .charcoal-button[data-variant=Danger][data-active=true] {
107
+ color: var(--charcoal-text5-press);
108
+ background-color: var(--charcoal-assertive-press);
109
+ }
110
+ .charcoal-button[data-size=S] {
111
+ padding: 0 16px;
112
+ height: 32px;
113
+ }
114
+ .charcoal-button[data-full-width=true] {
115
+ width: 100%;
116
+ }
117
+
118
+ /* src/components/Clickable/index.css */
119
+ .charcoal-clickable {
120
+ cursor: pointer;
121
+ -webkit-appearance: none;
122
+ -moz-appearance: none;
123
+ appearance: none;
124
+ background: transparent;
125
+ padding: 0;
126
+ border-style: none;
127
+ outline: none;
128
+ color: inherit;
129
+ text-rendering: inherit;
130
+ letter-spacing: inherit;
131
+ word-spacing: inherit;
132
+ text-decoration: none;
133
+ font: inherit;
134
+ margin: 0;
135
+ overflow: visible;
136
+ text-transform: none;
137
+ }
138
+ .charcoal-clickable:disabled,
139
+ .charcoal-clickable[aria-disabled]:not([aria-disabled="false"]) {
140
+ cursor: default;
141
+ }
142
+ .charcoal-clickable:focus {
143
+ outline: none;
144
+ }
145
+ .charcoal-clickable::-moz-focus-inner {
146
+ border-style: none;
147
+ padding: 0;
148
+ }
149
+
150
+ /* src/components/IconButton/index.css */
151
+ .charcoal-icon-button {
152
+ cursor: pointer;
153
+ -webkit-appearance: none;
154
+ -moz-appearance: none;
155
+ appearance: none;
156
+ background: transparent;
157
+ padding: 0;
158
+ border-style: none;
159
+ outline: none;
160
+ color: inherit;
161
+ text-rendering: inherit;
162
+ letter-spacing: inherit;
163
+ word-spacing: inherit;
164
+ text-decoration: none;
165
+ font: inherit;
166
+ margin: 0;
167
+ overflow: visible;
168
+ text-transform: none;
169
+ -webkit-user-select: none;
170
+ -moz-user-select: none;
171
+ user-select: none;
172
+ display: flex;
173
+ align-items: center;
174
+ justify-content: center;
175
+ border-radius: 999999px;
176
+ transition: 0.2s background-color, 0.2s box-shadow;
177
+ }
178
+ .charcoal-icon-button:disabled,
179
+ .charcoal-icon-button[aria-disabled]:not([aria-disabled="false"]) {
180
+ cursor: default;
181
+ opacity: 0.32;
182
+ }
183
+ .charcoal-icon-button:focus {
184
+ outline: none;
185
+ }
186
+ .charcoal-icon-button::-moz-focus-inner {
187
+ border-style: none;
188
+ padding: 0;
189
+ }
190
+ .charcoal-icon-button[data-size=XS] {
191
+ width: 20px;
192
+ height: 20px;
193
+ }
194
+ .charcoal-icon-button[data-size=S] {
195
+ width: 32px;
196
+ height: 32px;
197
+ }
198
+ .charcoal-icon-button[data-size=M] {
199
+ width: 40px;
200
+ height: 40px;
201
+ }
202
+ .charcoal-icon-button[data-variant=Default] {
203
+ color: var(--charcoal-text3);
204
+ background-color: var(--charcoal-transparent);
205
+ }
206
+ .charcoal-icon-button[data-variant=Default][data-active=true]:not(:disabled):not([aria-disabled]),
207
+ .charcoal-icon-button[data-variant=Default][data-active=true][aria-disabled=false] {
208
+ color: var(--charcoal-text3-press);
209
+ background-color: var(--charcoal-transparent-press);
210
+ }
211
+ .charcoal-icon-button[data-variant=Default][data-active=false]:not(:disabled):not([aria-disabled]):hover,
212
+ .charcoal-icon-button[data-variant=Default][data-active=false][aria-disabled=false]:hover {
213
+ color: var(--charcoal-text3-hover);
214
+ background-color: var(--charcoal-transparent-hover);
215
+ }
216
+ .charcoal-icon-button[data-variant=Default][data-active=false]:not(:disabled):not([aria-disabled]):active,
217
+ .charcoal-icon-button[data-variant=Default][data-active=false][aria-disabled=false]:active {
218
+ color: var(--charcoal-text3-press);
219
+ background-color: var(--charcoal-transparent-press);
220
+ }
221
+ .charcoal-icon-button[data-variant=Overlay] {
222
+ color: var(--charcoal-text5);
223
+ background-color: var(--charcoal-surface4);
224
+ }
225
+ .charcoal-icon-button[data-variant=Overlay][data-active=true]:not(:disabled):not([aria-disabled]),
226
+ .charcoal-icon-button[data-variant=Overlay][data-active=true][aria-disabled=false] {
227
+ color: var(--charcoal-text5-press);
228
+ background-color: var(--charcoal-surface4-press);
229
+ }
230
+ .charcoal-icon-button[data-variant=Overlay][data-active=false]:not(:disabled):not([aria-disabled]):hover,
231
+ .charcoal-icon-button[data-variant=Overlay][data-active=false][aria-disabled=false]:hover {
232
+ color: var(--charcoal-text5-hover);
233
+ background-color: var(--charcoal-surface4-hover);
234
+ }
235
+ .charcoal-icon-button[data-variant=Overlay][data-active=false]:not(:disabled):not([aria-disabled]):active,
236
+ .charcoal-icon-button[data-variant=Overlay][data-active=false][aria-disabled=false]:active {
237
+ color: var(--charcoal-text5-press);
238
+ background-color: var(--charcoal-surface4-press);
239
+ }
240
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,
241
+ .charcoal-icon-button[aria-disabled=false]:focus {
242
+ outline: none;
243
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
244
+ }
245
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,
246
+ .charcoal-icon-button[aria-disabled=false]:focus-visible {
247
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
248
+ }
249
+ .charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
250
+ .charcoal-icon-button[aria-disabled=false]:focus:not(:focus-visible) {
251
+ box-shadow: none;
252
+ }
253
+
254
+ /* src/components/Radio/index.css */
255
+ .charcoal-radio__label {
256
+ display: grid;
257
+ grid-template-columns: auto 1fr;
258
+ grid-gap: 4px;
259
+ align-items: center;
260
+ cursor: pointer;
261
+ }
262
+ .charcoal-radio__label[aria-disabled]:not([aria-disabled="false"]) {
263
+ opacity: 0.32;
264
+ cursor: default;
265
+ }
266
+ .charcoal-radio__label_div {
267
+ font-size: 14px;
268
+ line-height: 22px;
269
+ color: var(--charcoal-text2);
270
+ }
271
+
272
+ /* src/components/Radio/RadioInput/index.css */
273
+ .charcoal-radio-input {
274
+ -webkit-appearance: none;
275
+ -moz-appearance: none;
276
+ appearance: none;
277
+ display: block;
278
+ box-sizing: border-box;
279
+ margin: 0;
280
+ padding: 6px;
281
+ width: 20px;
282
+ height: 20px;
283
+ cursor: pointer;
284
+ border-radius: 999999px;
285
+ background-color: var(--charcoal-surface1);
286
+ transition: 0.2s background-color, 0.2s box-shadow;
287
+ }
288
+ .charcoal-radio-input:checked {
289
+ background-color: var(--charcoal-brand);
290
+ }
291
+ .charcoal-radio-input:checked::after {
292
+ content: "";
293
+ display: block;
294
+ width: 8px;
295
+ height: 8px;
296
+ pointer-events: none;
297
+ background-color: var(--charcoal-text5);
298
+ border-radius: 999999px;
299
+ transition: 0.2s background-color, 0.2s box-shadow;
300
+ }
301
+ .charcoal-radio-input:not(:checked) {
302
+ border-width: 2px;
303
+ border-style: solid;
304
+ border-color: var(--charcoal-text3);
305
+ }
306
+ .charcoal-radio-input:disabled {
307
+ cursor: default;
308
+ }
309
+ .charcoal-radio-input:not(:disabled):hover {
310
+ background-color: var(--charcoal-surface1-hover);
311
+ }
312
+ .charcoal-radio-input:not(:disabled):active {
313
+ background-color: var(--charcoal-surface1-press);
314
+ }
315
+ .charcoal-radio-input:not(:disabled):focus {
316
+ outline: none;
317
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
318
+ }
319
+ .charcoal-radio-input:not(:disabled):focus-visible {
320
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
321
+ }
322
+ .charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {
323
+ box-shadow: none;
324
+ }
325
+ .charcoal-radio-input:not(:disabled)[aria-invalid=true],
326
+ .charcoal-radio-input:not(:disabled)[aria-invalid=true]:focus {
327
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
328
+ }
329
+ .charcoal-radio-input:checked:not(:disabled):hover {
330
+ background-color: var(--charcoal-brand-hover);
331
+ }
332
+ .charcoal-radio-input:checked:not(:disabled):hover::after {
333
+ background-color: var(--charcoal-text5-hover);
334
+ }
335
+ .charcoal-radio-input:checked:not(:disabled):active {
336
+ background-color: var(--charcoal-brand-press);
337
+ }
338
+ .charcoal-radio-input:checked:not(:disabled):active::after {
339
+ background-color: var(--charcoal-text5-press);
340
+ }
341
+
342
+ /* src/components/Radio/RadioGroup/index.css */
343
+ .charcoal-radio-group {
344
+ display: grid;
345
+ grid-template-columns: 1fr;
346
+ grid-gap: 8px;
347
+ }
348
+
349
+ /* src/components/Switch/index.css */
350
+ .charcoal-switch__label {
351
+ display: inline-grid;
352
+ grid-template-columns: auto 1fr;
353
+ align-items: center;
354
+ cursor: pointer;
355
+ outline: 0;
356
+ gap: 4px;
357
+ }
358
+ .charcoal-switch__label[aria-disabled=true] {
359
+ opacity: 0.32;
360
+ cursor: default;
361
+ }
362
+ .charcoal-switch__label[aria-disabled=true] > input {
363
+ opacity: 1;
364
+ }
365
+ .charcoal-switch__label_div {
366
+ font-size: 14px;
367
+ line-height: 22px;
368
+ color: var(--charcoal-text2);
369
+ }
370
+
371
+ /* src/components/Switch/SwitchInput/index.css */
372
+ .charcoal-switch-input {
373
+ cursor: pointer;
374
+ -webkit-appearance: none;
375
+ -moz-appearance: none;
376
+ appearance: none;
377
+ display: inline-flex;
378
+ position: relative;
379
+ box-sizing: border-box;
380
+ width: 28px;
381
+ border: 2px solid transparent;
382
+ transition-property: background-color, box-shadow;
383
+ transition-duration: 0.2s;
384
+ outline: none;
385
+ border-radius: 16px;
386
+ height: 16px;
387
+ margin: 0;
388
+ background-color: var(--charcoal-text4);
389
+ }
390
+ .charcoal-switch-input:disabled,
391
+ .charcoal-switch-input[readonly] {
392
+ opacity: 0.32;
393
+ cursor: default;
394
+ }
395
+ .charcoal-switch-input::after {
396
+ content: "";
397
+ position: absolute;
398
+ display: block;
399
+ top: 0;
400
+ left: 0;
401
+ width: 12px;
402
+ height: 12px;
403
+ transform: translateX(0);
404
+ transition: transform 0.2s;
405
+ border-radius: 1024px;
406
+ background-color: var(--charcoal-text5);
407
+ }
408
+ .charcoal-switch-input:checked::after {
409
+ transform: translateX(12px);
410
+ transition: transform 0.2s;
411
+ }
412
+ .charcoal-switch-input:checked {
413
+ background-color: var(--charcoal-brand);
414
+ }
415
+ .charcoal-switch-input:not(:disabled):hover {
416
+ background-color: var(--charcoal-text4-hover);
417
+ }
418
+ .charcoal-switch-input:not(:disabled):active {
419
+ background-color: var(--charcoal-text4-press);
420
+ }
421
+ .charcoal-switch-input:not(:disabled):focus {
422
+ outline: none;
423
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
424
+ }
425
+ .charcoal-switch-input:not(:disabled):focus-visible {
426
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
427
+ }
428
+ .charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {
429
+ box-shadow: none;
430
+ }
431
+ .charcoal-switch-input:not(:disabled)::after:hover {
432
+ background-color: var(--charcoal-text5-hover);
433
+ }
434
+ .charcoal-switch-input:not(:disabled)::after:active {
435
+ background-color: var(--charcoal-text5-press);
436
+ }
437
+ .charcoal-switch-input:not(:disabled):checked:hover {
438
+ background-color: var(--charcoal-brand-hover);
439
+ }
440
+ .charcoal-switch-input:not(:disabled):checked:active {
441
+ background-color: var(--charcoal-brand-press);
442
+ }
443
+
444
+ /* src/components/TextField/index.css */
445
+ .charcoal-text-field-root {
446
+ display: grid;
447
+ grid-template-columns: 1fr;
448
+ grid-gap: 4px;
449
+ }
450
+ .charcoal-text-field-root[aria-disabled=true] {
451
+ opacity: 0.32;
452
+ }
453
+ .charcoal-text-field-container {
454
+ display: flex;
455
+ height: 40px;
456
+ transition: 0.2s background-color, 0.2s box-shadow;
457
+ color: var(--charcoal-text2);
458
+ background-color: var(--charcoal-surface3);
459
+ border-radius: 4px;
460
+ padding: 0 8px;
461
+ line-height: 22px;
462
+ font-size: 14px;
463
+ }
464
+ .charcoal-text-field-container[data-invalid=true] {
465
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
466
+ }
467
+ .charcoal-text-field-container:not([aria-disabled="true"]):hover {
468
+ background-color: var(--charcoal-surface3-hover);
469
+ }
470
+ .charcoal-text-field-container:not([aria-disabled="true"]):focus-within {
471
+ outline: none;
472
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
473
+ }
474
+ .charcoal-text-field-container:not([aria-disabled="true"])[data-invalid=true]:focus-within {
475
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
476
+ }
477
+ .charcoal-text-field-prefix {
478
+ display: flex;
479
+ align-items: center;
480
+ margin-right: 4px;
481
+ }
482
+ .charcoal-text-field-suffix {
483
+ display: flex;
484
+ align-items: center;
485
+ gap: 8px;
486
+ margin-left: 4px;
487
+ }
488
+ .charcoal-text-field-input {
489
+ border: none;
490
+ box-sizing: border-box;
491
+ outline: none;
492
+ font-family: inherit;
493
+ transform-origin: top left;
494
+ transform: scale(0.875);
495
+ width: calc(100% / 0.875);
496
+ height: calc(100% / 0.875);
497
+ font-size: calc(14px / 0.875);
498
+ line-height: calc(22px / 0.875);
499
+ padding-left: 0;
500
+ padding-right: 0;
501
+ border-radius: calc(4px / 0.875);
502
+ -webkit-appearance: none;
503
+ -moz-appearance: none;
504
+ appearance: none;
505
+ background: transparent;
506
+ color: var(--charcoal-text2);
507
+ }
508
+ .charcoal-text-field-input::-moz-placeholder {
509
+ color: var(--charcoal-text3);
510
+ }
511
+ .charcoal-text-field-input::placeholder {
512
+ color: var(--charcoal-text3);
513
+ }
514
+ .charcoal-text-field-line-counter {
515
+ line-height: 22px;
516
+ font-size: 14px;
517
+ color: var(--charcoal-text3);
518
+ }
519
+
520
+ /* src/components/FieldLabel/index.css */
521
+ .charcoal-field-label {
522
+ font-size: 14px;
523
+ line-height: 22px;
524
+ font-weight: bold;
525
+ display: flow-root;
526
+ color: var(--charcoal-text1);
527
+ }
528
+ .charcoal-field-label-required-text {
529
+ font-size: 14px;
530
+ line-height: 22px;
531
+ display: flow-root;
532
+ color: var(--charcoal-text2);
533
+ }
534
+ .charcoal-field-label-sub-label {
535
+ font-size: 14px;
536
+ line-height: 22px;
537
+ display: flow-root;
538
+ color: var(--charcoal-text3);
539
+ transition: 0.2s color, 0.2s box-shadow;
540
+ }
541
+ .charcoal-field-label-root {
542
+ display: inline-flex;
543
+ align-items: center;
544
+ }
545
+ .charcoal-field-label-root > .charcoal-field-label-required-text {
546
+ margin-left: 4px;
547
+ }
548
+ .charcoal-field-label-root > .charcoal-field-label-sub-label {
549
+ margin-left: auto;
550
+ }
551
+
552
+ /* src/components/TextField/AssistiveText/index.css */
553
+ .charcoal-text-field-assistive-text {
554
+ font-size: 14px;
555
+ line-height: 22px;
556
+ margin: 0;
557
+ color: var(--charcoal-text2);
558
+ }
559
+ .charcoal-text-field-assistive-text[data-invalid=true] {
560
+ color: var(--charcoal-assertive);
561
+ }
562
+
563
+ /* src/components/TextArea/index.css */
564
+ .charcoal-text-area-root {
565
+ display: grid;
566
+ grid-template-columns: 1fr;
567
+ grid-gap: 4px;
568
+ }
569
+ .charcoal-text-area-root[aria-disabled=true] {
570
+ opacity: 0.32;
571
+ }
572
+ .charcoal-text-area-container {
573
+ position: relative;
574
+ overflow: hidden;
575
+ color: var(--charcoal-text2);
576
+ background-color: var(--charcoal-surface3);
577
+ border-radius: 4px;
578
+ transition: 0.2s background-color, 0.2s box-shadow;
579
+ height: calc(22px * var(--charcoal-text-area-rows) + 18px);
580
+ }
581
+ .charcoal-text-area-container[aria-invalid=true] {
582
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
583
+ }
584
+ .charcoal-text-area-container:focus-within {
585
+ outline: none;
586
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
587
+ }
588
+ .charcoal-text-area-container:not(aria-disabled="true"):hover {
589
+ background-color: var(--charcoal-surface3-hover);
590
+ }
591
+ .charcoal-text-area-container[aria-invalid=true]:focus-within {
592
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
593
+ }
594
+ .charcoal-text-area-textarea {
595
+ border: none;
596
+ outline: none;
597
+ resize: none;
598
+ font-family: inherit;
599
+ color: inherit;
600
+ box-sizing: border-box;
601
+ transform-origin: top left;
602
+ transform: scale(0.875);
603
+ width: calc(100% / 0.875);
604
+ font-size: calc(14px / 0.875);
605
+ line-height: calc(22px / 0.875);
606
+ padding: calc(9px / 0.875) calc(8px / 0.875);
607
+ height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
608
+ -webkit-appearance: none;
609
+ -moz-appearance: none;
610
+ appearance: none;
611
+ background: none;
612
+ }
613
+ .charcoal-text-area-textarea[data-no-bottom-padding=true] {
614
+ padding: calc(9px / 0.875) calc(8px / 0.875) 0;
615
+ height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
616
+ }
617
+ .charcoal-text-area-textarea::-moz-placeholder {
618
+ color: var(--charcoal-text3);
619
+ }
620
+ .charcoal-text-area-textarea::placeholder {
621
+ color: var(--charcoal-text3);
622
+ }
623
+ .charcoal-text-area-counter {
624
+ position: absolute;
625
+ bottom: 9px;
626
+ right: 8px;
627
+ line-height: 22px;
628
+ font-size: 14px;
629
+ color: var(--charcoal-text3);
630
+ }
631
+
632
+ /* src/components/Modal/Dialog/index.css */
633
+ .charcoal-modal-dialog {
634
+ margin: auto;
635
+ position: relative;
636
+ height: -moz-fit-content;
637
+ height: fit-content;
638
+ width: 440px;
639
+ background-color: var(--charcoal-surface1);
640
+ border-radius: 24px;
641
+ }
642
+ .charcoal-modal-dialog[data-size=S] {
643
+ width: 336px;
644
+ }
645
+ .charcoal-modal-dialog[data-size=M] {
646
+ width: 440px;
647
+ }
648
+ .charcoal-modal-dialog[data-size=L] {
649
+ width: 648px;
650
+ }
651
+ @media (max-width: 743px) {
652
+ .charcoal-modal-dialog {
653
+ max-width: 440px;
654
+ width: calc(100% - 48px);
655
+ }
656
+ .charcoal-modal-dialog[data-bottom-sheet=true],
657
+ .charcoal-modal-dialog[data-bottom-sheet=full] {
658
+ max-width: unset;
659
+ width: 100%;
660
+ border-radius: 0;
661
+ margin: auto 0 0 0;
662
+ }
663
+ .charcoal-modal-dialog[data-bottom-sheet=full] {
664
+ min-height: 100%;
665
+ }
666
+ }
667
+ .charcoal-modal-dialog:focus {
668
+ outline: none;
669
+ }
670
+
671
+ /* src/components/Modal/index.css */
672
+ .charcoal-modal-background {
673
+ overflow: auto;
674
+ display: flex;
675
+ position: fixed;
676
+ top: 0;
677
+ left: 0;
678
+ width: 100%;
679
+ height: 100%;
680
+ justify-content: center;
681
+ padding: 40px 0;
682
+ box-sizing: border-box;
683
+ background-color: var(--charcoal-surface4);
684
+ }
685
+ @media (max-width: 743px) {
686
+ .charcoal-modal-background[data-bottom-sheet=true],
687
+ .charcoal-modal-background[data-bottom-sheet=full] {
688
+ padding: 0;
689
+ }
690
+ }
691
+ .charcoal-modal-close-button {
692
+ position: absolute;
693
+ top: 8px;
694
+ right: 8px;
695
+ color: var(--charcoal-text3);
696
+ transition: 0.2s color;
697
+ }
698
+ .charcoal-modal-title {
699
+ margin: 0;
700
+ font-weight: inherit;
701
+ font-size: inherit;
702
+ }
703
+
704
+ /* src/components/Modal/ModalPlumbing.css */
705
+ .charcoal-modal-header-root {
706
+ height: 64px;
707
+ display: grid;
708
+ align-content: center;
709
+ justify-content: center;
710
+ }
711
+ @media (max-width: 743px) {
712
+ .charcoal-modal-header-root[data-bottom-sheet=true],
713
+ .charcoal-modal-header-root[data-bottom-sheet=full] {
714
+ height: 48px;
715
+ }
716
+ }
717
+ .charcoal-modal-header-title {
718
+ color: var(--charcoal-text1);
719
+ font-size: 16px;
720
+ line-height: 24px;
721
+ font-weight: bold;
722
+ display: flow-root;
723
+ }
724
+ .charcoal-modal-align {
725
+ padding-left: 16px;
726
+ padding-right: 16px;
727
+ }
728
+ .charcoal-modal-body {
729
+ padding-bottom: 40px;
730
+ }
731
+ .charcoal-modal-buttons {
732
+ display: grid;
733
+ grid-auto-flow: row;
734
+ grid-row-gap: 8px;
735
+ padding-top: 16px;
736
+ padding-left: 16px;
737
+ padding-right: 16px;
738
+ }
739
+
740
+ /* src/components/LoadingSpinner/index.css */
741
+ .charcoal-loading-spinner {
742
+ box-sizing: content-box;
743
+ margin: auto;
744
+ padding: var(--charcoal-loading-spinner-padding);
745
+ border-radius: 8px;
746
+ font-size: var(--charcoal-loading-spinner-size);
747
+ width: var(--charcoal-loading-spinner-size);
748
+ height: var(--charcoal-loading-spinner-size);
749
+ opacity: 0.84;
750
+ color: var(--charcoal-text4);
751
+ background-color: var(--charcoal-background1);
752
+ }
753
+ .charcoal-loading-spinner[data-transparent=true] {
754
+ background-color: var(--charcoal-transparent);
755
+ }
756
+ @keyframes charcoal-loading-spinner-icon-scale-out {
757
+ from {
758
+ transform: scale(0);
759
+ opacity: 1;
760
+ }
761
+ to {
762
+ transform: scale(1);
763
+ opacity: 0;
764
+ }
765
+ }
766
+ .charcoal-loading-spinner-icon {
767
+ width: 1em;
768
+ height: 1em;
769
+ border-radius: 1em;
770
+ background-color: currentColor;
771
+ animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
772
+ animation-iteration-count: infinite;
773
+ }
774
+ .charcoal-loading-spinner-icon[data-reset-animation] {
775
+ animation: none;
776
+ }
777
+ .charcoal-loading-spinner-icon[data-once=true] {
778
+ animation-iteration-count: 1;
779
+ }
780
+
781
+ /* src/components/DropdownSelector/index.css */
782
+ .charcoal-dropdown-selector-root {
783
+ display: grid;
784
+ grid-template-columns: 1fr;
785
+ grid-gap: 4px;
786
+ width: 100%;
787
+ }
788
+ .charcoal-dropdown-selector-root[aria-disabled=true] {
789
+ cursor: default;
790
+ opacity: 0.32;
791
+ }
792
+ .charcoal-dropdown-selector-button {
793
+ display: grid;
794
+ grid-template-columns: 1fr auto;
795
+ justify-content: space-between;
796
+ align-items: center;
797
+ height: 40px;
798
+ width: 100%;
799
+ box-sizing: border-box;
800
+ border: none;
801
+ cursor: pointer;
802
+ gap: 4px;
803
+ padding-right: 8px;
804
+ padding-left: 8px;
805
+ background-color: var(--charcoal-surface3);
806
+ border-radius: 4px;
807
+ transition: 0.2s box-shadow, 0.2s background-color;
808
+ }
809
+ .charcoal-dropdown-selector-button:disabled {
810
+ cursor: default;
811
+ }
812
+ .charcoal-dropdown-selector-button:not(:disabled):focus {
813
+ outline: none;
814
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
815
+ }
816
+ .charcoal-dropdown-selector-button:not(:disabled):focus-visible {
817
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
818
+ }
819
+ .charcoal-dropdown-selector-button:not(:disabled)[data-active=true],
820
+ .charcoal-dropdown-selector-button:not(:disabled):active {
821
+ background-color: var(--charcoal-surface3-press);
822
+ }
823
+ .charcoal-dropdown-selector-button:not(:disabled):hover {
824
+ background-color: var(--charcoal-surface3-hover);
825
+ }
826
+ .charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
827
+ box-shadow: none;
828
+ }
829
+ .charcoal-dropdown-selector-button[aria-invalid=true],
830
+ .charcoal-dropdown-selector-button:not(:disabled)[aria-invalid=true]:focus:not(:focus-visible) {
831
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
832
+ }
833
+ .charcoal-ui-dropdown-selector-text {
834
+ text-align: left;
835
+ font-size: 14px;
836
+ line-height: 22px;
837
+ display: flow-root;
838
+ color: var(--charcoal-text2);
839
+ overflow: hidden;
840
+ text-overflow: ellipsis;
841
+ white-space: nowrap;
842
+ }
843
+ .charcoal-ui-dropdown-selector-text[data-placeholder=true] {
844
+ color: var(--charcoal-text3);
845
+ }
846
+ .charcoal-ui-dropdown-selector-icon {
847
+ color: var(--charcoal-text2);
848
+ }
849
+
850
+ /* src/components/DropdownSelector/Popover/index.css */
851
+ .charcoal-popover {
852
+ margin: 4px 0;
853
+ list-style: none;
854
+ overflow: auto;
855
+ max-height: inherit;
856
+ background-color: var(--charcoal-background1);
857
+ border: solid 1px var(--charcoal-border-default);
858
+ border-radius: 8px;
859
+ padding-top: 8px;
860
+ padding-bottom: 8px;
861
+ }
862
+
863
+ /* src/components/DropdownSelector/MenuList/index.css */
864
+ .charcoal-menu-list {
865
+ padding: 0;
866
+ margin: 0;
867
+ }
868
+
869
+ /* src/components/DropdownSelector/DropdownMenuItem/index.css */
870
+ .charcoal-dropdown-selector-menu-item {
871
+ font-size: 14px;
872
+ line-height: 22px;
873
+ color: var(--charcoal-text2);
874
+ padding: 9px 0;
875
+ display: flex;
876
+ align-items: center;
877
+ width: 100%;
878
+ margin-left: 20px;
879
+ }
880
+ .charcoal-dropdown-selector-menu-item[data-selected=true] {
881
+ margin-left: 0px;
882
+ }
883
+ .charcoal-dropdown-selector-menu-item-icon {
884
+ color: var(--charcoal-text2);
885
+ padding-right: 4px;
886
+ }
887
+
888
+ /* src/components/DropdownSelector/ListItem/index.css */
889
+ .charcoal-list-item {
890
+ list-style: none;
891
+ display: flex;
892
+ align-items: center;
893
+ min-height: 40px;
894
+ cursor: pointer;
895
+ outline: none;
896
+ padding-right: 16px;
897
+ padding-left: 16px;
898
+ transition: background-color 0.2s;
899
+ }
900
+ .charcoal-list-item:not([aria-disabled="true"]):hover,
901
+ .charcoal-list-item:not([aria-disabled="true"]):focus,
902
+ .charcoal-list-item:not([aria-disabled="true"]):focus-within {
903
+ background-color: var(--charcoal-surface3);
904
+ }
905
+ .charcoal-list-item[aria-disabled=true] {
906
+ opacity: 0.32;
907
+ cursor: default;
908
+ }
909
+
910
+ /* src/components/DropdownSelector/MenuItemGroup/index.css */
911
+ .charcoal-menu-item-group {
912
+ display: block;
913
+ }
914
+ .charcoal-menu-item-group > span {
915
+ display: block;
916
+ color: var(--charcoal-text3);
917
+ font-size: 12px;
918
+ font-weight: bold;
919
+ padding: 12px 0 8px 16px;
920
+ }
921
+ .charcoal-menu-item-group > ul {
922
+ padding-left: 0;
923
+ margin: 0;
924
+ box-sizing: border-box;
925
+ list-style: none;
926
+ overflow: hidden;
927
+ }
928
+
929
+ /* src/components/SegmentedControl/index.css */
930
+ .charcoal-segmented-control {
931
+ display: inline-flex;
932
+ align-items: center;
933
+ background-color: var(--charcoal-surface3);
934
+ border-radius: 16px;
935
+ }
936
+ .charcoal-segmented-control-radio__label {
937
+ position: relative;
938
+ display: flex;
939
+ align-items: center;
940
+ cursor: pointer;
941
+ height: 32px;
942
+ padding-right: 16px;
943
+ padding-left: 16px;
944
+ border-radius: 16px;
945
+ color: var(--charcoal-text2);
946
+ font-size: 14px;
947
+ line-height: 22px;
948
+ }
949
+ .charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled="false"]) {
950
+ cursor: default;
951
+ opacity: 0.32;
952
+ }
953
+ .charcoal-segmented-control-radio__label[data-checked=true] {
954
+ background-color: var(--charcoal-brand);
955
+ color: var(--charcoal-text5);
956
+ }
957
+ .charcoal-segmented-control-radio__input {
958
+ position: absolute;
959
+ height: 0px;
960
+ width: 0px;
961
+ padding: 0;
962
+ margin: 0;
963
+ -webkit-appearance: none;
964
+ -moz-appearance: none;
965
+ appearance: none;
966
+ box-sizing: border-box;
967
+ overflow: hidden;
968
+ white-space: nowrap;
969
+ opacity: 0;
970
+ }
971
+
972
+ /* src/components/Checkbox/index.css */
973
+ .charcoal-checkbox__label {
974
+ position: relative;
975
+ cursor: pointer;
976
+ display: flex;
977
+ gap: 4px;
978
+ }
979
+ .charcoal-checkbox__label[aria-disabled=true] {
980
+ cursor: default;
981
+ opacity: 0.32;
982
+ }
983
+ .charcoal-checkbox__label[aria-disabled=true] > input {
984
+ opacity: 1;
985
+ }
986
+ .charcoal-checkbox__label_div {
987
+ color: var(--charcoal-text2);
988
+ font-size: 14px;
989
+ line-height: 20px;
990
+ }
991
+
992
+ /* src/components/Checkbox/CheckboxInput/index.css */
993
+ .charcoal-checkbox-input {
994
+ -webkit-appearance: none;
995
+ -moz-appearance: none;
996
+ appearance: none;
997
+ display: flex;
998
+ cursor: pointer;
999
+ margin: 0;
1000
+ width: 20px;
1001
+ height: 20px;
1002
+ border-radius: 4px;
1003
+ transition: 0.2s box-shadow, 0.2s background-color;
1004
+ position: relative;
1005
+ box-sizing: border-box;
1006
+ }
1007
+ .charcoal-checkbox-input:disabled,
1008
+ .charcoal-checkbox-input[readonly] {
1009
+ opacity: 0.32;
1010
+ cursor: default;
1011
+ }
1012
+ .charcoal-checkbox-input:checked {
1013
+ background-color: var(--charcoal-brand);
1014
+ }
1015
+ .charcoal-checkbox-input:checked::after {
1016
+ content: "";
1017
+ background-color: white;
1018
+ display: flex;
1019
+ margin: auto;
1020
+ width: 16px;
1021
+ height: 16px;
1022
+ clip-path: path("M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z");
1023
+ }
1024
+ .charcoal-checkbox-input:not(:checked) {
1025
+ border-width: 2px;
1026
+ border-style: solid;
1027
+ border-color: var(--charcoal-text4);
1028
+ }
1029
+ .charcoal-checkbox-input:not(:disabled):focus {
1030
+ outline: none;
1031
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1032
+ }
1033
+ .charcoal-checkbox-input:not(:disabled):focus-visible {
1034
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1035
+ }
1036
+ .charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {
1037
+ box-shadow: none;
1038
+ }
1039
+ .charcoal-checkbox-input:checked:not(:disabled):hover {
1040
+ background-color: var(--charcoal-brand-hover);
1041
+ }
1042
+ .charcoal-checkbox-input:checked:not(:disabled):active {
1043
+ background-color: var(--charcoal-brand-press);
1044
+ }
1045
+ .charcoal-checkbox-input[aria-invalid=true],
1046
+ .charcoal-checkbox-input[aria-invalid=true]:not(:disabled):focus {
1047
+ box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
1048
+ }
1049
+ .charcoal-checkbox-input[data-rounded=true] {
1050
+ border-radius: 10px;
1051
+ background-color: var(--charcoal-surface3);
1052
+ border: 2px solid transparent;
1053
+ }
1054
+ .charcoal-checkbox-input[data-rounded=true]:checked {
1055
+ background-color: var(--charcoal-brand);
1056
+ }
1057
+ .charcoal-checkbox-input[data-rounded=true]:not(:disabled):hover {
1058
+ background-color: var(--charcoal-surface3-hover);
1059
+ }
1060
+ .charcoal-checkbox-input[data-rounded=true]:not(:disabled):active {
1061
+ background-color: var(--charcoal-surface3-press);
1062
+ }
1063
+ .charcoal-checkbox-input[data-rounded=true]:not(:disabled):focus-visible {
1064
+ box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);
1065
+ }
1066
+ .charcoal-checkbox-input[data-rounded=true]:checked:not(:disabled):hover {
1067
+ background-color: var(--charcoal-brand-hover);
1068
+ }
1069
+ .charcoal-checkbox-input[data-rounded=true]:checked:not(:disabled):active {
1070
+ background-color: var(--charcoal-brand-press);
1071
+ }
1072
+ .charcoal-checkbox-input[data-rounded=true][aria-invalid=true],
1073
+ .charcoal-checkbox-input[data-rounded=true][aria-invalid=true]:not(:disabled):focus {
1074
+ box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);
1075
+ }
1076
+ .charcoal-checkbox-input[data-rounded=true]::before {
1077
+ content: "";
1078
+ width: 24px;
1079
+ height: 24px;
1080
+ position: absolute;
1081
+ top: -4px;
1082
+ left: -4px;
1083
+ border-radius: 12px;
1084
+ border: 2px solid #fff;
1085
+ box-sizing: border-box;
1086
+ }
1087
+
1088
+ /* src/components/TagItem/index.css */
1089
+ .charcoal-tag-item {
1090
+ --charcoal-tag-item-color: var(--charcoal-text5);
1091
+ --charcoal-tag-item-size: 40px;
1092
+ --charcoal-tag-item-padding-left: 24px;
1093
+ --charcoal-tag-item-padding-right: 24px;
1094
+ isolation: isolate;
1095
+ position: relative;
1096
+ -webkit-appearance: none;
1097
+ -moz-appearance: none;
1098
+ appearance: none;
1099
+ outline: none;
1100
+ border-style: none;
1101
+ display: inline-flex;
1102
+ gap: 8px;
1103
+ align-items: center;
1104
+ justify-content: center;
1105
+ text-decoration: none;
1106
+ cursor: pointer;
1107
+ overflow: hidden;
1108
+ color: var(--charcoal-tag-item-color);
1109
+ height: var(--charcoal-tag-item-size);
1110
+ padding-top: 4px;
1111
+ padding-bottom: 4px;
1112
+ padding-left: var(--charcoal-tag-item-padding-left);
1113
+ padding-right: var(--charcoal-tag-item-padding-right);
1114
+ box-sizing: border-box;
1115
+ border-radius: 4px;
1116
+ transition: 0.2s box-shadow;
1117
+ }
1118
+ .charcoal-tag-item[data-size=M] {
1119
+ --charcoal-tag-item-size: 40px;
1120
+ --charcoal-tag-item-padding-left: 24px;
1121
+ --charcoal-tag-item-padding-right: 24px;
1122
+ }
1123
+ .charcoal-tag-item[data-size=S] {
1124
+ --charcoal-tag-item-size: 32px;
1125
+ --charcoal-tag-item-padding-left: 16px;
1126
+ --charcoal-tag-item-padding-right: 16px;
1127
+ }
1128
+ .charcoal-tag-item[data-state=inactive] {
1129
+ --charcoal-tag-item-color: var(--charcoal-text2);
1130
+ }
1131
+ .charcoal-tag-item[data-state=active] {
1132
+ --charcoal-tag-item-padding-left: 16px;
1133
+ --charcoal-tag-item-padding-right: 8px;
1134
+ }
1135
+ .charcoal-tag-item:disabled,
1136
+ .charcoal-tag-item[aria-disabled]:not([aria-disabled="false"]) {
1137
+ opacity: 0.32;
1138
+ cursor: default;
1139
+ }
1140
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,
1141
+ .charcoal-tag-item[aria-disabled=false]:focus-visible {
1142
+ outline: none;
1143
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1144
+ }
1145
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,
1146
+ .charcoal-tag-item[aria-disabled=false]:focus {
1147
+ outline: none;
1148
+ box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
1149
+ }
1150
+ .charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1151
+ .charcoal-tag-item[aria-disabled=false]:focus:not(:focus-visible) {
1152
+ box-shadow: none;
1153
+ }
1154
+ .charcoal-tag-item__bg {
1155
+ background-color: var(--charcoal-tag-item-bg);
1156
+ }
1157
+ .charcoal-tag-item__bg[data-bg-variant=image] {
1158
+ background-color: var(--charcoal-surface4);
1159
+ }
1160
+ .charcoal-tag-item__bg[data-bg-variant=image]::before {
1161
+ content: "";
1162
+ position: absolute;
1163
+ z-index: 1;
1164
+ top: 0;
1165
+ left: 0;
1166
+ width: 100%;
1167
+ height: 100%;
1168
+ background-position: center;
1169
+ background-size: cover;
1170
+ background-image: var(--charcoal-tag-item-bg);
1171
+ mix-blend-mode: overlay;
1172
+ }
1173
+ .charcoal-tag-item__bg[data-state=inactive] {
1174
+ background-color: var(--charcoal-surface3);
1175
+ }
1176
+ .charcoal-tag-item__label {
1177
+ height: 100%;
1178
+ display: flex;
1179
+ flex-direction: column;
1180
+ align-items: center;
1181
+ justify-content: center;
1182
+ }
1183
+ .charcoal-tag-item__label[data-has-translate=true] {
1184
+ justify-content: space-between;
1185
+ }
1186
+ .charcoal-tag-item__label__translated {
1187
+ --charcoal-tag-item-text-font-size: 12px;
1188
+ --charcoal-tag-item-text-line-height: 20px;
1189
+ font-weight: bold;
1190
+ }
1191
+ .charcoal-tag-item__label__translated::before {
1192
+ display: none;
1193
+ }
1194
+ .charcoal-tag-item__label__text {
1195
+ --charcoal-tag-item-text-font-size: 14px;
1196
+ --charcoal-tag-item-text-line-height: 22px;
1197
+ max-width: 152px;
1198
+ overflow: hidden;
1199
+ font-weight: bold;
1200
+ color: inherit;
1201
+ white-space: nowrap;
1202
+ text-overflow: ellipsis;
1203
+ }
1204
+ .charcoal-tag-item__label__text[data-has-translate=true] {
1205
+ --charcoal-tag-item-text-font-size: 10px;
1206
+ --charcoal-tag-item-text-line-height: 14px;
1207
+ font-weight: normal;
1208
+ }
1209
+ .charcoal-tag-item__labe__text[data-has-translate=true]::after {
1210
+ display: none;
1211
+ }
1212
+ }
1213
+
1214
+ /*# sourceMappingURL=layered.css.map */
package/dist/layered.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["<no source>","index.css"],"names":[],"mappings":"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","file":"layered.css","sourcesContent":[null,"/* src/components/Button/index.css */\n.charcoal-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n box-sizing: border-box;\n padding: 0 24px;\n border-style: none;\n outline: none;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n width: -moz-min-content;\n width: min-content;\n display: inline-grid;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n white-space: nowrap;\n border-radius: 999999px;\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n transition:\n 0.2s color,\n 0.2s background-color,\n 0.2s box-shadow;\n height: 40px;\n}\n.charcoal-button:disabled {\n cursor: default;\n opacity: 0.32;\n}\n.charcoal-button:not(:disabled):focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-button:not(:disabled):hover {\n color: var(--charcoal-text2-hover);\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-button:not(:disabled):active,\n.charcoal-button[data-active=true] {\n color: var(--charcoal-text2-press);\n background-color: var(--charcoal-surface3-press);\n}\n.charcoal-button[data-variant=Primary] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-brand);\n}\n.charcoal-button[data-variant=Primary]:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-button[data-variant=Primary]:active:not(:disabled),\n.charcoal-button[data-variant=Primary][data-active=true] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-brand-press);\n}\n.charcoal-button[data-variant=Overlay] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n}\n.charcoal-button[data-variant=Overlay]:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n}\n.charcoal-button[data-variant=Overlay]:active:not(:disabled),\n.charcoal-button[data-variant=Overlay][data-active=true] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n}\n.charcoal-button[data-variant=Navigation] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface6);\n}\n.charcoal-button[data-variant=Navigation]:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface6-hover);\n}\n.charcoal-button[data-variant=Navigation]:active:not(:disabled),\n.charcoal-button[data-variant=Navigation][data-active=true] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface6-press);\n}\n.charcoal-button[data-variant=Danger] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-assertive);\n}\n.charcoal-button[data-variant=Danger]:hover:not(:disabled) {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-assertive-hover);\n}\n.charcoal-button[data-variant=Danger]:active:not(:disabled),\n.charcoal-button[data-variant=Danger][data-active=true] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-assertive-press);\n}\n.charcoal-button[data-size=S] {\n padding: 0 16px;\n height: 32px;\n}\n.charcoal-button[data-full-width=true] {\n width: 100%;\n}\n\n/* src/components/Clickable/index.css */\n.charcoal-clickable {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\n.charcoal-clickable:disabled,\n.charcoal-clickable[aria-disabled]:not([aria-disabled=\"false\"]) {\n cursor: default;\n}\n.charcoal-clickable:focus {\n outline: none;\n}\n.charcoal-clickable::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/* src/components/IconButton/index.css */\n.charcoal-icon-button {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n padding: 0;\n border-style: none;\n outline: none;\n color: inherit;\n text-rendering: inherit;\n letter-spacing: inherit;\n word-spacing: inherit;\n text-decoration: none;\n font: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 999999px;\n transition: 0.2s background-color, 0.2s box-shadow;\n}\n.charcoal-icon-button:disabled,\n.charcoal-icon-button[aria-disabled]:not([aria-disabled=\"false\"]) {\n cursor: default;\n opacity: 0.32;\n}\n.charcoal-icon-button:focus {\n outline: none;\n}\n.charcoal-icon-button::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n.charcoal-icon-button[data-size=XS] {\n width: 20px;\n height: 20px;\n}\n.charcoal-icon-button[data-size=S] {\n width: 32px;\n height: 32px;\n}\n.charcoal-icon-button[data-size=M] {\n width: 40px;\n height: 40px;\n}\n.charcoal-icon-button[data-variant=Default] {\n color: var(--charcoal-text3);\n background-color: var(--charcoal-transparent);\n}\n.charcoal-icon-button[data-variant=Default][data-active=true]:not(:disabled):not([aria-disabled]),\n.charcoal-icon-button[data-variant=Default][data-active=true][aria-disabled=false] {\n color: var(--charcoal-text3-press);\n background-color: var(--charcoal-transparent-press);\n}\n.charcoal-icon-button[data-variant=Default][data-active=false]:not(:disabled):not([aria-disabled]):hover,\n.charcoal-icon-button[data-variant=Default][data-active=false][aria-disabled=false]:hover {\n color: var(--charcoal-text3-hover);\n background-color: var(--charcoal-transparent-hover);\n}\n.charcoal-icon-button[data-variant=Default][data-active=false]:not(:disabled):not([aria-disabled]):active,\n.charcoal-icon-button[data-variant=Default][data-active=false][aria-disabled=false]:active {\n color: var(--charcoal-text3-press);\n background-color: var(--charcoal-transparent-press);\n}\n.charcoal-icon-button[data-variant=Overlay] {\n color: var(--charcoal-text5);\n background-color: var(--charcoal-surface4);\n}\n.charcoal-icon-button[data-variant=Overlay][data-active=true]:not(:disabled):not([aria-disabled]),\n.charcoal-icon-button[data-variant=Overlay][data-active=true][aria-disabled=false] {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n}\n.charcoal-icon-button[data-variant=Overlay][data-active=false]:not(:disabled):not([aria-disabled]):hover,\n.charcoal-icon-button[data-variant=Overlay][data-active=false][aria-disabled=false]:hover {\n color: var(--charcoal-text5-hover);\n background-color: var(--charcoal-surface4-hover);\n}\n.charcoal-icon-button[data-variant=Overlay][data-active=false]:not(:disabled):not([aria-disabled]):active,\n.charcoal-icon-button[data-variant=Overlay][data-active=false][aria-disabled=false]:active {\n color: var(--charcoal-text5-press);\n background-color: var(--charcoal-surface4-press);\n}\n.charcoal-icon-button:not(:disabled):not([aria-disabled]):focus,\n.charcoal-icon-button[aria-disabled=false]:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-icon-button:not(:disabled):not([aria-disabled]):focus-visible,\n.charcoal-icon-button[aria-disabled=false]:focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-icon-button:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n.charcoal-icon-button[aria-disabled=false]:focus:not(:focus-visible) {\n box-shadow: none;\n}\n\n/* src/components/Radio/index.css */\n.charcoal-radio__label {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-gap: 4px;\n align-items: center;\n cursor: pointer;\n}\n.charcoal-radio__label[aria-disabled]:not([aria-disabled=\"false\"]) {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-radio__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n\n/* src/components/Radio/RadioInput/index.css */\n.charcoal-radio-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n box-sizing: border-box;\n margin: 0;\n padding: 6px;\n width: 20px;\n height: 20px;\n cursor: pointer;\n border-radius: 999999px;\n background-color: var(--charcoal-surface1);\n transition: 0.2s background-color, 0.2s box-shadow;\n}\n.charcoal-radio-input:checked {\n background-color: var(--charcoal-brand);\n}\n.charcoal-radio-input:checked::after {\n content: \"\";\n display: block;\n width: 8px;\n height: 8px;\n pointer-events: none;\n background-color: var(--charcoal-text5);\n border-radius: 999999px;\n transition: 0.2s background-color, 0.2s box-shadow;\n}\n.charcoal-radio-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-text3);\n}\n.charcoal-radio-input:disabled {\n cursor: default;\n}\n.charcoal-radio-input:not(:disabled):hover {\n background-color: var(--charcoal-surface1-hover);\n}\n.charcoal-radio-input:not(:disabled):active {\n background-color: var(--charcoal-surface1-press);\n}\n.charcoal-radio-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-radio-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n.charcoal-radio-input:not(:disabled)[aria-invalid=true],\n.charcoal-radio-input:not(:disabled)[aria-invalid=true]:focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-radio-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-radio-input:checked:not(:disabled):hover::after {\n background-color: var(--charcoal-text5-hover);\n}\n.charcoal-radio-input:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n.charcoal-radio-input:checked:not(:disabled):active::after {\n background-color: var(--charcoal-text5-press);\n}\n\n/* src/components/Radio/RadioGroup/index.css */\n.charcoal-radio-group {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 8px;\n}\n\n/* src/components/Switch/index.css */\n.charcoal-switch__label {\n display: inline-grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n cursor: pointer;\n outline: 0;\n gap: 4px;\n}\n.charcoal-switch__label[aria-disabled=true] {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-switch__label[aria-disabled=true] > input {\n opacity: 1;\n}\n.charcoal-switch__label_div {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n}\n\n/* src/components/Switch/SwitchInput/index.css */\n.charcoal-switch-input {\n cursor: pointer;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-flex;\n position: relative;\n box-sizing: border-box;\n width: 28px;\n border: 2px solid transparent;\n transition-property: background-color, box-shadow;\n transition-duration: 0.2s;\n outline: none;\n border-radius: 16px;\n height: 16px;\n margin: 0;\n background-color: var(--charcoal-text4);\n}\n.charcoal-switch-input:disabled,\n.charcoal-switch-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-switch-input::after {\n content: \"\";\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n width: 12px;\n height: 12px;\n transform: translateX(0);\n transition: transform 0.2s;\n border-radius: 1024px;\n background-color: var(--charcoal-text5);\n}\n.charcoal-switch-input:checked::after {\n transform: translateX(12px);\n transition: transform 0.2s;\n}\n.charcoal-switch-input:checked {\n background-color: var(--charcoal-brand);\n}\n.charcoal-switch-input:not(:disabled):hover {\n background-color: var(--charcoal-text4-hover);\n}\n.charcoal-switch-input:not(:disabled):active {\n background-color: var(--charcoal-text4-press);\n}\n.charcoal-switch-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n.charcoal-switch-input:not(:disabled)::after:hover {\n background-color: var(--charcoal-text5-hover);\n}\n.charcoal-switch-input:not(:disabled)::after:active {\n background-color: var(--charcoal-text5-press);\n}\n.charcoal-switch-input:not(:disabled):checked:hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-switch-input:not(:disabled):checked:active {\n background-color: var(--charcoal-brand-press);\n}\n\n/* src/components/TextField/index.css */\n.charcoal-text-field-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n}\n.charcoal-text-field-root[aria-disabled=true] {\n opacity: 0.32;\n}\n.charcoal-text-field-container {\n display: flex;\n height: 40px;\n transition: 0.2s background-color, 0.2s box-shadow;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n padding: 0 8px;\n line-height: 22px;\n font-size: 14px;\n}\n.charcoal-text-field-container[data-invalid=true] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-text-field-container:not([aria-disabled=\"true\"]):hover {\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-text-field-container:not([aria-disabled=\"true\"]):focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-text-field-container:not([aria-disabled=\"true\"])[data-invalid=true]:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-text-field-prefix {\n display: flex;\n align-items: center;\n margin-right: 4px;\n}\n.charcoal-text-field-suffix {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: 4px;\n}\n.charcoal-text-field-input {\n border: none;\n box-sizing: border-box;\n outline: none;\n font-family: inherit;\n transform-origin: top left;\n transform: scale(0.875);\n width: calc(100% / 0.875);\n height: calc(100% / 0.875);\n font-size: calc(14px / 0.875);\n line-height: calc(22px / 0.875);\n padding-left: 0;\n padding-right: 0;\n border-radius: calc(4px / 0.875);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n color: var(--charcoal-text2);\n}\n.charcoal-text-field-input::-moz-placeholder {\n color: var(--charcoal-text3);\n}\n.charcoal-text-field-input::placeholder {\n color: var(--charcoal-text3);\n}\n.charcoal-text-field-line-counter {\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-text3);\n}\n\n/* src/components/FieldLabel/index.css */\n.charcoal-field-label {\n font-size: 14px;\n line-height: 22px;\n font-weight: bold;\n display: flow-root;\n color: var(--charcoal-text1);\n}\n.charcoal-field-label-required-text {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text2);\n}\n.charcoal-field-label-sub-label {\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text3);\n transition: 0.2s color, 0.2s box-shadow;\n}\n.charcoal-field-label-root {\n display: inline-flex;\n align-items: center;\n}\n.charcoal-field-label-root > .charcoal-field-label-required-text {\n margin-left: 4px;\n}\n.charcoal-field-label-root > .charcoal-field-label-sub-label {\n margin-left: auto;\n}\n\n/* src/components/TextField/AssistiveText/index.css */\n.charcoal-text-field-assistive-text {\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n color: var(--charcoal-text2);\n}\n.charcoal-text-field-assistive-text[data-invalid=true] {\n color: var(--charcoal-assertive);\n}\n\n/* src/components/TextArea/index.css */\n.charcoal-text-area-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n}\n.charcoal-text-area-root[aria-disabled=true] {\n opacity: 0.32;\n}\n.charcoal-text-area-container {\n position: relative;\n overflow: hidden;\n color: var(--charcoal-text2);\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n transition: 0.2s background-color, 0.2s box-shadow;\n height: calc(22px * var(--charcoal-text-area-rows) + 18px);\n}\n.charcoal-text-area-container[aria-invalid=true] {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-text-area-container:focus-within {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-text-area-container:not(aria-disabled=\"true\"):hover {\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-text-area-container[aria-invalid=true]:focus-within {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-text-area-textarea {\n border: none;\n outline: none;\n resize: none;\n font-family: inherit;\n color: inherit;\n box-sizing: border-box;\n transform-origin: top left;\n transform: scale(0.875);\n width: calc(100% / 0.875);\n font-size: calc(14px / 0.875);\n line-height: calc(22px / 0.875);\n padding: calc(9px / 0.875) calc(8px / 0.875);\n height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n}\n.charcoal-text-area-textarea[data-no-bottom-padding=true] {\n padding: calc(9px / 0.875) calc(8px / 0.875) 0;\n height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);\n}\n.charcoal-text-area-textarea::-moz-placeholder {\n color: var(--charcoal-text3);\n}\n.charcoal-text-area-textarea::placeholder {\n color: var(--charcoal-text3);\n}\n.charcoal-text-area-counter {\n position: absolute;\n bottom: 9px;\n right: 8px;\n line-height: 22px;\n font-size: 14px;\n color: var(--charcoal-text3);\n}\n\n/* src/components/Modal/Dialog/index.css */\n.charcoal-modal-dialog {\n margin: auto;\n position: relative;\n height: -moz-fit-content;\n height: fit-content;\n width: 440px;\n background-color: var(--charcoal-surface1);\n border-radius: 24px;\n}\n.charcoal-modal-dialog[data-size=S] {\n width: 336px;\n}\n.charcoal-modal-dialog[data-size=M] {\n width: 440px;\n}\n.charcoal-modal-dialog[data-size=L] {\n width: 648px;\n}\n@media (max-width: 743px) {\n .charcoal-modal-dialog {\n max-width: 440px;\n width: calc(100% - 48px);\n }\n .charcoal-modal-dialog[data-bottom-sheet=true],\n .charcoal-modal-dialog[data-bottom-sheet=full] {\n max-width: unset;\n width: 100%;\n border-radius: 0;\n margin: auto 0 0 0;\n }\n .charcoal-modal-dialog[data-bottom-sheet=full] {\n min-height: 100%;\n }\n}\n.charcoal-modal-dialog:focus {\n outline: none;\n}\n\n/* src/components/Modal/index.css */\n.charcoal-modal-background {\n overflow: auto;\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n padding: 40px 0;\n box-sizing: border-box;\n background-color: var(--charcoal-surface4);\n}\n@media (max-width: 743px) {\n .charcoal-modal-background[data-bottom-sheet=true],\n .charcoal-modal-background[data-bottom-sheet=full] {\n padding: 0;\n }\n}\n.charcoal-modal-close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n color: var(--charcoal-text3);\n transition: 0.2s color;\n}\n.charcoal-modal-title {\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n}\n\n/* src/components/Modal/ModalPlumbing.css */\n.charcoal-modal-header-root {\n height: 64px;\n display: grid;\n align-content: center;\n justify-content: center;\n}\n@media (max-width: 743px) {\n .charcoal-modal-header-root[data-bottom-sheet=true],\n .charcoal-modal-header-root[data-bottom-sheet=full] {\n height: 48px;\n }\n}\n.charcoal-modal-header-title {\n color: var(--charcoal-text1);\n font-size: 16px;\n line-height: 24px;\n font-weight: bold;\n display: flow-root;\n}\n.charcoal-modal-align {\n padding-left: 16px;\n padding-right: 16px;\n}\n.charcoal-modal-body {\n padding-bottom: 40px;\n}\n.charcoal-modal-buttons {\n display: grid;\n grid-auto-flow: row;\n grid-row-gap: 8px;\n padding-top: 16px;\n padding-left: 16px;\n padding-right: 16px;\n}\n\n/* src/components/LoadingSpinner/index.css */\n.charcoal-loading-spinner {\n box-sizing: content-box;\n margin: auto;\n padding: var(--charcoal-loading-spinner-padding);\n border-radius: 8px;\n font-size: var(--charcoal-loading-spinner-size);\n width: var(--charcoal-loading-spinner-size);\n height: var(--charcoal-loading-spinner-size);\n opacity: 0.84;\n color: var(--charcoal-text4);\n background-color: var(--charcoal-background1);\n}\n.charcoal-loading-spinner[data-transparent=true] {\n background-color: var(--charcoal-transparent);\n}\n@keyframes charcoal-loading-spinner-icon-scale-out {\n from {\n transform: scale(0);\n opacity: 1;\n }\n to {\n transform: scale(1);\n opacity: 0;\n }\n}\n.charcoal-loading-spinner-icon {\n width: 1em;\n height: 1em;\n border-radius: 1em;\n background-color: currentColor;\n animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;\n animation-iteration-count: infinite;\n}\n.charcoal-loading-spinner-icon[data-reset-animation] {\n animation: none;\n}\n.charcoal-loading-spinner-icon[data-once=true] {\n animation-iteration-count: 1;\n}\n\n/* src/components/DropdownSelector/index.css */\n.charcoal-dropdown-selector-root {\n display: grid;\n grid-template-columns: 1fr;\n grid-gap: 4px;\n width: 100%;\n}\n.charcoal-dropdown-selector-root[aria-disabled=true] {\n cursor: default;\n opacity: 0.32;\n}\n.charcoal-dropdown-selector-button {\n display: grid;\n grid-template-columns: 1fr auto;\n justify-content: space-between;\n align-items: center;\n height: 40px;\n width: 100%;\n box-sizing: border-box;\n border: none;\n cursor: pointer;\n gap: 4px;\n padding-right: 8px;\n padding-left: 8px;\n background-color: var(--charcoal-surface3);\n border-radius: 4px;\n transition: 0.2s box-shadow, 0.2s background-color;\n}\n.charcoal-dropdown-selector-button:disabled {\n cursor: default;\n}\n.charcoal-dropdown-selector-button:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-dropdown-selector-button:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-dropdown-selector-button:not(:disabled)[data-active=true],\n.charcoal-dropdown-selector-button:not(:disabled):active {\n background-color: var(--charcoal-surface3-press);\n}\n.charcoal-dropdown-selector-button:not(:disabled):hover {\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n.charcoal-dropdown-selector-button[aria-invalid=true],\n.charcoal-dropdown-selector-button:not(:disabled)[aria-invalid=true]:focus:not(:focus-visible) {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-ui-dropdown-selector-text {\n text-align: left;\n font-size: 14px;\n line-height: 22px;\n display: flow-root;\n color: var(--charcoal-text2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.charcoal-ui-dropdown-selector-text[data-placeholder=true] {\n color: var(--charcoal-text3);\n}\n.charcoal-ui-dropdown-selector-icon {\n color: var(--charcoal-text2);\n}\n\n/* src/components/DropdownSelector/Popover/index.css */\n.charcoal-popover {\n margin: 4px 0;\n list-style: none;\n overflow: auto;\n max-height: inherit;\n background-color: var(--charcoal-background1);\n border: solid 1px var(--charcoal-border-default);\n border-radius: 8px;\n padding-top: 8px;\n padding-bottom: 8px;\n}\n\n/* src/components/DropdownSelector/MenuList/index.css */\n.charcoal-menu-list {\n padding: 0;\n margin: 0;\n}\n\n/* src/components/DropdownSelector/DropdownMenuItem/index.css */\n.charcoal-dropdown-selector-menu-item {\n font-size: 14px;\n line-height: 22px;\n color: var(--charcoal-text2);\n padding: 9px 0;\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 20px;\n}\n.charcoal-dropdown-selector-menu-item[data-selected=true] {\n margin-left: 0px;\n}\n.charcoal-dropdown-selector-menu-item-icon {\n color: var(--charcoal-text2);\n padding-right: 4px;\n}\n\n/* src/components/DropdownSelector/ListItem/index.css */\n.charcoal-list-item {\n list-style: none;\n display: flex;\n align-items: center;\n min-height: 40px;\n cursor: pointer;\n outline: none;\n padding-right: 16px;\n padding-left: 16px;\n transition: background-color 0.2s;\n}\n.charcoal-list-item:not([aria-disabled=\"true\"]):hover,\n.charcoal-list-item:not([aria-disabled=\"true\"]):focus,\n.charcoal-list-item:not([aria-disabled=\"true\"]):focus-within {\n background-color: var(--charcoal-surface3);\n}\n.charcoal-list-item[aria-disabled=true] {\n opacity: 0.32;\n cursor: default;\n}\n\n/* src/components/DropdownSelector/MenuItemGroup/index.css */\n.charcoal-menu-item-group {\n display: block;\n}\n.charcoal-menu-item-group > span {\n display: block;\n color: var(--charcoal-text3);\n font-size: 12px;\n font-weight: bold;\n padding: 12px 0 8px 16px;\n}\n.charcoal-menu-item-group > ul {\n padding-left: 0;\n margin: 0;\n box-sizing: border-box;\n list-style: none;\n overflow: hidden;\n}\n\n/* src/components/SegmentedControl/index.css */\n.charcoal-segmented-control {\n display: inline-flex;\n align-items: center;\n background-color: var(--charcoal-surface3);\n border-radius: 16px;\n}\n.charcoal-segmented-control-radio__label {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n height: 32px;\n padding-right: 16px;\n padding-left: 16px;\n border-radius: 16px;\n color: var(--charcoal-text2);\n font-size: 14px;\n line-height: 22px;\n}\n.charcoal-segmented-control-radio__label[aria-disabled]:not([aria-disabled=\"false\"]) {\n cursor: default;\n opacity: 0.32;\n}\n.charcoal-segmented-control-radio__label[data-checked=true] {\n background-color: var(--charcoal-brand);\n color: var(--charcoal-text5);\n}\n.charcoal-segmented-control-radio__input {\n position: absolute;\n height: 0px;\n width: 0px;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n box-sizing: border-box;\n overflow: hidden;\n white-space: nowrap;\n opacity: 0;\n}\n\n/* src/components/Checkbox/index.css */\n.charcoal-checkbox__label {\n position: relative;\n cursor: pointer;\n display: flex;\n gap: 4px;\n}\n.charcoal-checkbox__label[aria-disabled=true] {\n cursor: default;\n opacity: 0.32;\n}\n.charcoal-checkbox__label[aria-disabled=true] > input {\n opacity: 1;\n}\n.charcoal-checkbox__label_div {\n color: var(--charcoal-text2);\n font-size: 14px;\n line-height: 20px;\n}\n\n/* src/components/Checkbox/CheckboxInput/index.css */\n.charcoal-checkbox-input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: flex;\n cursor: pointer;\n margin: 0;\n width: 20px;\n height: 20px;\n border-radius: 4px;\n transition: 0.2s box-shadow, 0.2s background-color;\n position: relative;\n box-sizing: border-box;\n}\n.charcoal-checkbox-input:disabled,\n.charcoal-checkbox-input[readonly] {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-checkbox-input:checked {\n background-color: var(--charcoal-brand);\n}\n.charcoal-checkbox-input:checked::after {\n content: \"\";\n background-color: white;\n display: flex;\n margin: auto;\n width: 16px;\n height: 16px;\n clip-path: path(\"M10.6 5a1.3 1.3 0 0 1 1.8 1.9l-5.7 5.6-3-2.9a1.3 1.3 0 1 1 2-1.9l1 1z\");\n}\n.charcoal-checkbox-input:not(:checked) {\n border-width: 2px;\n border-style: solid;\n border-color: var(--charcoal-text4);\n}\n.charcoal-checkbox-input:not(:disabled):focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus-visible {\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input:not(:disabled):focus:not(:focus-visible) {\n box-shadow: none;\n}\n.charcoal-checkbox-input:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n.charcoal-checkbox-input[aria-invalid=true],\n.charcoal-checkbox-input[aria-invalid=true]:not(:disabled):focus {\n box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n.charcoal-checkbox-input[data-rounded=true] {\n border-radius: 10px;\n background-color: var(--charcoal-surface3);\n border: 2px solid transparent;\n}\n.charcoal-checkbox-input[data-rounded=true]:checked {\n background-color: var(--charcoal-brand);\n}\n.charcoal-checkbox-input[data-rounded=true]:not(:disabled):hover {\n background-color: var(--charcoal-surface3-hover);\n}\n.charcoal-checkbox-input[data-rounded=true]:not(:disabled):active {\n background-color: var(--charcoal-surface3-press);\n}\n.charcoal-checkbox-input[data-rounded=true]:not(:disabled):focus-visible {\n box-shadow: 0 0 0 6px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input[data-rounded=true]:checked:not(:disabled):hover {\n background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input[data-rounded=true]:checked:not(:disabled):active {\n background-color: var(--charcoal-brand-press);\n}\n.charcoal-checkbox-input[data-rounded=true][aria-invalid=true],\n.charcoal-checkbox-input[data-rounded=true][aria-invalid=true]:not(:disabled):focus {\n box-shadow: 0 0 0 6px rgba(255, 43, 0, 0.32);\n}\n.charcoal-checkbox-input[data-rounded=true]::before {\n content: \"\";\n width: 24px;\n height: 24px;\n position: absolute;\n top: -4px;\n left: -4px;\n border-radius: 12px;\n border: 2px solid #fff;\n box-sizing: border-box;\n}\n\n/* src/components/TagItem/index.css */\n.charcoal-tag-item {\n --charcoal-tag-item-color: var(--charcoal-text5);\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n isolation: isolate;\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n border-style: none;\n display: inline-flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n color: var(--charcoal-tag-item-color);\n height: var(--charcoal-tag-item-size);\n padding-top: 4px;\n padding-bottom: 4px;\n padding-left: var(--charcoal-tag-item-padding-left);\n padding-right: var(--charcoal-tag-item-padding-right);\n box-sizing: border-box;\n border-radius: 4px;\n transition: 0.2s box-shadow;\n}\n.charcoal-tag-item[data-size=M] {\n --charcoal-tag-item-size: 40px;\n --charcoal-tag-item-padding-left: 24px;\n --charcoal-tag-item-padding-right: 24px;\n}\n.charcoal-tag-item[data-size=S] {\n --charcoal-tag-item-size: 32px;\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 16px;\n}\n.charcoal-tag-item[data-state=inactive] {\n --charcoal-tag-item-color: var(--charcoal-text2);\n}\n.charcoal-tag-item[data-state=active] {\n --charcoal-tag-item-padding-left: 16px;\n --charcoal-tag-item-padding-right: 8px;\n}\n.charcoal-tag-item:disabled,\n.charcoal-tag-item[aria-disabled]:not([aria-disabled=\"false\"]) {\n opacity: 0.32;\n cursor: default;\n}\n.charcoal-tag-item:not(:disabled):not([aria-disabled]):focus-visible,\n.charcoal-tag-item[aria-disabled=false]:focus-visible {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-tag-item:not(:disabled):not([aria-disabled]):focus,\n.charcoal-tag-item[aria-disabled=false]:focus {\n outline: none;\n box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-tag-item:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),\n.charcoal-tag-item[aria-disabled=false]:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.charcoal-tag-item__bg {\n background-color: var(--charcoal-tag-item-bg);\n}\n.charcoal-tag-item__bg[data-bg-variant=image] {\n background-color: var(--charcoal-surface4);\n}\n.charcoal-tag-item__bg[data-bg-variant=image]::before {\n content: \"\";\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-position: center;\n background-size: cover;\n background-image: var(--charcoal-tag-item-bg);\n mix-blend-mode: overlay;\n}\n.charcoal-tag-item__bg[data-state=inactive] {\n background-color: var(--charcoal-surface3);\n}\n.charcoal-tag-item__label {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.charcoal-tag-item__label[data-has-translate=true] {\n justify-content: space-between;\n}\n.charcoal-tag-item__label__translated {\n --charcoal-tag-item-text-font-size: 12px;\n --charcoal-tag-item-text-line-height: 20px;\n font-weight: bold;\n}\n.charcoal-tag-item__label__translated::before {\n display: none;\n}\n.charcoal-tag-item__label__text {\n --charcoal-tag-item-text-font-size: 14px;\n --charcoal-tag-item-text-line-height: 22px;\n max-width: 152px;\n overflow: hidden;\n font-weight: bold;\n color: inherit;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.charcoal-tag-item__label__text[data-has-translate=true] {\n --charcoal-tag-item-text-font-size: 10px;\n --charcoal-tag-item-text-line-height: 14px;\n font-weight: normal;\n}\n.charcoal-tag-item__labe__text[data-has-translate=true]::after {\n display: none;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/react",
3
- "version": "4.0.0-beta.13",
3
+ "version": "4.0.0-beta.14",
4
4
  "license": "Apache-2.0",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.esm.js",
@@ -14,6 +14,10 @@
14
14
  "./dist/index.css": {
15
15
  "import": "./dist/index.css",
16
16
  "require": "./dist/index.css"
17
+ },
18
+ "./dist/layered.css": {
19
+ "import": "./dist/layered.css",
20
+ "require": "./dist/layered.css"
17
21
  }
18
22
  },
19
23
  "types": "./dist/index.d.ts",
@@ -29,7 +33,7 @@
29
33
  "test": "vitest run --passWithNoTests"
30
34
  },
31
35
  "devDependencies": {
32
- "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.13",
36
+ "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.14",
33
37
  "@react-types/switch": "^3.1.2",
34
38
  "@storybook/addon-actions": "^8.0.5",
35
39
  "@storybook/react": "^8.0.5",
@@ -58,10 +62,10 @@
58
62
  "vitest": "^2.0.1"
59
63
  },
60
64
  "dependencies": {
61
- "@charcoal-ui/foundation": "^4.0.0-beta.13",
62
- "@charcoal-ui/icons": "^4.0.0-beta.13",
63
- "@charcoal-ui/theme": "^4.0.0-beta.13",
64
- "@charcoal-ui/utils": "^4.0.0-beta.13",
65
+ "@charcoal-ui/foundation": "^4.0.0-beta.14",
66
+ "@charcoal-ui/icons": "^4.0.0-beta.14",
67
+ "@charcoal-ui/theme": "^4.0.0-beta.14",
68
+ "@charcoal-ui/utils": "^4.0.0-beta.14",
65
69
  "@react-aria/button": "^3.9.1",
66
70
  "@react-aria/checkbox": "^3.13.0",
67
71
  "@react-aria/dialog": "^3.5.10",
@@ -94,5 +98,5 @@
94
98
  "url": "https://github.com/pixiv/charcoal.git",
95
99
  "directory": "packages/react"
96
100
  },
97
- "gitHead": "0b37817809ef7fc52094865f7fbdd9e8d025e9e5"
101
+ "gitHead": "e071f6106a6335f6af9a9ad4a942c16791dc847b"
98
102
  }