@charcoal-ui/react 3.13.0 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/components/Switch/index.d.ts.map +1 -1
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js.map +1 -1
  4. package/package.json +8 -8
  5. package/src/README.mdx +68 -0
  6. package/src/SSR.mdx +67 -0
  7. package/src/_lib/index.ts +1 -1
  8. package/src/components/Button/__snapshots__/index.story.storyshot +9 -9
  9. package/src/components/Checkbox/__snapshots__/index.story.storyshot +6 -6
  10. package/src/components/Clickable/__snapshots__/index.story.storyshot +2 -2
  11. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +1 -1
  12. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +23 -23
  13. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +1 -1
  14. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +14 -14
  15. package/src/components/Icon/__snapshots__/index.story.storyshot +1 -1
  16. package/src/components/IconButton/__snapshots__/index.story.storyshot +3 -3
  17. package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +4 -4
  18. package/src/components/Modal/index.story.tsx +7 -0
  19. package/src/components/MultiSelect/__snapshots__/index.story.storyshot +4 -4
  20. package/src/components/MultiSelect/index.test.tsx +6 -5
  21. package/src/components/Radio/__snapshots__/index.story.storyshot +5 -5
  22. package/src/components/Radio/index.test.tsx +4 -3
  23. package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +2 -2
  24. package/src/components/Switch/__snapshots__/index.story.storyshot +4 -4
  25. package/src/components/Switch/index.tsx +0 -1
  26. package/src/components/TagItem/__snapshots__/index.story.storyshot +8 -8
  27. package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +11 -11
  28. package/src/components/TextField/__snapshots__/TextField.story.storyshot +13 -13
  29. package/src/components/Modal/__snapshots__/index.story.storyshot +0 -3932
  30. package/src/components/a11y.test.tsx +0 -99
