@nypl/design-system-react-components 3.0.0-react-chakra-rc2 → 3.0.0-react-chakra-rc4

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 (26) hide show
  1. package/dist/design-system-react-components.cjs +57 -57
  2. package/dist/design-system-react-components.js +13642 -13856
  3. package/dist/src/__tests__/mediaMatchMock.d.ts +79 -0
  4. package/dist/src/components/Link/Link.d.ts +4 -6
  5. package/dist/src/components/MultiSelect/MultiSelect.d.ts +1 -1
  6. package/dist/src/components/MultiSelect/MultiSelectItemsCountButton.d.ts +4 -1
  7. package/dist/src/components/Tabs/Tabs.d.ts +2 -2
  8. package/dist/src/components/TagSet/TagSet.d.ts +2 -0
  9. package/dist/src/components/TagSet/TagSetExplore.d.ts +8 -4
  10. package/dist/src/components/TagSet/TagSetFilter.d.ts +6 -2
  11. package/dist/src/index.d.ts +16 -4
  12. package/dist/src/theme/components/breadcrumb.d.ts +20 -0
  13. package/dist/src/theme/components/featuredContent.d.ts +4 -4
  14. package/dist/src/theme/components/global.d.ts +11 -1
  15. package/dist/src/theme/components/heading.d.ts +15 -210
  16. package/dist/src/theme/components/menu.d.ts +18 -6
  17. package/dist/src/theme/components/multiSelectItemsCountButton.d.ts +1 -0
  18. package/dist/src/theme/components/notification.d.ts +12 -0
  19. package/dist/src/theme/components/skeletonLoader.d.ts +51 -60
  20. package/dist/src/theme/components/statusBadge.d.ts +1 -1
  21. package/dist/src/theme/components/structuredContent.d.ts +5 -72
  22. package/dist/src/theme/components/tabs.d.ts +2 -4
  23. package/package.json +1 -1
  24. package/dist/src/components/NewsletterSignup/NewsletterSignup.d.ts +0 -49
  25. package/dist/src/components/SocialMediaLinks/SocialMediaLinks.d.ts +0 -43
  26. package/dist/src/components/SocialMediaLinks/SocialMediaLinksUtils.d.ts +0 -7
