@amsterdam/design-system-react 0.7.1 → 0.9.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 (7) hide show
  1. package/README.md +13 -11
  2. package/dist/index.cjs.js +335 -122
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.d.ts +324 -166
  5. package/dist/index.esm.js +327 -121
  6. package/dist/index.esm.js.map +1 -1
  7. package/package.json +23 -22
package/dist/index.d.ts CHANGED
@@ -1,52 +1,151 @@
1
1
  import * as react from 'react';
2
- import { HTMLAttributes, PropsWithChildren, InputHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
2
+ import { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
3
+
4
+ type ErrorMessageProps = {
5
+ /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
6
+ prefix?: string;
7
+ } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
8
+ declare const ErrorMessage: react.ForwardRefExoticComponent<{
9
+ /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
10
+ prefix?: string | undefined;
11
+ } & HTMLAttributes<HTMLParagraphElement> & {
12
+ children?: react.ReactNode;
13
+ } & react.RefAttributes<HTMLParagraphElement>>;
14
+
15
+ type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
16
+ declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
17
+
18
+ type FieldProps = {
19
+ /** Whether the field has an input with a validation error */
20
+ invalid?: boolean;
21
+ } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
22
+ declare const Field: react.ForwardRefExoticComponent<{
23
+ /** Whether the field has an input with a validation error */
24
+ invalid?: boolean | undefined;
25
+ } & HTMLAttributes<HTMLDivElement> & {
26
+ children?: react.ReactNode;
27
+ } & react.RefAttributes<HTMLDivElement>>;
28
+
29
+ type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
30
+
31
+ type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
32
+
33
+ type SelectProps = {
34
+ /** Whether the value fails a validation rule. */
35
+ invalid?: boolean;
36
+ } & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
37
+ declare const Select: react.ForwardRefExoticComponent<{
38
+ /** Whether the value fails a validation rule. */
39
+ invalid?: boolean | undefined;
40
+ } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
41
+ children?: react.ReactNode;
42
+ } & react.RefAttributes<HTMLSelectElement>> & {
43
+ Option: react.ForwardRefExoticComponent<SelectOptionProps & {
44
+ children?: react.ReactNode;
45
+ } & react.RefAttributes<HTMLOptionElement>>;
46
+ Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
47
+ children?: react.ReactNode;
48
+ } & react.RefAttributes<HTMLOptGroupElement>>;
49
+ };
50
+
51
+ type TimeInputProps = {
52
+ /** Whether the value fails a validation rule. */
53
+ invalid?: boolean;
54
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
55
+ declare const TimeInput: react.ForwardRefExoticComponent<{
56
+ /** Whether the value fails a validation rule. */
57
+ invalid?: boolean | undefined;
58
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
59
+
60
+ type DateInputProps = {
61
+ /** Whether the value fails a validation rule. */
62
+ invalid?: boolean;
63
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
64
+ declare const DateInput: react.ForwardRefExoticComponent<{
65
+ /** Whether the value fails a validation rule. */
66
+ invalid?: boolean | undefined;
67
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
3
68
 
4
69
  declare const avatarColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "red", "yellow"];
5
70
  type AvatarColor = (typeof avatarColors)[number];
6
71
  type AvatarProps = {
72
+ /** The background colour. */
7
73
  color?: AvatarColor;
74
+ /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
8
75
  imageSrc?: string;
76
+ /** The text content. Should be the user’s initials. The first two characters will be displayed. */
9
77
  label: string;
10
78
  } & HTMLAttributes<HTMLSpanElement>;
11
79
  declare const Avatar: react.ForwardRefExoticComponent<{
80
+ /** The background colour. */
12
81
  color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "red" | "yellow" | undefined;
82
+ /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
13
83
  imageSrc?: string | undefined;
84
+ /** The text content. Should be the user’s initials. The first two characters will be displayed. */
14
85
  label: string;
15
86
  } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
16
87
 
17
88
  type FormFieldCharacterCounterProps = HTMLAttributes<HTMLDivElement> & {
89
+ /** The current length of the field’s value. */
18
90
  length: number;
91
+ /** The maximum length of the field’s value. */
19
92
  maxLength: number;
20
93
  };
21
94
  declare const FormFieldCharacterCounter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
95
+ /** The current length of the field’s value. */
22
96
  length: number;
97
+ /** The maximum length of the field’s value. */
23
98
  maxLength: number;
24
99
  } & react.RefAttributes<HTMLDivElement>>;
25
100
 
101
+ type DescriptionListProps = {
102
+ /** Changes the text colour for readability on a dark background. */
103
+ inverseColor?: boolean;
104
+ } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
105
+ declare const DescriptionList: react.ForwardRefExoticComponent<{
106
+ /** Changes the text colour for readability on a dark background. */
107
+ inverseColor?: boolean | undefined;
108
+ } & HTMLAttributes<HTMLDListElement> & {
109
+ children?: react.ReactNode;
110
+ } & react.RefAttributes<HTMLDListElement>> & {
111
+ Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
112
+ children?: react.ReactNode;
113
+ } & react.RefAttributes<HTMLElement>>;
114
+ Details: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
115
+ children?: react.ReactNode;
116
+ } & react.RefAttributes<HTMLElement>>;
117
+ };
118
+
119
+ type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
120
+
121
+ type DescriptionListDetailsProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
122
+
26
123
  declare const rowGapSizes: Array<string>;
27
124
  type RowTag = 'article' | 'div' | 'section';
28
125
  type RowGap = (typeof rowGapSizes)[number];
29
126
  type RowProps = {
30
- /** The element to render the row with. */
127
+ /** The HTML element to use. */
31
128
  as?: RowTag;
32
- /** The amount of vertical space between the row’s children. */
129
+ /** The amount of vertical space between items. */
33
130
  gap?: RowGap;
34
- } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
131
+ } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
35
132
  declare const Row: react.ForwardRefExoticComponent<{
36
- /** The element to render the row with. */
133
+ /** The HTML element to use. */
37
134
  as?: RowTag | undefined;
38
- /** The amount of vertical space between the row’s children. */
135
+ /** The amount of vertical space between items. */
39
136
  gap?: string | undefined;
40
- } & HTMLAttributes<HTMLDivElement> & {
137
+ } & HTMLAttributes<HTMLElement> & {
41
138
  children?: react.ReactNode;
42
- } & react.RefAttributes<HTMLDivElement>>;
139
+ } & react.RefAttributes<unknown>>;
43
140
 
44
141
  type RadioProps = {
142
+ /** Whether the value fails a validation rule. */
45
143
  invalid?: boolean;
46
- } & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
144
+ } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
47
145
  declare const Radio: react.ForwardRefExoticComponent<{
146
+ /** Whether the value fails a validation rule. */
48
147
  invalid?: boolean | undefined;
49
- } & InputHTMLAttributes<HTMLInputElement> & {
148
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
50
149
  children?: react.ReactNode;
51
150
  } & react.RefAttributes<HTMLInputElement>>;
52
151
 
@@ -70,46 +169,60 @@ declare const Tabs: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElemen
70
169
  };
71
170
 
72
171
  type TabsPanelProps = {
172
+ /** The identifier of the corresponding Tab. */
73
173
  tab: number;
74
174
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
75
175
 
76
176
  type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
77
177
 
78
178
  type TabsButtonProps = {
179
+ /** An identifier. */
79
180
  tab: number;
80
181
  } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
81
182
 
82
- type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
183
+ type TextAreaProps = {
184
+ /** Whether the value fails a validation rule. */
185
+ invalid?: boolean;
186
+ /** Allows the user to resize the text box. The default is resizing in both directions. */
83
187
  resize?: 'none' | 'horizontal' | 'vertical';
84
- };
85
- declare const TextArea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
188
+ } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
189
+ declare const TextArea: react.ForwardRefExoticComponent<{
190
+ /** Whether the value fails a validation rule. */
191
+ invalid?: boolean | undefined;
192
+ /** Allows the user to resize the text box. The default is resizing in both directions. */
86
193
  resize?: "none" | "horizontal" | "vertical" | undefined;
87
- } & react.RefAttributes<HTMLTextAreaElement>>;
194
+ } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
88
195
 
89
196
  declare const columnGapSizes: Array<string>;
90
197
  type ColumnTag = 'article' | 'div' | 'section';
91
198
  type ColumnGap = (typeof columnGapSizes)[number];
92
199
  type ColumnProps = {
93
- /** The element to render the column with. */
200
+ /** The HTML element to use. */
94
201
  as?: ColumnTag;
95
- /** The amount of vertical space between the column’s children. */
202
+ /** The amount of vertical space between items. */
96
203
  gap?: ColumnGap;
97
- } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
204
+ } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
98
205
  declare const Column: react.ForwardRefExoticComponent<{
99
- /** The element to render the column with. */
206
+ /** The HTML element to use. */
100
207
  as?: ColumnTag | undefined;
101
- /** The amount of vertical space between the column’s children. */
208
+ /** The amount of vertical space between items. */
102
209
  gap?: string | undefined;
103
- } & HTMLAttributes<HTMLDivElement> & {
210
+ } & HTMLAttributes<HTMLElement> & {
104
211
  children?: react.ReactNode;
105
- } & react.RefAttributes<HTMLDivElement>>;
212
+ } & react.RefAttributes<unknown>>;
106
213
 
