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

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 +521 -674
  2. package/dist/index.d.ts +521 -674
  3. package/dist/index.js +5680 -5810
  4. package/dist/index.mjs +5505 -5604
  5. package/package.json +6 -6
package/dist/index.d.ts 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;
61
+ type CommonProps$9 = {
78
62
  /**
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;
82
- /**
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.
117
101
  */
118
- margin?: Space$r | Margin$m;
102
+ defaultIndexActive?: number[];
119
103
  /**
120
- * Customized accordion(s) that are allowed inside an Accordion Group.
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.
121
107
  */
122
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
108
+ indexActive?: number[];
109
+ /**
110
+ * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
111
+ */
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,22 +268,14 @@ 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
279
  type Option$1 = {
243
280
  /**
244
281
  * Option display value.
@@ -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
  */
@@ -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,96 +544,6 @@ 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
547
  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
548
 
606
549
  type Props$D = {
@@ -635,7 +578,7 @@ type Props$D = {
635
578
  /**
636
579
  * Custom content inside the bleed.
637
580
  */
638
- children: React.ReactNode;
581
+ children: ReactNode;
639
582
  };
640
583
 
641
584
  declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
@@ -678,7 +621,6 @@ type Props$C = {
678
621
 
679
622
  declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
680
623
 
681
- type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
682
624
  type IconProps = {
683
625
  /**
684
626
  * Defines the style of the bullet point in the list.
@@ -687,11 +629,11 @@ type IconProps = {
687
629
  /**
688
630
  * Icon to display as bullet.
689
631
  */
690
- icon: string | SVG$d;
632
+ icon: string | SVG;
691
633
  /**
692
634
  * Text to be shown in the list.
693
635
  */
694
- children: React.ReactNode;
636
+ children: ReactNode;
695
637
  };
696
638
  type OtherProps = {
697
639
  /**
@@ -705,7 +647,7 @@ type OtherProps = {
705
647
  /**
706
648
  * Text to be shown in the list.
707
649
  */
708
- children: React.ReactNode;
650
+ children: ReactNode;
709
651
  };
710
652
  type Props$B = IconProps | OtherProps;
711
653
 
@@ -713,7 +655,7 @@ type BulletedListItemPropsType = {
713
655
  /**
714
656
  * Text to be shown in the list.
715
657
  */
716
- children?: React.ReactNode;
658
+ children?: ReactNode;
717
659
  };
718
660
 
719
661
  declare const DxcBulletedList: {
@@ -721,17 +663,11 @@ declare const DxcBulletedList: {
721
663
  Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
722
664
  };
723
665
 
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>;
666
+ type Semantic = "default" | "error" | "warning" | "success" | "info";
667
+ type Mode$1 = "primary" | "secondary" | "tertiary";
732
668
  type Size$3 = {
733
669
  /**
734
- * Height of the component.
670
+ * Height of the button.
735
671
  */
736
672
  height?: "small" | "medium" | "large";
737
673
  width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
@@ -744,11 +680,11 @@ type Props$A = {
744
680
  /**
745
681
  * The available button modes.
746
682
  */
747
- mode?: "primary" | "secondary" | "tertiary";
683
+ mode?: Mode$1;
748
684
  /**
749
685
  * Specifies the semantic meaning of the buttons, which determines its color.
750
686
  */
751
- semantic?: "default" | "error" | "warning" | "success" | "info";
687
+ semantic?: Semantic;
752
688
  /**
753
689
  * If true, the component will be disabled.
754
690
  */
@@ -768,7 +704,7 @@ type Props$A = {
768
704
  /**
769
705
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
770
706
  */
771
- icon?: string | SVG$c;
707
+ icon?: string | SVG;
772
708
  /**
773
709
  * This function will be called when the user clicks the button.
774
710
  */
@@ -777,7 +713,7 @@ type Props$A = {
777
713
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
778
714
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
779
715
  */
780
- margin?: Space$n | Margin$k;
716
+ margin?: Space$1 | Margin;
781
717
  /**
782
718
  * Size of the component.
783
719
  */
@@ -788,14 +724,13 @@ type Props$A = {
788
724
  tabIndex?: number;
789
725
  };
790
726
 
791
- declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
727
+ declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$A) => JSX.Element;
792
728
 
793
- type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
794
729
  type Size$2 = {
795
- top?: Space$m;
796
- bottom?: Space$m;
797
- left?: Space$m;
798
- right?: Space$m;
730
+ top?: Space$1;
731
+ bottom?: Space$1;
732
+ left?: Space$1;
733
+ right?: Space$1;
799
734
  };
800
735
  type Props$z = {
801
736
  /**
@@ -813,7 +748,7 @@ type Props$z = {
813
748
  * component. You can pass an object with 'top', 'bottom', 'left'
814
749
  * and 'right' properties in order to specify different padding sizes.
815
750
  */
816
- imagePadding?: Space$m | Size$2;
751
+ imagePadding?: Space$1 | Size$2;
817
752
  /**
818
753
  * Whether the image should appear in relation to the content.
819
754
  */
@@ -836,7 +771,7 @@ type Props$z = {
836
771
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
837
772
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
838
773
  */
839
- margin?: Space$m | Size$2;
774
+ margin?: Space$1 | Size$2;
840
775
  /**
841
776
  * Value of the tabindex attribute applied when the component is clickable.
842
777
  */
@@ -848,33 +783,29 @@ type Props$z = {
848
783
  /**
849
784
  * Custom content that will be placed inside the component.
850
785
  */
851
- children?: React.ReactNode;
786
+ children?: ReactNode;
852
787
  };
853
788
 
854
789
  declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
855
790
 
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
791
  type Props$y = {
864
792
  /**
865
- * Initial state of the checkbox, only when it is uncontrolled.
793
+ * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
866
794
  */
867
- defaultChecked?: boolean;
795
+ ariaLabel?: string;
868
796
  /**
869
797
  * If true, the component is checked. If undefined the component will be
870
798
  * uncontrolled and the value will be managed internally by the component.
871
799
  */
872
800
  checked?: boolean;
873
801
  /**
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.
802
+ * Initial state of the checkbox, only when it is uncontrolled.
876
803
  */
877
- value?: string;
804
+ defaultChecked?: boolean;
805
+ /**
806
+ * If true, the component will be disabled.
807
+ */
808
+ disabled?: boolean;
878
809
  /**
879
810
  * Text to be placed next to the checkbox.
880
811
  */
@@ -883,14 +814,22 @@ type Props$y = {
883
814
  * Whether the label should appear after or before the checkbox.
884
815
  */
885
816
  labelPosition?: "before" | "after";
817
+ /**
818
+ * Size of the margin to be applied to the component
819
+ * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
820
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
821
+ * in order to specify different margin sizes.
822
+ */
823
+ margin?: Space$1 | Margin;
886
824
  /**
887
825
  * Name attribute of the input element.
888
826
  */
889
827
  name?: string;
890
828
  /**
891
- * If true, the component will be disabled.
829
+ * This function will be called when the user clicks the checkbox.
830
+ * The new value will be passed as a parameter.
892
831
  */
893
- disabled?: boolean;
832
+ onChange?: (value: boolean) => void;
894
833
  /**
895
834
  * If true, the component will display '(Optional)' next to the label.
896
835
  */
@@ -899,18 +838,6 @@ type Props$y = {
899
838
  * If true, the component will not be mutable, meaning the user can not edit the control.
900
839
  */
901
840
  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
841
  /**
915
842
  * Size of the component.
916
843
  */
@@ -919,18 +846,15 @@ type Props$y = {
919
846
  * Value of the tabindex.
920
847
  */
921
848
  tabIndex?: number;
849
+ /**
850
+ * Will be passed to the value attribute of the html input element.
851
+ * When inside a form, this value will be only submitted if the checkbox is checked.
852
+ */
853
+ value?: string;
922
854
  };
923
855
 
924
856
  declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
925
857
 
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
858
  type Props$x = {
935
859
  /**
936
860
  * Text to be placed on the chip.
@@ -939,11 +863,11 @@ type Props$x = {
939
863
  /**
940
864
  * Element or path used as icon to be placed after the chip label.
941
865
  */
942
- suffixIcon?: string | SVG$b;
866
+ suffixIcon?: string | SVG;
943
867
  /**
944
868
  * Element or path used as icon to be placed before the chip label.
945
869
  */
946
- prefixIcon?: string | SVG$b;
870
+ prefixIcon?: string | SVG;
947
871
  /**
948
872
  * This function will be called when the suffix is clicked.
949
873
  */
@@ -960,23 +884,22 @@ type Props$x = {
960
884
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
961
885
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
962
886
  */
963
- margin?: Space$k | Margin$i;
887
+ margin?: Space$1 | Margin;
964
888
  /**
965
889
  * Value of the tabindex attribute.
966
890
  */
967
891
  tabIndex?: number;
968
892
  };
969
893
 
970
- declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
894
+ declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element;
971
895
 
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 = {
896
+ type Space = {
897
+ top?: string;
898
+ right?: string;
899
+ bottom?: string;
900
+ left?: string;
901
+ };
902
+ type Inset = {
980
903
  top?: string;
981
904
  right?: string;
982
905
  bottom?: string;
@@ -985,7 +908,7 @@ type Inset$1 = {
985
908
  type Background = {
986
909
  attachment?: string;
987
910
  clip?: string;
988
- color?: CoreColorTokensType;
911
+ color?: string;
989
912
  image?: string;
990
913
  origin?: string;
991
914
  position?: string;
@@ -994,8 +917,8 @@ type Background = {
994
917
  };
995
918
  type BorderProperties = {
996
919
  width?: string;
997
- style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset";
998
- color?: CoreColorTokensType;
920
+ style?: string;
921
+ color?: string;
999
922
  };
1000
923
  type Border = BorderProperties | {
1001
924
  top?: BorderProperties;
@@ -1043,7 +966,7 @@ type Props$w = {
1043
966
  /**
1044
967
  * Custom content inside the container.
1045
968
  */
1046
- children: React.ReactNode;
969
+ children?: ReactNode;
1047
970
  /**
1048
971
  * Sets the display CSS property.
1049
972
  * The set of values is limited to the ones related to the outer display type.
@@ -1069,19 +992,11 @@ type Props$w = {
1069
992
  * Based on the CSS property inset this prop is a shorthand that corresponds
1070
993
  * to the top, right, bottom, and/or left properties.
1071
994
  */
1072
- inset?: Inset$1;
995
+ inset?: Inset;
1073
996
  /**
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
997
+ * Size of the margin to be applied to the container.
1083
998
  */
1084
- maxWidth?: string;
999
+ margin?: string | Space;
1085
1000
  /**
1086
1001
  * Sets the max-width CSS property.
1087
1002
  *
@@ -1089,17 +1004,23 @@ type Props$w = {
1089
1004
  */
1090
1005
  maxHeight?: string;
1091
1006
  /**
1092
- * Sets the min-height CSS property.
1007
+ * Sets the max-height CSS property.
1093
1008
  *
1094
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
1009
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
1095
1010
  */
1096
- minWidth?: string;
1011
+ maxWidth?: string;
1097
1012
  /**
1098
1013
  * Sets the min-width CSS property.
1099
1014
  *
1100
1015
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
1101
1016
  */
1102
1017
  minHeight?: string;
1018
+ /**
1019
+ * Sets the min-height CSS property.
1020
+ *
1021
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
1022
+ */
1023
+ minWidth?: string;
1103
1024
  /**
1104
1025
  * Based on the CSS property outline allows configuring all properties related
1105
1026
  * to the outline of a container.
@@ -1112,11 +1033,9 @@ type Props$w = {
1112
1033
  */
1113
1034
  overflow?: Overflow;
1114
1035
  /**
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.
1036
+ * Size of the padding to be applied to the container.
1118
1037
  */
1119
- padding?: Space$j;
1038
+ padding?: string | Space;
1120
1039
  /**
1121
1040
  * Sets the position CSS property.
1122
1041
  *
@@ -1139,10 +1058,9 @@ type Props$w = {
1139
1058
 
1140
1059
  declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
1141
1060
 
1142
- type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
1143
1061
  type CommonItemProps = {
1144
- badge?: React.ReactElement;
1145
- icon?: string | SVG$a;
1062
+ badge?: ReactElement;
1063
+ icon?: string | SVG;
1146
1064
  label: string;
1147
1065
  };
1148
1066
  type Item = CommonItemProps & {
@@ -1164,21 +1082,13 @@ type Props$v = {
1164
1082
  items: (Item | GroupItem)[] | Section[];
1165
1083
  };
1166
1084
 
1167
- declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
1085
+ declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
1168
1086
 
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
1087
  type ActionCellsPropsType = {
1178
1088
  actions: ActionsPropsType;
1179
1089
  };
1180
1090
  type ActionsPropsType = Array<{
1181
- icon: string | SVG$9;
1091
+ icon: string | SVG;
1182
1092
  title: string;
1183
1093
  onClick: () => void;
1184
1094
  disabled?: boolean;
@@ -1197,12 +1107,12 @@ type Props$u = {
1197
1107
  * The center section of the table. Can be used to render custom
1198
1108
  * content in this area.
1199
1109
  */
1200
- children: React.ReactNode;
1110
+ children: ReactNode;
1201
1111
  /**
1202
1112
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1203
1113
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1204
1114
  */
1205
- margin?: Space$i | Margin$h;
1115
+ margin?: Space$1 | Margin;
1206
1116
  /**
1207
1117
  * Determines the visual style and layout
1208
1118
  * - "default": Default table size.
@@ -1231,7 +1141,7 @@ type GridColumn = {
1231
1141
  /**
1232
1142
  * Custom criteria for sorting the column.
1233
1143
  */
1234
- sortFn?: (_a: ReactNode, _b: ReactNode) => number;
1144
+ sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
1235
1145
  /**
1236
1146
  * Whether the column is draggable or not.
1237
1147
  */
@@ -1399,13 +1309,6 @@ declare const DxcDataGrid: {
1399
1309
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
1400
1310
  };
1401
1311
 
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
1312
  type Props$s = {
1410
1313
  /**
1411
1314
  * Initial value of the input element, only when it is uncontrolled.
@@ -1497,7 +1400,7 @@ type Props$s = {
1497
1400
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1498
1401
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1499
1402
  */
1500
- margin?: Space$h | Margin$g;
1403
+ margin?: Space$1 | Margin;
1501
1404
  /**
1502
1405
  * Size of the component.
1503
1406
  */
@@ -1506,6 +1409,10 @@ type Props$s = {
1506
1409
  * Value of the tabindex attribute.
1507
1410
  */
1508
1411
  tabIndex?: number;
1412
+ /**
1413
+ * Specifies a string to be used as the name for the date input element when no `label` is provided.
1414
+ */
1415
+ ariaLabel?: string;
1509
1416
  };
1510
1417
 
1511
1418
  declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
@@ -1536,7 +1443,7 @@ type Props$r = {
1536
1443
  * can lead to unpredictable behaviour for keyboard users, affecting
1537
1444
  * the order of focus and focus locking within the dialog.
1538
1445
  */
1539
- children: React.ReactNode;
1446
+ children: ReactNode;
1540
1447
  /**
1541
1448
  * Value of the tabindex applied to the close button.
1542
1449
  * Note that values greater than 0 are strongly discouraged. It can
@@ -1545,7 +1452,7 @@ type Props$r = {
1545
1452
  tabIndex?: number;
1546
1453
  };
1547
1454
 
1548
- declare const DxcDialog: ({ closable, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
1455
+ declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
1549
1456
 
1550
1457
  type Props$q = {
1551
1458
  /**
@@ -1568,17 +1475,10 @@ type Props$q = {
1568
1475
  decorative?: boolean;
1569
1476
  };
1570
1477
 
1571
- declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
1478
+ declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => react_jsx_runtime.JSX.Element;
1572
1479
 
1573
- declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
1480
+ declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element;
1574
1481
 
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
1482
  type FileData = {
1583
1483
  /**
1584
1484
  * Selected file.
@@ -1644,7 +1544,7 @@ type CommonProps$5 = {
1644
1544
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1645
1545
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1646
1546
  */
1647
- margin?: Space$g | Margin$f;
1547
+ margin?: Space$1 | Margin;
1648
1548
  /**
1649
1549
  * Value of the tabindex attribute.
1650
1550
  */
@@ -1683,12 +1583,12 @@ type Props$p = DropModeProps | FileModeProps;
1683
1583
  declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
1684
1584
 
1685
1585
  type Gap$1 = {
1686
- rowGap: CoreSpacingTokensType;
1687
- columnGap?: CoreSpacingTokensType;
1586
+ rowGap: string;
1587
+ columnGap?: string;
1688
1588
  } | {
1689
- rowGap?: CoreSpacingTokensType;
1690
- columnGap: CoreSpacingTokensType;
1691
- } | CoreSpacingTokensType;
1589
+ rowGap?: string;
1590
+ columnGap: string;
1591
+ } | string;
1692
1592
  type CommonProps$4 = {
1693
1593
  /**
1694
1594
  * Sets the justify-content CSS property.
@@ -1765,52 +1665,54 @@ type Props$o = CommonProps$4 & {
1765
1665
  /**
1766
1666
  * Custom content inside the flex container.
1767
1667
  */
1768
- children: React.ReactNode;
1668
+ children: ReactNode;
1769
1669
  };
1770
1670
 
1771
1671
  declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
1772
1672
 
1773
- type Gap = {
1774
- rowGap: CoreSpacingTokensType;
1775
- columnGap?: CoreSpacingTokensType;
1673
+ type Gap = string | {
1674
+ columnGap?: string;
1675
+ rowGap: string;
1776
1676
  } | {
1777
- rowGap?: CoreSpacingTokensType;
1778
- columnGap: CoreSpacingTokensType;
1779
- } | CoreSpacingTokensType;
1677
+ columnGap: string;
1678
+ rowGap?: string;
1679
+ };
1780
1680
  type GridCell = {
1781
- start: number | string;
1782
1681
  end: number | string;
1682
+ start: number | string;
1783
1683
  };
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";
1684
+ type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stretch";
1685
+ type PlaceContentValues = "baseline" | "center" | "end" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch";
1686
+ type PlaceItemsValues = "baseline" | "center" | "end" | "normal" | "start" | "stretch";
1787
1687
  type PlaceObject<Type, Suffix extends string> = {
1788
1688
  [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
1789
1689
  };
1790
1690
  type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
1791
- justify?: PlaceValues;
1792
1691
  align: PlaceValues;
1692
+ justify?: PlaceValues;
1793
1693
  }, Element> | PlaceObject<{
1794
- justify: PlaceValues;
1795
1694
  align?: PlaceValues;
1695
+ justify: PlaceValues;
1796
1696
  }, Element> | PlaceValues;
1797
1697
  type GridItemProps = {
1798
1698
  /**
1799
1699
  * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
1800
1700
  */
1801
1701
  areaName?: string;
1702
+ /**
1703
+ * Sets a custom HTML tag.
1704
+ */
1705
+ as?: keyof HTMLElementTagNameMap;
1706
+ /**
1707
+ * Custom content inside the grid container.
1708
+ */
1709
+ children: ReactNode;
1802
1710
  /**
1803
1711
  * Sets the grid-column CSS property.
1804
1712
  *
1805
1713
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
1806
1714
  */
1807
1715
  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
1716
  /**
1815
1717
  * Sets the place-self CSS property.
1816
1718
  *
@@ -1818,13 +1720,11 @@ type GridItemProps = {
1818
1720
  */
1819
1721
  placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
1820
1722
  /**
1821
- * Sets a custom HTML tag.
1822
- */
1823
- as?: keyof HTMLElementTagNameMap;
1824
- /**
1825
- * Custom content inside the grid container.
1723
+ * Sets the grid-row CSS property.
1724
+ *
1725
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
1826
1726
  */
1827
- children: React.ReactNode;
1727
+ row?: number | string | GridCell;
1828
1728
  };
1829
1729
  type Props$n = GridItemProps & {
1830
1730
  /**
@@ -1850,7 +1750,7 @@ type Props$n = GridItemProps & {
1850
1750
  *
1851
1751
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
1852
1752
  */
1853
- gap?: CoreSpacingTokensType | Gap;
1753
+ gap?: Gap;
1854
1754
  /**
1855
1755
  * Sets the place-content CSS property.
1856
1756
  *
@@ -1888,13 +1788,6 @@ declare const DxcGrid: {
1888
1788
  Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
1889
1789
  };
1890
1790
 
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
1791
  type Props$m = {
1899
1792
  /**
1900
1793
  * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
@@ -1918,7 +1811,7 @@ type Props$m = {
1918
1811
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1919
1812
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1920
1813
  */
1921
- margin?: Space$f | Margin$e;
1814
+ margin?: Space$1 | Margin;
1922
1815
  };
1923
1816
 
1924
1817
  declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
@@ -1982,60 +1875,52 @@ type Props$l = {
1982
1875
  /**
1983
1876
  * This function will be called when the image is loaded.
1984
1877
  */
1985
- onLoad?: React.ReactEventHandler<HTMLImageElement>;
1878
+ onLoad?: ReactEventHandler<HTMLImageElement>;
1986
1879
  /**
1987
1880
  * This function will be called when the image fails to load.
1988
1881
  */
1989
- onError?: React.ReactEventHandler<HTMLImageElement>;
1882
+ onError?: ReactEventHandler<HTMLImageElement>;
1990
1883
  };
1991
1884
 
1992
1885
  declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l): react_jsx_runtime.JSX.Element;
1993
1886
 
1994
1887
  type Props$k = {
1995
1888
  /**
1996
- * Applies the spacing scale to all sides.
1889
+ * Applies the spacing scale to the bottom side.
1997
1890
  */
1998
- space?: CoreSpacingTokensType;
1891
+ bottom?: string;
1999
1892
  /**
2000
- * Applies the spacing scale to the left and right sides.
1893
+ * Custom content inside the inset.
2001
1894
  */
2002
- horizontal?: CoreSpacingTokensType;
1895
+ children: ReactNode;
2003
1896
  /**
2004
- * Applies the spacing scale to the top and bottom sides.
1897
+ * Applies the spacing scale to the left and right sides.
2005
1898
  */
2006
- vertical?: CoreSpacingTokensType;
1899
+ horizontal?: string;
2007
1900
  /**
2008
- * Applies the spacing scale to the top side.
1901
+ * Applies the spacing scale to the left side.
2009
1902
  */
2010
- top?: CoreSpacingTokensType;
1903
+ left?: string;
2011
1904
  /**
2012
1905
  * Applies the spacing scale to the right side.
2013
1906
  */
2014
- right?: CoreSpacingTokensType;
1907
+ right?: string;
2015
1908
  /**
2016
- * Applies the spacing scale to the bottom side.
1909
+ * Applies the spacing scale to all sides.
2017
1910
  */
2018
- bottom?: CoreSpacingTokensType;
1911
+ space?: string;
2019
1912
  /**
2020
- * Applies the spacing scale to the left side.
1913
+ * Applies the spacing scale to the top side.
2021
1914
  */
2022
- left?: CoreSpacingTokensType;
1915
+ top?: string;
2023
1916
  /**
2024
- * Custom content inside the inset.
1917
+ * Applies the spacing scale to the top and bottom sides.
2025
1918
  */
2026
- children: React.ReactNode;
1919
+ vertical?: string;
2027
1920
  };
2028
1921
 
2029
- declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
1922
+ declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$k): react_jsx_runtime.JSX.Element;
2030
1923
 
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
1924
  type LinkProps = {
2040
1925
  /**
2041
1926
  * If true, the link is disabled.
@@ -2048,7 +1933,7 @@ type LinkProps = {
2048
1933
  /**
2049
1934
  * Material Symbol name or SVG element as the icon that will be placed next to the link text.
2050
1935
  */
2051
- icon?: string | SVG$8;
1936
+ icon?: string | SVG;
2052
1937
  /**
2053
1938
  * Indicates the position of the icon in the component.
2054
1939
  */
@@ -2074,7 +1959,7 @@ type LinkProps = {
2074
1959
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2075
1960
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2076
1961
  */
2077
- margin?: Space$e | Margin$d;
1962
+ margin?: Space$1 | Margin;
2078
1963
  /**
2079
1964
  * Value of the tabindex.
2080
1965
  */
@@ -2083,7 +1968,6 @@ type LinkProps = {
2083
1968
 
2084
1969
  declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
2085
1970
 
2086
- type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2087
1971
  type TabProps$1 = {
2088
1972
  /**
2089
1973
  * Whether the tab is active or not.
@@ -2100,7 +1984,7 @@ type TabProps$1 = {
2100
1984
  /**
2101
1985
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
2102
1986
  */
2103
- icon?: string | SVG$7;
1987
+ icon?: string | SVG;
2104
1988
  /**
2105
1989
  * If the value is 'true', an empty badge will appear.
2106
1990
  * If it is 'false', no badge will appear.
@@ -2122,7 +2006,7 @@ type Props$j = {
2122
2006
  /**
2123
2007
  * Contains one or more DxcNavTabs.Tab.
2124
2008
  */
2125
- children: React.ReactNode;
2009
+ children: ReactNode;
2126
2010
  /**
2127
2011
  * Value of the tabindex attribute applied to each tab.
2128
2012
  */
@@ -2134,13 +2018,6 @@ declare const DxcNavTabs: {
2134
2018
  Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
2135
2019
  };
2136
2020
 
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
2021
  type Props$i = {
2145
2022
  /**
2146
2023
  * Text to be placed above the number.
@@ -2249,7 +2126,7 @@ type Props$i = {
2249
2126
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2250
2127
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2251
2128
  */
2252
- margin?: Space$d | Margin$c;
2129
+ margin?: Space$1 | Margin;
2253
2130
  /**
2254
2131
  * Size of the component.
2255
2132
  */
@@ -2258,6 +2135,14 @@ type Props$i = {
2258
2135
  * Value of the tabindex attribute.
2259
2136
  */
2260
2137
  tabIndex?: number;
2138
+ /**
2139
+ * Specifies a string to be used as the name for the number input element when no `label` is provided.
2140
+ */
2141
+ ariaLabel?: string;
2142
+ /**
2143
+ * Decides whether the number input has actions to increase or decrease the value, following the defined step.
2144
+ */
2145
+ showControls?: boolean;
2261
2146
  };
2262
2147
 
2263
2148
  declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2303,16 +2188,9 @@ type Props$h = {
2303
2188
  declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
2304
2189
 
2305
2190
  declare function DxcParagraph({ children }: {
2306
- children: React.ReactNode;
2191
+ children: ReactNode;
2307
2192
  }): react_jsx_runtime.JSX.Element;
2308
2193
 
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
2194
  type Props$g = {
2317
2195
  /**
2318
2196
  * Text to be placed above the password input.
@@ -2402,7 +2280,7 @@ type Props$g = {
2402
2280
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2403
2281
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2404
2282
  */
2405
- margin?: Space$c | Margin$b;
2283
+ margin?: Space$1 | Margin;
2406
2284
  /**
2407
2285
  * Size of the component.
2408
2286
  */
@@ -2411,16 +2289,19 @@ type Props$g = {
2411
2289
  * Value of the tabindex attribute.
2412
2290
  */
2413
2291
  tabIndex?: number;
2292
+ /**
2293
+ * Specifies a string to be used as the name for the password input element when no `label` is provided.
2294
+ */
2295
+ ariaLabel?: string;
2414
2296
  };
2415
2297
 
2416
2298
  declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
2417
2299
 
2418
- type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2419
2300
  type Size$1 = {
2420
- top?: Space$b;
2421
- bottom?: Space$b;
2422
- left?: Space$b;
2423
- right?: Space$b;
2301
+ top?: Space$1;
2302
+ bottom?: Space$1;
2303
+ left?: Space$1;
2304
+ right?: Space$1;
2424
2305
  };
2425
2306
  type Props$f = {
2426
2307
  /**
@@ -2449,10 +2330,14 @@ type Props$f = {
2449
2330
  * an object with 'top', 'bottom', 'left' and 'right' properties
2450
2331
  * in order to specify different margin sizes.
2451
2332
  */
2452
- margin?: Space$b | Size$1;
2333
+ margin?: Space$1 | Size$1;
2334
+ /**
2335
+ * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
2336
+ */
2337
+ ariaLabel?: string;
2453
2338
  };
2454
2339
 
2455
- declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
2340
+ declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
2456
2341
 
2457
2342
  type Link = {
2458
2343
  /**
@@ -2572,22 +2457,19 @@ type RadioGroupProps = {
2572
2457
  * Value of the tabindex attribute.
2573
2458
  */
2574
2459
  tabIndex?: number;
2460
+ /**
2461
+ * Specifies a string to be used as the name for the radio group when no `label` is provided.
2462
+ */
2463
+ ariaLabel?: string;
2575
2464
  };
2576
2465
 
2577
2466
  declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
2578
2467
 
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
2468
  type Column = {
2587
2469
  /**
2588
2470
  * Column display value.
2589
2471
  */
2590
- displayValue: React.ReactNode;
2472
+ displayValue: ReactNode;
2591
2473
  /**
2592
2474
  * Boolean value to indicate whether the column is sortable or not.
2593
2475
  */
@@ -2597,7 +2479,7 @@ type Cell = {
2597
2479
  /**
2598
2480
  * Value to be displayed in the cell.
2599
2481
  */
2600
- displayValue: React.ReactNode;
2482
+ displayValue: ReactNode;
2601
2483
  /**
2602
2484
  * Value to be used when sorting the table by that
2603
2485
  * column. If not indicated displayValue will be used for sorting.
@@ -2619,7 +2501,7 @@ type CommonProps$3 = {
2619
2501
  * Size of the margin to be applied to the component. You can pass an object with 'top',
2620
2502
  * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2621
2503
  */
2622
- margin?: Space$a | Margin$a;
2504
+ margin?: Space$1 | Margin;
2623
2505
  /**
2624
2506
  * Value of the tabindex attribute applied to the sortable icon.
2625
2507
  */
@@ -2681,14 +2563,6 @@ declare const DxcResultsetTable: {
2681
2563
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
2682
2564
  };
2683
2565
 
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
2566
  type ListOptionGroupType = {
2693
2567
  /**
2694
2568
  * Label of the group to be shown in the select's listbox.
@@ -2706,7 +2580,7 @@ type ListOptionType = {
2706
2580
  * is the chosen one, take into account that the component's
2707
2581
  * color styling tokens will not be applied to the image.
2708
2582
  */
2709
- icon?: string | SVG$6;
2583
+ icon?: string | SVG;
2710
2584
  /**
2711
2585
  * Label of the option to be shown in the select's listbox.
2712
2586
  */
@@ -2772,7 +2646,7 @@ type CommonProps$2 = {
2772
2646
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2773
2647
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2774
2648
  */
2775
- margin?: Space$9 | Margin$9;
2649
+ margin?: Space$1 | Margin;
2776
2650
  /**
2777
2651
  * Size of the component.
2778
2652
  */
@@ -2781,6 +2655,10 @@ type CommonProps$2 = {
2781
2655
  * Value of the tabindex attribute.
2782
2656
  */
2783
2657
  tabIndex?: number;
2658
+ /**
2659
+ * Specifies a string to be used as the name for the select element when no `label` is provided.
2660
+ */
2661
+ ariaLabel?: string;
2784
2662
  };
2785
2663
  type SingleSelect = CommonProps$2 & {
2786
2664
  /**
@@ -2858,62 +2736,53 @@ type Props$c = SingleSelect | MultipleSelect;
2858
2736
 
2859
2737
  declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
2860
2738
 
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
2739
  type Props$b = {
2869
2740
  /**
2870
- * Text to be placed above the slider.
2741
+ * Specifies a string to be used as the name for the slider element when no `label` is provided.
2871
2742
  */
2872
- label?: string;
2873
- /**
2874
- * Name attribute of the input element.
2875
- */
2876
- name?: string;
2743
+ ariaLabel?: string;
2877
2744
  /**
2878
2745
  * Initial value of the slider, only when it is uncontrolled.
2879
2746
  */
2880
2747
  defaultValue?: number;
2881
2748
  /**
2882
- * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
2749
+ * If true, the component will be disabled.
2883
2750
  */
2884
- value?: number;
2751
+ disabled?: boolean;
2885
2752
  /**
2886
2753
  * Helper text to be placed above the slider.
2887
2754
  */
2888
2755
  helperText?: string;
2889
2756
  /**
2890
- * The minimum value available for selection.
2757
+ * Text to be placed above the slider.
2891
2758
  */
2892
- minValue?: number;
2759
+ label?: string;
2893
2760
  /**
2894
- * The maximum value available for selection.
2761
+ * This function will be used to format the labels displayed next to the slider.
2762
+ * The value will be passed as parameter and the function must return the formatted value.
2895
2763
  */
2896
- maxValue?: number;
2764
+ labelFormatCallback?: (value: number) => string;
2897
2765
  /**
2898
- * The step interval between values available for selection.
2766
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2767
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2899
2768
  */
2900
- step?: number;
2769
+ margin?: Space$1 | Margin;
2901
2770
  /**
2902
- * Whether the min/max value labels should be displayed next to the slider
2771
+ * Whether the marks between each step should be shown or not.
2903
2772
  */
2904
- showLimitsValues?: boolean;
2773
+ marks?: boolean;
2905
2774
  /**
2906
- * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
2775
+ * The maximum value available for selection.
2907
2776
  */
2908
- showInput?: boolean;
2777
+ maxValue?: number;
2909
2778
  /**
2910
- * If true, the component will be disabled.
2779
+ * The minimum value available for selection.
2911
2780
  */
2912
- disabled?: boolean;
2781
+ minValue?: number;
2913
2782
  /**
2914
- * Whether the marks between each step should be shown or not.
2783
+ * Name attribute of the input element.
2915
2784
  */
2916
- marks?: boolean;
2785
+ name?: string;
2917
2786
  /**
2918
2787
  * This function will be called when the slider changes its value, as it's being dragged.
2919
2788
  * The new value will be passed as a parameter when this function is executed.
@@ -2925,30 +2794,29 @@ type Props$b = {
2925
2794
  */
2926
2795
  onDragEnd?: (value: number) => void;
2927
2796
  /**
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.
2797
+ * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
2930
2798
  */
2931
- labelFormatCallback?: (value: number) => string;
2799
+ showInput?: boolean;
2932
2800
  /**
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.
2801
+ * Whether the min/max value labels should be displayed next to the slider
2935
2802
  */
2936
- margin?: Space$8 | Margin$8;
2803
+ showLimitsValues?: boolean;
2937
2804
  /**
2938
2805
  * Size of the component.
2939
2806
  */
2940
2807
  size?: "medium" | "large" | "fillParent";
2808
+ /**
2809
+ * The step interval between values available for selection.
2810
+ */
2811
+ step?: number;
2812
+ /**
2813
+ * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
2814
+ */
2815
+ value?: number;
2941
2816
  };
2942
2817
 
2943
2818
  declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
2944
2819
 
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
2820
  type Props$a = {
2953
2821
  /**
2954
2822
  * Text to be placed inside the spinner.
@@ -2971,10 +2839,14 @@ type Props$a = {
2971
2839
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2972
2840
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2973
2841
  */
2974
- margin?: Space$7 | Margin$7;
2842
+ margin?: Space$1 | Margin;
2843
+ /**
2844
+ * 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.
2845
+ */
2846
+ ariaLabel?: string;
2975
2847
  };
2976
2848
 
2977
- declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
2849
+ declare const DxcSpinner: ({ ariaLabel, label, margin, mode, showValue, value }: Props$a) => react_jsx_runtime.JSX.Element;
2978
2850
 
2979
2851
  type Mode = "default" | "info" | "success" | "warning" | "error";
2980
2852
  type Size = "small" | "medium" | "large";
@@ -2993,15 +2865,8 @@ type Props$9 = {
2993
2865
  size?: Size;
2994
2866
  };
2995
2867
 
2996
- declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
2868
+ declare function DxcStatusLight({ label, mode, size }: Props$9): react_jsx_runtime.JSX.Element;
2997
2869
 
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
2870
  type Props$8 = {
3006
2871
  /**
3007
2872
  * Initial state of the switch, only when it is uncontrolled.
@@ -3046,7 +2911,7 @@ type Props$8 = {
3046
2911
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3047
2912
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3048
2913
  */
3049
- margin?: Space$6 | Margin$6;
2914
+ margin?: Space$1 | Margin;
3050
2915
  /**
3051
2916
  * Size of the component.
3052
2917
  */
@@ -3055,6 +2920,10 @@ type Props$8 = {
3055
2920
  * Value of the tabindex.
3056
2921
  */
3057
2922
  tabIndex?: number;
2923
+ /**
2924
+ * Specifies a string to be used as the name for the switch element when no `label` is provided.
2925
+ */
2926
+ ariaLabel?: string;
3058
2927
  };
3059
2928
 
3060
2929
  declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
@@ -3064,14 +2933,6 @@ declare const DxcTable: {
3064
2933
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
3065
2934
  };
3066
2935
 
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
2936
  type TabCommonProps = {
3076
2937
  /**
3077
2938
  * Whether the tab is disabled or not.
@@ -3094,7 +2955,7 @@ type TabLabelProps = TabCommonProps & {
3094
2955
  /**
3095
2956
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3096
2957
  */
3097
- icon?: string | SVG$5;
2958
+ icon?: string | SVG;
3098
2959
  };
3099
2960
  type TabIconProps = TabCommonProps & {
3100
2961
  /**
@@ -3104,57 +2965,62 @@ type TabIconProps = TabCommonProps & {
3104
2965
  /**
3105
2966
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3106
2967
  */
3107
- icon: string | SVG$5;
2968
+ icon: string | SVG;
3108
2969
  };
3109
2970
  type TabProps = {
3110
2971
  defaultActive?: boolean;
3111
2972
  active?: boolean;
3112
- icon?: string | SVG$5;
3113
- label?: string;
2973
+ icon?: string | SVG;
2974
+ label: string;
3114
2975
  title?: string;
3115
2976
  disabled?: boolean;
3116
2977
  notificationNumber?: boolean | number;
3117
- children: React.ReactNode;
2978
+ children: ReactNode;
3118
2979
  onClick?: () => void;
3119
2980
  onHover?: () => void;
3120
2981
  };
3121
2982
  type LegacyProps = {
3122
2983
  /**
3123
- * Initially active tab, only when it is uncontrolled.
3124
- */
3125
- defaultActiveTabIndex?: number;
3126
- /**
2984
+ * @deprecated This prop is deprecated and will be removed in future versions. Use the children prop instead.
3127
2985
  * The index of the active tab. If undefined, the component will be
3128
2986
  * uncontrolled and the active tab will be managed internally by the component.
3129
2987
  */
3130
2988
  activeTabIndex?: number;
3131
2989
  /**
3132
- * An array of objects representing the tabs.
2990
+ * @deprecated This prop is deprecated and will be removed in future versions.
2991
+ * Initially active tab, only when it is uncontrolled.
3133
2992
  */
3134
- tabs?: (TabLabelProps | TabIconProps)[];
2993
+ defaultActiveTabIndex?: number;
3135
2994
  /**
3136
2995
  * Whether the icon should appear above or to the left of the label.
3137
2996
  */
3138
2997
  iconPosition?: "top" | "left";
3139
2998
  /**
2999
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3000
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3001
+ */
3002
+ margin?: Space$1 | Margin;
3003
+ /**
3004
+ * @deprecated This prop is deprecated and will be removed in future versions.
3140
3005
  * This function will be called when the user clicks on a tab. The index of the
3141
3006
  * clicked tab will be passed as a parameter.
3142
3007
  */
3143
3008
  onTabClick?: (index: number) => void;
3144
3009
  /**
3010
+ * @deprecated This prop is deprecated and will be removed in future versions.
3145
3011
  * This function will be called when the user hovers a tab.The index of the
3146
3012
  * hovered tab will be passed as a parameter.
3147
3013
  */
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;
3014
+ onTabHover?: (index: number | null) => void;
3154
3015
  /**
3155
3016
  * Value of the tabindex attribute applied to each tab.
3156
3017
  */
3157
3018
  tabIndex?: number;
3019
+ /**
3020
+ * @deprecated This prop is deprecated and will be removed in future versions.
3021
+ * An array of objects representing the tabs.
3022
+ */
3023
+ tabs?: (TabLabelProps | TabIconProps)[];
3158
3024
  };
3159
3025
  type NewProps = {
3160
3026
  /**
@@ -3165,7 +3031,7 @@ type NewProps = {
3165
3031
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3166
3032
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3167
3033
  */
3168
- margin?: Space$5 | Margin$5;
3034
+ margin?: Space$1 | Margin;
3169
3035
  /**
3170
3036
  * Value of the tabindex attribute applied to each tab.
3171
3037
  */
@@ -3173,23 +3039,15 @@ type NewProps = {
3173
3039
  /**
3174
3040
  * Contains one or more DxcTabs.Tab.
3175
3041
  */
3176
- children?: React.ReactNode;
3042
+ children?: ReactNode;
3177
3043
  };
3178
3044
  type Props$7 = LegacyProps & NewProps;
3179
3045
 
3180
3046
  declare const DxcTabs: {
3181
- ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): JSX.Element;
3047
+ ({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$7): false | react_jsx_runtime.JSX.Element;
3182
3048
  Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
3183
3049
  };
3184
3050
 
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
3051
  type TagCommonProps = {
3194
3052
  /**
3195
3053
  * If defined, the tag will be displayed as an anchor, using this prop as "href".
@@ -3218,7 +3076,7 @@ type TagCommonProps = {
3218
3076
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3219
3077
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3220
3078
  */
3221
- margin?: Space$4 | Margin$4;
3079
+ margin?: Space$1 | Margin;
3222
3080
  /**
3223
3081
  * Size of the component.
3224
3082
  */
@@ -3232,7 +3090,7 @@ type TagLabelProps = TagCommonProps & {
3232
3090
  /**
3233
3091
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3234
3092
  */
3235
- icon?: string | SVG$4;
3093
+ icon?: string | SVG;
3236
3094
  /**
3237
3095
  * Text to be placed next inside the tag.
3238
3096
  */
@@ -3242,7 +3100,7 @@ type TagIconProps = TagCommonProps & {
3242
3100
  /**
3243
3101
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3244
3102
  */
3245
- icon: string | SVG$4;
3103
+ icon: string | SVG;
3246
3104
  /**
3247
3105
  * Text to be placed next inside the tag.
3248
3106
  */
@@ -3255,13 +3113,6 @@ type Props$6 = TagLabelProps | TagIconProps;
3255
3113
  */
3256
3114
  declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
3257
3115
 
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
3116
  type Props$5 = {
3266
3117
  /**
3267
3118
  * Text to be placed above the textarea.
@@ -3381,7 +3232,7 @@ type Props$5 = {
3381
3232
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3382
3233
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3383
3234
  */
3384
- margin?: Space$3 | Margin$3;
3235
+ margin?: Space$1 | Margin;
3385
3236
  /**
3386
3237
  * Size of the component.
3387
3238
  */
@@ -3390,18 +3241,14 @@ type Props$5 = {
3390
3241
  * Value of the tabindex attribute.
3391
3242
  */
3392
3243
  tabIndex?: number;
3244
+ /**
3245
+ * Specifies a string to be used as the name for the textarea element when no `label` is provided.
3246
+ */
3247
+ ariaLabel?: string;
3393
3248
  };
3394
3249
 
3395
3250
  declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
3396
3251
 
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
3252
  type Action$1 = {
3406
3253
  /**
3407
3254
  * This function will be called when the user clicks the action.
@@ -3410,7 +3257,7 @@ type Action$1 = {
3410
3257
  /**
3411
3258
  * Icon to be placed in the action..
3412
3259
  */
3413
- icon: string | SVG$3;
3260
+ icon: string | SVG;
3414
3261
  /**
3415
3262
  * Text representing advisory information related
3416
3263
  * to the button's action. Under the hood, this prop also serves
@@ -3552,7 +3399,7 @@ type Props$4 = {
3552
3399
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3553
3400
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3554
3401
  */
3555
- margin?: Space$2 | Margin$2;
3402
+ margin?: Space$1 | Margin;
3556
3403
  /**
3557
3404
  * Size of the component.
3558
3405
  */
@@ -3561,44 +3408,69 @@ type Props$4 = {
3561
3408
  * Value of the tabindex attribute.
3562
3409
  */
3563
3410
  tabIndex?: number;
3411
+ /**
3412
+ * Specifies a string to be used as the name for the textInput element when no `label` is provided.
3413
+ */
3414
+ ariaLabel?: string;
3564
3415
  };
3565
3416
 
3566
3417
  declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
3567
3418
 
3568
- type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3569
3419
  type Action = {
3570
- icon?: string | SVG$2;
3420
+ /**
3421
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
3422
+ */
3423
+ icon?: string | SVG;
3424
+ /**
3425
+ * The label of the action.
3426
+ */
3571
3427
  label: string;
3428
+ /**
3429
+ * The function that will be executed when the user clicks on the action button.
3430
+ */
3572
3431
  onClick: () => void;
3573
3432
  };
3574
3433
  type CommonProps$1 = {
3434
+ /**
3435
+ * Tertiary button which performs a custom action, specified by the user.
3436
+ */
3575
3437
  action?: Action;
3438
+ /**
3439
+ * Message to be displayed as a toast.
3440
+ */
3576
3441
  message: string;
3577
3442
  };
3578
3443
  type DefaultToast = CommonProps$1 & {
3579
- icon?: string | SVG$2;
3444
+ /**
3445
+ * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
3446
+ * When using Material Symbols, replace spaces with underscores.
3447
+ * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
3448
+ */
3449
+ icon?: string | SVG;
3580
3450
  };
3581
3451
  type LoadingToast = CommonProps$1 & {
3582
3452
  loading: boolean;
3583
3453
  };
3584
3454
  type SemanticToast = CommonProps$1 & {
3455
+ /**
3456
+ * Flag that allows to hide the semantic icon of the toast.
3457
+ */
3585
3458
  hideSemanticIcon?: boolean;
3586
3459
  };
3587
3460
  type ToastsQueuePropsType = {
3461
+ /**
3462
+ * Duration in milliseconds before a toast automatically hides itself.
3463
+ * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
3464
+ */
3588
3465
  duration?: number;
3589
- children: React.ReactNode;
3466
+ /**
3467
+ * Tree of components from which the useToast hook can be triggered.
3468
+ */
3469
+ children: ReactNode;
3590
3470
  };
3591
3471
 
3592
3472
  declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
3593
3473
 
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
3474
  type OptionIcon = {
3603
3475
  /**
3604
3476
  * String with the option display value.
@@ -3607,7 +3479,7 @@ type OptionIcon = {
3607
3479
  /**
3608
3480
  * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3609
3481
  */
3610
- icon: string | SVG$1;
3482
+ icon: string | SVG;
3611
3483
  /**
3612
3484
  * Value for the HTML properties title and aria-label.
3613
3485
  * When a label is defined, this prop can not be use.
@@ -3622,7 +3494,7 @@ type OptionLabel = {
3622
3494
  /**
3623
3495
  * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3624
3496
  */
3625
- icon?: string | SVG$1;
3497
+ icon?: string | SVG;
3626
3498
  /**
3627
3499
  * Value for the HTML properties title and aria-label.
3628
3500
  * When a label is defined, this prop can not be use.
@@ -3656,7 +3528,7 @@ type CommonProps = {
3656
3528
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3657
3529
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3658
3530
  */
3659
- margin?: Space$1 | Margin$1;
3531
+ margin?: Space$1 | Margin;
3660
3532
  /**
3661
3533
  * Value of the tabindex.
3662
3534
  */
@@ -3708,24 +3580,24 @@ declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChang
3708
3580
 
3709
3581
  type Props$2 = {
3710
3582
  /**
3711
- * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
3583
+ * Content in which the Tooltip will be displayed.
3712
3584
  */
3713
- position?: "bottom" | "top" | "left" | "right";
3585
+ children: ReactNode;
3714
3586
  /**
3715
3587
  * Text to be displayed inside the tooltip.
3716
3588
  */
3717
- label: string;
3589
+ label?: string;
3718
3590
  /**
3719
- * Content in which the Tooltip will be displayed.
3591
+ * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
3720
3592
  */
3721
- children: React.ReactNode;
3593
+ position?: "bottom" | "top" | "left" | "right";
3722
3594
  };
3723
3595
 
3724
3596
  declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
3725
3597
 
3726
3598
  type Props$1 = {
3727
3599
  as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
3728
- children: React.ReactNode;
3600
+ children: ReactNode;
3729
3601
  color?: string;
3730
3602
  display?: "inline" | "block";
3731
3603
  fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
@@ -3740,16 +3612,8 @@ type Props$1 = {
3740
3612
  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
3741
3613
  };
3742
3614
 
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;
3615
+ declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
3744
3616
 
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
3617
  type StepProps = {
3754
3618
  /**
3755
3619
  * Step label.
@@ -3798,41 +3662,41 @@ type Props = {
3798
3662
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3799
3663
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3800
3664
  */
3801
- margin?: Space | Margin;
3665
+ margin?: Space$1 | Margin;
3802
3666
  /**
3803
3667
  * Value of the tabindex attribute that is given to all the steps.
3804
3668
  */
3805
3669
  tabIndex?: number;
3806
3670
  };
3807
3671
 
3808
- declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
3672
+ declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react_jsx_runtime.JSX.Element;
3809
3673
 
3810
3674
  declare const componentTokens: {
3811
3675
  accordion: {
3812
3676
  backgroundColor: string;
3813
3677
  hoverBackgroundColor: string;
3678
+ focusBackgroundColor: string;
3679
+ activeBackgroundColor: string;
3814
3680
  arrowColor: string;
3815
3681
  disabledArrowColor: string;
3682
+ subLabelFontFamily: string;
3683
+ subLabelFontSize: string;
3684
+ subLabelFontWeight: string;
3685
+ subLabelFontStyle: string;
3686
+ subLabelFontColor: string;
3687
+ disabledSubLabelFontColor: string;
3816
3688
  assistiveTextFontFamily: string;
3817
3689
  assistiveTextFontSize: string;
3818
3690
  assistiveTextFontWeight: string;
3819
3691
  assistiveTextFontStyle: string;
3820
- assistiveTextLetterSpacing: string;
3821
3692
  assistiveTextFontColor: string;
3822
3693
  disabledAssistiveTextFontColor: string;
3823
- assistiveTextMinWidth: string;
3824
- assistiveTextPaddingRight: string;
3825
- assistiveTextPaddingLeft: string;
3826
3694
  titleLabelFontFamily: string;
3827
3695
  titleLabelFontSize: string;
3828
3696
  titleLabelFontWeight: string;
3829
3697
  titleLabelFontStyle: string;
3830
3698
  titleLabelFontColor: string;
3831
3699
  disabledTitleLabelFontColor: string;
3832
- titleLabelPaddingTop: string;
3833
- titleLabelPaddingBottom: string;
3834
- titleLabelPaddingLeft: string;
3835
- titleLabelPaddingRight: string;
3836
3700
  focusBorderColor: string;
3837
3701
  focusBorderStyle: string;
3838
3702
  focusBorderThickness: string;
@@ -3840,16 +3704,14 @@ declare const componentTokens: {
3840
3704
  boxShadowOffsetX: string;
3841
3705
  boxShadowOffsetY: string;
3842
3706
  boxShadowBlur: string;
3707
+ boxShadowSpread: string;
3843
3708
  boxShadowColor: string;
3844
3709
  iconColor: string;
3845
3710
  disabledIconColor: string;
3846
3711
  iconSize: string;
3847
- iconMarginLeft: string;
3848
- iconMarginRight: string;
3849
- accordionGroupSeparatorBorderColor: string;
3850
- accordionGroupSeparatorBorderThickness: string;
3851
- accordionGroupSeparatorBorderRadius: string;
3852
- accordionGroupSeparatorBorderStyle: string;
3712
+ accordionSeparatorBorderColor: string;
3713
+ accordionSeparatorBorderThickness: string;
3714
+ accordionSeparatorBorderStyle: string;
3853
3715
  };
3854
3716
  alert: {
3855
3717
  errorBackgroundColor: string;
@@ -4195,15 +4057,8 @@ declare const componentTokens: {
4195
4057
  dialog: {
4196
4058
  overlayColor: string;
4197
4059
  backgroundColor: string;
4198
- closeIconSize: string;
4199
- closeIconTopPosition: string;
4200
- closeIconRightPosition: string;
4201
4060
  closeIconBackgroundColor: string;
4202
- closeIconBorderColor: string;
4203
4061
  closeIconColor: string;
4204
- closeIconBorderThickness: string;
4205
- closeIconBorderStyle: string;
4206
- closeIconBorderRadius: string;
4207
4062
  boxShadowOffsetX: string;
4208
4063
  boxShadowOffsetY: string;
4209
4064
  boxShadowBlur: string;
@@ -4338,15 +4193,15 @@ declare const componentTokens: {
4338
4193
  };
4339
4194
  header: {
4340
4195
  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;
4196
+ hamburgerFocusColor: string;
4197
+ hamburgerFontFamily: string;
4198
+ hamburgerFontStyle: string;
4199
+ hamburgerFontColor: string;
4200
+ hamburgerFontSize: string;
4201
+ hamburgerFontWeight: string;
4202
+ hamburgerTextTransform: string;
4203
+ hamburgerIconColor: string;
4204
+ hamburgerHoverColor: string;
4350
4205
  logo: string;
4351
4206
  logoResponsive: string;
4352
4207
  logoHeight: string;
@@ -5097,6 +4952,7 @@ type OpinionatedTheme = {
5097
4952
  accordion: {
5098
4953
  accentColor: string;
5099
4954
  titleFontColor: string;
4955
+ subLabelFontColor: string;
5100
4956
  assistiveTextFontColor: string;
5101
4957
  };
5102
4958
  alert: {
@@ -5158,7 +5014,7 @@ type OpinionatedTheme = {
5158
5014
  accentColor: string;
5159
5015
  fontColor: string;
5160
5016
  menuBaseColor: string;
5161
- hamburguerColor: string;
5017
+ hamburgerColor: string;
5162
5018
  logo: string;
5163
5019
  logoResponsive: string;
5164
5020
  contentColor: string;
@@ -5292,7 +5148,7 @@ declare const defaultTranslatedComponentLabels: {
5292
5148
  };
5293
5149
  header: {
5294
5150
  closeIcon: string;
5295
- hamburguerTitle: string;
5151
+ hamburgerTitle: string;
5296
5152
  };
5297
5153
  numberInput: {
5298
5154
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5336,32 +5192,39 @@ declare const defaultTranslatedComponentLabels: {
5336
5192
  };
5337
5193
  type TranslatedLabels = typeof defaultTranslatedComponentLabels;
5338
5194
 
5339
- declare const HalstackContext: react.Context<DeepPartial<{
5195
+ /**
5196
+ * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
5197
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
5198
+ */
5199
+ type DeepPartial<T> = {
5200
+ [P in keyof T]?: Partial<T[P]>;
5201
+ };
5202
+ declare const HalstackContext: react.Context<{
5340
5203
  accordion: {
5341
5204
  backgroundColor: string;
5342
5205
  hoverBackgroundColor: string;
5206
+ focusBackgroundColor: string;
5207
+ activeBackgroundColor: string;
5343
5208
  arrowColor: string;
5344
5209
  disabledArrowColor: string;
5210
+ subLabelFontFamily: string;
5211
+ subLabelFontSize: string;
5212
+ subLabelFontWeight: string;
5213
+ subLabelFontStyle: string;
5214
+ subLabelFontColor: string;
5215
+ disabledSubLabelFontColor: string;
5345
5216
  assistiveTextFontFamily: string;
5346
5217
  assistiveTextFontSize: string;
5347
5218
  assistiveTextFontWeight: string;
5348
5219
  assistiveTextFontStyle: string;
5349
- assistiveTextLetterSpacing: string;
5350
5220
  assistiveTextFontColor: string;
5351
5221
  disabledAssistiveTextFontColor: string;
5352
- assistiveTextMinWidth: string;
5353
- assistiveTextPaddingRight: string;
5354
- assistiveTextPaddingLeft: string;
5355
5222
  titleLabelFontFamily: string;
5356
5223
  titleLabelFontSize: string;
5357
5224
  titleLabelFontWeight: string;
5358
5225
  titleLabelFontStyle: string;
5359
5226
  titleLabelFontColor: string;
5360
5227
  disabledTitleLabelFontColor: string;
5361
- titleLabelPaddingTop: string;
5362
- titleLabelPaddingBottom: string;
5363
- titleLabelPaddingLeft: string;
5364
- titleLabelPaddingRight: string;
5365
5228
  focusBorderColor: string;
5366
5229
  focusBorderStyle: string;
5367
5230
  focusBorderThickness: string;
@@ -5369,16 +5232,14 @@ declare const HalstackContext: react.Context<DeepPartial<{
5369
5232
  boxShadowOffsetX: string;
5370
5233
  boxShadowOffsetY: string;
5371
5234
  boxShadowBlur: string;
5235
+ boxShadowSpread: string;
5372
5236
  boxShadowColor: string;
5373
5237
  iconColor: string;
5374
5238
  disabledIconColor: string;
5375
5239
  iconSize: string;
5376
- iconMarginLeft: string;
5377
- iconMarginRight: string;
5378
- accordionGroupSeparatorBorderColor: string;
5379
- accordionGroupSeparatorBorderThickness: string;
5380
- accordionGroupSeparatorBorderRadius: string;
5381
- accordionGroupSeparatorBorderStyle: string;
5240
+ accordionSeparatorBorderColor: string;
5241
+ accordionSeparatorBorderThickness: string;
5242
+ accordionSeparatorBorderStyle: string;
5382
5243
  };
5383
5244
  alert: {
5384
5245
  errorBackgroundColor: string;
@@ -5724,15 +5585,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
5724
5585
  dialog: {
5725
5586
  overlayColor: string;
5726
5587
  backgroundColor: string;
5727
- closeIconSize: string;
5728
- closeIconTopPosition: string;
5729
- closeIconRightPosition: string;
5730
5588
  closeIconBackgroundColor: string;
5731
- closeIconBorderColor: string;
5732
5589
  closeIconColor: string;
5733
- closeIconBorderThickness: string;
5734
- closeIconBorderStyle: string;
5735
- closeIconBorderRadius: string;
5736
5590
  boxShadowOffsetX: string;
5737
5591
  boxShadowOffsetY: string;
5738
5592
  boxShadowBlur: string;
@@ -5867,15 +5721,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
5867
5721
  };
5868
5722
  header: {
5869
5723
  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;
5724
+ hamburgerFocusColor: string;
5725
+ hamburgerFontFamily: string;
5726
+ hamburgerFontStyle: string;
5727
+ hamburgerFontColor: string;
5728
+ hamburgerFontSize: string;
5729
+ hamburgerFontWeight: string;
5730
+ hamburgerTextTransform: string;
5731
+ hamburgerIconColor: string;
5732
+ hamburgerHoverColor: string;
5879
5733
  logo: string;
5880
5734
  logoResponsive: string;
5881
5735
  logoHeight: string;
@@ -6620,8 +6474,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
6620
6474
  separatorColor: string;
6621
6475
  focusColor: string;
6622
6476
  };
6623
- }>>;
6624
- declare const HalstackLanguageContext: react.Context<DeepPartial<{
6477
+ }>;
6478
+ declare const HalstackLanguageContext: react.Context<{
6625
6479
  applicationLayout: {
6626
6480
  visibilityToggleTitle: string;
6627
6481
  };
@@ -6666,7 +6520,7 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6666
6520
  };
6667
6521
  header: {
6668
6522
  closeIcon: string;
6669
- hamburguerTitle: string;
6523
+ hamburgerTitle: string;
6670
6524
  };
6671
6525
  numberInput: {
6672
6526
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -6707,28 +6561,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6707
6561
  toast: {
6708
6562
  clearToastActionTitle: string;
6709
6563
  };
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
- };
6564
+ }>;
6718
6565
  type HalstackProviderPropsType = {
6719
6566
  theme?: DeepPartial<OpinionatedTheme>;
6720
6567
  advancedTheme?: DeepPartial<AdvancedTheme>;
6721
6568
  labels?: DeepPartial<TranslatedLabels>;
6722
- children: React.ReactNode;
6569
+ children: ReactNode;
6723
6570
  };
6724
6571
  declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
6725
6572
 
6726
6573
  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;
6574
+ default: (toast: DefaultToast) => (() => void) | undefined;
6575
+ success: (toast: SemanticToast) => (() => void) | undefined;
6576
+ warning: (toast: SemanticToast) => (() => void) | undefined;
6577
+ info: (toast: SemanticToast) => (() => void) | undefined;
6578
+ loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
6732
6579
  };
6733
6580
 
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 };
6581
+ export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, 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 };