package/src/components/Modal/__snapshots__/index.story.storyshot DELETED
@@ -1,3932 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
4
- .c0 {
5
- cursor: pointer;
6
- -webkit-appearance: none;
7
- -moz-appearance: none;
8
- appearance: none;
9
- background: transparent;
10
- padding: 0;
11
- border-style: none;
12
- outline: none;
13
- color: inherit;
14
- text-rendering: inherit;
15
- -webkit-letter-spacing: inherit;
16
- -moz-letter-spacing: inherit;
17
- -ms-letter-spacing: inherit;
18
- letter-spacing: inherit;
19
- word-spacing: inherit;
20
- -webkit-text-decoration: none;
21
- text-decoration: none;
22
- font: inherit;
23
- margin: 0;
24
- overflow: visible;
25
- text-transform: none;
26
- }
27
-
28
- .c0:disabled,
29
- .c0[aria-disabled]:not([aria-disabled=false]) {
30
- cursor: default;
31
- }
32
-
33
- .c0:focus {
34
- outline: none;
35
- }
36
-
37
- .c0::-moz-focus-inner {
38
- border-style: none;
39
- padding: 0;
40
- }
41
-
42
- .c1 {
43
- width: -webkit-min-content;
44
- width: -moz-min-content;
45
- width: min-content;
46
- display: inline-grid;
47
- -webkit-align-items: center;
48
- -webkit-box-align: center;
49
- -ms-flex-align: center;
50
- align-items: center;
51
- -webkit-box-pack: center;
52
- -webkit-justify-content: center;
53
- -ms-flex-pack: center;
54
- justify-content: center;
55
- cursor: pointer;
56
- -webkit-user-select: none;
57
- -moz-user-select: none;
58
- -ms-user-select: none;
59
- user-select: none;
60
- white-space: nowrap;
61
- border-radius: 999999px;
62
- font-size: 14px;
63
- line-height: 22px;
64
- font-weight: bold;
65
- padding-right: 24px;
66
- padding-left: 24px;
67
- color: var(--charcoal-text2);
68
- background-color: var(--charcoal-surface3);
69
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
70
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
71
- height: 40px;
72
- }
73
-
74
- .c1:not(:disabled):not([aria-disabled]):focus,
75
- .c1[aria-disabled='false']:focus {
76
- outline: none;
77
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
78
- }
79
-
80
- .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
81
- .c1[aria-disabled='false']:focus:not(:focus-visible) {
82
- box-shadow: none;
83
- }
84
-
85
- .c1:not(:disabled):not([aria-disabled]):focus-visible,
86
- .c1[aria-disabled='false']:focus-visible {
87
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
88
- }
89
-
90
- .c1:not(:disabled):not([aria-disabled]):hover,
91
- .c1[aria-disabled='false']:hover {
92
- color: var(--charcoal-text2-hover);
93
- background-color: var(--charcoal-surface3-hover);
94
- }
95
-
96
- .c1:not(:disabled):not([aria-disabled]):active,
97
- .c1[aria-disabled='false']:active {
98
- color: var(--charcoal-text2-press);
99
- background-color: var(--charcoal-surface3-press);
100
- }
101
-
102
- .c1:disabled,
103
- .c1[aria-disabled]:not([aria-disabled='false']) {
104
- opacity: 0.32;
105
- }
106
-
107
- .c25 {
108
- width: -webkit-fill-available;
109
- width: -moz-available;
110
- width: stretch;
111
- display: inline-grid;
112
- -webkit-align-items: center;
113
- -webkit-box-align: center;
114
- -ms-flex-align: center;
115
- align-items: center;
116
- -webkit-box-pack: center;
117
- -webkit-justify-content: center;
118
- -ms-flex-pack: center;
119
- justify-content: center;
120
- cursor: pointer;
121
- -webkit-user-select: none;
122
- -moz-user-select: none;
123
- -ms-user-select: none;
124
- user-select: none;
125
- white-space: nowrap;
126
- border-radius: 999999px;
127
- font-size: 14px;
128
- line-height: 22px;
129
- font-weight: bold;
130
- padding-right: 24px;
131
- padding-left: 24px;
132
- color: var(--charcoal-text5);
133
- background-color: var(--charcoal-brand);
134
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
135
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
136
- height: 40px;
137
- }
138
-
139
- .c25:not(:disabled):not([aria-disabled]):focus,
140
- .c25[aria-disabled='false']:focus {
141
- outline: none;
142
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
143
- }
144
-
145
- .c25:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
146
- .c25[aria-disabled='false']:focus:not(:focus-visible) {
147
- box-shadow: none;
148
- }
149
-
150
- .c25:not(:disabled):not([aria-disabled]):focus-visible,
151
- .c25[aria-disabled='false']:focus-visible {
152
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
153
- }
154
-
155
- .c25:not(:disabled):not([aria-disabled]):hover,
156
- .c25[aria-disabled='false']:hover {
157
- color: var(--charcoal-text5-hover);
158
- background-color: var(--charcoal-brand-hover);
159
- }
160
-
161
- .c25:not(:disabled):not([aria-disabled]):active,
162
- .c25[aria-disabled='false']:active {
163
- color: var(--charcoal-text5-press);
164
- background-color: var(--charcoal-brand-press);
165
- }
166
-
167
- .c25:disabled,
168
- .c25[aria-disabled]:not([aria-disabled='false']) {
169
- opacity: 0.32;
170
- }
171
-
172
- .c26 {
173
- width: -webkit-fill-available;
174
- width: -moz-available;
175
- width: stretch;
176
- display: inline-grid;
177
- -webkit-align-items: center;
178
- -webkit-box-align: center;
179
- -ms-flex-align: center;
180
- align-items: center;
181
- -webkit-box-pack: center;
182
- -webkit-justify-content: center;
183
- -ms-flex-pack: center;
184
- justify-content: center;
185
- cursor: pointer;
186
- -webkit-user-select: none;
187
- -moz-user-select: none;
188
- -ms-user-select: none;
189
- user-select: none;
190
- white-space: nowrap;
191
- border-radius: 999999px;
192
- font-size: 14px;
193
- line-height: 22px;
194
- font-weight: bold;
195
- padding-right: 24px;
196
- padding-left: 24px;
197
- color: var(--charcoal-text2);
198
- background-color: var(--charcoal-surface3);
199
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
200
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
201
- height: 40px;
202
- }
203
-
204
- .c26:not(:disabled):not([aria-disabled]):focus,
205
- .c26[aria-disabled='false']:focus {
206
- outline: none;
207
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
208
- }
209
-
210
- .c26:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
211
- .c26[aria-disabled='false']:focus:not(:focus-visible) {
212
- box-shadow: none;
213
- }
214
-
215
- .c26:not(:disabled):not([aria-disabled]):focus-visible,
216
- .c26[aria-disabled='false']:focus-visible {
217
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
218
- }
219
-
220
- .c26:not(:disabled):not([aria-disabled]):hover,
221
- .c26[aria-disabled='false']:hover {
222
- color: var(--charcoal-text2-hover);
223
- background-color: var(--charcoal-surface3-hover);
224
- }
225
-
226
- .c26:not(:disabled):not([aria-disabled]):active,
227
- .c26[aria-disabled='false']:active {
228
- color: var(--charcoal-text2-press);
229
- background-color: var(--charcoal-surface3-press);
230
- }
231
-
232
- .c26:disabled,
233
- .c26[aria-disabled]:not([aria-disabled='false']) {
234
- opacity: 0.32;
235
- }
236
-
237
- .c14 {
238
- font-size: 14px;
239
- line-height: 22px;
240
- font-weight: bold;
241
- display: flow-root;
242
- color: var(--charcoal-text1);
243
- }
244
-
245
- .c14::before {
246
- display: block;
247
- width: 0;
248
- height: 0;
249
- content: '';
250
- margin-top: -4px;
251
- }
252
-
253
- .c14::after {
254
- display: block;
255
- width: 0;
256
- height: 0;
257
- content: '';
258
- margin-bottom: -4px;
259
- }
260
-
261
- .c16 {
262
- font-size: 14px;
263
- line-height: 22px;
264
- display: flow-root;
265
- color: var(--charcoal-text3);
266
- -webkit-transition: 0.2s color,0.2s box-shadow;
267
- transition: 0.2s color,0.2s box-shadow;
268
- }
269
-
270
- .c16::before {
271
- display: block;
272
- width: 0;
273
- height: 0;
274
- content: '';
275
- margin-top: -4px;
276
- }
277
-
278
- .c16::after {
279
- display: block;
280
- width: 0;
281
- height: 0;
282
- content: '';
283
- margin-bottom: -4px;
284
- }
285
-
286
- .c16:not(:disabled):not([aria-disabled]):hover,
287
- .c16[aria-disabled='false']:hover {
288
- color: var(--charcoal-text3-hover);
289
- }
290
-
291
- .c16:not(:disabled):not([aria-disabled]):active,
292
- .c16[aria-disabled='false']:active {
293
- color: var(--charcoal-text3-press);
294
- }
295
-
296
- .c16:not(:disabled):not([aria-disabled]):active,
297
- .c16[aria-disabled='false']:active,
298
- .c16:not(:disabled):not([aria-disabled]):focus,
299
- .c16[aria-disabled='false']:focus,
300
- .c16:not(:disabled):not([aria-disabled]):focus-visible,
301
- .c16[aria-disabled='false']:focus-visible {
302
- outline: none;
303
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
304
- }
305
-
306
- .c12 {
307
- display: -webkit-inline-box;
308
- display: -webkit-inline-flex;
309
- display: -ms-inline-flexbox;
310
- display: inline-flex;
311
- -webkit-align-items: center;
312
- -webkit-box-align: center;
313
- -ms-flex-align: center;
314
- align-items: center;
315
- }
316
-
317
- .c12 > .c15 {
318
- margin-left: auto;
319
- }
320
-
321
- .c19 {
322
- display: inline-block;
323
- width: 100%;
324
- }
325
-
326
- .c19:disabled,
327
- .c19[aria-disabled]:not([aria-disabled=false]) {
328
- cursor: default;
329
- opacity: 0.32;
330
- }
331
-
332
- .c20 {
333
- width: 100%;
334
- margin-bottom: 8px;
335
- }
336
-
337
- .c21 {
338
- display: -webkit-box;
339
- display: -webkit-flex;
340
- display: -ms-flexbox;
341
- display: flex;
342
- -webkit-box-pack: justify;
343
- -webkit-justify-content: space-between;
344
- -ms-flex-pack: justify;
345
- justify-content: space-between;
346
- -webkit-align-items: center;
347
- -webkit-box-align: center;
348
- -ms-flex-align: center;
349
- align-items: center;
350
- height: 40px;
351
- width: 100%;
352
- box-sizing: border-box;
353
- border: none;
354
- cursor: pointer;
355
- gap: 4px;
356
- padding-right: 8px;
357
- padding-left: 8px;
358
- background-color: var(--charcoal-surface3);
359
- border-radius: 4px;
360
- -webkit-transition: 0.2s box-shadow,0.2s background-color;
361
- transition: 0.2s box-shadow,0.2s background-color;
362
- }
363
-
364
- .c21:disabled,
365
- .c21[aria-disabled]:not([aria-disabled=false]) {
366
- cursor: default;
367
- }
368
-
369
- .c21:not(:disabled):not([aria-disabled]):focus,
370
- .c21[aria-disabled='false']:focus {
371
- outline: none;
372
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
373
- }
374
-
375
- .c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
376
- .c21[aria-disabled='false']:focus:not(:focus-visible) {
377
- box-shadow: none;
378
- }
379
-
380
- .c21:not(:disabled):not([aria-disabled]):focus-visible,
381
- .c21[aria-disabled='false']:focus-visible {
382
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
383
- }
384
-
385
- .c21:not(:disabled):not([aria-disabled]):hover,
386
- .c21[aria-disabled='false']:hover {
387
- background-color: var(--charcoal-surface3-hover);
388
- }
389
-
390
- .c21:not(:disabled):not([aria-disabled]):active,
391
- .c21[aria-disabled='false']:active {
392
- background-color: var(--charcoal-surface3-press);
393
- }
394
-
395
- .c22 {
396
- text-align: left;
397
- font-size: 14px;
398
- line-height: 22px;
399
- display: flow-root;
400
- color: var(--charcoal-text2);
401
- overflow: hidden;
402
- text-overflow: ellipsis;
403
- white-space: nowrap;
404
- }
405
-
406
- .c23 {
407
- color: var(--charcoal-text2);
408
- }
409
-
410
- .c27 {
411
- -webkit-user-select: none;
412
- -moz-user-select: none;
413
- -ms-user-select: none;
414
- user-select: none;
415
- width: 32px;
416
- height: 32px;
417
- display: -webkit-box;
418
- display: -webkit-flex;
419
- display: -ms-flexbox;
420
- display: flex;
421
- -webkit-align-items: center;
422
- -webkit-box-align: center;
423
- -ms-flex-align: center;
424
- align-items: center;
425
- -webkit-box-pack: center;
426
- -webkit-justify-content: center;
427
- -ms-flex-pack: center;
428
- justify-content: center;
429
- color: var(--charcoal-text3);
430
- background-color: var(--charcoal-transparent);
431
- border-radius: 999999px;
432
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
433
- transition: 0.2s background-color,0.2s box-shadow;
434
- }
435
-
436
- .c27:not(:disabled):not([aria-disabled]):hover,
437
- .c27[aria-disabled='false']:hover {
438
- color: var(--charcoal-text3-hover);
439
- background-color: var(--charcoal-transparent-hover);
440
- }
441
-
442
- .c27:not(:disabled):not([aria-disabled]):active,
443
- .c27[aria-disabled='false']:active {
444
- color: var(--charcoal-text3-press);
445
- background-color: var(--charcoal-transparent-press);
446
- }
447
-
448
- .c27:not(:disabled):not([aria-disabled]):focus,
449
- .c27[aria-disabled='false']:focus {
450
- outline: none;
451
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
452
- }
453
-
454
- .c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
455
- .c27[aria-disabled='false']:focus:not(:focus-visible) {
456
- box-shadow: none;
457
- }
458
-
459
- .c27:not(:disabled):not([aria-disabled]):focus-visible,
460
- .c27[aria-disabled='false']:focus-visible {
461
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
462
- }
463
-
464
- .c27:disabled,
465
- .c27[aria-disabled]:not([aria-disabled='false']) {
466
- opacity: 0.32;
467
- }
468
-
469
- .c3 {
470
- margin: auto;
471
- position: relative;
472
- height: -webkit-fit-content;
473
- height: -moz-fit-content;
474
- height: fit-content;
475
- width: 440px;
476
- background-color: var(--charcoal-surface1);
477
- border-radius: 24px;
478
- }
479
-
480
- .c3:focus {
481
- outline: none;
482
- }
483
-
484
- .c2 {
485
- z-index: 10;
486
- overflow: auto;
487
- display: -webkit-box;
488
- display: -webkit-flex;
489
- display: -ms-flexbox;
490
- display: flex;
491
- position: fixed;
492
- top: 0;
493
- left: 0;
494
- width: -webkit-fill-available;
495
- width: -moz-available;
496
- height: 100%;
497
- -webkit-box-pack: center;
498
- -webkit-justify-content: center;
499
- -ms-flex-pack: center;
500
- justify-content: center;
501
- padding: 40px 0;
502
- box-sizing: border-box;
503
- background-color: var(--charcoal-surface4);
504
- }
505
-
506
- .c28 {
507
- position: absolute;
508
- top: 8px;
509
- right: 8px;
510
- color: var(--charcoal-text3);
511
- -webkit-transition: 0.2s color;
512
- transition: 0.2s color;
513
- }
514
-
515
- .c28:not(:disabled):not([aria-disabled]):hover,
516
- .c28[aria-disabled='false']:hover {
517
- color: var(--charcoal-text3-hover);
518
- }
519
-
520
- .c28:not(:disabled):not([aria-disabled]):active,
521
- .c28[aria-disabled='false']:active {
522
- color: var(--charcoal-text3-press);
523
- }
524
-
525
- .c5 {
526
- margin: 0;
527
- font-weight: inherit;
528
- font-size: inherit;
529
- }
530
-
531
- .c4 {
532
- height: 64px;
533
- display: grid;
534
- -webkit-align-content: center;
535
- -ms-flex-line-pack: center;
536
- align-content: center;
537
- -webkit-box-pack: center;
538
- -webkit-justify-content: center;
539
- -ms-flex-pack: center;
540
- justify-content: center;
541
- }
542
-
543
- .c6 {
544
- color: var(--charcoal-text1);
545
- font-size: 16px;
546
- line-height: 24px;
547
- font-weight: bold;
548
- display: flow-root;
549
- }
550
-
551
- .c6::before {
552
- display: block;
553
- width: 0;
554
- height: 0;
555
- content: '';
556
- margin-top: -4px;
557
- }
558
-
559
- .c6::after {
560
- display: block;
561
- width: 0;
562
- height: 0;
563
- content: '';
564
- margin-bottom: -4px;
565
- }
566
-
567
- .c9 {
568
- padding-left: 16px;
569
- padding-right: 16px;
570
- }
571
-
572
- .c7 {
573
- padding-bottom: 40px;
574
- }
575
-
576
- .c24 {
577
- display: grid;
578
- grid-auto-flow: row;
579
- grid-row-gap: 8px;
580
- padding-top: 16px;
581
- padding-left: 16px;
582
- padding-right: 16px;
583
- }
584
-
585
- .c11 {
586
- display: -webkit-box;
587
- display: -webkit-flex;
588
- display: -ms-flexbox;
589
- display: flex;
590
- -webkit-flex-direction: column;
591
- -ms-flex-direction: column;
592
- flex-direction: column;
593
- }
594
-
595
- .c13 {
596
- margin-bottom: 8px;
597
- }
598
-
599
- .c17 {
600
- display: grid;
601
- grid-template-columns: 1fr;
602
- height: 40px;
603
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
604
- transition: 0.2s background-color,0.2s box-shadow;
605
- color: var(--charcoal-text2);
606
- background-color: var(--charcoal-surface3);
607
- border-radius: 4px;
608
- gap: 4px;
609
- padding: 0 8px;
610
- line-height: 22px;
611
- font-size: 14px;
612
- }
613
-
614
- .c17:not(:disabled):not([aria-disabled]):hover,
615
- .c17 [aria-disabled='false']:hover {
616
- background-color: var(--charcoal-surface3-hover);
617
- }
618
-
619
- .c17:focus-within {
620
- outline: none;
621
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
622
- }
623
-
624
- .c18 {
625
- border: none;
626
- box-sizing: border-box;
627
- outline: none;
628
- font-family: inherit;
629
- -webkit-transform-origin: top left;
630
- -ms-transform-origin: top left;
631
- transform-origin: top left;
632
- -webkit-transform: scale(0.875);
633
- -ms-transform: scale(0.875);
634
- transform: scale(0.875);
635
- width: calc(100% / 0.875);
636
- height: calc(100% / 0.875);
637
- font-size: calc(14px / 0.875);
638
- line-height: calc(22px / 0.875);
639
- padding-left: 0;
640
- padding-right: 0;
641
- border-radius: calc(4px / 0.875);
642
- -webkit-appearance: none;
643
- -moz-appearance: none;
644
- appearance: none;
645
- background: transparent;
646
- color: var(--charcoal-text2);
647
- }
648
-
649
- .c18::-webkit-input-placeholder {
650
- color: var(--charcoal-text3);
651
- }
652
-
653
- .c18::-moz-placeholder {
654
- color: var(--charcoal-text3);
655
- }
656
-
657
- .c18:-ms-input-placeholder {
658
- color: var(--charcoal-text3);
659
- }
660
-
661
- .c18::placeholder {
662
- color: var(--charcoal-text3);
663
- }
664
-
665
- .c8 {
666
- display: grid;
667
- gap: 24px;
668
- }
669
-
670
- .c10 {
671
- color: var(--charcoal-text2);
672
- font-size: 14px;
673
- line-height: 22px;
674
- display: flow-root;
675
- }
676
-
677
- .c10::before {
678
- display: block;
679
- width: 0;
680
- height: 0;
681
- content: '';
682
- margin-top: -4px;
683
- }
684
-
685
- .c10::after {
686
- display: block;
687
- width: 0;
688
- height: 0;
689
- content: '';
690
- margin-bottom: -4px;
691
- }
692
-
693
- @media (max-width:743px) {
694
- .c3 {
695
- max-width: 440px;
696
- width: calc(100% - 48px);
697
- }
698
- }
699
-
700
- @media (max-width:743px) {
701
-
702
- }
703
-
704
- @media (max-width:743px) {
705
-
706
- }
707
-
708
- <div
709
- data-dark={false}
710
- >
711
- <div
712
- aria-hidden={null}
713
- data-overlay-container={true}
714
- >
715
- <div
716
- style={
717
- Object {
718
- "height": 1024,
719
- }
720
- }
721
- >
722
- <button
723
- className="c0 c1"
724
- disabled={false}
725
- onClick={[Function]}
726
- >
727
- Open Modal
728
- </button>
729
- </div>
730
- <div
731
- className="c2"
732
- onClick={[Function]}
733
- onPointerDown={[Function]}
734
- style={Object {}}
735
- >
736
- <div
737
- className="c3"
738
- onBlur={[Function]}
739
- onKeyDown={[Function]}
740
- role="dialog"
741
- size="M"
742
- style={Object {}}
743
- tabIndex={-1}
744
- >
745
- <div
746
- className="c4"
747
- >
748
- <h3
749
- className="c5 c6"
750
- >
751
- react/Title
752
- </h3>
753
- </div>
754
- <div
755
- className="c7"
756
- >
757
- <div
758
- className="c8"
759
- >
760
- <div
761
- className="c9 c10"
762
- >
763
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
764
- </div>
765
- <div
766
- className="c9"
767
- >
768
- <div
769
- className="c11"
770
- >
771
- <div
772
- className="c12 c13"
773
- >
774
- <label
775
- className="c14"
776
- htmlFor="test-id"
777
- id="test-id"
778
- >
779
- Name
780
- </label>
781
- <div
782
- className="c15 c16"
783
- >
784
- <span />
785
- </div>
786
- </div>
787
- <div
788
- className="c17"
789
- >
790
- <input
791
- aria-labelledby="test-id"
792
- className="c18"
793
- disabled={false}
794
- id="test-id"
795
- onChange={[Function]}
796
- placeholder="Nagisa"
797
- readOnly={false}
798
- required={false}
799
- type="text"
800
- value=""
801
- />
802
- </div>
803
- </div>
804
- </div>
805
- <div
806
- className="c9"
807
- >
808
- <div
809
- className="c11"
810
- >
811
- <div
812
- className="c12 c13"
813
- >
814
- <label
815
- className="c14"
816
- htmlFor="test-id"
817
- id="test-id"
818
- >
819
- Country
820
- </label>
821
- <div
822
- className="c15 c16"
823
- >
824
- <span />
825
- </div>
826
- </div>
827
- <div
828
- className="c17"
829
- >
830
- <input
831
- aria-labelledby="test-id"
832
- autoFocus={true}
833
- className="c18"
834
- disabled={false}
835
- id="test-id"
836
- onChange={[Function]}
837
- placeholder="Tokyo"
838
- readOnly={false}
839
- required={false}
840
- type="text"
841
- value=""
842
- />
843
- </div>
844
- </div>
845
- </div>
846
- <div
847
- className="c9"
848
- >
849
- <div
850
- className="c19"
851
- >
852
- <div
853
- className="c12 c20"
854
- >
855
- <label
856
- className="c14"
857
- >
858
- Fruits
859
- </label>
860
- <div
861
- className="c15 c16"
862
- >
863
- <span />
864
- </div>
865
- </div>
866
- <div
867
- aria-hidden="true"
868
- style={
869
- Object {
870
- "border": 0,
871
- "clip": "rect(0 0 0 0)",
872
- "clipPath": "inset(50%)",
873
- "height": "1px",
874
- "margin": "-1px",
875
- "overflow": "hidden",
876
- "padding": 0,
877
- "position": "absolute",
878
- "whiteSpace": "nowrap",
879
- "width": "1px",
880
- }
881
- }
882
- >
883
- <select
884
- onChange={[Function]}
885
- tabIndex={-1}
886
- value="10"
887
- >
888
- <option
889
- value="10"
890
- >
891
- 10
892
- </option>
893
- <option
894
- value="20"
895
- >
896
- 20
897
- </option>
898
- <option
899
- value="30"
900
- >
901
- 30
902
- </option>
903
- </select>
904
- </div>
905
- <button
906
- className="c21"
907
- onClick={[Function]}
908
- type="button"
909
- >
910
- <span
911
- className="c22"
912
- >
913
- Apple
914
- </span>
915
- <pixiv-icon
916
- class="c23"
917
- name="16/Menu"
918
- />
919
- </button>
920
- </div>
921
- </div>
922
- </div>
923
- <div
924
- className="c24"
925
- >
926
- <button
927
- className="c0 c25"
928
- disabled={false}
929
- onClick={[Function]}
930
- >
931
- Apply
932
- </button>
933
- <button
934
- className="c0 c26"
935
- disabled={false}
936
- onClick={[Function]}
937
- >
938
- Cancel
939
- </button>
940
- </div>
941
- </div>
942
- <button
943
- aria-label="Close"
944
- className="c0 c27 c28"
945
- onClick={[Function]}
946
- type="button"
947
- >
948
- <pixiv-icon
949
- aria-hidden="true"
950
- name="24/Close"
951
- />
952
- </button>
953
- </div>
954
- </div>
955
- </div>
956
- </div>
957
- `;
958
-
959
- exports[`Storybook Tests react/Modal BottomSheet 1`] = `
960
- .c0 {
961
- cursor: pointer;
962
- -webkit-appearance: none;
963
- -moz-appearance: none;
964
- appearance: none;
965
- background: transparent;
966
- padding: 0;
967
- border-style: none;
968
- outline: none;
969
- color: inherit;
970
- text-rendering: inherit;
971
- -webkit-letter-spacing: inherit;
972
- -moz-letter-spacing: inherit;
973
- -ms-letter-spacing: inherit;
974
- letter-spacing: inherit;
975
- word-spacing: inherit;
976
- -webkit-text-decoration: none;
977
- text-decoration: none;
978
- font: inherit;
979
- margin: 0;
980
- overflow: visible;
981
- text-transform: none;
982
- }
983
-
984
- .c0:disabled,
985
- .c0[aria-disabled]:not([aria-disabled=false]) {
986
- cursor: default;
987
- }
988
-
989
- .c0:focus {
990
- outline: none;
991
- }
992
-
993
- .c0::-moz-focus-inner {
994
- border-style: none;
995
- padding: 0;
996
- }
997
-
998
- .c1 {
999
- width: -webkit-min-content;
1000
- width: -moz-min-content;
1001
- width: min-content;
1002
- display: inline-grid;
1003
- -webkit-align-items: center;
1004
- -webkit-box-align: center;
1005
- -ms-flex-align: center;
1006
- align-items: center;
1007
- -webkit-box-pack: center;
1008
- -webkit-justify-content: center;
1009
- -ms-flex-pack: center;
1010
- justify-content: center;
1011
- cursor: pointer;
1012
- -webkit-user-select: none;
1013
- -moz-user-select: none;
1014
- -ms-user-select: none;
1015
- user-select: none;
1016
- white-space: nowrap;
1017
- border-radius: 999999px;
1018
- font-size: 14px;
1019
- line-height: 22px;
1020
- font-weight: bold;
1021
- padding-right: 24px;
1022
- padding-left: 24px;
1023
- color: var(--charcoal-text2);
1024
- background-color: var(--charcoal-surface3);
1025
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1026
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1027
- height: 40px;
1028
- }
1029
-
1030
- .c1:not(:disabled):not([aria-disabled]):focus,
1031
- .c1[aria-disabled='false']:focus {
1032
- outline: none;
1033
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1034
- }
1035
-
1036
- .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1037
- .c1[aria-disabled='false']:focus:not(:focus-visible) {
1038
- box-shadow: none;
1039
- }
1040
-
1041
- .c1:not(:disabled):not([aria-disabled]):focus-visible,
1042
- .c1[aria-disabled='false']:focus-visible {
1043
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1044
- }
1045
-
1046
- .c1:not(:disabled):not([aria-disabled]):hover,
1047
- .c1[aria-disabled='false']:hover {
1048
- color: var(--charcoal-text2-hover);
1049
- background-color: var(--charcoal-surface3-hover);
1050
- }
1051
-
1052
- .c1:not(:disabled):not([aria-disabled]):active,
1053
- .c1[aria-disabled='false']:active {
1054
- color: var(--charcoal-text2-press);
1055
- background-color: var(--charcoal-surface3-press);
1056
- }
1057
-
1058
- .c1:disabled,
1059
- .c1[aria-disabled]:not([aria-disabled='false']) {
1060
- opacity: 0.32;
1061
- }
1062
-
1063
- .c12 {
1064
- width: -webkit-fill-available;
1065
- width: -moz-available;
1066
- width: stretch;
1067
- display: inline-grid;
1068
- -webkit-align-items: center;
1069
- -webkit-box-align: center;
1070
- -ms-flex-align: center;
1071
- align-items: center;
1072
- -webkit-box-pack: center;
1073
- -webkit-justify-content: center;
1074
- -ms-flex-pack: center;
1075
- justify-content: center;
1076
- cursor: pointer;
1077
- -webkit-user-select: none;
1078
- -moz-user-select: none;
1079
- -ms-user-select: none;
1080
- user-select: none;
1081
- white-space: nowrap;
1082
- border-radius: 999999px;
1083
- font-size: 14px;
1084
- line-height: 22px;
1085
- font-weight: bold;
1086
- padding-right: 24px;
1087
- padding-left: 24px;
1088
- color: var(--charcoal-text5);
1089
- background-color: var(--charcoal-assertive);
1090
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1091
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1092
- height: 40px;
1093
- }
1094
-
1095
- .c12:not(:disabled):not([aria-disabled]):focus,
1096
- .c12[aria-disabled='false']:focus {
1097
- outline: none;
1098
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1099
- }
1100
-
1101
- .c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1102
- .c12[aria-disabled='false']:focus:not(:focus-visible) {
1103
- box-shadow: none;
1104
- }
1105
-
1106
- .c12:not(:disabled):not([aria-disabled]):focus-visible,
1107
- .c12[aria-disabled='false']:focus-visible {
1108
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1109
- }
1110
-
1111
- .c12:not(:disabled):not([aria-disabled]):hover,
1112
- .c12[aria-disabled='false']:hover {
1113
- color: var(--charcoal-text5-hover);
1114
- background-color: var(--charcoal-assertive-hover);
1115
- }
1116
-
1117
- .c12:not(:disabled):not([aria-disabled]):active,
1118
- .c12[aria-disabled='false']:active {
1119
- color: var(--charcoal-text5-press);
1120
- background-color: var(--charcoal-assertive-press);
1121
- }
1122
-
1123
- .c12:disabled,
1124
- .c12[aria-disabled]:not([aria-disabled='false']) {
1125
- opacity: 0.32;
1126
- }
1127
-
1128
- .c13 {
1129
- -webkit-user-select: none;
1130
- -moz-user-select: none;
1131
- -ms-user-select: none;
1132
- user-select: none;
1133
- width: 32px;
1134
- height: 32px;
1135
- display: -webkit-box;
1136
- display: -webkit-flex;
1137
- display: -ms-flexbox;
1138
- display: flex;
1139
- -webkit-align-items: center;
1140
- -webkit-box-align: center;
1141
- -ms-flex-align: center;
1142
- align-items: center;
1143
- -webkit-box-pack: center;
1144
- -webkit-justify-content: center;
1145
- -ms-flex-pack: center;
1146
- justify-content: center;
1147
- color: var(--charcoal-text3);
1148
- background-color: var(--charcoal-transparent);
1149
- border-radius: 999999px;
1150
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
1151
- transition: 0.2s background-color,0.2s box-shadow;
1152
- }
1153
-
1154
- .c13:not(:disabled):not([aria-disabled]):hover,
1155
- .c13[aria-disabled='false']:hover {
1156
- color: var(--charcoal-text3-hover);
1157
- background-color: var(--charcoal-transparent-hover);
1158
- }
1159
-
1160
- .c13:not(:disabled):not([aria-disabled]):active,
1161
- .c13[aria-disabled='false']:active {
1162
- color: var(--charcoal-text3-press);
1163
- background-color: var(--charcoal-transparent-press);
1164
- }
1165
-
1166
- .c13:not(:disabled):not([aria-disabled]):focus,
1167
- .c13[aria-disabled='false']:focus {
1168
- outline: none;
1169
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1170
- }
1171
-
1172
- .c13:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1173
- .c13[aria-disabled='false']:focus:not(:focus-visible) {
1174
- box-shadow: none;
1175
- }
1176
-
1177
- .c13:not(:disabled):not([aria-disabled]):focus-visible,
1178
- .c13[aria-disabled='false']:focus-visible {
1179
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1180
- }
1181
-
1182
- .c13:disabled,
1183
- .c13[aria-disabled]:not([aria-disabled='false']) {
1184
- opacity: 0.32;
1185
- }
1186
-
1187
- .c3 {
1188
- margin: auto;
1189
- position: relative;
1190
- height: -webkit-fit-content;
1191
- height: -moz-fit-content;
1192
- height: fit-content;
1193
- width: 440px;
1194
- background-color: var(--charcoal-surface1);
1195
- border-radius: 24px;
1196
- }
1197
-
1198
- .c3:focus {
1199
- outline: none;
1200
- }
1201
-
1202
- .c2 {
1203
- z-index: 10;
1204
- overflow: auto;
1205
- display: -webkit-box;
1206
- display: -webkit-flex;
1207
- display: -ms-flexbox;
1208
- display: flex;
1209
- position: fixed;
1210
- top: 0;
1211
- left: 0;
1212
- width: -webkit-fill-available;
1213
- width: -moz-available;
1214
- height: 100%;
1215
- -webkit-box-pack: center;
1216
- -webkit-justify-content: center;
1217
- -ms-flex-pack: center;
1218
- justify-content: center;
1219
- padding: 40px 0;
1220
- box-sizing: border-box;
1221
- background-color: var(--charcoal-surface4);
1222
- }
1223
-
1224
- .c14 {
1225
- position: absolute;
1226
- top: 8px;
1227
- right: 8px;
1228
- color: var(--charcoal-text3);
1229
- -webkit-transition: 0.2s color;
1230
- transition: 0.2s color;
1231
- }
1232
-
1233
- .c14:not(:disabled):not([aria-disabled]):hover,
1234
- .c14[aria-disabled='false']:hover {
1235
- color: var(--charcoal-text3-hover);
1236
- }
1237
-
1238
- .c14:not(:disabled):not([aria-disabled]):active,
1239
- .c14[aria-disabled='false']:active {
1240
- color: var(--charcoal-text3-press);
1241
- }
1242
-
1243
- .c5 {
1244
- margin: 0;
1245
- font-weight: inherit;
1246
- font-size: inherit;
1247
- }
1248
-
1249
- .c4 {
1250
- height: 64px;
1251
- display: grid;
1252
- -webkit-align-content: center;
1253
- -ms-flex-line-pack: center;
1254
- align-content: center;
1255
- -webkit-box-pack: center;
1256
- -webkit-justify-content: center;
1257
- -ms-flex-pack: center;
1258
- justify-content: center;
1259
- }
1260
-
1261
- .c6 {
1262
- color: var(--charcoal-text1);
1263
- font-size: 16px;
1264
- line-height: 24px;
1265
- font-weight: bold;
1266
- display: flow-root;
1267
- }
1268
-
1269
- .c6::before {
1270
- display: block;
1271
- width: 0;
1272
- height: 0;
1273
- content: '';
1274
- margin-top: -4px;
1275
- }
1276
-
1277
- .c6::after {
1278
- display: block;
1279
- width: 0;
1280
- height: 0;
1281
- content: '';
1282
- margin-bottom: -4px;
1283
- }
1284
-
1285
- .c9 {
1286
- padding-left: 16px;
1287
- padding-right: 16px;
1288
- }
1289
-
1290
- .c7 {
1291
- padding-bottom: 40px;
1292
- }
1293
-
1294
- .c11 {
1295
- display: grid;
1296
- grid-auto-flow: row;
1297
- grid-row-gap: 8px;
1298
- padding-top: 16px;
1299
- padding-left: 16px;
1300
- padding-right: 16px;
1301
- }
1302
-
1303
- .c8 {
1304
- display: grid;
1305
- gap: 24px;
1306
- }
1307
-
1308
- .c10 {
1309
- color: var(--charcoal-text2);
1310
- font-size: 14px;
1311
- line-height: 22px;
1312
- display: flow-root;
1313
- }
1314
-
1315
- .c10::before {
1316
- display: block;
1317
- width: 0;
1318
- height: 0;
1319
- content: '';
1320
- margin-top: -4px;
1321
- }
1322
-
1323
- .c10::after {
1324
- display: block;
1325
- width: 0;
1326
- height: 0;
1327
- content: '';
1328
- margin-bottom: -4px;
1329
- }
1330
-
1331
- @media (max-width:743px) {
1332
- .c3 {
1333
- max-width: 440px;
1334
- width: calc(100% - 48px);
1335
- max-width: unset;
1336
- width: 100%;
1337
- border-radius: 0;
1338
- margin: auto 0 0 0;
1339
- }
1340
- }
1341
-
1342
- @media (max-width:743px) {
1343
- .c2 {
1344
- padding: 0;
1345
- }
1346
- }
1347
-
1348
- @media (max-width:743px) {
1349
- .c4 {
1350
- height: 48px;
1351
- }
1352
- }
1353
-
1354
- <div
1355
- data-dark={false}
1356
- >
1357
- <div
1358
- aria-hidden={null}
1359
- data-overlay-container={true}
1360
- >
1361
- <button
1362
- className="c0 c1"
1363
- disabled={false}
1364
- onClick={[Function]}
1365
- >
1366
- Open Modal
1367
- </button>
1368
- <div
1369
- className="c2"
1370
- onClick={[Function]}
1371
- onPointerDown={[Function]}
1372
- style={
1373
- Object {
1374
- "backgroundColor": "rgba(0, 0, 0, 0)",
1375
- "overflow": "hidden",
1376
- }
1377
- }
1378
- >
1379
- <div
1380
- className="c3"
1381
- onBlur={[Function]}
1382
- onKeyDown={[Function]}
1383
- role="dialog"
1384
- size="M"
1385
- style={
1386
- Object {
1387
- "transform": " translateY(100%)",
1388
- }
1389
- }
1390
- tabIndex={-1}
1391
- >
1392
- <div
1393
- className="c4"
1394
- >
1395
- <h3
1396
- className="c5 c6"
1397
- >
1398
- react/Title
1399
- </h3>
1400
- </div>
1401
- <div
1402
- className="c7"
1403
- >
1404
- <div
1405
- className="c8"
1406
- >
1407
- <div
1408
- className="c9 c10"
1409
- >
1410
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
1411
- </div>
1412
- </div>
1413
- <div
1414
- className="c11"
1415
- >
1416
- <button
1417
- className="c0 c12"
1418
- disabled={false}
1419
- onClick={[Function]}
1420
- >
1421
- 削除する
1422
- </button>
1423
- </div>
1424
- </div>
1425
- <button
1426
- aria-label="Close"
1427
- className="c0 c13 c14"
1428
- onClick={[Function]}
1429
- type="button"
1430
- >
1431
- <pixiv-icon
1432
- aria-hidden="true"
1433
- name="24/Close"
1434
- />
1435
- </button>
1436
- </div>
1437
- </div>
1438
- </div>
1439
- </div>
1440
- `;
1441
-
1442
- exports[`Storybook Tests react/Modal Default 1`] = `
1443
- .c0 {
1444
- cursor: pointer;
1445
- -webkit-appearance: none;
1446
- -moz-appearance: none;
1447
- appearance: none;
1448
- background: transparent;
1449
- padding: 0;
1450
- border-style: none;
1451
- outline: none;
1452
- color: inherit;
1453
- text-rendering: inherit;
1454
- -webkit-letter-spacing: inherit;
1455
- -moz-letter-spacing: inherit;
1456
- -ms-letter-spacing: inherit;
1457
- letter-spacing: inherit;
1458
- word-spacing: inherit;
1459
- -webkit-text-decoration: none;
1460
- text-decoration: none;
1461
- font: inherit;
1462
- margin: 0;
1463
- overflow: visible;
1464
- text-transform: none;
1465
- }
1466
-
1467
- .c0:disabled,
1468
- .c0[aria-disabled]:not([aria-disabled=false]) {
1469
- cursor: default;
1470
- }
1471
-
1472
- .c0:focus {
1473
- outline: none;
1474
- }
1475
-
1476
- .c0::-moz-focus-inner {
1477
- border-style: none;
1478
- padding: 0;
1479
- }
1480
-
1481
- .c1 {
1482
- width: -webkit-min-content;
1483
- width: -moz-min-content;
1484
- width: min-content;
1485
- display: inline-grid;
1486
- -webkit-align-items: center;
1487
- -webkit-box-align: center;
1488
- -ms-flex-align: center;
1489
- align-items: center;
1490
- -webkit-box-pack: center;
1491
- -webkit-justify-content: center;
1492
- -ms-flex-pack: center;
1493
- justify-content: center;
1494
- cursor: pointer;
1495
- -webkit-user-select: none;
1496
- -moz-user-select: none;
1497
- -ms-user-select: none;
1498
- user-select: none;
1499
- white-space: nowrap;
1500
- border-radius: 999999px;
1501
- font-size: 14px;
1502
- line-height: 22px;
1503
- font-weight: bold;
1504
- padding-right: 24px;
1505
- padding-left: 24px;
1506
- color: var(--charcoal-text2);
1507
- background-color: var(--charcoal-surface3);
1508
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1509
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1510
- height: 40px;
1511
- }
1512
-
1513
- .c1:not(:disabled):not([aria-disabled]):focus,
1514
- .c1[aria-disabled='false']:focus {
1515
- outline: none;
1516
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1517
- }
1518
-
1519
- .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1520
- .c1[aria-disabled='false']:focus:not(:focus-visible) {
1521
- box-shadow: none;
1522
- }
1523
-
1524
- .c1:not(:disabled):not([aria-disabled]):focus-visible,
1525
- .c1[aria-disabled='false']:focus-visible {
1526
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1527
- }
1528
-
1529
- .c1:not(:disabled):not([aria-disabled]):hover,
1530
- .c1[aria-disabled='false']:hover {
1531
- color: var(--charcoal-text2-hover);
1532
- background-color: var(--charcoal-surface3-hover);
1533
- }
1534
-
1535
- .c1:not(:disabled):not([aria-disabled]):active,
1536
- .c1[aria-disabled='false']:active {
1537
- color: var(--charcoal-text2-press);
1538
- background-color: var(--charcoal-surface3-press);
1539
- }
1540
-
1541
- .c1:disabled,
1542
- .c1[aria-disabled]:not([aria-disabled='false']) {
1543
- opacity: 0.32;
1544
- }
1545
-
1546
- .c25 {
1547
- width: -webkit-fill-available;
1548
- width: -moz-available;
1549
- width: stretch;
1550
- display: inline-grid;
1551
- -webkit-align-items: center;
1552
- -webkit-box-align: center;
1553
- -ms-flex-align: center;
1554
- align-items: center;
1555
- -webkit-box-pack: center;
1556
- -webkit-justify-content: center;
1557
- -ms-flex-pack: center;
1558
- justify-content: center;
1559
- cursor: pointer;
1560
- -webkit-user-select: none;
1561
- -moz-user-select: none;
1562
- -ms-user-select: none;
1563
- user-select: none;
1564
- white-space: nowrap;
1565
- border-radius: 999999px;
1566
- font-size: 14px;
1567
- line-height: 22px;
1568
- font-weight: bold;
1569
- padding-right: 24px;
1570
- padding-left: 24px;
1571
- color: var(--charcoal-text5);
1572
- background-color: var(--charcoal-brand);
1573
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1574
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1575
- height: 40px;
1576
- }
1577
-
1578
- .c25:not(:disabled):not([aria-disabled]):focus,
1579
- .c25[aria-disabled='false']:focus {
1580
- outline: none;
1581
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1582
- }
1583
-
1584
- .c25:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1585
- .c25[aria-disabled='false']:focus:not(:focus-visible) {
1586
- box-shadow: none;
1587
- }
1588
-
1589
- .c25:not(:disabled):not([aria-disabled]):focus-visible,
1590
- .c25[aria-disabled='false']:focus-visible {
1591
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1592
- }
1593
-
1594
- .c25:not(:disabled):not([aria-disabled]):hover,
1595
- .c25[aria-disabled='false']:hover {
1596
- color: var(--charcoal-text5-hover);
1597
- background-color: var(--charcoal-brand-hover);
1598
- }
1599
-
1600
- .c25:not(:disabled):not([aria-disabled]):active,
1601
- .c25[aria-disabled='false']:active {
1602
- color: var(--charcoal-text5-press);
1603
- background-color: var(--charcoal-brand-press);
1604
- }
1605
-
1606
- .c25:disabled,
1607
- .c25[aria-disabled]:not([aria-disabled='false']) {
1608
- opacity: 0.32;
1609
- }
1610
-
1611
- .c26 {
1612
- width: -webkit-fill-available;
1613
- width: -moz-available;
1614
- width: stretch;
1615
- display: inline-grid;
1616
- -webkit-align-items: center;
1617
- -webkit-box-align: center;
1618
- -ms-flex-align: center;
1619
- align-items: center;
1620
- -webkit-box-pack: center;
1621
- -webkit-justify-content: center;
1622
- -ms-flex-pack: center;
1623
- justify-content: center;
1624
- cursor: pointer;
1625
- -webkit-user-select: none;
1626
- -moz-user-select: none;
1627
- -ms-user-select: none;
1628
- user-select: none;
1629
- white-space: nowrap;
1630
- border-radius: 999999px;
1631
- font-size: 14px;
1632
- line-height: 22px;
1633
- font-weight: bold;
1634
- padding-right: 24px;
1635
- padding-left: 24px;
1636
- color: var(--charcoal-text2);
1637
- background-color: var(--charcoal-surface3);
1638
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1639
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
1640
- height: 40px;
1641
- }
1642
-
1643
- .c26:not(:disabled):not([aria-disabled]):focus,
1644
- .c26[aria-disabled='false']:focus {
1645
- outline: none;
1646
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1647
- }
1648
-
1649
- .c26:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1650
- .c26[aria-disabled='false']:focus:not(:focus-visible) {
1651
- box-shadow: none;
1652
- }
1653
-
1654
- .c26:not(:disabled):not([aria-disabled]):focus-visible,
1655
- .c26[aria-disabled='false']:focus-visible {
1656
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1657
- }
1658
-
1659
- .c26:not(:disabled):not([aria-disabled]):hover,
1660
- .c26[aria-disabled='false']:hover {
1661
- color: var(--charcoal-text2-hover);
1662
- background-color: var(--charcoal-surface3-hover);
1663
- }
1664
-
1665
- .c26:not(:disabled):not([aria-disabled]):active,
1666
- .c26[aria-disabled='false']:active {
1667
- color: var(--charcoal-text2-press);
1668
- background-color: var(--charcoal-surface3-press);
1669
- }
1670
-
1671
- .c26:disabled,
1672
- .c26[aria-disabled]:not([aria-disabled='false']) {
1673
- opacity: 0.32;
1674
- }
1675
-
1676
- .c14 {
1677
- font-size: 14px;
1678
- line-height: 22px;
1679
- font-weight: bold;
1680
- display: flow-root;
1681
- color: var(--charcoal-text1);
1682
- }
1683
-
1684
- .c14::before {
1685
- display: block;
1686
- width: 0;
1687
- height: 0;
1688
- content: '';
1689
- margin-top: -4px;
1690
- }
1691
-
1692
- .c14::after {
1693
- display: block;
1694
- width: 0;
1695
- height: 0;
1696
- content: '';
1697
- margin-bottom: -4px;
1698
- }
1699
-
1700
- .c16 {
1701
- font-size: 14px;
1702
- line-height: 22px;
1703
- display: flow-root;
1704
- color: var(--charcoal-text3);
1705
- -webkit-transition: 0.2s color,0.2s box-shadow;
1706
- transition: 0.2s color,0.2s box-shadow;
1707
- }
1708
-
1709
- .c16::before {
1710
- display: block;
1711
- width: 0;
1712
- height: 0;
1713
- content: '';
1714
- margin-top: -4px;
1715
- }
1716
-
1717
- .c16::after {
1718
- display: block;
1719
- width: 0;
1720
- height: 0;
1721
- content: '';
1722
- margin-bottom: -4px;
1723
- }
1724
-
1725
- .c16:not(:disabled):not([aria-disabled]):hover,
1726
- .c16[aria-disabled='false']:hover {
1727
- color: var(--charcoal-text3-hover);
1728
- }
1729
-
1730
- .c16:not(:disabled):not([aria-disabled]):active,
1731
- .c16[aria-disabled='false']:active {
1732
- color: var(--charcoal-text3-press);
1733
- }
1734
-
1735
- .c16:not(:disabled):not([aria-disabled]):active,
1736
- .c16[aria-disabled='false']:active,
1737
- .c16:not(:disabled):not([aria-disabled]):focus,
1738
- .c16[aria-disabled='false']:focus,
1739
- .c16:not(:disabled):not([aria-disabled]):focus-visible,
1740
- .c16[aria-disabled='false']:focus-visible {
1741
- outline: none;
1742
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1743
- }
1744
-
1745
- .c12 {
1746
- display: -webkit-inline-box;
1747
- display: -webkit-inline-flex;
1748
- display: -ms-inline-flexbox;
1749
- display: inline-flex;
1750
- -webkit-align-items: center;
1751
- -webkit-box-align: center;
1752
- -ms-flex-align: center;
1753
- align-items: center;
1754
- }
1755
-
1756
- .c12 > .c15 {
1757
- margin-left: auto;
1758
- }
1759
-
1760
- .c19 {
1761
- display: inline-block;
1762
- width: 100%;
1763
- }
1764
-
1765
- .c19:disabled,
1766
- .c19[aria-disabled]:not([aria-disabled=false]) {
1767
- cursor: default;
1768
- opacity: 0.32;
1769
- }
1770
-
1771
- .c20 {
1772
- width: 100%;
1773
- margin-bottom: 8px;
1774
- }
1775
-
1776
- .c21 {
1777
- display: -webkit-box;
1778
- display: -webkit-flex;
1779
- display: -ms-flexbox;
1780
- display: flex;
1781
- -webkit-box-pack: justify;
1782
- -webkit-justify-content: space-between;
1783
- -ms-flex-pack: justify;
1784
- justify-content: space-between;
1785
- -webkit-align-items: center;
1786
- -webkit-box-align: center;
1787
- -ms-flex-align: center;
1788
- align-items: center;
1789
- height: 40px;
1790
- width: 100%;
1791
- box-sizing: border-box;
1792
- border: none;
1793
- cursor: pointer;
1794
- gap: 4px;
1795
- padding-right: 8px;
1796
- padding-left: 8px;
1797
- background-color: var(--charcoal-surface3);
1798
- border-radius: 4px;
1799
- -webkit-transition: 0.2s box-shadow,0.2s background-color;
1800
- transition: 0.2s box-shadow,0.2s background-color;
1801
- }
1802
-
1803
- .c21:disabled,
1804
- .c21[aria-disabled]:not([aria-disabled=false]) {
1805
- cursor: default;
1806
- }
1807
-
1808
- .c21:not(:disabled):not([aria-disabled]):focus,
1809
- .c21[aria-disabled='false']:focus {
1810
- outline: none;
1811
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1812
- }
1813
-
1814
- .c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1815
- .c21[aria-disabled='false']:focus:not(:focus-visible) {
1816
- box-shadow: none;
1817
- }
1818
-
1819
- .c21:not(:disabled):not([aria-disabled]):focus-visible,
1820
- .c21[aria-disabled='false']:focus-visible {
1821
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1822
- }
1823
-
1824
- .c21:not(:disabled):not([aria-disabled]):hover,
1825
- .c21[aria-disabled='false']:hover {
1826
- background-color: var(--charcoal-surface3-hover);
1827
- }
1828
-
1829
- .c21:not(:disabled):not([aria-disabled]):active,
1830
- .c21[aria-disabled='false']:active {
1831
- background-color: var(--charcoal-surface3-press);
1832
- }
1833
-
1834
- .c22 {
1835
- text-align: left;
1836
- font-size: 14px;
1837
- line-height: 22px;
1838
- display: flow-root;
1839
- color: var(--charcoal-text2);
1840
- overflow: hidden;
1841
- text-overflow: ellipsis;
1842
- white-space: nowrap;
1843
- }
1844
-
1845
- .c23 {
1846
- color: var(--charcoal-text2);
1847
- }
1848
-
1849
- .c27 {
1850
- -webkit-user-select: none;
1851
- -moz-user-select: none;
1852
- -ms-user-select: none;
1853
- user-select: none;
1854
- width: 32px;
1855
- height: 32px;
1856
- display: -webkit-box;
1857
- display: -webkit-flex;
1858
- display: -ms-flexbox;
1859
- display: flex;
1860
- -webkit-align-items: center;
1861
- -webkit-box-align: center;
1862
- -ms-flex-align: center;
1863
- align-items: center;
1864
- -webkit-box-pack: center;
1865
- -webkit-justify-content: center;
1866
- -ms-flex-pack: center;
1867
- justify-content: center;
1868
- color: var(--charcoal-text3);
1869
- background-color: var(--charcoal-transparent);
1870
- border-radius: 999999px;
1871
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
1872
- transition: 0.2s background-color,0.2s box-shadow;
1873
- }
1874
-
1875
- .c27:not(:disabled):not([aria-disabled]):hover,
1876
- .c27[aria-disabled='false']:hover {
1877
- color: var(--charcoal-text3-hover);
1878
- background-color: var(--charcoal-transparent-hover);
1879
- }
1880
-
1881
- .c27:not(:disabled):not([aria-disabled]):active,
1882
- .c27[aria-disabled='false']:active {
1883
- color: var(--charcoal-text3-press);
1884
- background-color: var(--charcoal-transparent-press);
1885
- }
1886
-
1887
- .c27:not(:disabled):not([aria-disabled]):focus,
1888
- .c27[aria-disabled='false']:focus {
1889
- outline: none;
1890
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1891
- }
1892
-
1893
- .c27:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
1894
- .c27[aria-disabled='false']:focus:not(:focus-visible) {
1895
- box-shadow: none;
1896
- }
1897
-
1898
- .c27:not(:disabled):not([aria-disabled]):focus-visible,
1899
- .c27[aria-disabled='false']:focus-visible {
1900
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
1901
- }
1902
-
1903
- .c27:disabled,
1904
- .c27[aria-disabled]:not([aria-disabled='false']) {
1905
- opacity: 0.32;
1906
- }
1907
-
1908
- .c3 {
1909
- margin: auto;
1910
- position: relative;
1911
- height: -webkit-fit-content;
1912
- height: -moz-fit-content;
1913
- height: fit-content;
1914
- width: 440px;
1915
- background-color: var(--charcoal-surface1);
1916
- border-radius: 24px;
1917
- }
1918
-
1919
- .c3:focus {
1920
- outline: none;
1921
- }
1922
-
1923
- .c2 {
1924
- z-index: 10;
1925
- overflow: auto;
1926
- display: -webkit-box;
1927
- display: -webkit-flex;
1928
- display: -ms-flexbox;
1929
- display: flex;
1930
- position: fixed;
1931
- top: 0;
1932
- left: 0;
1933
- width: -webkit-fill-available;
1934
- width: -moz-available;
1935
- height: 100%;
1936
- -webkit-box-pack: center;
1937
- -webkit-justify-content: center;
1938
- -ms-flex-pack: center;
1939
- justify-content: center;
1940
- padding: 40px 0;
1941
- box-sizing: border-box;
1942
- background-color: var(--charcoal-surface4);
1943
- }
1944
-
1945
- .c28 {
1946
- position: absolute;
1947
- top: 8px;
1948
- right: 8px;
1949
- color: var(--charcoal-text3);
1950
- -webkit-transition: 0.2s color;
1951
- transition: 0.2s color;
1952
- }
1953
-
1954
- .c28:not(:disabled):not([aria-disabled]):hover,
1955
- .c28[aria-disabled='false']:hover {
1956
- color: var(--charcoal-text3-hover);
1957
- }
1958
-
1959
- .c28:not(:disabled):not([aria-disabled]):active,
1960
- .c28[aria-disabled='false']:active {
1961
- color: var(--charcoal-text3-press);
1962
- }
1963
-
1964
- .c5 {
1965
- margin: 0;
1966
- font-weight: inherit;
1967
- font-size: inherit;
1968
- }
1969
-
1970
- .c4 {
1971
- height: 64px;
1972
- display: grid;
1973
- -webkit-align-content: center;
1974
- -ms-flex-line-pack: center;
1975
- align-content: center;
1976
- -webkit-box-pack: center;
1977
- -webkit-justify-content: center;
1978
- -ms-flex-pack: center;
1979
- justify-content: center;
1980
- }
1981
-
1982
- .c6 {
1983
- color: var(--charcoal-text1);
1984
- font-size: 16px;
1985
- line-height: 24px;
1986
- font-weight: bold;
1987
- display: flow-root;
1988
- }
1989
-
1990
- .c6::before {
1991
- display: block;
1992
- width: 0;
1993
- height: 0;
1994
- content: '';
1995
- margin-top: -4px;
1996
- }
1997
-
1998
- .c6::after {
1999
- display: block;
2000
- width: 0;
2001
- height: 0;
2002
- content: '';
2003
- margin-bottom: -4px;
2004
- }
2005
-
2006
- .c9 {
2007
- padding-left: 16px;
2008
- padding-right: 16px;
2009
- }
2010
-
2011
- .c7 {
2012
- padding-bottom: 40px;
2013
- }
2014
-
2015
- .c24 {
2016
- display: grid;
2017
- grid-auto-flow: row;
2018
- grid-row-gap: 8px;
2019
- padding-top: 16px;
2020
- padding-left: 16px;
2021
- padding-right: 16px;
2022
- }
2023
-
2024
- .c11 {
2025
- display: -webkit-box;
2026
- display: -webkit-flex;
2027
- display: -ms-flexbox;
2028
- display: flex;
2029
- -webkit-flex-direction: column;
2030
- -ms-flex-direction: column;
2031
- flex-direction: column;
2032
- }
2033
-
2034
- .c13 {
2035
- margin-bottom: 8px;
2036
- }
2037
-
2038
- .c17 {
2039
- display: grid;
2040
- grid-template-columns: 1fr;
2041
- height: 40px;
2042
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
2043
- transition: 0.2s background-color,0.2s box-shadow;
2044
- color: var(--charcoal-text2);
2045
- background-color: var(--charcoal-surface3);
2046
- border-radius: 4px;
2047
- gap: 4px;
2048
- padding: 0 8px;
2049
- line-height: 22px;
2050
- font-size: 14px;
2051
- }
2052
-
2053
- .c17:not(:disabled):not([aria-disabled]):hover,
2054
- .c17 [aria-disabled='false']:hover {
2055
- background-color: var(--charcoal-surface3-hover);
2056
- }
2057
-
2058
- .c17:focus-within {
2059
- outline: none;
2060
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2061
- }
2062
-
2063
- .c18 {
2064
- border: none;
2065
- box-sizing: border-box;
2066
- outline: none;
2067
- font-family: inherit;
2068
- -webkit-transform-origin: top left;
2069
- -ms-transform-origin: top left;
2070
- transform-origin: top left;
2071
- -webkit-transform: scale(0.875);
2072
- -ms-transform: scale(0.875);
2073
- transform: scale(0.875);
2074
- width: calc(100% / 0.875);
2075
- height: calc(100% / 0.875);
2076
- font-size: calc(14px / 0.875);
2077
- line-height: calc(22px / 0.875);
2078
- padding-left: 0;
2079
- padding-right: 0;
2080
- border-radius: calc(4px / 0.875);
2081
- -webkit-appearance: none;
2082
- -moz-appearance: none;
2083
- appearance: none;
2084
- background: transparent;
2085
- color: var(--charcoal-text2);
2086
- }
2087
-
2088
- .c18::-webkit-input-placeholder {
2089
- color: var(--charcoal-text3);
2090
- }
2091
-
2092
- .c18::-moz-placeholder {
2093
- color: var(--charcoal-text3);
2094
- }
2095
-
2096
- .c18:-ms-input-placeholder {
2097
- color: var(--charcoal-text3);
2098
- }
2099
-
2100
- .c18::placeholder {
2101
- color: var(--charcoal-text3);
2102
- }
2103
-
2104
- .c8 {
2105
- display: grid;
2106
- gap: 24px;
2107
- }
2108
-
2109
- .c10 {
2110
- color: var(--charcoal-text2);
2111
- font-size: 14px;
2112
- line-height: 22px;
2113
- display: flow-root;
2114
- }
2115
-
2116
- .c10::before {
2117
- display: block;
2118
- width: 0;
2119
- height: 0;
2120
- content: '';
2121
- margin-top: -4px;
2122
- }
2123
-
2124
- .c10::after {
2125
- display: block;
2126
- width: 0;
2127
- height: 0;
2128
- content: '';
2129
- margin-bottom: -4px;
2130
- }
2131
-
2132
- @media (max-width:743px) {
2133
- .c3 {
2134
- max-width: 440px;
2135
- width: calc(100% - 48px);
2136
- }
2137
- }
2138
-
2139
- @media (max-width:743px) {
2140
-
2141
- }
2142
-
2143
- @media (max-width:743px) {
2144
-
2145
- }
2146
-
2147
- <div
2148
- data-dark={false}
2149
- >
2150
- <div
2151
- aria-hidden={null}
2152
- data-overlay-container={true}
2153
- >
2154
- <button
2155
- className="c0 c1"
2156
- disabled={false}
2157
- onClick={[Function]}
2158
- >
2159
- Open Modal
2160
- </button>
2161
- <div
2162
- className="c2"
2163
- onClick={[Function]}
2164
- onPointerDown={[Function]}
2165
- style={Object {}}
2166
- >
2167
- <div
2168
- className="c3"
2169
- onBlur={[Function]}
2170
- onKeyDown={[Function]}
2171
- role="dialog"
2172
- size="M"
2173
- style={Object {}}
2174
- tabIndex={-1}
2175
- >
2176
- <div
2177
- className="c4"
2178
- >
2179
- <h3
2180
- className="c5 c6"
2181
- >
2182
- react/Title
2183
- </h3>
2184
- </div>
2185
- <div
2186
- className="c7"
2187
- >
2188
- <div
2189
- className="c8"
2190
- >
2191
- <div
2192
- className="c9 c10"
2193
- >
2194
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
2195
- </div>
2196
- <div
2197
- className="c9"
2198
- >
2199
- <div
2200
- className="c11"
2201
- >
2202
- <div
2203
- className="c12 c13"
2204
- >
2205
- <label
2206
- className="c14"
2207
- htmlFor="test-id"
2208
- id="test-id"
2209
- >
2210
- Name
2211
- </label>
2212
- <div
2213
- className="c15 c16"
2214
- >
2215
- <span />
2216
- </div>
2217
- </div>
2218
- <div
2219
- className="c17"
2220
- >
2221
- <input
2222
- aria-labelledby="test-id"
2223
- className="c18"
2224
- disabled={false}
2225
- id="test-id"
2226
- onChange={[Function]}
2227
- placeholder="Nagisa"
2228
- readOnly={false}
2229
- required={false}
2230
- type="text"
2231
- value=""
2232
- />
2233
- </div>
2234
- </div>
2235
- </div>
2236
- <div
2237
- className="c9"
2238
- >
2239
- <div
2240
- className="c11"
2241
- >
2242
- <div
2243
- className="c12 c13"
2244
- >
2245
- <label
2246
- className="c14"
2247
- htmlFor="test-id"
2248
- id="test-id"
2249
- >
2250
- Country
2251
- </label>
2252
- <div
2253
- className="c15 c16"
2254
- >
2255
- <span />
2256
- </div>
2257
- </div>
2258
- <div
2259
- className="c17"
2260
- >
2261
- <input
2262
- aria-labelledby="test-id"
2263
- autoFocus={true}
2264
- className="c18"
2265
- disabled={false}
2266
- id="test-id"
2267
- onChange={[Function]}
2268
- placeholder="Tokyo"
2269
- readOnly={false}
2270
- required={false}
2271
- type="text"
2272
- value=""
2273
- />
2274
- </div>
2275
- </div>
2276
- </div>
2277
- <div
2278
- className="c9"
2279
- >
2280
- <div
2281
- className="c19"
2282
- >
2283
- <div
2284
- className="c12 c20"
2285
- >
2286
- <label
2287
- className="c14"
2288
- >
2289
- Fruits
2290
- </label>
2291
- <div
2292
- className="c15 c16"
2293
- >
2294
- <span />
2295
- </div>
2296
- </div>
2297
- <div
2298
- aria-hidden="true"
2299
- style={
2300
- Object {
2301
- "border": 0,
2302
- "clip": "rect(0 0 0 0)",
2303
- "clipPath": "inset(50%)",
2304
- "height": "1px",
2305
- "margin": "-1px",
2306
- "overflow": "hidden",
2307
- "padding": 0,
2308
- "position": "absolute",
2309
- "whiteSpace": "nowrap",
2310
- "width": "1px",
2311
- }
2312
- }
2313
- >
2314
- <select
2315
- onChange={[Function]}
2316
- tabIndex={-1}
2317
- value="10"
2318
- >
2319
- <option
2320
- value="10"
2321
- >
2322
- 10
2323
- </option>
2324
- <option
2325
- value="20"
2326
- >
2327
- 20
2328
- </option>
2329
- <option
2330
- value="30"
2331
- >
2332
- 30
2333
- </option>
2334
- </select>
2335
- </div>
2336
- <button
2337
- className="c21"
2338
- onClick={[Function]}
2339
- type="button"
2340
- >
2341
- <span
2342
- className="c22"
2343
- >
2344
- Apple
2345
- </span>
2346
- <pixiv-icon
2347
- class="c23"
2348
- name="16/Menu"
2349
- />
2350
- </button>
2351
- </div>
2352
- </div>
2353
- </div>
2354
- <div
2355
- className="c24"
2356
- >
2357
- <button
2358
- className="c0 c25"
2359
- disabled={false}
2360
- onClick={[Function]}
2361
- >
2362
- Apply
2363
- </button>
2364
- <button
2365
- className="c0 c26"
2366
- disabled={false}
2367
- onClick={[Function]}
2368
- >
2369
- Cancel
2370
- </button>
2371
- </div>
2372
- </div>
2373
- <button
2374
- aria-label="Close"
2375
- className="c0 c27 c28"
2376
- onClick={[Function]}
2377
- type="button"
2378
- >
2379
- <pixiv-icon
2380
- aria-hidden="true"
2381
- name="24/Close"
2382
- />
2383
- </button>
2384
- </div>
2385
- </div>
2386
- </div>
2387
- </div>
2388
- `;
2389
-
2390
- exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
2391
- .c0 {
2392
- cursor: pointer;
2393
- -webkit-appearance: none;
2394
- -moz-appearance: none;
2395
- appearance: none;
2396
- background: transparent;
2397
- padding: 0;
2398
- border-style: none;
2399
- outline: none;
2400
- color: inherit;
2401
- text-rendering: inherit;
2402
- -webkit-letter-spacing: inherit;
2403
- -moz-letter-spacing: inherit;
2404
- -ms-letter-spacing: inherit;
2405
- letter-spacing: inherit;
2406
- word-spacing: inherit;
2407
- -webkit-text-decoration: none;
2408
- text-decoration: none;
2409
- font: inherit;
2410
- margin: 0;
2411
- overflow: visible;
2412
- text-transform: none;
2413
- }
2414
-
2415
- .c0:disabled,
2416
- .c0[aria-disabled]:not([aria-disabled=false]) {
2417
- cursor: default;
2418
- }
2419
-
2420
- .c0:focus {
2421
- outline: none;
2422
- }
2423
-
2424
- .c0::-moz-focus-inner {
2425
- border-style: none;
2426
- padding: 0;
2427
- }
2428
-
2429
- .c1 {
2430
- width: -webkit-min-content;
2431
- width: -moz-min-content;
2432
- width: min-content;
2433
- display: inline-grid;
2434
- -webkit-align-items: center;
2435
- -webkit-box-align: center;
2436
- -ms-flex-align: center;
2437
- align-items: center;
2438
- -webkit-box-pack: center;
2439
- -webkit-justify-content: center;
2440
- -ms-flex-pack: center;
2441
- justify-content: center;
2442
- cursor: pointer;
2443
- -webkit-user-select: none;
2444
- -moz-user-select: none;
2445
- -ms-user-select: none;
2446
- user-select: none;
2447
- white-space: nowrap;
2448
- border-radius: 999999px;
2449
- font-size: 14px;
2450
- line-height: 22px;
2451
- font-weight: bold;
2452
- padding-right: 24px;
2453
- padding-left: 24px;
2454
- color: var(--charcoal-text2);
2455
- background-color: var(--charcoal-surface3);
2456
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
2457
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
2458
- height: 40px;
2459
- }
2460
-
2461
- .c1:not(:disabled):not([aria-disabled]):focus,
2462
- .c1[aria-disabled='false']:focus {
2463
- outline: none;
2464
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2465
- }
2466
-
2467
- .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
2468
- .c1[aria-disabled='false']:focus:not(:focus-visible) {
2469
- box-shadow: none;
2470
- }
2471
-
2472
- .c1:not(:disabled):not([aria-disabled]):focus-visible,
2473
- .c1[aria-disabled='false']:focus-visible {
2474
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2475
- }
2476
-
2477
- .c1:not(:disabled):not([aria-disabled]):hover,
2478
- .c1[aria-disabled='false']:hover {
2479
- color: var(--charcoal-text2-hover);
2480
- background-color: var(--charcoal-surface3-hover);
2481
- }
2482
-
2483
- .c1:not(:disabled):not([aria-disabled]):active,
2484
- .c1[aria-disabled='false']:active {
2485
- color: var(--charcoal-text2-press);
2486
- background-color: var(--charcoal-surface3-press);
2487
- }
2488
-
2489
- .c1:disabled,
2490
- .c1[aria-disabled]:not([aria-disabled='false']) {
2491
- opacity: 0.32;
2492
- }
2493
-
2494
- .c20 {
2495
- width: -webkit-fill-available;
2496
- width: -moz-available;
2497
- width: stretch;
2498
- display: inline-grid;
2499
- -webkit-align-items: center;
2500
- -webkit-box-align: center;
2501
- -ms-flex-align: center;
2502
- align-items: center;
2503
- -webkit-box-pack: center;
2504
- -webkit-justify-content: center;
2505
- -ms-flex-pack: center;
2506
- justify-content: center;
2507
- cursor: pointer;
2508
- -webkit-user-select: none;
2509
- -moz-user-select: none;
2510
- -ms-user-select: none;
2511
- user-select: none;
2512
- white-space: nowrap;
2513
- border-radius: 999999px;
2514
- font-size: 14px;
2515
- line-height: 22px;
2516
- font-weight: bold;
2517
- padding-right: 24px;
2518
- padding-left: 24px;
2519
- color: var(--charcoal-text5);
2520
- background-color: var(--charcoal-brand);
2521
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
2522
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
2523
- height: 40px;
2524
- }
2525
-
2526
- .c20:not(:disabled):not([aria-disabled]):focus,
2527
- .c20[aria-disabled='false']:focus {
2528
- outline: none;
2529
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2530
- }
2531
-
2532
- .c20:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
2533
- .c20[aria-disabled='false']:focus:not(:focus-visible) {
2534
- box-shadow: none;
2535
- }
2536
-
2537
- .c20:not(:disabled):not([aria-disabled]):focus-visible,
2538
- .c20[aria-disabled='false']:focus-visible {
2539
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2540
- }
2541
-
2542
- .c20:not(:disabled):not([aria-disabled]):hover,
2543
- .c20[aria-disabled='false']:hover {
2544
- color: var(--charcoal-text5-hover);
2545
- background-color: var(--charcoal-brand-hover);
2546
- }
2547
-
2548
- .c20:not(:disabled):not([aria-disabled]):active,
2549
- .c20[aria-disabled='false']:active {
2550
- color: var(--charcoal-text5-press);
2551
- background-color: var(--charcoal-brand-press);
2552
- }
2553
-
2554
- .c20:disabled,
2555
- .c20[aria-disabled]:not([aria-disabled='false']) {
2556
- opacity: 0.32;
2557
- }
2558
-
2559
- .c21 {
2560
- width: -webkit-fill-available;
2561
- width: -moz-available;
2562
- width: stretch;
2563
- display: inline-grid;
2564
- -webkit-align-items: center;
2565
- -webkit-box-align: center;
2566
- -ms-flex-align: center;
2567
- align-items: center;
2568
- -webkit-box-pack: center;
2569
- -webkit-justify-content: center;
2570
- -ms-flex-pack: center;
2571
- justify-content: center;
2572
- cursor: pointer;
2573
- -webkit-user-select: none;
2574
- -moz-user-select: none;
2575
- -ms-user-select: none;
2576
- user-select: none;
2577
- white-space: nowrap;
2578
- border-radius: 999999px;
2579
- font-size: 14px;
2580
- line-height: 22px;
2581
- font-weight: bold;
2582
- padding-right: 24px;
2583
- padding-left: 24px;
2584
- color: var(--charcoal-text2);
2585
- background-color: var(--charcoal-surface3);
2586
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
2587
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
2588
- height: 40px;
2589
- }
2590
-
2591
- .c21:not(:disabled):not([aria-disabled]):focus,
2592
- .c21[aria-disabled='false']:focus {
2593
- outline: none;
2594
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2595
- }
2596
-
2597
- .c21:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
2598
- .c21[aria-disabled='false']:focus:not(:focus-visible) {
2599
- box-shadow: none;
2600
- }
2601
-
2602
- .c21:not(:disabled):not([aria-disabled]):focus-visible,
2603
- .c21[aria-disabled='false']:focus-visible {
2604
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2605
- }
2606
-
2607
- .c21:not(:disabled):not([aria-disabled]):hover,
2608
- .c21[aria-disabled='false']:hover {
2609
- color: var(--charcoal-text2-hover);
2610
- background-color: var(--charcoal-surface3-hover);
2611
- }
2612
-
2613
- .c21:not(:disabled):not([aria-disabled]):active,
2614
- .c21[aria-disabled='false']:active {
2615
- color: var(--charcoal-text2-press);
2616
- background-color: var(--charcoal-surface3-press);
2617
- }
2618
-
2619
- .c21:disabled,
2620
- .c21[aria-disabled]:not([aria-disabled='false']) {
2621
- opacity: 0.32;
2622
- }
2623
-
2624
- .c14 {
2625
- font-size: 14px;
2626
- line-height: 22px;
2627
- font-weight: bold;
2628
- display: flow-root;
2629
- color: var(--charcoal-text1);
2630
- }
2631
-
2632
- .c14::before {
2633
- display: block;
2634
- width: 0;
2635
- height: 0;
2636
- content: '';
2637
- margin-top: -4px;
2638
- }
2639
-
2640
- .c14::after {
2641
- display: block;
2642
- width: 0;
2643
- height: 0;
2644
- content: '';
2645
- margin-bottom: -4px;
2646
- }
2647
-
2648
- .c16 {
2649
- font-size: 14px;
2650
- line-height: 22px;
2651
- display: flow-root;
2652
- color: var(--charcoal-text3);
2653
- -webkit-transition: 0.2s color,0.2s box-shadow;
2654
- transition: 0.2s color,0.2s box-shadow;
2655
- }
2656
-
2657
- .c16::before {
2658
- display: block;
2659
- width: 0;
2660
- height: 0;
2661
- content: '';
2662
- margin-top: -4px;
2663
- }
2664
-
2665
- .c16::after {
2666
- display: block;
2667
- width: 0;
2668
- height: 0;
2669
- content: '';
2670
- margin-bottom: -4px;
2671
- }
2672
-
2673
- .c16:not(:disabled):not([aria-disabled]):hover,
2674
- .c16[aria-disabled='false']:hover {
2675
- color: var(--charcoal-text3-hover);
2676
- }
2677
-
2678
- .c16:not(:disabled):not([aria-disabled]):active,
2679
- .c16[aria-disabled='false']:active {
2680
- color: var(--charcoal-text3-press);
2681
- }
2682
-
2683
- .c16:not(:disabled):not([aria-disabled]):active,
2684
- .c16[aria-disabled='false']:active,
2685
- .c16:not(:disabled):not([aria-disabled]):focus,
2686
- .c16[aria-disabled='false']:focus,
2687
- .c16:not(:disabled):not([aria-disabled]):focus-visible,
2688
- .c16[aria-disabled='false']:focus-visible {
2689
- outline: none;
2690
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2691
- }
2692
-
2693
- .c12 {
2694
- display: -webkit-inline-box;
2695
- display: -webkit-inline-flex;
2696
- display: -ms-inline-flexbox;
2697
- display: inline-flex;
2698
- -webkit-align-items: center;
2699
- -webkit-box-align: center;
2700
- -ms-flex-align: center;
2701
- align-items: center;
2702
- }
2703
-
2704
- .c12 > .c15 {
2705
- margin-left: auto;
2706
- }
2707
-
2708
- .c22 {
2709
- -webkit-user-select: none;
2710
- -moz-user-select: none;
2711
- -ms-user-select: none;
2712
- user-select: none;
2713
- width: 32px;
2714
- height: 32px;
2715
- display: -webkit-box;
2716
- display: -webkit-flex;
2717
- display: -ms-flexbox;
2718
- display: flex;
2719
- -webkit-align-items: center;
2720
- -webkit-box-align: center;
2721
- -ms-flex-align: center;
2722
- align-items: center;
2723
- -webkit-box-pack: center;
2724
- -webkit-justify-content: center;
2725
- -ms-flex-pack: center;
2726
- justify-content: center;
2727
- color: var(--charcoal-text3);
2728
- background-color: var(--charcoal-transparent);
2729
- border-radius: 999999px;
2730
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
2731
- transition: 0.2s background-color,0.2s box-shadow;
2732
- }
2733
-
2734
- .c22:not(:disabled):not([aria-disabled]):hover,
2735
- .c22[aria-disabled='false']:hover {
2736
- color: var(--charcoal-text3-hover);
2737
- background-color: var(--charcoal-transparent-hover);
2738
- }
2739
-
2740
- .c22:not(:disabled):not([aria-disabled]):active,
2741
- .c22[aria-disabled='false']:active {
2742
- color: var(--charcoal-text3-press);
2743
- background-color: var(--charcoal-transparent-press);
2744
- }
2745
-
2746
- .c22:not(:disabled):not([aria-disabled]):focus,
2747
- .c22[aria-disabled='false']:focus {
2748
- outline: none;
2749
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2750
- }
2751
-
2752
- .c22:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
2753
- .c22[aria-disabled='false']:focus:not(:focus-visible) {
2754
- box-shadow: none;
2755
- }
2756
-
2757
- .c22:not(:disabled):not([aria-disabled]):focus-visible,
2758
- .c22[aria-disabled='false']:focus-visible {
2759
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2760
- }
2761
-
2762
- .c22:disabled,
2763
- .c22[aria-disabled]:not([aria-disabled='false']) {
2764
- opacity: 0.32;
2765
- }
2766
-
2767
- .c3 {
2768
- margin: auto;
2769
- position: relative;
2770
- height: -webkit-fit-content;
2771
- height: -moz-fit-content;
2772
- height: fit-content;
2773
- width: 440px;
2774
- background-color: var(--charcoal-surface1);
2775
- border-radius: 24px;
2776
- }
2777
-
2778
- .c3:focus {
2779
- outline: none;
2780
- }
2781
-
2782
- .c2 {
2783
- z-index: 10;
2784
- overflow: auto;
2785
- display: -webkit-box;
2786
- display: -webkit-flex;
2787
- display: -ms-flexbox;
2788
- display: flex;
2789
- position: fixed;
2790
- top: 0;
2791
- left: 0;
2792
- width: -webkit-fill-available;
2793
- width: -moz-available;
2794
- height: 100%;
2795
- -webkit-box-pack: center;
2796
- -webkit-justify-content: center;
2797
- -ms-flex-pack: center;
2798
- justify-content: center;
2799
- padding: 40px 0;
2800
- box-sizing: border-box;
2801
- background-color: var(--charcoal-surface4);
2802
- }
2803
-
2804
- .c23 {
2805
- position: absolute;
2806
- top: 8px;
2807
- right: 8px;
2808
- color: var(--charcoal-text3);
2809
- -webkit-transition: 0.2s color;
2810
- transition: 0.2s color;
2811
- }
2812
-
2813
- .c23:not(:disabled):not([aria-disabled]):hover,
2814
- .c23[aria-disabled='false']:hover {
2815
- color: var(--charcoal-text3-hover);
2816
- }
2817
-
2818
- .c23:not(:disabled):not([aria-disabled]):active,
2819
- .c23[aria-disabled='false']:active {
2820
- color: var(--charcoal-text3-press);
2821
- }
2822
-
2823
- .c5 {
2824
- margin: 0;
2825
- font-weight: inherit;
2826
- font-size: inherit;
2827
- }
2828
-
2829
- .c4 {
2830
- height: 64px;
2831
- display: grid;
2832
- -webkit-align-content: center;
2833
- -ms-flex-line-pack: center;
2834
- align-content: center;
2835
- -webkit-box-pack: center;
2836
- -webkit-justify-content: center;
2837
- -ms-flex-pack: center;
2838
- justify-content: center;
2839
- }
2840
-
2841
- .c6 {
2842
- color: var(--charcoal-text1);
2843
- font-size: 16px;
2844
- line-height: 24px;
2845
- font-weight: bold;
2846
- display: flow-root;
2847
- }
2848
-
2849
- .c6::before {
2850
- display: block;
2851
- width: 0;
2852
- height: 0;
2853
- content: '';
2854
- margin-top: -4px;
2855
- }
2856
-
2857
- .c6::after {
2858
- display: block;
2859
- width: 0;
2860
- height: 0;
2861
- content: '';
2862
- margin-bottom: -4px;
2863
- }
2864
-
2865
- .c9 {
2866
- padding-left: 16px;
2867
- padding-right: 16px;
2868
- }
2869
-
2870
- .c7 {
2871
- padding-bottom: 40px;
2872
- }
2873
-
2874
- .c19 {
2875
- display: grid;
2876
- grid-auto-flow: row;
2877
- grid-row-gap: 8px;
2878
- padding-top: 16px;
2879
- padding-left: 16px;
2880
- padding-right: 16px;
2881
- }
2882
-
2883
- .c11 {
2884
- display: -webkit-box;
2885
- display: -webkit-flex;
2886
- display: -ms-flexbox;
2887
- display: flex;
2888
- -webkit-flex-direction: column;
2889
- -ms-flex-direction: column;
2890
- flex-direction: column;
2891
- }
2892
-
2893
- .c13 {
2894
- margin-bottom: 8px;
2895
- }
2896
-
2897
- .c17 {
2898
- display: grid;
2899
- grid-template-columns: 1fr;
2900
- height: 40px;
2901
- -webkit-transition: 0.2s background-color,0.2s box-shadow;
2902
- transition: 0.2s background-color,0.2s box-shadow;
2903
- color: var(--charcoal-text2);
2904
- background-color: var(--charcoal-surface3);
2905
- border-radius: 4px;
2906
- gap: 4px;
2907
- padding: 0 8px;
2908
- line-height: 22px;
2909
- font-size: 14px;
2910
- }
2911
-
2912
- .c17:not(:disabled):not([aria-disabled]):hover,
2913
- .c17 [aria-disabled='false']:hover {
2914
- background-color: var(--charcoal-surface3-hover);
2915
- }
2916
-
2917
- .c17:focus-within {
2918
- outline: none;
2919
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
2920
- }
2921
-
2922
- .c18 {
2923
- border: none;
2924
- box-sizing: border-box;
2925
- outline: none;
2926
- font-family: inherit;
2927
- -webkit-transform-origin: top left;
2928
- -ms-transform-origin: top left;
2929
- transform-origin: top left;
2930
- -webkit-transform: scale(0.875);
2931
- -ms-transform: scale(0.875);
2932
- transform: scale(0.875);
2933
- width: calc(100% / 0.875);
2934
- height: calc(100% / 0.875);
2935
- font-size: calc(14px / 0.875);
2936
- line-height: calc(22px / 0.875);
2937
- padding-left: 0;
2938
- padding-right: 0;
2939
- border-radius: calc(4px / 0.875);
2940
- -webkit-appearance: none;
2941
- -moz-appearance: none;
2942
- appearance: none;
2943
- background: transparent;
2944
- color: var(--charcoal-text2);
2945
- }
2946
-
2947
- .c18::-webkit-input-placeholder {
2948
- color: var(--charcoal-text3);
2949
- }
2950
-
2951
- .c18::-moz-placeholder {
2952
- color: var(--charcoal-text3);
2953
- }
2954
-
2955
- .c18:-ms-input-placeholder {
2956
- color: var(--charcoal-text3);
2957
- }
2958
-
2959
- .c18::placeholder {
2960
- color: var(--charcoal-text3);
2961
- }
2962
-
2963
- .c8 {
2964
- display: grid;
2965
- gap: 24px;
2966
- }
2967
-
2968
- .c10 {
2969
- color: var(--charcoal-text2);
2970
- font-size: 14px;
2971
- line-height: 22px;
2972
- display: flow-root;
2973
- }
2974
-
2975
- .c10::before {
2976
- display: block;
2977
- width: 0;
2978
- height: 0;
2979
- content: '';
2980
- margin-top: -4px;
2981
- }
2982
-
2983
- .c10::after {
2984
- display: block;
2985
- width: 0;
2986
- height: 0;
2987
- content: '';
2988
- margin-bottom: -4px;
2989
- }
2990
-
2991
- @media (max-width:743px) {
2992
- .c3 {
2993
- max-width: 440px;
2994
- width: calc(100% - 48px);
2995
- max-width: unset;
2996
- width: 100%;
2997
- border-radius: 0;
2998
- margin: auto 0 0 0;
2999
- min-height: 100%;
3000
- }
3001
- }
3002
-
3003
- @media (max-width:743px) {
3004
- .c2 {
3005
- padding: 0;
3006
- }
3007
- }
3008
-
3009
- @media (max-width:743px) {
3010
- .c4 {
3011
- height: 48px;
3012
- }
3013
- }
3014
-
3015
- <div
3016
- data-dark={false}
3017
- >
3018
- <div
3019
- aria-hidden={null}
3020
- data-overlay-container={true}
3021
- >
3022
- <button
3023
- className="c0 c1"
3024
- disabled={false}
3025
- onClick={[Function]}
3026
- >
3027
- Open Modal
3028
- </button>
3029
- <div
3030
- className="c2"
3031
- onClick={[Function]}
3032
- onPointerDown={[Function]}
3033
- style={
3034
- Object {
3035
- "backgroundColor": "rgba(0, 0, 0, 0)",
3036
- "overflow": "hidden",
3037
- }
3038
- }
3039
- >
3040
- <div
3041
- className="c3"
3042
- onBlur={[Function]}
3043
- onKeyDown={[Function]}
3044
- role="dialog"
3045
- size="M"
3046
- style={
3047
- Object {
3048
- "transform": " translateY(100%)",
3049
- }
3050
- }
3051
- tabIndex={-1}
3052
- >
3053
- <div
3054
- className="c4"
3055
- >
3056
- <h3
3057
- className="c5 c6"
3058
- >
3059
- react/Title
3060
- </h3>
3061
- </div>
3062
- <div
3063
- className="c7"
3064
- >
3065
- <div
3066
- className="c8"
3067
- >
3068
- <div
3069
- className="c9 c10"
3070
- >
3071
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
3072
- </div>
3073
- <div
3074
- className="c9"
3075
- >
3076
- <div
3077
- className="c11"
3078
- >
3079
- <div
3080
- className="c12 c13"
3081
- >
3082
- <label
3083
- className="c14"
3084
- htmlFor="test-id"
3085
- id="test-id"
3086
- >
3087
- Name
3088
- </label>
3089
- <div
3090
- className="c15 c16"
3091
- >
3092
- <span />
3093
- </div>
3094
- </div>
3095
- <div
3096
- className="c17"
3097
- >
3098
- <input
3099
- aria-labelledby="test-id"
3100
- className="c18"
3101
- disabled={false}
3102
- id="test-id"
3103
- onChange={[Function]}
3104
- placeholder="Nagisa"
3105
- readOnly={false}
3106
- required={false}
3107
- type="text"
3108
- value=""
3109
- />
3110
- </div>
3111
- </div>
3112
- </div>
3113
- <div
3114
- className="c9"
3115
- >
3116
- <div
3117
- className="c11"
3118
- >
3119
- <div
3120
- className="c12 c13"
3121
- >
3122
- <label
3123
- className="c14"
3124
- htmlFor="test-id"
3125
- id="test-id"
3126
- >
3127
- Country
3128
- </label>
3129
- <div
3130
- className="c15 c16"
3131
- >
3132
- <span />
3133
- </div>
3134
- </div>
3135
- <div
3136
- className="c17"
3137
- >
3138
- <input
3139
- aria-labelledby="test-id"
3140
- className="c18"
3141
- disabled={false}
3142
- id="test-id"
3143
- onChange={[Function]}
3144
- placeholder="Tokyo"
3145
- readOnly={false}
3146
- required={false}
3147
- type="text"
3148
- value=""
3149
- />
3150
- </div>
3151
- </div>
3152
- </div>
3153
- </div>
3154
- <div
3155
- className="c19"
3156
- >
3157
- <button
3158
- className="c0 c20"
3159
- disabled={false}
3160
- onClick={[Function]}
3161
- >
3162
- Apply
3163
- </button>
3164
- <button
3165
- className="c0 c21"
3166
- disabled={false}
3167
- onClick={[Function]}
3168
- >
3169
- Cancel
3170
- </button>
3171
- </div>
3172
- </div>
3173
- <button
3174
- aria-label="Close"
3175
- className="c0 c22 c23"
3176
- onClick={[Function]}
3177
- type="button"
3178
- >
3179
- <pixiv-icon
3180
- aria-hidden="true"
3181
- name="24/Close"
3182
- />
3183
- </button>
3184
- </div>
3185
- </div>
3186
- </div>
3187
- </div>
3188
- `;
3189
-
3190
- exports[`Storybook Tests react/Modal InternalScroll 1`] = `
3191
- .c0 {
3192
- cursor: pointer;
3193
- -webkit-appearance: none;
3194
- -moz-appearance: none;
3195
- appearance: none;
3196
- background: transparent;
3197
- padding: 0;
3198
- border-style: none;
3199
- outline: none;
3200
- color: inherit;
3201
- text-rendering: inherit;
3202
- -webkit-letter-spacing: inherit;
3203
- -moz-letter-spacing: inherit;
3204
- -ms-letter-spacing: inherit;
3205
- letter-spacing: inherit;
3206
- word-spacing: inherit;
3207
- -webkit-text-decoration: none;
3208
- text-decoration: none;
3209
- font: inherit;
3210
- margin: 0;
3211
- overflow: visible;
3212
- text-transform: none;
3213
- }
3214
-
3215
- .c0:disabled,
3216
- .c0[aria-disabled]:not([aria-disabled=false]) {
3217
- cursor: default;
3218
- }
3219
-
3220
- .c0:focus {
3221
- outline: none;
3222
- }
3223
-
3224
- .c0::-moz-focus-inner {
3225
- border-style: none;
3226
- padding: 0;
3227
- }
3228
-
3229
- .c1 {
3230
- width: -webkit-min-content;
3231
- width: -moz-min-content;
3232
- width: min-content;
3233
- display: inline-grid;
3234
- -webkit-align-items: center;
3235
- -webkit-box-align: center;
3236
- -ms-flex-align: center;
3237
- align-items: center;
3238
- -webkit-box-pack: center;
3239
- -webkit-justify-content: center;
3240
- -ms-flex-pack: center;
3241
- justify-content: center;
3242
- cursor: pointer;
3243
- -webkit-user-select: none;
3244
- -moz-user-select: none;
3245
- -ms-user-select: none;
3246
- user-select: none;
3247
- white-space: nowrap;
3248
- border-radius: 999999px;
3249
- font-size: 14px;
3250
- line-height: 22px;
3251
- font-weight: bold;
3252
- padding-right: 24px;
3253
- padding-left: 24px;
3254
- color: var(--charcoal-text2);
3255
- background-color: var(--charcoal-surface3);
3256
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3257
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3258
- height: 40px;
3259
- }
3260
-
3261
- .c1:not(:disabled):not([aria-disabled]):focus,
3262
- .c1[aria-disabled='false']:focus {
3263
- outline: none;
3264
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3265
- }
3266
-
3267
- .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
3268
- .c1[aria-disabled='false']:focus:not(:focus-visible) {
3269
- box-shadow: none;
3270
- }
3271
-
3272
- .c1:not(:disabled):not([aria-disabled]):focus-visible,
3273
- .c1[aria-disabled='false']:focus-visible {
3274
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3275
- }
3276
-
3277
- .c1:not(:disabled):not([aria-disabled]):hover,
3278
- .c1[aria-disabled='false']:hover {
3279
- color: var(--charcoal-text2-hover);
3280
- background-color: var(--charcoal-surface3-hover);
3281
- }
3282
-
3283
- .c1:not(:disabled):not([aria-disabled]):active,
3284
- .c1[aria-disabled='false']:active {
3285
- color: var(--charcoal-text2-press);
3286
- background-color: var(--charcoal-surface3-press);
3287
- }
3288
-
3289
- .c1:disabled,
3290
- .c1[aria-disabled]:not([aria-disabled='false']) {
3291
- opacity: 0.32;
3292
- }
3293
-
3294
- .c11 {
3295
- width: -webkit-fill-available;
3296
- width: -moz-available;
3297
- width: stretch;
3298
- display: inline-grid;
3299
- -webkit-align-items: center;
3300
- -webkit-box-align: center;
3301
- -ms-flex-align: center;
3302
- align-items: center;
3303
- -webkit-box-pack: center;
3304
- -webkit-justify-content: center;
3305
- -ms-flex-pack: center;
3306
- justify-content: center;
3307
- cursor: pointer;
3308
- -webkit-user-select: none;
3309
- -moz-user-select: none;
3310
- -ms-user-select: none;
3311
- user-select: none;
3312
- white-space: nowrap;
3313
- border-radius: 999999px;
3314
- font-size: 14px;
3315
- line-height: 22px;
3316
- font-weight: bold;
3317
- padding-right: 24px;
3318
- padding-left: 24px;
3319
- color: var(--charcoal-text2);
3320
- background-color: var(--charcoal-surface3);
3321
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3322
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3323
- height: 40px;
3324
- }
3325
-
3326
- .c11:not(:disabled):not([aria-disabled]):focus,
3327
- .c11[aria-disabled='false']:focus {
3328
- outline: none;
3329
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3330
- }
3331
-
3332
- .c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
3333
- .c11[aria-disabled='false']:focus:not(:focus-visible) {
3334
- box-shadow: none;
3335
- }
3336
-
3337
- .c11:not(:disabled):not([aria-disabled]):focus-visible,
3338
- .c11[aria-disabled='false']:focus-visible {
3339
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3340
- }
3341
-
3342
- .c11:not(:disabled):not([aria-disabled]):hover,
3343
- .c11[aria-disabled='false']:hover {
3344
- color: var(--charcoal-text2-hover);
3345
- background-color: var(--charcoal-surface3-hover);
3346
- }
3347
-
3348
- .c11:not(:disabled):not([aria-disabled]):active,
3349
- .c11[aria-disabled='false']:active {
3350
- color: var(--charcoal-text2-press);
3351
- background-color: var(--charcoal-surface3-press);
3352
- }
3353
-
3354
- .c11:disabled,
3355
- .c11[aria-disabled]:not([aria-disabled='false']) {
3356
- opacity: 0.32;
3357
- }
3358
-
3359
- .c3 {
3360
- margin: auto;
3361
- position: relative;
3362
- height: -webkit-fit-content;
3363
- height: -moz-fit-content;
3364
- height: fit-content;
3365
- width: 440px;
3366
- background-color: var(--charcoal-surface1);
3367
- border-radius: 24px;
3368
- }
3369
-
3370
- .c3:focus {
3371
- outline: none;
3372
- }
3373
-
3374
- .c2 {
3375
- z-index: 10;
3376
- overflow: auto;
3377
- display: -webkit-box;
3378
- display: -webkit-flex;
3379
- display: -ms-flexbox;
3380
- display: flex;
3381
- position: fixed;
3382
- top: 0;
3383
- left: 0;
3384
- width: -webkit-fill-available;
3385
- width: -moz-available;
3386
- height: 100%;
3387
- -webkit-box-pack: center;
3388
- -webkit-justify-content: center;
3389
- -ms-flex-pack: center;
3390
- justify-content: center;
3391
- padding: 40px 0;
3392
- box-sizing: border-box;
3393
- background-color: var(--charcoal-surface4);
3394
- }
3395
-
3396
- .c5 {
3397
- margin: 0;
3398
- font-weight: inherit;
3399
- font-size: inherit;
3400
- }
3401
-
3402
- .c4 {
3403
- height: 64px;
3404
- display: grid;
3405
- -webkit-align-content: center;
3406
- -ms-flex-line-pack: center;
3407
- align-content: center;
3408
- -webkit-box-pack: center;
3409
- -webkit-justify-content: center;
3410
- -ms-flex-pack: center;
3411
- justify-content: center;
3412
- }
3413
-
3414
- .c6 {
3415
- color: var(--charcoal-text1);
3416
- font-size: 16px;
3417
- line-height: 24px;
3418
- font-weight: bold;
3419
- display: flow-root;
3420
- }
3421
-
3422
- .c6::before {
3423
- display: block;
3424
- width: 0;
3425
- height: 0;
3426
- content: '';
3427
- margin-top: -4px;
3428
- }
3429
-
3430
- .c6::after {
3431
- display: block;
3432
- width: 0;
3433
- height: 0;
3434
- content: '';
3435
- margin-bottom: -4px;
3436
- }
3437
-
3438
- .c7 {
3439
- padding-bottom: 40px;
3440
- }
3441
-
3442
- .c9 {
3443
- display: grid;
3444
- grid-auto-flow: row;
3445
- grid-row-gap: 8px;
3446
- padding-top: 16px;
3447
- padding-left: 16px;
3448
- padding-right: 16px;
3449
- }
3450
-
3451
- .c8 {
3452
- overflow: auto;
3453
- max-height: calc( 100vh - 184px - 56px );
3454
- }
3455
-
3456
- .c10 {
3457
- position: relative;
3458
- }
3459
-
3460
- .c10::before {
3461
- content: '';
3462
- pointer-events: none;
3463
- border-top: 1px solid rgba(0,0,0,0.08);
3464
- position: absolute;
3465
- left: 0;
3466
- top: 0;
3467
- width: 100%;
3468
- height: 100%;
3469
- }
3470
-
3471
- @media (max-width:743px) {
3472
- .c3 {
3473
- max-width: 440px;
3474
- width: calc(100% - 48px);
3475
- }
3476
- }
3477
-
3478
- @media (max-width:743px) {
3479
-
3480
- }
3481
-
3482
- @media (max-width:743px) {
3483
-
3484
- }
3485
-
3486
- <div
3487
- data-dark={false}
3488
- >
3489
- <div
3490
- aria-hidden={null}
3491
- data-overlay-container={true}
3492
- >
3493
- <button
3494
- className="c0 c1"
3495
- disabled={false}
3496
- onClick={[Function]}
3497
- >
3498
- Open Modal
3499
- </button>
3500
- <div
3501
- className="c2"
3502
- onClick={[Function]}
3503
- onPointerDown={[Function]}
3504
- style={Object {}}
3505
- >
3506
- <div
3507
- className="c3"
3508
- onBlur={[Function]}
3509
- onKeyDown={[Function]}
3510
- role="dialog"
3511
- size="M"
3512
- style={Object {}}
3513
- tabIndex={-1}
3514
- >
3515
- <div
3516
- className="c4"
3517
- >
3518
- <h3
3519
- className="c5 c6"
3520
- >
3521
- react/Title
3522
- </h3>
3523
- </div>
3524
- <div
3525
- className="c7"
3526
- >
3527
- <div
3528
- className="c8"
3529
- >
3530
- <div
3531
- style={
3532
- Object {
3533
- "background": "linear-gradient(#e66465, #9198e5)",
3534
- "height": 1000,
3535
- }
3536
- }
3537
- />
3538
- </div>
3539
- <div
3540
- className="c9 c10"
3541
- >
3542
- <button
3543
- className="c0 c11"
3544
- disabled={false}
3545
- onClick={[Function]}
3546
- >
3547
- Close
3548
- </button>
3549
- </div>
3550
- </div>
3551
- </div>
3552
- </div>
3553
- </div>
3554
- </div>
3555
- `;
3556
-
3557
- exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
3558
- .c0 {
3559
- cursor: pointer;
3560
- -webkit-appearance: none;
3561
- -moz-appearance: none;
3562
- appearance: none;
3563
- background: transparent;
3564
- padding: 0;
3565
- border-style: none;
3566
- outline: none;
3567
- color: inherit;
3568
- text-rendering: inherit;
3569
- -webkit-letter-spacing: inherit;
3570
- -moz-letter-spacing: inherit;
3571
- -ms-letter-spacing: inherit;
3572
- letter-spacing: inherit;
3573
- word-spacing: inherit;
3574
- -webkit-text-decoration: none;
3575
- text-decoration: none;
3576
- font: inherit;
3577
- margin: 0;
3578
- overflow: visible;
3579
- text-transform: none;
3580
- }
3581
-
3582
- .c0:disabled,
3583
- .c0[aria-disabled]:not([aria-disabled=false]) {
3584
- cursor: default;
3585
- }
3586
-
3587
- .c0:focus {
3588
- outline: none;
3589
- }
3590
-
3591
- .c0::-moz-focus-inner {
3592
- border-style: none;
3593
- padding: 0;
3594
- }
3595
-
3596
- .c1 {
3597
- width: -webkit-min-content;
3598
- width: -moz-min-content;
3599
- width: min-content;
3600
- display: inline-grid;
3601
- -webkit-align-items: center;
3602
- -webkit-box-align: center;
3603
- -ms-flex-align: center;
3604
- align-items: center;
3605
- -webkit-box-pack: center;
3606
- -webkit-justify-content: center;
3607
- -ms-flex-pack: center;
3608
- justify-content: center;
3609
- cursor: pointer;
3610
- -webkit-user-select: none;
3611
- -moz-user-select: none;
3612
- -ms-user-select: none;
3613
- user-select: none;
3614
- white-space: nowrap;
3615
- border-radius: 999999px;
3616
- font-size: 14px;
3617
- line-height: 22px;
3618
- font-weight: bold;
3619
- padding-right: 24px;
3620
- padding-left: 24px;
3621
- color: var(--charcoal-text2);
3622
- background-color: var(--charcoal-surface3);
3623
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3624
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3625
- height: 40px;
3626
- }
3627
-
3628
- .c1:not(:disabled):not([aria-disabled]):focus,
3629
- .c1[aria-disabled='false']:focus {
3630
- outline: none;
3631
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3632
- }
3633
-
3634
- .c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
3635
- .c1[aria-disabled='false']:focus:not(:focus-visible) {
3636
- box-shadow: none;
3637
- }
3638
-
3639
- .c1:not(:disabled):not([aria-disabled]):focus-visible,
3640
- .c1[aria-disabled='false']:focus-visible {
3641
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3642
- }
3643
-
3644
- .c1:not(:disabled):not([aria-disabled]):hover,
3645
- .c1[aria-disabled='false']:hover {
3646
- color: var(--charcoal-text2-hover);
3647
- background-color: var(--charcoal-surface3-hover);
3648
- }
3649
-
3650
- .c1:not(:disabled):not([aria-disabled]):active,
3651
- .c1[aria-disabled='false']:active {
3652
- color: var(--charcoal-text2-press);
3653
- background-color: var(--charcoal-surface3-press);
3654
- }
3655
-
3656
- .c1:disabled,
3657
- .c1[aria-disabled]:not([aria-disabled='false']) {
3658
- opacity: 0.32;
3659
- }
3660
-
3661
- .c12 {
3662
- width: -webkit-fill-available;
3663
- width: -moz-available;
3664
- width: stretch;
3665
- display: inline-grid;
3666
- -webkit-align-items: center;
3667
- -webkit-box-align: center;
3668
- -ms-flex-align: center;
3669
- align-items: center;
3670
- -webkit-box-pack: center;
3671
- -webkit-justify-content: center;
3672
- -ms-flex-pack: center;
3673
- justify-content: center;
3674
- cursor: pointer;
3675
- -webkit-user-select: none;
3676
- -moz-user-select: none;
3677
- -ms-user-select: none;
3678
- user-select: none;
3679
- white-space: nowrap;
3680
- border-radius: 999999px;
3681
- font-size: 14px;
3682
- line-height: 22px;
3683
- font-weight: bold;
3684
- padding-right: 24px;
3685
- padding-left: 24px;
3686
- color: var(--charcoal-text5);
3687
- background-color: var(--charcoal-brand);
3688
- -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3689
- transition: 0.2s color,0.2s background-color,0.2s box-shadow;
3690
- height: 40px;
3691
- }
3692
-
3693
- .c12:not(:disabled):not([aria-disabled]):focus,
3694
- .c12[aria-disabled='false']:focus {
3695
- outline: none;
3696
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3697
- }
3698
-
3699
- .c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
3700
- .c12[aria-disabled='false']:focus:not(:focus-visible) {
3701
- box-shadow: none;
3702
- }
3703
-
3704
- .c12:not(:disabled):not([aria-disabled]):focus-visible,
3705
- .c12[aria-disabled='false']:focus-visible {
3706
- box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
3707
- }
3708
-
3709
- .c12:not(:disabled):not([aria-disabled]):hover,
3710
- .c12[aria-disabled='false']:hover {
3711
- color: var(--charcoal-text5-hover);
3712
- background-color: var(--charcoal-brand-hover);
3713
- }
3714
-
3715
- .c12:not(:disabled):not([aria-disabled]):active,
3716
- .c12[aria-disabled='false']:active {
3717
- color: var(--charcoal-text5-press);
3718
- background-color: var(--charcoal-brand-press);
3719
- }
3720
-
3721
- .c12:disabled,
3722
- .c12[aria-disabled]:not([aria-disabled='false']) {
3723
- opacity: 0.32;
3724
- }
3725
-
3726
- .c3 {
3727
- margin: auto;
3728
- position: relative;
3729
- height: -webkit-fit-content;
3730
- height: -moz-fit-content;
3731
- height: fit-content;
3732
- width: 440px;
3733
- background-color: var(--charcoal-surface1);
3734
- border-radius: 24px;
3735
- }
3736
-
3737
- .c3:focus {
3738
- outline: none;
3739
- }
3740
-
3741
- .c2 {
3742
- z-index: 10;
3743
- overflow: auto;
3744
- display: -webkit-box;
3745
- display: -webkit-flex;
3746
- display: -ms-flexbox;
3747
- display: flex;
3748
- position: fixed;
3749
- top: 0;
3750
- left: 0;
3751
- width: -webkit-fill-available;
3752
- width: -moz-available;
3753
- height: 100%;
3754
- -webkit-box-pack: center;
3755
- -webkit-justify-content: center;
3756
- -ms-flex-pack: center;
3757
- justify-content: center;
3758
- padding: 40px 0;
3759
- box-sizing: border-box;
3760
- background-color: var(--charcoal-surface4);
3761
- }
3762
-
3763
- .c5 {
3764
- margin: 0;
3765
- font-weight: inherit;
3766
- font-size: inherit;
3767
- }
3768
-
3769
- .c4 {
3770
- height: 64px;
3771
- display: grid;
3772
- -webkit-align-content: center;
3773
- -ms-flex-line-pack: center;
3774
- align-content: center;
3775
- -webkit-box-pack: center;
3776
- -webkit-justify-content: center;
3777
- -ms-flex-pack: center;
3778
- justify-content: center;
3779
- }
3780
-
3781
- .c6 {
3782
- color: var(--charcoal-text1);
3783
- font-size: 16px;
3784
- line-height: 24px;
3785
- font-weight: bold;
3786
- display: flow-root;
3787
- }
3788
-
3789
- .c6::before {
3790
- display: block;
3791
- width: 0;
3792
- height: 0;
3793
- content: '';
3794
- margin-top: -4px;
3795
- }
3796
-
3797
- .c6::after {
3798
- display: block;
3799
- width: 0;
3800
- height: 0;
3801
- content: '';
3802
- margin-bottom: -4px;
3803
- }
3804
-
3805
- .c9 {
3806
- padding-left: 16px;
3807
- padding-right: 16px;
3808
- }
3809
-
3810
- .c7 {
3811
- padding-bottom: 40px;
3812
- }
3813
-
3814
- .c11 {
3815
- display: grid;
3816
- grid-auto-flow: row;
3817
- grid-row-gap: 8px;
3818
- padding-top: 16px;
3819
- padding-left: 16px;
3820
- padding-right: 16px;
3821
- }
3822
-
3823
- .c8 {
3824
- display: grid;
3825
- gap: 24px;
3826
- }
3827
-
3828
- .c10 {
3829
- color: var(--charcoal-text2);
3830
- font-size: 14px;
3831
- line-height: 22px;
3832
- display: flow-root;
3833
- }
3834
-
3835
- .c10::before {
3836
- display: block;
3837
- width: 0;
3838
- height: 0;
3839
- content: '';
3840
- margin-top: -4px;
3841
- }
3842
-
3843
- .c10::after {
3844
- display: block;
3845
- width: 0;
3846
- height: 0;
3847
- content: '';
3848
- margin-bottom: -4px;
3849
- }
3850
-
3851
- @media (max-width:743px) {
3852
- .c3 {
3853
- max-width: 440px;
3854
- width: calc(100% - 48px);
3855
- }
3856
- }
3857
-
3858
- @media (max-width:743px) {
3859
-
3860
- }
3861
-
3862
- @media (max-width:743px) {
3863
-
3864
- }
3865
-
3866
- <div
3867
- data-dark={false}
3868
- >
3869
- <div
3870
- aria-hidden={null}
3871
- data-overlay-container={true}
3872
- >
3873
- <button
3874
- className="c0 c1"
3875
- disabled={false}
3876
- onClick={[Function]}
3877
- >
3878
- Open Modal
3879
- </button>
3880
- <div
3881
- className="c2"
3882
- onClick={[Function]}
3883
- onPointerDown={[Function]}
3884
- style={Object {}}
3885
- >
3886
- <div
3887
- className="c3"
3888
- onBlur={[Function]}
3889
- onKeyDown={[Function]}
3890
- role="dialog"
3891
- size="M"
3892
- style={Object {}}
3893
- tabIndex={-1}
3894
- >
3895
- <div
3896
- className="c4"
3897
- >
3898
- <h3
3899
- className="c5 c6"
3900
- >
3901
- react/Title
3902
- </h3>
3903
- </div>
3904
- <div
3905
- className="c7"
3906
- >
3907
- <div
3908
- className="c8"
3909
- >
3910
- <div
3911
- className="c9 c10"
3912
- >
3913
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod placeat tenetur, necessitatibus laudantium cumque exercitationem provident. Quaerat iure enim, eveniet dolores earum odio quo possimus fugiat aspernatur, numquam, commodi repellat.
3914
- </div>
3915
- </div>
3916
- <div
3917
- className="c11"
3918
- >
3919
- <button
3920
- className="c0 c12"
3921
- disabled={false}
3922
- onClick={[Function]}
3923
- >
3924
- OK
3925
- </button>
3926
- </div>
3927
- </div>
3928
- </div>
3929
- </div>
3930
- </div>
3931
- </div>
3932
- `;