@dxc-technology/halstack-react 14.1.1 → 15.0.1

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.
package/dist/index.d.mts CHANGED
@@ -1,36 +1,45 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as react from 'react';
3
- import { ReactNode } from 'react';
2
+ import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import { SortColumn } from 'react-data-grid';
5
5
  import * as styled_components from 'styled-components';
6
6
 
7
- type Space$t = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
8
- type Margin$o = {
9
- top?: Space$t;
10
- bottom?: Space$t;
11
- left?: Space$t;
12
- right?: Space$t;
7
+ type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
8
+ type Margin = {
9
+ top?: Space$1;
10
+ bottom?: Space$1;
11
+ left?: Space$1;
12
+ right?: Space$1;
13
13
  };
14
- type SVG$j = React.ReactNode & React.SVGProps<SVGSVGElement>;
15
- type Props$K = {
14
+ type SVG = ReactNode & SVGProps<SVGSVGElement>;
15
+
16
+ type AccordionItemProps = {
16
17
  /**
17
18
  * The panel label.
18
19
  */
19
20
  label: string;
20
21
  /**
21
- * Initial state of the panel, only when it is uncontrolled.
22
+ * Additional info label positioned under the label.
22
23
  */
23
- defaultIsExpanded?: boolean;
24
+ subLabel?: string;
24
25
  /**
25
- * Represents the state of the panel. When true, the component will be
26
- * expanded. If undefined, the component will be uncontrolled and its
27
- * value will be managed internally by the component.
26
+ * Badge component to add extra value to the accordion.
28
27
  */
29
- isExpanded?: boolean;
28
+ badge?: {
29
+ position: "before" | "after";
30
+ element: ReactNode;
31
+ };
32
+ /**
33
+ * Status light component to add extra value to the accordion.
34
+ */
35
+ statusLight?: ReactNode;
30
36
  /**
31
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
37
+ * Material Symbol name or SVG element used as the icon that will be
38
+ * placed next to panel label. When using Material Symbols, replace spaces with underscores.
39
+ * By default they are outlined if you want it to be filled
40
+ * prefix the symbol name with "filled_".
32
41
  */
33
- icon?: string | SVG$j;
42
+ icon?: string | SVG;
34
43
  /**
35
44
  * Assistive text to be placed on the right side of the panel.
36
45
  */
@@ -39,156 +48,170 @@ type Props$K = {
39
48
  * If true, the component will be disabled.
40
49
  */
41
50
  disabled?: boolean;
42
- /**
43
- * This function will be called when the user clicks the accordion to expand or collapse
44
- * the panel. The new state of the panel will be passed as a parameter.
45
- */
46
- onChange?: (isExpanded: boolean) => void;
47
51
  /**
48
52
  * The expanded panel of the accordion. This area can be used to render
49
53
  * custom content.
50
54
  */
51
- children: React.ReactNode;
52
- /**
53
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
54
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
55
- */
56
- margin?: Space$t | Margin$o;
55
+ children: ReactNode;
57
56
  /**
58
57
  * Value of the tabindex attribute.
59
58
  */
60
59
  tabIndex?: number;
61
60
  };
62
-
63
- declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
64
-
65
- type Space$s = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
66
- type Margin$n = {
67
- top?: Space$s;
68
- bottom?: Space$s;
69
- left?: Space$s;
70
- right?: Space$s;
71
- };
72
- type SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
73
- type AccordionPropsType = {
61
+ type CommonProps$9 = {
74
62
  /**
75
- * The panel label.
63
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
64
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
76
65
  */
77
- label: string;
66
+ margin?: Space$1 | Margin;
78
67
  /**
79
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
68
+ * Contains one or more accordion items.
80
69
  */
81
- icon?: string | SVG$i;
70
+ children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
71
+ };
72
+ type IndependentProps = CommonProps$9 & {
82
73
  /**
83
- * Assistive text to be placed on the right side of the panel.
74
+ * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
84
75
  */
85
- assistiveText?: string;
76
+ independent: true;
86
77
  /**
87
- * If true, the component will be disabled.
78
+ * Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
79
+ * several accordions can be activated by default.
88
80
  */
89
- disabled?: boolean;
81
+ defaultIndexActive?: number;
90
82
  /**
91
- * The expanded panel of the accordion. This area can be used to render
92
- * custom content.
83
+ * The index of the active accordion. If undefined, the component will be uncontrolled and the active
84
+ * accordion will be managed internally by the component. If null, the component will be controlled and all
85
+ * accordions will be closed. If the accordion is not independent, several accordions can be activated.
93
86
  */
94
- children: React.ReactNode;
87
+ indexActive?: number;
88
+ /**
89
+ * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
90
+ */
91
+ onActiveChange?: (index: number) => void;
95
92
  };
96
- type Props$J = {
93
+ type NonIndependentProps = CommonProps$9 & {
97
94
  /**
98
- * Initially active accordion, only when it is uncontrolled.
95
+ * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
99
96
  */
100
- defaultIndexActive?: number;
97
+ independent?: false;
101
98
  /**
102
- * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
103
- * If null, the component will be controlled and all accordions will be closed.
99
+ * Initially active accordion, only when it is uncontrolled. If the accordion is not independent,
100
+ * several accordions can be activated by default.
104
101
  */
105
- indexActive?: number;
102
+ defaultIndexActive?: number[];
106
103
  /**
107
- * If true, the component will be disabled.
104
+ * The index of the active accordion. If undefined, the component will be uncontrolled and the active
105
+ * accordion will be managed internally by the component. If null, the component will be controlled and all
106
+ * accordions will be closed. If the accordion is not independent, several accordions can be activated.
108
107
  */
109
- disabled?: boolean;
108
+ indexActive?: number[];
110
109
  /**
111
110
  * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
112
111
  */
113
- onActiveChange?: (indexActive: number) => void;
112
+ onActiveChange?: (index: number[]) => void;
113
+ };
114
+ type Props$J = IndependentProps | NonIndependentProps;
115
+
116
+ declare const DxcAccordion: {
117
+ (props: Props$J): JSX.Element;
118
+ AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
119
+ };
120
+
121
+ type Action$2 = {
114
122
  /**
115
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
116
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
123
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
117
124
  */
118
- margin?: Space$s | Margin$n;
125
+ icon?: string | SVG;
119
126
  /**
120
- * Customized accordion(s) that are allowed inside an Accordion Group.
127
+ * The label of the action.
121
128
  */
122
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
123
- };
124
-
125
- declare const DxcAccordionGroup: {
126
- ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
127
- Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
129
+ label: string;
130
+ /**
131
+ * The function that will be executed when the user clicks on the action button.
132
+ */
133
+ onClick: () => void;
128
134
  };
129
-
130
- type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
131
- type Margin$m = {
132
- top?: Space$r;
133
- bottom?: Space$r;
134
- left?: Space$r;
135
- right?: Space$r;
135
+ type Message = {
136
+ /**
137
+ * The function that will be executed when the user clicks on the close action button.
138
+ */
139
+ onClose?: () => void;
140
+ /**
141
+ * The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
142
+ * and it should be used exclusively to direct users to additional resources or relevant pages.
143
+ * No other components are permitted within the content of an alert.
144
+ */
145
+ text: ReactNode;
136
146
  };
137
- type Props$I = {
147
+ type CommonProps$8 = {
138
148
  /**
139
- * Uses on of the available alert types.
149
+ * If true, the alert will have a close button that will remove the message from the alert,
150
+ * only in banner and inline modes. The rest of the functionality will depend
151
+ * on the onClose event of each message (e.g. closing the modal alert).
140
152
  */
141
- type?: "info" | "confirm" | "warning" | "error";
153
+ closable?: boolean;
142
154
  /**
143
- * Uses on of the available alert modes:
144
- * 'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
145
- * There is no overlay layer. Position should be decided by the user.
146
- * 'modal': The alert will be displayed in the middle of the screen with an overlay layer behind.
147
- * The onClose function will be executed when the X button or the overlay is clicked. d
148
- * The user has the responsibility of hiding the modal in the onClose function, otherwise the modal will remain visible.
155
+ * Primary action of the alert.
149
156
  */
150
- mode?: "inline" | "modal";
157
+ primaryAction?: Action$2;
151
158
  /**
152
- * Text to display after icon and alert type and before content.
159
+ * Secondary action of the alert.
153
160
  */
154
- inlineText?: string;
161
+ secondaryAction?: Action$2;
155
162
  /**
156
- * This function will be called when the user clicks the close button. If there is no function we should close the alert by default.
163
+ * Specifies the semantic meaning of the alert.
157
164
  */
158
- onClose?: () => void;
165
+ semantic?: "error" | "info" | "success" | "warning";
159
166
  /**
160
- * The details section of the alert. Can be used to render custom content in this area.
167
+ * Title of the alert.
161
168
  */
162
- children?: React.ReactNode;
169
+ title: string;
170
+ };
171
+ type ModeSpecificProps = {
163
172
  /**
164
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
165
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
173
+ * List of messages to be displayed. Each message has a close action that will,
174
+ * apart from remove from the alert the current message, call the onClose if it is defined.
175
+ * If the message is an array, the alert will show a navigation bar to move between the messages.
176
+ * The modal mode only allows one message per alert. In this case, the message must be an object
177
+ * and the presence of the onClose attribute is mandatory, since the management of the closing
178
+ * of the alert relies completely on the user.
166
179
  */
167
- margin?: Space$r | Margin$m;
180
+ message?: Message | Message[];
168
181
  /**
169
- * Size of the component.
182
+ * The mode of the alert.
170
183
  */
171
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
184
+ mode?: "inline" | "banner";
185
+ } | {
172
186
  /**
173
- * Value of the tabindex attribute applied to the close button.
187
+ * List of messages to be displayed. Each message has a close action that will,
188
+ * apart from remove from the alert the current message, call the onClose if it is defined.
189
+ * If the message is an array, the alert will show a navigation bar to move between the messages.
190
+ * The modal mode only allows one message per alert. In this case, the message must be an object
191
+ * and the presence of the onClose attribute is mandatory, since the management of the closing
192
+ * of the alert relies completely on the user.
174
193
  */
175
- tabIndex?: number;
194
+ message: Required<Message>;
195
+ /**
196
+ * The mode of the alert.
197
+ */
198
+ mode: "modal";
176
199
  };
200
+ type Props$I = CommonProps$8 & ModeSpecificProps;
177
201
 
178
- declare const DxcAlert: ({ type, mode, inlineText, onClose, children, margin, size, tabIndex, }: Props$I) => JSX.Element;
202
+ declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$I): react_jsx_runtime.JSX.Element;
179
203
 
180
- type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
181
204
  type SidenavTitlePropsType = {
182
205
  /**
183
206
  * The area inside the sidenav title. This area can be used to render custom content.
184
207
  */
185
- children: React.ReactNode;
208
+ children: ReactNode;
186
209
  };
187
210
  type SidenavSectionPropsType = {
188
211
  /**
189
212
  * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
190
213
  */
191
- children: React.ReactNode;
214
+ children: ReactNode;
192
215
  };
193
216
  type SidenavGroupPropsType = {
194
217
  /**
@@ -203,11 +226,11 @@ type SidenavGroupPropsType = {
203
226
  /**
204
227
  * Material Symbol name or SVG icon to be displayed next to the title of the group.
205
228
  */
206
- icon?: string | SVG$h;
229
+ icon?: string | SVG;
207
230
  /**
208
231
  * The area inside the sidenav group. This area can be used to render sidenav links.
209
232
  */
210
- children: React.ReactNode;
233
+ children: ReactNode;
211
234
  };
212
235
  type SidenavLinkPropsType = {
213
236
  /**
@@ -221,7 +244,7 @@ type SidenavLinkPropsType = {
221
244
  /**
222
245
  * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
223
246
  */
224
- icon?: string | SVG$h;
247
+ icon?: string | SVG;
225
248
  /**
226
249
  * If true, the link will be marked as selected. Moreover, in that same case,
227
250
  * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
@@ -231,11 +254,11 @@ type SidenavLinkPropsType = {
231
254
  /**
232
255
  * This function will be called when the user clicks the link and the event will be passed to this function.
233
256
  */
234
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
257
+ onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
235
258
  /**
236
259
  * The area inside the sidenav link.
237
260
  */
238
- children: React.ReactNode;
261
+ children: ReactNode;
239
262
  /**
240
263
  * Value of the tabindex.
241
264
  */
@@ -245,22 +268,14 @@ type Props$H = {
245
268
  /**
246
269
  * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
247
270
  */
248
- title?: React.ReactNode;
271
+ title?: ReactNode;
249
272
  /**
250
273
  * The area inside the sidenav. This area can be used to render the content inside the sidenav.
251
274
  */
252
- children: React.ReactNode;
275
+ children: ReactNode;
253
276
  };
254
277
 
255
- type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
256
- type Margin$l = {
257
- top?: Space$q;
258
- bottom?: Space$q;
259
- left?: Space$q;
260
- right?: Space$q;
261
- };
262
278
  type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
263
- type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
264
279
  type Option$1 = {
265
280
  /**
266
281
  * Option display value.
@@ -269,7 +284,7 @@ type Option$1 = {
269
284
  /**
270
285
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
271
286
  */
272
- icon?: string | SVG$g;
287
+ icon?: string | SVG;
273
288
  /**
274
289
  * Option inner value.
275
290
  */
@@ -288,7 +303,7 @@ type Props$G = {
288
303
  /**
289
304
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
290
305
  */
291
- icon?: string | SVG$g;
306
+ icon?: string | SVG;
292
307
  /**
293
308
  * Whether the icon should appear after or before the label.
294
309
  */
@@ -319,7 +334,7 @@ type Props$G = {
319
334
  * You can pass an object with 'top', 'bottom', 'left' and 'right'
320
335
  * properties in order to specify different margin sizes.
321
336
  */
322
- margin?: Space$q | Margin$l;
337
+ margin?: Space$1 | Margin;
323
338
  /**
324
339
  * Size of the component.
325
340
  */
@@ -335,7 +350,6 @@ type Props$G = {
335
350
  title?: string;
336
351
  };
337
352
 
338
- type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
339
353
  type Props$F = {
340
354
  /**
341
355
  * Whether a contrast line should appear at the bottom of the header.
@@ -346,12 +360,12 @@ type Props$F = {
346
360
  * for the first child in the content, so we recommend the use of React.Fragment
347
361
  * to be applied correctly. Otherwise, the styles can be modified.
348
362
  */
349
- content?: React.ReactNode;
363
+ content?: ReactNode;
350
364
  /**
351
365
  * Content shown in responsive version. It receives the close menu handler that can
352
366
  * be used to add that functionality when a element is clicked.
353
367
  */
354
- responsiveContent?: (closeHandler: () => void) => React.ReactNode;
368
+ responsiveContent?: (closeHandler: () => void) => ReactNode;
355
369
  /**
356
370
  * This function will be called when the user clicks the header logo.
357
371
  */
@@ -359,7 +373,7 @@ type Props$F = {
359
373
  /**
360
374
  * Size of the bottom margin to be applied to the header.
361
375
  */
362
- margin?: Space$p;
376
+ margin?: Space$1;
363
377
  /**
364
378
  * Value of the tabindex for all interactive elements, except those inside the
365
379
  * custom area.
@@ -367,8 +381,6 @@ type Props$F = {
367
381
  tabIndex?: number;
368
382
  };
369
383
 
370
- type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
371
- type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
372
384
  type SocialLink = {
373
385
  /**
374
386
  * URL of the page the link goes to.
@@ -377,7 +389,7 @@ type SocialLink = {
377
389
  /**
378
390
  * Material Symbol name or SVG element as the icon used for the link.
379
391
  */
380
- logo: string | SVG$f;
392
+ logo: string | SVG;
381
393
  /**
382
394
  * Value for the HTML properties title and aria-label.
383
395
  */
@@ -412,11 +424,11 @@ type FooterPropsType = {
412
424
  * The center section of the footer. Can be used to render custom
413
425
  * content in this area.
414
426
  */
415
- children?: React.ReactNode;
427
+ children?: ReactNode;
416
428
  /**
417
429
  * Size of the top margin to be applied to the footer.
418
430
  */
419
- margin?: Space$o;
431
+ margin?: Space$1;
420
432
  /**
421
433
  * Value of the tabindex for all interactive elements, except those
422
434
  * inside the custom area.
@@ -434,7 +446,7 @@ type AppLayoutMainPropsType = {
434
446
  /**
435
447
  * Everything between the tags will be displayed as the content of the main part of the application.
436
448
  */
437
- children: React.ReactNode;
449
+ children: ReactNode;
438
450
  };
439
451
  type ApplicationLayoutPropsType = {
440
452
  /**
@@ -445,19 +457,19 @@ type ApplicationLayoutPropsType = {
445
457
  /**
446
458
  * Header content.
447
459
  */
448
- header?: React.ReactNode;
460
+ header?: ReactNode;
449
461
  /**
450
462
  * Sidenav content
451
463
  */
452
- sidenav?: React.ReactNode;
464
+ sidenav?: ReactNode;
453
465
  /**
454
466
  * Footer content
455
467
  */
456
- footer?: React.ReactNode;
468
+ footer?: ReactNode;
457
469
  /**
458
470
  * Use the DxcApplicationLayout.Main provided to render main content.
459
471
  */
460
- children: React.ReactElement<AppLayoutMainPropsType>;
472
+ children: ReactElement<AppLayoutMainPropsType>;
461
473
  };
462
474
 
463
475
  declare const DxcApplicationLayout: {
@@ -475,10 +487,9 @@ declare const DxcApplicationLayout: {
475
487
  Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
476
488
  Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
477
489
  };
478
- useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
490
+ useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
479
491
  };
480
492
 
481
- type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
482
493
  type ContextualProps = {
483
494
  /**
484
495
  * Text to be placed in the badge.
@@ -523,7 +534,7 @@ type CommonProps$7 = {
523
534
  /**
524
535
  * Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
525
536
  */
526
- icon?: string | SVG$e;
537
+ icon?: string | SVG;
527
538
  /**
528
539
  * Size of the component.
529
540
  */
@@ -657,7 +668,7 @@ type Props$D = {
657
668
  /**
658
669
  * Custom content inside the bleed.
659
670
  */
660
- children: React.ReactNode;
671
+ children: ReactNode;
661
672
  };
662
673
 
663
674
  declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
@@ -700,7 +711,6 @@ type Props$C = {
700
711
 
701
712
  declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
702
713
 
703
- type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
704
714
  type IconProps = {
705
715
  /**
706
716
  * Defines the style of the bullet point in the list.
@@ -709,11 +719,11 @@ type IconProps = {
709
719
  /**
710
720
  * Icon to display as bullet.
711
721
  */
712
- icon: string | SVG$d;
722
+ icon: string | SVG;
713
723
  /**
714
724
  * Text to be shown in the list.
715
725
  */
716
- children: React.ReactNode;
726
+ children: ReactNode;
717
727
  };
718
728
  type OtherProps = {
719
729
  /**
@@ -727,7 +737,7 @@ type OtherProps = {
727
737
  /**
728
738
  * Text to be shown in the list.
729
739
  */
730
- children: React.ReactNode;
740
+ children: ReactNode;
731
741
  };
732
742
  type Props$B = IconProps | OtherProps;
733
743
 
@@ -735,7 +745,7 @@ type BulletedListItemPropsType = {
735
745
  /**
736
746
  * Text to be shown in the list.
737
747
  */
738
- children?: React.ReactNode;
748
+ children?: ReactNode;
739
749
  };
740
750
 
741
751
  declare const DxcBulletedList: {
@@ -743,14 +753,6 @@ declare const DxcBulletedList: {
743
753
  Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
744
754
  };
745
755
 
746
- type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
747
- type Margin$k = {
748
- top?: Space$n;
749
- bottom?: Space$n;
750
- left?: Space$n;
751
- right?: Space$n;
752
- };
753
- type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
754
756
  type Size$3 = {
755
757
  /**
756
758
  * Height of the component.
@@ -790,7 +792,7 @@ type Props$A = {
790
792
  /**
791
793
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
792
794
  */
793
- icon?: string | SVG$c;
795
+ icon?: string | SVG;
794
796
  /**
795
797
  * This function will be called when the user clicks the button.
796
798
  */
@@ -799,7 +801,7 @@ type Props$A = {
799
801
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
800
802
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
801
803
  */
802
- margin?: Space$n | Margin$k;
804
+ margin?: Space$1 | Margin;
803
805
  /**
804
806
  * Size of the component.
805
807
  */
@@ -812,12 +814,11 @@ type Props$A = {
812
814
 
813
815
  declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
814
816
 
815
- type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
816
817
  type Size$2 = {
817
- top?: Space$m;
818
- bottom?: Space$m;
819
- left?: Space$m;
820
- right?: Space$m;
818
+ top?: Space$1;
819
+ bottom?: Space$1;
820
+ left?: Space$1;
821
+ right?: Space$1;
821
822
  };
822
823
  type Props$z = {
823
824
  /**
@@ -835,7 +836,7 @@ type Props$z = {
835
836
  * component. You can pass an object with 'top', 'bottom', 'left'
836
837
  * and 'right' properties in order to specify different padding sizes.
837
838
  */
838
- imagePadding?: Space$m | Size$2;
839
+ imagePadding?: Space$1 | Size$2;
839
840
  /**
840
841
  * Whether the image should appear in relation to the content.
841
842
  */
@@ -858,7 +859,7 @@ type Props$z = {
858
859
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
859
860
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
860
861
  */
861
- margin?: Space$m | Size$2;
862
+ margin?: Space$1 | Size$2;
862
863
  /**
863
864
  * Value of the tabindex attribute applied when the component is clickable.
864
865
  */
@@ -870,18 +871,11 @@ type Props$z = {
870
871
  /**
871
872
  * Custom content that will be placed inside the component.
872
873
  */
873
- children?: React.ReactNode;
874
+ children?: ReactNode;
874
875
  };
875
876
 
876
877
  declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
877
878
 
878
- type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
879
- type Margin$j = {
880
- top?: Space$l;
881
- bottom?: Space$l;
882
- left?: Space$l;
883
- right?: Space$l;
884
- };
885
879
  type Props$y = {
886
880
  /**
887
881
  * Initial state of the checkbox, only when it is uncontrolled.
@@ -932,7 +926,7 @@ type Props$y = {
932
926
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
933
927
  * in order to specify different margin sizes.
934
928
  */
935
- margin?: Space$l | Margin$j;
929
+ margin?: Space$1 | Margin;
936
930
  /**
937
931
  * Size of the component.
938
932
  */
@@ -941,18 +935,14 @@ type Props$y = {
941
935
  * Value of the tabindex.
942
936
  */
943
937
  tabIndex?: number;
938
+ /**
939
+ * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
940
+ */
941
+ ariaLabel?: string;
944
942
  };
945
943
 
946
944
  declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
947
945
 
948
- type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
949
- type Margin$i = {
950
- top?: Space$k;
951
- bottom?: Space$k;
952
- left?: Space$k;
953
- right?: Space$k;
954
- };
955
- type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
956
946
  type Props$x = {
957
947
  /**
958
948
  * Text to be placed on the chip.
@@ -961,11 +951,11 @@ type Props$x = {
961
951
  /**
962
952
  * Element or path used as icon to be placed after the chip label.
963
953
  */
964
- suffixIcon?: string | SVG$b;
954
+ suffixIcon?: string | SVG;
965
955
  /**
966
956
  * Element or path used as icon to be placed before the chip label.
967
957
  */
968
- prefixIcon?: string | SVG$b;
958
+ prefixIcon?: string | SVG;
969
959
  /**
970
960
  * This function will be called when the suffix is clicked.
971
961
  */
@@ -982,7 +972,7 @@ type Props$x = {
982
972
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
983
973
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
984
974
  */
985
- margin?: Space$k | Margin$i;
975
+ margin?: Space$1 | Margin;
986
976
  /**
987
977
  * Value of the tabindex attribute.
988
978
  */
@@ -991,12 +981,11 @@ type Props$x = {
991
981
 
992
982
  declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
993
983
 
994
- type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
995
- type Space$j = SpacingValues | {
996
- top?: SpacingValues;
997
- right?: SpacingValues;
998
- bottom?: SpacingValues;
999
- left?: SpacingValues;
984
+ type Space = Space$1 | {
985
+ top?: Space$1;
986
+ right?: Space$1;
987
+ bottom?: Space$1;
988
+ left?: Space$1;
1000
989
  };
1001
990
  type Inset$1 = {
1002
991
  top?: string;
@@ -1065,7 +1054,7 @@ type Props$w = {
1065
1054
  /**
1066
1055
  * Custom content inside the container.
1067
1056
  */
1068
- children: React.ReactNode;
1057
+ children: ReactNode;
1069
1058
  /**
1070
1059
  * Sets the display CSS property.
1071
1060
  * The set of values is limited to the ones related to the outer display type.
@@ -1097,7 +1086,7 @@ type Props$w = {
1097
1086
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1098
1087
  * in order to specify different margin sizes.
1099
1088
  */
1100
- margin?: Space$j;
1089
+ margin?: Space;
1101
1090
  /**
1102
1091
  * Sets the max-height CSS property.
1103
1092
  *
@@ -1138,7 +1127,7 @@ type Props$w = {
1138
1127
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1139
1128
  * in order to specify different margin sizes.
1140
1129
  */
1141
- padding?: Space$j;
1130
+ padding?: Space;
1142
1131
  /**
1143
1132
  * Sets the position CSS property.
1144
1133
  *
@@ -1159,12 +1148,11 @@ type Props$w = {
1159
1148
  zIndex?: "auto" | number;
1160
1149
  };
1161
1150
 
1162
- declare const DxcContainer: ({ display, width, height, overflow, ...props }: Props$w) => react_jsx_runtime.JSX.Element;
1151
+ declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
1163
1152
 
1164
- type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
1165
1153
  type CommonItemProps = {
1166
- badge?: React.ReactElement;
1167
- icon?: string | SVG$a;
1154
+ badge?: ReactElement;
1155
+ icon?: string | SVG;
1168
1156
  label: string;
1169
1157
  };
1170
1158
  type Item = CommonItemProps & {
@@ -1186,21 +1174,13 @@ type Props$v = {
1186
1174
  items: (Item | GroupItem)[] | Section[];
1187
1175
  };
1188
1176
 
1189
- declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
1177
+ declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
1190
1178
 
1191
- type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1192
- type Margin$h = {
1193
- top?: Space$i;
1194
- bottom?: Space$i;
1195
- left?: Space$i;
1196
- right?: Space$i;
1197
- };
1198
- type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
1199
1179
  type ActionCellsPropsType = {
1200
1180
  actions: ActionsPropsType;
1201
1181
  };
1202
1182
  type ActionsPropsType = Array<{
1203
- icon: string | SVG$9;
1183
+ icon: string | SVG;
1204
1184
  title: string;
1205
1185
  onClick: () => void;
1206
1186
  disabled?: boolean;
@@ -1219,12 +1199,12 @@ type Props$u = {
1219
1199
  * The center section of the table. Can be used to render custom
1220
1200
  * content in this area.
1221
1201
  */
1222
- children: React.ReactNode;
1202
+ children: ReactNode;
1223
1203
  /**
1224
1204
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1225
1205
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1226
1206
  */
1227
- margin?: Space$i | Margin$h;
1207
+ margin?: Space$1 | Margin;
1228
1208
  /**
1229
1209
  * Determines the visual style and layout
1230
1210
  * - "default": Default table size.
@@ -1253,7 +1233,7 @@ type GridColumn = {
1253
1233
  /**
1254
1234
  * Custom criteria for sorting the column.
1255
1235
  */
1256
- sortFn?: (_a: ReactNode, _b: ReactNode) => number;
1236
+ sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
1257
1237
  /**
1258
1238
  * Whether the column is draggable or not.
1259
1239
  */
@@ -1421,13 +1401,6 @@ declare const DxcDataGrid: {
1421
1401
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
1422
1402
  };
1423
1403
 
1424
- type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1425
- type Margin$g = {
1426
- top?: Space$h;
1427
- bottom?: Space$h;
1428
- left?: Space$h;
1429
- right?: Space$h;
1430
- };
1431
1404
  type Props$s = {
1432
1405
  /**
1433
1406
  * Initial value of the input element, only when it is uncontrolled.
@@ -1519,7 +1492,7 @@ type Props$s = {
1519
1492
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1520
1493
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1521
1494
  */
1522
- margin?: Space$h | Margin$g;
1495
+ margin?: Space$1 | Margin;
1523
1496
  /**
1524
1497
  * Size of the component.
1525
1498
  */
@@ -1528,6 +1501,10 @@ type Props$s = {
1528
1501
  * Value of the tabindex attribute.
1529
1502
  */
1530
1503
  tabIndex?: number;
1504
+ /**
1505
+ * Specifies a string to be used as the name for the date input element when no `label` is provided.
1506
+ */
1507
+ ariaLabel?: string;
1531
1508
  };
1532
1509
 
1533
1510
  declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
@@ -1536,7 +1513,7 @@ type Props$r = {
1536
1513
  /**
1537
1514
  * If true, the close button will be visible.
1538
1515
  */
1539
- isCloseVisible?: boolean;
1516
+ closable?: boolean;
1540
1517
  /**
1541
1518
  * This function will be called when the user clicks the close button.
1542
1519
  * The responsibility of hiding the dialog lies with the user.
@@ -1558,7 +1535,7 @@ type Props$r = {
1558
1535
  * can lead to unpredictable behaviour for keyboard users, affecting
1559
1536
  * the order of focus and focus locking within the dialog.
1560
1537
  */
1561
- children: React.ReactNode;
1538
+ children: ReactNode;
1562
1539
  /**
1563
1540
  * Value of the tabindex applied to the close button.
1564
1541
  * Note that values greater than 0 are strongly discouraged. It can
@@ -1567,7 +1544,7 @@ type Props$r = {
1567
1544
  tabIndex?: number;
1568
1545
  };
1569
1546
 
1570
- declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
1547
+ declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
1571
1548
 
1572
1549
  type Props$q = {
1573
1550
  /**
@@ -1594,13 +1571,6 @@ declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q)
1594
1571
 
1595
1572
  declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
1596
1573
 
1597
- type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1598
- type Margin$f = {
1599
- top?: Space$g;
1600
- bottom?: Space$g;
1601
- left?: Space$g;
1602
- right?: Space$g;
1603
- };
1604
1574
  type FileData = {
1605
1575
  /**
1606
1576
  * Selected file.
@@ -1666,7 +1636,7 @@ type CommonProps$5 = {
1666
1636
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1667
1637
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1668
1638
  */
1669
- margin?: Space$g | Margin$f;
1639
+ margin?: Space$1 | Margin;
1670
1640
  /**
1671
1641
  * Value of the tabindex attribute.
1672
1642
  */
@@ -1787,7 +1757,7 @@ type Props$o = CommonProps$4 & {
1787
1757
  /**
1788
1758
  * Custom content inside the flex container.
1789
1759
  */
1790
- children: React.ReactNode;
1760
+ children: ReactNode;
1791
1761
  };
1792
1762
 
1793
1763
  declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
@@ -1846,7 +1816,7 @@ type GridItemProps = {
1846
1816
  /**
1847
1817
  * Custom content inside the grid container.
1848
1818
  */
1849
- children: React.ReactNode;
1819
+ children: ReactNode;
1850
1820
  };
1851
1821
  type Props$n = GridItemProps & {
1852
1822
  /**
@@ -1910,13 +1880,6 @@ declare const DxcGrid: {
1910
1880
  Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
1911
1881
  };
1912
1882
 
1913
- type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1914
- type Margin$e = {
1915
- top?: Space$f;
1916
- bottom?: Space$f;
1917
- left?: Space$f;
1918
- right?: Space$f;
1919
- };
1920
1883
  type Props$m = {
1921
1884
  /**
1922
1885
  * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
@@ -1940,7 +1903,7 @@ type Props$m = {
1940
1903
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1941
1904
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1942
1905
  */
1943
- margin?: Space$f | Margin$e;
1906
+ margin?: Space$1 | Margin;
1944
1907
  };
1945
1908
 
1946
1909
  declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
@@ -2004,14 +1967,14 @@ type Props$l = {
2004
1967
  /**
2005
1968
  * This function will be called when the image is loaded.
2006
1969
  */
2007
- onLoad?: React.ReactEventHandler<HTMLImageElement>;
1970
+ onLoad?: ReactEventHandler<HTMLImageElement>;
2008
1971
  /**
2009
1972
  * This function will be called when the image fails to load.
2010
1973
  */
2011
- onError?: React.ReactEventHandler<HTMLImageElement>;
1974
+ onError?: ReactEventHandler<HTMLImageElement>;
2012
1975
  };
2013
1976
 
2014
- declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l) => react_jsx_runtime.JSX.Element;
1977
+ declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l): react_jsx_runtime.JSX.Element;
2015
1978
 
2016
1979
  type Props$k = {
2017
1980
  /**
@@ -2045,19 +2008,11 @@ type Props$k = {
2045
2008
  /**
2046
2009
  * Custom content inside the inset.
2047
2010
  */
2048
- children: React.ReactNode;
2011
+ children: ReactNode;
2049
2012
  };
2050
2013
 
2051
2014
  declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
2052
2015
 
2053
- type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2054
- type Margin$d = {
2055
- top?: Space$e;
2056
- bottom?: Space$e;
2057
- left?: Space$e;
2058
- right?: Space$e;
2059
- };
2060
- type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2061
2016
  type LinkProps = {
2062
2017
  /**
2063
2018
  * If true, the link is disabled.
@@ -2070,7 +2025,7 @@ type LinkProps = {
2070
2025
  /**
2071
2026
  * Material Symbol name or SVG element as the icon that will be placed next to the link text.
2072
2027
  */
2073
- icon?: string | SVG$8;
2028
+ icon?: string | SVG;
2074
2029
  /**
2075
2030
  * Indicates the position of the icon in the component.
2076
2031
  */
@@ -2096,7 +2051,7 @@ type LinkProps = {
2096
2051
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2097
2052
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2098
2053
  */
2099
- margin?: Space$e | Margin$d;
2054
+ margin?: Space$1 | Margin;
2100
2055
  /**
2101
2056
  * Value of the tabindex.
2102
2057
  */
@@ -2105,7 +2060,6 @@ type LinkProps = {
2105
2060
 
2106
2061
  declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
2107
2062
 
2108
- type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2109
2063
  type TabProps$1 = {
2110
2064
  /**
2111
2065
  * Whether the tab is active or not.
@@ -2122,7 +2076,7 @@ type TabProps$1 = {
2122
2076
  /**
2123
2077
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
2124
2078
  */
2125
- icon?: string | SVG$7;
2079
+ icon?: string | SVG;
2126
2080
  /**
2127
2081
  * If the value is 'true', an empty badge will appear.
2128
2082
  * If it is 'false', no badge will appear.
@@ -2144,7 +2098,7 @@ type Props$j = {
2144
2098
  /**
2145
2099
  * Contains one or more DxcNavTabs.Tab.
2146
2100
  */
2147
- children: React.ReactNode;
2101
+ children: ReactNode;
2148
2102
  /**
2149
2103
  * Value of the tabindex attribute applied to each tab.
2150
2104
  */
@@ -2156,13 +2110,6 @@ declare const DxcNavTabs: {
2156
2110
  Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
2157
2111
  };
2158
2112
 
2159
- type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2160
- type Margin$c = {
2161
- top?: Space$d;
2162
- bottom?: Space$d;
2163
- left?: Space$d;
2164
- right?: Space$d;
2165
- };
2166
2113
  type Props$i = {
2167
2114
  /**
2168
2115
  * Text to be placed above the number.
@@ -2271,7 +2218,7 @@ type Props$i = {
2271
2218
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2272
2219
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2273
2220
  */
2274
- margin?: Space$d | Margin$c;
2221
+ margin?: Space$1 | Margin;
2275
2222
  /**
2276
2223
  * Size of the component.
2277
2224
  */
@@ -2280,6 +2227,14 @@ type Props$i = {
2280
2227
  * Value of the tabindex attribute.
2281
2228
  */
2282
2229
  tabIndex?: number;
2230
+ /**
2231
+ * Specifies a string to be used as the name for the number input element when no `label` is provided.
2232
+ */
2233
+ ariaLabel?: string;
2234
+ /**
2235
+ * Decides whether the number input has actions to increase or decrease the value, following the defined step.
2236
+ */
2237
+ showControls?: boolean;
2283
2238
  };
2284
2239
 
2285
2240
  declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2324,17 +2279,10 @@ type Props$h = {
2324
2279
 
2325
2280
  declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
2326
2281
 
2327
- declare const DxcParagraph: ({ children }: {
2328
- children: React.ReactNode;
2329
- }) => JSX.Element;
2282
+ declare function DxcParagraph({ children }: {
2283
+ children: ReactNode;
2284
+ }): react_jsx_runtime.JSX.Element;
2330
2285
 
2331
- type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2332
- type Margin$b = {
2333
- top?: Space$c;
2334
- bottom?: Space$c;
2335
- left?: Space$c;
2336
- right?: Space$c;
2337
- };
2338
2286
  type Props$g = {
2339
2287
  /**
2340
2288
  * Text to be placed above the password input.
@@ -2424,7 +2372,7 @@ type Props$g = {
2424
2372
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2425
2373
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2426
2374
  */
2427
- margin?: Space$c | Margin$b;
2375
+ margin?: Space$1 | Margin;
2428
2376
  /**
2429
2377
  * Size of the component.
2430
2378
  */
@@ -2433,16 +2381,19 @@ type Props$g = {
2433
2381
  * Value of the tabindex attribute.
2434
2382
  */
2435
2383
  tabIndex?: number;
2384
+ /**
2385
+ * Specifies a string to be used as the name for the password input element when no `label` is provided.
2386
+ */
2387
+ ariaLabel?: string;
2436
2388
  };
2437
2389
 
2438
2390
  declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
2439
2391
 
2440
- type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2441
2392
  type Size$1 = {
2442
- top?: Space$b;
2443
- bottom?: Space$b;
2444
- left?: Space$b;
2445
- right?: Space$b;
2393
+ top?: Space$1;
2394
+ bottom?: Space$1;
2395
+ left?: Space$1;
2396
+ right?: Space$1;
2446
2397
  };
2447
2398
  type Props$f = {
2448
2399
  /**
@@ -2471,10 +2422,14 @@ type Props$f = {
2471
2422
  * an object with 'top', 'bottom', 'left' and 'right' properties
2472
2423
  * in order to specify different margin sizes.
2473
2424
  */
2474
- margin?: Space$b | Size$1;
2425
+ margin?: Space$1 | Size$1;
2426
+ /**
2427
+ * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
2428
+ */
2429
+ ariaLabel?: string;
2475
2430
  };
2476
2431
 
2477
- declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
2432
+ declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
2478
2433
 
2479
2434
  type Link = {
2480
2435
  /**
@@ -2594,22 +2549,19 @@ type RadioGroupProps = {
2594
2549
  * Value of the tabindex attribute.
2595
2550
  */
2596
2551
  tabIndex?: number;
2552
+ /**
2553
+ * Specifies a string to be used as the name for the radio group when no `label` is provided.
2554
+ */
2555
+ ariaLabel?: string;
2597
2556
  };
2598
2557
 
2599
2558
  declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
2600
2559
 
2601
- type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2602
- type Margin$a = {
2603
- top?: Space$a;
2604
- bottom?: Space$a;
2605
- left?: Space$a;
2606
- right?: Space$a;
2607
- };
2608
2560
  type Column = {
2609
2561
  /**
2610
2562
  * Column display value.
2611
2563
  */
2612
- displayValue: React.ReactNode;
2564
+ displayValue: ReactNode;
2613
2565
  /**
2614
2566
  * Boolean value to indicate whether the column is sortable or not.
2615
2567
  */
@@ -2619,7 +2571,7 @@ type Cell = {
2619
2571
  /**
2620
2572
  * Value to be displayed in the cell.
2621
2573
  */
2622
- displayValue: React.ReactNode;
2574
+ displayValue: ReactNode;
2623
2575
  /**
2624
2576
  * Value to be used when sorting the table by that
2625
2577
  * column. If not indicated displayValue will be used for sorting.
@@ -2641,7 +2593,7 @@ type CommonProps$3 = {
2641
2593
  * Size of the margin to be applied to the component. You can pass an object with 'top',
2642
2594
  * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2643
2595
  */
2644
- margin?: Space$a | Margin$a;
2596
+ margin?: Space$1 | Margin;
2645
2597
  /**
2646
2598
  * Value of the tabindex attribute applied to the sortable icon.
2647
2599
  */
@@ -2703,14 +2655,6 @@ declare const DxcResultsetTable: {
2703
2655
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
2704
2656
  };
2705
2657
 
2706
- type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2707
- type Margin$9 = {
2708
- top?: Space$9;
2709
- bottom?: Space$9;
2710
- left?: Space$9;
2711
- right?: Space$9;
2712
- };
2713
- type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2714
2658
  type ListOptionGroupType = {
2715
2659
  /**
2716
2660
  * Label of the group to be shown in the select's listbox.
@@ -2728,7 +2672,7 @@ type ListOptionType = {
2728
2672
  * is the chosen one, take into account that the component's
2729
2673
  * color styling tokens will not be applied to the image.
2730
2674
  */
2731
- icon?: string | SVG$6;
2675
+ icon?: string | SVG;
2732
2676
  /**
2733
2677
  * Label of the option to be shown in the select's listbox.
2734
2678
  */
@@ -2794,7 +2738,7 @@ type CommonProps$2 = {
2794
2738
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2795
2739
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2796
2740
  */
2797
- margin?: Space$9 | Margin$9;
2741
+ margin?: Space$1 | Margin;
2798
2742
  /**
2799
2743
  * Size of the component.
2800
2744
  */
@@ -2803,6 +2747,10 @@ type CommonProps$2 = {
2803
2747
  * Value of the tabindex attribute.
2804
2748
  */
2805
2749
  tabIndex?: number;
2750
+ /**
2751
+ * Specifies a string to be used as the name for the select element when no `label` is provided.
2752
+ */
2753
+ ariaLabel?: string;
2806
2754
  };
2807
2755
  type SingleSelect = CommonProps$2 & {
2808
2756
  /**
@@ -2880,13 +2828,6 @@ type Props$c = SingleSelect | MultipleSelect;
2880
2828
 
2881
2829
  declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
2882
2830
 
2883
- type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2884
- type Margin$8 = {
2885
- top?: Space$8;
2886
- bottom?: Space$8;
2887
- left?: Space$8;
2888
- right?: Space$8;
2889
- };
2890
2831
  type Props$b = {
2891
2832
  /**
2892
2833
  * Text to be placed above the slider.
@@ -2955,22 +2896,19 @@ type Props$b = {
2955
2896
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2956
2897
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2957
2898
  */
2958
- margin?: Space$8 | Margin$8;
2899
+ margin?: Space$1 | Margin;
2959
2900
  /**
2960
2901
  * Size of the component.
2961
2902
  */
2962
2903
  size?: "medium" | "large" | "fillParent";
2904
+ /**
2905
+ * Specifies a string to be used as the name for the slider element when no `label` is provided.
2906
+ */
2907
+ ariaLabel?: string;
2963
2908
  };
2964
2909
 
2965
2910
  declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
2966
2911
 
2967
- type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2968
- type Margin$7 = {
2969
- top?: Space$7;
2970
- bottom?: Space$7;
2971
- left?: Space$7;
2972
- right?: Space$7;
2973
- };
2974
2912
  type Props$a = {
2975
2913
  /**
2976
2914
  * Text to be placed inside the spinner.
@@ -2993,10 +2931,14 @@ type Props$a = {
2993
2931
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2994
2932
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2995
2933
  */
2996
- margin?: Space$7 | Margin$7;
2934
+ margin?: Space$1 | Margin;
2935
+ /**
2936
+ * Specifies a string to be used as the name for the spinner element when no `label` is provided or the `mode` is set to small.
2937
+ */
2938
+ ariaLabel?: string;
2997
2939
  };
2998
2940
 
2999
- declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
2941
+ declare const DxcSpinner: ({ label, value, showValue, mode, margin, ariaLabel, }: Props$a) => JSX.Element;
3000
2942
 
3001
2943
  type Mode = "default" | "info" | "success" | "warning" | "error";
3002
2944
  type Size = "small" | "medium" | "large";
@@ -3017,13 +2959,6 @@ type Props$9 = {
3017
2959
 
3018
2960
  declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
3019
2961
 
3020
- type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3021
- type Margin$6 = {
3022
- top?: Space$6;
3023
- bottom?: Space$6;
3024
- left?: Space$6;
3025
- right?: Space$6;
3026
- };
3027
2962
  type Props$8 = {
3028
2963
  /**
3029
2964
  * Initial state of the switch, only when it is uncontrolled.
@@ -3068,7 +3003,7 @@ type Props$8 = {
3068
3003
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3069
3004
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3070
3005
  */
3071
- margin?: Space$6 | Margin$6;
3006
+ margin?: Space$1 | Margin;
3072
3007
  /**
3073
3008
  * Size of the component.
3074
3009
  */
@@ -3077,6 +3012,10 @@ type Props$8 = {
3077
3012
  * Value of the tabindex.
3078
3013
  */
3079
3014
  tabIndex?: number;
3015
+ /**
3016
+ * Specifies a string to be used as the name for the switch element when no `label` is provided.
3017
+ */
3018
+ ariaLabel?: string;
3080
3019
  };
3081
3020
 
3082
3021
  declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
@@ -3086,14 +3025,6 @@ declare const DxcTable: {
3086
3025
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
3087
3026
  };
3088
3027
 
3089
- type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3090
- type Margin$5 = {
3091
- top?: Space$5;
3092
- bottom?: Space$5;
3093
- left?: Space$5;
3094
- right?: Space$5;
3095
- };
3096
- type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3097
3028
  type TabCommonProps = {
3098
3029
  /**
3099
3030
  * Whether the tab is disabled or not.
@@ -3116,7 +3047,7 @@ type TabLabelProps = TabCommonProps & {
3116
3047
  /**
3117
3048
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3118
3049
  */
3119
- icon?: string | SVG$5;
3050
+ icon?: string | SVG;
3120
3051
  };
3121
3052
  type TabIconProps = TabCommonProps & {
3122
3053
  /**
@@ -3126,17 +3057,17 @@ type TabIconProps = TabCommonProps & {
3126
3057
  /**
3127
3058
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3128
3059
  */
3129
- icon: string | SVG$5;
3060
+ icon: string | SVG;
3130
3061
  };
3131
3062
  type TabProps = {
3132
3063
  defaultActive?: boolean;
3133
3064
  active?: boolean;
3134
- icon?: string | SVG$5;
3135
- label?: string;
3065
+ icon?: string | SVG;
3066
+ label: string;
3136
3067
  title?: string;
3137
3068
  disabled?: boolean;
3138
3069
  notificationNumber?: boolean | number;
3139
- children: React.ReactNode;
3070
+ children: ReactNode;
3140
3071
  onClick?: () => void;
3141
3072
  onHover?: () => void;
3142
3073
  };
@@ -3167,12 +3098,12 @@ type LegacyProps = {
3167
3098
  * This function will be called when the user hovers a tab.The index of the
3168
3099
  * hovered tab will be passed as a parameter.
3169
3100
  */
3170
- onTabHover?: (index: number) => void;
3101
+ onTabHover?: (index: number | null) => void;
3171
3102
  /**
3172
3103
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3173
3104
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3174
3105
  */
3175
- margin?: Space$5 | Margin$5;
3106
+ margin?: Space$1 | Margin;
3176
3107
  /**
3177
3108
  * Value of the tabindex attribute applied to each tab.
3178
3109
  */
@@ -3187,7 +3118,7 @@ type NewProps = {
3187
3118
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3188
3119
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3189
3120
  */
3190
- margin?: Space$5 | Margin$5;
3121
+ margin?: Space$1 | Margin;
3191
3122
  /**
3192
3123
  * Value of the tabindex attribute applied to each tab.
3193
3124
  */
@@ -3195,23 +3126,15 @@ type NewProps = {
3195
3126
  /**
3196
3127
  * Contains one or more DxcTabs.Tab.
3197
3128
  */
3198
- children?: React.ReactNode;
3129
+ children?: ReactNode;
3199
3130
  };
3200
3131
  type Props$7 = LegacyProps & NewProps;
3201
3132
 
3202
3133
  declare const DxcTabs: {
3203
- ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): JSX.Element;
3134
+ ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): false | react_jsx_runtime.JSX.Element;
3204
3135
  Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
3205
3136
  };
3206
3137
 
3207
- type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3208
- type Margin$4 = {
3209
- top?: Space$4;
3210
- bottom?: Space$4;
3211
- left?: Space$4;
3212
- right?: Space$4;
3213
- };
3214
- type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3215
3138
  type TagCommonProps = {
3216
3139
  /**
3217
3140
  * If defined, the tag will be displayed as an anchor, using this prop as "href".
@@ -3240,7 +3163,7 @@ type TagCommonProps = {
3240
3163
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3241
3164
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3242
3165
  */
3243
- margin?: Space$4 | Margin$4;
3166
+ margin?: Space$1 | Margin;
3244
3167
  /**
3245
3168
  * Size of the component.
3246
3169
  */
@@ -3254,7 +3177,7 @@ type TagLabelProps = TagCommonProps & {
3254
3177
  /**
3255
3178
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3256
3179
  */
3257
- icon?: string | SVG$4;
3180
+ icon?: string | SVG;
3258
3181
  /**
3259
3182
  * Text to be placed next inside the tag.
3260
3183
  */
@@ -3264,7 +3187,7 @@ type TagIconProps = TagCommonProps & {
3264
3187
  /**
3265
3188
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3266
3189
  */
3267
- icon: string | SVG$4;
3190
+ icon: string | SVG;
3268
3191
  /**
3269
3192
  * Text to be placed next inside the tag.
3270
3193
  */
@@ -3277,13 +3200,6 @@ type Props$6 = TagLabelProps | TagIconProps;
3277
3200
  */
3278
3201
  declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
3279
3202
 
3280
- type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3281
- type Margin$3 = {
3282
- top?: Space$3;
3283
- bottom?: Space$3;
3284
- left?: Space$3;
3285
- right?: Space$3;
3286
- };
3287
3203
  type Props$5 = {
3288
3204
  /**
3289
3205
  * Text to be placed above the textarea.
@@ -3403,7 +3319,7 @@ type Props$5 = {
3403
3319
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3404
3320
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3405
3321
  */
3406
- margin?: Space$3 | Margin$3;
3322
+ margin?: Space$1 | Margin;
3407
3323
  /**
3408
3324
  * Size of the component.
3409
3325
  */
@@ -3412,18 +3328,14 @@ type Props$5 = {
3412
3328
  * Value of the tabindex attribute.
3413
3329
  */
3414
3330
  tabIndex?: number;
3331
+ /**
3332
+ * Specifies a string to be used as the name for the textarea element when no `label` is provided.
3333
+ */
3334
+ ariaLabel?: string;
3415
3335
  };
3416
3336
 
3417
3337
  declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
3418
3338
 
3419
- type Space$2 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3420
- type Margin$2 = {
3421
- top?: Space$2;
3422
- bottom?: Space$2;
3423
- left?: Space$2;
3424
- right?: Space$2;
3425
- };
3426
- type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3427
3339
  type Action$1 = {
3428
3340
  /**
3429
3341
  * This function will be called when the user clicks the action.
@@ -3432,7 +3344,7 @@ type Action$1 = {
3432
3344
  /**
3433
3345
  * Icon to be placed in the action..
3434
3346
  */
3435
- icon: string | SVG$3;
3347
+ icon: string | SVG;
3436
3348
  /**
3437
3349
  * Text representing advisory information related
3438
3350
  * to the button's action. Under the hood, this prop also serves
@@ -3574,7 +3486,7 @@ type Props$4 = {
3574
3486
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3575
3487
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3576
3488
  */
3577
- margin?: Space$2 | Margin$2;
3489
+ margin?: Space$1 | Margin;
3578
3490
  /**
3579
3491
  * Size of the component.
3580
3492
  */
@@ -3583,44 +3495,69 @@ type Props$4 = {
3583
3495
  * Value of the tabindex attribute.
3584
3496
  */
3585
3497
  tabIndex?: number;
3498
+ /**
3499
+ * Specifies a string to be used as the name for the textInput element when no `label` is provided.
3500
+ */
3501
+ ariaLabel?: string;
3586
3502
  };
3587
3503
 
3588
3504
  declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
3589
3505
 
3590
- type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3591
3506
  type Action = {
3592
- icon?: string | SVG$2;
3507
+ /**
3508
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
3509
+ */
3510
+ icon?: string | SVG;
3511
+ /**
3512
+ * The label of the action.
3513
+ */
3593
3514
  label: string;
3515
+ /**
3516
+ * The function that will be executed when the user clicks on the action button.
3517
+ */
3594
3518
  onClick: () => void;
3595
3519
  };
3596
3520
  type CommonProps$1 = {
3521
+ /**
3522
+ * Tertiary button which performs a custom action, specified by the user.
3523
+ */
3597
3524
  action?: Action;
3525
+ /**
3526
+ * Message to be displayed as a toast.
3527
+ */
3598
3528
  message: string;
3599
3529
  };
3600
3530
  type DefaultToast = CommonProps$1 & {
3601
- icon?: string | SVG$2;
3531
+ /**
3532
+ * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
3533
+ * When using Material Symbols, replace spaces with underscores.
3534
+ * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
3535
+ */
3536
+ icon?: string | SVG;
3602
3537
  };
3603
3538
  type LoadingToast = CommonProps$1 & {
3604
3539
  loading: boolean;
3605
3540
  };
3606
3541
  type SemanticToast = CommonProps$1 & {
3542
+ /**
3543
+ * Flag that allows to hide the semantic icon of the toast.
3544
+ */
3607
3545
  hideSemanticIcon?: boolean;
3608
3546
  };
3609
3547
  type ToastsQueuePropsType = {
3548
+ /**
3549
+ * Duration in milliseconds before a toast automatically hides itself.
3550
+ * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
3551
+ */
3610
3552
  duration?: number;
3611
- children: React.ReactNode;
3553
+ /**
3554
+ * Tree of components from which the useToast hook can be triggered.
3555
+ */
3556
+ children: ReactNode;
3612
3557
  };
3613
3558
 
3614
3559
  declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
3615
3560
 
3616
- type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3617
- type Margin$1 = {
3618
- top?: Space$1;
3619
- bottom?: Space$1;
3620
- left?: Space$1;
3621
- right?: Space$1;
3622
- };
3623
- type SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3624
3561
  type OptionIcon = {
3625
3562
  /**
3626
3563
  * String with the option display value.
@@ -3629,7 +3566,7 @@ type OptionIcon = {
3629
3566
  /**
3630
3567
  * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3631
3568
  */
3632
- icon: string | SVG$1;
3569
+ icon: string | SVG;
3633
3570
  /**
3634
3571
  * Value for the HTML properties title and aria-label.
3635
3572
  * When a label is defined, this prop can not be use.
@@ -3644,7 +3581,7 @@ type OptionLabel = {
3644
3581
  /**
3645
3582
  * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3646
3583
  */
3647
- icon?: string | SVG$1;
3584
+ icon?: string | SVG;
3648
3585
  /**
3649
3586
  * Value for the HTML properties title and aria-label.
3650
3587
  * When a label is defined, this prop can not be use.
@@ -3678,7 +3615,7 @@ type CommonProps = {
3678
3615
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3679
3616
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3680
3617
  */
3681
- margin?: Space$1 | Margin$1;
3618
+ margin?: Space$1 | Margin;
3682
3619
  /**
3683
3620
  * Value of the tabindex.
3684
3621
  */
@@ -3736,17 +3673,19 @@ type Props$2 = {
3736
3673
  /**
3737
3674
  * Text to be displayed inside the tooltip.
3738
3675
  */
3739
- label: string;
3676
+ label?: string;
3740
3677
  /**
3741
3678
  * Content in which the Tooltip will be displayed.
3742
3679
  */
3743
- children: React.ReactNode;
3680
+ children: ReactNode;
3744
3681
  };
3745
3682
 
3746
3683
  declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
3747
3684
 
3748
3685
  type Props$1 = {
3749
- as?: keyof HTMLElementTagNameMap;
3686
+ as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
3687
+ children: ReactNode;
3688
+ color?: string;
3750
3689
  display?: "inline" | "block";
3751
3690
  fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
3752
3691
  fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
@@ -3755,23 +3694,13 @@ type Props$1 = {
3755
3694
  letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
3756
3695
  lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
3757
3696
  textAlign?: "left" | "center" | "right";
3758
- color?: string;
3759
3697
  textDecoration?: "none" | "underline" | "line-through";
3760
3698
  textOverflow?: "clip" | "ellipsis" | "unset";
3761
3699
  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
3762
- children: React.ReactNode;
3763
3700
  };
3764
3701
 
3765
- declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: Props$1) => JSX.Element;
3702
+ declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
3766
3703
 
3767
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3768
- type Margin = {
3769
- top?: Space;
3770
- bottom?: Space;
3771
- left?: Space;
3772
- right?: Space;
3773
- };
3774
- type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
3775
3704
  type StepProps = {
3776
3705
  /**
3777
3706
  * Step label.
@@ -3820,7 +3749,7 @@ type Props = {
3820
3749
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3821
3750
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3822
3751
  */
3823
- margin?: Space | Margin;
3752
+ margin?: Space$1 | Margin;
3824
3753
  /**
3825
3754
  * Value of the tabindex attribute that is given to all the steps.
3826
3755
  */
@@ -3833,28 +3762,28 @@ declare const componentTokens: {
3833
3762
  accordion: {
3834
3763
  backgroundColor: string;
3835
3764
  hoverBackgroundColor: string;
3765
+ focusBackgroundColor: string;
3766
+ activeBackgroundColor: string;
3836
3767
  arrowColor: string;
3837
3768
  disabledArrowColor: string;
3769
+ subLabelFontFamily: string;
3770
+ subLabelFontSize: string;
3771
+ subLabelFontWeight: string;
3772
+ subLabelFontStyle: string;
3773
+ subLabelFontColor: string;
3774
+ disabledSubLabelFontColor: string;
3838
3775
  assistiveTextFontFamily: string;
3839
3776
  assistiveTextFontSize: string;
3840
3777
  assistiveTextFontWeight: string;
3841
3778
  assistiveTextFontStyle: string;
3842
- assistiveTextLetterSpacing: string;
3843
3779
  assistiveTextFontColor: string;
3844
3780
  disabledAssistiveTextFontColor: string;
3845
- assistiveTextMinWidth: string;
3846
- assistiveTextPaddingRight: string;
3847
- assistiveTextPaddingLeft: string;
3848
3781
  titleLabelFontFamily: string;
3849
3782
  titleLabelFontSize: string;
3850
3783
  titleLabelFontWeight: string;
3851
3784
  titleLabelFontStyle: string;
3852
3785
  titleLabelFontColor: string;
3853
3786
  disabledTitleLabelFontColor: string;
3854
- titleLabelPaddingTop: string;
3855
- titleLabelPaddingBottom: string;
3856
- titleLabelPaddingLeft: string;
3857
- titleLabelPaddingRight: string;
3858
3787
  focusBorderColor: string;
3859
3788
  focusBorderStyle: string;
3860
3789
  focusBorderThickness: string;
@@ -3862,59 +3791,34 @@ declare const componentTokens: {
3862
3791
  boxShadowOffsetX: string;
3863
3792
  boxShadowOffsetY: string;
3864
3793
  boxShadowBlur: string;
3794
+ boxShadowSpread: string;
3865
3795
  boxShadowColor: string;
3866
3796
  iconColor: string;
3867
3797
  disabledIconColor: string;
3868
3798
  iconSize: string;
3869
- iconMarginLeft: string;
3870
- iconMarginRight: string;
3871
- accordionGroupSeparatorBorderColor: string;
3872
- accordionGroupSeparatorBorderThickness: string;
3873
- accordionGroupSeparatorBorderRadius: string;
3874
- accordionGroupSeparatorBorderStyle: string;
3799
+ accordionSeparatorBorderColor: string;
3800
+ accordionSeparatorBorderThickness: string;
3801
+ accordionSeparatorBorderStyle: string;
3875
3802
  };
3876
3803
  alert: {
3877
- titleFontFamily: string;
3878
- titleFontColor: string;
3879
- titleFontSize: string;
3880
- titleFontStyle: string;
3881
- titleFontWeight: string;
3882
- titleTextTransform: string;
3883
- titlePaddingRight: string;
3884
- titlePaddingLeft: string;
3885
- inlineTextFontFamily: string;
3886
- inlineTextFontColor: string;
3887
- inlineTextFontSize: string;
3888
- inlineTextFontStyle: string;
3889
- inlineTextFontWeight: string;
3890
- inlineTextPaddingLeft: string;
3891
- inlineTextPaddingRight: string;
3892
- contentPaddingLeft: string;
3893
- contentPaddingRight: string;
3894
- contentPaddingTop: string;
3895
- contentPaddingBottom: string;
3896
- borderRadius: string;
3897
- borderStyle: string;
3898
- borderThickness: string;
3899
- infoBorderColor: string;
3900
- successBorderColor: string;
3901
- warningBorderColor: string;
3902
- errorBorderColor: string;
3903
- iconSize: string;
3904
- iconPaddingLeft: string;
3905
- iconPaddingRight: string;
3906
- infoIconColor: string;
3907
- successIconColor: string;
3908
- warningIconColor: string;
3804
+ errorBackgroundColor: string;
3909
3805
  errorIconColor: string;
3806
+ fontColor: string;
3807
+ fontFamily: string;
3808
+ fontSize: string;
3809
+ fontStyle: string;
3810
+ fontWeight: string;
3811
+ iconSize: string;
3910
3812
  infoBackgroundColor: string;
3813
+ infoIconColor: string;
3814
+ modalBackgroundColor: string;
3815
+ modalTitleFontSize: string;
3816
+ modalTitleFontWeight: string;
3817
+ overlayColor: string;
3911
3818
  successBackgroundColor: string;
3819
+ successIconColor: string;
3912
3820
  warningBackgroundColor: string;
3913
- errorBackgroundColor: string;
3914
- hoverActionBackgroundColor: string;
3915
- activeActionBackgroundColor: string;
3916
- focusActionBorderColor: string;
3917
- overlayColor: string;
3821
+ warningIconColor: string;
3918
3822
  };
3919
3823
  bulletedList: {
3920
3824
  fontColor: string;
@@ -4240,15 +4144,8 @@ declare const componentTokens: {
4240
4144
  dialog: {
4241
4145
  overlayColor: string;
4242
4146
  backgroundColor: string;
4243
- closeIconSize: string;
4244
- closeIconTopPosition: string;
4245
- closeIconRightPosition: string;
4246
4147
  closeIconBackgroundColor: string;
4247
- closeIconBorderColor: string;
4248
4148
  closeIconColor: string;
4249
- closeIconBorderThickness: string;
4250
- closeIconBorderStyle: string;
4251
- closeIconBorderRadius: string;
4252
4149
  boxShadowOffsetX: string;
4253
4150
  boxShadowOffsetY: string;
4254
4151
  boxShadowBlur: string;
@@ -4383,15 +4280,15 @@ declare const componentTokens: {
4383
4280
  };
4384
4281
  header: {
4385
4282
  backgroundColor: string;
4386
- hamburguerFocusColor: string;
4387
- hamburguerFontFamily: string;
4388
- hamburguerFontStyle: string;
4389
- hamburguerFontColor: string;
4390
- hamburguerFontSize: string;
4391
- hamburguerFontWeight: string;
4392
- hamburguerTextTransform: string;
4393
- hamburguerIconColor: string;
4394
- hamburguerHoverColor: string;
4283
+ hamburgerFocusColor: string;
4284
+ hamburgerFontFamily: string;
4285
+ hamburgerFontStyle: string;
4286
+ hamburgerFontColor: string;
4287
+ hamburgerFontSize: string;
4288
+ hamburgerFontWeight: string;
4289
+ hamburgerTextTransform: string;
4290
+ hamburgerIconColor: string;
4291
+ hamburgerHoverColor: string;
4395
4292
  logo: string;
4396
4293
  logoResponsive: string;
4397
4294
  logoHeight: string;
@@ -5142,6 +5039,7 @@ type OpinionatedTheme = {
5142
5039
  accordion: {
5143
5040
  accentColor: string;
5144
5041
  titleFontColor: string;
5042
+ subLabelFontColor: string;
5145
5043
  assistiveTextFontColor: string;
5146
5044
  };
5147
5045
  alert: {
@@ -5203,7 +5101,7 @@ type OpinionatedTheme = {
5203
5101
  accentColor: string;
5204
5102
  fontColor: string;
5205
5103
  menuBaseColor: string;
5206
- hamburguerColor: string;
5104
+ hamburgerColor: string;
5207
5105
  logo: string;
5208
5106
  logoResponsive: string;
5209
5107
  contentColor: string;
@@ -5297,10 +5195,10 @@ declare const defaultTranslatedComponentLabels: {
5297
5195
  visibilityToggleTitle: string;
5298
5196
  };
5299
5197
  alert: {
5300
- infoTitleText: string;
5301
- successTitleText: string;
5302
- warningTitleText: string;
5303
- errorTitleText: string;
5198
+ previousMessageActionTitle: string;
5199
+ nextMessageActionTitle: string;
5200
+ closeAlertActionTitle: string;
5201
+ closeMessageActionTitle: string;
5304
5202
  };
5305
5203
  calendar: {
5306
5204
  daysShort: string[];
@@ -5337,7 +5235,7 @@ declare const defaultTranslatedComponentLabels: {
5337
5235
  };
5338
5236
  header: {
5339
5237
  closeIcon: string;
5340
- hamburguerTitle: string;
5238
+ hamburgerTitle: string;
5341
5239
  };
5342
5240
  numberInput: {
5343
5241
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5381,32 +5279,39 @@ declare const defaultTranslatedComponentLabels: {
5381
5279
  };
5382
5280
  type TranslatedLabels = typeof defaultTranslatedComponentLabels;
5383
5281
 
5384
- declare const HalstackContext: react.Context<DeepPartial<{
5282
+ /**
5283
+ * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
5284
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
5285
+ */
5286
+ type DeepPartial<T> = {
5287
+ [P in keyof T]?: Partial<T[P]>;
5288
+ };
5289
+ declare const HalstackContext: react.Context<{
5385
5290
  accordion: {
5386
5291
  backgroundColor: string;
5387
5292
  hoverBackgroundColor: string;
5293
+ focusBackgroundColor: string;
5294
+ activeBackgroundColor: string;
5388
5295
  arrowColor: string;
5389
5296
  disabledArrowColor: string;
5297
+ subLabelFontFamily: string;
5298
+ subLabelFontSize: string;
5299
+ subLabelFontWeight: string;
5300
+ subLabelFontStyle: string;
5301
+ subLabelFontColor: string;
5302
+ disabledSubLabelFontColor: string;
5390
5303
  assistiveTextFontFamily: string;
5391
5304
  assistiveTextFontSize: string;
5392
5305
  assistiveTextFontWeight: string;
5393
5306
  assistiveTextFontStyle: string;
5394
- assistiveTextLetterSpacing: string;
5395
5307
  assistiveTextFontColor: string;
5396
5308
  disabledAssistiveTextFontColor: string;
5397
- assistiveTextMinWidth: string;
5398
- assistiveTextPaddingRight: string;
5399
- assistiveTextPaddingLeft: string;
5400
5309
  titleLabelFontFamily: string;
5401
5310
  titleLabelFontSize: string;
5402
5311
  titleLabelFontWeight: string;
5403
5312
  titleLabelFontStyle: string;
5404
5313
  titleLabelFontColor: string;
5405
5314
  disabledTitleLabelFontColor: string;
5406
- titleLabelPaddingTop: string;
5407
- titleLabelPaddingBottom: string;
5408
- titleLabelPaddingLeft: string;
5409
- titleLabelPaddingRight: string;
5410
5315
  focusBorderColor: string;
5411
5316
  focusBorderStyle: string;
5412
5317
  focusBorderThickness: string;
@@ -5414,59 +5319,34 @@ declare const HalstackContext: react.Context<DeepPartial<{
5414
5319
  boxShadowOffsetX: string;
5415
5320
  boxShadowOffsetY: string;
5416
5321
  boxShadowBlur: string;
5322
+ boxShadowSpread: string;
5417
5323
  boxShadowColor: string;
5418
5324
  iconColor: string;
5419
5325
  disabledIconColor: string;
5420
5326
  iconSize: string;
5421
- iconMarginLeft: string;
5422
- iconMarginRight: string;
5423
- accordionGroupSeparatorBorderColor: string;
5424
- accordionGroupSeparatorBorderThickness: string;
5425
- accordionGroupSeparatorBorderRadius: string;
5426
- accordionGroupSeparatorBorderStyle: string;
5327
+ accordionSeparatorBorderColor: string;
5328
+ accordionSeparatorBorderThickness: string;
5329
+ accordionSeparatorBorderStyle: string;
5427
5330
  };
5428
5331
  alert: {
5429
- titleFontFamily: string;
5430
- titleFontColor: string;
5431
- titleFontSize: string;
5432
- titleFontStyle: string;
5433
- titleFontWeight: string;
5434
- titleTextTransform: string;
5435
- titlePaddingRight: string;
5436
- titlePaddingLeft: string;
5437
- inlineTextFontFamily: string;
5438
- inlineTextFontColor: string;
5439
- inlineTextFontSize: string;
5440
- inlineTextFontStyle: string;
5441
- inlineTextFontWeight: string;
5442
- inlineTextPaddingLeft: string;
5443
- inlineTextPaddingRight: string;
5444
- contentPaddingLeft: string;
5445
- contentPaddingRight: string;
5446
- contentPaddingTop: string;
5447
- contentPaddingBottom: string;
5448
- borderRadius: string;
5449
- borderStyle: string;
5450
- borderThickness: string;
5451
- infoBorderColor: string;
5452
- successBorderColor: string;
5453
- warningBorderColor: string;
5454
- errorBorderColor: string;
5455
- iconSize: string;
5456
- iconPaddingLeft: string;
5457
- iconPaddingRight: string;
5458
- infoIconColor: string;
5459
- successIconColor: string;
5460
- warningIconColor: string;
5332
+ errorBackgroundColor: string;
5461
5333
  errorIconColor: string;
5334
+ fontColor: string;
5335
+ fontFamily: string;
5336
+ fontSize: string;
5337
+ fontStyle: string;
5338
+ fontWeight: string;
5339
+ iconSize: string;
5462
5340
  infoBackgroundColor: string;
5341
+ infoIconColor: string;
5342
+ modalBackgroundColor: string;
5343
+ modalTitleFontSize: string;
5344
+ modalTitleFontWeight: string;
5345
+ overlayColor: string;
5463
5346
  successBackgroundColor: string;
5347
+ successIconColor: string;
5464
5348
  warningBackgroundColor: string;
5465
- errorBackgroundColor: string;
5466
- hoverActionBackgroundColor: string;
5467
- activeActionBackgroundColor: string;
5468
- focusActionBorderColor: string;
5469
- overlayColor: string;
5349
+ warningIconColor: string;
5470
5350
  };
5471
5351
  bulletedList: {
5472
5352
  fontColor: string;
@@ -5792,15 +5672,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
5792
5672
  dialog: {
5793
5673
  overlayColor: string;
5794
5674
  backgroundColor: string;
5795
- closeIconSize: string;
5796
- closeIconTopPosition: string;
5797
- closeIconRightPosition: string;
5798
5675
  closeIconBackgroundColor: string;
5799
- closeIconBorderColor: string;
5800
5676
  closeIconColor: string;
5801
- closeIconBorderThickness: string;
5802
- closeIconBorderStyle: string;
5803
- closeIconBorderRadius: string;
5804
5677
  boxShadowOffsetX: string;
5805
5678
  boxShadowOffsetY: string;
5806
5679
  boxShadowBlur: string;
@@ -5935,15 +5808,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
5935
5808
  };
5936
5809
  header: {
5937
5810
  backgroundColor: string;
5938
- hamburguerFocusColor: string;
5939
- hamburguerFontFamily: string;
5940
- hamburguerFontStyle: string;
5941
- hamburguerFontColor: string;
5942
- hamburguerFontSize: string;
5943
- hamburguerFontWeight: string;
5944
- hamburguerTextTransform: string;
5945
- hamburguerIconColor: string;
5946
- hamburguerHoverColor: string;
5811
+ hamburgerFocusColor: string;
5812
+ hamburgerFontFamily: string;
5813
+ hamburgerFontStyle: string;
5814
+ hamburgerFontColor: string;
5815
+ hamburgerFontSize: string;
5816
+ hamburgerFontWeight: string;
5817
+ hamburgerTextTransform: string;
5818
+ hamburgerIconColor: string;
5819
+ hamburgerHoverColor: string;
5947
5820
  logo: string;
5948
5821
  logoResponsive: string;
5949
5822
  logoHeight: string;
@@ -6688,16 +6561,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
6688
6561
  separatorColor: string;
6689
6562
  focusColor: string;
6690
6563
  };
6691
- }>>;
6692
- declare const HalstackLanguageContext: react.Context<DeepPartial<{
6564
+ }>;
6565
+ declare const HalstackLanguageContext: react.Context<{
6693
6566
  applicationLayout: {
6694
6567
  visibilityToggleTitle: string;
6695
6568
  };
6696
6569
  alert: {
6697
- infoTitleText: string;
6698
- successTitleText: string;
6699
- warningTitleText: string;
6700
- errorTitleText: string;
6570
+ previousMessageActionTitle: string;
6571
+ nextMessageActionTitle: string;
6572
+ closeAlertActionTitle: string;
6573
+ closeMessageActionTitle: string;
6701
6574
  };
6702
6575
  calendar: {
6703
6576
  daysShort: string[];
@@ -6734,7 +6607,7 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6734
6607
  };
6735
6608
  header: {
6736
6609
  closeIcon: string;
6737
- hamburguerTitle: string;
6610
+ hamburgerTitle: string;
6738
6611
  };
6739
6612
  numberInput: {
6740
6613
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -6775,28 +6648,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6775
6648
  toast: {
6776
6649
  clearToastActionTitle: string;
6777
6650
  };
6778
- }>>;
6779
- /**
6780
- * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
6781
- * This is an extension of the already existing Partial type, which only allows one level of partiality.
6782
- */
6783
- type DeepPartial<T> = {
6784
- [P in keyof T]?: Partial<T[P]>;
6785
- };
6651
+ }>;
6786
6652
  type HalstackProviderPropsType = {
6787
6653
  theme?: DeepPartial<OpinionatedTheme>;
6788
6654
  advancedTheme?: DeepPartial<AdvancedTheme>;
6789
6655
  labels?: DeepPartial<TranslatedLabels>;
6790
- children: React.ReactNode;
6656
+ children: ReactNode;
6791
6657
  };
6792
6658
  declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
6793
6659
 
6794
6660
  declare const useToast: () => {
6795
- default: (toast: DefaultToast) => () => void;
6796
- success: (toast: SemanticToast) => () => void;
6797
- warning: (toast: SemanticToast) => () => void;
6798
- info: (toast: SemanticToast) => () => void;
6799
- loading: (toast: Omit<LoadingToast, "loading">) => () => void;
6661
+ default: (toast: DefaultToast) => (() => void) | undefined;
6662
+ success: (toast: SemanticToast) => (() => void) | undefined;
6663
+ warning: (toast: SemanticToast) => (() => void) | undefined;
6664
+ info: (toast: SemanticToast) => (() => void) | undefined;
6665
+ loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
6800
6666
  };
6801
6667
 
6802
- export { DxcAccordion, DxcAccordionGroup, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, Inset as DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };
6668
+ export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, Inset as DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };