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