@nypl/design-system-react-components 1.0.4 → 1.0.7

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 (75) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/dist/components/Accordion/Accordion.d.ts +2 -2
  3. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +2 -2
  4. package/dist/components/Button/Button.d.ts +4 -2
  5. package/dist/components/ButtonGroup/ButtonGroup.d.ts +4 -2
  6. package/dist/components/Card/Card.d.ts +7 -3
  7. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  8. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +2 -2
  9. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +4 -2
  10. package/dist/components/Fieldset/Fieldset.d.ts +3 -1
  11. package/dist/components/Form/Form.d.ts +4 -2
  12. package/dist/components/Grid/SimpleGrid.d.ts +4 -2
  13. package/dist/components/Heading/Heading.d.ts +4 -2
  14. package/dist/components/HelperErrorText/HelperErrorText.d.ts +2 -2
  15. package/dist/components/Hero/Hero.d.ts +4 -2
  16. package/dist/components/HorizontalRule/HorizontalRule.d.ts +2 -2
  17. package/dist/components/Icons/Icon.d.ts +5 -3
  18. package/dist/components/Icons/IconSvgs.d.ts +13 -0
  19. package/dist/components/Image/Image.d.ts +6 -2
  20. package/dist/components/Label/Label.d.ts +4 -2
  21. package/dist/components/Link/Link.d.ts +2 -2
  22. package/dist/components/List/List.d.ts +4 -2
  23. package/dist/components/Logo/Logo.d.ts +4 -2
  24. package/dist/components/Modal/Modal.d.ts +4 -2
  25. package/dist/components/Notification/Notification.d.ts +1 -1
  26. package/dist/components/Pagination/Pagination.d.ts +2 -2
  27. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +2 -2
  28. package/dist/components/Radio/Radio.d.ts +1 -1
  29. package/dist/components/RadioGroup/RadioGroup.d.ts +2 -2
  30. package/dist/components/SearchBar/SearchBar.d.ts +8 -3
  31. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +4 -2
  32. package/dist/components/SkipNavigation/SkipNavigation.d.ts +4 -2
  33. package/dist/components/Slider/Slider.d.ts +4 -2
  34. package/dist/components/StatusBadge/StatusBadge.d.ts +4 -2
  35. package/dist/components/StructuredContent/StructuredContent.d.ts +4 -2
  36. package/dist/components/StyleGuide/ColorCard.d.ts +25 -7
  37. package/dist/components/Table/Table.d.ts +4 -2
  38. package/dist/components/Tabs/Tabs.d.ts +4 -2
  39. package/dist/components/Template/Template.d.ts +7 -3
  40. package/dist/components/Text/Text.d.ts +4 -2
  41. package/dist/components/TextInput/TextInput.d.ts +1 -1
  42. package/dist/components/Toggle/Toggle.d.ts +1 -1
  43. package/dist/components/VideoPlayer/VideoPlayer.d.ts +4 -2
  44. package/dist/design-system-react-components.cjs.development.js +2438 -1834
  45. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  46. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  47. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  48. package/dist/design-system-react-components.esm.js +2440 -1837
  49. package/dist/design-system-react-components.esm.js.map +1 -1
  50. package/dist/hooks/useCarouselStyles.d.ts +1 -1
  51. package/dist/hooks/useNYPLBreakpoints.d.ts +5 -5
  52. package/dist/index.d.ts +1 -0
  53. package/dist/styles.css +1 -1
  54. package/dist/theme/components/breadcrumb.d.ts +3 -3
  55. package/dist/theme/components/card.d.ts +4 -4
  56. package/dist/theme/components/checkbox.d.ts +2 -3
  57. package/dist/theme/components/customTable.d.ts +43 -43
  58. package/dist/theme/components/global.d.ts +2 -2
  59. package/dist/theme/components/globalMixins.d.ts +1 -4
  60. package/dist/theme/components/heading.d.ts +30 -30
  61. package/dist/theme/components/hero.d.ts +163 -119
  62. package/dist/theme/components/horizontalRule.d.ts +2 -2
  63. package/dist/theme/components/icon.d.ts +4762 -4762
  64. package/dist/theme/components/image.d.ts +42 -42
  65. package/dist/theme/components/list.d.ts +13 -13
  66. package/dist/theme/components/notification.d.ts +4 -4
  67. package/dist/theme/components/radio.d.ts +4 -2
  68. package/dist/theme/components/select.d.ts +2 -2
  69. package/dist/theme/components/skeletonLoader.d.ts +1 -1
  70. package/dist/theme/components/slider.d.ts +6 -6
  71. package/dist/theme/components/structuredContent.d.ts +33 -33
  72. package/dist/theme/components/tabs.d.ts +9 -9
  73. package/dist/theme/components/template.d.ts +7 -7
  74. package/dist/theme/components/toggle.d.ts +2 -2
  75. package/package.json +13 -14
package/dist/theme/components/heading.d.ts CHANGED
@@ -2,8 +2,8 @@ export declare const headings: {
2
2
  h1: {
3
3
  width: string;
4
4
  marginTop: string;
5
- marginLeft: string;
6
- marginRight: string;
5
+ marginStart: string;
6
+ marginEnd: string;
7
7
  fontSize: string;
8
8
  fontWeight: string;
9
9
  letterSpacing: string;
@@ -12,8 +12,8 @@ export declare const headings: {
12
12
  h2: {
13
13
  width: string;
14
14
  marginTop: string;
15
- marginLeft: string;
16
- marginRight: string;
15
+ marginStart: string;
16
+ marginEnd: string;
17
17
  fontSize: string;
18
18
  fontWeight: string;
19
19
  lineHeight: string;
@@ -21,8 +21,8 @@ export declare const headings: {
21
21
  h3: {
22
22
  width: string;
23
23
  marginTop: string;
24
- marginLeft: string;
25
- marginRight: string;
24
+ marginStart: string;
25
+ marginEnd: string;
26
26
  fontSize: string;
27
27
  fontWeight: string;
28
28
  lineHeight: string;
@@ -30,8 +30,8 @@ export declare const headings: {
30
30
  h4: {
31
31
  width: string;
32
32
  marginTop: string;
33
- marginLeft: string;
34
- marginRight: string;
33
+ marginStart: string;
34
+ marginEnd: string;
35
35
  fontSize: string;
36
36
  fontWeight: string;
37
37
  lineHeight: string;
@@ -39,8 +39,8 @@ export declare const headings: {
39
39
  fallback: {
40
40
  width: string;
41
41
  marginTop: string;
42
- marginLeft: string;
43
- marginRight: string;
42
+ marginStart: string;
43
+ marginEnd: string;
44
44
  fontSize: string;
45
45
  fontWeight: string;
46
46
  lineHeight: string;
@@ -67,8 +67,8 @@ declare const Heading: {
67
67
  h1: {
68
68
  width: string;
69
69
  marginTop: string;
70
- marginLeft: string;
71
- marginRight: string;
70
+ marginStart: string;
71
+ marginEnd: string;
72
72
  fontSize: string;
73
73
  fontWeight: string;
74
74
  letterSpacing: string;
@@ -77,8 +77,8 @@ declare const Heading: {
77
77
  h2: {
78
78
  width: string;
79
79
  marginTop: string;
80
- marginLeft: string;
81
- marginRight: string;
80
+ marginStart: string;
81
+ marginEnd: string;
82
82
  fontSize: string;
83
83
  fontWeight: string;
84
84
  lineHeight: string;
@@ -86,8 +86,8 @@ declare const Heading: {
86
86
  h3: {
87
87
  width: string;
88
88
  marginTop: string;
89
- marginLeft: string;
90
- marginRight: string;
89
+ marginStart: string;
90
+ marginEnd: string;
91
91
  fontSize: string;
92
92
  fontWeight: string;
93
93
  lineHeight: string;
@@ -95,8 +95,8 @@ declare const Heading: {
95
95
  h4: {
96
96
  width: string;
97
97
  marginTop: string;
98
- marginLeft: string;
99
- marginRight: string;
98
+ marginStart: string;
99
+ marginEnd: string;
100
100
  fontSize: string;
101
101
  fontWeight: string;
102
102
  lineHeight: string;
@@ -104,8 +104,8 @@ declare const Heading: {
104
104
  h5: {
105
105
  width: string;
106
106
  marginTop: string;
107
- marginLeft: string;
108
- marginRight: string;
107
+ marginStart: string;
108
+ marginEnd: string;
109
109
  fontSize: string;
110
110
  fontWeight: string;
111
111
  lineHeight: string;
@@ -113,8 +113,8 @@ declare const Heading: {
113
113
  h6: {
114
114
  width: string;
115
115
  marginTop: string;
116
- marginLeft: string;
117
- marginRight: string;
116
+ marginStart: string;
117
+ marginEnd: string;
118
118
  fontSize: string;
119
119
  fontWeight: string;
120
120
  lineHeight: string;
@@ -122,8 +122,8 @@ declare const Heading: {
122
122
  primary: {
123
123
  width: string;
124
124
  marginTop: string;
125
- marginLeft: string;
126
- marginRight: string;
125
+ marginStart: string;
126
+ marginEnd: string;
127
127
  fontSize: string;
128
128
  fontWeight: string;
129
129
  letterSpacing: string;
@@ -132,8 +132,8 @@ declare const Heading: {
132
132
  secondary: {
133
133
  width: string;
134
134
  marginTop: string;
135
- marginLeft: string;
136
- marginRight: string;
135
+ marginStart: string;
136
+ marginEnd: string;
137
137
  fontSize: string;
138
138
  fontWeight: string;
139
139
  lineHeight: string;
@@ -141,8 +141,8 @@ declare const Heading: {
141
141
  tertiary: {
142
142
  width: string;
143
143
  marginTop: string;
144
- marginLeft: string;
145
- marginRight: string;
144
+ marginStart: string;
145
+ marginEnd: string;
146
146
  fontSize: string;
147
147
  fontWeight: string;
148
148
  lineHeight: string;
@@ -150,8 +150,8 @@ declare const Heading: {
150
150
  callout: {
151
151
  width: string;
152
152
  marginTop: string;
153
- marginLeft: string;
154
- marginRight: string;
153
+ marginStart: string;
154
+ marginEnd: string;
155
155
  fontSize: string;
156
156
  fontWeight: string;
157
157
  lineHeight: string;
package/dist/theme/components/hero.d.ts CHANGED
@@ -24,8 +24,8 @@ declare const Hero: {
24
24
  };
25
25
  paddingTop: string;
26
26
  paddingBottom: string;
27
- paddingRight: string;
28
- paddingLeft: string;
27
+ paddingEnd: string;
28
+ paddingStart: string;
29
29
  a: {
30
30
  color: string;
31
31
  display: string;
@@ -40,17 +40,7 @@ declare const Hero: {
40
40
  };
41
41
  secondary: {
42
42
  heading: {
43
- marginBottom: string;
44
43
  bg: string;
45
- color: string;
46
- flex: string;
47
- marginTop: string;
48
- paddingBottom: string;
49
- position: string;
50
- zIndex: string;
51
- order: {
52
- md: string;
53
- };
54
44
  _before: {
55
45
  bg: string;
56
46
  content: string;
@@ -60,46 +50,65 @@ declare const Hero: {
60
50
  width: string;
61
51
  zIndex: string;
62
52
  };
53
+ marginBottom: string;
54
+ color: string;
55
+ flex: string;
56
+ marginTop: string;
57
+ paddingBottom: string;
58
+ position: string;
59
+ zIndex: string;
60
+ order: string;
63
61
  };
64
62
  overflowX: string;
65
63
  content: {
66
- paddingRight: string;
67
- paddingLeft: string;
64
+ paddingEnd: string;
65
+ paddingStart: string;
68
66
  display: string;
69
67
  flexFlow: {
70
68
  base: string;
71
69
  md: string;
72
70
  };
71
+ marginY: string;
72
+ marginX: string;
73
+ maxWidth: string;
74
+ padding: string;
75
+ width: string;
76
+ };
77
+ imgWrapper: {
78
+ marginEnd: {
79
+ base: string;
80
+ md: string;
81
+ };
82
+ marginStart: {
83
+ base: string;
84
+ md: string;
85
+ };
86
+ flex: {
87
+ base: string;
88
+ md: string;
89
+ };
90
+ order: {
91
+ base: string;
92
+ md: string;
93
+ };
73
94
  img: {
74
- flex: {
75
- base: string;
76
- md: string;
77
- };
78
- order: {
79
- md: string;
80
- };
81
95
  height: string;
82
96
  minWidth: string;
83
97
  objectFit: string;
84
98
  width: string;
85
99
  };
86
- marginY: string;
87
- marginX: string;
88
- maxWidth: string;
89
- paddingTop: string;
90
- paddingBottom: string;
91
- width: string;
92
100
  };
93
101
  bodyText: {
94
102
  paddingBottom: string;
95
- paddingTop: string;
96
- paddingRight: {
103
+ paddingEnd: {
97
104
  md: string;
98
105
  };
106
+ paddingTop: string;
99
107
  flex: {
100
108
  md: string;
101
109
  };
102
110
  order: {
111
+ base: string;
103
112
  md: string;
104
113
  };
105
114
  };
@@ -123,49 +132,58 @@ declare const Hero: {
123
132
  paddingBottom: string;
124
133
  position: string;
125
134
  zIndex: string;
126
- order: {
127
- md: string;
128
- };
135
+ order: string;
129
136
  };
130
137
  overflowX: string;
131
138
  content: {
132
- paddingRight: string;
133
- paddingLeft: string;
139
+ paddingEnd: string;
140
+ paddingStart: string;
134
141
  display: string;
135
142
  flexFlow: {
136
143
  base: string;
137
144
  md: string;
138
145
  };
146
+ marginY: string;
147
+ marginX: string;
148
+ maxWidth: string;
149
+ padding: string;
150
+ width: string;
151
+ };
152
+ imgWrapper: {
153
+ marginEnd: {
154
+ base: string;
155
+ md: string;
156
+ };
157
+ marginStart: {
158
+ base: string;
159
+ md: string;
160
+ };
161
+ flex: {
162
+ base: string;
163
+ md: string;
164
+ };
165
+ order: {
166
+ base: string;
167
+ md: string;
168
+ };
139
169
  img: {
140
- flex: {
141
- base: string;
142
- md: string;
143
- };
144
- order: {
145
- md: string;
146
- };
147
170
  height: string;
148
171
  minWidth: string;
149
172
  objectFit: string;
150
173
  width: string;
151
174
  };
152
- marginY: string;
153
- marginX: string;
154
- maxWidth: string;
155
- paddingTop: string;
156
- paddingBottom: string;
157
- width: string;
158
175
  };
159
176
  bodyText: {
160
177
  paddingBottom: string;
161
- paddingTop: string;
162
- paddingRight: {
178
+ paddingEnd: {
163
179
  md: string;
164
180
  };
181
+ paddingTop: string;
165
182
  flex: {
166
183
  md: string;
167
184
  };
168
185
  order: {
186
+ base: string;
169
187
  md: string;
170
188
  };
171
189
  };
@@ -189,49 +207,58 @@ declare const Hero: {
189
207
  paddingBottom: string;
190
208
  position: string;
191
209
  zIndex: string;
192
- order: {
193
- md: string;
194
- };
210
+ order: string;
195
211
  };
196
212
  overflowX: string;
197
213
  content: {
198
- paddingRight: string;
199
- paddingLeft: string;
214
+ paddingEnd: string;
215
+ paddingStart: string;
200
216
  display: string;
201
217
  flexFlow: {
202
218
  base: string;
203
219
  md: string;
204
220
  };
221
+ marginY: string;
222
+ marginX: string;
223
+ maxWidth: string;
224
+ padding: string;
225
+ width: string;
226
+ };
227
+ imgWrapper: {
228
+ marginEnd: {
229
+ base: string;
230
+ md: string;
231
+ };
232
+ marginStart: {
233
+ base: string;
234
+ md: string;
235
+ };
236
+ flex: {
237
+ base: string;
238
+ md: string;
239
+ };
240
+ order: {
241
+ base: string;
242
+ md: string;
243
+ };
205
244
  img: {
206
- flex: {
207
- base: string;
208
- md: string;
209
- };
210
- order: {
211
- md: string;
212
- };
213
245
  height: string;
214
246
  minWidth: string;
215
247
  objectFit: string;
216
248
  width: string;
217
249
  };
218
- marginY: string;
219
- marginX: string;
220
- maxWidth: string;
221
- paddingTop: string;
222
- paddingBottom: string;
223
- width: string;
224
250
  };
225
251
  bodyText: {
226
252
  paddingBottom: string;
227
- paddingTop: string;
228
- paddingRight: {
253
+ paddingEnd: {
229
254
  md: string;
230
255
  };
256
+ paddingTop: string;
231
257
  flex: {
232
258
  md: string;
233
259
  };
234
260
  order: {
261
+ base: string;
235
262
  md: string;
236
263
  };
237
264
  };
@@ -255,49 +282,58 @@ declare const Hero: {
255
282
  paddingBottom: string;
256
283
  position: string;
257
284
  zIndex: string;
258
- order: {
259
- md: string;
260
- };
285
+ order: string;
261
286
  };
262
287
  overflowX: string;
263
288
  content: {
264
- paddingRight: string;
265
- paddingLeft: string;
289
+ paddingEnd: string;
290
+ paddingStart: string;
266
291
  display: string;
267
292
  flexFlow: {
268
293
  base: string;
269
294
  md: string;
270
295
  };
296
+ marginY: string;
297
+ marginX: string;
298
+ maxWidth: string;
299
+ padding: string;
300
+ width: string;
301
+ };
302
+ imgWrapper: {
303
+ marginEnd: {
304
+ base: string;
305
+ md: string;
306
+ };
307
+ marginStart: {
308
+ base: string;
309
+ md: string;
310
+ };
311
+ flex: {
312
+ base: string;
313
+ md: string;
314
+ };
315
+ order: {
316
+ base: string;
317
+ md: string;
318
+ };
271
319
  img: {
272
- flex: {
273
- base: string;
274
- md: string;
275
- };
276
- order: {
277
- md: string;
278
- };
279
320
  height: string;
280
321
  minWidth: string;
281
322
  objectFit: string;
282
323
  width: string;
283
324
  };
284
- marginY: string;
285
- marginX: string;
286
- maxWidth: string;
287
- paddingTop: string;
288
- paddingBottom: string;
289
- width: string;
290
325
  };
291
326
  bodyText: {
292
327
  paddingBottom: string;
293
- paddingTop: string;
294
- paddingRight: {
328
+ paddingEnd: {
295
329
  md: string;
296
330
  };
331
+ paddingTop: string;
297
332
  flex: {
298
333
  md: string;
299
334
  };
300
335
  order: {
336
+ base: string;
301
337
  md: string;
302
338
  };
303
339
  };
@@ -321,49 +357,58 @@ declare const Hero: {
321
357
  paddingBottom: string;
322
358
  position: string;
323
359
  zIndex: string;
324
- order: {
325
- md: string;
326
- };
360
+ order: string;
327
361
  };
328
362
  overflowX: string;
329
363
  content: {
330
- paddingRight: string;
331
- paddingLeft: string;
364
+ paddingEnd: string;
365
+ paddingStart: string;
332
366
  display: string;
333
367
  flexFlow: {
334
368
  base: string;
335
369
  md: string;
336
370
  };
371
+ marginY: string;
372
+ marginX: string;
373
+ maxWidth: string;
374
+ padding: string;
375
+ width: string;
376
+ };
377
+ imgWrapper: {
378
+ marginEnd: {
379
+ base: string;
380
+ md: string;
381
+ };
382
+ marginStart: {
383
+ base: string;
384
+ md: string;
385
+ };
386
+ flex: {
387
+ base: string;
388
+ md: string;
389
+ };
390
+ order: {
391
+ base: string;
392
+ md: string;
393
+ };
337
394
  img: {
338
- flex: {
339
- base: string;
340
- md: string;
341
- };
342
- order: {
343
- md: string;
344
- };
345
395
  height: string;
346
396
  minWidth: string;
347
397
  objectFit: string;
348
398
  width: string;
349
399
  };
350
- marginY: string;
351
- marginX: string;
352
- maxWidth: string;
353
- paddingTop: string;
354
- paddingBottom: string;
355
- width: string;
356
400
  };
357
401
  bodyText: {
358
402
  paddingBottom: string;
359
- paddingTop: string;
360
- paddingRight: {
403
+ paddingEnd: {
361
404
  md: string;
362
405
  };
406
+ paddingTop: string;
363
407
  flex: {
364
408
  md: string;
365
409
  };
366
410
  order: {
411
+ base: string;
367
412
  md: string;
368
413
  };
369
414
  };
@@ -382,10 +427,6 @@ declare const Hero: {
382
427
  marginY: string;
383
428
  marginX: string;
384
429
  maxWidth: string;
385
- paddingTop: string;
386
- paddingBottom: string;
387
- paddingRight: string;
388
- paddingLeft: string;
389
430
  width: string;
390
431
  };
391
432
  heading: {
@@ -469,29 +510,32 @@ declare const Hero: {
469
510
  lg: string;
470
511
  };
471
512
  paddingBottom: string;
472
- paddingRight: string;
473
- paddingLeft: string;
513
+ paddingEnd: string;
514
+ paddingStart: string;
474
515
  padding: {
475
516
  lg: string;
476
517
  };
477
518
  marginY: string;
478
519
  marginX: string;
479
520
  maxWidth: string;
480
- paddingTop: string;
481
521
  width: string;
482
522
  };
483
- img: {
523
+ imgWrapper: {
484
524
  marginBottom: {
485
525
  base: string;
486
526
  lg: string;
487
527
  };
488
- marginRight: {
528
+ marginEnd: {
529
+ base: string;
489
530
  lg: string;
490
531
  };
491
- maxWidth: {
532
+ marginStart: {
492
533
  base: string;
534
+ };
535
+ maxWidth: {
493
536
  lg: string;
494
537
  };
538
+ width: string;
495
539
  };
496
540
  };
497
541
  };
package/dist/theme/components/horizontalRule.d.ts CHANGED
@@ -8,8 +8,8 @@ declare const HorizontalRule: {
8
8
  height: string;
9
9
  marginBottom: string;
10
10
  marginTop: string;
11
- marginLeft: string | number;
12
- marginRight: string | number;
11
+ marginStart: string | number;
12
+ marginEnd: string | number;
13
13
  };
14
14
  };
15
15
  export default HorizontalRule;