@dxc-technology/halstack-react 0.0.0-ba45742 → 0.0.0-bb6d27a

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 +747 -892
  2. package/dist/index.d.ts +747 -892
  3. package/dist/index.js +6776 -7342
  4. package/dist/index.mjs +6480 -7015
  5. package/package.json +6 -6
package/dist/index.d.mts CHANGED
@@ -1,36 +1,45 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as react from 'react';
3
- import { ReactNode } from 'react';
2
+ import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import { SortColumn } from 'react-data-grid';
5
5
  import * as styled_components from 'styled-components';
6
6
 
7
- type Space$s = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
8
- type Margin$n = {
9
- top?: Space$s;
10
- bottom?: Space$s;
11
- left?: Space$s;
12
- right?: Space$s;
7
+ type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
8
+ type Margin = {
9
+ top?: Space$1;
10
+ bottom?: Space$1;
11
+ left?: Space$1;
12
+ right?: Space$1;
13
13
  };
14
- type SVG$k = React.ReactNode & React.SVGProps<SVGSVGElement>;
15
- type Props$K = {
14
+ type SVG = ReactNode & SVGProps<SVGSVGElement>;
15
+
16
+ type AccordionItemProps = {
16
17
  /**
17
18
  * The panel label.
18
19
  */
19
20
  label: string;
20
21
  /**
21
- * Initial state of the panel, only when it is uncontrolled.
22
+ * Additional info label positioned under the label.
23
+ */
24
+ subLabel?: string;
25
+ /**
26
+ * Badge component to add extra value to the accordion.
22
27
  */
23
- defaultIsExpanded?: boolean;
28
+ badge?: {
29
+ position: "before" | "after";
30
+ element: ReactNode;
31
+ };
24
32
  /**
25
- * Represents the state of the panel. When true, the component will be
26
- * expanded. If undefined, the component will be uncontrolled and its
27
- * value will be managed internally by the component.
33
+ * Status light component to add extra value to the accordion.
28
34
  */
29
- isExpanded?: boolean;
35
+ statusLight?: ReactNode;
30
36
  /**
31
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
37
+ * Material Symbol name or SVG element used as the icon that will be
38
+ * placed next to panel label. When using Material Symbols, replace spaces with underscores.
39
+ * By default they are outlined if you want it to be filled
40
+ * prefix the symbol name with "filled_".
32
41
  */
33
- icon?: string | SVG$k;
42
+ icon?: string | SVG;
34
43
  /**
35
44
  * Assistive text to be placed on the right side of the panel.
36
45
  */
@@ -39,134 +48,170 @@ type Props$K = {
39
48
  * If true, the component will be disabled.
40
49
  */
41
50
  disabled?: boolean;
42
- /**
43
- * This function will be called when the user clicks the accordion to expand or collapse
44
- * the panel. The new state of the panel will be passed as a parameter.
45
- */
46
- onChange?: (isExpanded: boolean) => void;
47
51
  /**
48
52
  * The expanded panel of the accordion. This area can be used to render
49
53
  * custom content.
50
54
  */
51
- children: React.ReactNode;
52
- /**
53
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
54
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
55
- */
56
- margin?: Space$s | Margin$n;
55
+ children: ReactNode;
57
56
  /**
58
57
  * Value of the tabindex attribute.
59
58
  */
60
59
  tabIndex?: number;
61
60
  };
62
-
63
- declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
64
-
65
- type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
66
- type Margin$m = {
67
- top?: Space$r;
68
- bottom?: Space$r;
69
- left?: Space$r;
70
- right?: Space$r;
71
- };
72
- type SVG$j = React.ReactNode & React.SVGProps<SVGSVGElement>;
73
- type AccordionPropsType = {
74
- /**
75
- * The panel label.
76
- */
77
- label: string;
78
- /**
79
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
80
- */
81
- icon?: string | SVG$j;
61
+ type CommonProps$9 = {
82
62
  /**
83
- * Assistive text to be placed on the right side of the panel.
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.
84
65
  */
85
- assistiveText?: string;
66
+ margin?: Space$1 | Margin;
86
67
  /**
87
- * If true, the component will be disabled.
68
+ * Contains one or more accordion items.
88
69
  */
89
- disabled?: boolean;
70
+ children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
71
+ };
72
+ type IndependentProps = CommonProps$9 & {
90
73
  /**
91
- * The expanded panel of the accordion. This area can be used to render
92
- * custom content.
74
+ * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
93
75
  */
94
- children: React.ReactNode;
95
- };
96
- type Props$J = {
76
+ independent: true;
97
77
  /**
98
- * Initially active accordion, only when it is uncontrolled.
78
+ * Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
79
+ * several accordions can be activated by default.
99
80
  */
100
81
  defaultIndexActive?: number;
101
82
  /**
102
- * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
103
- * If null, the component will be controlled and all accordions will be closed.
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.
104
86
  */
105
87
  indexActive?: number;
106
88
  /**
107
- * If true, the component will be disabled.
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.
108
90
  */
109
- disabled?: boolean;
91
+ onActiveChange?: (index: number) => void;
92
+ };
93
+ type NonIndependentProps = CommonProps$9 & {
110
94
  /**
111
- * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
95
+ * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
112
96
  */
113
- onActiveChange?: (indexActive: number) => void;
97
+ independent?: false;
114
98
  /**
115
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
116
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
99
+ * Initially active accordion, only when it is uncontrolled. If the accordion is not independent,
100
+ * several accordions can be activated by default.
101
+ */
102
+ defaultIndexActive?: number[];
103
+ /**
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.
117
107
  */
118
- margin?: Space$r | Margin$m;
108
+ indexActive?: number[];
119
109
  /**
120
- * Customized accordion(s) that are allowed inside an Accordion Group.
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.
121
111
  */
122
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
112
+ onActiveChange?: (index: number[]) => void;
123
113
  };
114
+ type Props$J = IndependentProps | NonIndependentProps;
124
115
 
125
- declare const DxcAccordionGroup: {
126
- ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
127
- Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
116
+ declare const DxcAccordion: {
117
+ (props: Props$J): JSX.Element;
118
+ AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
128
119
  };
129
120
 
130
- type SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
131
121
  type Action$2 = {
132
- icon?: string | SVG$i;
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;
126
+ /**
127
+ * The label of the action.
128
+ */
133
129
  label: string;
130
+ /**
131
+ * The function that will be executed when the user clicks on the action button.
132
+ */
134
133
  onClick: () => void;
135
134
  };
136
135
  type Message = {
136
+ /**
137
+ * The function that will be executed when the user clicks on the close action button.
138
+ */
137
139
  onClose?: () => void;
138
- text: React.ReactNode;
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;
139
146
  };
140
147
  type CommonProps$8 = {
148
+ /**
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).
152
+ */
141
153
  closable?: boolean;
154
+ /**
155
+ * Primary action of the alert.
156
+ */
142
157
  primaryAction?: Action$2;
158
+ /**
159
+ * Secondary action of the alert.
160
+ */
143
161
  secondaryAction?: Action$2;
162
+ /**
163
+ * Specifies the semantic meaning of the alert.
164
+ */
144
165
  semantic?: "error" | "info" | "success" | "warning";
166
+ /**
167
+ * Title of the alert.
168
+ */
145
169
  title: string;
146
170
  };
147
171
  type ModeSpecificProps = {
172
+ /**
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.
179
+ */
148
180
  message?: Message | Message[];
181
+ /**
182
+ * The mode of the alert.
183
+ */
149
184
  mode?: "inline" | "banner";
150
185
  } | {
186
+ /**
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.
193
+ */
151
194
  message: Required<Message>;
195
+ /**
196
+ * The mode of the alert.
197
+ */
152
198
  mode: "modal";
153
199
  };
154
200
  type Props$I = CommonProps$8 & ModeSpecificProps;
155
201
 
156
202
  declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$I): react_jsx_runtime.JSX.Element;
157
203
 
158
- type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
159
204
  type SidenavTitlePropsType = {
160
205
  /**
161
206
  * The area inside the sidenav title. This area can be used to render custom content.
162
207
  */
163
- children: React.ReactNode;
208
+ children: ReactNode;
164
209
  };
165
210
  type SidenavSectionPropsType = {
166
211
  /**
167
212
  * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
168
213
  */
169
- children: React.ReactNode;
214
+ children: ReactNode;
170
215
  };
171
216
  type SidenavGroupPropsType = {
172
217
  /**
@@ -181,11 +226,11 @@ type SidenavGroupPropsType = {
181
226
  /**
182
227
  * Material Symbol name or SVG icon to be displayed next to the title of the group.
183
228
  */
184
- icon?: string | SVG$h;
229
+ icon?: string | SVG;
185
230
  /**
186
231
  * The area inside the sidenav group. This area can be used to render sidenav links.
187
232
  */
188
- children: React.ReactNode;
233
+ children: ReactNode;
189
234
  };
190
235
  type SidenavLinkPropsType = {
191
236
  /**
@@ -199,7 +244,7 @@ type SidenavLinkPropsType = {
199
244
  /**
200
245
  * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
201
246
  */
202
- icon?: string | SVG$h;
247
+ icon?: string | SVG;
203
248
  /**
204
249
  * If true, the link will be marked as selected. Moreover, in that same case,
205
250
  * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
@@ -209,11 +254,11 @@ type SidenavLinkPropsType = {
209
254
  /**
210
255
  * This function will be called when the user clicks the link and the event will be passed to this function.
211
256
  */
212
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
257
+ onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
213
258
  /**
214
259
  * The area inside the sidenav link.
215
260
  */
216
- children: React.ReactNode;
261
+ children: ReactNode;
217
262
  /**
218
263
  * Value of the tabindex.
219
264
  */
@@ -223,23 +268,15 @@ type Props$H = {
223
268
  /**
224
269
  * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
225
270
  */
226
- title?: React.ReactNode;
271
+ title?: ReactNode;
227
272
  /**
228
273
  * The area inside the sidenav. This area can be used to render the content inside the sidenav.
229
274
  */
230
- children: React.ReactNode;
275
+ children: ReactNode;
231
276
  };
232
277
 
233
- type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
234
- type Margin$l = {
235
- top?: Space$q;
236
- bottom?: Space$q;
237
- left?: Space$q;
238
- right?: Space$q;
239
- };
240
278
  type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
241
- type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
242
- type Option$1 = {
279
+ type Option$2 = {
243
280
  /**
244
281
  * Option display value.
245
282
  */
@@ -247,7 +284,7 @@ type Option$1 = {
247
284
  /**
248
285
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
249
286
  */
250
- icon?: string | SVG$g;
287
+ icon?: string | SVG;
251
288
  /**
252
289
  * Option inner value.
253
290
  */
@@ -257,7 +294,7 @@ type Props$G = {
257
294
  /**
258
295
  * An array of objects representing the options.
259
296
  */
260
- options: Option$1[];
297
+ options: Option$2[];
261
298
  /**
262
299
  * In case options include icons, whether the icon should appear
263
300
  * after or before the label.
@@ -266,7 +303,7 @@ type Props$G = {
266
303
  /**
267
304
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
268
305
  */
269
- icon?: string | SVG$g;
306
+ icon?: string | SVG;
270
307
  /**
271
308
  * Whether the icon should appear after or before the label.
272
309
  */
@@ -297,7 +334,7 @@ type Props$G = {
297
334
  * You can pass an object with 'top', 'bottom', 'left' and 'right'
298
335
  * properties in order to specify different margin sizes.
299
336
  */
300
- margin?: Space$q | Margin$l;
337
+ margin?: Space$1 | Margin;
301
338
  /**
302
339
  * Size of the component.
303
340
  */
@@ -313,7 +350,6 @@ type Props$G = {
313
350
  title?: string;
314
351
  };
315
352
 
316
- type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
317
353
  type Props$F = {
318
354
  /**
319
355
  * Whether a contrast line should appear at the bottom of the header.
@@ -324,12 +360,12 @@ type Props$F = {
324
360
  * for the first child in the content, so we recommend the use of React.Fragment
325
361
  * to be applied correctly. Otherwise, the styles can be modified.
326
362
  */
327
- content?: React.ReactNode;
363
+ content?: ReactNode;
328
364
  /**
329
365
  * Content shown in responsive version. It receives the close menu handler that can
330
366
  * be used to add that functionality when a element is clicked.
331
367
  */
332
- responsiveContent?: (closeHandler: () => void) => React.ReactNode;
368
+ responsiveContent?: (closeHandler: () => void) => ReactNode;
333
369
  /**
334
370
  * This function will be called when the user clicks the header logo.
335
371
  */
@@ -337,7 +373,7 @@ type Props$F = {
337
373
  /**
338
374
  * Size of the bottom margin to be applied to the header.
339
375
  */
340
- margin?: Space$p;
376
+ margin?: Space$1;
341
377
  /**
342
378
  * Value of the tabindex for all interactive elements, except those inside the
343
379
  * custom area.
@@ -345,8 +381,6 @@ type Props$F = {
345
381
  tabIndex?: number;
346
382
  };
347
383
 
348
- type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
349
- type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
350
384
  type SocialLink = {
351
385
  /**
352
386
  * URL of the page the link goes to.
@@ -355,7 +389,7 @@ type SocialLink = {
355
389
  /**
356
390
  * Material Symbol name or SVG element as the icon used for the link.
357
391
  */
358
- logo: string | SVG$f;
392
+ logo: string | SVG;
359
393
  /**
360
394
  * Value for the HTML properties title and aria-label.
361
395
  */
@@ -390,11 +424,11 @@ type FooterPropsType = {
390
424
  * The center section of the footer. Can be used to render custom
391
425
  * content in this area.
392
426
  */
393
- children?: React.ReactNode;
427
+ children?: ReactNode;
394
428
  /**
395
429
  * Size of the top margin to be applied to the footer.
396
430
  */
397
- margin?: Space$o;
431
+ margin?: Space$1;
398
432
  /**
399
433
  * Value of the tabindex for all interactive elements, except those
400
434
  * inside the custom area.
@@ -412,7 +446,7 @@ type AppLayoutMainPropsType = {
412
446
  /**
413
447
  * Everything between the tags will be displayed as the content of the main part of the application.
414
448
  */
415
- children: React.ReactNode;
449
+ children: ReactNode;
416
450
  };
417
451
  type ApplicationLayoutPropsType = {
418
452
  /**
@@ -423,19 +457,19 @@ type ApplicationLayoutPropsType = {
423
457
  /**
424
458
  * Header content.
425
459
  */
426
- header?: React.ReactNode;
460
+ header?: ReactNode;
427
461
  /**
428
462
  * Sidenav content
429
463
  */
430
- sidenav?: React.ReactNode;
464
+ sidenav?: ReactNode;
431
465
  /**
432
466
  * Footer content
433
467
  */
434
- footer?: React.ReactNode;
468
+ footer?: ReactNode;
435
469
  /**
436
470
  * Use the DxcApplicationLayout.Main provided to render main content.
437
471
  */
438
- children: React.ReactElement<AppLayoutMainPropsType>;
472
+ children: ReactElement<AppLayoutMainPropsType>;
439
473
  };
440
474
 
441
475
  declare const DxcApplicationLayout: {
@@ -443,7 +477,7 @@ declare const DxcApplicationLayout: {
443
477
  Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
444
478
  Header: {
445
479
  ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
446
- 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;
480
+ Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element>) => react_jsx_runtime.JSX.Element;
447
481
  };
448
482
  Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
449
483
  SideNav: {
@@ -453,10 +487,9 @@ declare const DxcApplicationLayout: {
453
487
  Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
454
488
  Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
455
489
  };
456
- useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
490
+ useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
457
491
  };
458
492
 
459
- type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
460
493
  type ContextualProps = {
461
494
  /**
462
495
  * Text to be placed in the badge.
@@ -501,7 +534,7 @@ type CommonProps$7 = {
501
534
  /**
502
535
  * Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
503
536
  */
504
- icon?: string | SVG$e;
537
+ icon?: string | SVG;
505
538
  /**
506
539
  * Size of the component.
507
540
  */
@@ -511,134 +544,42 @@ type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
511
544
 
512
545
  declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
513
546
 
514
- /**
515
- * Halstack Color Palette
516
- * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
517
- */
518
- declare const CoreColorTokens: {
519
- color_black: string;
520
- color_white: string;
521
- color_transparent: string;
522
- color_grey_50: string;
523
- color_grey_100: string;
524
- color_grey_200: string;
525
- color_grey_300: string;
526
- color_grey_400: string;
527
- color_grey_500: string;
528
- color_grey_600: string;
529
- color_grey_700: string;
530
- color_grey_800: string;
531
- color_grey_900: string;
532
- color_grey_50_a: string;
533
- color_grey_100_a: string;
534
- color_grey_200_a: string;
535
- color_grey_300_a: string;
536
- color_grey_400_a: string;
537
- color_grey_500_a: string;
538
- color_grey_600_a: string;
539
- color_grey_700_a: string;
540
- color_grey_800_a: string;
541
- color_grey_900_a: string;
542
- color_purple_50: string;
543
- color_purple_100: string;
544
- color_purple_200: string;
545
- color_purple_300: string;
546
- color_purple_400: string;
547
- color_purple_500: string;
548
- color_purple_600: string;
549
- color_purple_700: string;
550
- color_purple_800: string;
551
- color_purple_900: string;
552
- color_blue_50: string;
553
- color_blue_100: string;
554
- color_blue_200: string;
555
- color_blue_300: string;
556
- color_blue_400: string;
557
- color_blue_500: string;
558
- color_blue_600: string;
559
- color_blue_700: string;
560
- color_blue_800: string;
561
- color_blue_900: string;
562
- color_red_50: string;
563
- color_red_100: string;
564
- color_red_200: string;
565
- color_red_300: string;
566
- color_red_400: string;
567
- color_red_500: string;
568
- color_red_600: string;
569
- color_red_700: string;
570
- color_red_800: string;
571
- color_red_900: string;
572
- color_green_50: string;
573
- color_green_100: string;
574
- color_green_200: string;
575
- color_green_300: string;
576
- color_green_400: string;
577
- color_green_500: string;
578
- color_green_600: string;
579
- color_green_700: string;
580
- color_green_800: string;
581
- color_green_900: string;
582
- color_yellow_50: string;
583
- color_yellow_100: string;
584
- color_yellow_200: string;
585
- color_yellow_300: string;
586
- color_yellow_400: string;
587
- color_yellow_500: string;
588
- color_yellow_600: string;
589
- color_yellow_700: string;
590
- color_yellow_800: string;
591
- color_yellow_900: string;
592
- color_orange_50: string;
593
- color_orange_100: string;
594
- color_orange_200: string;
595
- color_orange_300: string;
596
- color_orange_400: string;
597
- color_orange_500: string;
598
- color_orange_600: string;
599
- color_orange_700: string;
600
- color_orange_800: string;
601
- color_orange_900: string;
602
- };
603
- type CoreColorTokensType = keyof typeof CoreColorTokens;
604
- type CoreSpacingTokensType = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "2.5rem" | "3rem" | "3.5rem" | "4rem" | "5rem" | "6rem" | "7rem";
605
-
606
547
  type Props$D = {
607
548
  /**
608
549
  * Applies the spacing scale to all sides.
609
550
  */
610
- space?: CoreSpacingTokensType;
551
+ space?: string;
611
552
  /**
612
553
  * Applies the spacing scale to the left and right sides.
613
554
  */
614
- horizontal?: CoreSpacingTokensType;
555
+ horizontal?: string;
615
556
  /**
616
557
  * Applies the spacing scale to the top and bottom sides.
617
558
  */
618
- vertical?: CoreSpacingTokensType;
559
+ vertical?: string;
619
560
  /**
620
561
  * Applies the spacing scale to the top side.
621
562
  */
622
- top?: CoreSpacingTokensType;
563
+ top?: string;
623
564
  /**
624
565
  * Applies the spacing scale to the right side.
625
566
  */
626
- right?: CoreSpacingTokensType;
567
+ right?: string;
627
568
  /**
628
569
  * Applies the spacing scale to the bottom side.
629
570
  */
630
- bottom?: CoreSpacingTokensType;
571
+ bottom?: string;
631
572
  /**
632
573
  * Applies the spacing scale to the left side.
633
574
  */
634
- left?: CoreSpacingTokensType;
575
+ left?: string;
635
576
  /**
636
577
  * Custom content inside the bleed.
637
578
  */
638
- children: React.ReactNode;
579
+ children: ReactNode;
639
580
  };
640
581
 
641
- declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
582
+ declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D): react_jsx_runtime.JSX.Element;
642
583
 
643
584
  type Item$1 = {
644
585
  href?: string;
@@ -678,7 +619,6 @@ type Props$C = {
678
619
 
679
620
  declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
680
621
 
681
- type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
682
622
  type IconProps = {
683
623
  /**
684
624
  * Defines the style of the bullet point in the list.
@@ -687,11 +627,11 @@ type IconProps = {
687
627
  /**
688
628
  * Icon to display as bullet.
689
629
  */
690
- icon: string | SVG$d;
630
+ icon: string | SVG;
691
631
  /**
692
632
  * Text to be shown in the list.
693
633
  */
694
- children: React.ReactNode;
634
+ children: ReactNode;
695
635
  };
696
636
  type OtherProps = {
697
637
  /**
@@ -705,7 +645,7 @@ type OtherProps = {
705
645
  /**
706
646
  * Text to be shown in the list.
707
647
  */
708
- children: React.ReactNode;
648
+ children: ReactNode;
709
649
  };
710
650
  type Props$B = IconProps | OtherProps;
711
651
 
@@ -713,7 +653,7 @@ type BulletedListItemPropsType = {
713
653
  /**
714
654
  * Text to be shown in the list.
715
655
  */
716
- children?: React.ReactNode;
656
+ children?: ReactNode;
717
657
  };
718
658
 
719
659
  declare const DxcBulletedList: {
@@ -721,17 +661,11 @@ declare const DxcBulletedList: {
721
661
  Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
722
662
  };
723
663
 
724
- type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
725
- type Margin$k = {
726
- top?: Space$n;
727
- bottom?: Space$n;
728
- left?: Space$n;
729
- right?: Space$n;
730
- };
731
- type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
664
+ type Semantic = "default" | "error" | "warning" | "success" | "info";
665
+ type Mode$1 = "primary" | "secondary" | "tertiary";
732
666
  type Size$3 = {
733
667
  /**
734
- * Height of the component.
668
+ * Height of the button.
735
669
  */
736
670
  height?: "small" | "medium" | "large";
737
671
  width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
@@ -744,11 +678,11 @@ type Props$A = {
744
678
  /**
745
679
  * The available button modes.
746
680
  */
747
- mode?: "primary" | "secondary" | "tertiary";
681
+ mode?: Mode$1;
748
682
  /**
749
683
  * Specifies the semantic meaning of the buttons, which determines its color.
750
684
  */
751
- semantic?: "default" | "error" | "warning" | "success" | "info";
685
+ semantic?: Semantic;
752
686
  /**
753
687
  * If true, the component will be disabled.
754
688
  */
@@ -768,7 +702,7 @@ type Props$A = {
768
702
  /**
769
703
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
770
704
  */
771
- icon?: string | SVG$c;
705
+ icon?: string | SVG;
772
706
  /**
773
707
  * This function will be called when the user clicks the button.
774
708
  */
@@ -777,7 +711,7 @@ type Props$A = {
777
711
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
778
712
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
779
713
  */
780
- margin?: Space$n | Margin$k;
714
+ margin?: Space$1 | Margin;
781
715
  /**
782
716
  * Size of the component.
783
717
  */
@@ -788,14 +722,13 @@ type Props$A = {
788
722
  tabIndex?: number;
789
723
  };
790
724
 
791
- declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
725
+ declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$A) => JSX.Element;
792
726
 
793
- type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
794
727
  type Size$2 = {
795
- top?: Space$m;
796
- bottom?: Space$m;
797
- left?: Space$m;
798
- right?: Space$m;
728
+ top?: Space$1;
729
+ bottom?: Space$1;
730
+ left?: Space$1;
731
+ right?: Space$1;
799
732
  };
800
733
  type Props$z = {
801
734
  /**
@@ -813,7 +746,7 @@ type Props$z = {
813
746
  * component. You can pass an object with 'top', 'bottom', 'left'
814
747
  * and 'right' properties in order to specify different padding sizes.
815
748
  */
816
- imagePadding?: Space$m | Size$2;
749
+ imagePadding?: Space$1 | Size$2;
817
750
  /**
818
751
  * Whether the image should appear in relation to the content.
819
752
  */
@@ -836,7 +769,7 @@ type Props$z = {
836
769
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
837
770
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
838
771
  */
839
- margin?: Space$m | Size$2;
772
+ margin?: Space$1 | Size$2;
840
773
  /**
841
774
  * Value of the tabindex attribute applied when the component is clickable.
842
775
  */
@@ -848,33 +781,29 @@ type Props$z = {
848
781
  /**
849
782
  * Custom content that will be placed inside the component.
850
783
  */
851
- children?: React.ReactNode;
784
+ children?: ReactNode;
852
785
  };
853
786
 
854
- declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
787
+ declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => react_jsx_runtime.JSX.Element;
855
788
 
856
- type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
857
- type Margin$j = {
858
- top?: Space$l;
859
- bottom?: Space$l;
860
- left?: Space$l;
861
- right?: Space$l;
862
- };
863
789
  type Props$y = {
864
790
  /**
865
- * Initial state of the checkbox, only when it is uncontrolled.
791
+ * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
866
792
  */
867
- defaultChecked?: boolean;
793
+ ariaLabel?: string;
868
794
  /**
869
795
  * If true, the component is checked. If undefined the component will be
870
796
  * uncontrolled and the value will be managed internally by the component.
871
797
  */
872
798
  checked?: boolean;
873
799
  /**
874
- * Will be passed to the value attribute of the html input element.
875
- * When inside a form, this value will be only submitted if the checkbox is checked.
800
+ * Initial state of the checkbox, only when it is uncontrolled.
876
801
  */
877
- value?: string;
802
+ defaultChecked?: boolean;
803
+ /**
804
+ * If true, the component will be disabled.
805
+ */
806
+ disabled?: boolean;
878
807
  /**
879
808
  * Text to be placed next to the checkbox.
880
809
  */
@@ -883,14 +812,22 @@ type Props$y = {
883
812
  * Whether the label should appear after or before the checkbox.
884
813
  */
885
814
  labelPosition?: "before" | "after";
815
+ /**
816
+ * Size of the margin to be applied to the component
817
+ * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
818
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
819
+ * in order to specify different margin sizes.
820
+ */
821
+ margin?: Space$1 | Margin;
886
822
  /**
887
823
  * Name attribute of the input element.
888
824
  */
889
825
  name?: string;
890
826
  /**
891
- * If true, the component will be disabled.
827
+ * This function will be called when the user clicks the checkbox.
828
+ * The new value will be passed as a parameter.
892
829
  */
893
- disabled?: boolean;
830
+ onChange?: (value: boolean) => void;
894
831
  /**
895
832
  * If true, the component will display '(Optional)' next to the label.
896
833
  */
@@ -899,18 +836,6 @@ type Props$y = {
899
836
  * If true, the component will not be mutable, meaning the user can not edit the control.
900
837
  */
901
838
  readOnly?: boolean;
902
- /**
903
- * This function will be called when the user clicks the checkbox.
904
- * The new value will be passed as a parameter.
905
- */
906
- onChange?: (value: boolean) => void;
907
- /**
908
- * Size of the margin to be applied to the component
909
- * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
910
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
911
- * in order to specify different margin sizes.
912
- */
913
- margin?: Space$l | Margin$j;
914
839
  /**
915
840
  * Size of the component.
916
841
  */
@@ -919,18 +844,15 @@ type Props$y = {
919
844
  * Value of the tabindex.
920
845
  */
921
846
  tabIndex?: number;
847
+ /**
848
+ * Will be passed to the value attribute of the html input element.
849
+ * When inside a form, this value will be only submitted if the checkbox is checked.
850
+ */
851
+ value?: string;
922
852
  };
923
853
 
924
854
  declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
925
855
 
926
- type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
927
- type Margin$i = {
928
- top?: Space$k;
929
- bottom?: Space$k;
930
- left?: Space$k;
931
- right?: Space$k;
932
- };
933
- type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
934
856
  type Props$x = {
935
857
  /**
936
858
  * Text to be placed on the chip.
@@ -939,11 +861,11 @@ type Props$x = {
939
861
  /**
940
862
  * Element or path used as icon to be placed after the chip label.
941
863
  */
942
- suffixIcon?: string | SVG$b;
864
+ suffixIcon?: string | SVG;
943
865
  /**
944
866
  * Element or path used as icon to be placed before the chip label.
945
867
  */
946
- prefixIcon?: string | SVG$b;
868
+ prefixIcon?: string | SVG;
947
869
  /**
948
870
  * This function will be called when the suffix is clicked.
949
871
  */
@@ -960,23 +882,22 @@ type Props$x = {
960
882
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
961
883
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
962
884
  */
963
- margin?: Space$k | Margin$i;
885
+ margin?: Space$1 | Margin;
964
886
  /**
965
887
  * Value of the tabindex attribute.
966
888
  */
967
889
  tabIndex?: number;
968
890
  };
969
891
 
970
- declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
892
+ declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element;
971
893
 
972
- type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
973
- type Space$j = SpacingValues | {
974
- top?: SpacingValues;
975
- right?: SpacingValues;
976
- bottom?: SpacingValues;
977
- left?: SpacingValues;
978
- };
979
- type Inset$1 = {
894
+ type Space = {
895
+ top?: string;
896
+ right?: string;
897
+ bottom?: string;
898
+ left?: string;
899
+ };
900
+ type Inset = {
980
901
  top?: string;
981
902
  right?: string;
982
903
  bottom?: string;
@@ -985,7 +906,7 @@ type Inset$1 = {
985
906
  type Background = {
986
907
  attachment?: string;
987
908
  clip?: string;
988
- color?: CoreColorTokensType;
909
+ color?: string;
989
910
  image?: string;
990
911
  origin?: string;
991
912
  position?: string;
@@ -994,8 +915,8 @@ type Background = {
994
915
  };
995
916
  type BorderProperties = {
996
917
  width?: string;
997
- style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset";
998
- color?: CoreColorTokensType;
918
+ style?: string;
919
+ color?: string;
999
920
  };
1000
921
  type Border = BorderProperties | {
1001
922
  top?: BorderProperties;
@@ -1043,7 +964,7 @@ type Props$w = {
1043
964
  /**
1044
965
  * Custom content inside the container.
1045
966
  */
1046
- children: React.ReactNode;
967
+ children?: ReactNode;
1047
968
  /**
1048
969
  * Sets the display CSS property.
1049
970
  * The set of values is limited to the ones related to the outer display type.
@@ -1069,19 +990,11 @@ type Props$w = {
1069
990
  * Based on the CSS property inset this prop is a shorthand that corresponds
1070
991
  * to the top, right, bottom, and/or left properties.
1071
992
  */
1072
- inset?: Inset$1;
993
+ inset?: Inset;
1073
994
  /**
1074
- * Size of the margin to be applied to the component.
1075
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1076
- * in order to specify different margin sizes.
1077
- */
1078
- margin?: Space$j;
1079
- /**
1080
- * Sets the max-height CSS property.
1081
- *
1082
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
995
+ * Size of the margin to be applied to the container.
1083
996
  */
1084
- maxWidth?: string;
997
+ margin?: string | Space;
1085
998
  /**
1086
999
  * Sets the max-width CSS property.
1087
1000
  *
@@ -1089,17 +1002,23 @@ type Props$w = {
1089
1002
  */
1090
1003
  maxHeight?: string;
1091
1004
  /**
1092
- * Sets the min-height CSS property.
1005
+ * Sets the max-height CSS property.
1093
1006
  *
1094
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
1007
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
1095
1008
  */
1096
- minWidth?: string;
1009
+ maxWidth?: string;
1097
1010
  /**
1098
1011
  * Sets the min-width CSS property.
1099
1012
  *
1100
1013
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
1101
1014
  */
1102
1015
  minHeight?: string;
1016
+ /**
1017
+ * Sets the min-height CSS property.
1018
+ *
1019
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
1020
+ */
1021
+ minWidth?: string;
1103
1022
  /**
1104
1023
  * Based on the CSS property outline allows configuring all properties related
1105
1024
  * to the outline of a container.
@@ -1112,11 +1031,9 @@ type Props$w = {
1112
1031
  */
1113
1032
  overflow?: Overflow;
1114
1033
  /**
1115
- * Size of the margin to be applied to the component.
1116
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1117
- * in order to specify different margin sizes.
1034
+ * Size of the padding to be applied to the container.
1118
1035
  */
1119
- padding?: Space$j;
1036
+ padding?: string | Space;
1120
1037
  /**
1121
1038
  * Sets the position CSS property.
1122
1039
  *
@@ -1139,10 +1056,9 @@ type Props$w = {
1139
1056
 
1140
1057
  declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
1141
1058
 
1142
- type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
1143
1059
  type CommonItemProps = {
1144
- badge?: React.ReactElement;
1145
- icon?: string | SVG$a;
1060
+ badge?: ReactElement;
1061
+ icon?: string | SVG;
1146
1062
  label: string;
1147
1063
  };
1148
1064
  type Item = CommonItemProps & {
@@ -1164,21 +1080,13 @@ type Props$v = {
1164
1080
  items: (Item | GroupItem)[] | Section[];
1165
1081
  };
1166
1082
 
1167
- declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
1083
+ declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
1168
1084
 
1169
- type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1170
- type Margin$h = {
1171
- top?: Space$i;
1172
- bottom?: Space$i;
1173
- left?: Space$i;
1174
- right?: Space$i;
1175
- };
1176
- type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
1177
1085
  type ActionCellsPropsType = {
1178
1086
  actions: ActionsPropsType;
1179
1087
  };
1180
1088
  type ActionsPropsType = Array<{
1181
- icon: string | SVG$9;
1089
+ icon: string | SVG;
1182
1090
  title: string;
1183
1091
  onClick: () => void;
1184
1092
  disabled?: boolean;
@@ -1190,19 +1098,19 @@ type ActionsPropsType = Array<{
1190
1098
  onClick: (value?: string) => void;
1191
1099
  disabled?: boolean;
1192
1100
  tabIndex?: number;
1193
- options: Option$1[];
1101
+ options: Option$2[];
1194
1102
  }>;
1195
1103
  type Props$u = {
1196
1104
  /**
1197
1105
  * The center section of the table. Can be used to render custom
1198
1106
  * content in this area.
1199
1107
  */
1200
- children: React.ReactNode;
1108
+ children: ReactNode;
1201
1109
  /**
1202
1110
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1203
1111
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1204
1112
  */
1205
- margin?: Space$i | Margin$h;
1113
+ margin?: Space$1 | Margin;
1206
1114
  /**
1207
1115
  * Determines the visual style and layout
1208
1116
  * - "default": Default table size.
@@ -1231,7 +1139,7 @@ type GridColumn = {
1231
1139
  /**
1232
1140
  * Custom criteria for sorting the column.
1233
1141
  */
1234
- sortFn?: (_a: ReactNode, _b: ReactNode) => number;
1142
+ sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
1235
1143
  /**
1236
1144
  * Whether the column is draggable or not.
1237
1145
  */
@@ -1261,6 +1169,7 @@ type HierarchyGridRow = GridRow & {
1261
1169
  type ExpandableGridRow = GridRow & {
1262
1170
  expandedContent?: ReactNode;
1263
1171
  expandedContentHeight?: number;
1172
+ contentIsExpanded?: boolean;
1264
1173
  };
1265
1174
  type ExpandableRows = {
1266
1175
  rows: ExpandableGridRow[];
@@ -1337,6 +1246,10 @@ type PaginatedProps$1 = {
1337
1246
  * Function called whenever the current page is changed.
1338
1247
  */
1339
1248
  onPageChange?: (_page: number) => void;
1249
+ /**
1250
+ * Default page in which the datagrid is rendered
1251
+ */
1252
+ defaultPage?: number;
1340
1253
  };
1341
1254
  type NonPaginatedProps$1 = {
1342
1255
  /**
@@ -1368,6 +1281,10 @@ type NonPaginatedProps$1 = {
1368
1281
  * Function called whenever the current page is changed.
1369
1282
  */
1370
1283
  onPageChange?: never;
1284
+ /**
1285
+ * Default page in which the datagrid is rendered
1286
+ */
1287
+ defaultPage?: never;
1371
1288
  };
1372
1289
  type CommonProps$6 = {
1373
1290
  columns: GridColumn[];
@@ -1395,17 +1312,10 @@ type BasicGridProps = {
1395
1312
  type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
1396
1313
 
1397
1314
  declare const DxcDataGrid: {
1398
- ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
1315
+ ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
1399
1316
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
1400
1317
  };
1401
1318
 
1402
- type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1403
- type Margin$g = {
1404
- top?: Space$h;
1405
- bottom?: Space$h;
1406
- left?: Space$h;
1407
- right?: Space$h;
1408
- };
1409
1319
  type Props$s = {
1410
1320
  /**
1411
1321
  * Initial value of the input element, only when it is uncontrolled.
@@ -1497,7 +1407,7 @@ type Props$s = {
1497
1407
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1498
1408
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1499
1409
  */
1500
- margin?: Space$h | Margin$g;
1410
+ margin?: Space$1 | Margin;
1501
1411
  /**
1502
1412
  * Size of the component.
1503
1413
  */
@@ -1506,6 +1416,10 @@ type Props$s = {
1506
1416
  * Value of the tabindex attribute.
1507
1417
  */
1508
1418
  tabIndex?: number;
1419
+ /**
1420
+ * Specifies a string to be used as the name for the date input element when no `label` is provided.
1421
+ */
1422
+ ariaLabel?: string;
1509
1423
  };
1510
1424
 
1511
1425
  declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
@@ -1536,7 +1450,7 @@ type Props$r = {
1536
1450
  * can lead to unpredictable behaviour for keyboard users, affecting
1537
1451
  * the order of focus and focus locking within the dialog.
1538
1452
  */
1539
- children: React.ReactNode;
1453
+ children: ReactNode;
1540
1454
  /**
1541
1455
  * Value of the tabindex applied to the close button.
1542
1456
  * Note that values greater than 0 are strongly discouraged. It can
@@ -1545,7 +1459,7 @@ type Props$r = {
1545
1459
  tabIndex?: number;
1546
1460
  };
1547
1461
 
1548
- declare const DxcDialog: ({ closable, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
1462
+ declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
1549
1463
 
1550
1464
  type Props$q = {
1551
1465
  /**
@@ -1568,17 +1482,10 @@ type Props$q = {
1568
1482
  decorative?: boolean;
1569
1483
  };
1570
1484
 
1571
- declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
1485
+ declare function DxcDivider({ color, decorative, orientation, weight, }: Props$q): react_jsx_runtime.JSX.Element;
1572
1486
 
1573
- declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
1487
+ declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element;
1574
1488
 
1575
- type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1576
- type Margin$f = {
1577
- top?: Space$g;
1578
- bottom?: Space$g;
1579
- left?: Space$g;
1580
- right?: Space$g;
1581
- };
1582
1489
  type FileData = {
1583
1490
  /**
1584
1491
  * Selected file.
@@ -1644,7 +1551,7 @@ type CommonProps$5 = {
1644
1551
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1645
1552
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1646
1553
  */
1647
- margin?: Space$g | Margin$f;
1554
+ margin?: Space$1 | Margin;
1648
1555
  /**
1649
1556
  * Value of the tabindex attribute.
1650
1557
  */
@@ -1683,12 +1590,12 @@ type Props$p = DropModeProps | FileModeProps;
1683
1590
  declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
1684
1591
 
1685
1592
  type Gap$1 = {
1686
- rowGap: CoreSpacingTokensType;
1687
- columnGap?: CoreSpacingTokensType;
1593
+ rowGap: string;
1594
+ columnGap?: string;
1688
1595
  } | {
1689
- rowGap?: CoreSpacingTokensType;
1690
- columnGap: CoreSpacingTokensType;
1691
- } | CoreSpacingTokensType;
1596
+ rowGap?: string;
1597
+ columnGap: string;
1598
+ } | string;
1692
1599
  type CommonProps$4 = {
1693
1600
  /**
1694
1601
  * Sets the justify-content CSS property.
@@ -1765,52 +1672,54 @@ type Props$o = CommonProps$4 & {
1765
1672
  /**
1766
1673
  * Custom content inside the flex container.
1767
1674
  */
1768
- children: React.ReactNode;
1675
+ children: ReactNode;
1769
1676
  };
1770
1677
 
1771
1678
  declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
1772
1679
 
1773
- type Gap = {
1774
- rowGap: CoreSpacingTokensType;
1775
- columnGap?: CoreSpacingTokensType;
1680
+ type Gap = string | {
1681
+ columnGap?: string;
1682
+ rowGap: string;
1776
1683
  } | {
1777
- rowGap?: CoreSpacingTokensType;
1778
- columnGap: CoreSpacingTokensType;
1779
- } | CoreSpacingTokensType;
1684
+ columnGap: string;
1685
+ rowGap?: string;
1686
+ };
1780
1687
  type GridCell = {
1781
- start: number | string;
1782
1688
  end: number | string;
1689
+ start: number | string;
1783
1690
  };
1784
- type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
1785
- type PlaceContentValues = "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline";
1786
- type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
1691
+ type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stretch";
1692
+ type PlaceContentValues = "baseline" | "center" | "end" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch";
1693
+ type PlaceItemsValues = "baseline" | "center" | "end" | "normal" | "start" | "stretch";
1787
1694
  type PlaceObject<Type, Suffix extends string> = {
1788
1695
  [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
1789
1696
  };
1790
1697
  type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
1791
- justify?: PlaceValues;
1792
1698
  align: PlaceValues;
1699
+ justify?: PlaceValues;
1793
1700
  }, Element> | PlaceObject<{
1794
- justify: PlaceValues;
1795
1701
  align?: PlaceValues;
1702
+ justify: PlaceValues;
1796
1703
  }, Element> | PlaceValues;
1797
1704
  type GridItemProps = {
1798
1705
  /**
1799
1706
  * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
1800
1707
  */
1801
1708
  areaName?: string;
1709
+ /**
1710
+ * Sets a custom HTML tag.
1711
+ */
1712
+ as?: keyof HTMLElementTagNameMap;
1713
+ /**
1714
+ * Custom content inside the grid container.
1715
+ */
1716
+ children: ReactNode;
1802
1717
  /**
1803
1718
  * Sets the grid-column CSS property.
1804
1719
  *
1805
1720
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
1806
1721
  */
1807
1722
  column?: number | string | GridCell;
1808
- /**
1809
- * Sets the grid-row CSS property.
1810
- *
1811
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
1812
- */
1813
- row?: number | string | GridCell;
1814
1723
  /**
1815
1724
  * Sets the place-self CSS property.
1816
1725
  *
@@ -1818,13 +1727,11 @@ type GridItemProps = {
1818
1727
  */
1819
1728
  placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
1820
1729
  /**
1821
- * Sets a custom HTML tag.
1822
- */
1823
- as?: keyof HTMLElementTagNameMap;
1824
- /**
1825
- * Custom content inside the grid container.
1730
+ * Sets the grid-row CSS property.
1731
+ *
1732
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
1826
1733
  */
1827
- children: React.ReactNode;
1734
+ row?: number | string | GridCell;
1828
1735
  };
1829
1736
  type Props$n = GridItemProps & {
1830
1737
  /**
@@ -1850,7 +1757,7 @@ type Props$n = GridItemProps & {
1850
1757
  *
1851
1758
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
1852
1759
  */
1853
- gap?: CoreSpacingTokensType | Gap;
1760
+ gap?: Gap;
1854
1761
  /**
1855
1762
  * Sets the place-content CSS property.
1856
1763
  *
@@ -1888,20 +1795,13 @@ declare const DxcGrid: {
1888
1795
  Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
1889
1796
  };
1890
1797
 
1891
- type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1892
- type Margin$e = {
1893
- top?: Space$f;
1894
- bottom?: Space$f;
1895
- left?: Space$f;
1896
- right?: Space$f;
1897
- };
1898
1798
  type Props$m = {
1899
1799
  /**
1900
1800
  * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
1901
1801
  * The html tag of the heading will be the one specified in the 'as' prop.
1902
1802
  * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
1903
1803
  */
1904
- level?: 1 | 2 | 3 | 4 | 5;
1804
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
1905
1805
  /**
1906
1806
  * Heading text.
1907
1807
  */
@@ -1909,19 +1809,19 @@ type Props$m = {
1909
1809
  /**
1910
1810
  * Modifies the default weight of the heading.
1911
1811
  */
1912
- weight?: "light" | "normal" | "bold";
1812
+ weight?: "light" | "default" | "regular";
1913
1813
  /**
1914
1814
  * Specifies the HTML tag of the heading.
1915
1815
  */
1916
- as?: "h1" | "h2" | "h3" | "h4" | "h5";
1816
+ as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
1917
1817
  /**
1918
1818
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1919
1819
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1920
1820
  */
1921
- margin?: Space$f | Margin$e;
1821
+ margin?: Space$1 | Margin;
1922
1822
  };
1923
1823
 
1924
- declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
1824
+ declare function DxcHeading({ as, level, margin, text, weight }: Props$m): react_jsx_runtime.JSX.Element;
1925
1825
 
1926
1826
  type Props$l = {
1927
1827
  /**
@@ -1936,21 +1836,35 @@ type Props$l = {
1936
1836
  * which is required regardless of the presence of the caption or not.
1937
1837
  */
1938
1838
  caption?: string;
1839
+ /**
1840
+ * Sets the rendered height of the image.
1841
+ */
1842
+ height?: string;
1939
1843
  /**
1940
1844
  * If true, the image will be loaded only when it is visible on the screen (lazy loading).
1941
1845
  * Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
1942
1846
  */
1943
1847
  lazyLoading?: boolean;
1944
1848
  /**
1945
- * URL of the image. This prop is required and must be valid.
1849
+ * Sets the object-fit CSS property.
1850
+ *
1851
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
1946
1852
  */
1947
- src: string;
1853
+ objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
1948
1854
  /**
1949
- * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
1855
+ * Sets the object-position CSS property.
1950
1856
  *
1951
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
1857
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
1952
1858
  */
1953
- srcSet?: string;
1859
+ objectPosition?: string;
1860
+ /**
1861
+ * This function will be called when the image fails to load.
1862
+ */
1863
+ onError?: ReactEventHandler<HTMLImageElement>;
1864
+ /**
1865
+ * This function will be called when the image is loaded.
1866
+ */
1867
+ onLoad?: ReactEventHandler<HTMLImageElement>;
1954
1868
  /**
1955
1869
  * One or more strings separated by commas, indicating a set of source sizes.
1956
1870
  * If the srcSet attribute is absent or contains no values with a width descriptor,
@@ -1959,83 +1873,61 @@ type Props$l = {
1959
1873
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
1960
1874
  */
1961
1875
  sizes?: string;
1876
+ /**
1877
+ * URL of the image. This prop is required and must be valid.
1878
+ */
1879
+ src: string;
1880
+ /**
1881
+ * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
1882
+ *
1883
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
1884
+ */
1885
+ srcSet?: string;
1962
1886
  /**
1963
1887
  * Sets the rendered width of the image.
1964
1888
  */
1965
1889
  width?: string;
1890
+ };
1891
+
1892
+ declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$l): react_jsx_runtime.JSX.Element;
1893
+
1894
+ type Props$k = {
1966
1895
  /**
1967
- * Sets the rendered height of the image.
1896
+ * Applies the spacing scale to the bottom side.
1968
1897
  */
1969
- height?: string;
1898
+ bottom?: string;
1970
1899
  /**
1971
- * Sets the object-fit CSS property.
1972
- *
1973
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
1900
+ * Custom content inside the inset.
1974
1901
  */
1975
- objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
1976
- /**
1977
- * Sets the object-position CSS property.
1978
- *
1979
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
1980
- */
1981
- objectPosition?: string;
1982
- /**
1983
- * This function will be called when the image is loaded.
1984
- */
1985
- onLoad?: React.ReactEventHandler<HTMLImageElement>;
1986
- /**
1987
- * This function will be called when the image fails to load.
1988
- */
1989
- onError?: React.ReactEventHandler<HTMLImageElement>;
1990
- };
1991
-
1992
- declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l): react_jsx_runtime.JSX.Element;
1993
-
1994
- type Props$k = {
1995
- /**
1996
- * Applies the spacing scale to all sides.
1997
- */
1998
- space?: CoreSpacingTokensType;
1902
+ children: ReactNode;
1999
1903
  /**
2000
1904
  * Applies the spacing scale to the left and right sides.
2001
1905
  */
2002
- horizontal?: CoreSpacingTokensType;
1906
+ horizontal?: string;
2003
1907
  /**
2004
- * Applies the spacing scale to the top and bottom sides.
2005
- */
2006
- vertical?: CoreSpacingTokensType;
2007
- /**
2008
- * Applies the spacing scale to the top side.
1908
+ * Applies the spacing scale to the left side.
2009
1909
  */
2010
- top?: CoreSpacingTokensType;
1910
+ left?: string;
2011
1911
  /**
2012
1912
  * Applies the spacing scale to the right side.
2013
1913
  */
2014
- right?: CoreSpacingTokensType;
1914
+ right?: string;
2015
1915
  /**
2016
- * Applies the spacing scale to the bottom side.
1916
+ * Applies the spacing scale to all sides.
2017
1917
  */
2018
- bottom?: CoreSpacingTokensType;
1918
+ space?: string;
2019
1919
  /**
2020
- * Applies the spacing scale to the left side.
1920
+ * Applies the spacing scale to the top side.
2021
1921
  */
2022
- left?: CoreSpacingTokensType;
1922
+ top?: string;
2023
1923
  /**
2024
- * Custom content inside the inset.
1924
+ * Applies the spacing scale to the top and bottom sides.
2025
1925
  */
2026
- children: React.ReactNode;
1926
+ vertical?: string;
2027
1927
  };
2028
1928
 
2029
- declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
1929
+ declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$k): react_jsx_runtime.JSX.Element;
2030
1930
 
2031
- type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2032
- type Margin$d = {
2033
- top?: Space$e;
2034
- bottom?: Space$e;
2035
- left?: Space$e;
2036
- right?: Space$e;
2037
- };
2038
- type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2039
1931
  type LinkProps = {
2040
1932
  /**
2041
1933
  * If true, the link is disabled.
@@ -2048,7 +1940,7 @@ type LinkProps = {
2048
1940
  /**
2049
1941
  * Material Symbol name or SVG element as the icon that will be placed next to the link text.
2050
1942
  */
2051
- icon?: string | SVG$8;
1943
+ icon?: string | SVG;
2052
1944
  /**
2053
1945
  * Indicates the position of the icon in the component.
2054
1946
  */
@@ -2074,7 +1966,7 @@ type LinkProps = {
2074
1966
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2075
1967
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2076
1968
  */
2077
- margin?: Space$e | Margin$d;
1969
+ margin?: Space$1 | Margin;
2078
1970
  /**
2079
1971
  * Value of the tabindex.
2080
1972
  */
@@ -2083,7 +1975,6 @@ type LinkProps = {
2083
1975
 
2084
1976
  declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
2085
1977
 
2086
- type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2087
1978
  type TabProps$1 = {
2088
1979
  /**
2089
1980
  * Whether the tab is active or not.
@@ -2100,7 +1991,7 @@ type TabProps$1 = {
2100
1991
  /**
2101
1992
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
2102
1993
  */
2103
- icon?: string | SVG$7;
1994
+ icon?: string | SVG;
2104
1995
  /**
2105
1996
  * If the value is 'true', an empty badge will appear.
2106
1997
  * If it is 'false', no badge will appear.
@@ -2122,7 +2013,7 @@ type Props$j = {
2122
2013
  /**
2123
2014
  * Contains one or more DxcNavTabs.Tab.
2124
2015
  */
2125
- children: React.ReactNode;
2016
+ children: ReactNode;
2126
2017
  /**
2127
2018
  * Value of the tabindex attribute applied to each tab.
2128
2019
  */
@@ -2134,13 +2025,6 @@ declare const DxcNavTabs: {
2134
2025
  Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
2135
2026
  };
2136
2027
 
2137
- type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2138
- type Margin$c = {
2139
- top?: Space$d;
2140
- bottom?: Space$d;
2141
- left?: Space$d;
2142
- right?: Space$d;
2143
- };
2144
2028
  type Props$i = {
2145
2029
  /**
2146
2030
  * Text to be placed above the number.
@@ -2249,7 +2133,7 @@ type Props$i = {
2249
2133
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2250
2134
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2251
2135
  */
2252
- margin?: Space$d | Margin$c;
2136
+ margin?: Space$1 | Margin;
2253
2137
  /**
2254
2138
  * Size of the component.
2255
2139
  */
@@ -2258,6 +2142,14 @@ type Props$i = {
2258
2142
  * Value of the tabindex attribute.
2259
2143
  */
2260
2144
  tabIndex?: number;
2145
+ /**
2146
+ * Specifies a string to be used as the name for the number input element when no `label` is provided.
2147
+ */
2148
+ ariaLabel?: string;
2149
+ /**
2150
+ * Decides whether the number input has actions to increase or decrease the value, following the defined step.
2151
+ */
2152
+ showControls?: boolean;
2261
2153
  };
2262
2154
 
2263
2155
  declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2303,16 +2195,9 @@ type Props$h = {
2303
2195
  declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
2304
2196
 
2305
2197
  declare function DxcParagraph({ children }: {
2306
- children: React.ReactNode;
2198
+ children: ReactNode;
2307
2199
  }): react_jsx_runtime.JSX.Element;
2308
2200
 
2309
- type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2310
- type Margin$b = {
2311
- top?: Space$c;
2312
- bottom?: Space$c;
2313
- left?: Space$c;
2314
- right?: Space$c;
2315
- };
2316
2201
  type Props$g = {
2317
2202
  /**
2318
2203
  * Text to be placed above the password input.
@@ -2402,7 +2287,7 @@ type Props$g = {
2402
2287
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2403
2288
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2404
2289
  */
2405
- margin?: Space$c | Margin$b;
2290
+ margin?: Space$1 | Margin;
2406
2291
  /**
2407
2292
  * Size of the component.
2408
2293
  */
@@ -2411,16 +2296,19 @@ type Props$g = {
2411
2296
  * Value of the tabindex attribute.
2412
2297
  */
2413
2298
  tabIndex?: number;
2299
+ /**
2300
+ * Specifies a string to be used as the name for the password input element when no `label` is provided.
2301
+ */
2302
+ ariaLabel?: string;
2414
2303
  };
2415
2304
 
2416
2305
  declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
2417
2306
 
2418
- type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2419
2307
  type Size$1 = {
2420
- top?: Space$b;
2421
- bottom?: Space$b;
2422
- left?: Space$b;
2423
- right?: Space$b;
2308
+ top?: Space$1;
2309
+ bottom?: Space$1;
2310
+ left?: Space$1;
2311
+ right?: Space$1;
2424
2312
  };
2425
2313
  type Props$f = {
2426
2314
  /**
@@ -2449,10 +2337,14 @@ type Props$f = {
2449
2337
  * an object with 'top', 'bottom', 'left' and 'right' properties
2450
2338
  * in order to specify different margin sizes.
2451
2339
  */
2452
- margin?: Space$b | Size$1;
2340
+ margin?: Space$1 | Size$1;
2341
+ /**
2342
+ * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
2343
+ */
2344
+ ariaLabel?: string;
2453
2345
  };
2454
2346
 
2455
- declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
2347
+ declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
2456
2348
 
2457
2349
  type Link = {
2458
2350
  /**
@@ -2475,9 +2367,9 @@ type Props$e = {
2475
2367
  links: Link[];
2476
2368
  };
2477
2369
 
2478
- declare const DxcQuickNav: ({ title, links }: Props$e) => JSX.Element;
2370
+ declare function DxcQuickNav({ links, title }: Props$e): react_jsx_runtime.JSX.Element;
2479
2371
 
2480
- type RadioOption = {
2372
+ type Option$1 = {
2481
2373
  /**
2482
2374
  * Label of the option placed next to the radio input.
2483
2375
  */
@@ -2495,26 +2387,39 @@ type RadioOption = {
2495
2387
  };
2496
2388
  type RadioGroupProps = {
2497
2389
  /**
2498
- * Text to be placed above the radio group.
2390
+ * Specifies a string to be used as the name for the radio group when no `label` is provided.
2499
2391
  */
2500
- label?: string;
2392
+ ariaLabel?: string;
2501
2393
  /**
2502
- * Name attribute of the input element. This attribute will allow users
2503
- * to find the component's value during the submit event.
2394
+ * Initial value of the radio group, only when it is uncontrolled.
2504
2395
  */
2505
- name?: string;
2396
+ defaultValue?: string;
2397
+ /**
2398
+ * If true, the component will be disabled.
2399
+ */
2400
+ disabled?: boolean;
2401
+ /**
2402
+ * If it is a defined value and also a truthy string, the component will
2403
+ * change its appearance, showing the error below the radio group. If the
2404
+ * defined value is an empty string, it will reserve a space below the
2405
+ * component for a future error, but it would not change its look. In
2406
+ * case of being undefined or null, both the appearance and the space for
2407
+ * the error message would not be modified.
2408
+ */
2409
+ error?: string;
2506
2410
  /**
2507
2411
  * Helper text to be placed above the radio group.
2508
2412
  */
2509
2413
  helperText?: string;
2510
2414
  /**
2511
- * An array of objects representing the selectable options.
2415
+ * Text to be placed above the radio group.
2512
2416
  */
2513
- options: RadioOption[];
2417
+ label?: string;
2514
2418
  /**
2515
- * If true, the component will be disabled.
2419
+ * Name attribute of the input element. This attribute will allow users
2420
+ * to find the component's value during the submit event.
2516
2421
  */
2517
- disabled?: boolean;
2422
+ name?: string;
2518
2423
  /**
2519
2424
  * If true, the radio group will be optional, showing
2520
2425
  * (Optional) next to the label and adding a default last
@@ -2528,28 +2433,9 @@ type RadioGroupProps = {
2528
2433
  */
2529
2434
  optionalItemLabel?: string;
2530
2435
  /**
2531
- * If true, the component will not be mutable, meaning the user can not edit the control.
2532
- */
2533
- readOnly?: boolean;
2534
- /**
2535
- * Sets the orientation of the options within the radio group.
2536
- */
2537
- stacking?: "row" | "column";
2538
- /**
2539
- * Initial value of the radio group, only when it is uncontrolled.
2540
- */
2541
- defaultValue?: string;
2542
- /**
2543
- * Value of the radio group. If undefined, the component will be
2544
- * uncontrolled and the value will be managed internally by the
2545
- * component.
2546
- */
2547
- value?: string;
2548
- /**
2549
- * This function will be called when the user chooses an option. The new
2550
- * value will be passed to this function.
2436
+ * An array of objects representing the selectable options.
2551
2437
  */
2552
- onChange?: (value: string) => void;
2438
+ options: Option$1[];
2553
2439
  /**
2554
2440
  * This function will be called when the radio group loses the focus. An
2555
2441
  * object including the value and the error will be passed to this
@@ -2560,34 +2446,37 @@ type RadioGroupProps = {
2560
2446
  error?: string;
2561
2447
  }) => void;
2562
2448
  /**
2563
- * If it is a defined value and also a truthy string, the component will
2564
- * change its appearance, showing the error below the radio group. If the
2565
- * defined value is an empty string, it will reserve a space below the
2566
- * component for a future error, but it would not change its look. In
2567
- * case of being undefined or null, both the appearance and the space for
2568
- * the error message would not be modified.
2449
+ * This function will be called when the user chooses an option. The new
2450
+ * value will be passed to this function.
2569
2451
  */
2570
- error?: string;
2452
+ onChange?: (value: string) => void;
2453
+ /**
2454
+ * If true, the component will not be mutable, meaning the user can not edit the control.
2455
+ */
2456
+ readOnly?: boolean;
2457
+ /**
2458
+ * Sets the orientation of the options within the radio group.
2459
+ */
2460
+ stacking?: "row" | "column";
2571
2461
  /**
2572
2462
  * Value of the tabindex attribute.
2573
2463
  */
2574
2464
  tabIndex?: number;
2465
+ /**
2466
+ * Value of the radio group. If undefined, the component will be
2467
+ * uncontrolled and the value will be managed internally by the
2468
+ * component.
2469
+ */
2470
+ value?: string;
2575
2471
  };
2576
2472
 
2577
2473
  declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
2578
2474
 
2579
- type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2580
- type Margin$a = {
2581
- top?: Space$a;
2582
- bottom?: Space$a;
2583
- left?: Space$a;
2584
- right?: Space$a;
2585
- };
2586
2475
  type Column = {
2587
2476
  /**
2588
2477
  * Column display value.
2589
2478
  */
2590
- displayValue: React.ReactNode;
2479
+ displayValue: ReactNode;
2591
2480
  /**
2592
2481
  * Boolean value to indicate whether the column is sortable or not.
2593
2482
  */
@@ -2597,7 +2486,7 @@ type Cell = {
2597
2486
  /**
2598
2487
  * Value to be displayed in the cell.
2599
2488
  */
2600
- displayValue: React.ReactNode;
2489
+ displayValue: ReactNode;
2601
2490
  /**
2602
2491
  * Value to be used when sorting the table by that
2603
2492
  * column. If not indicated displayValue will be used for sorting.
@@ -2619,7 +2508,7 @@ type CommonProps$3 = {
2619
2508
  * Size of the margin to be applied to the component. You can pass an object with 'top',
2620
2509
  * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2621
2510
  */
2622
- margin?: Space$a | Margin$a;
2511
+ margin?: Space$1 | Margin;
2623
2512
  /**
2624
2513
  * Value of the tabindex attribute applied to the sortable icon.
2625
2514
  */
@@ -2681,14 +2570,6 @@ declare const DxcResultsetTable: {
2681
2570
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
2682
2571
  };
2683
2572
 
2684
- type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2685
- type Margin$9 = {
2686
- top?: Space$9;
2687
- bottom?: Space$9;
2688
- left?: Space$9;
2689
- right?: Space$9;
2690
- };
2691
- type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2692
2573
  type ListOptionGroupType = {
2693
2574
  /**
2694
2575
  * Label of the group to be shown in the select's listbox.
@@ -2706,7 +2587,7 @@ type ListOptionType = {
2706
2587
  * is the chosen one, take into account that the component's
2707
2588
  * color styling tokens will not be applied to the image.
2708
2589
  */
2709
- icon?: string | SVG$6;
2590
+ icon?: string | SVG;
2710
2591
  /**
2711
2592
  * Label of the option to be shown in the select's listbox.
2712
2593
  */
@@ -2772,7 +2653,7 @@ type CommonProps$2 = {
2772
2653
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2773
2654
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2774
2655
  */
2775
- margin?: Space$9 | Margin$9;
2656
+ margin?: Space$1 | Margin;
2776
2657
  /**
2777
2658
  * Size of the component.
2778
2659
  */
@@ -2781,6 +2662,10 @@ type CommonProps$2 = {
2781
2662
  * Value of the tabindex attribute.
2782
2663
  */
2783
2664
  tabIndex?: number;
2665
+ /**
2666
+ * Specifies a string to be used as the name for the select element when no `label` is provided.
2667
+ */
2668
+ ariaLabel?: string;
2784
2669
  };
2785
2670
  type SingleSelect = CommonProps$2 & {
2786
2671
  /**
@@ -2858,62 +2743,53 @@ type Props$c = SingleSelect | MultipleSelect;
2858
2743
 
2859
2744
  declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
2860
2745
 
2861
- type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2862
- type Margin$8 = {
2863
- top?: Space$8;
2864
- bottom?: Space$8;
2865
- left?: Space$8;
2866
- right?: Space$8;
2867
- };
2868
2746
  type Props$b = {
2869
2747
  /**
2870
- * Text to be placed above the slider.
2871
- */
2872
- label?: string;
2873
- /**
2874
- * Name attribute of the input element.
2748
+ * Specifies a string to be used as the name for the slider element when no `label` is provided.
2875
2749
  */
2876
- name?: string;
2750
+ ariaLabel?: string;
2877
2751
  /**
2878
2752
  * Initial value of the slider, only when it is uncontrolled.
2879
2753
  */
2880
2754
  defaultValue?: number;
2881
2755
  /**
2882
- * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
2756
+ * If true, the component will be disabled.
2883
2757
  */
2884
- value?: number;
2758
+ disabled?: boolean;
2885
2759
  /**
2886
2760
  * Helper text to be placed above the slider.
2887
2761
  */
2888
2762
  helperText?: string;
2889
2763
  /**
2890
- * The minimum value available for selection.
2764
+ * Text to be placed above the slider.
2891
2765
  */
2892
- minValue?: number;
2766
+ label?: string;
2893
2767
  /**
2894
- * The maximum value available for selection.
2768
+ * This function will be used to format the labels displayed next to the slider.
2769
+ * The value will be passed as parameter and the function must return the formatted value.
2895
2770
  */
2896
- maxValue?: number;
2771
+ labelFormatCallback?: (value: number) => string;
2897
2772
  /**
2898
- * The step interval between values available for selection.
2773
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2774
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2899
2775
  */
2900
- step?: number;
2776
+ margin?: Space$1 | Margin;
2901
2777
  /**
2902
- * Whether the min/max value labels should be displayed next to the slider
2778
+ * Whether the marks between each step should be shown or not.
2903
2779
  */
2904
- showLimitsValues?: boolean;
2780
+ marks?: boolean;
2905
2781
  /**
2906
- * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
2782
+ * The maximum value available for selection.
2907
2783
  */
2908
- showInput?: boolean;
2784
+ maxValue?: number;
2909
2785
  /**
2910
- * If true, the component will be disabled.
2786
+ * The minimum value available for selection.
2911
2787
  */
2912
- disabled?: boolean;
2788
+ minValue?: number;
2913
2789
  /**
2914
- * Whether the marks between each step should be shown or not.
2790
+ * Name attribute of the input element.
2915
2791
  */
2916
- marks?: boolean;
2792
+ name?: string;
2917
2793
  /**
2918
2794
  * This function will be called when the slider changes its value, as it's being dragged.
2919
2795
  * The new value will be passed as a parameter when this function is executed.
@@ -2925,56 +2801,64 @@ type Props$b = {
2925
2801
  */
2926
2802
  onDragEnd?: (value: number) => void;
2927
2803
  /**
2928
- * This function will be used to format the labels displayed next to the slider.
2929
- * The value will be passed as parameter and the function must return the formatted value.
2804
+ * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
2930
2805
  */
2931
- labelFormatCallback?: (value: number) => string;
2806
+ showInput?: boolean;
2932
2807
  /**
2933
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2934
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2808
+ * Whether the min/max value labels should be displayed next to the slider
2935
2809
  */
2936
- margin?: Space$8 | Margin$8;
2810
+ showLimitsValues?: boolean;
2937
2811
  /**
2938
2812
  * Size of the component.
2939
2813
  */
2940
2814
  size?: "medium" | "large" | "fillParent";
2815
+ /**
2816
+ * The step interval between values available for selection.
2817
+ */
2818
+ step?: number;
2819
+ /**
2820
+ * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
2821
+ */
2822
+ value?: number;
2941
2823
  };
2942
2824
 
2943
2825
  declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
2944
2826
 
2945
- type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2946
- type Margin$7 = {
2947
- top?: Space$7;
2948
- bottom?: Space$7;
2949
- left?: Space$7;
2950
- right?: Space$7;
2951
- };
2952
2827
  type Props$a = {
2953
2828
  /**
2954
- * Text to be placed inside the spinner.
2829
+ * 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.
2955
2830
  */
2956
- label?: string;
2831
+ ariaLabel?: string;
2957
2832
  /**
2958
- * The value of the progress indicator. If it's received the
2959
- * component is determinate, otherwise is indeterminate.
2833
+ * If true, the color is inherited from the closest parent with a defined color. This allows users to adapt the spinner
2834
+ * to the semantic color of the use case in which it is used.
2960
2835
  */
2961
- value?: number;
2836
+ inheritColor?: boolean;
2962
2837
  /**
2963
- * If true, the value is displayed inside the spinner..
2838
+ * Text to be placed inside the spinner.
2964
2839
  */
2965
- showValue?: boolean;
2840
+ label?: string;
2841
+ /**
2842
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2843
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2844
+ */
2845
+ margin?: Space$1 | Margin;
2966
2846
  /**
2967
2847
  * Available modes of the spinner.
2968
2848
  */
2969
2849
  mode?: "large" | "small" | "overlay";
2970
2850
  /**
2971
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2972
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2851
+ * If true, the value is displayed inside the spinner..
2973
2852
  */
2974
- margin?: Space$7 | Margin$7;
2853
+ showValue?: boolean;
2854
+ /**
2855
+ * The value of the progress indicator. If it's received the
2856
+ * component is determinate, otherwise is indeterminate.
2857
+ */
2858
+ value?: number;
2975
2859
  };
2976
2860
 
2977
- declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
2861
+ declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$a) => react_jsx_runtime.JSX.Element;
2978
2862
 
2979
2863
  type Mode = "default" | "info" | "success" | "warning" | "error";
2980
2864
  type Size = "small" | "medium" | "large";
@@ -2993,30 +2877,26 @@ type Props$9 = {
2993
2877
  size?: Size;
2994
2878
  };
2995
2879
 
2996
- declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
2880
+ declare function DxcStatusLight({ label, mode, size }: Props$9): react_jsx_runtime.JSX.Element;
2997
2881
 
2998
- type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2999
- type Margin$6 = {
3000
- top?: Space$6;
3001
- bottom?: Space$6;
3002
- left?: Space$6;
3003
- right?: Space$6;
3004
- };
3005
2882
  type Props$8 = {
3006
2883
  /**
3007
- * Initial state of the switch, only when it is uncontrolled.
2884
+ * Specifies a string to be used as the name for the switch element when no `label` is provided.
3008
2885
  */
3009
- defaultChecked?: boolean;
2886
+ ariaLabel?: string;
3010
2887
  /**
3011
2888
  * If true, the component is checked. If undefined, the component will be uncontrolled
3012
2889
  * and the checked attribute will be managed internally by the component.
3013
2890
  */
3014
2891
  checked?: boolean;
3015
2892
  /**
3016
- * Will be passed to the value attribute of the html input element. When inside a form,
3017
- * this value will be only submitted if the switch is checked.
2893
+ * Initial state of the switch, only when it is uncontrolled.
3018
2894
  */
3019
- value?: string;
2895
+ defaultChecked?: boolean;
2896
+ /**
2897
+ * If true, the component will be disabled.
2898
+ */
2899
+ disabled?: boolean;
3020
2900
  /**
3021
2901
  * Text to be placed next to the switch.
3022
2902
  */
@@ -3026,13 +2906,14 @@ type Props$8 = {
3026
2906
  */
3027
2907
  labelPosition?: "before" | "after";
3028
2908
  /**
3029
- * Name attribute of the input element.
2909
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2910
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3030
2911
  */
3031
- name?: string;
2912
+ margin?: Space$1 | Margin;
3032
2913
  /**
3033
- * If true, the component will be disabled.
2914
+ * Name attribute of the input element.
3034
2915
  */
3035
- disabled?: boolean;
2916
+ name?: string;
3036
2917
  /**
3037
2918
  * This function will be called when the user changes the state of the switch.
3038
2919
  * The new value of the checked attribute will be passed as a parameter.
@@ -3042,11 +2923,6 @@ type Props$8 = {
3042
2923
  * If true, the component will display '(Optional)' next to the label.
3043
2924
  */
3044
2925
  optional?: boolean;
3045
- /**
3046
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3047
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3048
- */
3049
- margin?: Space$6 | Margin$6;
3050
2926
  /**
3051
2927
  * Size of the component.
3052
2928
  */
@@ -3055,6 +2931,11 @@ type Props$8 = {
3055
2931
  * Value of the tabindex.
3056
2932
  */
3057
2933
  tabIndex?: number;
2934
+ /**
2935
+ * Will be passed to the value attribute of the html input element. When inside a form,
2936
+ * this value will be only submitted if the switch is checked.
2937
+ */
2938
+ value?: string;
3058
2939
  };
3059
2940
 
3060
2941
  declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
@@ -3064,14 +2945,6 @@ declare const DxcTable: {
3064
2945
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
3065
2946
  };
3066
2947
 
3067
- type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3068
- type Margin$5 = {
3069
- top?: Space$5;
3070
- bottom?: Space$5;
3071
- left?: Space$5;
3072
- right?: Space$5;
3073
- };
3074
- type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3075
2948
  type TabCommonProps = {
3076
2949
  /**
3077
2950
  * Whether the tab is disabled or not.
@@ -3094,7 +2967,7 @@ type TabLabelProps = TabCommonProps & {
3094
2967
  /**
3095
2968
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3096
2969
  */
3097
- icon?: string | SVG$5;
2970
+ icon?: string | SVG;
3098
2971
  };
3099
2972
  type TabIconProps = TabCommonProps & {
3100
2973
  /**
@@ -3104,57 +2977,62 @@ type TabIconProps = TabCommonProps & {
3104
2977
  /**
3105
2978
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3106
2979
  */
3107
- icon: string | SVG$5;
2980
+ icon: string | SVG;
3108
2981
  };
3109
2982
  type TabProps = {
3110
2983
  defaultActive?: boolean;
3111
2984
  active?: boolean;
3112
- icon?: string | SVG$5;
3113
- label?: string;
2985
+ icon?: string | SVG;
2986
+ label: string;
3114
2987
  title?: string;
3115
2988
  disabled?: boolean;
3116
2989
  notificationNumber?: boolean | number;
3117
- children: React.ReactNode;
2990
+ children: ReactNode;
3118
2991
  onClick?: () => void;
3119
2992
  onHover?: () => void;
3120
2993
  };
3121
2994
  type LegacyProps = {
3122
2995
  /**
3123
- * Initially active tab, only when it is uncontrolled.
3124
- */
3125
- defaultActiveTabIndex?: number;
3126
- /**
2996
+ * @deprecated This prop is deprecated and will be removed in future versions. Use the children prop instead.
3127
2997
  * The index of the active tab. If undefined, the component will be
3128
2998
  * uncontrolled and the active tab will be managed internally by the component.
3129
2999
  */
3130
3000
  activeTabIndex?: number;
3131
3001
  /**
3132
- * An array of objects representing the tabs.
3002
+ * @deprecated This prop is deprecated and will be removed in future versions.
3003
+ * Initially active tab, only when it is uncontrolled.
3133
3004
  */
3134
- tabs?: (TabLabelProps | TabIconProps)[];
3005
+ defaultActiveTabIndex?: number;
3135
3006
  /**
3136
3007
  * Whether the icon should appear above or to the left of the label.
3137
3008
  */
3138
3009
  iconPosition?: "top" | "left";
3139
3010
  /**
3011
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3012
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3013
+ */
3014
+ margin?: Space$1 | Margin;
3015
+ /**
3016
+ * @deprecated This prop is deprecated and will be removed in future versions.
3140
3017
  * This function will be called when the user clicks on a tab. The index of the
3141
3018
  * clicked tab will be passed as a parameter.
3142
3019
  */
3143
3020
  onTabClick?: (index: number) => void;
3144
3021
  /**
3022
+ * @deprecated This prop is deprecated and will be removed in future versions.
3145
3023
  * This function will be called when the user hovers a tab.The index of the
3146
3024
  * hovered tab will be passed as a parameter.
3147
3025
  */
3148
- onTabHover?: (index: number) => void;
3149
- /**
3150
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3151
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3152
- */
3153
- margin?: Space$5 | Margin$5;
3026
+ onTabHover?: (index: number | null) => void;
3154
3027
  /**
3155
3028
  * Value of the tabindex attribute applied to each tab.
3156
3029
  */
3157
3030
  tabIndex?: number;
3031
+ /**
3032
+ * @deprecated This prop is deprecated and will be removed in future versions.
3033
+ * An array of objects representing the tabs.
3034
+ */
3035
+ tabs?: (TabLabelProps | TabIconProps)[];
3158
3036
  };
3159
3037
  type NewProps = {
3160
3038
  /**
@@ -3165,7 +3043,7 @@ type NewProps = {
3165
3043
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3166
3044
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3167
3045
  */
3168
- margin?: Space$5 | Margin$5;
3046
+ margin?: Space$1 | Margin;
3169
3047
  /**
3170
3048
  * Value of the tabindex attribute applied to each tab.
3171
3049
  */
@@ -3173,23 +3051,15 @@ type NewProps = {
3173
3051
  /**
3174
3052
  * Contains one or more DxcTabs.Tab.
3175
3053
  */
3176
- children?: React.ReactNode;
3054
+ children?: ReactNode;
3177
3055
  };
3178
3056
  type Props$7 = LegacyProps & NewProps;
3179
3057
 
3180
3058
  declare const DxcTabs: {
3181
- ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): JSX.Element;
3059
+ ({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$7): false | react_jsx_runtime.JSX.Element;
3182
3060
  Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
3183
3061
  };
3184
3062
 
3185
- type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3186
- type Margin$4 = {
3187
- top?: Space$4;
3188
- bottom?: Space$4;
3189
- left?: Space$4;
3190
- right?: Space$4;
3191
- };
3192
- type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3193
3063
  type TagCommonProps = {
3194
3064
  /**
3195
3065
  * If defined, the tag will be displayed as an anchor, using this prop as "href".
@@ -3218,7 +3088,7 @@ type TagCommonProps = {
3218
3088
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3219
3089
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3220
3090
  */
3221
- margin?: Space$4 | Margin$4;
3091
+ margin?: Space$1 | Margin;
3222
3092
  /**
3223
3093
  * Size of the component.
3224
3094
  */
@@ -3232,7 +3102,7 @@ type TagLabelProps = TagCommonProps & {
3232
3102
  /**
3233
3103
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3234
3104
  */
3235
- icon?: string | SVG$4;
3105
+ icon?: string | SVG;
3236
3106
  /**
3237
3107
  * Text to be placed next inside the tag.
3238
3108
  */
@@ -3242,7 +3112,7 @@ type TagIconProps = TagCommonProps & {
3242
3112
  /**
3243
3113
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3244
3114
  */
3245
- icon: string | SVG$4;
3115
+ icon: string | SVG;
3246
3116
  /**
3247
3117
  * Text to be placed next inside the tag.
3248
3118
  */
@@ -3255,64 +3125,80 @@ type Props$6 = TagLabelProps | TagIconProps;
3255
3125
  */
3256
3126
  declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
3257
3127
 
3258
- type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3259
- type Margin$3 = {
3260
- top?: Space$3;
3261
- bottom?: Space$3;
3262
- left?: Space$3;
3263
- right?: Space$3;
3264
- };
3265
3128
  type Props$5 = {
3266
3129
  /**
3267
- * Text to be placed above the textarea.
3130
+ * Specifies a string to be used as the name for the textarea element when no `label` is provided.
3131
+ */
3132
+ ariaLabel?: string;
3133
+ /**
3134
+ * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
3135
+ * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
3268
3136
  */
3269
- label?: string;
3137
+ autocomplete?: string;
3270
3138
  /**
3271
- * Name attribute of the textarea element.
3139
+ * If true, the component will be disabled.
3272
3140
  */
3273
- name?: string;
3141
+ disabled?: boolean;
3274
3142
  /**
3275
3143
  * Initial value of the textarea, only when it is uncontrolled.
3276
3144
  */
3277
3145
  defaultValue?: string;
3278
3146
  /**
3279
- * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
3147
+ * If it is a defined value and also a truthy string, the component will
3148
+ * change its appearance, showing the error below the textarea. If the
3149
+ * defined value is an empty string, it will reserve a space below the
3150
+ * component for a future error, but it would not change its look. In
3151
+ * case of being undefined or null, both the appearance and the space for
3152
+ * the error message would not be modified.
3280
3153
  */
3281
- value?: string;
3154
+ error?: string;
3282
3155
  /**
3283
3156
  * Helper text to be placed above the textarea.
3284
3157
  */
3285
3158
  helperText?: string;
3286
3159
  /**
3287
- * Text to be put as placeholder of the textarea.
3160
+ * Text to be placed above the textarea.
3288
3161
  */
3289
- placeholder?: string;
3162
+ label?: string;
3290
3163
  /**
3291
- * If true, the component will be disabled.
3164
+ * Specifies the maximum length allowed by the textarea.
3165
+ * This will be checked both when the textarea loses the
3166
+ * focus and while typing within it. If the string entered does not
3167
+ * comply the maximum length, the onBlur and onChange functions will be called
3168
+ * with the current value and an internal error informing that the value
3169
+ * length does not comply the specified range. If a valid length is
3170
+ * reached, the error parameter of both events will not be defined.
3292
3171
  */
3293
- disabled?: boolean;
3172
+ maxLength?: number;
3294
3173
  /**
3295
- * If true, the component will not be mutable, meaning the user can not edit the control.
3174
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3175
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3296
3176
  */
3297
- readOnly?: boolean;
3177
+ margin?: Space$1 | Margin;
3298
3178
  /**
3299
- * If true, the textarea will be optional, showing '(Optional)'
3300
- * next to the label. Otherwise, the field will be considered required
3301
- * and an error will be passed as a parameter to the OnBlur and onChange functions
3302
- * when it has not been filled.
3179
+ * Specifies the minimum length allowed by the textarea.
3180
+ * This will be checked both when the textarea loses the
3181
+ * focus and while typing within it. If the string entered does not
3182
+ * comply the minimum length, the onBlur and onChange functions will be called
3183
+ * with the current value and an internal error informing that the value
3184
+ * length does not comply the specified range. If a valid length is
3185
+ * reached, the error parameter of both events will not be defined.
3303
3186
  */
3304
- optional?: boolean;
3187
+ minLength?: number;
3305
3188
  /**
3306
- * Defines the textarea's ability to resize vertically. It can be:
3307
- * - 'auto': The textarea grows or shrinks automatically in order to fit the content.
3308
- * - 'manual': The height of the textarea is enabled to be manually modified.
3309
- * - 'none': The textarea has a fixed height and can't be modified.
3189
+ * Name attribute of the textarea element.
3310
3190
  */
3311
- verticalGrow?: "auto" | "manual" | "none";
3191
+ name?: string;
3312
3192
  /**
3313
- * Number of rows of the textarea.
3193
+ * This function will be called when the textarea loses the focus. An
3194
+ * object including the textarea value and the error (if the value entered
3195
+ * is not valid) will be passed to this function. If there is no error,
3196
+ * error will not be defined.
3314
3197
  */
3315
- rows?: number;
3198
+ onBlur?: (val: {
3199
+ value: string;
3200
+ error?: string;
3201
+ }) => void;
3316
3202
  /**
3317
3203
  * This function will be called when the user types within the textarea.
3318
3204
  * An object including the current value and the error (if the value
@@ -3324,24 +3210,12 @@ type Props$5 = {
3324
3210
  error?: string;
3325
3211
  }) => void;
3326
3212
  /**
3327
- * This function will be called when the textarea loses the focus. An
3328
- * object including the textarea value and the error (if the value entered
3329
- * is not valid) will be passed to this function. If there is no error,
3330
- * error will not be defined.
3331
- */
3332
- onBlur?: (val: {
3333
- value: string;
3334
- error?: string;
3335
- }) => void;
3336
- /**
3337
- * If it is a defined value and also a truthy string, the component will
3338
- * change its appearance, showing the error below the textarea. If the
3339
- * defined value is an empty string, it will reserve a space below the
3340
- * component for a future error, but it would not change its look. In
3341
- * case of being undefined or null, both the appearance and the space for
3342
- * the error message would not be modified.
3213
+ * If true, the textarea will be optional, showing '(Optional)'
3214
+ * next to the label. Otherwise, the field will be considered required
3215
+ * and an error will be passed as a parameter to the OnBlur and onChange functions
3216
+ * when it has not been filled.
3343
3217
  */
3344
- error?: string;
3218
+ optional?: boolean;
3345
3219
  /**
3346
3220
  * Regular expression that defines the valid format allowed by the
3347
3221
  * textarea. This will be checked both when the textarea loses the focus
@@ -3353,35 +3227,17 @@ type Props$5 = {
3353
3227
  */
3354
3228
  pattern?: string;
3355
3229
  /**
3356
- * Specifies the minimum length allowed by the textarea.
3357
- * This will be checked both when the textarea loses the
3358
- * focus and while typing within it. If the string entered does not
3359
- * comply the minimum length, the onBlur and onChange functions will be called
3360
- * with the current value and an internal error informing that the value
3361
- * length does not comply the specified range. If a valid length is
3362
- * reached, the error parameter of both events will not be defined.
3363
- */
3364
- minLength?: number;
3365
- /**
3366
- * Specifies the maximum length allowed by the textarea.
3367
- * This will be checked both when the textarea loses the
3368
- * focus and while typing within it. If the string entered does not
3369
- * comply the maximum length, the onBlur and onChange functions will be called
3370
- * with the current value and an internal error informing that the value
3371
- * length does not comply the specified range. If a valid length is
3372
- * reached, the error parameter of both events will not be defined.
3230
+ * Text to be put as placeholder of the textarea.
3373
3231
  */
3374
- maxLength?: number;
3232
+ placeholder?: string;
3375
3233
  /**
3376
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
3377
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
3234
+ * If true, the component will not be mutable, meaning the user can not edit the control.
3378
3235
  */
3379
- autocomplete?: string;
3236
+ readOnly?: boolean;
3380
3237
  /**
3381
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3382
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3238
+ * Number of rows of the textarea.
3383
3239
  */
3384
- margin?: Space$3 | Margin$3;
3240
+ rows?: number;
3385
3241
  /**
3386
3242
  * Size of the component.
3387
3243
  */
@@ -3390,18 +3246,21 @@ type Props$5 = {
3390
3246
  * Value of the tabindex attribute.
3391
3247
  */
3392
3248
  tabIndex?: number;
3249
+ /**
3250
+ * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
3251
+ */
3252
+ value?: string;
3253
+ /**
3254
+ * Defines the textarea's ability to resize vertically. It can be:
3255
+ * - 'auto': The textarea grows or shrinks automatically in order to fit the content.
3256
+ * - 'manual': The height of the textarea is enabled to be manually modified.
3257
+ * - 'none': The textarea has a fixed height and can't be modified.
3258
+ */
3259
+ verticalGrow?: "auto" | "manual" | "none";
3393
3260
  };
3394
3261
 
3395
3262
  declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
3396
3263
 
3397
- type Space$2 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3398
- type Margin$2 = {
3399
- top?: Space$2;
3400
- bottom?: Space$2;
3401
- left?: Space$2;
3402
- right?: Space$2;
3403
- };
3404
- type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3405
3264
  type Action$1 = {
3406
3265
  /**
3407
3266
  * This function will be called when the user clicks the action.
@@ -3410,7 +3269,7 @@ type Action$1 = {
3410
3269
  /**
3411
3270
  * Icon to be placed in the action..
3412
3271
  */
3413
- icon: string | SVG$3;
3272
+ icon: string | SVG;
3414
3273
  /**
3415
3274
  * Text representing advisory information related
3416
3275
  * to the button's action. Under the hood, this prop also serves
@@ -3552,7 +3411,7 @@ type Props$4 = {
3552
3411
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3553
3412
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3554
3413
  */
3555
- margin?: Space$2 | Margin$2;
3414
+ margin?: Space$1 | Margin;
3556
3415
  /**
3557
3416
  * Size of the component.
3558
3417
  */
@@ -3561,53 +3420,78 @@ type Props$4 = {
3561
3420
  * Value of the tabindex attribute.
3562
3421
  */
3563
3422
  tabIndex?: number;
3423
+ /**
3424
+ * Specifies a string to be used as the name for the textInput element when no `label` is provided.
3425
+ */
3426
+ ariaLabel?: string;
3564
3427
  };
3565
3428
 
3566
3429
  declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
3567
3430
 
3568
- type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3569
3431
  type Action = {
3570
- icon?: string | SVG$2;
3432
+ /**
3433
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
3434
+ */
3435
+ icon?: string | SVG;
3436
+ /**
3437
+ * The label of the action.
3438
+ */
3571
3439
  label: string;
3440
+ /**
3441
+ * The function that will be executed when the user clicks on the action button.
3442
+ */
3572
3443
  onClick: () => void;
3573
3444
  };
3574
3445
  type CommonProps$1 = {
3446
+ /**
3447
+ * Tertiary button which performs a custom action, specified by the user.
3448
+ */
3575
3449
  action?: Action;
3450
+ /**
3451
+ * Message to be displayed as a toast.
3452
+ */
3576
3453
  message: string;
3577
3454
  };
3578
3455
  type DefaultToast = CommonProps$1 & {
3579
- icon?: string | SVG$2;
3456
+ /**
3457
+ * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
3458
+ * When using Material Symbols, replace spaces with underscores.
3459
+ * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
3460
+ */
3461
+ icon?: string | SVG;
3580
3462
  };
3581
3463
  type LoadingToast = CommonProps$1 & {
3582
3464
  loading: boolean;
3583
3465
  };
3584
3466
  type SemanticToast = CommonProps$1 & {
3467
+ /**
3468
+ * Flag that allows to hide the semantic icon of the toast.
3469
+ */
3585
3470
  hideSemanticIcon?: boolean;
3586
3471
  };
3587
3472
  type ToastsQueuePropsType = {
3473
+ /**
3474
+ * Tree of components from which the useToast hook can be triggered.
3475
+ */
3476
+ children: ReactNode;
3477
+ /**
3478
+ * Duration in milliseconds before a toast automatically hides itself.
3479
+ * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
3480
+ */
3588
3481
  duration?: number;
3589
- children: React.ReactNode;
3590
3482
  };
3591
3483
 
3592
- declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
3484
+ declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react_jsx_runtime.JSX.Element;
3593
3485
 
3594
- type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3595
- type Margin$1 = {
3596
- top?: Space$1;
3597
- bottom?: Space$1;
3598
- left?: Space$1;
3599
- right?: Space$1;
3600
- };
3601
- type SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3602
3486
  type OptionIcon = {
3603
3487
  /**
3604
- * String with the option display value.
3488
+ * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3605
3489
  */
3606
- label?: never;
3490
+ icon: string | SVG;
3607
3491
  /**
3608
- * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3492
+ * String with the option display value.
3609
3493
  */
3610
- icon: string | SVG$1;
3494
+ label?: never;
3611
3495
  /**
3612
3496
  * Value for the HTML properties title and aria-label.
3613
3497
  * When a label is defined, this prop can not be use.
@@ -3616,13 +3500,13 @@ type OptionIcon = {
3616
3500
  };
3617
3501
  type OptionLabel = {
3618
3502
  /**
3619
- * String with the option display value.
3503
+ * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3620
3504
  */
3621
- label: string;
3505
+ icon?: string | SVG;
3622
3506
  /**
3623
- * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3507
+ * String with the option display value.
3624
3508
  */
3625
- icon?: string | SVG$1;
3509
+ label: string;
3626
3510
  /**
3627
3511
  * Value for the HTML properties title and aria-label.
3628
3512
  * When a label is defined, this prop can not be use.
@@ -3630,6 +3514,10 @@ type OptionLabel = {
3630
3514
  title?: never;
3631
3515
  };
3632
3516
  type Option = {
3517
+ /**
3518
+ * If true, the option will be disabled.
3519
+ */
3520
+ disabled?: boolean;
3633
3521
  /**
3634
3522
  * Number with the option inner value.
3635
3523
  */
@@ -3637,95 +3525,87 @@ type Option = {
3637
3525
  } & (OptionIcon | OptionLabel);
3638
3526
  type CommonProps = {
3639
3527
  /**
3640
- * Text to be placed above the component.
3641
- */
3642
- label?: string;
3643
- /**
3644
- * Helper text to be placed above the component.
3645
- */
3646
- helperText?: string;
3647
- /**
3648
- * If true, the component will be disabled.
3528
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3529
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3649
3530
  */
3650
- disabled?: boolean;
3531
+ margin?: Space$1 | Margin;
3651
3532
  /**
3652
3533
  * An array of objects representing the selectable options.
3653
3534
  */
3654
3535
  options: Option[];
3655
3536
  /**
3656
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3657
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3537
+ * The orientation of the toggle group.
3658
3538
  */
3659
- margin?: Space$1 | Margin$1;
3539
+ orientation?: "horizontal" | "vertical";
3660
3540
  /**
3661
3541
  * Value of the tabindex.
3662
3542
  */
3663
3543
  tabIndex?: number;
3664
3544
  };
3665
- type SingleSelectionToggleGroup = CommonProps & {
3545
+ type MultipleSelectionToggleGroup = {
3546
+ /**
3547
+ * The array of keys with the initially selected values.
3548
+ */
3549
+ defaultValue?: number[];
3666
3550
  /**
3667
3551
  * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
3668
3552
  */
3669
- multiple?: false;
3553
+ multiple: true;
3670
3554
  /**
3671
- * The key of the initially selected value.
3555
+ * This function will be called every time the selection changes. An array with the key of
3556
+ * the selected values will be passed as a parameter to this function.
3672
3557
  */
3673
- defaultValue?: number;
3558
+ onChange?: (optionIndex: number[]) => void;
3674
3559
  /**
3675
- * The key of the selected value. If the component allows multiple selection, value must be an array.
3560
+ * An array with the keys of the selected values.
3676
3561
  * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
3677
3562
  */
3678
- value?: number;
3563
+ value?: number[];
3564
+ };
3565
+ type SingleSelectionToggleGroup = {
3679
3566
  /**
3680
- * This function will be called every time the selection changes. The number with the key of the selected
3681
- * value will be passed as a parameter to this function.
3567
+ * The key of the initially selected value.
3682
3568
  */
3683
- onChange?: (optionIndex: number) => void;
3684
- };
3685
- type MultipleSelectionToggleGroup = CommonProps & {
3569
+ defaultValue?: number;
3686
3570
  /**
3687
3571
  * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
3688
3572
  */
3689
- multiple: true;
3573
+ multiple?: false;
3690
3574
  /**
3691
- * The array of keys with the initially selected values.
3575
+ * This function will be called every time the selection changes. The number with the key of the selected
3576
+ * value will be passed as a parameter to this function.
3692
3577
  */
3693
- defaultValue?: number[];
3578
+ onChange?: (optionIndex: number) => void;
3694
3579
  /**
3695
- * An array with the keys of the selected values.
3580
+ * The key of the selected value. If the component allows multiple selection, value must be an array.
3696
3581
  * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
3697
3582
  */
3698
- value?: number[];
3699
- /**
3700
- * This function will be called every time the selection changes. An array with the key of
3701
- * the selected values will be passed as a parameter to this function.
3702
- */
3703
- onChange?: (optionIndex: number[]) => void;
3583
+ value?: number;
3704
3584
  };
3705
- type Props$3 = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
3585
+ type Props$3 = CommonProps & (MultipleSelectionToggleGroup | SingleSelectionToggleGroup);
3706
3586
 
3707
- declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: Props$3) => JSX.Element;
3587
+ declare function DxcToggleGroup({ defaultValue, margin, multiple, onChange, options, orientation, tabIndex, value, }: Props$3): react_jsx_runtime.JSX.Element;
3708
3588
 
3709
3589
  type Props$2 = {
3710
3590
  /**
3711
- * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
3591
+ * Content in which the Tooltip will be displayed.
3712
3592
  */
3713
- position?: "bottom" | "top" | "left" | "right";
3593
+ children: ReactNode;
3714
3594
  /**
3715
3595
  * Text to be displayed inside the tooltip.
3716
3596
  */
3717
- label: string;
3597
+ label?: string;
3718
3598
  /**
3719
- * Content in which the Tooltip will be displayed.
3599
+ * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
3720
3600
  */
3721
- children: React.ReactNode;
3601
+ position?: "bottom" | "top" | "left" | "right";
3722
3602
  };
3723
3603
 
3724
3604
  declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
3725
3605
 
3726
3606
  type Props$1 = {
3727
3607
  as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
3728
- children: React.ReactNode;
3608
+ children: ReactNode;
3729
3609
  color?: string;
3730
3610
  display?: "inline" | "block";
3731
3611
  fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
@@ -3740,16 +3620,8 @@ type Props$1 = {
3740
3620
  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
3741
3621
  };
3742
3622
 
3743
- declare function DxcTypography({ as, color, children, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textDecoration, textOverflow, whiteSpace, }: Props$1): react_jsx_runtime.JSX.Element;
3623
+ declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
3744
3624
 
3745
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3746
- type Margin = {
3747
- top?: Space;
3748
- bottom?: Space;
3749
- left?: Space;
3750
- right?: Space;
3751
- };
3752
- type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
3753
3625
  type StepProps = {
3754
3626
  /**
3755
3627
  * Step label.
@@ -3798,41 +3670,41 @@ type Props = {
3798
3670
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3799
3671
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3800
3672
  */
3801
- margin?: Space | Margin;
3673
+ margin?: Space$1 | Margin;
3802
3674
  /**
3803
3675
  * Value of the tabindex attribute that is given to all the steps.
3804
3676
  */
3805
3677
  tabIndex?: number;
3806
3678
  };
3807
3679
 
3808
- declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
3680
+ declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react_jsx_runtime.JSX.Element;
3809
3681
 
3810
3682
  declare const componentTokens: {
3811
3683
  accordion: {
3812
3684
  backgroundColor: string;
3813
3685
  hoverBackgroundColor: string;
3686
+ focusBackgroundColor: string;
3687
+ activeBackgroundColor: string;
3814
3688
  arrowColor: string;
3815
3689
  disabledArrowColor: string;
3690
+ subLabelFontFamily: string;
3691
+ subLabelFontSize: string;
3692
+ subLabelFontWeight: string;
3693
+ subLabelFontStyle: string;
3694
+ subLabelFontColor: string;
3695
+ disabledSubLabelFontColor: string;
3816
3696
  assistiveTextFontFamily: string;
3817
3697
  assistiveTextFontSize: string;
3818
3698
  assistiveTextFontWeight: string;
3819
3699
  assistiveTextFontStyle: string;
3820
- assistiveTextLetterSpacing: string;
3821
3700
  assistiveTextFontColor: string;
3822
3701
  disabledAssistiveTextFontColor: string;
3823
- assistiveTextMinWidth: string;
3824
- assistiveTextPaddingRight: string;
3825
- assistiveTextPaddingLeft: string;
3826
3702
  titleLabelFontFamily: string;
3827
3703
  titleLabelFontSize: string;
3828
3704
  titleLabelFontWeight: string;
3829
3705
  titleLabelFontStyle: string;
3830
3706
  titleLabelFontColor: string;
3831
3707
  disabledTitleLabelFontColor: string;
3832
- titleLabelPaddingTop: string;
3833
- titleLabelPaddingBottom: string;
3834
- titleLabelPaddingLeft: string;
3835
- titleLabelPaddingRight: string;
3836
3708
  focusBorderColor: string;
3837
3709
  focusBorderStyle: string;
3838
3710
  focusBorderThickness: string;
@@ -3840,16 +3712,14 @@ declare const componentTokens: {
3840
3712
  boxShadowOffsetX: string;
3841
3713
  boxShadowOffsetY: string;
3842
3714
  boxShadowBlur: string;
3715
+ boxShadowSpread: string;
3843
3716
  boxShadowColor: string;
3844
3717
  iconColor: string;
3845
3718
  disabledIconColor: string;
3846
3719
  iconSize: string;
3847
- iconMarginLeft: string;
3848
- iconMarginRight: string;
3849
- accordionGroupSeparatorBorderColor: string;
3850
- accordionGroupSeparatorBorderThickness: string;
3851
- accordionGroupSeparatorBorderRadius: string;
3852
- accordionGroupSeparatorBorderStyle: string;
3720
+ accordionSeparatorBorderColor: string;
3721
+ accordionSeparatorBorderThickness: string;
3722
+ accordionSeparatorBorderStyle: string;
3853
3723
  };
3854
3724
  alert: {
3855
3725
  errorBackgroundColor: string;
@@ -4195,15 +4065,8 @@ declare const componentTokens: {
4195
4065
  dialog: {
4196
4066
  overlayColor: string;
4197
4067
  backgroundColor: string;
4198
- closeIconSize: string;
4199
- closeIconTopPosition: string;
4200
- closeIconRightPosition: string;
4201
4068
  closeIconBackgroundColor: string;
4202
- closeIconBorderColor: string;
4203
4069
  closeIconColor: string;
4204
- closeIconBorderThickness: string;
4205
- closeIconBorderStyle: string;
4206
- closeIconBorderRadius: string;
4207
4070
  boxShadowOffsetX: string;
4208
4071
  boxShadowOffsetY: string;
4209
4072
  boxShadowBlur: string;
@@ -4338,15 +4201,15 @@ declare const componentTokens: {
4338
4201
  };
4339
4202
  header: {
4340
4203
  backgroundColor: string;
4341
- hamburguerFocusColor: string;
4342
- hamburguerFontFamily: string;
4343
- hamburguerFontStyle: string;
4344
- hamburguerFontColor: string;
4345
- hamburguerFontSize: string;
4346
- hamburguerFontWeight: string;
4347
- hamburguerTextTransform: string;
4348
- hamburguerIconColor: string;
4349
- hamburguerHoverColor: string;
4204
+ hamburgerFocusColor: string;
4205
+ hamburgerFontFamily: string;
4206
+ hamburgerFontStyle: string;
4207
+ hamburgerFontColor: string;
4208
+ hamburgerFontSize: string;
4209
+ hamburgerFontWeight: string;
4210
+ hamburgerTextTransform: string;
4211
+ hamburgerIconColor: string;
4212
+ hamburgerHoverColor: string;
4350
4213
  logo: string;
4351
4214
  logoResponsive: string;
4352
4215
  logoHeight: string;
@@ -5097,6 +4960,7 @@ type OpinionatedTheme = {
5097
4960
  accordion: {
5098
4961
  accentColor: string;
5099
4962
  titleFontColor: string;
4963
+ subLabelFontColor: string;
5100
4964
  assistiveTextFontColor: string;
5101
4965
  };
5102
4966
  alert: {
@@ -5158,7 +5022,7 @@ type OpinionatedTheme = {
5158
5022
  accentColor: string;
5159
5023
  fontColor: string;
5160
5024
  menuBaseColor: string;
5161
- hamburguerColor: string;
5025
+ hamburgerColor: string;
5162
5026
  logo: string;
5163
5027
  logoResponsive: string;
5164
5028
  contentColor: string;
@@ -5292,7 +5156,7 @@ declare const defaultTranslatedComponentLabels: {
5292
5156
  };
5293
5157
  header: {
5294
5158
  closeIcon: string;
5295
- hamburguerTitle: string;
5159
+ hamburgerTitle: string;
5296
5160
  };
5297
5161
  numberInput: {
5298
5162
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5336,32 +5200,39 @@ declare const defaultTranslatedComponentLabels: {
5336
5200
  };
5337
5201
  type TranslatedLabels = typeof defaultTranslatedComponentLabels;
5338
5202
 
5339
- declare const HalstackContext: react.Context<DeepPartial<{
5203
+ /**
5204
+ * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
5205
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
5206
+ */
5207
+ type DeepPartial<T> = {
5208
+ [P in keyof T]?: Partial<T[P]>;
5209
+ };
5210
+ declare const HalstackContext: react.Context<{
5340
5211
  accordion: {
5341
5212
  backgroundColor: string;
5342
5213
  hoverBackgroundColor: string;
5214
+ focusBackgroundColor: string;
5215
+ activeBackgroundColor: string;
5343
5216
  arrowColor: string;
5344
5217
  disabledArrowColor: string;
5218
+ subLabelFontFamily: string;
5219
+ subLabelFontSize: string;
5220
+ subLabelFontWeight: string;
5221
+ subLabelFontStyle: string;
5222
+ subLabelFontColor: string;
5223
+ disabledSubLabelFontColor: string;
5345
5224
  assistiveTextFontFamily: string;
5346
5225
  assistiveTextFontSize: string;
5347
5226
  assistiveTextFontWeight: string;
5348
5227
  assistiveTextFontStyle: string;
5349
- assistiveTextLetterSpacing: string;
5350
5228
  assistiveTextFontColor: string;
5351
5229
  disabledAssistiveTextFontColor: string;
5352
- assistiveTextMinWidth: string;
5353
- assistiveTextPaddingRight: string;
5354
- assistiveTextPaddingLeft: string;
5355
5230
  titleLabelFontFamily: string;
5356
5231
  titleLabelFontSize: string;
5357
5232
  titleLabelFontWeight: string;
5358
5233
  titleLabelFontStyle: string;
5359
5234
  titleLabelFontColor: string;
5360
5235
  disabledTitleLabelFontColor: string;
5361
- titleLabelPaddingTop: string;
5362
- titleLabelPaddingBottom: string;
5363
- titleLabelPaddingLeft: string;
5364
- titleLabelPaddingRight: string;
5365
5236
  focusBorderColor: string;
5366
5237
  focusBorderStyle: string;
5367
5238
  focusBorderThickness: string;
@@ -5369,16 +5240,14 @@ declare const HalstackContext: react.Context<DeepPartial<{
5369
5240
  boxShadowOffsetX: string;
5370
5241
  boxShadowOffsetY: string;
5371
5242
  boxShadowBlur: string;
5243
+ boxShadowSpread: string;
5372
5244
  boxShadowColor: string;
5373
5245
  iconColor: string;
5374
5246
  disabledIconColor: string;
5375
5247
  iconSize: string;
5376
- iconMarginLeft: string;
5377
- iconMarginRight: string;
5378
- accordionGroupSeparatorBorderColor: string;
5379
- accordionGroupSeparatorBorderThickness: string;
5380
- accordionGroupSeparatorBorderRadius: string;
5381
- accordionGroupSeparatorBorderStyle: string;
5248
+ accordionSeparatorBorderColor: string;
5249
+ accordionSeparatorBorderThickness: string;
5250
+ accordionSeparatorBorderStyle: string;
5382
5251
  };
5383
5252
  alert: {
5384
5253
  errorBackgroundColor: string;
@@ -5724,15 +5593,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
5724
5593
  dialog: {
5725
5594
  overlayColor: string;
5726
5595
  backgroundColor: string;
5727
- closeIconSize: string;
5728
- closeIconTopPosition: string;
5729
- closeIconRightPosition: string;
5730
5596
  closeIconBackgroundColor: string;
5731
- closeIconBorderColor: string;
5732
5597
  closeIconColor: string;
5733
- closeIconBorderThickness: string;
5734
- closeIconBorderStyle: string;
5735
- closeIconBorderRadius: string;
5736
5598
  boxShadowOffsetX: string;
5737
5599
  boxShadowOffsetY: string;
5738
5600
  boxShadowBlur: string;
@@ -5867,15 +5729,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
5867
5729
  };
5868
5730
  header: {
5869
5731
  backgroundColor: string;
5870
- hamburguerFocusColor: string;
5871
- hamburguerFontFamily: string;
5872
- hamburguerFontStyle: string;
5873
- hamburguerFontColor: string;
5874
- hamburguerFontSize: string;
5875
- hamburguerFontWeight: string;
5876
- hamburguerTextTransform: string;
5877
- hamburguerIconColor: string;
5878
- hamburguerHoverColor: string;
5732
+ hamburgerFocusColor: string;
5733
+ hamburgerFontFamily: string;
5734
+ hamburgerFontStyle: string;
5735
+ hamburgerFontColor: string;
5736
+ hamburgerFontSize: string;
5737
+ hamburgerFontWeight: string;
5738
+ hamburgerTextTransform: string;
5739
+ hamburgerIconColor: string;
5740
+ hamburgerHoverColor: string;
5879
5741
  logo: string;
5880
5742
  logoResponsive: string;
5881
5743
  logoHeight: string;
@@ -6620,8 +6482,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
6620
6482
  separatorColor: string;
6621
6483
  focusColor: string;
6622
6484
  };
6623
- }>>;
6624
- declare const HalstackLanguageContext: react.Context<DeepPartial<{
6485
+ }>;
6486
+ declare const HalstackLanguageContext: react.Context<{
6625
6487
  applicationLayout: {
6626
6488
  visibilityToggleTitle: string;
6627
6489
  };
@@ -6666,7 +6528,7 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6666
6528
  };
6667
6529
  header: {
6668
6530
  closeIcon: string;
6669
- hamburguerTitle: string;
6531
+ hamburgerTitle: string;
6670
6532
  };
6671
6533
  numberInput: {
6672
6534
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -6707,28 +6569,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6707
6569
  toast: {
6708
6570
  clearToastActionTitle: string;
6709
6571
  };
6710
- }>>;
6711
- /**
6712
- * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
6713
- * This is an extension of the already existing Partial type, which only allows one level of partiality.
6714
- */
6715
- type DeepPartial<T> = {
6716
- [P in keyof T]?: Partial<T[P]>;
6717
- };
6572
+ }>;
6718
6573
  type HalstackProviderPropsType = {
6719
6574
  theme?: DeepPartial<OpinionatedTheme>;
6720
6575
  advancedTheme?: DeepPartial<AdvancedTheme>;
6721
6576
  labels?: DeepPartial<TranslatedLabels>;
6722
- children: React.ReactNode;
6577
+ children: ReactNode;
6723
6578
  };
6724
6579
  declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
6725
6580
 
6726
- declare const useToast: () => {
6727
- default: (toast: DefaultToast) => () => void;
6728
- success: (toast: SemanticToast) => () => void;
6729
- warning: (toast: SemanticToast) => () => void;
6730
- info: (toast: SemanticToast) => () => void;
6731
- loading: (toast: Omit<LoadingToast, "loading">) => () => void;
6581
+ declare function useToast(): {
6582
+ default: (toast: DefaultToast) => (() => void) | undefined;
6583
+ success: (toast: SemanticToast) => (() => void) | undefined;
6584
+ warning: (toast: SemanticToast) => (() => void) | undefined;
6585
+ info: (toast: SemanticToast) => (() => void) | undefined;
6586
+ loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
6732
6587
  };
6733
6588
 
6734
- 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 };
6589
+ export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, 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 };