@dxc-technology/halstack-react 14.0.0 → 15.0.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 (5) hide show
  1. package/dist/index.d.mts +793 -828
  2. package/dist/index.d.ts +793 -828
  3. package/dist/index.js +14564 -1
  4. package/dist/index.mjs +14507 -1
  5. package/package.json +2 -5
package/dist/index.d.ts CHANGED
@@ -1,34 +1,45 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as react from 'react';
2
+ import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { SortColumn } from 'react-data-grid';
3
5
  import * as styled_components from 'styled-components';
4
6
 
5
- type Space$t = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
6
- type Margin$o = {
7
- top?: Space$t;
8
- bottom?: Space$t;
9
- left?: Space$t;
10
- 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;
11
13
  };
12
- type SVG$j = React.ReactNode & React.SVGProps<SVGSVGElement>;
13
- type Props$K = {
14
+ type SVG = ReactNode & SVGProps<SVGSVGElement>;
15
+
16
+ type AccordionItemProps = {
14
17
  /**
15
18
  * The panel label.
16
19
  */
17
20
  label: string;
18
21
  /**
19
- * Initial state of the panel, only when it is uncontrolled.
22
+ * Additional info label positioned under the label.
23
+ */
24
+ subLabel?: string;
25
+ /**
26
+ * Badge component to add extra value to the accordion.
20
27
  */
21
- defaultIsExpanded?: boolean;
28
+ badge?: {
29
+ position: "before" | "after";
30
+ element: ReactNode;
31
+ };
22
32
  /**
23
- * Represents the state of the panel. When true, the component will be
24
- * expanded. If undefined, the component will be uncontrolled and its
25
- * value will be managed internally by the component.
33
+ * Status light component to add extra value to the accordion.
26
34
  */
27
- isExpanded?: boolean;
35
+ statusLight?: ReactNode;
28
36
  /**
29
- * 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_".
30
41
  */
31
- icon?: string | SVG$j;
42
+ icon?: string | SVG;
32
43
  /**
33
44
  * Assistive text to be placed on the right side of the panel.
34
45
  */
@@ -37,156 +48,170 @@ type Props$K = {
37
48
  * If true, the component will be disabled.
38
49
  */
39
50
  disabled?: boolean;
40
- /**
41
- * This function will be called when the user clicks the accordion to expand or collapse
42
- * the panel. The new state of the panel will be passed as a parameter.
43
- */
44
- onChange?: (isExpanded: boolean) => void;
45
51
  /**
46
52
  * The expanded panel of the accordion. This area can be used to render
47
53
  * custom content.
48
54
  */
49
- children: React.ReactNode;
50
- /**
51
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
52
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
53
- */
54
- margin?: Space$t | Margin$o;
55
+ children: ReactNode;
55
56
  /**
56
57
  * Value of the tabindex attribute.
57
58
  */
58
59
  tabIndex?: number;
59
60
  };
60
-
61
- declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
62
-
63
- type Space$s = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
64
- type Margin$n = {
65
- top?: Space$s;
66
- bottom?: Space$s;
67
- left?: Space$s;
68
- right?: Space$s;
69
- };
70
- type SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
71
- type AccordionPropsType = {
61
+ type CommonProps$9 = {
72
62
  /**
73
- * 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.
74
65
  */
75
- label: string;
66
+ margin?: Space$1 | Margin;
76
67
  /**
77
- * 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.
78
69
  */
79
- icon?: string | SVG$i;
70
+ children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
71
+ };
72
+ type IndependentProps = CommonProps$9 & {
80
73
  /**
81
- * 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.
82
75
  */
83
- assistiveText?: string;
76
+ independent: true;
84
77
  /**
85
- * 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.
86
80
  */
87
- disabled?: boolean;
81
+ defaultIndexActive?: number;
88
82
  /**
89
- * The expanded panel of the accordion. This area can be used to render
90
- * 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.
86
+ */
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.
91
90
  */
92
- children: React.ReactNode;
91
+ onActiveChange?: (index: number) => void;
93
92
  };
94
- type Props$J = {
93
+ type NonIndependentProps = CommonProps$9 & {
95
94
  /**
96
- * 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.
97
96
  */
98
- defaultIndexActive?: number;
97
+ independent?: false;
99
98
  /**
100
- * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
101
- * 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.
102
101
  */
103
- indexActive?: number;
102
+ defaultIndexActive?: number[];
104
103
  /**
105
- * 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.
106
107
  */
107
- disabled?: boolean;
108
+ indexActive?: number[];
108
109
  /**
109
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.
110
111
  */
111
- 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 = {
122
+ /**
123
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
124
+ */
125
+ icon?: string | SVG;
112
126
  /**
113
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
114
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
127
+ * The label of the action.
115
128
  */
116
- margin?: Space$s | Margin$n;
129
+ label: string;
117
130
  /**
118
- * Customized accordion(s) that are allowed inside an Accordion Group.
131
+ * The function that will be executed when the user clicks on the action button.
119
132
  */
120
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
121
- };
122
-
123
- declare const DxcAccordionGroup: {
124
- ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
125
- Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
133
+ onClick: () => void;
126
134
  };
127
-
128
- type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
129
- type Margin$m = {
130
- top?: Space$r;
131
- bottom?: Space$r;
132
- left?: Space$r;
133
- 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;
134
146
  };
135
- type Props$I = {
147
+ type CommonProps$8 = {
136
148
  /**
137
- * 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).
138
152
  */
139
- type?: "info" | "confirm" | "warning" | "error";
153
+ closable?: boolean;
140
154
  /**
141
- * Uses on of the available alert modes:
142
- * 'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
143
- * There is no overlay layer. Position should be decided by the user.
144
- * 'modal': The alert will be displayed in the middle of the screen with an overlay layer behind.
145
- * The onClose function will be executed when the X button or the overlay is clicked. d
146
- * 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.
147
156
  */
148
- mode?: "inline" | "modal";
157
+ primaryAction?: Action$2;
149
158
  /**
150
- * Text to display after icon and alert type and before content.
159
+ * Secondary action of the alert.
151
160
  */
152
- inlineText?: string;
161
+ secondaryAction?: Action$2;
153
162
  /**
154
- * 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.
155
164
  */
156
- onClose?: () => void;
165
+ semantic?: "error" | "info" | "success" | "warning";
157
166
  /**
158
- * The details section of the alert. Can be used to render custom content in this area.
167
+ * Title of the alert.
159
168
  */
160
- children?: React.ReactNode;
169
+ title: string;
170
+ };
171
+ type ModeSpecificProps = {
161
172
  /**
162
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
163
- * 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.
164
179
  */
165
- margin?: Space$r | Margin$m;
180
+ message?: Message | Message[];
166
181
  /**
167
- * Size of the component.
182
+ * The mode of the alert.
168
183
  */
169
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
184
+ mode?: "inline" | "banner";
185
+ } | {
170
186
  /**
171
- * 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.
172
193
  */
173
- tabIndex?: number;
194
+ message: Required<Message>;
195
+ /**
196
+ * The mode of the alert.
197
+ */
198
+ mode: "modal";
174
199
  };
200
+ type Props$I = CommonProps$8 & ModeSpecificProps;
175
201
 
176
- 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;
177
203
 
178
- type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
179
204
  type SidenavTitlePropsType = {
180
205
  /**
181
206
  * The area inside the sidenav title. This area can be used to render custom content.
182
207
  */
183
- children: React.ReactNode;
208
+ children: ReactNode;
184
209
  };
185
210
  type SidenavSectionPropsType = {
186
211
  /**
187
212
  * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
188
213
  */
189
- children: React.ReactNode;
214
+ children: ReactNode;
190
215
  };
191
216
  type SidenavGroupPropsType = {
192
217
  /**
@@ -201,11 +226,11 @@ type SidenavGroupPropsType = {
201
226
  /**
202
227
  * Material Symbol name or SVG icon to be displayed next to the title of the group.
203
228
  */
204
- icon?: string | SVG$h;
229
+ icon?: string | SVG;
205
230
  /**
206
231
  * The area inside the sidenav group. This area can be used to render sidenav links.
207
232
  */
208
- children: React.ReactNode;
233
+ children: ReactNode;
209
234
  };
210
235
  type SidenavLinkPropsType = {
211
236
  /**
@@ -219,7 +244,7 @@ type SidenavLinkPropsType = {
219
244
  /**
220
245
  * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
221
246
  */
222
- icon?: string | SVG$h;
247
+ icon?: string | SVG;
223
248
  /**
224
249
  * If true, the link will be marked as selected. Moreover, in that same case,
225
250
  * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
@@ -229,11 +254,11 @@ type SidenavLinkPropsType = {
229
254
  /**
230
255
  * This function will be called when the user clicks the link and the event will be passed to this function.
231
256
  */
232
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
257
+ onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
233
258
  /**
234
259
  * The area inside the sidenav link.
235
260
  */
236
- children: React.ReactNode;
261
+ children: ReactNode;
237
262
  /**
238
263
  * Value of the tabindex.
239
264
  */
@@ -243,85 +268,14 @@ type Props$H = {
243
268
  /**
244
269
  * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
245
270
  */
246
- title?: React.ReactNode;
271
+ title?: ReactNode;
247
272
  /**
248
273
  * The area inside the sidenav. This area can be used to render the content inside the sidenav.
249
274
  */
250
- children: React.ReactNode;
275
+ children: ReactNode;
251
276
  };
252
277
 
253
- type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
254
- type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
255
- type SocialLink = {
256
- /**
257
- * URL of the page the link goes to.
258
- */
259
- href: string;
260
- /**
261
- * Material Symbol name or SVG element as the icon used for the link.
262
- */
263
- logo: string | SVG$g;
264
- /**
265
- * Value for the HTML properties title and aria-label.
266
- */
267
- title: string;
268
- };
269
- type BottomLink = {
270
- /**
271
- * URL of the page the link goes to.
272
- */
273
- href: string;
274
- /**
275
- * Text for the link.
276
- */
277
- text: string;
278
- };
279
- type FooterPropsType = {
280
- /**
281
- * An array of objects representing the links that will be rendered as
282
- * icons at the top-right side of the footer.
283
- */
284
- socialLinks?: SocialLink[];
285
- /**
286
- * An array of objects representing the links that will be rendered at
287
- * the bottom part of the footer.
288
- */
289
- bottomLinks?: BottomLink[];
290
- /**
291
- * The text that will be displayed as copyright disclaimer.
292
- */
293
- copyright?: string;
294
- /**
295
- * The center section of the footer. Can be used to render custom
296
- * content in this area.
297
- */
298
- children?: React.ReactNode;
299
- /**
300
- * Size of the top margin to be applied to the footer.
301
- */
302
- margin?: Space$q;
303
- /**
304
- * Value of the tabindex for all interactive elements, except those
305
- * inside the custom area.
306
- */
307
- tabIndex?: number;
308
- /**
309
- * Determines the visual style and layout
310
- * - "default": The default mode with full content and styling.
311
- * - "reduced": A reduced mode with minimal content and styling.
312
- */
313
- mode?: "default" | "reduced";
314
- };
315
-
316
- type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
317
- type Margin$l = {
318
- top?: Space$p;
319
- bottom?: Space$p;
320
- left?: Space$p;
321
- right?: Space$p;
322
- };
323
278
  type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
324
- type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
325
279
  type Option$1 = {
326
280
  /**
327
281
  * Option display value.
@@ -330,7 +284,7 @@ type Option$1 = {
330
284
  /**
331
285
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
332
286
  */
333
- icon?: string | SVG$f;
287
+ icon?: string | SVG;
334
288
  /**
335
289
  * Option inner value.
336
290
  */
@@ -349,7 +303,7 @@ type Props$G = {
349
303
  /**
350
304
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
351
305
  */
352
- icon?: string | SVG$f;
306
+ icon?: string | SVG;
353
307
  /**
354
308
  * Whether the icon should appear after or before the label.
355
309
  */
@@ -380,7 +334,7 @@ type Props$G = {
380
334
  * You can pass an object with 'top', 'bottom', 'left' and 'right'
381
335
  * properties in order to specify different margin sizes.
382
336
  */
383
- margin?: Space$p | Margin$l;
337
+ margin?: Space$1 | Margin;
384
338
  /**
385
339
  * Size of the component.
386
340
  */
@@ -389,9 +343,13 @@ type Props$G = {
389
343
  * Value of the tabindex attribute.
390
344
  */
391
345
  tabIndex?: number;
346
+ /**
347
+ * Text representing advisory information related to the dropdown's trigger action.
348
+ * Under the hood, this prop also serves as an accessible label for the component.
349
+ */
350
+ title?: string;
392
351
  };
393
352
 
394
- type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
395
353
  type Props$F = {
396
354
  /**
397
355
  * Whether a contrast line should appear at the bottom of the header.
@@ -402,12 +360,12 @@ type Props$F = {
402
360
  * for the first child in the content, so we recommend the use of React.Fragment
403
361
  * to be applied correctly. Otherwise, the styles can be modified.
404
362
  */
405
- content?: React.ReactNode;
363
+ content?: ReactNode;
406
364
  /**
407
365
  * Content shown in responsive version. It receives the close menu handler that can
408
366
  * be used to add that functionality when a element is clicked.
409
367
  */
410
- responsiveContent?: (closeHandler: () => void) => React.ReactNode;
368
+ responsiveContent?: (closeHandler: () => void) => ReactNode;
411
369
  /**
412
370
  * This function will be called when the user clicks the header logo.
413
371
  */
@@ -415,7 +373,7 @@ type Props$F = {
415
373
  /**
416
374
  * Size of the bottom margin to be applied to the header.
417
375
  */
418
- margin?: Space$o;
376
+ margin?: Space$1;
419
377
  /**
420
378
  * Value of the tabindex for all interactive elements, except those inside the
421
379
  * custom area.
@@ -423,13 +381,74 @@ type Props$F = {
423
381
  tabIndex?: number;
424
382
  };
425
383
 
384
+ type SocialLink = {
385
+ /**
386
+ * URL of the page the link goes to.
387
+ */
388
+ href: string;
389
+ /**
390
+ * Material Symbol name or SVG element as the icon used for the link.
391
+ */
392
+ logo: string | SVG;
393
+ /**
394
+ * Value for the HTML properties title and aria-label.
395
+ */
396
+ title: string;
397
+ };
398
+ type BottomLink = {
399
+ /**
400
+ * URL of the page the link goes to.
401
+ */
402
+ href: string;
403
+ /**
404
+ * Text for the link.
405
+ */
406
+ text: string;
407
+ };
408
+ type FooterPropsType = {
409
+ /**
410
+ * An array of objects representing the links that will be rendered as
411
+ * icons at the top-right side of the footer.
412
+ */
413
+ socialLinks?: SocialLink[];
414
+ /**
415
+ * An array of objects representing the links that will be rendered at
416
+ * the bottom part of the footer.
417
+ */
418
+ bottomLinks?: BottomLink[];
419
+ /**
420
+ * The text that will be displayed as copyright disclaimer.
421
+ */
422
+ copyright?: string;
423
+ /**
424
+ * The center section of the footer. Can be used to render custom
425
+ * content in this area.
426
+ */
427
+ children?: ReactNode;
428
+ /**
429
+ * Size of the top margin to be applied to the footer.
430
+ */
431
+ margin?: Space$1;
432
+ /**
433
+ * Value of the tabindex for all interactive elements, except those
434
+ * inside the custom area.
435
+ */
436
+ tabIndex?: number;
437
+ /**
438
+ * Determines the visual style and layout
439
+ * - "default": The default mode with full content and styling.
440
+ * - "reduced": A reduced mode with minimal content and styling.
441
+ */
442
+ mode?: "default" | "reduced";
443
+ };
444
+
426
445
  type AppLayoutMainPropsType = {
427
446
  /**
428
447
  * Everything between the tags will be displayed as the content of the main part of the application.
429
448
  */
430
- children: React.ReactNode;
449
+ children: ReactNode;
431
450
  };
432
- type AppLayoutPropsType = {
451
+ type ApplicationLayoutPropsType = {
433
452
  /**
434
453
  * Text to be placed next to the hamburger button that toggles the
435
454
  * visibility of the sidenav.
@@ -438,29 +457,29 @@ type AppLayoutPropsType = {
438
457
  /**
439
458
  * Header content.
440
459
  */
441
- header?: React.ReactNode;
460
+ header?: ReactNode;
442
461
  /**
443
462
  * Sidenav content
444
463
  */
445
- sidenav?: React.ReactNode;
464
+ sidenav?: ReactNode;
446
465
  /**
447
466
  * Footer content
448
467
  */
449
- footer?: React.ReactNode;
468
+ footer?: ReactNode;
450
469
  /**
451
470
  * Use the DxcApplicationLayout.Main provided to render main content.
452
471
  */
453
- children: React.ReactElement<AppLayoutMainPropsType>;
472
+ children: ReactElement<AppLayoutMainPropsType>;
454
473
  };
455
474
 
456
475
  declare const DxcApplicationLayout: {
457
- ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
476
+ ({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
477
+ Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
458
478
  Header: {
459
479
  ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
460
- Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
480
+ Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
461
481
  };
462
482
  Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
463
- Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
464
483
  SideNav: {
465
484
  ({ title, children }: Props$H): JSX.Element;
466
485
  Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
@@ -468,10 +487,9 @@ declare const DxcApplicationLayout: {
468
487
  Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
469
488
  Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
470
489
  };
471
- useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
490
+ useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
472
491
  };
473
492
 
474
- type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
475
493
  type ContextualProps = {
476
494
  /**
477
495
  * Text to be placed in the badge.
@@ -516,7 +534,7 @@ type CommonProps$7 = {
516
534
  /**
517
535
  * Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
518
536
  */
519
- icon?: string | SVG$e;
537
+ icon?: string | SVG;
520
538
  /**
521
539
  * Size of the component.
522
540
  */
@@ -526,43 +544,134 @@ type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
526
544
 
527
545
  declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
528
546
 
529
- type Spacing$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
547
+ /**
548
+ * Halstack Color Palette
549
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
550
+ */
551
+ declare const CoreColorTokens: {
552
+ color_black: string;
553
+ color_white: string;
554
+ color_transparent: string;
555
+ color_grey_50: string;
556
+ color_grey_100: string;
557
+ color_grey_200: string;
558
+ color_grey_300: string;
559
+ color_grey_400: string;
560
+ color_grey_500: string;
561
+ color_grey_600: string;
562
+ color_grey_700: string;
563
+ color_grey_800: string;
564
+ color_grey_900: string;
565
+ color_grey_50_a: string;
566
+ color_grey_100_a: string;
567
+ color_grey_200_a: string;
568
+ color_grey_300_a: string;
569
+ color_grey_400_a: string;
570
+ color_grey_500_a: string;
571
+ color_grey_600_a: string;
572
+ color_grey_700_a: string;
573
+ color_grey_800_a: string;
574
+ color_grey_900_a: string;
575
+ color_purple_50: string;
576
+ color_purple_100: string;
577
+ color_purple_200: string;
578
+ color_purple_300: string;
579
+ color_purple_400: string;
580
+ color_purple_500: string;
581
+ color_purple_600: string;
582
+ color_purple_700: string;
583
+ color_purple_800: string;
584
+ color_purple_900: string;
585
+ color_blue_50: string;
586
+ color_blue_100: string;
587
+ color_blue_200: string;
588
+ color_blue_300: string;
589
+ color_blue_400: string;
590
+ color_blue_500: string;
591
+ color_blue_600: string;
592
+ color_blue_700: string;
593
+ color_blue_800: string;
594
+ color_blue_900: string;
595
+ color_red_50: string;
596
+ color_red_100: string;
597
+ color_red_200: string;
598
+ color_red_300: string;
599
+ color_red_400: string;
600
+ color_red_500: string;
601
+ color_red_600: string;
602
+ color_red_700: string;
603
+ color_red_800: string;
604
+ color_red_900: string;
605
+ color_green_50: string;
606
+ color_green_100: string;
607
+ color_green_200: string;
608
+ color_green_300: string;
609
+ color_green_400: string;
610
+ color_green_500: string;
611
+ color_green_600: string;
612
+ color_green_700: string;
613
+ color_green_800: string;
614
+ color_green_900: string;
615
+ color_yellow_50: string;
616
+ color_yellow_100: string;
617
+ color_yellow_200: string;
618
+ color_yellow_300: string;
619
+ color_yellow_400: string;
620
+ color_yellow_500: string;
621
+ color_yellow_600: string;
622
+ color_yellow_700: string;
623
+ color_yellow_800: string;
624
+ color_yellow_900: string;
625
+ color_orange_50: string;
626
+ color_orange_100: string;
627
+ color_orange_200: string;
628
+ color_orange_300: string;
629
+ color_orange_400: string;
630
+ color_orange_500: string;
631
+ color_orange_600: string;
632
+ color_orange_700: string;
633
+ color_orange_800: string;
634
+ color_orange_900: string;
635
+ };
636
+ type CoreColorTokensType = keyof typeof CoreColorTokens;
637
+ type CoreSpacingTokensType = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "2.5rem" | "3rem" | "3.5rem" | "4rem" | "5rem" | "6rem" | "7rem";
638
+
530
639
  type Props$D = {
531
640
  /**
532
641
  * Applies the spacing scale to all sides.
533
642
  */
534
- space?: Spacing$1;
643
+ space?: CoreSpacingTokensType;
535
644
  /**
536
645
  * Applies the spacing scale to the left and right sides.
537
646
  */
538
- horizontal?: Spacing$1;
647
+ horizontal?: CoreSpacingTokensType;
539
648
  /**
540
649
  * Applies the spacing scale to the top and bottom sides.
541
650
  */
542
- vertical?: Spacing$1;
651
+ vertical?: CoreSpacingTokensType;
543
652
  /**
544
653
  * Applies the spacing scale to the top side.
545
654
  */
546
- top?: Spacing$1;
655
+ top?: CoreSpacingTokensType;
547
656
  /**
548
657
  * Applies the spacing scale to the right side.
549
658
  */
550
- right?: Spacing$1;
659
+ right?: CoreSpacingTokensType;
551
660
  /**
552
661
  * Applies the spacing scale to the bottom side.
553
662
  */
554
- bottom?: Spacing$1;
663
+ bottom?: CoreSpacingTokensType;
555
664
  /**
556
665
  * Applies the spacing scale to the left side.
557
666
  */
558
- left?: Spacing$1;
667
+ left?: CoreSpacingTokensType;
559
668
  /**
560
669
  * Custom content inside the bleed.
561
670
  */
562
- children: React.ReactNode;
671
+ children: ReactNode;
563
672
  };
564
673
 
565
- declare function Bleed({ space, horizontal, vertical, top, right, bottom, left, children, }: Props$D): JSX.Element;
674
+ declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
566
675
 
567
676
  type Item$1 = {
568
677
  href?: string;
@@ -602,7 +711,6 @@ type Props$C = {
602
711
 
603
712
  declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
604
713
 
605
- type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
606
714
  type IconProps = {
607
715
  /**
608
716
  * Defines the style of the bullet point in the list.
@@ -611,11 +719,11 @@ type IconProps = {
611
719
  /**
612
720
  * Icon to display as bullet.
613
721
  */
614
- icon: string | SVG$d;
722
+ icon: string | SVG;
615
723
  /**
616
724
  * Text to be shown in the list.
617
725
  */
618
- children: React.ReactNode;
726
+ children: ReactNode;
619
727
  };
620
728
  type OtherProps = {
621
729
  /**
@@ -629,7 +737,7 @@ type OtherProps = {
629
737
  /**
630
738
  * Text to be shown in the list.
631
739
  */
632
- children: React.ReactNode;
740
+ children: ReactNode;
633
741
  };
634
742
  type Props$B = IconProps | OtherProps;
635
743
 
@@ -637,7 +745,7 @@ type BulletedListItemPropsType = {
637
745
  /**
638
746
  * Text to be shown in the list.
639
747
  */
640
- children?: React.ReactNode;
748
+ children?: ReactNode;
641
749
  };
642
750
 
643
751
  declare const DxcBulletedList: {
@@ -645,14 +753,6 @@ declare const DxcBulletedList: {
645
753
  Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
646
754
  };
647
755
 
648
- type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
649
- type Margin$k = {
650
- top?: Space$n;
651
- bottom?: Space$n;
652
- left?: Space$n;
653
- right?: Space$n;
654
- };
655
- type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
656
756
  type Size$3 = {
657
757
  /**
658
758
  * Height of the component.
@@ -692,7 +792,7 @@ type Props$A = {
692
792
  /**
693
793
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
694
794
  */
695
- icon?: string | SVG$c;
795
+ icon?: string | SVG;
696
796
  /**
697
797
  * This function will be called when the user clicks the button.
698
798
  */
@@ -701,7 +801,7 @@ type Props$A = {
701
801
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
702
802
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
703
803
  */
704
- margin?: Space$n | Margin$k;
804
+ margin?: Space$1 | Margin;
705
805
  /**
706
806
  * Size of the component.
707
807
  */
@@ -714,12 +814,11 @@ type Props$A = {
714
814
 
715
815
  declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
716
816
 
717
- type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
718
817
  type Size$2 = {
719
- top?: Space$m;
720
- bottom?: Space$m;
721
- left?: Space$m;
722
- right?: Space$m;
818
+ top?: Space$1;
819
+ bottom?: Space$1;
820
+ left?: Space$1;
821
+ right?: Space$1;
723
822
  };
724
823
  type Props$z = {
725
824
  /**
@@ -737,7 +836,7 @@ type Props$z = {
737
836
  * component. You can pass an object with 'top', 'bottom', 'left'
738
837
  * and 'right' properties in order to specify different padding sizes.
739
838
  */
740
- imagePadding?: Space$m | Size$2;
839
+ imagePadding?: Space$1 | Size$2;
741
840
  /**
742
841
  * Whether the image should appear in relation to the content.
743
842
  */
@@ -760,7 +859,7 @@ type Props$z = {
760
859
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
761
860
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
762
861
  */
763
- margin?: Space$m | Size$2;
862
+ margin?: Space$1 | Size$2;
764
863
  /**
765
864
  * Value of the tabindex attribute applied when the component is clickable.
766
865
  */
@@ -772,18 +871,11 @@ type Props$z = {
772
871
  /**
773
872
  * Custom content that will be placed inside the component.
774
873
  */
775
- children?: React.ReactNode;
874
+ children?: ReactNode;
776
875
  };
777
876
 
778
877
  declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
779
878
 
780
- type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
781
- type Margin$j = {
782
- top?: Space$l;
783
- bottom?: Space$l;
784
- left?: Space$l;
785
- right?: Space$l;
786
- };
787
879
  type Props$y = {
788
880
  /**
789
881
  * Initial state of the checkbox, only when it is uncontrolled.
@@ -834,7 +926,7 @@ type Props$y = {
834
926
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
835
927
  * in order to specify different margin sizes.
836
928
  */
837
- margin?: Space$l | Margin$j;
929
+ margin?: Space$1 | Margin;
838
930
  /**
839
931
  * Size of the component.
840
932
  */
@@ -843,18 +935,14 @@ type Props$y = {
843
935
  * Value of the tabindex.
844
936
  */
845
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;
846
942
  };
847
943
 
848
944
  declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
849
945
 
850
- type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
851
- type Margin$i = {
852
- top?: Space$k;
853
- bottom?: Space$k;
854
- left?: Space$k;
855
- right?: Space$k;
856
- };
857
- type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
858
946
  type Props$x = {
859
947
  /**
860
948
  * Text to be placed on the chip.
@@ -863,11 +951,11 @@ type Props$x = {
863
951
  /**
864
952
  * Element or path used as icon to be placed after the chip label.
865
953
  */
866
- suffixIcon?: string | SVG$b;
954
+ suffixIcon?: string | SVG;
867
955
  /**
868
956
  * Element or path used as icon to be placed before the chip label.
869
957
  */
870
- prefixIcon?: string | SVG$b;
958
+ prefixIcon?: string | SVG;
871
959
  /**
872
960
  * This function will be called when the suffix is clicked.
873
961
  */
@@ -884,7 +972,7 @@ type Props$x = {
884
972
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
885
973
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
886
974
  */
887
- margin?: Space$k | Margin$i;
975
+ margin?: Space$1 | Margin;
888
976
  /**
889
977
  * Value of the tabindex attribute.
890
978
  */
@@ -893,103 +981,11 @@ type Props$x = {
893
981
 
894
982
  declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
895
983
 
896
- /**
897
- * Halstack Color Palette
898
- * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
899
- */
900
- declare const CoreColorTokens: {
901
- color_black: string;
902
- color_white: string;
903
- color_transparent: string;
904
- color_grey_50: string;
905
- color_grey_100: string;
906
- color_grey_200: string;
907
- color_grey_300: string;
908
- color_grey_400: string;
909
- color_grey_500: string;
910
- color_grey_600: string;
911
- color_grey_700: string;
912
- color_grey_800: string;
913
- color_grey_900: string;
914
- color_grey_50_a: string;
915
- color_grey_100_a: string;
916
- color_grey_200_a: string;
917
- color_grey_300_a: string;
918
- color_grey_400_a: string;
919
- color_grey_500_a: string;
920
- color_grey_600_a: string;
921
- color_grey_700_a: string;
922
- color_grey_800_a: string;
923
- color_grey_900_a: string;
924
- color_purple_50: string;
925
- color_purple_100: string;
926
- color_purple_200: string;
927
- color_purple_300: string;
928
- color_purple_400: string;
929
- color_purple_500: string;
930
- color_purple_600: string;
931
- color_purple_700: string;
932
- color_purple_800: string;
933
- color_purple_900: string;
934
- color_blue_50: string;
935
- color_blue_100: string;
936
- color_blue_200: string;
937
- color_blue_300: string;
938
- color_blue_400: string;
939
- color_blue_500: string;
940
- color_blue_600: string;
941
- color_blue_700: string;
942
- color_blue_800: string;
943
- color_blue_900: string;
944
- color_red_50: string;
945
- color_red_100: string;
946
- color_red_200: string;
947
- color_red_300: string;
948
- color_red_400: string;
949
- color_red_500: string;
950
- color_red_600: string;
951
- color_red_700: string;
952
- color_red_800: string;
953
- color_red_900: string;
954
- color_green_50: string;
955
- color_green_100: string;
956
- color_green_200: string;
957
- color_green_300: string;
958
- color_green_400: string;
959
- color_green_500: string;
960
- color_green_600: string;
961
- color_green_700: string;
962
- color_green_800: string;
963
- color_green_900: string;
964
- color_yellow_50: string;
965
- color_yellow_100: string;
966
- color_yellow_200: string;
967
- color_yellow_300: string;
968
- color_yellow_400: string;
969
- color_yellow_500: string;
970
- color_yellow_600: string;
971
- color_yellow_700: string;
972
- color_yellow_800: string;
973
- color_yellow_900: string;
974
- color_orange_50: string;
975
- color_orange_100: string;
976
- color_orange_200: string;
977
- color_orange_300: string;
978
- color_orange_400: string;
979
- color_orange_500: string;
980
- color_orange_600: string;
981
- color_orange_700: string;
982
- color_orange_800: string;
983
- color_orange_900: string;
984
- };
985
- type CoreColorTokensType = keyof typeof CoreColorTokens;
986
-
987
- type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
988
- type Space$j = SpacingValues | {
989
- top?: SpacingValues;
990
- right?: SpacingValues;
991
- bottom?: SpacingValues;
992
- left?: SpacingValues;
984
+ type Space = Space$1 | {
985
+ top?: Space$1;
986
+ right?: Space$1;
987
+ bottom?: Space$1;
988
+ left?: Space$1;
993
989
  };
994
990
  type Inset$1 = {
995
991
  top?: string;
@@ -1058,7 +1054,7 @@ type Props$w = {
1058
1054
  /**
1059
1055
  * Custom content inside the container.
1060
1056
  */
1061
- children: React.ReactNode;
1057
+ children: ReactNode;
1062
1058
  /**
1063
1059
  * Sets the display CSS property.
1064
1060
  * The set of values is limited to the ones related to the outer display type.
@@ -1090,7 +1086,7 @@ type Props$w = {
1090
1086
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1091
1087
  * in order to specify different margin sizes.
1092
1088
  */
1093
- margin?: Space$j;
1089
+ margin?: Space;
1094
1090
  /**
1095
1091
  * Sets the max-height CSS property.
1096
1092
  *
@@ -1131,7 +1127,7 @@ type Props$w = {
1131
1127
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1132
1128
  * in order to specify different margin sizes.
1133
1129
  */
1134
- padding?: Space$j;
1130
+ padding?: Space;
1135
1131
  /**
1136
1132
  * Sets the position CSS property.
1137
1133
  *
@@ -1152,12 +1148,11 @@ type Props$w = {
1152
1148
  zIndex?: "auto" | number;
1153
1149
  };
1154
1150
 
1155
- 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;
1156
1152
 
1157
- type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
1158
1153
  type CommonItemProps = {
1159
- badge?: React.ReactElement;
1160
- icon?: string | SVG$a;
1154
+ badge?: ReactElement;
1155
+ icon?: string | SVG;
1161
1156
  label: string;
1162
1157
  };
1163
1158
  type Item = CommonItemProps & {
@@ -1179,7 +1174,44 @@ type Props$v = {
1179
1174
  items: (Item | GroupItem)[] | Section[];
1180
1175
  };
1181
1176
 
1182
- declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
1177
+ declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
1178
+
1179
+ type ActionCellsPropsType = {
1180
+ actions: ActionsPropsType;
1181
+ };
1182
+ type ActionsPropsType = Array<{
1183
+ icon: string | SVG;
1184
+ title: string;
1185
+ onClick: () => void;
1186
+ disabled?: boolean;
1187
+ tabIndex?: number;
1188
+ options?: never;
1189
+ } | {
1190
+ icon?: never;
1191
+ title: string;
1192
+ onClick: (value?: string) => void;
1193
+ disabled?: boolean;
1194
+ tabIndex?: number;
1195
+ options: Option$1[];
1196
+ }>;
1197
+ type Props$u = {
1198
+ /**
1199
+ * The center section of the table. Can be used to render custom
1200
+ * content in this area.
1201
+ */
1202
+ children: ReactNode;
1203
+ /**
1204
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1205
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1206
+ */
1207
+ margin?: Space$1 | Margin;
1208
+ /**
1209
+ * Determines the visual style and layout
1210
+ * - "default": Default table size.
1211
+ * - "reduced": More compact table with less spacing for high density information.
1212
+ */
1213
+ mode?: "default" | "reduced";
1214
+ };
1183
1215
 
1184
1216
  type GridColumn = {
1185
1217
  /**
@@ -1198,6 +1230,10 @@ type GridColumn = {
1198
1230
  * Whether the column is sortable or not.
1199
1231
  */
1200
1232
  sortable?: boolean;
1233
+ /**
1234
+ * Custom criteria for sorting the column.
1235
+ */
1236
+ sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
1201
1237
  /**
1202
1238
  * Whether the column is draggable or not.
1203
1239
  */
@@ -1219,13 +1255,13 @@ type GridRow = {
1219
1255
  /**
1220
1256
  * List of rows that will be rendered in each cell based on the key in each column.
1221
1257
  */
1222
- [key: string]: React.ReactNode | undefined;
1258
+ [key: string]: ReactNode | undefined;
1223
1259
  };
1224
1260
  type HierarchyGridRow = GridRow & {
1225
1261
  childRows?: HierarchyGridRow[] | GridRow[];
1226
1262
  };
1227
1263
  type ExpandableGridRow = GridRow & {
1228
- expandedContent?: React.ReactNode;
1264
+ expandedContent?: ReactNode;
1229
1265
  expandedContentHeight?: number;
1230
1266
  };
1231
1267
  type ExpandableRows = {
@@ -1264,14 +1300,76 @@ type SelectableGridProps = {
1264
1300
  */
1265
1301
  onSelectRows: (selectedRows: Set<number | string>) => void;
1266
1302
  /**
1267
- * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
1303
+ * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
1304
+ */
1305
+ uniqueRowId: string;
1306
+ } | {
1307
+ selectable?: false;
1308
+ selectedRows?: never;
1309
+ onSelectRows?: never;
1310
+ uniqueRowId?: string;
1311
+ };
1312
+ type PaginatedProps$1 = {
1313
+ /**
1314
+ * If true, paginator will be displayed.
1315
+ */
1316
+ showPaginator?: true;
1317
+ /**
1318
+ * Number of total items.
1319
+ */
1320
+ totalItems?: number;
1321
+ /**
1322
+ * If true, a select component for navigation between pages will be displayed.
1323
+ */
1324
+ showGoToPage?: boolean;
1325
+ /**
1326
+ * Number of items per page.
1327
+ */
1328
+ itemsPerPage?: number;
1329
+ /**
1330
+ * An array of numbers representing the items per page options.
1331
+ */
1332
+ itemsPerPageOptions?: number[];
1333
+ /**
1334
+ * This function will be called when the user selects an item per page
1335
+ * option. The value selected will be passed as a parameter.
1336
+ */
1337
+ itemsPerPageFunction?: (value: number) => void;
1338
+ /**
1339
+ * Function called whenever the current page is changed.
1340
+ */
1341
+ onPageChange?: (_page: number) => void;
1342
+ };
1343
+ type NonPaginatedProps$1 = {
1344
+ /**
1345
+ * If true, paginator will be displayed.
1346
+ */
1347
+ showPaginator: false;
1348
+ /**
1349
+ * Number of total items.
1350
+ */
1351
+ totalItems?: never;
1352
+ /**
1353
+ * If true, a select component for navigation between pages will be displayed.
1354
+ */
1355
+ showGoToPage?: never;
1356
+ /**
1357
+ * Number of items per page.
1358
+ */
1359
+ itemsPerPage?: never;
1360
+ /**
1361
+ * An array of numbers representing the items per page options.
1362
+ */
1363
+ itemsPerPageOptions?: never;
1364
+ /**
1365
+ * This function will be called when the user selects an item per page
1366
+ * option. The value selected will be passed as a parameter.
1367
+ */
1368
+ itemsPerPageFunction?: never;
1369
+ /**
1370
+ * Function called whenever the current page is changed.
1268
1371
  */
1269
- uniqueRowId: string;
1270
- } | {
1271
- selectable?: false;
1272
- selectedRows?: never;
1273
- onSelectRows?: never;
1274
- uniqueRowId?: string;
1372
+ onPageChange?: never;
1275
1373
  };
1276
1374
  type CommonProps$6 = {
1277
1375
  columns: GridColumn[];
@@ -1282,7 +1380,12 @@ type CommonProps$6 = {
1282
1380
  /**
1283
1381
  * Function called whenever a cell is edited.
1284
1382
  */
1285
- onGridRowsChange?: (rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
1383
+ onGridRowsChange?: (_rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
1384
+ /**
1385
+ * Function called whenever a column is sorted. Receives the sorted
1386
+ * column and direction, or `undefined` if no sorting is applied.
1387
+ */
1388
+ onSort?: (_sortColumn?: SortColumn) => void;
1286
1389
  };
1287
1390
  type BasicGridProps = {
1288
1391
  rows: GridRow[];
@@ -1291,18 +1394,14 @@ type BasicGridProps = {
1291
1394
  */
1292
1395
  expandable?: false;
1293
1396
  };
1294
- type Props$u = CommonProps$6 & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
1295
-
1296
- declare const DxcDataGrid: ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, }: Props$u) => JSX.Element;
1397
+ type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
1297
1398
 
1298
- type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1299
- type Margin$h = {
1300
- top?: Space$i;
1301
- bottom?: Space$i;
1302
- left?: Space$i;
1303
- right?: Space$i;
1399
+ declare const DxcDataGrid: {
1400
+ ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
1401
+ ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
1304
1402
  };
1305
- type Props$t = {
1403
+
1404
+ type Props$s = {
1306
1405
  /**
1307
1406
  * Initial value of the input element, only when it is uncontrolled.
1308
1407
  */
@@ -1393,24 +1492,28 @@ type Props$t = {
1393
1492
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1394
1493
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1395
1494
  */
1396
- margin?: Space$i | Margin$h;
1495
+ margin?: Space$1 | Margin;
1397
1496
  /**
1398
1497
  * Size of the component.
1399
1498
  */
1400
- size?: "medium" | "large" | "fillParent";
1499
+ size?: "small" | "medium" | "large" | "fillParent";
1401
1500
  /**
1402
1501
  * Value of the tabindex attribute.
1403
1502
  */
1404
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;
1405
1508
  };
1406
1509
 
1407
- declare const DxcDateInput: react.ForwardRefExoticComponent<Props$t & react.RefAttributes<HTMLDivElement>>;
1510
+ declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
1408
1511
 
1409
- type Props$s = {
1512
+ type Props$r = {
1410
1513
  /**
1411
1514
  * If true, the close button will be visible.
1412
1515
  */
1413
- isCloseVisible?: boolean;
1516
+ closable?: boolean;
1414
1517
  /**
1415
1518
  * This function will be called when the user clicks the close button.
1416
1519
  * The responsibility of hiding the dialog lies with the user.
@@ -1432,7 +1535,7 @@ type Props$s = {
1432
1535
  * can lead to unpredictable behaviour for keyboard users, affecting
1433
1536
  * the order of focus and focus locking within the dialog.
1434
1537
  */
1435
- children: React.ReactNode;
1538
+ children: ReactNode;
1436
1539
  /**
1437
1540
  * Value of the tabindex applied to the close button.
1438
1541
  * Note that values greater than 0 are strongly discouraged. It can
@@ -1441,9 +1544,9 @@ type Props$s = {
1441
1544
  tabIndex?: number;
1442
1545
  };
1443
1546
 
1444
- declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$s) => JSX.Element;
1547
+ declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
1445
1548
 
1446
- type Props$r = {
1549
+ type Props$q = {
1447
1550
  /**
1448
1551
  * The divider can be shown in horizontal or vertical.
1449
1552
  */
@@ -1464,17 +1567,10 @@ type Props$r = {
1464
1567
  decorative?: boolean;
1465
1568
  };
1466
1569
 
1467
- declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$r) => JSX.Element;
1570
+ declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
1468
1571
 
1469
- declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$G) => JSX.Element;
1572
+ declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
1470
1573
 
1471
- type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1472
- type Margin$g = {
1473
- top?: Space$h;
1474
- bottom?: Space$h;
1475
- left?: Space$h;
1476
- right?: Space$h;
1477
- };
1478
1574
  type FileData = {
1479
1575
  /**
1480
1576
  * Selected file.
@@ -1540,7 +1636,7 @@ type CommonProps$5 = {
1540
1636
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1541
1637
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1542
1638
  */
1543
- margin?: Space$h | Margin$g;
1639
+ margin?: Space$1 | Margin;
1544
1640
  /**
1545
1641
  * Value of the tabindex attribute.
1546
1642
  */
@@ -1574,31 +1670,30 @@ type FileModeProps = CommonProps$5 & {
1574
1670
  */
1575
1671
  dropAreaLabel?: never;
1576
1672
  };
1577
- type Props$q = DropModeProps | FileModeProps;
1673
+ type Props$p = DropModeProps | FileModeProps;
1578
1674
 
1579
- declare const DxcFileInput: react.ForwardRefExoticComponent<Props$q & react.RefAttributes<HTMLDivElement>>;
1675
+ declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
1580
1676
 
1581
- type Spaces$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
1582
1677
  type Gap$1 = {
1583
- rowGap: Spaces$1;
1584
- columnGap?: Spaces$1;
1678
+ rowGap: CoreSpacingTokensType;
1679
+ columnGap?: CoreSpacingTokensType;
1585
1680
  } | {
1586
- rowGap?: Spaces$1;
1587
- columnGap: Spaces$1;
1588
- } | Spaces$1;
1681
+ rowGap?: CoreSpacingTokensType;
1682
+ columnGap: CoreSpacingTokensType;
1683
+ } | CoreSpacingTokensType;
1589
1684
  type CommonProps$4 = {
1590
1685
  /**
1591
1686
  * Sets the justify-content CSS property.
1592
1687
  *
1593
1688
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
1594
1689
  */
1595
- justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
1690
+ justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "normal" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
1596
1691
  /**
1597
1692
  * Sets the align-items CSS property.
1598
1693
  *
1599
1694
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
1600
1695
  */
1601
- alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
1696
+ alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline" | "normal";
1602
1697
  /**
1603
1698
  * Sets the align-content CSS property.
1604
1699
  *
@@ -1612,7 +1707,7 @@ type CommonProps$4 = {
1612
1707
  */
1613
1708
  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
1614
1709
  };
1615
- type Props$p = CommonProps$4 & {
1710
+ type Props$o = CommonProps$4 & {
1616
1711
  /**
1617
1712
  * Sets the flex-direction CSS property.
1618
1713
  *
@@ -1662,19 +1757,18 @@ type Props$p = CommonProps$4 & {
1662
1757
  /**
1663
1758
  * Custom content inside the flex container.
1664
1759
  */
1665
- children: React.ReactNode;
1760
+ children: ReactNode;
1666
1761
  };
1667
1762
 
1668
- declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: Props$p) => JSX.Element;
1763
+ declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
1669
1764
 
1670
- type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
1671
1765
  type Gap = {
1672
- rowGap: Spaces;
1673
- columnGap?: Spaces;
1766
+ rowGap: CoreSpacingTokensType;
1767
+ columnGap?: CoreSpacingTokensType;
1674
1768
  } | {
1675
- rowGap?: Spaces;
1676
- columnGap: Spaces;
1677
- } | Spaces;
1769
+ rowGap?: CoreSpacingTokensType;
1770
+ columnGap: CoreSpacingTokensType;
1771
+ } | CoreSpacingTokensType;
1678
1772
  type GridCell = {
1679
1773
  start: number | string;
1680
1774
  end: number | string;
@@ -1722,9 +1816,9 @@ type GridItemProps = {
1722
1816
  /**
1723
1817
  * Custom content inside the grid container.
1724
1818
  */
1725
- children: React.ReactNode;
1819
+ children: ReactNode;
1726
1820
  };
1727
- type Props$o = GridItemProps & {
1821
+ type Props$n = GridItemProps & {
1728
1822
  /**
1729
1823
  * Sets the grid-auto-columns CSS property.
1730
1824
  *
@@ -1748,7 +1842,7 @@ type Props$o = GridItemProps & {
1748
1842
  *
1749
1843
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
1750
1844
  */
1751
- gap?: Spaces | Gap;
1845
+ gap?: CoreSpacingTokensType | Gap;
1752
1846
  /**
1753
1847
  * Sets the place-content CSS property.
1754
1848
  *
@@ -1782,18 +1876,11 @@ type Props$o = GridItemProps & {
1782
1876
  };
1783
1877
 
1784
1878
  declare const DxcGrid: {
1785
- (props: Props$o): JSX.Element;
1879
+ (props: Props$n): react_jsx_runtime.JSX.Element;
1786
1880
  Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
1787
1881
  };
1788
1882
 
1789
- type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1790
- type Margin$f = {
1791
- top?: Space$g;
1792
- bottom?: Space$g;
1793
- left?: Space$g;
1794
- right?: Space$g;
1795
- };
1796
- type Props$n = {
1883
+ type Props$m = {
1797
1884
  /**
1798
1885
  * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
1799
1886
  * The html tag of the heading will be the one specified in the 'as' prop.
@@ -1816,12 +1903,12 @@ type Props$n = {
1816
1903
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1817
1904
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1818
1905
  */
1819
- margin?: Space$g | Margin$f;
1906
+ margin?: Space$1 | Margin;
1820
1907
  };
1821
1908
 
1822
- declare const DxcHeading: ({ level, text, as, weight, margin }: Props$n) => JSX.Element;
1909
+ declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
1823
1910
 
1824
- type Props$m = {
1911
+ type Props$l = {
1825
1912
  /**
1826
1913
  * Alternative text description displayed when the specified image is not loaded.
1827
1914
  *
@@ -1880,61 +1967,52 @@ type Props$m = {
1880
1967
  /**
1881
1968
  * This function will be called when the image is loaded.
1882
1969
  */
1883
- onLoad?: React.ReactEventHandler<HTMLImageElement>;
1970
+ onLoad?: ReactEventHandler<HTMLImageElement>;
1884
1971
  /**
1885
1972
  * This function will be called when the image fails to load.
1886
1973
  */
1887
- onError?: React.ReactEventHandler<HTMLImageElement>;
1974
+ onError?: ReactEventHandler<HTMLImageElement>;
1888
1975
  };
1889
1976
 
1890
- declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$m) => 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;
1891
1978
 
1892
- type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
1893
- type Props$l = {
1979
+ type Props$k = {
1894
1980
  /**
1895
1981
  * Applies the spacing scale to all sides.
1896
1982
  */
1897
- space?: Spacing;
1983
+ space?: CoreSpacingTokensType;
1898
1984
  /**
1899
1985
  * Applies the spacing scale to the left and right sides.
1900
1986
  */
1901
- horizontal?: Spacing;
1987
+ horizontal?: CoreSpacingTokensType;
1902
1988
  /**
1903
1989
  * Applies the spacing scale to the top and bottom sides.
1904
1990
  */
1905
- vertical?: Spacing;
1991
+ vertical?: CoreSpacingTokensType;
1906
1992
  /**
1907
1993
  * Applies the spacing scale to the top side.
1908
1994
  */
1909
- top?: Spacing;
1995
+ top?: CoreSpacingTokensType;
1910
1996
  /**
1911
1997
  * Applies the spacing scale to the right side.
1912
1998
  */
1913
- right?: Spacing;
1999
+ right?: CoreSpacingTokensType;
1914
2000
  /**
1915
2001
  * Applies the spacing scale to the bottom side.
1916
2002
  */
1917
- bottom?: Spacing;
2003
+ bottom?: CoreSpacingTokensType;
1918
2004
  /**
1919
2005
  * Applies the spacing scale to the left side.
1920
2006
  */
1921
- left?: Spacing;
2007
+ left?: CoreSpacingTokensType;
1922
2008
  /**
1923
2009
  * Custom content inside the inset.
1924
2010
  */
1925
- children: React.ReactNode;
2011
+ children: ReactNode;
1926
2012
  };
1927
2013
 
1928
- declare function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: Props$l): JSX.Element;
2014
+ declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
1929
2015
 
1930
- type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1931
- type Margin$e = {
1932
- top?: Space$f;
1933
- bottom?: Space$f;
1934
- left?: Space$f;
1935
- right?: Space$f;
1936
- };
1937
- type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
1938
2016
  type LinkProps = {
1939
2017
  /**
1940
2018
  * If true, the link is disabled.
@@ -1947,7 +2025,7 @@ type LinkProps = {
1947
2025
  /**
1948
2026
  * Material Symbol name or SVG element as the icon that will be placed next to the link text.
1949
2027
  */
1950
- icon?: string | SVG$9;
2028
+ icon?: string | SVG;
1951
2029
  /**
1952
2030
  * Indicates the position of the icon in the component.
1953
2031
  */
@@ -1973,7 +2051,7 @@ type LinkProps = {
1973
2051
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1974
2052
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1975
2053
  */
1976
- margin?: Space$f | Margin$e;
2054
+ margin?: Space$1 | Margin;
1977
2055
  /**
1978
2056
  * Value of the tabindex.
1979
2057
  */
@@ -1982,7 +2060,6 @@ type LinkProps = {
1982
2060
 
1983
2061
  declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
1984
2062
 
1985
- type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
1986
2063
  type TabProps$1 = {
1987
2064
  /**
1988
2065
  * Whether the tab is active or not.
@@ -1999,7 +2076,7 @@ type TabProps$1 = {
1999
2076
  /**
2000
2077
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
2001
2078
  */
2002
- icon?: string | SVG$8;
2079
+ icon?: string | SVG;
2003
2080
  /**
2004
2081
  * If the value is 'true', an empty badge will appear.
2005
2082
  * If it is 'false', no badge will appear.
@@ -2013,7 +2090,7 @@ type TabProps$1 = {
2013
2090
  */
2014
2091
  children: string;
2015
2092
  };
2016
- type Props$k = {
2093
+ type Props$j = {
2017
2094
  /**
2018
2095
  * Whether the icon should appear above or to the left of the label.
2019
2096
  */
@@ -2021,7 +2098,7 @@ type Props$k = {
2021
2098
  /**
2022
2099
  * Contains one or more DxcNavTabs.Tab.
2023
2100
  */
2024
- children: React.ReactNode;
2101
+ children: ReactNode;
2025
2102
  /**
2026
2103
  * Value of the tabindex attribute applied to each tab.
2027
2104
  */
@@ -2029,18 +2106,11 @@ type Props$k = {
2029
2106
  };
2030
2107
 
2031
2108
  declare const DxcNavTabs: {
2032
- ({ iconPosition, tabIndex, children }: Props$k): JSX.Element;
2109
+ ({ iconPosition, tabIndex, children }: Props$j): JSX.Element;
2033
2110
  Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
2034
2111
  };
2035
2112
 
2036
- type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2037
- type Margin$d = {
2038
- top?: Space$e;
2039
- bottom?: Space$e;
2040
- left?: Space$e;
2041
- right?: Space$e;
2042
- };
2043
- type Props$j = {
2113
+ type Props$i = {
2044
2114
  /**
2045
2115
  * Text to be placed above the number.
2046
2116
  */
@@ -2148,7 +2218,7 @@ type Props$j = {
2148
2218
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2149
2219
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2150
2220
  */
2151
- margin?: Space$e | Margin$d;
2221
+ margin?: Space$1 | Margin;
2152
2222
  /**
2153
2223
  * Size of the component.
2154
2224
  */
@@ -2157,11 +2227,19 @@ type Props$j = {
2157
2227
  * Value of the tabindex attribute.
2158
2228
  */
2159
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;
2160
2238
  };
2161
2239
 
2162
- declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$j & react.RefAttributes<HTMLDivElement>>;
2240
+ declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
2163
2241
 
2164
- type Props$i = {
2242
+ type Props$h = {
2165
2243
  /**
2166
2244
  * Number of the current selected page.
2167
2245
  */
@@ -2199,20 +2277,13 @@ type Props$i = {
2199
2277
  tabIndex?: number;
2200
2278
  };
2201
2279
 
2202
- declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$i) => JSX.Element;
2280
+ declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
2203
2281
 
2204
- declare const DxcParagraph: ({ children }: {
2205
- children: React.ReactNode;
2206
- }) => JSX.Element;
2282
+ declare function DxcParagraph({ children }: {
2283
+ children: ReactNode;
2284
+ }): react_jsx_runtime.JSX.Element;
2207
2285
 
2208
- type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2209
- type Margin$c = {
2210
- top?: Space$d;
2211
- bottom?: Space$d;
2212
- left?: Space$d;
2213
- right?: Space$d;
2214
- };
2215
- type Props$h = {
2286
+ type Props$g = {
2216
2287
  /**
2217
2288
  * Text to be placed above the password input.
2218
2289
  */
@@ -2301,7 +2372,7 @@ type Props$h = {
2301
2372
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2302
2373
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2303
2374
  */
2304
- margin?: Space$d | Margin$c;
2375
+ margin?: Space$1 | Margin;
2305
2376
  /**
2306
2377
  * Size of the component.
2307
2378
  */
@@ -2310,18 +2381,21 @@ type Props$h = {
2310
2381
  * Value of the tabindex attribute.
2311
2382
  */
2312
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;
2313
2388
  };
2314
2389
 
2315
- declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
2390
+ declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
2316
2391
 
2317
- type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2318
2392
  type Size$1 = {
2319
- top?: Space$c;
2320
- bottom?: Space$c;
2321
- left?: Space$c;
2322
- right?: Space$c;
2393
+ top?: Space$1;
2394
+ bottom?: Space$1;
2395
+ left?: Space$1;
2396
+ right?: Space$1;
2323
2397
  };
2324
- type Props$g = {
2398
+ type Props$f = {
2325
2399
  /**
2326
2400
  * Text to be placed above the progress bar.
2327
2401
  */
@@ -2348,10 +2422,14 @@ type Props$g = {
2348
2422
  * an object with 'top', 'bottom', 'left' and 'right' properties
2349
2423
  * in order to specify different margin sizes.
2350
2424
  */
2351
- margin?: Space$c | 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;
2352
2430
  };
2353
2431
 
2354
- declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$g) => JSX.Element;
2432
+ declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
2355
2433
 
2356
2434
  type Link = {
2357
2435
  /**
@@ -2363,7 +2441,7 @@ type Link = {
2363
2441
  */
2364
2442
  links?: Link[];
2365
2443
  };
2366
- type Props$f = {
2444
+ type Props$e = {
2367
2445
  /**
2368
2446
  * Title of the quick nav component.
2369
2447
  */
@@ -2374,7 +2452,7 @@ type Props$f = {
2374
2452
  links: Link[];
2375
2453
  };
2376
2454
 
2377
- declare const DxcQuickNav: ({ title, links }: Props$f) => JSX.Element;
2455
+ declare const DxcQuickNav: ({ title, links }: Props$e) => JSX.Element;
2378
2456
 
2379
2457
  type RadioOption = {
2380
2458
  /**
@@ -2471,66 +2549,19 @@ type RadioGroupProps = {
2471
2549
  * Value of the tabindex attribute.
2472
2550
  */
2473
2551
  tabIndex?: number;
2474
- };
2475
-
2476
- declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
2477
-
2478
- type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2479
- type Margin$b = {
2480
- top?: Space$b;
2481
- bottom?: Space$b;
2482
- left?: Space$b;
2483
- right?: Space$b;
2484
- };
2485
- type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2486
- type ActionCellsPropsType = {
2487
- actions: Array<{
2488
- icon: string | SVG$7;
2489
- title: string;
2490
- onClick: () => void;
2491
- disabled?: boolean;
2492
- tabIndex?: number;
2493
- options?: never;
2494
- } | {
2495
- icon?: never;
2496
- title: string;
2497
- onClick: (value?: string) => void;
2498
- disabled?: boolean;
2499
- tabIndex?: number;
2500
- options: Option$1[];
2501
- }>;
2502
- };
2503
- type Props$e = {
2504
- /**
2505
- * The center section of the table. Can be used to render custom
2506
- * content in this area.
2507
- */
2508
- children: React.ReactNode;
2509
- /**
2510
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2511
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2512
- */
2513
- margin?: Space$b | Margin$b;
2514
2552
  /**
2515
- * Determines the visual style and layout
2516
- * - "default": Default table size.
2517
- * - "reduced": More compact table with less spacing for high density information.
2553
+ * Specifies a string to be used as the name for the radio group when no `label` is provided.
2518
2554
  */
2519
- mode?: "default" | "reduced";
2555
+ ariaLabel?: string;
2520
2556
  };
2521
2557
 
2522
- type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2523
- type Margin$a = {
2524
- top?: Space$a;
2525
- bottom?: Space$a;
2526
- left?: Space$a;
2527
- right?: Space$a;
2528
- };
2558
+ declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
2559
+
2529
2560
  type Column = {
2530
2561
  /**
2531
2562
  * Column display value.
2532
2563
  */
2533
- displayValue: React.ReactNode;
2564
+ displayValue: ReactNode;
2534
2565
  /**
2535
2566
  * Boolean value to indicate whether the column is sortable or not.
2536
2567
  */
@@ -2540,7 +2571,7 @@ type Cell = {
2540
2571
  /**
2541
2572
  * Value to be displayed in the cell.
2542
2573
  */
2543
- displayValue: React.ReactNode;
2574
+ displayValue: ReactNode;
2544
2575
  /**
2545
2576
  * Value to be used when sorting the table by that
2546
2577
  * column. If not indicated displayValue will be used for sorting.
@@ -2562,7 +2593,7 @@ type CommonProps$3 = {
2562
2593
  * Size of the margin to be applied to the component. You can pass an object with 'top',
2563
2594
  * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2564
2595
  */
2565
- margin?: Space$a | Margin$a;
2596
+ margin?: Space$1 | Margin;
2566
2597
  /**
2567
2598
  * Value of the tabindex attribute applied to the sortable icon.
2568
2599
  */
@@ -2624,14 +2655,6 @@ declare const DxcResultsetTable: {
2624
2655
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
2625
2656
  };
2626
2657
 
2627
- type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2628
- type Margin$9 = {
2629
- top?: Space$9;
2630
- bottom?: Space$9;
2631
- left?: Space$9;
2632
- right?: Space$9;
2633
- };
2634
- type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2635
2658
  type ListOptionGroupType = {
2636
2659
  /**
2637
2660
  * Label of the group to be shown in the select's listbox.
@@ -2649,7 +2672,7 @@ type ListOptionType = {
2649
2672
  * is the chosen one, take into account that the component's
2650
2673
  * color styling tokens will not be applied to the image.
2651
2674
  */
2652
- icon?: string | SVG$6;
2675
+ icon?: string | SVG;
2653
2676
  /**
2654
2677
  * Label of the option to be shown in the select's listbox.
2655
2678
  */
@@ -2715,7 +2738,7 @@ type CommonProps$2 = {
2715
2738
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2716
2739
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2717
2740
  */
2718
- margin?: Space$9 | Margin$9;
2741
+ margin?: Space$1 | Margin;
2719
2742
  /**
2720
2743
  * Size of the component.
2721
2744
  */
@@ -2724,6 +2747,10 @@ type CommonProps$2 = {
2724
2747
  * Value of the tabindex attribute.
2725
2748
  */
2726
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;
2727
2754
  };
2728
2755
  type SingleSelect = CommonProps$2 & {
2729
2756
  /**
@@ -2801,13 +2828,6 @@ type Props$c = SingleSelect | MultipleSelect;
2801
2828
 
2802
2829
  declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
2803
2830
 
2804
- type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2805
- type Margin$8 = {
2806
- top?: Space$8;
2807
- bottom?: Space$8;
2808
- left?: Space$8;
2809
- right?: Space$8;
2810
- };
2811
2831
  type Props$b = {
2812
2832
  /**
2813
2833
  * Text to be placed above the slider.
@@ -2876,22 +2896,19 @@ type Props$b = {
2876
2896
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2877
2897
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2878
2898
  */
2879
- margin?: Space$8 | Margin$8;
2899
+ margin?: Space$1 | Margin;
2880
2900
  /**
2881
2901
  * Size of the component.
2882
2902
  */
2883
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;
2884
2908
  };
2885
2909
 
2886
2910
  declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
2887
2911
 
2888
- type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2889
- type Margin$7 = {
2890
- top?: Space$7;
2891
- bottom?: Space$7;
2892
- left?: Space$7;
2893
- right?: Space$7;
2894
- };
2895
2912
  type Props$a = {
2896
2913
  /**
2897
2914
  * Text to be placed inside the spinner.
@@ -2914,10 +2931,14 @@ type Props$a = {
2914
2931
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2915
2932
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2916
2933
  */
2917
- 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;
2918
2939
  };
2919
2940
 
2920
- 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;
2921
2942
 
2922
2943
  type Mode = "default" | "info" | "success" | "warning" | "error";
2923
2944
  type Size = "small" | "medium" | "large";
@@ -2938,13 +2959,6 @@ type Props$9 = {
2938
2959
 
2939
2960
  declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
2940
2961
 
2941
- type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2942
- type Margin$6 = {
2943
- top?: Space$6;
2944
- bottom?: Space$6;
2945
- left?: Space$6;
2946
- right?: Space$6;
2947
- };
2948
2962
  type Props$8 = {
2949
2963
  /**
2950
2964
  * Initial state of the switch, only when it is uncontrolled.
@@ -2989,7 +3003,7 @@ type Props$8 = {
2989
3003
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2990
3004
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2991
3005
  */
2992
- margin?: Space$6 | Margin$6;
3006
+ margin?: Space$1 | Margin;
2993
3007
  /**
2994
3008
  * Size of the component.
2995
3009
  */
@@ -2998,23 +3012,19 @@ type Props$8 = {
2998
3012
  * Value of the tabindex.
2999
3013
  */
3000
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;
3001
3019
  };
3002
3020
 
3003
3021
  declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
3004
3022
 
3005
3023
  declare const DxcTable: {
3006
- ({ children, margin, mode }: Props$e): JSX.Element;
3024
+ ({ children, margin, mode }: Props$u): JSX.Element;
3007
3025
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
3008
3026
  };
3009
3027
 
3010
- type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3011
- type Margin$5 = {
3012
- top?: Space$5;
3013
- bottom?: Space$5;
3014
- left?: Space$5;
3015
- right?: Space$5;
3016
- };
3017
- type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3018
3028
  type TabCommonProps = {
3019
3029
  /**
3020
3030
  * Whether the tab is disabled or not.
@@ -3037,7 +3047,7 @@ type TabLabelProps = TabCommonProps & {
3037
3047
  /**
3038
3048
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3039
3049
  */
3040
- icon?: string | SVG$5;
3050
+ icon?: string | SVG;
3041
3051
  };
3042
3052
  type TabIconProps = TabCommonProps & {
3043
3053
  /**
@@ -3047,17 +3057,17 @@ type TabIconProps = TabCommonProps & {
3047
3057
  /**
3048
3058
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3049
3059
  */
3050
- icon: string | SVG$5;
3060
+ icon: string | SVG;
3051
3061
  };
3052
3062
  type TabProps = {
3053
3063
  defaultActive?: boolean;
3054
3064
  active?: boolean;
3055
- icon?: string | SVG$5;
3056
- label?: string;
3065
+ icon?: string | SVG;
3066
+ label: string;
3057
3067
  title?: string;
3058
3068
  disabled?: boolean;
3059
3069
  notificationNumber?: boolean | number;
3060
- children: React.ReactNode;
3070
+ children: ReactNode;
3061
3071
  onClick?: () => void;
3062
3072
  onHover?: () => void;
3063
3073
  };
@@ -3088,12 +3098,12 @@ type LegacyProps = {
3088
3098
  * This function will be called when the user hovers a tab.The index of the
3089
3099
  * hovered tab will be passed as a parameter.
3090
3100
  */
3091
- onTabHover?: (index: number) => void;
3101
+ onTabHover?: (index: number | null) => void;
3092
3102
  /**
3093
3103
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3094
3104
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3095
3105
  */
3096
- margin?: Space$5 | Margin$5;
3106
+ margin?: Space$1 | Margin;
3097
3107
  /**
3098
3108
  * Value of the tabindex attribute applied to each tab.
3099
3109
  */
@@ -3108,7 +3118,7 @@ type NewProps = {
3108
3118
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3109
3119
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3110
3120
  */
3111
- margin?: Space$5 | Margin$5;
3121
+ margin?: Space$1 | Margin;
3112
3122
  /**
3113
3123
  * Value of the tabindex attribute applied to each tab.
3114
3124
  */
@@ -3116,23 +3126,15 @@ type NewProps = {
3116
3126
  /**
3117
3127
  * Contains one or more DxcTabs.Tab.
3118
3128
  */
3119
- children?: React.ReactNode;
3129
+ children?: ReactNode;
3120
3130
  };
3121
3131
  type Props$7 = LegacyProps & NewProps;
3122
3132
 
3123
3133
  declare const DxcTabs: {
3124
- ({ 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;
3125
3135
  Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
3126
3136
  };
3127
3137
 
3128
- type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3129
- type Margin$4 = {
3130
- top?: Space$4;
3131
- bottom?: Space$4;
3132
- left?: Space$4;
3133
- right?: Space$4;
3134
- };
3135
- type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3136
3138
  type TagCommonProps = {
3137
3139
  /**
3138
3140
  * If defined, the tag will be displayed as an anchor, using this prop as "href".
@@ -3161,7 +3163,7 @@ type TagCommonProps = {
3161
3163
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3162
3164
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3163
3165
  */
3164
- margin?: Space$4 | Margin$4;
3166
+ margin?: Space$1 | Margin;
3165
3167
  /**
3166
3168
  * Size of the component.
3167
3169
  */
@@ -3175,7 +3177,7 @@ type TagLabelProps = TagCommonProps & {
3175
3177
  /**
3176
3178
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3177
3179
  */
3178
- icon?: string | SVG$4;
3180
+ icon?: string | SVG;
3179
3181
  /**
3180
3182
  * Text to be placed next inside the tag.
3181
3183
  */
@@ -3185,7 +3187,7 @@ type TagIconProps = TagCommonProps & {
3185
3187
  /**
3186
3188
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3187
3189
  */
3188
- icon: string | SVG$4;
3190
+ icon: string | SVG;
3189
3191
  /**
3190
3192
  * Text to be placed next inside the tag.
3191
3193
  */
@@ -3198,13 +3200,6 @@ type Props$6 = TagLabelProps | TagIconProps;
3198
3200
  */
3199
3201
  declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
3200
3202
 
3201
- type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3202
- type Margin$3 = {
3203
- top?: Space$3;
3204
- bottom?: Space$3;
3205
- left?: Space$3;
3206
- right?: Space$3;
3207
- };
3208
3203
  type Props$5 = {
3209
3204
  /**
3210
3205
  * Text to be placed above the textarea.
@@ -3324,7 +3319,7 @@ type Props$5 = {
3324
3319
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3325
3320
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3326
3321
  */
3327
- margin?: Space$3 | Margin$3;
3322
+ margin?: Space$1 | Margin;
3328
3323
  /**
3329
3324
  * Size of the component.
3330
3325
  */
@@ -3333,18 +3328,14 @@ type Props$5 = {
3333
3328
  * Value of the tabindex attribute.
3334
3329
  */
3335
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;
3336
3335
  };
3337
3336
 
3338
3337
  declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
3339
3338
 
3340
- type Space$2 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3341
- type Margin$2 = {
3342
- top?: Space$2;
3343
- bottom?: Space$2;
3344
- left?: Space$2;
3345
- right?: Space$2;
3346
- };
3347
- type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3348
3339
  type Action$1 = {
3349
3340
  /**
3350
3341
  * This function will be called when the user clicks the action.
@@ -3353,7 +3344,7 @@ type Action$1 = {
3353
3344
  /**
3354
3345
  * Icon to be placed in the action..
3355
3346
  */
3356
- icon: string | SVG$3;
3347
+ icon: string | SVG;
3357
3348
  /**
3358
3349
  * Text representing advisory information related
3359
3350
  * to the button's action. Under the hood, this prop also serves
@@ -3495,7 +3486,7 @@ type Props$4 = {
3495
3486
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3496
3487
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3497
3488
  */
3498
- margin?: Space$2 | Margin$2;
3489
+ margin?: Space$1 | Margin;
3499
3490
  /**
3500
3491
  * Size of the component.
3501
3492
  */
@@ -3504,44 +3495,69 @@ type Props$4 = {
3504
3495
  * Value of the tabindex attribute.
3505
3496
  */
3506
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;
3507
3502
  };
3508
3503
 
3509
3504
  declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
3510
3505
 
3511
- type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3512
3506
  type Action = {
3513
- 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
+ */
3514
3514
  label: string;
3515
+ /**
3516
+ * The function that will be executed when the user clicks on the action button.
3517
+ */
3515
3518
  onClick: () => void;
3516
3519
  };
3517
3520
  type CommonProps$1 = {
3521
+ /**
3522
+ * Tertiary button which performs a custom action, specified by the user.
3523
+ */
3518
3524
  action?: Action;
3525
+ /**
3526
+ * Message to be displayed as a toast.
3527
+ */
3519
3528
  message: string;
3520
3529
  };
3521
3530
  type DefaultToast = CommonProps$1 & {
3522
- 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;
3523
3537
  };
3524
3538
  type LoadingToast = CommonProps$1 & {
3525
3539
  loading: boolean;
3526
3540
  };
3527
3541
  type SemanticToast = CommonProps$1 & {
3542
+ /**
3543
+ * Flag that allows to hide the semantic icon of the toast.
3544
+ */
3528
3545
  hideSemanticIcon?: boolean;
3529
3546
  };
3530
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
+ */
3531
3552
  duration?: number;
3532
- children: React.ReactNode;
3553
+ /**
3554
+ * Tree of components from which the useToast hook can be triggered.
3555
+ */
3556
+ children: ReactNode;
3533
3557
  };
3534
3558
 
3535
3559
  declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
3536
3560
 
3537
- type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3538
- type Margin$1 = {
3539
- top?: Space$1;
3540
- bottom?: Space$1;
3541
- left?: Space$1;
3542
- right?: Space$1;
3543
- };
3544
- type SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3545
3561
  type OptionIcon = {
3546
3562
  /**
3547
3563
  * String with the option display value.
@@ -3550,7 +3566,7 @@ type OptionIcon = {
3550
3566
  /**
3551
3567
  * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3552
3568
  */
3553
- icon: string | SVG$1;
3569
+ icon: string | SVG;
3554
3570
  /**
3555
3571
  * Value for the HTML properties title and aria-label.
3556
3572
  * When a label is defined, this prop can not be use.
@@ -3565,7 +3581,7 @@ type OptionLabel = {
3565
3581
  /**
3566
3582
  * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3567
3583
  */
3568
- icon?: string | SVG$1;
3584
+ icon?: string | SVG;
3569
3585
  /**
3570
3586
  * Value for the HTML properties title and aria-label.
3571
3587
  * When a label is defined, this prop can not be use.
@@ -3599,7 +3615,7 @@ type CommonProps = {
3599
3615
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3600
3616
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3601
3617
  */
3602
- margin?: Space$1 | Margin$1;
3618
+ margin?: Space$1 | Margin;
3603
3619
  /**
3604
3620
  * Value of the tabindex.
3605
3621
  */
@@ -3657,17 +3673,19 @@ type Props$2 = {
3657
3673
  /**
3658
3674
  * Text to be displayed inside the tooltip.
3659
3675
  */
3660
- label: string;
3676
+ label?: string;
3661
3677
  /**
3662
3678
  * Content in which the Tooltip will be displayed.
3663
3679
  */
3664
- children: React.ReactNode;
3680
+ children: ReactNode;
3665
3681
  };
3666
3682
 
3667
- declare const DxcTooltip: ({ position, label, children }: Props$2) => JSX.Element;
3683
+ declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
3668
3684
 
3669
3685
  type Props$1 = {
3670
- 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;
3671
3689
  display?: "inline" | "block";
3672
3690
  fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
3673
3691
  fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
@@ -3676,23 +3694,13 @@ type Props$1 = {
3676
3694
  letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
3677
3695
  lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
3678
3696
  textAlign?: "left" | "center" | "right";
3679
- color?: string;
3680
3697
  textDecoration?: "none" | "underline" | "line-through";
3681
3698
  textOverflow?: "clip" | "ellipsis" | "unset";
3682
3699
  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
3683
- children: React.ReactNode;
3684
3700
  };
3685
3701
 
3686
- declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: Props$1) => JSX.Element;
3702
+ declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
3687
3703
 
3688
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3689
- type Margin = {
3690
- top?: Space;
3691
- bottom?: Space;
3692
- left?: Space;
3693
- right?: Space;
3694
- };
3695
- type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
3696
3704
  type StepProps = {
3697
3705
  /**
3698
3706
  * Step label.
@@ -3741,7 +3749,7 @@ type Props = {
3741
3749
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3742
3750
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3743
3751
  */
3744
- margin?: Space | Margin;
3752
+ margin?: Space$1 | Margin;
3745
3753
  /**
3746
3754
  * Value of the tabindex attribute that is given to all the steps.
3747
3755
  */
@@ -3750,40 +3758,32 @@ type Props = {
3750
3758
 
3751
3759
  declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
3752
3760
 
3753
- declare const useToast: () => {
3754
- default: (toast: DefaultToast) => () => void;
3755
- success: (toast: SemanticToast) => () => void;
3756
- warning: (toast: SemanticToast) => () => void;
3757
- info: (toast: SemanticToast) => () => void;
3758
- loading: (toast: LoadingToast) => () => void;
3759
- };
3760
-
3761
3761
  declare const componentTokens: {
3762
3762
  accordion: {
3763
3763
  backgroundColor: string;
3764
3764
  hoverBackgroundColor: string;
3765
+ focusBackgroundColor: string;
3766
+ activeBackgroundColor: string;
3765
3767
  arrowColor: string;
3766
3768
  disabledArrowColor: string;
3769
+ subLabelFontFamily: string;
3770
+ subLabelFontSize: string;
3771
+ subLabelFontWeight: string;
3772
+ subLabelFontStyle: string;
3773
+ subLabelFontColor: string;
3774
+ disabledSubLabelFontColor: string;
3767
3775
  assistiveTextFontFamily: string;
3768
3776
  assistiveTextFontSize: string;
3769
3777
  assistiveTextFontWeight: string;
3770
3778
  assistiveTextFontStyle: string;
3771
- assistiveTextLetterSpacing: string;
3772
3779
  assistiveTextFontColor: string;
3773
3780
  disabledAssistiveTextFontColor: string;
3774
- assistiveTextMinWidth: string;
3775
- assistiveTextPaddingRight: string;
3776
- assistiveTextPaddingLeft: string;
3777
3781
  titleLabelFontFamily: string;
3778
3782
  titleLabelFontSize: string;
3779
3783
  titleLabelFontWeight: string;
3780
3784
  titleLabelFontStyle: string;
3781
3785
  titleLabelFontColor: string;
3782
3786
  disabledTitleLabelFontColor: string;
3783
- titleLabelPaddingTop: string;
3784
- titleLabelPaddingBottom: string;
3785
- titleLabelPaddingLeft: string;
3786
- titleLabelPaddingRight: string;
3787
3787
  focusBorderColor: string;
3788
3788
  focusBorderStyle: string;
3789
3789
  focusBorderThickness: string;
@@ -3791,59 +3791,34 @@ declare const componentTokens: {
3791
3791
  boxShadowOffsetX: string;
3792
3792
  boxShadowOffsetY: string;
3793
3793
  boxShadowBlur: string;
3794
+ boxShadowSpread: string;
3794
3795
  boxShadowColor: string;
3795
3796
  iconColor: string;
3796
3797
  disabledIconColor: string;
3797
3798
  iconSize: string;
3798
- iconMarginLeft: string;
3799
- iconMarginRight: string;
3800
- accordionGroupSeparatorBorderColor: string;
3801
- accordionGroupSeparatorBorderThickness: string;
3802
- accordionGroupSeparatorBorderRadius: string;
3803
- accordionGroupSeparatorBorderStyle: string;
3799
+ accordionSeparatorBorderColor: string;
3800
+ accordionSeparatorBorderThickness: string;
3801
+ accordionSeparatorBorderStyle: string;
3804
3802
  };
3805
3803
  alert: {
3806
- titleFontFamily: string;
3807
- titleFontColor: string;
3808
- titleFontSize: string;
3809
- titleFontStyle: string;
3810
- titleFontWeight: string;
3811
- titleTextTransform: string;
3812
- titlePaddingRight: string;
3813
- titlePaddingLeft: string;
3814
- inlineTextFontFamily: string;
3815
- inlineTextFontColor: string;
3816
- inlineTextFontSize: string;
3817
- inlineTextFontStyle: string;
3818
- inlineTextFontWeight: string;
3819
- inlineTextPaddingLeft: string;
3820
- inlineTextPaddingRight: string;
3821
- contentPaddingLeft: string;
3822
- contentPaddingRight: string;
3823
- contentPaddingTop: string;
3824
- contentPaddingBottom: string;
3825
- borderRadius: string;
3826
- borderStyle: string;
3827
- borderThickness: string;
3828
- infoBorderColor: string;
3829
- successBorderColor: string;
3830
- warningBorderColor: string;
3831
- errorBorderColor: string;
3832
- iconSize: string;
3833
- iconPaddingLeft: string;
3834
- iconPaddingRight: string;
3835
- infoIconColor: string;
3836
- successIconColor: string;
3837
- warningIconColor: string;
3804
+ errorBackgroundColor: string;
3838
3805
  errorIconColor: string;
3806
+ fontColor: string;
3807
+ fontFamily: string;
3808
+ fontSize: string;
3809
+ fontStyle: string;
3810
+ fontWeight: string;
3811
+ iconSize: string;
3839
3812
  infoBackgroundColor: string;
3813
+ infoIconColor: string;
3814
+ modalBackgroundColor: string;
3815
+ modalTitleFontSize: string;
3816
+ modalTitleFontWeight: string;
3817
+ overlayColor: string;
3840
3818
  successBackgroundColor: string;
3819
+ successIconColor: string;
3841
3820
  warningBackgroundColor: string;
3842
- errorBackgroundColor: string;
3843
- hoverActionBackgroundColor: string;
3844
- activeActionBackgroundColor: string;
3845
- focusActionBorderColor: string;
3846
- overlayColor: string;
3821
+ warningIconColor: string;
3847
3822
  };
3848
3823
  bulletedList: {
3849
3824
  fontColor: string;
@@ -4124,6 +4099,16 @@ declare const componentTokens: {
4124
4099
  focusColor: string;
4125
4100
  scrollBarThumbColor: string;
4126
4101
  scrollBarTrackColor: string;
4102
+ actionIconColor: string;
4103
+ disabledActionIconColor: string;
4104
+ hoverActionIconColor: string;
4105
+ focusActionIconColor: string;
4106
+ activeActionIconColor: string;
4107
+ actionBackgroundColor: string;
4108
+ disabledActionBackgroundColor: string;
4109
+ hoverActionBackgroundColor: string;
4110
+ focusActionBorderColor: string;
4111
+ activeActionBackgroundColor: string;
4127
4112
  };
4128
4113
  dateInput: {
4129
4114
  pickerBackgroundColor: string;
@@ -4159,15 +4144,8 @@ declare const componentTokens: {
4159
4144
  dialog: {
4160
4145
  overlayColor: string;
4161
4146
  backgroundColor: string;
4162
- closeIconSize: string;
4163
- closeIconTopPosition: string;
4164
- closeIconRightPosition: string;
4165
4147
  closeIconBackgroundColor: string;
4166
- closeIconBorderColor: string;
4167
4148
  closeIconColor: string;
4168
- closeIconBorderThickness: string;
4169
- closeIconBorderStyle: string;
4170
- closeIconBorderRadius: string;
4171
4149
  boxShadowOffsetX: string;
4172
4150
  boxShadowOffsetY: string;
4173
4151
  boxShadowBlur: string;
@@ -4302,15 +4280,15 @@ declare const componentTokens: {
4302
4280
  };
4303
4281
  header: {
4304
4282
  backgroundColor: string;
4305
- hamburguerFocusColor: string;
4306
- hamburguerFontFamily: string;
4307
- hamburguerFontStyle: string;
4308
- hamburguerFontColor: string;
4309
- hamburguerFontSize: string;
4310
- hamburguerFontWeight: string;
4311
- hamburguerTextTransform: string;
4312
- hamburguerIconColor: string;
4313
- 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;
4314
4292
  logo: string;
4315
4293
  logoResponsive: string;
4316
4294
  logoHeight: string;
@@ -5061,6 +5039,7 @@ type OpinionatedTheme = {
5061
5039
  accordion: {
5062
5040
  accentColor: string;
5063
5041
  titleFontColor: string;
5042
+ subLabelFontColor: string;
5064
5043
  assistiveTextFontColor: string;
5065
5044
  };
5066
5045
  alert: {
@@ -5122,7 +5101,7 @@ type OpinionatedTheme = {
5122
5101
  accentColor: string;
5123
5102
  fontColor: string;
5124
5103
  menuBaseColor: string;
5125
- hamburguerColor: string;
5104
+ hamburgerColor: string;
5126
5105
  logo: string;
5127
5106
  logoResponsive: string;
5128
5107
  contentColor: string;
@@ -5216,10 +5195,10 @@ declare const defaultTranslatedComponentLabels: {
5216
5195
  visibilityToggleTitle: string;
5217
5196
  };
5218
5197
  alert: {
5219
- infoTitleText: string;
5220
- successTitleText: string;
5221
- warningTitleText: string;
5222
- errorTitleText: string;
5198
+ previousMessageActionTitle: string;
5199
+ nextMessageActionTitle: string;
5200
+ closeAlertActionTitle: string;
5201
+ closeMessageActionTitle: string;
5223
5202
  };
5224
5203
  calendar: {
5225
5204
  daysShort: string[];
@@ -5256,7 +5235,7 @@ declare const defaultTranslatedComponentLabels: {
5256
5235
  };
5257
5236
  header: {
5258
5237
  closeIcon: string;
5259
- hamburguerTitle: string;
5238
+ hamburgerTitle: string;
5260
5239
  };
5261
5240
  numberInput: {
5262
5241
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5300,32 +5279,39 @@ declare const defaultTranslatedComponentLabels: {
5300
5279
  };
5301
5280
  type TranslatedLabels = typeof defaultTranslatedComponentLabels;
5302
5281
 
5303
- 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<{
5304
5290
  accordion: {
5305
5291
  backgroundColor: string;
5306
5292
  hoverBackgroundColor: string;
5293
+ focusBackgroundColor: string;
5294
+ activeBackgroundColor: string;
5307
5295
  arrowColor: string;
5308
5296
  disabledArrowColor: string;
5297
+ subLabelFontFamily: string;
5298
+ subLabelFontSize: string;
5299
+ subLabelFontWeight: string;
5300
+ subLabelFontStyle: string;
5301
+ subLabelFontColor: string;
5302
+ disabledSubLabelFontColor: string;
5309
5303
  assistiveTextFontFamily: string;
5310
5304
  assistiveTextFontSize: string;
5311
5305
  assistiveTextFontWeight: string;
5312
5306
  assistiveTextFontStyle: string;
5313
- assistiveTextLetterSpacing: string;
5314
5307
  assistiveTextFontColor: string;
5315
5308
  disabledAssistiveTextFontColor: string;
5316
- assistiveTextMinWidth: string;
5317
- assistiveTextPaddingRight: string;
5318
- assistiveTextPaddingLeft: string;
5319
5309
  titleLabelFontFamily: string;
5320
5310
  titleLabelFontSize: string;
5321
5311
  titleLabelFontWeight: string;
5322
5312
  titleLabelFontStyle: string;
5323
5313
  titleLabelFontColor: string;
5324
5314
  disabledTitleLabelFontColor: string;
5325
- titleLabelPaddingTop: string;
5326
- titleLabelPaddingBottom: string;
5327
- titleLabelPaddingLeft: string;
5328
- titleLabelPaddingRight: string;
5329
5315
  focusBorderColor: string;
5330
5316
  focusBorderStyle: string;
5331
5317
  focusBorderThickness: string;
@@ -5333,59 +5319,34 @@ declare const HalstackContext: react.Context<DeepPartial<{
5333
5319
  boxShadowOffsetX: string;
5334
5320
  boxShadowOffsetY: string;
5335
5321
  boxShadowBlur: string;
5322
+ boxShadowSpread: string;
5336
5323
  boxShadowColor: string;
5337
5324
  iconColor: string;
5338
5325
  disabledIconColor: string;
5339
5326
  iconSize: string;
5340
- iconMarginLeft: string;
5341
- iconMarginRight: string;
5342
- accordionGroupSeparatorBorderColor: string;
5343
- accordionGroupSeparatorBorderThickness: string;
5344
- accordionGroupSeparatorBorderRadius: string;
5345
- accordionGroupSeparatorBorderStyle: string;
5327
+ accordionSeparatorBorderColor: string;
5328
+ accordionSeparatorBorderThickness: string;
5329
+ accordionSeparatorBorderStyle: string;
5346
5330
  };
5347
5331
  alert: {
5348
- titleFontFamily: string;
5349
- titleFontColor: string;
5350
- titleFontSize: string;
5351
- titleFontStyle: string;
5352
- titleFontWeight: string;
5353
- titleTextTransform: string;
5354
- titlePaddingRight: string;
5355
- titlePaddingLeft: string;
5356
- inlineTextFontFamily: string;
5357
- inlineTextFontColor: string;
5358
- inlineTextFontSize: string;
5359
- inlineTextFontStyle: string;
5360
- inlineTextFontWeight: string;
5361
- inlineTextPaddingLeft: string;
5362
- inlineTextPaddingRight: string;
5363
- contentPaddingLeft: string;
5364
- contentPaddingRight: string;
5365
- contentPaddingTop: string;
5366
- contentPaddingBottom: string;
5367
- borderRadius: string;
5368
- borderStyle: string;
5369
- borderThickness: string;
5370
- infoBorderColor: string;
5371
- successBorderColor: string;
5372
- warningBorderColor: string;
5373
- errorBorderColor: string;
5374
- iconSize: string;
5375
- iconPaddingLeft: string;
5376
- iconPaddingRight: string;
5377
- infoIconColor: string;
5378
- successIconColor: string;
5379
- warningIconColor: string;
5332
+ errorBackgroundColor: string;
5380
5333
  errorIconColor: string;
5334
+ fontColor: string;
5335
+ fontFamily: string;
5336
+ fontSize: string;
5337
+ fontStyle: string;
5338
+ fontWeight: string;
5339
+ iconSize: string;
5381
5340
  infoBackgroundColor: string;
5341
+ infoIconColor: string;
5342
+ modalBackgroundColor: string;
5343
+ modalTitleFontSize: string;
5344
+ modalTitleFontWeight: string;
5345
+ overlayColor: string;
5382
5346
  successBackgroundColor: string;
5347
+ successIconColor: string;
5383
5348
  warningBackgroundColor: string;
5384
- errorBackgroundColor: string;
5385
- hoverActionBackgroundColor: string;
5386
- activeActionBackgroundColor: string;
5387
- focusActionBorderColor: string;
5388
- overlayColor: string;
5349
+ warningIconColor: string;
5389
5350
  };
5390
5351
  bulletedList: {
5391
5352
  fontColor: string;
@@ -5666,6 +5627,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
5666
5627
  focusColor: string;
5667
5628
  scrollBarThumbColor: string;
5668
5629
  scrollBarTrackColor: string;
5630
+ actionIconColor: string;
5631
+ disabledActionIconColor: string;
5632
+ hoverActionIconColor: string;
5633
+ focusActionIconColor: string;
5634
+ activeActionIconColor: string;
5635
+ actionBackgroundColor: string;
5636
+ disabledActionBackgroundColor: string;
5637
+ hoverActionBackgroundColor: string;
5638
+ focusActionBorderColor: string;
5639
+ activeActionBackgroundColor: string;
5669
5640
  };
5670
5641
  dateInput: {
5671
5642
  pickerBackgroundColor: string;
@@ -5701,15 +5672,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
5701
5672
  dialog: {
5702
5673
  overlayColor: string;
5703
5674
  backgroundColor: string;
5704
- closeIconSize: string;
5705
- closeIconTopPosition: string;
5706
- closeIconRightPosition: string;
5707
5675
  closeIconBackgroundColor: string;
5708
- closeIconBorderColor: string;
5709
5676
  closeIconColor: string;
5710
- closeIconBorderThickness: string;
5711
- closeIconBorderStyle: string;
5712
- closeIconBorderRadius: string;
5713
5677
  boxShadowOffsetX: string;
5714
5678
  boxShadowOffsetY: string;
5715
5679
  boxShadowBlur: string;
@@ -5844,15 +5808,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
5844
5808
  };
5845
5809
  header: {
5846
5810
  backgroundColor: string;
5847
- hamburguerFocusColor: string;
5848
- hamburguerFontFamily: string;
5849
- hamburguerFontStyle: string;
5850
- hamburguerFontColor: string;
5851
- hamburguerFontSize: string;
5852
- hamburguerFontWeight: string;
5853
- hamburguerTextTransform: string;
5854
- hamburguerIconColor: string;
5855
- 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;
5856
5820
  logo: string;
5857
5821
  logoResponsive: string;
5858
5822
  logoHeight: string;
@@ -6597,16 +6561,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
6597
6561
  separatorColor: string;
6598
6562
  focusColor: string;
6599
6563
  };
6600
- }>>;
6601
- declare const HalstackLanguageContext: react.Context<DeepPartial<{
6564
+ }>;
6565
+ declare const HalstackLanguageContext: react.Context<{
6602
6566
  applicationLayout: {
6603
6567
  visibilityToggleTitle: string;
6604
6568
  };
6605
6569
  alert: {
6606
- infoTitleText: string;
6607
- successTitleText: string;
6608
- warningTitleText: string;
6609
- errorTitleText: string;
6570
+ previousMessageActionTitle: string;
6571
+ nextMessageActionTitle: string;
6572
+ closeAlertActionTitle: string;
6573
+ closeMessageActionTitle: string;
6610
6574
  };
6611
6575
  calendar: {
6612
6576
  daysShort: string[];
@@ -6643,7 +6607,7 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6643
6607
  };
6644
6608
  header: {
6645
6609
  closeIcon: string;
6646
- hamburguerTitle: string;
6610
+ hamburgerTitle: string;
6647
6611
  };
6648
6612
  numberInput: {
6649
6613
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -6684,20 +6648,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6684
6648
  toast: {
6685
6649
  clearToastActionTitle: string;
6686
6650
  };
6687
- }>>;
6688
- /**
6689
- * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
6690
- * This is an extension of the already existing Partial type, which only allows one level of partiality.
6691
- */
6692
- type DeepPartial<T> = {
6693
- [P in keyof T]?: Partial<T[P]>;
6694
- };
6651
+ }>;
6695
6652
  type HalstackProviderPropsType = {
6696
6653
  theme?: DeepPartial<OpinionatedTheme>;
6697
6654
  advancedTheme?: DeepPartial<AdvancedTheme>;
6698
6655
  labels?: DeepPartial<TranslatedLabels>;
6699
- children: React.ReactNode;
6656
+ children: ReactNode;
6700
6657
  };
6701
6658
  declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
6702
6659
 
6703
- 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 };
6660
+ declare const useToast: () => {
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;
6666
+ };
6667
+
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 };