107
- type FieldsetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
214
+ type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
215
+ /** Whether the field set has an input with a validation error */
216
+ invalid?: boolean;
217
+ /** The text for the caption. */
108
218
  legend: string;
109
219
  };
110
- declare const Fieldset: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
220
+ declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
111
221
  children?: react.ReactNode;
112
222
  } & {
223
+ /** Whether the field set has an input with a validation error */
224
+ invalid?: boolean | undefined;
225
+ /** The text for the caption. */
113
226
  legend: string;
114
227
  } & react.RefAttributes<HTMLFieldSetElement>>;
115
228
 
@@ -118,7 +231,6 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
118
231
  children?: react.ReactNode;
119
232
  } & react.RefAttributes<HTMLUListElement>> & {
120
233
  Link: react.ForwardRefExoticComponent<{
121
- href: string;
122
234
  icon?: Function | undefined;
123
235
  onBackground?: ("default" | "light" | "dark") | undefined;
124
236
  size?: "small" | "large" | undefined;
@@ -129,30 +241,26 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
129
241
 
130
242
  type BackgroundName = 'default' | 'light' | 'dark';
131
243
  type LinkListLinkProps = {
132
- /** The target url for the link. */
133
- href: string;
134
- /**
135
- * An icon to display instead of the default chevron.
136
- * Don’t mix custom icons with chevrons in one list.
137
- */
244
+ /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
138
245
  icon?: Function;
139
- /** Whether the link sits on a dark background. */
246
+ /** Describes the underlying background colour. Allows the text to provide visual contrast. */
140
247
  onBackground?: BackgroundName;
141
- /**
142
- * The text size for the link.
143
- * Use the same size for all items in the list.
144
- */
248
+ /** The size of the text. Use the same size for all items in the list. */
145
249
  size?: 'small' | 'large';
146
250
  } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
147
251
 
148
- declare const badgeColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
252
+ declare const badgeColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
149
253
  type BadgeColor = (typeof badgeColors)[number];
150
254
  type BadgeProps = {
255
+ /** The background colour. */
151
256
  color?: BadgeColor;
257
+ /** The text content. */
152
258
  label: string | number;
153
259
  } & HTMLAttributes<HTMLElement>;
154
260
  declare const Badge: react.ForwardRefExoticComponent<{
155
- color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
261
+ /** The background colour. */
262
+ color?: "black" | "blue" | "dark-green" | "green" | "grey-1" | "grey-2" | "grey-3" | "light-blue" | "magenta" | "orange" | "purple" | "red" | "white" | "yellow" | undefined;
263
+ /** The text content. */
156
264
  label: string | number;
157
265
  } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
158
266
 
@@ -195,15 +303,23 @@ declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
195
303
  type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
196
304
 
197
305
  type IconButtonProps = {
306
+ /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
198
307
  label: string;
308
+ /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
199
309
  onBackground?: 'light' | 'dark';
310
+ /** The size of the icon. Corresponds with the text levels. */
200
311
  size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
312
+ /** The component rendering the icon’s markup. */
201
313
  svg?: Function;
202
314
  } & ButtonHTMLAttributes<HTMLButtonElement>;
203
315
  declare const IconButton: react.ForwardRefExoticComponent<{
316
+ /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
204
317
  label: string;
318
+ /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
205
319
  onBackground?: "light" | "dark" | undefined;
320
+ /** The size of the icon. Corresponds with the text levels. */
206
321
  size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
322
+ /** The component rendering the icon’s markup. */
207
323
  svg?: Function | undefined;
208
324
  } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
209
325
 
@@ -224,24 +340,37 @@ declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEle
224
340
 
225
341
  type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
226
342
  type LogoProps = {
343
+ /** The name of the brand for which to display the logo. */
227
344
  brand?: LogoBrand;
228
345
  } & SVGProps<SVGSVGElement>;
229
346
  declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
230
347
 
231
348
  type HeaderProps = {
349
+ /** The name of the brand for which to display the logo. */
232
350
  logoBrand?: LogoBrand;
351
+ /** The url for the link on the logo. */
233
352
  logoLink?: string;
353
+ /** The accessible text for the link on the logo. */
234
354
  logoLinkTitle?: string;
355
+ /** The name of the application. */
235
356
  title?: string;
357
+ /** The list of menu links. Use a Page Menu here. */
236
358
  links?: ReactNode;
359
+ /** A button to toggle the visibility of a Mega Menu. */
237
360
  menu?: ReactNode;
238
361
  } & HTMLAttributes<HTMLElement>;
239
362
  declare const Header: react.ForwardRefExoticComponent<{
363
+ /** The name of the brand for which to display the logo. */
240
364
  logoBrand?: LogoBrand | undefined;
365
+ /** The url for the link on the logo. */
241
366
  logoLink?: string | undefined;
367
+ /** The accessible text for the link on the logo. */
242
368
  logoLinkTitle?: string | undefined;
369
+ /** The name of the application. */
243
370
  title?: string | undefined;
371
+ /** The list of menu links. Use a Page Menu here. */
244
372
  links?: ReactNode;
373
+ /** A button to toggle the visibility of a Mega Menu. */
245
374
  menu?: ReactNode;
246
375
  } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
247
376
 
@@ -250,77 +379,100 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
250
379
  children?: react.ReactNode;
251
380
  } & react.RefAttributes<HTMLElement>>;
252
381
 
253
- type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
254
- declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
382
+ type TextInputProps = {
383
+ /** Whether the value fails a validation rule. */
384
+ invalid?: boolean;
385
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
386
+ declare const TextInput: react.ForwardRefExoticComponent<{
387
+ /** Whether the value fails a validation rule. */
388
+ invalid?: boolean | undefined;
389
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
255
390
 
256
391
  type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
257
392
  declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
258
393
  children?: react.ReactNode;
259
394
  } & react.RefAttributes<HTMLFormElement>> & {
260
- Button: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
395
+ Button: react.ForwardRefExoticComponent<{
396
+ label?: string | undefined;
397
+ } & HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
261
398
  Input: react.ForwardRefExoticComponent<{
399
+ invalid?: boolean | undefined;
262
400
  label?: string | undefined;
263
401
  } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
264
402
  };
265
403
 
266
404
  type DialogProps = {
405
+ /** The button(s) in the footer. Start with a primary button. */
267
406
  actions?: ReactNode;
407
+ /** The label for the button that dismisses the Dialog. */
408
+ closeButtonLabel?: string;
268
409
  } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
269
410
  declare const Dialog: react.ForwardRefExoticComponent<{
411
+ /** The button(s) in the footer. Start with a primary button. */
270
412
  actions?: ReactNode;
413
+ /** The label for the button that dismisses the Dialog. */
414
+ closeButtonLabel?: string | undefined;
271
415
  } & DialogHTMLAttributes<HTMLDialogElement> & {
272
416
  children?: ReactNode;
273
417
  } & react.RefAttributes<HTMLDialogElement>>;
274
418
 
275
419
  type ImageProps = {
276
- cover?: Boolean;
420
+ /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
421
+ cover?: boolean;
277
422
  } & ImgHTMLAttributes<HTMLImageElement>;
278
423
  declare const Image: react.ForwardRefExoticComponent<{
279
- cover?: Boolean | undefined;
424
+ /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
425
+ cover?: boolean | undefined;
280
426
  } & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
281
427
 
282
428
  type PaginationProps = {
283
- /**
284
- * The maximum amount of pages shown. This has a lower limit of 5
285
- */
429
+ /** The maximum amount of pages shown. Minimum value: 5. */
286
430
  maxVisiblePages?: number;
287
- /**
288
- * Callback triggered when interaction changes the page number.
289
- */
431
+ /** The accessible name for the link to the next page. */
432
+ nextAriaLabel?: string;
433
+ /** The label for the link to the next page. */
434
+ nextLabel?: string;
435
+ /** A function to run when the page number changes. */
290
436
  onPageChange?: (page: number) => void;
291
- /**
292
- * The current page number.
293
- */
437
+ /** The current page number. */
294
438
  page?: number;
295
- /**
296
- * The total amount of pages.
297
- */
439
+ /** The accessible name for the link to the previous page. */
440
+ previousAriaLabel?: string;
441
+ /** The label for the link to the previous page. */
442
+ previousLabel?: string;
443
+ /** The total amount of pages. */
298
444
  totalPages: number;
299
445
  } & HTMLAttributes<HTMLElement>;
300
446
  declare const Pagination: react.ForwardRefExoticComponent<{
301
- /**
302
- * The maximum amount of pages shown. This has a lower limit of 5
303
- */
447
+ /** The maximum amount of pages shown. Minimum value: 5. */
304
448
  maxVisiblePages?: number | undefined;
305
- /**
306
- * Callback triggered when interaction changes the page number.
307
- */
449
+ /** The accessible name for the link to the next page. */
450
+ nextAriaLabel?: string | undefined;
451
+ /** The label for the link to the next page. */
452
+ nextLabel?: string | undefined;
453
+ /** A function to run when the page number changes. */
308
454
  onPageChange?: ((page: number) => void) | undefined;
309
- /**
310
- * The current page number.
311
- */
455
+ /** The current page number. */
312
456
  page?: number | undefined;
313
- /**
314
- * The total amount of pages.
315
- */
457
+ /** The accessible name for the link to the previous page. */
458
+ previousAriaLabel?: string | undefined;
459
+ /** The label for the link to the previous page. */
460
+ previousLabel?: string | undefined;
461
+ /** The total amount of pages. */
316
462
  totalPages: number;
317
463
  } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
318
464
 
319
465
  type ScreenMaxWidth = 'wide' | 'x-wide';
320
466
  type ScreenProps = {
467
+ /** Whether the screen should stretch to the full height of the viewport. */
468
+ fullHeight?: boolean;
469
+ /** The maximum width of the screen. */
321
470
  maxWidth?: ScreenMaxWidth;
322
471
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
323
472
  declare const Screen: react.ForwardRefExoticComponent<{
473
+ /** Whether the screen should stretch to the full height of the viewport. */
474
+ fullHeight?: boolean | undefined;
475
+ /** The maximum width of the screen. */
324
476
  maxWidth?: ScreenMaxWidth | undefined;
325
477
  } & HTMLAttributes<HTMLDivElement> & {
326
478
  children?: react.ReactNode;
@@ -334,15 +486,19 @@ declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLIn
334
486
  declare const spotlightColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
335
487
  type SpotlightColor = (typeof spotlightColors)[number];
336
488
  type SpotlightProps = {
489
+ /** The HTML element to use. */
337
490
  as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
491
+ /** The background colour. */
338
492
  color?: SpotlightColor;
339
493
  } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
340
494
  declare const Spotlight: react.ForwardRefExoticComponent<{
495
+ /** The HTML element to use. */
341
496
  as?: "article" | "aside" | "div" | "footer" | "section" | undefined;
497
+ /** The background colour. */
342
498
  color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
343
499
  } & HTMLAttributes<HTMLElement> & {
344
500
  children?: react.ReactNode;
345
- } & react.RefAttributes<HTMLDivElement>>;
501
+ } & react.RefAttributes<unknown>>;
346
502
 
347
503
  type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
348
504
  declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
@@ -359,6 +515,7 @@ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
359
515
  };
360
516
 
361
517
  type CardHeadingGroupProps = {
518
+ /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
362
519
  tagline: string;
363
520
  } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
364
521
 
@@ -367,68 +524,50 @@ type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
367
524
  type HeadingLevel = 1 | 2 | 3 | 4;
368
525
  type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
369
526
  type HeadingProps = {
370
- /**
371
- * Het hiërarchische niveau van de titel.
372
- */
527
+ /** Changes the text colour for readability on a dark background. */
528
+ inverseColor?: boolean;
529
+ /** The hierarchical level within the document. */
373
530
  level?: HeadingLevel;
374
- /**
375
- * De visuele grootte van de titel.
376
- * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
377
- */
531
+ /** Uses larger or smaller text without changing its position in the heading hierarchy. */
378
532
  size?: HeadingSize;
379
- /**
380
- * De kleur van de titel
381
- * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
382
- */
383
- inverseColor?: boolean;
384
533
  } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
385
534
  declare const Heading: react.ForwardRefExoticComponent<{
386
- /**
387
- * Het hiërarchische niveau van de titel.
388
- */
535
+ /** Changes the text colour for readability on a dark background. */
536
+ inverseColor?: boolean | undefined;
537
+ /** The hierarchical level within the document. */
389
538
  level?: HeadingLevel | undefined;
390
- /**
391
- * De visuele grootte van de titel.
392
- * Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
393
- */
539
+ /** Uses larger or smaller text without changing its position in the heading hierarchy. */
394
540
  size?: HeadingSize | undefined;
395
- /**
396
- * De kleur van de titel
397
- * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
398
- */
399
- inverseColor?: boolean | undefined;
400
541
  } & HTMLAttributes<HTMLHeadingElement> & {
401
542
  children?: react.ReactNode;
402
543
  } & react.RefAttributes<HTMLHeadingElement>>;
403
544
 
404
545
  type AlertProps = {
405
- /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
546
+ /** Whether the user can dismiss the Alert. Adds a button to its top right. */
406
547
  closeable?: boolean;
407
- /**
408
- * The hierarchical level of the alert title within the document.
409
- * @default 2
410
- */
548
+ /** The label for the button that dismisses the Alert. */
549
+ closeButtonLabel?: string;
550
+ /** The hierarchical level of the Alert’s heading within the document. */
411
551
  headingLevel?: HeadingProps['level'];
412
- /** Allows a callback when dismissing the alert. */
552
+ /** A function to run when dismissing. */
413
553
  onClose?: () => void;
414
- /** Highlights the meaning or tone of the message. */
554
+ /** The significance of the message conveyed. */
415
555
  severity?: 'error' | 'info' | 'success' | 'warning';
416
- /** The title for the alert. */
556
+ /** The text for the Heading. */
417
557
  title?: string;
418
558
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
419
559
  declare const Alert: react.ForwardRefExoticComponent<{
420
- /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
560
+ /** Whether the user can dismiss the Alert. Adds a button to its top right. */
421
561
  closeable?: boolean | undefined;
422
- /**
423
- * The hierarchical level of the alert title within the document.
424
- * @default 2
425
- */
562
+ /** The label for the button that dismisses the Alert. */
563
+ closeButtonLabel?: string | undefined;
564
+ /** The hierarchical level of the Alert’s heading within the document. */
426
565
  headingLevel?: HeadingProps['level'];
427
- /** Allows a callback when dismissing the alert. */
566
+ /** A function to run when dismissing. */
428
567
  onClose?: (() => void) | undefined;
429
- /** Highlights the meaning or tone of the message. */
568
+ /** The significance of the message conveyed. */
430
569
  severity?: "error" | "info" | "success" | "warning" | undefined;
431
- /** The title for the alert. */
570
+ /** The text for the Heading. */
432
571
  title?: string | undefined;
433
572
  } & HTMLAttributes<HTMLDivElement> & {
434
573
  children?: react.ReactNode;
@@ -436,9 +575,11 @@ declare const Alert: react.ForwardRefExoticComponent<{
436
575
 
437
576
  type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
438
577
  type AspectRatioProps = {
578
+ /** The dimensions. */
439
579
  ratio?: Ratio;
440
580
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
441
581
  declare const AspectRatio: react.ForwardRefExoticComponent<{
582
+ /** The dimensions. */
442
583
  ratio?: Ratio | undefined;
443
584
  } & HTMLAttributes<HTMLDivElement> & {
444
585
  children?: react.ReactNode;
@@ -465,18 +606,16 @@ type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
465
606
  type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
466
607
 
467
608
  type PageMenuProps = {
468
- /**
469
- * Whether the page menu’s items align to its end.
470
- * If the menu itself aligns to the end of its container, you should set this to `true`.
471
- */
609
+ /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
472
610
  alignEnd?: boolean;
611
+ /** Whether menu items should wrap if they don’t fit on a single row. */
612
+ wrap?: boolean;
473
613
  } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
474
614
  declare const PageMenu: react.ForwardRefExoticComponent<{
475
- /**
476
- * Whether the page menu’s items align to its end.
477
- * If the menu itself aligns to the end of its container, you should set this to `true`.
478
- */
615
+ /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
479
616
  alignEnd?: boolean | undefined;
617
+ /** Whether menu items should wrap if they don’t fit on a single row. */
618
+ wrap?: boolean | undefined;
480
619
  } & HTMLAttributes<HTMLUListElement> & {
481
620
  children?: react.ReactNode;
482
621
  } & react.RefAttributes<HTMLUListElement>> & {
@@ -492,62 +631,64 @@ type PageMenuLinkProps = {
492
631
  } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
493
632
 
494
633
  declare const TopTaskLink: react.ForwardRefExoticComponent<{
634
+ /** The title. */
495
635
  label: string;
636
+ /** The text content. */
496
637
  description: string;
497
638
  } & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
498
639
 
499
640
  type BlockquoteProps = {
500
- /**
501
- * De kleur van het citaat.
502
- * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
503
- */
641
+ /** Changes the text colour for readability on a dark background. */
504
642
  inverseColor?: boolean;
505
643
  } & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
506
644
  declare const Blockquote: react.ForwardRefExoticComponent<{
507
- /**
508
- * De kleur van het citaat.
509
- * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
510
- */
645
+ /** Changes the text colour for readability on a dark background. */
511
646
  inverseColor?: boolean | undefined;
512
647
  } & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
513
648
  children?: react.ReactNode;
514
649
  } & react.RefAttributes<HTMLQuoteElement>>;
515
650
 
516
651
  type CheckboxProps = {
652
+ /** Whether the value fails a validation rule. */
517
653
  invalid?: boolean;
654
+ /** Allows being neither checked nor unchecked. */
518
655
  indeterminate?: boolean;
519
- } & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
656
+ } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
520
657
  declare const Checkbox: react.ForwardRefExoticComponent<{
658
+ /** Whether the value fails a validation rule. */
521
659
  invalid?: boolean | undefined;
660
+ /** Allows being neither checked nor unchecked. */
522
661
  indeterminate?: boolean | undefined;
523
- } & InputHTMLAttributes<HTMLInputElement> & {
662
+ } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
524
663
  children?: react.ReactNode;
525
664
  } & react.RefAttributes<HTMLInputElement>>;
526
665
 
527
666
  type PageHeadingProps = {
528
- /**
529
- * De kleur van de titel
530
- * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
531
- */
667
+ /** Changes the text colour for readability on a dark background. */
532
668
  inverseColor?: boolean;
533
669
  } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
534
670
  declare const PageHeading: react.ForwardRefExoticComponent<{
535
- /**
536
- * De kleur van de titel
537
- * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
538
- */
671
+ /** Changes the text colour for readability on a dark background. */
539
672
  inverseColor?: boolean | undefined;
540
673
  } & HTMLAttributes<HTMLHeadingElement> & {
541
674
  children?: react.ReactNode;
542
675
  } & react.RefAttributes<HTMLHeadingElement>>;
543
676
 
544
677
  type OrderedListProps = {
545
- markers?: boolean;
678
+ /** Changes the text colour for readability on a dark background. */
546
679
  inverseColor?: boolean;
680
+ /** Whether the list items show a marker. */
681
+ markers?: boolean;
682
+ /** The size of the text. */
683
+ size?: 'small';
547
684
  } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
548
685
  declare const OrderedList: react.ForwardRefExoticComponent<{
549
- markers?: boolean | undefined;
686
+ /** Changes the text colour for readability on a dark background. */
550
687
  inverseColor?: boolean | undefined;
688
+ /** Whether the list items show a marker. */
689
+ markers?: boolean | undefined;
690
+ /** The size of the text. */
691
+ size?: "small" | undefined;
551
692
  } & OlHTMLAttributes<HTMLOListElement> & {
552
693
  children?: react.ReactNode;
553
694
  } & react.RefAttributes<HTMLOListElement>> & {
@@ -558,71 +699,75 @@ declare const OrderedList: react.ForwardRefExoticComponent<{
558
699
 
559
700
  type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
560
701
 
702
+ type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
703
+
561
704
  type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
562
705
  declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
563
706
  children?: react.ReactNode;
564
707
  } & react.RefAttributes<HTMLElement>> & {
565
- Item: react.ForwardRefExoticComponent<{
566
- href: string;
567
- } & HTMLAttributes<HTMLLIElement> & {
568
- children?: react.ReactNode;
569
- } & react.RefAttributes<HTMLLIElement>>;
708
+ Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
570
709
  };
571
710
 
572
- type BreadcrumbItemProps = {
573
- href: string;
574
- } & PropsWithChildren<HTMLAttributes<HTMLLIElement>>;
575
-
576
711
  type LinkOnBackground = 'default' | 'light' | 'dark';
577
712
  type LinkVariant = 'standalone' | 'inline';
578
713
  type LinkProps = {
579
- variant?: LinkVariant;
714
+ /** Describes the underlying background colour. Allows the text to provide visual contrast. */
580
715
  onBackground?: LinkOnBackground;
716
+ /** Whether the link is inline or stands alone. */
717
+ variant?: LinkVariant;
581
718
  } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
582
719
  declare const Link: react.ForwardRefExoticComponent<{
583
- variant?: LinkVariant | undefined;
720
+ /** Describes the underlying background colour. Allows the text to provide visual contrast. */
584
721
  onBackground?: LinkOnBackground | undefined;
722
+ /** Whether the link is inline or stands alone. */
723
+ variant?: LinkVariant | undefined;
585
724
  } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
586
725
 
587
726
  type ButtonProps = {
727
+ /** The level of prominence. Use a primary button only once per page or section. */
588
728
  variant?: 'primary' | 'secondary' | 'tertiary';
589
729
  } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
590
730
  declare const Button: react.ForwardRefExoticComponent<{
731
+ /** The level of prominence. Use a primary button only once per page or section. */
591
732
  variant?: "primary" | "secondary" | "tertiary" | undefined;
592
733
  } & ButtonHTMLAttributes<HTMLButtonElement> & {
593
734
  children?: react.ReactNode;
594
735
  } & react.RefAttributes<HTMLButtonElement>>;
595
736
 
596
737
  type ParagraphProps = {
597
- size?: 'small' | 'large';
598
- /**
599
- * De kleur van de paragraaf
600
- * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
601
- */
738
+ /** Changes the text colour for readability on a dark background. */
602
739
  inverseColor?: boolean;
740
+ /** The size of the text. */
741
+ size?: 'small' | 'large';
603
742
  } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
604
743
  declare const Paragraph: react.ForwardRefExoticComponent<{
605
- size?: "small" | "large" | undefined;
606
- /**
607
- * De kleur van de paragraaf
608
- * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
609
- */
744
+ /** Changes the text colour for readability on a dark background. */
610
745
  inverseColor?: boolean | undefined;
746
+ /** The size of the text. */
747
+ size?: "small" | "large" | undefined;
611
748
  } & HTMLAttributes<HTMLParagraphElement> & {
612
749
  children?: react.ReactNode;
613
750
  } & react.RefAttributes<HTMLParagraphElement>>;
614
751
 
615
- declare const FormLabel: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
752
+ declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
616
753
  children?: react.ReactNode;
617
754
  } & react.RefAttributes<HTMLLabelElement>>;
618
755
 
619
756
  type UnorderedListProps = {
757
+ /** Changes the text colour for readability on a dark background. */
620
758
  inverseColor?: boolean;
759
+ /** Whether the list items show a marker. */
621
760
  markers?: boolean;
761
+ /** The size of the text. */
762
+ size?: 'small';
622
763
  } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
623
764
  declare const UnorderedList: react.ForwardRefExoticComponent<{
765
+ /** Changes the text colour for readability on a dark background. */
624
766
  inverseColor?: boolean | undefined;
767
+ /** Whether the list items show a marker. */
625
768
  markers?: boolean | undefined;
769
+ /** The size of the text. */
770
+ size?: "small" | undefined;
626
771
  } & HTMLAttributes<HTMLUListElement> & {
627
772
  children?: react.ReactNode;
628
773
  } & react.RefAttributes<HTMLUListElement>> & {
@@ -634,23 +779,33 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
634
779
  type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
635
780
 
636
781
  type IconProps = {
782
+ /** The size of the icon. Corresponds with the text levels. */
637
783
  size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
784
+ /** Whether the icon container should be made square. */
638
785
  square?: boolean;
786
+ /** The component rendering the icon’s markup. */
639
787
  svg: Function;
640
788
  } & HTMLAttributes<HTMLSpanElement>;
641
789
  declare const Icon: react.ForwardRefExoticComponent<{
790
+ /** The size of the icon. Corresponds with the text levels. */
642
791
  size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
792
+ /** Whether the icon container should be made square. */
643
793
  square?: boolean | undefined;
794
+ /** The component rendering the icon’s markup. */
644
795
  svg: Function;
645
796
  } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
646
797
 
647
798
  type AccordionProps = {
799
+ /** The hierarchical level of the Accordion Section heading(s) within the document. */
648
800
  headingLevel: HeadingLevel;
649
- section?: boolean;
801
+ /** The HTML element to use for each Accordion Section. */
802
+ sectionAs?: 'div' | 'section';
650
803
  } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
651
804
  declare const Accordion: react.ForwardRefExoticComponent<{
805
+ /** The hierarchical level of the Accordion Section heading(s) within the document. */
652
806
  headingLevel: HeadingLevel;
653
- section?: boolean | undefined;
807
+ /** The HTML element to use for each Accordion Section. */
808
+ sectionAs?: "div" | "section" | undefined;
654
809
  } & HTMLAttributes<HTMLDivElement> & {
655
810
  children?: react.ReactNode;
656
811
  } & react.RefAttributes<HTMLDivElement>> & {
@@ -663,7 +818,9 @@ declare const Accordion: react.ForwardRefExoticComponent<{
663
818
  };
664
819
 
665
820
  type AccordionSectionProps = {
821
+ /** The heading text. */
666
822
  label: string;
823
+ /** Whether the content is displayed initially. */
667
824
  expanded?: boolean;
668
825
  } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
669
826
 
@@ -679,8 +836,9 @@ type GridCellSpanAndStartProps = {
679
836
  start?: GridColumnNumber | GridColumnNumbers;
680
837
  };
681
838
  type GridCellProps = {
839
+ /** The HTML element to use. */
682
840
  as?: 'article' | 'div' | 'section';
683
- } & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
841
+ } & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
684
842
 
685
843
  type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
686
844
  type GridColumnNumbers = {
@@ -692,22 +850,22 @@ type GridPaddingSize = 'small' | 'medium' | 'large';
692
850
  type GridPaddingVerticalProp = {
693
851
  paddingBottom?: never;
694
852
  paddingTop?: never;
695
- /** The amount of vertical white space above and below the grid. */
853
+ /** The amount of space above and below. */
696
854
  paddingVertical?: GridPaddingSize;
697
855
  };
698
856
  type GridPaddingTopAndBottomProps = {
699
- /** The amount of vertical white space below the grid. */
857
+ /** The amount of space below. */
700
858
  paddingBottom?: GridPaddingSize;
701
- /** The amount of vertical white space above the grid. */
859
+ /** The amount of space above. */
702
860
  paddingTop?: GridPaddingSize;
703
861
  paddingVertical?: never;
704
862
  };
705
863
  type GridProps = {
706
- /** The amount of vertical white space between rows of the grid. */
864
+ /** The amount of space between rows. */
707
865
  gapVertical?: 'none' | 'small' | 'large';
708
866
  } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
709
867
  declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
710
- Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLDivElement>>;
868
+ Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
711
869
  };
712
870
 
713
- export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, Dialog, type DialogProps, Fieldset, type FieldsetProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, FormLabel, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };
871
+ export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, VisuallyHidden };