package/dist/src/theme/components/heading.d.ts CHANGED
@@ -5,15 +5,10 @@ export declare const headings: {
5
5
  a: {
6
6
  textUnderlineOffset: string;
7
7
  };
8
- "@media (min-width: 0px)": {
9
- fontSize: string;
10
- };
11
- "@media (min-width: 600px)": {
12
- fontSize: string;
13
- };
14
8
  marginTop: string;
15
9
  marginStart: string;
16
10
  marginEnd: string;
11
+ fontSize: string;
17
12
  fontWeight: string;
18
13
  letterSpacing: string;
19
14
  lineHeight: string;
@@ -25,15 +20,10 @@ export declare const headings: {
25
20
  a: {
26
21
  textUnderlineOffset: string;
27
22
  };
28
- "@media (min-width: 0px)": {
29
- fontSize: string;
30
- };
31
- "@media (min-width: 600px)": {
32
- fontSize: string;
33
- };
34
23
  marginTop: string;
35
24
  marginStart: string;
36
25
  marginEnd: string;
26
+ fontSize: string;
37
27
  fontWeight: string;
38
28
  lineHeight: string;
39
29
  };
@@ -41,15 +31,10 @@ export declare const headings: {
41
31
  three: {
42
32
  base: {
43
33
  width: string;
44
- "@media (min-width: 0px)": {
45
- fontSize: string;
46
- };
47
- "@media (min-width: 600px)": {
48
- fontSize: string;
49
- };
50
34
  marginTop: string;
51
35
  marginStart: string;
52
36
  marginEnd: string;
37
+ fontSize: string;
53
38
  fontWeight: string;
54
39
  lineHeight: string;
55
40
  };
@@ -57,15 +42,10 @@ export declare const headings: {
57
42
  four: {
58
43
  base: {
59
44
  width: string;
60
- "@media (min-width: 0px)": {
61
- fontSize: string;
62
- };
63
- "@media (min-width: 600px)": {
64
- fontSize: string;
65
- };
66
45
  marginTop: string;
67
46
  marginStart: string;
68
47
  marginEnd: string;
48
+ fontSize: string;
69
49
  fontWeight: string;
70
50
  lineHeight: string;
71
51
  };
@@ -73,15 +53,10 @@ export declare const headings: {
73
53
  fallback: {
74
54
  base: {
75
55
  width: string;
76
- "@media (min-width: 0px)": {
77
- fontSize: string;
78
- };
79
- "@media (min-width: 600px)": {
80
- fontSize: string;
81
- };
82
56
  marginTop: string;
83
57
  marginStart: string;
84
58
  marginEnd: string;
59
+ fontSize: string;
85
60
  fontWeight: string;
86
61
  lineHeight: string;
87
62
  };
@@ -99,12 +74,6 @@ export declare const headings: {
99
74
  a: {
100
75
  textUnderlineOffset: string;
101
76
  };
102
- "@media (min-width: 0px)": {
103
- fontSize: string;
104
- };
105
- "@media (min-width: 600px)": {
106
- fontSize: string;
107
- };
108
77
  };
109
78
  };
110
79
  heading1: {
@@ -120,12 +89,6 @@ export declare const headings: {
120
89
  a: {
121
90
  textUnderlineOffset: string;
122
91
  };
123
- "@media (min-width: 0px)": {
124
- fontSize: string;
125
- };
126
- "@media (min-width: 600px)": {
127
- fontSize: string;
128
- };
129
92
  };
130
93
  };
131
94
  heading2: {
@@ -141,12 +104,6 @@ export declare const headings: {
141
104
  a: {
142
105
  textUnderlineOffset: string;
143
106
  };
144
- "@media (min-width: 0px)": {
145
- fontSize: string;
146
- };
147
- "@media (min-width: 600px)": {
148
- fontSize: string;
149
- };
150
107
  };
151
108
  };
152
109
  heading3: {
@@ -162,12 +119,6 @@ export declare const headings: {
162
119
  a: {
163
120
  textUnderlineOffset: string;
164
121
  };
165
- "@media (min-width: 0px)": {
166
- fontSize: string;
167
- };
168
- "@media (min-width: 600px)": {
169
- fontSize: string;
170
- };
171
122
  };
172
123
  };
173
124
  heading4: {
@@ -183,12 +134,6 @@ export declare const headings: {
183
134
  a: {
184
135
  textUnderlineOffset: string;
185
136
  };
186
- "@media (min-width: 0px)": {
187
- fontSize: string;
188
- };
189
- "@media (min-width: 600px)": {
190
- fontSize: string;
191
- };
192
137
  };
193
138
  };
194
139
  heading5: {
@@ -201,12 +146,6 @@ export declare const headings: {
201
146
  letterSpacing: string;
202
147
  lineHeight: string;
203
148
  width: string;
204
- "@media (min-width: 0px)": {
205
- fontSize: string;
206
- };
207
- "@media (min-width: 600px)": {
208
- fontSize: string;
209
- };
210
149
  };
211
150
  };
212
151
  heading6: {
@@ -219,12 +158,6 @@ export declare const headings: {
219
158
  letterSpacing: string;
220
159
  lineHeight: string;
221
160
  width: string;
222
- "@media (min-width: 0px)": {
223
- fontSize: string;
224
- };
225
- "@media (min-width: 600px)": {
226
- fontSize: string;
227
- };
228
161
  };
229
162
  };
230
163
  };
@@ -283,12 +216,6 @@ declare const Heading: {
283
216
  a: {
284
217
  textUnderlineOffset: string;
285
218
  };
286
- "@media (min-width: 0px)": {
287
- fontSize: string;
288
- };
289
- "@media (min-width: 600px)": {
290
- fontSize: string;
291
- };
292
219
  };
293
220
  };
294
221
  h2: {
@@ -304,12 +231,6 @@ declare const Heading: {
304
231
  a: {
305
232
  textUnderlineOffset: string;
306
233
  };
307
- "@media (min-width: 0px)": {
308
- fontSize: string;
309
- };
310
- "@media (min-width: 600px)": {
311
- fontSize: string;
312
- };
313
234
  };
314
235
  };
315
236
  h3: {
@@ -325,12 +246,6 @@ declare const Heading: {
325
246
  a: {
326
247
  textUnderlineOffset: string;
327
248
  };
328
- "@media (min-width: 0px)": {
329
- fontSize: string;
330
- };
331
- "@media (min-width: 600px)": {
332
- fontSize: string;
333
- };
334
249
  };
335
250
  };
336
251
  h4: {
@@ -346,12 +261,6 @@ declare const Heading: {
346
261
  a: {
347
262
  textUnderlineOffset: string;
348
263
  };
349
- "@media (min-width: 0px)": {
350
- fontSize: string;
351
- };
352
- "@media (min-width: 600px)": {
353
- fontSize: string;
354
- };
355
264
  };
356
265
  };
357
266
  h5: {
@@ -364,12 +273,6 @@ declare const Heading: {
364
273
  letterSpacing: string;
365
274
  lineHeight: string;
366
275
  width: string;
367
- "@media (min-width: 0px)": {
368
- fontSize: string;
369
- };
370
- "@media (min-width: 600px)": {
371
- fontSize: string;
372
- };
373
276
  };
374
277
  };
375
278
  h6: {
@@ -382,12 +285,6 @@ declare const Heading: {
382
285
  letterSpacing: string;
383
286
  lineHeight: string;
384
287
  width: string;
385
- "@media (min-width: 0px)": {
386
- fontSize: string;
387
- };
388
- "@media (min-width: 600px)": {
389
- fontSize: string;
390
- };
391
288
  };
392
289
  };
393
290
  one: {
@@ -396,15 +293,10 @@ declare const Heading: {
396
293
  a: {
397
294
  textUnderlineOffset: string;
398
295
  };
399
- "@media (min-width: 0px)": {
400
- fontSize: string;
401
- };
402
- "@media (min-width: 600px)": {
403
- fontSize: string;
404
- };
405
296
  marginTop: string;
406
297
  marginStart: string;
407
298
  marginEnd: string;
299
+ fontSize: string;
408
300
  fontWeight: string;
409
301
  letterSpacing: string;
410
302
  lineHeight: string;
@@ -416,15 +308,10 @@ declare const Heading: {
416
308
  a: {
417
309
  textUnderlineOffset: string;
418
310
  };
419
- "@media (min-width: 0px)": {
420
- fontSize: string;
421
- };
422
- "@media (min-width: 600px)": {
423
- fontSize: string;
424
- };
425
311
  marginTop: string;
426
312
  marginStart: string;
427
313
  marginEnd: string;
314
+ fontSize: string;
428
315
  fontWeight: string;
429
316
  lineHeight: string;
430
317
  };
@@ -432,15 +319,10 @@ declare const Heading: {
432
319
  three: {
433
320
  base: {
434
321
  width: string;
435
- "@media (min-width: 0px)": {
436
- fontSize: string;
437
- };
438
- "@media (min-width: 600px)": {
439
- fontSize: string;
440
- };
441
322
  marginTop: string;
442
323
  marginStart: string;
443
324
  marginEnd: string;
325
+ fontSize: string;
444
326
  fontWeight: string;
445
327
  lineHeight: string;
446
328
  };
@@ -448,15 +330,10 @@ declare const Heading: {
448
330
  four: {
449
331
  base: {
450
332
  width: string;
451
- "@media (min-width: 0px)": {
452
- fontSize: string;
453
- };
454
- "@media (min-width: 600px)": {
455
- fontSize: string;
456
- };
457
333
  marginTop: string;
458
334
  marginStart: string;
459
335
  marginEnd: string;
336
+ fontSize: string;
460
337
  fontWeight: string;
461
338
  lineHeight: string;
462
339
  };
@@ -464,15 +341,10 @@ declare const Heading: {
464
341
  five: {
465
342
  base: {
466
343
  width: string;
467
- "@media (min-width: 0px)": {
468
- fontSize: string;
469
- };
470
- "@media (min-width: 600px)": {
471
- fontSize: string;
472
- };
473
344
  marginTop: string;
474
345
  marginStart: string;
475
346
  marginEnd: string;
347
+ fontSize: string;
476
348
  fontWeight: string;
477
349
  lineHeight: string;
478
350
  };
@@ -480,15 +352,10 @@ declare const Heading: {
480
352
  six: {
481
353
  base: {
482
354
  width: string;
483
- "@media (min-width: 0px)": {
484
- fontSize: string;
485
- };
486
- "@media (min-width: 600px)": {
487
- fontSize: string;
488
- };
489
355
  marginTop: string;
490
356
  marginStart: string;
491
357
  marginEnd: string;
358
+ fontSize: string;
492
359
  fontWeight: string;
493
360
  lineHeight: string;
494
361
  };
@@ -506,12 +373,6 @@ declare const Heading: {
506
373
  a: {
507
374
  textUnderlineOffset: string;
508
375
  };
509
- "@media (min-width: 0px)": {
510
- fontSize: string;
511
- };
512
- "@media (min-width: 600px)": {
513
- fontSize: string;
514
- };
515
376
  };
516
377
  };
517
378
  heading1: {
@@ -527,12 +388,6 @@ declare const Heading: {
527
388
  a: {
528
389
  textUnderlineOffset: string;
529
390
  };
530
- "@media (min-width: 0px)": {
531
- fontSize: string;
532
- };
533
- "@media (min-width: 600px)": {
534
- fontSize: string;
535
- };
536
391
  };
537
392
  };
538
393
  heading2: {
@@ -548,12 +403,6 @@ declare const Heading: {
548
403
  a: {
549
404
  textUnderlineOffset: string;
550
405
  };
551
- "@media (min-width: 0px)": {
552
- fontSize: string;
553
- };
554
- "@media (min-width: 600px)": {
555
- fontSize: string;
556
- };
557
406
  };
558
407
  };
559
408
  heading3: {
@@ -569,12 +418,6 @@ declare const Heading: {
569
418
  a: {
570
419
  textUnderlineOffset: string;
571
420
  };
572
- "@media (min-width: 0px)": {
573
- fontSize: string;
574
- };
575
- "@media (min-width: 600px)": {
576
- fontSize: string;
577
- };
578
421
  };
579
422
  };
580
423
  heading4: {
@@ -590,12 +433,6 @@ declare const Heading: {
590
433
  a: {
591
434
  textUnderlineOffset: string;
592
435
  };
593
- "@media (min-width: 0px)": {
594
- fontSize: string;
595
- };
596
- "@media (min-width: 600px)": {
597
- fontSize: string;
598
- };
599
436
  };
600
437
  };
601
438
  heading5: {
@@ -608,12 +445,6 @@ declare const Heading: {
608
445
  letterSpacing: string;
609
446
  lineHeight: string;
610
447
  width: string;
611
- "@media (min-width: 0px)": {
612
- fontSize: string;
613
- };
614
- "@media (min-width: 600px)": {
615
- fontSize: string;
616
- };
617
448
  };
618
449
  };
619
450
  heading6: {
@@ -626,12 +457,6 @@ declare const Heading: {
626
457
  letterSpacing: string;
627
458
  lineHeight: string;
628
459
  width: string;
629
- "@media (min-width: 0px)": {
630
- fontSize: string;
631
- };
632
- "@media (min-width: 600px)": {
633
- fontSize: string;
634
- };
635
460
  };
636
461
  };
637
462
  primary: {
@@ -640,15 +465,10 @@ declare const Heading: {
640
465
  a: {
641
466
  textUnderlineOffset: string;
642
467
  };
643
- "@media (min-width: 0px)": {
644
- fontSize: string;
645
- };
646
- "@media (min-width: 600px)": {
647
- fontSize: string;
648
- };
649
468
  marginTop: string;
650
469
  marginStart: string;
651
470
  marginEnd: string;
471
+ fontSize: string;
652
472
  fontWeight: string;
653
473
  letterSpacing: string;
654
474
  lineHeight: string;
@@ -660,15 +480,10 @@ declare const Heading: {
660
480
  a: {
661
481
  textUnderlineOffset: string;
662
482
  };
663
- "@media (min-width: 0px)": {
664
- fontSize: string;
665
- };
666
- "@media (min-width: 600px)": {
667
- fontSize: string;
668
- };
669
483
  marginTop: string;
670
484
  marginStart: string;
671
485
  marginEnd: string;
486
+ fontSize: string;
672
487
  fontWeight: string;
673
488
  lineHeight: string;
674
489
  };
@@ -676,15 +491,10 @@ declare const Heading: {
676
491
  tertiary: {
677
492
  base: {
678
493
  width: string;
679
- "@media (min-width: 0px)": {
680
- fontSize: string;
681
- };
682
- "@media (min-width: 600px)": {
683
- fontSize: string;
684
- };
685
494
  marginTop: string;
686
495
  marginStart: string;
687
496
  marginEnd: string;
497
+ fontSize: string;
688
498
  fontWeight: string;
689
499
  lineHeight: string;
690
500
  };
@@ -692,15 +502,10 @@ declare const Heading: {
692
502
  callout: {
693
503
  base: {
694
504
  width: string;
695
- "@media (min-width: 0px)": {
696
- fontSize: string;
697
- };
698
- "@media (min-width: 600px)": {
699
- fontSize: string;
700
- };
701
505
  marginTop: string;
702
506
  marginStart: string;
703
507
  marginEnd: string;
508
+ fontSize: string;
704
509
  fontWeight: string;
705
510
  lineHeight: string;
706
511
  };
package/dist/src/theme/components/menu.d.ts CHANGED
@@ -49,17 +49,18 @@ declare const Menu: {
49
49
  fill: string;
50
50
  };
51
51
  _hover: {
52
+ textColor: string;
53
+ fontWeight: number;
54
+ bg: string;
55
+ };
56
+ _focus: {
57
+ textColor: string;
58
+ fontWeight: number;
52
59
  bg: string;
53
60
  };
54
61
  };
55
62
  };
56
63
  selected: {
57
- _hover: {
58
- background: string;
59
- };
60
- _active: {
61
- background: string;
62
- };
63
64
  fontWeight: number;
64
65
  borderLeftColor: string | {
65
66
  primary: string;
@@ -73,6 +74,16 @@ declare const Menu: {
73
74
  background: string;
74
75
  _dark: {
75
76
  textColor: string;
77
+ _hover: {
78
+ textColor: string;
79
+ fontWeight: number;
80
+ background: string;
81
+ };
82
+ _focus: {
83
+ textColor: string;
84
+ fontWeight: number;
85
+ bg: string;
86
+ };
76
87
  background: string;
77
88
  };
78
89
  };
@@ -143,6 +154,7 @@ declare const Menu: {
143
154
  borderColor: string;
144
155
  _dark: {
145
156
  borderColor: string;
157
+ bgColor: string;
146
158
  };
147
159
  boxShadow: string;
148
160
  overflowY: string;
package/dist/src/theme/components/multiSelectItemsCountButton.d.ts CHANGED
@@ -18,6 +18,7 @@ declare const MultiSelectItemsCountButton: {
18
18
  };
19
19
  width: string;
20
20
  zIndex: number;
21
+ py: string;
21
22
  _hover: {
22
23
  borderColor: string;
23
24
  };
package/dist/src/theme/components/notification.d.ts CHANGED
@@ -47,6 +47,18 @@ declare const Notification: {
47
47
  _dark: {
48
48
  color: string;
49
49
  };
50
+ _focus: {
51
+ ":not([disabled])": {
52
+ boxShadow: string;
53
+ outline: string;
54
+ outlineOffset: string;
55
+ outlineColor: any;
56
+ zIndex: string;
57
+ _dark: {
58
+ outlineColor: any;
59
+ };
60
+ };
61
+ };
50
62
  _hover: {
51
63
  bg: string;
52
64
  };