@dxc-technology/halstack-react 0.0.0-93deeae → 0.0.0-9410524

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 +721 -934
  2. package/dist/index.d.ts +721 -934
  3. package/dist/index.js +12256 -2866
  4. package/dist/index.mjs +12198 -2866
  5. package/package.json +7 -7
package/dist/index.d.mts CHANGED
@@ -1,36 +1,45 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as react from 'react';
3
- import { ReactNode } from 'react';
2
+ import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import { SortColumn } from 'react-data-grid';
5
5
  import * as styled_components from 'styled-components';
6
6
 
7
- type Space$t = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
8
- type Margin$o = {
9
- top?: Space$t;
10
- bottom?: Space$t;
11
- left?: Space$t;
12
- right?: Space$t;
7
+ type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
8
+ type Margin = {
9
+ top?: Space$1;
10
+ bottom?: Space$1;
11
+ left?: Space$1;
12
+ right?: Space$1;
13
13
  };
14
- type SVG$j = React.ReactNode & React.SVGProps<SVGSVGElement>;
15
- type Props$K = {
14
+ type SVG = ReactNode & SVGProps<SVGSVGElement>;
15
+
16
+ type AccordionItemProps = {
16
17
  /**
17
18
  * The panel label.
18
19
  */
19
20
  label: string;
20
21
  /**
21
- * Initial state of the panel, only when it is uncontrolled.
22
+ * Additional info label positioned under the label.
22
23
  */
23
- defaultIsExpanded?: boolean;
24
+ subLabel?: string;
24
25
  /**
25
- * Represents the state of the panel. When true, the component will be
26
- * expanded. If undefined, the component will be uncontrolled and its
27
- * value will be managed internally by the component.
26
+ * Badge component to add extra value to the accordion.
28
27
  */
29
- isExpanded?: boolean;
28
+ badge?: {
29
+ position: "before" | "after";
30
+ element: ReactNode;
31
+ };
30
32
  /**
31
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
33
+ * Status light component to add extra value to the accordion.
32
34
  */
33
- icon?: string | SVG$j;
35
+ statusLight?: ReactNode;
36
+ /**
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_".
41
+ */
42
+ icon?: string | SVG;
34
43
  /**
35
44
  * Assistive text to be placed on the right side of the panel.
36
45
  */
@@ -39,156 +48,170 @@ type Props$K = {
39
48
  * If true, the component will be disabled.
40
49
  */
41
50
  disabled?: boolean;
42
- /**
43
- * This function will be called when the user clicks the accordion to expand or collapse
44
- * the panel. The new state of the panel will be passed as a parameter.
45
- */
46
- onChange?: (isExpanded: boolean) => void;
47
51
  /**
48
52
  * The expanded panel of the accordion. This area can be used to render
49
53
  * custom content.
50
54
  */
51
- children: React.ReactNode;
52
- /**
53
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
54
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
55
- */
56
- margin?: Space$t | Margin$o;
55
+ children: ReactNode;
57
56
  /**
58
57
  * Value of the tabindex attribute.
59
58
  */
60
59
  tabIndex?: number;
61
60
  };
62
-
63
- declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
64
-
65
- type Space$s = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
66
- type Margin$n = {
67
- top?: Space$s;
68
- bottom?: Space$s;
69
- left?: Space$s;
70
- right?: Space$s;
71
- };
72
- type SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
73
- type AccordionPropsType = {
61
+ type CommonProps$9 = {
74
62
  /**
75
- * The panel label.
63
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
64
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
76
65
  */
77
- label: string;
66
+ margin?: Space$1 | Margin;
78
67
  /**
79
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
68
+ * Contains one or more accordion items.
80
69
  */
81
- icon?: string | SVG$i;
70
+ children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
71
+ };
72
+ type IndependentProps = CommonProps$9 & {
82
73
  /**
83
- * Assistive text to be placed on the right side of the panel.
74
+ * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
84
75
  */
85
- assistiveText?: string;
76
+ independent: true;
86
77
  /**
87
- * If true, the component will be disabled.
78
+ * Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
79
+ * several accordions can be activated by default.
88
80
  */
89
- disabled?: boolean;
81
+ defaultIndexActive?: number;
90
82
  /**
91
- * The expanded panel of the accordion. This area can be used to render
92
- * custom content.
83
+ * The index of the active accordion. If undefined, the component will be uncontrolled and the active
84
+ * accordion will be managed internally by the component. If null, the component will be controlled and all
85
+ * accordions will be closed. If the accordion is not independent, several accordions can be activated.
93
86
  */
94
- children: React.ReactNode;
87
+ indexActive?: number;
88
+ /**
89
+ * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
90
+ */
91
+ onActiveChange?: (index: number) => void;
95
92
  };
96
- type Props$J = {
93
+ type NonIndependentProps = CommonProps$9 & {
97
94
  /**
98
- * Initially active accordion, only when it is uncontrolled.
95
+ * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
99
96
  */
100
- defaultIndexActive?: number;
97
+ independent?: false;
101
98
  /**
102
- * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
103
- * If null, the component will be controlled and all accordions will be closed.
99
+ * Initially active accordion, only when it is uncontrolled. If the accordion is not independent,
100
+ * several accordions can be activated by default.
104
101
  */
105
- indexActive?: number;
102
+ defaultIndexActive?: number[];
106
103
  /**
107
- * If true, the component will be disabled.
104
+ * The index of the active accordion. If undefined, the component will be uncontrolled and the active
105
+ * accordion will be managed internally by the component. If null, the component will be controlled and all
106
+ * accordions will be closed. If the accordion is not independent, several accordions can be activated.
108
107
  */
109
- disabled?: boolean;
108
+ indexActive?: number[];
110
109
  /**
111
110
  * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
112
111
  */
113
- onActiveChange?: (indexActive: number) => void;
112
+ onActiveChange?: (index: number[]) => void;
113
+ };
114
+ type Props$J = IndependentProps | NonIndependentProps;
115
+
116
+ declare const DxcAccordion: {
117
+ (props: Props$J): JSX.Element;
118
+ AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
119
+ };
120
+
121
+ type Action$2 = {
114
122
  /**
115
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
116
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
123
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
117
124
  */
118
- margin?: Space$s | Margin$n;
125
+ icon?: string | SVG;
119
126
  /**
120
- * Customized accordion(s) that are allowed inside an Accordion Group.
127
+ * The label of the action.
121
128
  */
122
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
123
- };
124
-
125
- declare const DxcAccordionGroup: {
126
- ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
127
- Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
129
+ label: string;
130
+ /**
131
+ * The function that will be executed when the user clicks on the action button.
132
+ */
133
+ onClick: () => void;
128
134
  };
129
-
130
- type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
131
- type Margin$m = {
132
- top?: Space$r;
133
- bottom?: Space$r;
134
- left?: Space$r;
135
- right?: Space$r;
135
+ type Message = {
136
+ /**
137
+ * The function that will be executed when the user clicks on the close action button.
138
+ */
139
+ onClose?: () => void;
140
+ /**
141
+ * The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
142
+ * and it should be used exclusively to direct users to additional resources or relevant pages.
143
+ * No other components are permitted within the content of an alert.
144
+ */
145
+ text: ReactNode;
136
146
  };
137
- type Props$I = {
147
+ type CommonProps$8 = {
138
148
  /**
139
- * Uses on of the available alert types.
149
+ * If true, the alert will have a close button that will remove the message from the alert,
150
+ * only in banner and inline modes. The rest of the functionality will depend
151
+ * on the onClose event of each message (e.g. closing the modal alert).
140
152
  */
141
- type?: "info" | "confirm" | "warning" | "error";
153
+ closable?: boolean;
142
154
  /**
143
- * Uses on of the available alert modes:
144
- * 'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
145
- * There is no overlay layer. Position should be decided by the user.
146
- * 'modal': The alert will be displayed in the middle of the screen with an overlay layer behind.
147
- * The onClose function will be executed when the X button or the overlay is clicked. d
148
- * The user has the responsibility of hiding the modal in the onClose function, otherwise the modal will remain visible.
155
+ * Primary action of the alert.
149
156
  */
150
- mode?: "inline" | "modal";
157
+ primaryAction?: Action$2;
151
158
  /**
152
- * Text to display after icon and alert type and before content.
159
+ * Secondary action of the alert.
153
160
  */
154
- inlineText?: string;
161
+ secondaryAction?: Action$2;
155
162
  /**
156
- * This function will be called when the user clicks the close button. If there is no function we should close the alert by default.
163
+ * Specifies the semantic meaning of the alert.
157
164
  */
158
- onClose?: () => void;
165
+ semantic?: "error" | "info" | "success" | "warning";
159
166
  /**
160
- * The details section of the alert. Can be used to render custom content in this area.
167
+ * Title of the alert.
161
168
  */
162
- children?: React.ReactNode;
169
+ title: string;
170
+ };
171
+ type ModeSpecificProps = {
163
172
  /**
164
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
165
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
173
+ * List of messages to be displayed. Each message has a close action that will,
174
+ * apart from remove from the alert the current message, call the onClose if it is defined.
175
+ * If the message is an array, the alert will show a navigation bar to move between the messages.
176
+ * The modal mode only allows one message per alert. In this case, the message must be an object
177
+ * and the presence of the onClose attribute is mandatory, since the management of the closing
178
+ * of the alert relies completely on the user.
166
179
  */
167
- margin?: Space$r | Margin$m;
180
+ message?: Message | Message[];
168
181
  /**
169
- * Size of the component.
182
+ * The mode of the alert.
170
183
  */
171
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
184
+ mode?: "inline" | "banner";
185
+ } | {
172
186
  /**
173
- * Value of the tabindex attribute applied to the close button.
187
+ * List of messages to be displayed. Each message has a close action that will,
188
+ * apart from remove from the alert the current message, call the onClose if it is defined.
189
+ * If the message is an array, the alert will show a navigation bar to move between the messages.
190
+ * The modal mode only allows one message per alert. In this case, the message must be an object
191
+ * and the presence of the onClose attribute is mandatory, since the management of the closing
192
+ * of the alert relies completely on the user.
174
193
  */
175
- tabIndex?: number;
194
+ message: Required<Message>;
195
+ /**
196
+ * The mode of the alert.
197
+ */
198
+ mode: "modal";
176
199
  };
200
+ type Props$I = CommonProps$8 & ModeSpecificProps;
177
201
 
178
- declare const DxcAlert: ({ type, mode, inlineText, onClose, children, margin, size, tabIndex, }: Props$I) => JSX.Element;
202
+ declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$I): react_jsx_runtime.JSX.Element;
179
203
 
180
- type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
181
204
  type SidenavTitlePropsType = {
182
205
  /**
183
206
  * The area inside the sidenav title. This area can be used to render custom content.
184
207
  */
185
- children: React.ReactNode;
208
+ children: ReactNode;
186
209
  };
187
210
  type SidenavSectionPropsType = {
188
211
  /**
189
212
  * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
190
213
  */
191
- children: React.ReactNode;
214
+ children: ReactNode;
192
215
  };
193
216
  type SidenavGroupPropsType = {
194
217
  /**
@@ -203,11 +226,11 @@ type SidenavGroupPropsType = {
203
226
  /**
204
227
  * Material Symbol name or SVG icon to be displayed next to the title of the group.
205
228
  */
206
- icon?: string | SVG$h;
229
+ icon?: string | SVG;
207
230
  /**
208
231
  * The area inside the sidenav group. This area can be used to render sidenav links.
209
232
  */
210
- children: React.ReactNode;
233
+ children: ReactNode;
211
234
  };
212
235
  type SidenavLinkPropsType = {
213
236
  /**
@@ -221,7 +244,7 @@ type SidenavLinkPropsType = {
221
244
  /**
222
245
  * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
223
246
  */
224
- icon?: string | SVG$h;
247
+ icon?: string | SVG;
225
248
  /**
226
249
  * If true, the link will be marked as selected. Moreover, in that same case,
227
250
  * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
@@ -231,11 +254,11 @@ type SidenavLinkPropsType = {
231
254
  /**
232
255
  * This function will be called when the user clicks the link and the event will be passed to this function.
233
256
  */
234
- onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
257
+ onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
235
258
  /**
236
259
  * The area inside the sidenav link.
237
260
  */
238
- children: React.ReactNode;
261
+ children: ReactNode;
239
262
  /**
240
263
  * Value of the tabindex.
241
264
  */
@@ -245,23 +268,15 @@ type Props$H = {
245
268
  /**
246
269
  * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
247
270
  */
248
- title?: React.ReactNode;
271
+ title?: ReactNode;
249
272
  /**
250
273
  * The area inside the sidenav. This area can be used to render the content inside the sidenav.
251
274
  */
252
- children: React.ReactNode;
275
+ children: ReactNode;
253
276
  };
254
277
 
255
- type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
256
- type Margin$l = {
257
- top?: Space$q;
258
- bottom?: Space$q;
259
- left?: Space$q;
260
- right?: Space$q;
261
- };
262
278
  type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
263
- type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
264
- type Option$1 = {
279
+ type Option$2 = {
265
280
  /**
266
281
  * Option display value.
267
282
  */
@@ -269,7 +284,7 @@ type Option$1 = {
269
284
  /**
270
285
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
271
286
  */
272
- icon?: string | SVG$g;
287
+ icon?: string | SVG;
273
288
  /**
274
289
  * Option inner value.
275
290
  */
@@ -279,7 +294,7 @@ type Props$G = {
279
294
  /**
280
295
  * An array of objects representing the options.
281
296
  */
282
- options: Option$1[];
297
+ options: Option$2[];
283
298
  /**
284
299
  * In case options include icons, whether the icon should appear
285
300
  * after or before the label.
@@ -288,7 +303,7 @@ type Props$G = {
288
303
  /**
289
304
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
290
305
  */
291
- icon?: string | SVG$g;
306
+ icon?: string | SVG;
292
307
  /**
293
308
  * Whether the icon should appear after or before the label.
294
309
  */
@@ -319,7 +334,7 @@ type Props$G = {
319
334
  * You can pass an object with 'top', 'bottom', 'left' and 'right'
320
335
  * properties in order to specify different margin sizes.
321
336
  */
322
- margin?: Space$q | Margin$l;
337
+ margin?: Space$1 | Margin;
323
338
  /**
324
339
  * Size of the component.
325
340
  */
@@ -335,7 +350,6 @@ type Props$G = {
335
350
  title?: string;
336
351
  };
337
352
 
338
- type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
339
353
  type Props$F = {
340
354
  /**
341
355
  * Whether a contrast line should appear at the bottom of the header.
@@ -346,12 +360,12 @@ type Props$F = {
346
360
  * for the first child in the content, so we recommend the use of React.Fragment
347
361
  * to be applied correctly. Otherwise, the styles can be modified.
348
362
  */
349
- content?: React.ReactNode;
363
+ content?: ReactNode;
350
364
  /**
351
365
  * Content shown in responsive version. It receives the close menu handler that can
352
366
  * be used to add that functionality when a element is clicked.
353
367
  */
354
- responsiveContent?: (closeHandler: () => void) => React.ReactNode;
368
+ responsiveContent?: (closeHandler: () => void) => ReactNode;
355
369
  /**
356
370
  * This function will be called when the user clicks the header logo.
357
371
  */
@@ -359,7 +373,7 @@ type Props$F = {
359
373
  /**
360
374
  * Size of the bottom margin to be applied to the header.
361
375
  */
362
- margin?: Space$p;
376
+ margin?: Space$1;
363
377
  /**
364
378
  * Value of the tabindex for all interactive elements, except those inside the
365
379
  * custom area.
@@ -367,8 +381,6 @@ type Props$F = {
367
381
  tabIndex?: number;
368
382
  };
369
383
 
370
- type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
371
- type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
372
384
  type SocialLink = {
373
385
  /**
374
386
  * URL of the page the link goes to.
@@ -377,7 +389,7 @@ type SocialLink = {
377
389
  /**
378
390
  * Material Symbol name or SVG element as the icon used for the link.
379
391
  */
380
- logo: string | SVG$f;
392
+ logo: string | SVG;
381
393
  /**
382
394
  * Value for the HTML properties title and aria-label.
383
395
  */
@@ -412,11 +424,11 @@ type FooterPropsType = {
412
424
  * The center section of the footer. Can be used to render custom
413
425
  * content in this area.
414
426
  */
415
- children?: React.ReactNode;
427
+ children?: ReactNode;
416
428
  /**
417
429
  * Size of the top margin to be applied to the footer.
418
430
  */
419
- margin?: Space$o;
431
+ margin?: Space$1;
420
432
  /**
421
433
  * Value of the tabindex for all interactive elements, except those
422
434
  * inside the custom area.
@@ -434,7 +446,7 @@ type AppLayoutMainPropsType = {
434
446
  /**
435
447
  * Everything between the tags will be displayed as the content of the main part of the application.
436
448
  */
437
- children: React.ReactNode;
449
+ children: ReactNode;
438
450
  };
439
451
  type ApplicationLayoutPropsType = {
440
452
  /**
@@ -445,19 +457,19 @@ type ApplicationLayoutPropsType = {
445
457
  /**
446
458
  * Header content.
447
459
  */
448
- header?: React.ReactNode;
460
+ header?: ReactNode;
449
461
  /**
450
462
  * Sidenav content
451
463
  */
452
- sidenav?: React.ReactNode;
464
+ sidenav?: ReactNode;
453
465
  /**
454
466
  * Footer content
455
467
  */
456
- footer?: React.ReactNode;
468
+ footer?: ReactNode;
457
469
  /**
458
470
  * Use the DxcApplicationLayout.Main provided to render main content.
459
471
  */
460
- children: React.ReactElement<AppLayoutMainPropsType>;
472
+ children: ReactElement<AppLayoutMainPropsType>;
461
473
  };
462
474
 
463
475
  declare const DxcApplicationLayout: {
@@ -465,7 +477,7 @@ declare const DxcApplicationLayout: {
465
477
  Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
466
478
  Header: {
467
479
  ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
468
- 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;
469
481
  };
470
482
  Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
471
483
  SideNav: {
@@ -475,10 +487,9 @@ declare const DxcApplicationLayout: {
475
487
  Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
476
488
  Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
477
489
  };
478
- useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
490
+ useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
479
491
  };
480
492
 
481
- type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
482
493
  type ContextualProps = {
483
494
  /**
484
495
  * Text to be placed in the badge.
@@ -523,7 +534,7 @@ type CommonProps$7 = {
523
534
  /**
524
535
  * Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
525
536
  */
526
- icon?: string | SVG$e;
537
+ icon?: string | SVG;
527
538
  /**
528
539
  * Size of the component.
529
540
  */
@@ -533,134 +544,42 @@ type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
533
544
 
534
545
  declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
535
546
 
536
- /**
537
- * Halstack Color Palette
538
- * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
539
- */
540
- declare const CoreColorTokens: {
541
- color_black: string;
542
- color_white: string;
543
- color_transparent: string;
544
- color_grey_50: string;
545
- color_grey_100: string;
546
- color_grey_200: string;
547
- color_grey_300: string;
548
- color_grey_400: string;
549
- color_grey_500: string;
550
- color_grey_600: string;
551
- color_grey_700: string;
552
- color_grey_800: string;
553
- color_grey_900: string;
554
- color_grey_50_a: string;
555
- color_grey_100_a: string;
556
- color_grey_200_a: string;
557
- color_grey_300_a: string;
558
- color_grey_400_a: string;
559
- color_grey_500_a: string;
560
- color_grey_600_a: string;
561
- color_grey_700_a: string;
562
- color_grey_800_a: string;
563
- color_grey_900_a: string;
564
- color_purple_50: string;
565
- color_purple_100: string;
566
- color_purple_200: string;
567
- color_purple_300: string;
568
- color_purple_400: string;
569
- color_purple_500: string;
570
- color_purple_600: string;
571
- color_purple_700: string;
572
- color_purple_800: string;
573
- color_purple_900: string;
574
- color_blue_50: string;
575
- color_blue_100: string;
576
- color_blue_200: string;
577
- color_blue_300: string;
578
- color_blue_400: string;
579
- color_blue_500: string;
580
- color_blue_600: string;
581
- color_blue_700: string;
582
- color_blue_800: string;
583
- color_blue_900: string;
584
- color_red_50: string;
585
- color_red_100: string;
586
- color_red_200: string;
587
- color_red_300: string;
588
- color_red_400: string;
589
- color_red_500: string;
590
- color_red_600: string;
591
- color_red_700: string;
592
- color_red_800: string;
593
- color_red_900: string;
594
- color_green_50: string;
595
- color_green_100: string;
596
- color_green_200: string;
597
- color_green_300: string;
598
- color_green_400: string;
599
- color_green_500: string;
600
- color_green_600: string;
601
- color_green_700: string;
602
- color_green_800: string;
603
- color_green_900: string;
604
- color_yellow_50: string;
605
- color_yellow_100: string;
606
- color_yellow_200: string;
607
- color_yellow_300: string;
608
- color_yellow_400: string;
609
- color_yellow_500: string;
610
- color_yellow_600: string;
611
- color_yellow_700: string;
612
- color_yellow_800: string;
613
- color_yellow_900: string;
614
- color_orange_50: string;
615
- color_orange_100: string;
616
- color_orange_200: string;
617
- color_orange_300: string;
618
- color_orange_400: string;
619
- color_orange_500: string;
620
- color_orange_600: string;
621
- color_orange_700: string;
622
- color_orange_800: string;
623
- color_orange_900: string;
624
- };
625
- type CoreColorTokensType = keyof typeof CoreColorTokens;
626
- type CoreSpacingTokensType = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "2.5rem" | "3rem" | "3.5rem" | "4rem" | "5rem" | "6rem" | "7rem";
627
-
628
547
  type Props$D = {
629
548
  /**
630
549
  * Applies the spacing scale to all sides.
631
550
  */
632
- space?: CoreSpacingTokensType;
551
+ space?: string;
633
552
  /**
634
553
  * Applies the spacing scale to the left and right sides.
635
554
  */
636
- horizontal?: CoreSpacingTokensType;
555
+ horizontal?: string;
637
556
  /**
638
557
  * Applies the spacing scale to the top and bottom sides.
639
558
  */
640
- vertical?: CoreSpacingTokensType;
559
+ vertical?: string;
641
560
  /**
642
561
  * Applies the spacing scale to the top side.
643
562
  */
644
- top?: CoreSpacingTokensType;
563
+ top?: string;
645
564
  /**
646
565
  * Applies the spacing scale to the right side.
647
566
  */
648
- right?: CoreSpacingTokensType;
567
+ right?: string;
649
568
  /**
650
569
  * Applies the spacing scale to the bottom side.
651
570
  */
652
- bottom?: CoreSpacingTokensType;
571
+ bottom?: string;
653
572
  /**
654
573
  * Applies the spacing scale to the left side.
655
574
  */
656
- left?: CoreSpacingTokensType;
575
+ left?: string;
657
576
  /**
658
577
  * Custom content inside the bleed.
659
578
  */
660
- children: React.ReactNode;
579
+ children: ReactNode;
661
580
  };
662
581
 
663
- declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
582
+ declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D): react_jsx_runtime.JSX.Element;
664
583
 
665
584
  type Item$1 = {
666
585
  href?: string;
@@ -700,7 +619,6 @@ type Props$C = {
700
619
 
701
620
  declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
702
621
 
703
- type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
704
622
  type IconProps = {
705
623
  /**
706
624
  * Defines the style of the bullet point in the list.
@@ -709,11 +627,11 @@ type IconProps = {
709
627
  /**
710
628
  * Icon to display as bullet.
711
629
  */
712
- icon: string | SVG$d;
630
+ icon: string | SVG;
713
631
  /**
714
632
  * Text to be shown in the list.
715
633
  */
716
- children: React.ReactNode;
634
+ children: ReactNode;
717
635
  };
718
636
  type OtherProps = {
719
637
  /**
@@ -727,7 +645,7 @@ type OtherProps = {
727
645
  /**
728
646
  * Text to be shown in the list.
729
647
  */
730
- children: React.ReactNode;
648
+ children: ReactNode;
731
649
  };
732
650
  type Props$B = IconProps | OtherProps;
733
651
 
@@ -735,7 +653,7 @@ type BulletedListItemPropsType = {
735
653
  /**
736
654
  * Text to be shown in the list.
737
655
  */
738
- children?: React.ReactNode;
656
+ children?: ReactNode;
739
657
  };
740
658
 
741
659
  declare const DxcBulletedList: {
@@ -743,17 +661,11 @@ declare const DxcBulletedList: {
743
661
  Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
744
662
  };
745
663
 
746
- type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
747
- type Margin$k = {
748
- top?: Space$n;
749
- bottom?: Space$n;
750
- left?: Space$n;
751
- right?: Space$n;
752
- };
753
- type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
664
+ type Semantic = "default" | "error" | "warning" | "success" | "info";
665
+ type Mode$1 = "primary" | "secondary" | "tertiary";
754
666
  type Size$3 = {
755
667
  /**
756
- * Height of the component.
668
+ * Height of the button.
757
669
  */
758
670
  height?: "small" | "medium" | "large";
759
671
  width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
@@ -766,11 +678,11 @@ type Props$A = {
766
678
  /**
767
679
  * The available button modes.
768
680
  */
769
- mode?: "primary" | "secondary" | "tertiary";
681
+ mode?: Mode$1;
770
682
  /**
771
683
  * Specifies the semantic meaning of the buttons, which determines its color.
772
684
  */
773
- semantic?: "default" | "error" | "warning" | "success" | "info";
685
+ semantic?: Semantic;
774
686
  /**
775
687
  * If true, the component will be disabled.
776
688
  */
@@ -790,7 +702,7 @@ type Props$A = {
790
702
  /**
791
703
  * Material Symbol name or SVG element as the icon that will be placed next to the label.
792
704
  */
793
- icon?: string | SVG$c;
705
+ icon?: string | SVG;
794
706
  /**
795
707
  * This function will be called when the user clicks the button.
796
708
  */
@@ -799,7 +711,7 @@ type Props$A = {
799
711
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
800
712
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
801
713
  */
802
- margin?: Space$n | Margin$k;
714
+ margin?: Space$1 | Margin;
803
715
  /**
804
716
  * Size of the component.
805
717
  */
@@ -810,14 +722,13 @@ type Props$A = {
810
722
  tabIndex?: number;
811
723
  };
812
724
 
813
- declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
725
+ declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$A) => JSX.Element;
814
726
 
815
- type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
816
727
  type Size$2 = {
817
- top?: Space$m;
818
- bottom?: Space$m;
819
- left?: Space$m;
820
- right?: Space$m;
728
+ top?: Space$1;
729
+ bottom?: Space$1;
730
+ left?: Space$1;
731
+ right?: Space$1;
821
732
  };
822
733
  type Props$z = {
823
734
  /**
@@ -835,7 +746,7 @@ type Props$z = {
835
746
  * component. You can pass an object with 'top', 'bottom', 'left'
836
747
  * and 'right' properties in order to specify different padding sizes.
837
748
  */
838
- imagePadding?: Space$m | Size$2;
749
+ imagePadding?: Space$1 | Size$2;
839
750
  /**
840
751
  * Whether the image should appear in relation to the content.
841
752
  */
@@ -858,7 +769,7 @@ type Props$z = {
858
769
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
859
770
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
860
771
  */
861
- margin?: Space$m | Size$2;
772
+ margin?: Space$1 | Size$2;
862
773
  /**
863
774
  * Value of the tabindex attribute applied when the component is clickable.
864
775
  */
@@ -870,33 +781,29 @@ type Props$z = {
870
781
  /**
871
782
  * Custom content that will be placed inside the component.
872
783
  */
873
- children?: React.ReactNode;
784
+ children?: ReactNode;
874
785
  };
875
786
 
876
- declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => JSX.Element;
787
+ declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => react_jsx_runtime.JSX.Element;
877
788
 
878
- type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
879
- type Margin$j = {
880
- top?: Space$l;
881
- bottom?: Space$l;
882
- left?: Space$l;
883
- right?: Space$l;
884
- };
885
789
  type Props$y = {
886
790
  /**
887
- * Initial state of the checkbox, only when it is uncontrolled.
791
+ * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
888
792
  */
889
- defaultChecked?: boolean;
793
+ ariaLabel?: string;
890
794
  /**
891
795
  * If true, the component is checked. If undefined the component will be
892
796
  * uncontrolled and the value will be managed internally by the component.
893
797
  */
894
798
  checked?: boolean;
895
799
  /**
896
- * Will be passed to the value attribute of the html input element.
897
- * When inside a form, this value will be only submitted if the checkbox is checked.
800
+ * Initial state of the checkbox, only when it is uncontrolled.
898
801
  */
899
- value?: string;
802
+ defaultChecked?: boolean;
803
+ /**
804
+ * If true, the component will be disabled.
805
+ */
806
+ disabled?: boolean;
900
807
  /**
901
808
  * Text to be placed next to the checkbox.
902
809
  */
@@ -905,14 +812,22 @@ type Props$y = {
905
812
  * Whether the label should appear after or before the checkbox.
906
813
  */
907
814
  labelPosition?: "before" | "after";
815
+ /**
816
+ * Size of the margin to be applied to the component
817
+ * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
818
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
819
+ * in order to specify different margin sizes.
820
+ */
821
+ margin?: Space$1 | Margin;
908
822
  /**
909
823
  * Name attribute of the input element.
910
824
  */
911
825
  name?: string;
912
826
  /**
913
- * If true, the component will be disabled.
827
+ * This function will be called when the user clicks the checkbox.
828
+ * The new value will be passed as a parameter.
914
829
  */
915
- disabled?: boolean;
830
+ onChange?: (value: boolean) => void;
916
831
  /**
917
832
  * If true, the component will display '(Optional)' next to the label.
918
833
  */
@@ -921,18 +836,6 @@ type Props$y = {
921
836
  * If true, the component will not be mutable, meaning the user can not edit the control.
922
837
  */
923
838
  readOnly?: boolean;
924
- /**
925
- * This function will be called when the user clicks the checkbox.
926
- * The new value will be passed as a parameter.
927
- */
928
- onChange?: (value: boolean) => void;
929
- /**
930
- * Size of the margin to be applied to the component
931
- * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
932
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
933
- * in order to specify different margin sizes.
934
- */
935
- margin?: Space$l | Margin$j;
936
839
  /**
937
840
  * Size of the component.
938
841
  */
@@ -941,18 +844,15 @@ type Props$y = {
941
844
  * Value of the tabindex.
942
845
  */
943
846
  tabIndex?: number;
847
+ /**
848
+ * Will be passed to the value attribute of the html input element.
849
+ * When inside a form, this value will be only submitted if the checkbox is checked.
850
+ */
851
+ value?: string;
944
852
  };
945
853
 
946
854
  declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
947
855
 
948
- type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
949
- type Margin$i = {
950
- top?: Space$k;
951
- bottom?: Space$k;
952
- left?: Space$k;
953
- right?: Space$k;
954
- };
955
- type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
956
856
  type Props$x = {
957
857
  /**
958
858
  * Text to be placed on the chip.
@@ -961,11 +861,11 @@ type Props$x = {
961
861
  /**
962
862
  * Element or path used as icon to be placed after the chip label.
963
863
  */
964
- suffixIcon?: string | SVG$b;
864
+ suffixIcon?: string | SVG;
965
865
  /**
966
866
  * Element or path used as icon to be placed before the chip label.
967
867
  */
968
- prefixIcon?: string | SVG$b;
868
+ prefixIcon?: string | SVG;
969
869
  /**
970
870
  * This function will be called when the suffix is clicked.
971
871
  */
@@ -982,23 +882,22 @@ type Props$x = {
982
882
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
983
883
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
984
884
  */
985
- margin?: Space$k | Margin$i;
885
+ margin?: Space$1 | Margin;
986
886
  /**
987
887
  * Value of the tabindex attribute.
988
888
  */
989
889
  tabIndex?: number;
990
890
  };
991
891
 
992
- declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
892
+ declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element;
993
893
 
994
- type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
995
- type Space$j = SpacingValues | {
996
- top?: SpacingValues;
997
- right?: SpacingValues;
998
- bottom?: SpacingValues;
999
- left?: SpacingValues;
1000
- };
1001
- type Inset$1 = {
894
+ type Space = {
895
+ top?: string;
896
+ right?: string;
897
+ bottom?: string;
898
+ left?: string;
899
+ };
900
+ type Inset = {
1002
901
  top?: string;
1003
902
  right?: string;
1004
903
  bottom?: string;
@@ -1007,7 +906,7 @@ type Inset$1 = {
1007
906
  type Background = {
1008
907
  attachment?: string;
1009
908
  clip?: string;
1010
- color?: CoreColorTokensType;
909
+ color?: string;
1011
910
  image?: string;
1012
911
  origin?: string;
1013
912
  position?: string;
@@ -1016,8 +915,8 @@ type Background = {
1016
915
  };
1017
916
  type BorderProperties = {
1018
917
  width?: string;
1019
- style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset";
1020
- color?: CoreColorTokensType;
918
+ style?: string;
919
+ color?: string;
1021
920
  };
1022
921
  type Border = BorderProperties | {
1023
922
  top?: BorderProperties;
@@ -1065,7 +964,7 @@ type Props$w = {
1065
964
  /**
1066
965
  * Custom content inside the container.
1067
966
  */
1068
- children: React.ReactNode;
967
+ children?: ReactNode;
1069
968
  /**
1070
969
  * Sets the display CSS property.
1071
970
  * The set of values is limited to the ones related to the outer display type.
@@ -1091,19 +990,11 @@ type Props$w = {
1091
990
  * Based on the CSS property inset this prop is a shorthand that corresponds
1092
991
  * to the top, right, bottom, and/or left properties.
1093
992
  */
1094
- inset?: Inset$1;
993
+ inset?: Inset;
1095
994
  /**
1096
- * Size of the margin to be applied to the component.
1097
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1098
- * in order to specify different margin sizes.
1099
- */
1100
- margin?: Space$j;
1101
- /**
1102
- * Sets the max-height CSS property.
1103
- *
1104
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
995
+ * Size of the margin to be applied to the container.
1105
996
  */
1106
- maxWidth?: string;
997
+ margin?: string | Space;
1107
998
  /**
1108
999
  * Sets the max-width CSS property.
1109
1000
  *
@@ -1111,17 +1002,23 @@ type Props$w = {
1111
1002
  */
1112
1003
  maxHeight?: string;
1113
1004
  /**
1114
- * Sets the min-height CSS property.
1005
+ * Sets the max-height CSS property.
1115
1006
  *
1116
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
1007
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
1117
1008
  */
1118
- minWidth?: string;
1009
+ maxWidth?: string;
1119
1010
  /**
1120
1011
  * Sets the min-width CSS property.
1121
1012
  *
1122
1013
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
1123
1014
  */
1124
1015
  minHeight?: string;
1016
+ /**
1017
+ * Sets the min-height CSS property.
1018
+ *
1019
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
1020
+ */
1021
+ minWidth?: string;
1125
1022
  /**
1126
1023
  * Based on the CSS property outline allows configuring all properties related
1127
1024
  * to the outline of a container.
@@ -1134,11 +1031,9 @@ type Props$w = {
1134
1031
  */
1135
1032
  overflow?: Overflow;
1136
1033
  /**
1137
- * Size of the margin to be applied to the component.
1138
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
1139
- * in order to specify different margin sizes.
1034
+ * Size of the padding to be applied to the container.
1140
1035
  */
1141
- padding?: Space$j;
1036
+ padding?: string | Space;
1142
1037
  /**
1143
1038
  * Sets the position CSS property.
1144
1039
  *
@@ -1159,12 +1054,11 @@ type Props$w = {
1159
1054
  zIndex?: "auto" | number;
1160
1055
  };
1161
1056
 
1162
- declare const DxcContainer: ({ display, width, height, overflow, ...props }: Props$w) => react_jsx_runtime.JSX.Element;
1057
+ declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
1163
1058
 
1164
- type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
1165
1059
  type CommonItemProps = {
1166
- badge?: React.ReactElement;
1167
- icon?: string | SVG$a;
1060
+ badge?: ReactElement;
1061
+ icon?: string | SVG;
1168
1062
  label: string;
1169
1063
  };
1170
1064
  type Item = CommonItemProps & {
@@ -1186,21 +1080,13 @@ type Props$v = {
1186
1080
  items: (Item | GroupItem)[] | Section[];
1187
1081
  };
1188
1082
 
1189
- declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
1083
+ declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
1190
1084
 
1191
- type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1192
- type Margin$h = {
1193
- top?: Space$i;
1194
- bottom?: Space$i;
1195
- left?: Space$i;
1196
- right?: Space$i;
1197
- };
1198
- type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
1199
1085
  type ActionCellsPropsType = {
1200
1086
  actions: ActionsPropsType;
1201
1087
  };
1202
1088
  type ActionsPropsType = Array<{
1203
- icon: string | SVG$9;
1089
+ icon: string | SVG;
1204
1090
  title: string;
1205
1091
  onClick: () => void;
1206
1092
  disabled?: boolean;
@@ -1212,19 +1098,19 @@ type ActionsPropsType = Array<{
1212
1098
  onClick: (value?: string) => void;
1213
1099
  disabled?: boolean;
1214
1100
  tabIndex?: number;
1215
- options: Option$1[];
1101
+ options: Option$2[];
1216
1102
  }>;
1217
1103
  type Props$u = {
1218
1104
  /**
1219
1105
  * The center section of the table. Can be used to render custom
1220
1106
  * content in this area.
1221
1107
  */
1222
- children: React.ReactNode;
1108
+ children: ReactNode;
1223
1109
  /**
1224
1110
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1225
1111
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1226
1112
  */
1227
- margin?: Space$i | Margin$h;
1113
+ margin?: Space$1 | Margin;
1228
1114
  /**
1229
1115
  * Determines the visual style and layout
1230
1116
  * - "default": Default table size.
@@ -1253,7 +1139,7 @@ type GridColumn = {
1253
1139
  /**
1254
1140
  * Custom criteria for sorting the column.
1255
1141
  */
1256
- sortFn?: (_a: ReactNode, _b: ReactNode) => number;
1142
+ sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
1257
1143
  /**
1258
1144
  * Whether the column is draggable or not.
1259
1145
  */
@@ -1283,6 +1169,7 @@ type HierarchyGridRow = GridRow & {
1283
1169
  type ExpandableGridRow = GridRow & {
1284
1170
  expandedContent?: ReactNode;
1285
1171
  expandedContentHeight?: number;
1172
+ contentIsExpanded?: boolean;
1286
1173
  };
1287
1174
  type ExpandableRows = {
1288
1175
  rows: ExpandableGridRow[];
@@ -1359,6 +1246,10 @@ type PaginatedProps$1 = {
1359
1246
  * Function called whenever the current page is changed.
1360
1247
  */
1361
1248
  onPageChange?: (_page: number) => void;
1249
+ /**
1250
+ * Default page in which the datagrid is rendered
1251
+ */
1252
+ defaultPage?: number;
1362
1253
  };
1363
1254
  type NonPaginatedProps$1 = {
1364
1255
  /**
@@ -1390,6 +1281,10 @@ type NonPaginatedProps$1 = {
1390
1281
  * Function called whenever the current page is changed.
1391
1282
  */
1392
1283
  onPageChange?: never;
1284
+ /**
1285
+ * Default page in which the datagrid is rendered
1286
+ */
1287
+ defaultPage?: never;
1393
1288
  };
1394
1289
  type CommonProps$6 = {
1395
1290
  columns: GridColumn[];
@@ -1417,17 +1312,10 @@ type BasicGridProps = {
1417
1312
  type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
1418
1313
 
1419
1314
  declare const DxcDataGrid: {
1420
- ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
1315
+ ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
1421
1316
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
1422
1317
  };
1423
1318
 
1424
- type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1425
- type Margin$g = {
1426
- top?: Space$h;
1427
- bottom?: Space$h;
1428
- left?: Space$h;
1429
- right?: Space$h;
1430
- };
1431
1319
  type Props$s = {
1432
1320
  /**
1433
1321
  * Initial value of the input element, only when it is uncontrolled.
@@ -1519,7 +1407,7 @@ type Props$s = {
1519
1407
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1520
1408
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1521
1409
  */
1522
- margin?: Space$h | Margin$g;
1410
+ margin?: Space$1 | Margin;
1523
1411
  /**
1524
1412
  * Size of the component.
1525
1413
  */
@@ -1528,6 +1416,10 @@ type Props$s = {
1528
1416
  * Value of the tabindex attribute.
1529
1417
  */
1530
1418
  tabIndex?: number;
1419
+ /**
1420
+ * Specifies a string to be used as the name for the date input element when no `label` is provided.
1421
+ */
1422
+ ariaLabel?: string;
1531
1423
  };
1532
1424
 
1533
1425
  declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
@@ -1536,7 +1428,7 @@ type Props$r = {
1536
1428
  /**
1537
1429
  * If true, the close button will be visible.
1538
1430
  */
1539
- isCloseVisible?: boolean;
1431
+ closable?: boolean;
1540
1432
  /**
1541
1433
  * This function will be called when the user clicks the close button.
1542
1434
  * The responsibility of hiding the dialog lies with the user.
@@ -1558,7 +1450,7 @@ type Props$r = {
1558
1450
  * can lead to unpredictable behaviour for keyboard users, affecting
1559
1451
  * the order of focus and focus locking within the dialog.
1560
1452
  */
1561
- children: React.ReactNode;
1453
+ children: ReactNode;
1562
1454
  /**
1563
1455
  * Value of the tabindex applied to the close button.
1564
1456
  * Note that values greater than 0 are strongly discouraged. It can
@@ -1567,7 +1459,7 @@ type Props$r = {
1567
1459
  tabIndex?: number;
1568
1460
  };
1569
1461
 
1570
- declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
1462
+ declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$r) => JSX.Element;
1571
1463
 
1572
1464
  type Props$q = {
1573
1465
  /**
@@ -1590,17 +1482,10 @@ type Props$q = {
1590
1482
  decorative?: boolean;
1591
1483
  };
1592
1484
 
1593
- declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
1485
+ declare function DxcDivider({ color, decorative, orientation, weight, }: Props$q): react_jsx_runtime.JSX.Element;
1594
1486
 
1595
- declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
1487
+ declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element;
1596
1488
 
1597
- type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1598
- type Margin$f = {
1599
- top?: Space$g;
1600
- bottom?: Space$g;
1601
- left?: Space$g;
1602
- right?: Space$g;
1603
- };
1604
1489
  type FileData = {
1605
1490
  /**
1606
1491
  * Selected file.
@@ -1666,7 +1551,7 @@ type CommonProps$5 = {
1666
1551
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1667
1552
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1668
1553
  */
1669
- margin?: Space$g | Margin$f;
1554
+ margin?: Space$1 | Margin;
1670
1555
  /**
1671
1556
  * Value of the tabindex attribute.
1672
1557
  */
@@ -1705,12 +1590,12 @@ type Props$p = DropModeProps | FileModeProps;
1705
1590
  declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
1706
1591
 
1707
1592
  type Gap$1 = {
1708
- rowGap: CoreSpacingTokensType;
1709
- columnGap?: CoreSpacingTokensType;
1593
+ rowGap: string;
1594
+ columnGap?: string;
1710
1595
  } | {
1711
- rowGap?: CoreSpacingTokensType;
1712
- columnGap: CoreSpacingTokensType;
1713
- } | CoreSpacingTokensType;
1596
+ rowGap?: string;
1597
+ columnGap: string;
1598
+ } | string;
1714
1599
  type CommonProps$4 = {
1715
1600
  /**
1716
1601
  * Sets the justify-content CSS property.
@@ -1787,52 +1672,54 @@ type Props$o = CommonProps$4 & {
1787
1672
  /**
1788
1673
  * Custom content inside the flex container.
1789
1674
  */
1790
- children: React.ReactNode;
1675
+ children: ReactNode;
1791
1676
  };
1792
1677
 
1793
1678
  declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
1794
1679
 
1795
- type Gap = {
1796
- rowGap: CoreSpacingTokensType;
1797
- columnGap?: CoreSpacingTokensType;
1680
+ type Gap = string | {
1681
+ columnGap?: string;
1682
+ rowGap: string;
1798
1683
  } | {
1799
- rowGap?: CoreSpacingTokensType;
1800
- columnGap: CoreSpacingTokensType;
1801
- } | CoreSpacingTokensType;
1684
+ columnGap: string;
1685
+ rowGap?: string;
1686
+ };
1802
1687
  type GridCell = {
1803
- start: number | string;
1804
1688
  end: number | string;
1689
+ start: number | string;
1805
1690
  };
1806
- type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
1807
- type PlaceContentValues = "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline";
1808
- type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
1691
+ type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stretch";
1692
+ type PlaceContentValues = "baseline" | "center" | "end" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch";
1693
+ type PlaceItemsValues = "baseline" | "center" | "end" | "normal" | "start" | "stretch";
1809
1694
  type PlaceObject<Type, Suffix extends string> = {
1810
1695
  [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
1811
1696
  };
1812
1697
  type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
1813
- justify?: PlaceValues;
1814
1698
  align: PlaceValues;
1699
+ justify?: PlaceValues;
1815
1700
  }, Element> | PlaceObject<{
1816
- justify: PlaceValues;
1817
1701
  align?: PlaceValues;
1702
+ justify: PlaceValues;
1818
1703
  }, Element> | PlaceValues;
1819
1704
  type GridItemProps = {
1820
1705
  /**
1821
1706
  * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
1822
1707
  */
1823
1708
  areaName?: string;
1709
+ /**
1710
+ * Sets a custom HTML tag.
1711
+ */
1712
+ as?: keyof HTMLElementTagNameMap;
1713
+ /**
1714
+ * Custom content inside the grid container.
1715
+ */
1716
+ children: ReactNode;
1824
1717
  /**
1825
1718
  * Sets the grid-column CSS property.
1826
1719
  *
1827
1720
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
1828
1721
  */
1829
1722
  column?: number | string | GridCell;
1830
- /**
1831
- * Sets the grid-row CSS property.
1832
- *
1833
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
1834
- */
1835
- row?: number | string | GridCell;
1836
1723
  /**
1837
1724
  * Sets the place-self CSS property.
1838
1725
  *
@@ -1840,13 +1727,11 @@ type GridItemProps = {
1840
1727
  */
1841
1728
  placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
1842
1729
  /**
1843
- * Sets a custom HTML tag.
1844
- */
1845
- as?: keyof HTMLElementTagNameMap;
1846
- /**
1847
- * Custom content inside the grid container.
1730
+ * Sets the grid-row CSS property.
1731
+ *
1732
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
1848
1733
  */
1849
- children: React.ReactNode;
1734
+ row?: number | string | GridCell;
1850
1735
  };
1851
1736
  type Props$n = GridItemProps & {
1852
1737
  /**
@@ -1872,7 +1757,7 @@ type Props$n = GridItemProps & {
1872
1757
  *
1873
1758
  * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
1874
1759
  */
1875
- gap?: CoreSpacingTokensType | Gap;
1760
+ gap?: Gap;
1876
1761
  /**
1877
1762
  * Sets the place-content CSS property.
1878
1763
  *
@@ -1910,13 +1795,6 @@ declare const DxcGrid: {
1910
1795
  Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
1911
1796
  };
1912
1797
 
1913
- type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
1914
- type Margin$e = {
1915
- top?: Space$f;
1916
- bottom?: Space$f;
1917
- left?: Space$f;
1918
- right?: Space$f;
1919
- };
1920
1798
  type Props$m = {
1921
1799
  /**
1922
1800
  * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
@@ -1940,7 +1818,7 @@ type Props$m = {
1940
1818
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
1941
1819
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
1942
1820
  */
1943
- margin?: Space$f | Margin$e;
1821
+ margin?: Space$1 | Margin;
1944
1822
  };
1945
1823
 
1946
1824
  declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
@@ -1958,21 +1836,35 @@ type Props$l = {
1958
1836
  * which is required regardless of the presence of the caption or not.
1959
1837
  */
1960
1838
  caption?: string;
1839
+ /**
1840
+ * Sets the rendered height of the image.
1841
+ */
1842
+ height?: string;
1961
1843
  /**
1962
1844
  * If true, the image will be loaded only when it is visible on the screen (lazy loading).
1963
1845
  * Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
1964
1846
  */
1965
1847
  lazyLoading?: boolean;
1966
1848
  /**
1967
- * URL of the image. This prop is required and must be valid.
1849
+ * Sets the object-fit CSS property.
1850
+ *
1851
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
1968
1852
  */
1969
- src: string;
1853
+ objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
1970
1854
  /**
1971
- * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
1855
+ * Sets the object-position CSS property.
1972
1856
  *
1973
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
1857
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
1974
1858
  */
1975
- srcSet?: string;
1859
+ objectPosition?: string;
1860
+ /**
1861
+ * This function will be called when the image fails to load.
1862
+ */
1863
+ onError?: ReactEventHandler<HTMLImageElement>;
1864
+ /**
1865
+ * This function will be called when the image is loaded.
1866
+ */
1867
+ onLoad?: ReactEventHandler<HTMLImageElement>;
1976
1868
  /**
1977
1869
  * One or more strings separated by commas, indicating a set of source sizes.
1978
1870
  * If the srcSet attribute is absent or contains no values with a width descriptor,
@@ -1982,82 +1874,60 @@ type Props$l = {
1982
1874
  */
1983
1875
  sizes?: string;
1984
1876
  /**
1985
- * Sets the rendered width of the image.
1986
- */
1987
- width?: string;
1988
- /**
1989
- * Sets the rendered height of the image.
1990
- */
1991
- height?: string;
1992
- /**
1993
- * Sets the object-fit CSS property.
1994
- *
1995
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
1877
+ * URL of the image. This prop is required and must be valid.
1996
1878
  */
1997
- objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
1879
+ src: string;
1998
1880
  /**
1999
- * Sets the object-position CSS property.
1881
+ * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
2000
1882
  *
2001
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
2002
- */
2003
- objectPosition?: string;
2004
- /**
2005
- * This function will be called when the image is loaded.
1883
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
2006
1884
  */
2007
- onLoad?: React.ReactEventHandler<HTMLImageElement>;
1885
+ srcSet?: string;
2008
1886
  /**
2009
- * This function will be called when the image fails to load.
1887
+ * Sets the rendered width of the image.
2010
1888
  */
2011
- onError?: React.ReactEventHandler<HTMLImageElement>;
1889
+ width?: string;
2012
1890
  };
2013
1891
 
2014
- declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l) => react_jsx_runtime.JSX.Element;
1892
+ declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$l): react_jsx_runtime.JSX.Element;
2015
1893
 
2016
1894
  type Props$k = {
2017
1895
  /**
2018
- * Applies the spacing scale to all sides.
1896
+ * Applies the spacing scale to the bottom side.
2019
1897
  */
2020
- space?: CoreSpacingTokensType;
1898
+ bottom?: string;
2021
1899
  /**
2022
- * Applies the spacing scale to the left and right sides.
1900
+ * Custom content inside the inset.
2023
1901
  */
2024
- horizontal?: CoreSpacingTokensType;
1902
+ children: ReactNode;
2025
1903
  /**
2026
- * Applies the spacing scale to the top and bottom sides.
1904
+ * Applies the spacing scale to the left and right sides.
2027
1905
  */
2028
- vertical?: CoreSpacingTokensType;
1906
+ horizontal?: string;
2029
1907
  /**
2030
- * Applies the spacing scale to the top side.
1908
+ * Applies the spacing scale to the left side.
2031
1909
  */
2032
- top?: CoreSpacingTokensType;
1910
+ left?: string;
2033
1911
  /**
2034
1912
  * Applies the spacing scale to the right side.
2035
1913
  */
2036
- right?: CoreSpacingTokensType;
1914
+ right?: string;
2037
1915
  /**
2038
- * Applies the spacing scale to the bottom side.
1916
+ * Applies the spacing scale to all sides.
2039
1917
  */
2040
- bottom?: CoreSpacingTokensType;
1918
+ space?: string;
2041
1919
  /**
2042
- * Applies the spacing scale to the left side.
1920
+ * Applies the spacing scale to the top side.
2043
1921
  */
2044
- left?: CoreSpacingTokensType;
1922
+ top?: string;
2045
1923
  /**
2046
- * Custom content inside the inset.
1924
+ * Applies the spacing scale to the top and bottom sides.
2047
1925
  */
2048
- children: React.ReactNode;
1926
+ vertical?: string;
2049
1927
  };
2050
1928
 
2051
- declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
1929
+ declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$k): react_jsx_runtime.JSX.Element;
2052
1930
 
2053
- type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2054
- type Margin$d = {
2055
- top?: Space$e;
2056
- bottom?: Space$e;
2057
- left?: Space$e;
2058
- right?: Space$e;
2059
- };
2060
- type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2061
1931
  type LinkProps = {
2062
1932
  /**
2063
1933
  * If true, the link is disabled.
@@ -2070,7 +1940,7 @@ type LinkProps = {
2070
1940
  /**
2071
1941
  * Material Symbol name or SVG element as the icon that will be placed next to the link text.
2072
1942
  */
2073
- icon?: string | SVG$8;
1943
+ icon?: string | SVG;
2074
1944
  /**
2075
1945
  * Indicates the position of the icon in the component.
2076
1946
  */
@@ -2096,7 +1966,7 @@ type LinkProps = {
2096
1966
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2097
1967
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2098
1968
  */
2099
- margin?: Space$e | Margin$d;
1969
+ margin?: Space$1 | Margin;
2100
1970
  /**
2101
1971
  * Value of the tabindex.
2102
1972
  */
@@ -2105,7 +1975,6 @@ type LinkProps = {
2105
1975
 
2106
1976
  declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
2107
1977
 
2108
- type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2109
1978
  type TabProps$1 = {
2110
1979
  /**
2111
1980
  * Whether the tab is active or not.
@@ -2122,7 +1991,7 @@ type TabProps$1 = {
2122
1991
  /**
2123
1992
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
2124
1993
  */
2125
- icon?: string | SVG$7;
1994
+ icon?: string | SVG;
2126
1995
  /**
2127
1996
  * If the value is 'true', an empty badge will appear.
2128
1997
  * If it is 'false', no badge will appear.
@@ -2144,7 +2013,7 @@ type Props$j = {
2144
2013
  /**
2145
2014
  * Contains one or more DxcNavTabs.Tab.
2146
2015
  */
2147
- children: React.ReactNode;
2016
+ children: ReactNode;
2148
2017
  /**
2149
2018
  * Value of the tabindex attribute applied to each tab.
2150
2019
  */
@@ -2156,13 +2025,6 @@ declare const DxcNavTabs: {
2156
2025
  Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
2157
2026
  };
2158
2027
 
2159
- type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2160
- type Margin$c = {
2161
- top?: Space$d;
2162
- bottom?: Space$d;
2163
- left?: Space$d;
2164
- right?: Space$d;
2165
- };
2166
2028
  type Props$i = {
2167
2029
  /**
2168
2030
  * Text to be placed above the number.
@@ -2271,7 +2133,7 @@ type Props$i = {
2271
2133
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2272
2134
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2273
2135
  */
2274
- margin?: Space$d | Margin$c;
2136
+ margin?: Space$1 | Margin;
2275
2137
  /**
2276
2138
  * Size of the component.
2277
2139
  */
@@ -2280,6 +2142,14 @@ type Props$i = {
2280
2142
  * Value of the tabindex attribute.
2281
2143
  */
2282
2144
  tabIndex?: number;
2145
+ /**
2146
+ * Specifies a string to be used as the name for the number input element when no `label` is provided.
2147
+ */
2148
+ ariaLabel?: string;
2149
+ /**
2150
+ * Decides whether the number input has actions to increase or decrease the value, following the defined step.
2151
+ */
2152
+ showControls?: boolean;
2283
2153
  };
2284
2154
 
2285
2155
  declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2324,17 +2194,10 @@ type Props$h = {
2324
2194
 
2325
2195
  declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
2326
2196
 
2327
- declare const DxcParagraph: ({ children }: {
2328
- children: React.ReactNode;
2329
- }) => JSX.Element;
2197
+ declare function DxcParagraph({ children }: {
2198
+ children: ReactNode;
2199
+ }): react_jsx_runtime.JSX.Element;
2330
2200
 
2331
- type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2332
- type Margin$b = {
2333
- top?: Space$c;
2334
- bottom?: Space$c;
2335
- left?: Space$c;
2336
- right?: Space$c;
2337
- };
2338
2201
  type Props$g = {
2339
2202
  /**
2340
2203
  * Text to be placed above the password input.
@@ -2424,7 +2287,7 @@ type Props$g = {
2424
2287
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2425
2288
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2426
2289
  */
2427
- margin?: Space$c | Margin$b;
2290
+ margin?: Space$1 | Margin;
2428
2291
  /**
2429
2292
  * Size of the component.
2430
2293
  */
@@ -2433,16 +2296,19 @@ type Props$g = {
2433
2296
  * Value of the tabindex attribute.
2434
2297
  */
2435
2298
  tabIndex?: number;
2299
+ /**
2300
+ * Specifies a string to be used as the name for the password input element when no `label` is provided.
2301
+ */
2302
+ ariaLabel?: string;
2436
2303
  };
2437
2304
 
2438
2305
  declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
2439
2306
 
2440
- type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2441
2307
  type Size$1 = {
2442
- top?: Space$b;
2443
- bottom?: Space$b;
2444
- left?: Space$b;
2445
- right?: Space$b;
2308
+ top?: Space$1;
2309
+ bottom?: Space$1;
2310
+ left?: Space$1;
2311
+ right?: Space$1;
2446
2312
  };
2447
2313
  type Props$f = {
2448
2314
  /**
@@ -2471,10 +2337,14 @@ type Props$f = {
2471
2337
  * an object with 'top', 'bottom', 'left' and 'right' properties
2472
2338
  * in order to specify different margin sizes.
2473
2339
  */
2474
- margin?: Space$b | Size$1;
2340
+ margin?: Space$1 | Size$1;
2341
+ /**
2342
+ * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
2343
+ */
2344
+ ariaLabel?: string;
2475
2345
  };
2476
2346
 
2477
- declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
2347
+ declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
2478
2348
 
2479
2349
  type Link = {
2480
2350
  /**
@@ -2499,7 +2369,7 @@ type Props$e = {
2499
2369
 
2500
2370
  declare const DxcQuickNav: ({ title, links }: Props$e) => JSX.Element;
2501
2371
 
2502
- type RadioOption = {
2372
+ type Option$1 = {
2503
2373
  /**
2504
2374
  * Label of the option placed next to the radio input.
2505
2375
  */
@@ -2517,26 +2387,39 @@ type RadioOption = {
2517
2387
  };
2518
2388
  type RadioGroupProps = {
2519
2389
  /**
2520
- * Text to be placed above the radio group.
2390
+ * Specifies a string to be used as the name for the radio group when no `label` is provided.
2521
2391
  */
2522
- label?: string;
2392
+ ariaLabel?: string;
2523
2393
  /**
2524
- * Name attribute of the input element. This attribute will allow users
2525
- * to find the component's value during the submit event.
2394
+ * Initial value of the radio group, only when it is uncontrolled.
2526
2395
  */
2527
- name?: string;
2396
+ defaultValue?: string;
2397
+ /**
2398
+ * If true, the component will be disabled.
2399
+ */
2400
+ disabled?: boolean;
2401
+ /**
2402
+ * If it is a defined value and also a truthy string, the component will
2403
+ * change its appearance, showing the error below the radio group. If the
2404
+ * defined value is an empty string, it will reserve a space below the
2405
+ * component for a future error, but it would not change its look. In
2406
+ * case of being undefined or null, both the appearance and the space for
2407
+ * the error message would not be modified.
2408
+ */
2409
+ error?: string;
2528
2410
  /**
2529
2411
  * Helper text to be placed above the radio group.
2530
2412
  */
2531
2413
  helperText?: string;
2532
2414
  /**
2533
- * An array of objects representing the selectable options.
2415
+ * Text to be placed above the radio group.
2534
2416
  */
2535
- options: RadioOption[];
2417
+ label?: string;
2536
2418
  /**
2537
- * If true, the component will be disabled.
2419
+ * Name attribute of the input element. This attribute will allow users
2420
+ * to find the component's value during the submit event.
2538
2421
  */
2539
- disabled?: boolean;
2422
+ name?: string;
2540
2423
  /**
2541
2424
  * If true, the radio group will be optional, showing
2542
2425
  * (Optional) next to the label and adding a default last
@@ -2550,28 +2433,9 @@ type RadioGroupProps = {
2550
2433
  */
2551
2434
  optionalItemLabel?: string;
2552
2435
  /**
2553
- * If true, the component will not be mutable, meaning the user can not edit the control.
2554
- */
2555
- readOnly?: boolean;
2556
- /**
2557
- * Sets the orientation of the options within the radio group.
2558
- */
2559
- stacking?: "row" | "column";
2560
- /**
2561
- * Initial value of the radio group, only when it is uncontrolled.
2562
- */
2563
- defaultValue?: string;
2564
- /**
2565
- * Value of the radio group. If undefined, the component will be
2566
- * uncontrolled and the value will be managed internally by the
2567
- * component.
2568
- */
2569
- value?: string;
2570
- /**
2571
- * This function will be called when the user chooses an option. The new
2572
- * value will be passed to this function.
2436
+ * An array of objects representing the selectable options.
2573
2437
  */
2574
- onChange?: (value: string) => void;
2438
+ options: Option$1[];
2575
2439
  /**
2576
2440
  * This function will be called when the radio group loses the focus. An
2577
2441
  * object including the value and the error will be passed to this
@@ -2582,34 +2446,37 @@ type RadioGroupProps = {
2582
2446
  error?: string;
2583
2447
  }) => void;
2584
2448
  /**
2585
- * If it is a defined value and also a truthy string, the component will
2586
- * change its appearance, showing the error below the radio group. If the
2587
- * defined value is an empty string, it will reserve a space below the
2588
- * component for a future error, but it would not change its look. In
2589
- * case of being undefined or null, both the appearance and the space for
2590
- * the error message would not be modified.
2449
+ * This function will be called when the user chooses an option. The new
2450
+ * value will be passed to this function.
2591
2451
  */
2592
- error?: string;
2452
+ onChange?: (value: string) => void;
2453
+ /**
2454
+ * If true, the component will not be mutable, meaning the user can not edit the control.
2455
+ */
2456
+ readOnly?: boolean;
2457
+ /**
2458
+ * Sets the orientation of the options within the radio group.
2459
+ */
2460
+ stacking?: "row" | "column";
2593
2461
  /**
2594
2462
  * Value of the tabindex attribute.
2595
2463
  */
2596
2464
  tabIndex?: number;
2465
+ /**
2466
+ * Value of the radio group. If undefined, the component will be
2467
+ * uncontrolled and the value will be managed internally by the
2468
+ * component.
2469
+ */
2470
+ value?: string;
2597
2471
  };
2598
2472
 
2599
2473
  declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
2600
2474
 
2601
- type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2602
- type Margin$a = {
2603
- top?: Space$a;
2604
- bottom?: Space$a;
2605
- left?: Space$a;
2606
- right?: Space$a;
2607
- };
2608
2475
  type Column = {
2609
2476
  /**
2610
2477
  * Column display value.
2611
2478
  */
2612
- displayValue: React.ReactNode;
2479
+ displayValue: ReactNode;
2613
2480
  /**
2614
2481
  * Boolean value to indicate whether the column is sortable or not.
2615
2482
  */
@@ -2619,7 +2486,7 @@ type Cell = {
2619
2486
  /**
2620
2487
  * Value to be displayed in the cell.
2621
2488
  */
2622
- displayValue: React.ReactNode;
2489
+ displayValue: ReactNode;
2623
2490
  /**
2624
2491
  * Value to be used when sorting the table by that
2625
2492
  * column. If not indicated displayValue will be used for sorting.
@@ -2641,7 +2508,7 @@ type CommonProps$3 = {
2641
2508
  * Size of the margin to be applied to the component. You can pass an object with 'top',
2642
2509
  * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2643
2510
  */
2644
- margin?: Space$a | Margin$a;
2511
+ margin?: Space$1 | Margin;
2645
2512
  /**
2646
2513
  * Value of the tabindex attribute applied to the sortable icon.
2647
2514
  */
@@ -2703,14 +2570,6 @@ declare const DxcResultsetTable: {
2703
2570
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
2704
2571
  };
2705
2572
 
2706
- type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2707
- type Margin$9 = {
2708
- top?: Space$9;
2709
- bottom?: Space$9;
2710
- left?: Space$9;
2711
- right?: Space$9;
2712
- };
2713
- type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
2714
2573
  type ListOptionGroupType = {
2715
2574
  /**
2716
2575
  * Label of the group to be shown in the select's listbox.
@@ -2728,7 +2587,7 @@ type ListOptionType = {
2728
2587
  * is the chosen one, take into account that the component's
2729
2588
  * color styling tokens will not be applied to the image.
2730
2589
  */
2731
- icon?: string | SVG$6;
2590
+ icon?: string | SVG;
2732
2591
  /**
2733
2592
  * Label of the option to be shown in the select's listbox.
2734
2593
  */
@@ -2794,7 +2653,7 @@ type CommonProps$2 = {
2794
2653
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2795
2654
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2796
2655
  */
2797
- margin?: Space$9 | Margin$9;
2656
+ margin?: Space$1 | Margin;
2798
2657
  /**
2799
2658
  * Size of the component.
2800
2659
  */
@@ -2803,6 +2662,10 @@ type CommonProps$2 = {
2803
2662
  * Value of the tabindex attribute.
2804
2663
  */
2805
2664
  tabIndex?: number;
2665
+ /**
2666
+ * Specifies a string to be used as the name for the select element when no `label` is provided.
2667
+ */
2668
+ ariaLabel?: string;
2806
2669
  };
2807
2670
  type SingleSelect = CommonProps$2 & {
2808
2671
  /**
@@ -2880,62 +2743,53 @@ type Props$c = SingleSelect | MultipleSelect;
2880
2743
 
2881
2744
  declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
2882
2745
 
2883
- type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2884
- type Margin$8 = {
2885
- top?: Space$8;
2886
- bottom?: Space$8;
2887
- left?: Space$8;
2888
- right?: Space$8;
2889
- };
2890
2746
  type Props$b = {
2891
2747
  /**
2892
- * Text to be placed above the slider.
2893
- */
2894
- label?: string;
2895
- /**
2896
- * Name attribute of the input element.
2748
+ * Specifies a string to be used as the name for the slider element when no `label` is provided.
2897
2749
  */
2898
- name?: string;
2750
+ ariaLabel?: string;
2899
2751
  /**
2900
2752
  * Initial value of the slider, only when it is uncontrolled.
2901
2753
  */
2902
2754
  defaultValue?: number;
2903
2755
  /**
2904
- * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
2756
+ * If true, the component will be disabled.
2905
2757
  */
2906
- value?: number;
2758
+ disabled?: boolean;
2907
2759
  /**
2908
2760
  * Helper text to be placed above the slider.
2909
2761
  */
2910
2762
  helperText?: string;
2911
2763
  /**
2912
- * The minimum value available for selection.
2764
+ * Text to be placed above the slider.
2913
2765
  */
2914
- minValue?: number;
2766
+ label?: string;
2915
2767
  /**
2916
- * The maximum value available for selection.
2768
+ * This function will be used to format the labels displayed next to the slider.
2769
+ * The value will be passed as parameter and the function must return the formatted value.
2917
2770
  */
2918
- maxValue?: number;
2771
+ labelFormatCallback?: (value: number) => string;
2919
2772
  /**
2920
- * The step interval between values available for selection.
2773
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2774
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2921
2775
  */
2922
- step?: number;
2776
+ margin?: Space$1 | Margin;
2923
2777
  /**
2924
- * Whether the min/max value labels should be displayed next to the slider
2778
+ * Whether the marks between each step should be shown or not.
2925
2779
  */
2926
- showLimitsValues?: boolean;
2780
+ marks?: boolean;
2927
2781
  /**
2928
- * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
2782
+ * The maximum value available for selection.
2929
2783
  */
2930
- showInput?: boolean;
2784
+ maxValue?: number;
2931
2785
  /**
2932
- * If true, the component will be disabled.
2786
+ * The minimum value available for selection.
2933
2787
  */
2934
- disabled?: boolean;
2788
+ minValue?: number;
2935
2789
  /**
2936
- * Whether the marks between each step should be shown or not.
2790
+ * Name attribute of the input element.
2937
2791
  */
2938
- marks?: boolean;
2792
+ name?: string;
2939
2793
  /**
2940
2794
  * This function will be called when the slider changes its value, as it's being dragged.
2941
2795
  * The new value will be passed as a parameter when this function is executed.
@@ -2947,56 +2801,64 @@ type Props$b = {
2947
2801
  */
2948
2802
  onDragEnd?: (value: number) => void;
2949
2803
  /**
2950
- * This function will be used to format the labels displayed next to the slider.
2951
- * The value will be passed as parameter and the function must return the formatted value.
2804
+ * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
2952
2805
  */
2953
- labelFormatCallback?: (value: number) => string;
2806
+ showInput?: boolean;
2954
2807
  /**
2955
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2956
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2808
+ * Whether the min/max value labels should be displayed next to the slider
2957
2809
  */
2958
- margin?: Space$8 | Margin$8;
2810
+ showLimitsValues?: boolean;
2959
2811
  /**
2960
2812
  * Size of the component.
2961
2813
  */
2962
2814
  size?: "medium" | "large" | "fillParent";
2815
+ /**
2816
+ * The step interval between values available for selection.
2817
+ */
2818
+ step?: number;
2819
+ /**
2820
+ * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
2821
+ */
2822
+ value?: number;
2963
2823
  };
2964
2824
 
2965
2825
  declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
2966
2826
 
2967
- type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2968
- type Margin$7 = {
2969
- top?: Space$7;
2970
- bottom?: Space$7;
2971
- left?: Space$7;
2972
- right?: Space$7;
2973
- };
2974
2827
  type Props$a = {
2975
2828
  /**
2976
- * Text to be placed inside the spinner.
2829
+ * Specifies a string to be used as the name for the spinner element when no `label` is provided or the `mode` is set to small.
2977
2830
  */
2978
- label?: string;
2831
+ ariaLabel?: string;
2979
2832
  /**
2980
- * The value of the progress indicator. If it's received the
2981
- * component is determinate, otherwise is indeterminate.
2833
+ * If true, the color is inherited from the closest parent with a defined color. This allows users to adapt the spinner
2834
+ * to the semantic color of the use case in which it is used.
2982
2835
  */
2983
- value?: number;
2836
+ inheritColor?: boolean;
2984
2837
  /**
2985
- * If true, the value is displayed inside the spinner..
2838
+ * Text to be placed inside the spinner.
2986
2839
  */
2987
- showValue?: boolean;
2840
+ label?: string;
2841
+ /**
2842
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2843
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2844
+ */
2845
+ margin?: Space$1 | Margin;
2988
2846
  /**
2989
2847
  * Available modes of the spinner.
2990
2848
  */
2991
2849
  mode?: "large" | "small" | "overlay";
2992
2850
  /**
2993
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2994
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
2851
+ * If true, the value is displayed inside the spinner..
2995
2852
  */
2996
- margin?: Space$7 | Margin$7;
2853
+ showValue?: boolean;
2854
+ /**
2855
+ * The value of the progress indicator. If it's received the
2856
+ * component is determinate, otherwise is indeterminate.
2857
+ */
2858
+ value?: number;
2997
2859
  };
2998
2860
 
2999
- declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
2861
+ declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$a) => react_jsx_runtime.JSX.Element;
3000
2862
 
3001
2863
  type Mode = "default" | "info" | "success" | "warning" | "error";
3002
2864
  type Size = "small" | "medium" | "large";
@@ -3015,30 +2877,26 @@ type Props$9 = {
3015
2877
  size?: Size;
3016
2878
  };
3017
2879
 
3018
- declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
2880
+ declare function DxcStatusLight({ label, mode, size }: Props$9): react_jsx_runtime.JSX.Element;
3019
2881
 
3020
- type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3021
- type Margin$6 = {
3022
- top?: Space$6;
3023
- bottom?: Space$6;
3024
- left?: Space$6;
3025
- right?: Space$6;
3026
- };
3027
2882
  type Props$8 = {
3028
2883
  /**
3029
- * Initial state of the switch, only when it is uncontrolled.
2884
+ * Specifies a string to be used as the name for the switch element when no `label` is provided.
3030
2885
  */
3031
- defaultChecked?: boolean;
2886
+ ariaLabel?: string;
3032
2887
  /**
3033
2888
  * If true, the component is checked. If undefined, the component will be uncontrolled
3034
2889
  * and the checked attribute will be managed internally by the component.
3035
2890
  */
3036
- checked?: boolean;
2891
+ checked?: boolean;
2892
+ /**
2893
+ * Initial state of the switch, only when it is uncontrolled.
2894
+ */
2895
+ defaultChecked?: boolean;
3037
2896
  /**
3038
- * Will be passed to the value attribute of the html input element. When inside a form,
3039
- * this value will be only submitted if the switch is checked.
2897
+ * If true, the component will be disabled.
3040
2898
  */
3041
- value?: string;
2899
+ disabled?: boolean;
3042
2900
  /**
3043
2901
  * Text to be placed next to the switch.
3044
2902
  */
@@ -3048,13 +2906,14 @@ type Props$8 = {
3048
2906
  */
3049
2907
  labelPosition?: "before" | "after";
3050
2908
  /**
3051
- * Name attribute of the input element.
2909
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
2910
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3052
2911
  */
3053
- name?: string;
2912
+ margin?: Space$1 | Margin;
3054
2913
  /**
3055
- * If true, the component will be disabled.
2914
+ * Name attribute of the input element.
3056
2915
  */
3057
- disabled?: boolean;
2916
+ name?: string;
3058
2917
  /**
3059
2918
  * This function will be called when the user changes the state of the switch.
3060
2919
  * The new value of the checked attribute will be passed as a parameter.
@@ -3064,11 +2923,6 @@ type Props$8 = {
3064
2923
  * If true, the component will display '(Optional)' next to the label.
3065
2924
  */
3066
2925
  optional?: boolean;
3067
- /**
3068
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3069
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3070
- */
3071
- margin?: Space$6 | Margin$6;
3072
2926
  /**
3073
2927
  * Size of the component.
3074
2928
  */
@@ -3077,6 +2931,11 @@ type Props$8 = {
3077
2931
  * Value of the tabindex.
3078
2932
  */
3079
2933
  tabIndex?: number;
2934
+ /**
2935
+ * Will be passed to the value attribute of the html input element. When inside a form,
2936
+ * this value will be only submitted if the switch is checked.
2937
+ */
2938
+ value?: string;
3080
2939
  };
3081
2940
 
3082
2941
  declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
@@ -3086,14 +2945,6 @@ declare const DxcTable: {
3086
2945
  ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
3087
2946
  };
3088
2947
 
3089
- type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3090
- type Margin$5 = {
3091
- top?: Space$5;
3092
- bottom?: Space$5;
3093
- left?: Space$5;
3094
- right?: Space$5;
3095
- };
3096
- type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3097
2948
  type TabCommonProps = {
3098
2949
  /**
3099
2950
  * Whether the tab is disabled or not.
@@ -3116,7 +2967,7 @@ type TabLabelProps = TabCommonProps & {
3116
2967
  /**
3117
2968
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3118
2969
  */
3119
- icon?: string | SVG$5;
2970
+ icon?: string | SVG;
3120
2971
  };
3121
2972
  type TabIconProps = TabCommonProps & {
3122
2973
  /**
@@ -3126,57 +2977,62 @@ type TabIconProps = TabCommonProps & {
3126
2977
  /**
3127
2978
  * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
3128
2979
  */
3129
- icon: string | SVG$5;
2980
+ icon: string | SVG;
3130
2981
  };
3131
2982
  type TabProps = {
3132
2983
  defaultActive?: boolean;
3133
2984
  active?: boolean;
3134
- icon?: string | SVG$5;
3135
- label?: string;
2985
+ icon?: string | SVG;
2986
+ label: string;
3136
2987
  title?: string;
3137
2988
  disabled?: boolean;
3138
2989
  notificationNumber?: boolean | number;
3139
- children: React.ReactNode;
2990
+ children: ReactNode;
3140
2991
  onClick?: () => void;
3141
2992
  onHover?: () => void;
3142
2993
  };
3143
2994
  type LegacyProps = {
3144
2995
  /**
3145
- * Initially active tab, only when it is uncontrolled.
3146
- */
3147
- defaultActiveTabIndex?: number;
3148
- /**
2996
+ * @deprecated This prop is deprecated and will be removed in future versions. Use the children prop instead.
3149
2997
  * The index of the active tab. If undefined, the component will be
3150
2998
  * uncontrolled and the active tab will be managed internally by the component.
3151
2999
  */
3152
3000
  activeTabIndex?: number;
3153
3001
  /**
3154
- * An array of objects representing the tabs.
3002
+ * @deprecated This prop is deprecated and will be removed in future versions.
3003
+ * Initially active tab, only when it is uncontrolled.
3155
3004
  */
3156
- tabs?: (TabLabelProps | TabIconProps)[];
3005
+ defaultActiveTabIndex?: number;
3157
3006
  /**
3158
3007
  * Whether the icon should appear above or to the left of the label.
3159
3008
  */
3160
3009
  iconPosition?: "top" | "left";
3161
3010
  /**
3011
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3012
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3013
+ */
3014
+ margin?: Space$1 | Margin;
3015
+ /**
3016
+ * @deprecated This prop is deprecated and will be removed in future versions.
3162
3017
  * This function will be called when the user clicks on a tab. The index of the
3163
3018
  * clicked tab will be passed as a parameter.
3164
3019
  */
3165
3020
  onTabClick?: (index: number) => void;
3166
3021
  /**
3022
+ * @deprecated This prop is deprecated and will be removed in future versions.
3167
3023
  * This function will be called when the user hovers a tab.The index of the
3168
3024
  * hovered tab will be passed as a parameter.
3169
3025
  */
3170
- onTabHover?: (index: number) => void;
3171
- /**
3172
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3173
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3174
- */
3175
- margin?: Space$5 | Margin$5;
3026
+ onTabHover?: (index: number | null) => void;
3176
3027
  /**
3177
3028
  * Value of the tabindex attribute applied to each tab.
3178
3029
  */
3179
3030
  tabIndex?: number;
3031
+ /**
3032
+ * @deprecated This prop is deprecated and will be removed in future versions.
3033
+ * An array of objects representing the tabs.
3034
+ */
3035
+ tabs?: (TabLabelProps | TabIconProps)[];
3180
3036
  };
3181
3037
  type NewProps = {
3182
3038
  /**
@@ -3187,7 +3043,7 @@ type NewProps = {
3187
3043
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3188
3044
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3189
3045
  */
3190
- margin?: Space$5 | Margin$5;
3046
+ margin?: Space$1 | Margin;
3191
3047
  /**
3192
3048
  * Value of the tabindex attribute applied to each tab.
3193
3049
  */
@@ -3195,23 +3051,15 @@ type NewProps = {
3195
3051
  /**
3196
3052
  * Contains one or more DxcTabs.Tab.
3197
3053
  */
3198
- children?: React.ReactNode;
3054
+ children?: ReactNode;
3199
3055
  };
3200
3056
  type Props$7 = LegacyProps & NewProps;
3201
3057
 
3202
3058
  declare const DxcTabs: {
3203
- ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): JSX.Element;
3059
+ ({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$7): false | react_jsx_runtime.JSX.Element;
3204
3060
  Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
3205
3061
  };
3206
3062
 
3207
- type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3208
- type Margin$4 = {
3209
- top?: Space$4;
3210
- bottom?: Space$4;
3211
- left?: Space$4;
3212
- right?: Space$4;
3213
- };
3214
- type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3215
3063
  type TagCommonProps = {
3216
3064
  /**
3217
3065
  * If defined, the tag will be displayed as an anchor, using this prop as "href".
@@ -3240,7 +3088,7 @@ type TagCommonProps = {
3240
3088
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3241
3089
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3242
3090
  */
3243
- margin?: Space$4 | Margin$4;
3091
+ margin?: Space$1 | Margin;
3244
3092
  /**
3245
3093
  * Size of the component.
3246
3094
  */
@@ -3254,7 +3102,7 @@ type TagLabelProps = TagCommonProps & {
3254
3102
  /**
3255
3103
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3256
3104
  */
3257
- icon?: string | SVG$4;
3105
+ icon?: string | SVG;
3258
3106
  /**
3259
3107
  * Text to be placed next inside the tag.
3260
3108
  */
@@ -3264,7 +3112,7 @@ type TagIconProps = TagCommonProps & {
3264
3112
  /**
3265
3113
  * Material Symbol name or SVG element used as the icon that will be placed next to the label.
3266
3114
  */
3267
- icon: string | SVG$4;
3115
+ icon: string | SVG;
3268
3116
  /**
3269
3117
  * Text to be placed next inside the tag.
3270
3118
  */
@@ -3277,13 +3125,6 @@ type Props$6 = TagLabelProps | TagIconProps;
3277
3125
  */
3278
3126
  declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
3279
3127
 
3280
- type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3281
- type Margin$3 = {
3282
- top?: Space$3;
3283
- bottom?: Space$3;
3284
- left?: Space$3;
3285
- right?: Space$3;
3286
- };
3287
3128
  type Props$5 = {
3288
3129
  /**
3289
3130
  * Text to be placed above the textarea.
@@ -3403,7 +3244,7 @@ type Props$5 = {
3403
3244
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3404
3245
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3405
3246
  */
3406
- margin?: Space$3 | Margin$3;
3247
+ margin?: Space$1 | Margin;
3407
3248
  /**
3408
3249
  * Size of the component.
3409
3250
  */
@@ -3412,18 +3253,14 @@ type Props$5 = {
3412
3253
  * Value of the tabindex attribute.
3413
3254
  */
3414
3255
  tabIndex?: number;
3256
+ /**
3257
+ * Specifies a string to be used as the name for the textarea element when no `label` is provided.
3258
+ */
3259
+ ariaLabel?: string;
3415
3260
  };
3416
3261
 
3417
3262
  declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
3418
3263
 
3419
- type Space$2 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3420
- type Margin$2 = {
3421
- top?: Space$2;
3422
- bottom?: Space$2;
3423
- left?: Space$2;
3424
- right?: Space$2;
3425
- };
3426
- type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3427
3264
  type Action$1 = {
3428
3265
  /**
3429
3266
  * This function will be called when the user clicks the action.
@@ -3432,7 +3269,7 @@ type Action$1 = {
3432
3269
  /**
3433
3270
  * Icon to be placed in the action..
3434
3271
  */
3435
- icon: string | SVG$3;
3272
+ icon: string | SVG;
3436
3273
  /**
3437
3274
  * Text representing advisory information related
3438
3275
  * to the button's action. Under the hood, this prop also serves
@@ -3574,7 +3411,7 @@ type Props$4 = {
3574
3411
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3575
3412
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3576
3413
  */
3577
- margin?: Space$2 | Margin$2;
3414
+ margin?: Space$1 | Margin;
3578
3415
  /**
3579
3416
  * Size of the component.
3580
3417
  */
@@ -3583,53 +3420,78 @@ type Props$4 = {
3583
3420
  * Value of the tabindex attribute.
3584
3421
  */
3585
3422
  tabIndex?: number;
3423
+ /**
3424
+ * Specifies a string to be used as the name for the textInput element when no `label` is provided.
3425
+ */
3426
+ ariaLabel?: string;
3586
3427
  };
3587
3428
 
3588
3429
  declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
3589
3430
 
3590
- type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3591
3431
  type Action = {
3592
- icon?: string | SVG$2;
3432
+ /**
3433
+ * The icon of the action. It can be a string with the name of the icon or an SVG component.
3434
+ */
3435
+ icon?: string | SVG;
3436
+ /**
3437
+ * The label of the action.
3438
+ */
3593
3439
  label: string;
3440
+ /**
3441
+ * The function that will be executed when the user clicks on the action button.
3442
+ */
3594
3443
  onClick: () => void;
3595
3444
  };
3596
3445
  type CommonProps$1 = {
3446
+ /**
3447
+ * Tertiary button which performs a custom action, specified by the user.
3448
+ */
3597
3449
  action?: Action;
3450
+ /**
3451
+ * Message to be displayed as a toast.
3452
+ */
3598
3453
  message: string;
3599
3454
  };
3600
3455
  type DefaultToast = CommonProps$1 & {
3601
- icon?: string | SVG$2;
3456
+ /**
3457
+ * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
3458
+ * When using Material Symbols, replace spaces with underscores.
3459
+ * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
3460
+ */
3461
+ icon?: string | SVG;
3602
3462
  };
3603
3463
  type LoadingToast = CommonProps$1 & {
3604
3464
  loading: boolean;
3605
3465
  };
3606
3466
  type SemanticToast = CommonProps$1 & {
3467
+ /**
3468
+ * Flag that allows to hide the semantic icon of the toast.
3469
+ */
3607
3470
  hideSemanticIcon?: boolean;
3608
3471
  };
3609
3472
  type ToastsQueuePropsType = {
3473
+ /**
3474
+ * Tree of components from which the useToast hook can be triggered.
3475
+ */
3476
+ children: ReactNode;
3477
+ /**
3478
+ * Duration in milliseconds before a toast automatically hides itself.
3479
+ * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
3480
+ */
3610
3481
  duration?: number;
3611
- children: React.ReactNode;
3612
3482
  };
3613
3483
 
3614
- declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
3484
+ declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react_jsx_runtime.JSX.Element;
3615
3485
 
3616
- type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3617
- type Margin$1 = {
3618
- top?: Space$1;
3619
- bottom?: Space$1;
3620
- left?: Space$1;
3621
- right?: Space$1;
3622
- };
3623
- type SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
3624
3486
  type OptionIcon = {
3625
3487
  /**
3626
- * String with the option display value.
3488
+ * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3627
3489
  */
3628
- label?: never;
3490
+ icon: string | SVG;
3629
3491
  /**
3630
- * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3492
+ * String with the option display value.
3631
3493
  */
3632
- icon: string | SVG$1;
3494
+ label?: never;
3633
3495
  /**
3634
3496
  * Value for the HTML properties title and aria-label.
3635
3497
  * When a label is defined, this prop can not be use.
@@ -3638,13 +3500,13 @@ type OptionIcon = {
3638
3500
  };
3639
3501
  type OptionLabel = {
3640
3502
  /**
3641
- * String with the option display value.
3503
+ * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3642
3504
  */
3643
- label: string;
3505
+ icon?: string | SVG;
3644
3506
  /**
3645
- * Material Symbols icon or SVG element. Icon and label can't be used at same time.
3507
+ * String with the option display value.
3646
3508
  */
3647
- icon?: string | SVG$1;
3509
+ label: string;
3648
3510
  /**
3649
3511
  * Value for the HTML properties title and aria-label.
3650
3512
  * When a label is defined, this prop can not be use.
@@ -3652,6 +3514,10 @@ type OptionLabel = {
3652
3514
  title?: never;
3653
3515
  };
3654
3516
  type Option = {
3517
+ /**
3518
+ * If true, the option will be disabled.
3519
+ */
3520
+ disabled?: boolean;
3655
3521
  /**
3656
3522
  * Number with the option inner value.
3657
3523
  */
@@ -3659,94 +3525,88 @@ type Option = {
3659
3525
  } & (OptionIcon | OptionLabel);
3660
3526
  type CommonProps = {
3661
3527
  /**
3662
- * Text to be placed above the component.
3663
- */
3664
- label?: string;
3665
- /**
3666
- * Helper text to be placed above the component.
3667
- */
3668
- helperText?: string;
3669
- /**
3670
- * If true, the component will be disabled.
3528
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3529
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3671
3530
  */
3672
- disabled?: boolean;
3531
+ margin?: Space$1 | Margin;
3673
3532
  /**
3674
3533
  * An array of objects representing the selectable options.
3675
3534
  */
3676
3535
  options: Option[];
3677
3536
  /**
3678
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3679
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3537
+ * The orientation of the toggle group.
3680
3538
  */
3681
- margin?: Space$1 | Margin$1;
3539
+ orientation?: "horizontal" | "vertical";
3682
3540
  /**
3683
3541
  * Value of the tabindex.
3684
3542
  */
3685
3543
  tabIndex?: number;
3686
3544
  };
3687
- type SingleSelectionToggleGroup = CommonProps & {
3545
+ type MultipleSelectionToggleGroup = {
3546
+ /**
3547
+ * The array of keys with the initially selected values.
3548
+ */
3549
+ defaultValue?: number[];
3688
3550
  /**
3689
3551
  * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
3690
3552
  */
3691
- multiple?: false;
3553
+ multiple: true;
3692
3554
  /**
3693
- * The key of the initially selected value.
3555
+ * This function will be called every time the selection changes. An array with the key of
3556
+ * the selected values will be passed as a parameter to this function.
3694
3557
  */
3695
- defaultValue?: number;
3558
+ onChange?: (optionIndex: number[]) => void;
3696
3559
  /**
3697
- * The key of the selected value. If the component allows multiple selection, value must be an array.
3560
+ * An array with the keys of the selected values.
3698
3561
  * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
3699
3562
  */
3700
- value?: number;
3563
+ value?: number[];
3564
+ };
3565
+ type SingleSelectionToggleGroup = {
3701
3566
  /**
3702
- * This function will be called every time the selection changes. The number with the key of the selected
3703
- * value will be passed as a parameter to this function.
3567
+ * The key of the initially selected value.
3704
3568
  */
3705
- onChange?: (optionIndex: number) => void;
3706
- };
3707
- type MultipleSelectionToggleGroup = CommonProps & {
3569
+ defaultValue?: number;
3708
3570
  /**
3709
3571
  * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
3710
3572
  */
3711
- multiple: true;
3573
+ multiple?: false;
3712
3574
  /**
3713
- * The array of keys with the initially selected values.
3575
+ * This function will be called every time the selection changes. The number with the key of the selected
3576
+ * value will be passed as a parameter to this function.
3714
3577
  */
3715
- defaultValue?: number[];
3578
+ onChange?: (optionIndex: number) => void;
3716
3579
  /**
3717
- * An array with the keys of the selected values.
3580
+ * The key of the selected value. If the component allows multiple selection, value must be an array.
3718
3581
  * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
3719
3582
  */
3720
- value?: number[];
3721
- /**
3722
- * This function will be called every time the selection changes. An array with the key of
3723
- * the selected values will be passed as a parameter to this function.
3724
- */
3725
- onChange?: (optionIndex: number[]) => void;
3583
+ value?: number;
3726
3584
  };
3727
- type Props$3 = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
3585
+ type Props$3 = CommonProps & (MultipleSelectionToggleGroup | SingleSelectionToggleGroup);
3728
3586
 
3729
- declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: Props$3) => JSX.Element;
3587
+ declare function DxcToggleGroup({ defaultValue, margin, multiple, onChange, options, orientation, tabIndex, value, }: Props$3): react_jsx_runtime.JSX.Element;
3730
3588
 
3731
3589
  type Props$2 = {
3732
3590
  /**
3733
- * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
3591
+ * Content in which the Tooltip will be displayed.
3734
3592
  */
3735
- position?: "bottom" | "top" | "left" | "right";
3593
+ children: ReactNode;
3736
3594
  /**
3737
3595
  * Text to be displayed inside the tooltip.
3738
3596
  */
3739
- label: string;
3597
+ label?: string;
3740
3598
  /**
3741
- * Content in which the Tooltip will be displayed.
3599
+ * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
3742
3600
  */
3743
- children: React.ReactNode;
3601
+ position?: "bottom" | "top" | "left" | "right";
3744
3602
  };
3745
3603
 
3746
3604
  declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
3747
3605
 
3748
3606
  type Props$1 = {
3749
- as?: keyof HTMLElementTagNameMap;
3607
+ as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
3608
+ children: ReactNode;
3609
+ color?: string;
3750
3610
  display?: "inline" | "block";
3751
3611
  fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
3752
3612
  fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
@@ -3755,23 +3615,13 @@ type Props$1 = {
3755
3615
  letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
3756
3616
  lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
3757
3617
  textAlign?: "left" | "center" | "right";
3758
- color?: string;
3759
3618
  textDecoration?: "none" | "underline" | "line-through";
3760
3619
  textOverflow?: "clip" | "ellipsis" | "unset";
3761
3620
  whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
3762
- children: React.ReactNode;
3763
3621
  };
3764
3622
 
3765
- declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: Props$1) => JSX.Element;
3623
+ declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
3766
3624
 
3767
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3768
- type Margin = {
3769
- top?: Space;
3770
- bottom?: Space;
3771
- left?: Space;
3772
- right?: Space;
3773
- };
3774
- type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
3775
3625
  type StepProps = {
3776
3626
  /**
3777
3627
  * Step label.
@@ -3820,49 +3670,41 @@ type Props = {
3820
3670
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
3821
3671
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
3822
3672
  */
3823
- margin?: Space | Margin;
3673
+ margin?: Space$1 | Margin;
3824
3674
  /**
3825
3675
  * Value of the tabindex attribute that is given to all the steps.
3826
3676
  */
3827
3677
  tabIndex?: number;
3828
3678
  };
3829
3679
 
3830
- declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
3831
-
3832
- declare const useToast: () => {
3833
- default: (toast: DefaultToast) => () => void;
3834
- success: (toast: SemanticToast) => () => void;
3835
- warning: (toast: SemanticToast) => () => void;
3836
- info: (toast: SemanticToast) => () => void;
3837
- loading: (toast: Omit<LoadingToast, "loading">) => () => void;
3838
- };
3680
+ declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react_jsx_runtime.JSX.Element;
3839
3681
 
3840
3682
  declare const componentTokens: {
3841
3683
  accordion: {
3842
3684
  backgroundColor: string;
3843
3685
  hoverBackgroundColor: string;
3686
+ focusBackgroundColor: string;
3687
+ activeBackgroundColor: string;
3844
3688
  arrowColor: string;
3845
3689
  disabledArrowColor: string;
3690
+ subLabelFontFamily: string;
3691
+ subLabelFontSize: string;
3692
+ subLabelFontWeight: string;
3693
+ subLabelFontStyle: string;
3694
+ subLabelFontColor: string;
3695
+ disabledSubLabelFontColor: string;
3846
3696
  assistiveTextFontFamily: string;
3847
3697
  assistiveTextFontSize: string;
3848
3698
  assistiveTextFontWeight: string;
3849
3699
  assistiveTextFontStyle: string;
3850
- assistiveTextLetterSpacing: string;
3851
3700
  assistiveTextFontColor: string;
3852
3701
  disabledAssistiveTextFontColor: string;
3853
- assistiveTextMinWidth: string;
3854
- assistiveTextPaddingRight: string;
3855
- assistiveTextPaddingLeft: string;
3856
3702
  titleLabelFontFamily: string;
3857
3703
  titleLabelFontSize: string;
3858
3704
  titleLabelFontWeight: string;
3859
3705
  titleLabelFontStyle: string;
3860
3706
  titleLabelFontColor: string;
3861
3707
  disabledTitleLabelFontColor: string;
3862
- titleLabelPaddingTop: string;
3863
- titleLabelPaddingBottom: string;
3864
- titleLabelPaddingLeft: string;
3865
- titleLabelPaddingRight: string;
3866
3708
  focusBorderColor: string;
3867
3709
  focusBorderStyle: string;
3868
3710
  focusBorderThickness: string;
@@ -3870,59 +3712,34 @@ declare const componentTokens: {
3870
3712
  boxShadowOffsetX: string;
3871
3713
  boxShadowOffsetY: string;
3872
3714
  boxShadowBlur: string;
3715
+ boxShadowSpread: string;
3873
3716
  boxShadowColor: string;
3874
3717
  iconColor: string;
3875
3718
  disabledIconColor: string;
3876
3719
  iconSize: string;
3877
- iconMarginLeft: string;
3878
- iconMarginRight: string;
3879
- accordionGroupSeparatorBorderColor: string;
3880
- accordionGroupSeparatorBorderThickness: string;
3881
- accordionGroupSeparatorBorderRadius: string;
3882
- accordionGroupSeparatorBorderStyle: string;
3720
+ accordionSeparatorBorderColor: string;
3721
+ accordionSeparatorBorderThickness: string;
3722
+ accordionSeparatorBorderStyle: string;
3883
3723
  };
3884
3724
  alert: {
3885
- titleFontFamily: string;
3886
- titleFontColor: string;
3887
- titleFontSize: string;
3888
- titleFontStyle: string;
3889
- titleFontWeight: string;
3890
- titleTextTransform: string;
3891
- titlePaddingRight: string;
3892
- titlePaddingLeft: string;
3893
- inlineTextFontFamily: string;
3894
- inlineTextFontColor: string;
3895
- inlineTextFontSize: string;
3896
- inlineTextFontStyle: string;
3897
- inlineTextFontWeight: string;
3898
- inlineTextPaddingLeft: string;
3899
- inlineTextPaddingRight: string;
3900
- contentPaddingLeft: string;
3901
- contentPaddingRight: string;
3902
- contentPaddingTop: string;
3903
- contentPaddingBottom: string;
3904
- borderRadius: string;
3905
- borderStyle: string;
3906
- borderThickness: string;
3907
- infoBorderColor: string;
3908
- successBorderColor: string;
3909
- warningBorderColor: string;
3910
- errorBorderColor: string;
3911
- iconSize: string;
3912
- iconPaddingLeft: string;
3913
- iconPaddingRight: string;
3914
- infoIconColor: string;
3915
- successIconColor: string;
3916
- warningIconColor: string;
3725
+ errorBackgroundColor: string;
3917
3726
  errorIconColor: string;
3727
+ fontColor: string;
3728
+ fontFamily: string;
3729
+ fontSize: string;
3730
+ fontStyle: string;
3731
+ fontWeight: string;
3732
+ iconSize: string;
3918
3733
  infoBackgroundColor: string;
3734
+ infoIconColor: string;
3735
+ modalBackgroundColor: string;
3736
+ modalTitleFontSize: string;
3737
+ modalTitleFontWeight: string;
3738
+ overlayColor: string;
3919
3739
  successBackgroundColor: string;
3740
+ successIconColor: string;
3920
3741
  warningBackgroundColor: string;
3921
- errorBackgroundColor: string;
3922
- hoverActionBackgroundColor: string;
3923
- activeActionBackgroundColor: string;
3924
- focusActionBorderColor: string;
3925
- overlayColor: string;
3742
+ warningIconColor: string;
3926
3743
  };
3927
3744
  bulletedList: {
3928
3745
  fontColor: string;
@@ -4248,15 +4065,8 @@ declare const componentTokens: {
4248
4065
  dialog: {
4249
4066
  overlayColor: string;
4250
4067
  backgroundColor: string;
4251
- closeIconSize: string;
4252
- closeIconTopPosition: string;
4253
- closeIconRightPosition: string;
4254
4068
  closeIconBackgroundColor: string;
4255
- closeIconBorderColor: string;
4256
4069
  closeIconColor: string;
4257
- closeIconBorderThickness: string;
4258
- closeIconBorderStyle: string;
4259
- closeIconBorderRadius: string;
4260
4070
  boxShadowOffsetX: string;
4261
4071
  boxShadowOffsetY: string;
4262
4072
  boxShadowBlur: string;
@@ -4391,15 +4201,15 @@ declare const componentTokens: {
4391
4201
  };
4392
4202
  header: {
4393
4203
  backgroundColor: string;
4394
- hamburguerFocusColor: string;
4395
- hamburguerFontFamily: string;
4396
- hamburguerFontStyle: string;
4397
- hamburguerFontColor: string;
4398
- hamburguerFontSize: string;
4399
- hamburguerFontWeight: string;
4400
- hamburguerTextTransform: string;
4401
- hamburguerIconColor: string;
4402
- hamburguerHoverColor: string;
4204
+ hamburgerFocusColor: string;
4205
+ hamburgerFontFamily: string;
4206
+ hamburgerFontStyle: string;
4207
+ hamburgerFontColor: string;
4208
+ hamburgerFontSize: string;
4209
+ hamburgerFontWeight: string;
4210
+ hamburgerTextTransform: string;
4211
+ hamburgerIconColor: string;
4212
+ hamburgerHoverColor: string;
4403
4213
  logo: string;
4404
4214
  logoResponsive: string;
4405
4215
  logoHeight: string;
@@ -5150,6 +4960,7 @@ type OpinionatedTheme = {
5150
4960
  accordion: {
5151
4961
  accentColor: string;
5152
4962
  titleFontColor: string;
4963
+ subLabelFontColor: string;
5153
4964
  assistiveTextFontColor: string;
5154
4965
  };
5155
4966
  alert: {
@@ -5211,7 +5022,7 @@ type OpinionatedTheme = {
5211
5022
  accentColor: string;
5212
5023
  fontColor: string;
5213
5024
  menuBaseColor: string;
5214
- hamburguerColor: string;
5025
+ hamburgerColor: string;
5215
5026
  logo: string;
5216
5027
  logoResponsive: string;
5217
5028
  contentColor: string;
@@ -5305,10 +5116,10 @@ declare const defaultTranslatedComponentLabels: {
5305
5116
  visibilityToggleTitle: string;
5306
5117
  };
5307
5118
  alert: {
5308
- infoTitleText: string;
5309
- successTitleText: string;
5310
- warningTitleText: string;
5311
- errorTitleText: string;
5119
+ previousMessageActionTitle: string;
5120
+ nextMessageActionTitle: string;
5121
+ closeAlertActionTitle: string;
5122
+ closeMessageActionTitle: string;
5312
5123
  };
5313
5124
  calendar: {
5314
5125
  daysShort: string[];
@@ -5345,7 +5156,7 @@ declare const defaultTranslatedComponentLabels: {
5345
5156
  };
5346
5157
  header: {
5347
5158
  closeIcon: string;
5348
- hamburguerTitle: string;
5159
+ hamburgerTitle: string;
5349
5160
  };
5350
5161
  numberInput: {
5351
5162
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5389,32 +5200,39 @@ declare const defaultTranslatedComponentLabels: {
5389
5200
  };
5390
5201
  type TranslatedLabels = typeof defaultTranslatedComponentLabels;
5391
5202
 
5392
- declare const HalstackContext: react.Context<DeepPartial<{
5203
+ /**
5204
+ * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
5205
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
5206
+ */
5207
+ type DeepPartial<T> = {
5208
+ [P in keyof T]?: Partial<T[P]>;
5209
+ };
5210
+ declare const HalstackContext: react.Context<{
5393
5211
  accordion: {
5394
5212
  backgroundColor: string;
5395
5213
  hoverBackgroundColor: string;
5214
+ focusBackgroundColor: string;
5215
+ activeBackgroundColor: string;
5396
5216
  arrowColor: string;
5397
5217
  disabledArrowColor: string;
5218
+ subLabelFontFamily: string;
5219
+ subLabelFontSize: string;
5220
+ subLabelFontWeight: string;
5221
+ subLabelFontStyle: string;
5222
+ subLabelFontColor: string;
5223
+ disabledSubLabelFontColor: string;
5398
5224
  assistiveTextFontFamily: string;
5399
5225
  assistiveTextFontSize: string;
5400
5226
  assistiveTextFontWeight: string;
5401
5227
  assistiveTextFontStyle: string;
5402
- assistiveTextLetterSpacing: string;
5403
5228
  assistiveTextFontColor: string;
5404
5229
  disabledAssistiveTextFontColor: string;
5405
- assistiveTextMinWidth: string;
5406
- assistiveTextPaddingRight: string;
5407
- assistiveTextPaddingLeft: string;
5408
5230
  titleLabelFontFamily: string;
5409
5231
  titleLabelFontSize: string;
5410
5232
  titleLabelFontWeight: string;
5411
5233
  titleLabelFontStyle: string;
5412
5234
  titleLabelFontColor: string;
5413
5235
  disabledTitleLabelFontColor: string;
5414
- titleLabelPaddingTop: string;
5415
- titleLabelPaddingBottom: string;
5416
- titleLabelPaddingLeft: string;
5417
- titleLabelPaddingRight: string;
5418
5236
  focusBorderColor: string;
5419
5237
  focusBorderStyle: string;
5420
5238
  focusBorderThickness: string;
@@ -5422,59 +5240,34 @@ declare const HalstackContext: react.Context<DeepPartial<{
5422
5240
  boxShadowOffsetX: string;
5423
5241
  boxShadowOffsetY: string;
5424
5242
  boxShadowBlur: string;
5243
+ boxShadowSpread: string;
5425
5244
  boxShadowColor: string;
5426
5245
  iconColor: string;
5427
5246
  disabledIconColor: string;
5428
5247
  iconSize: string;
5429
- iconMarginLeft: string;
5430
- iconMarginRight: string;
5431
- accordionGroupSeparatorBorderColor: string;
5432
- accordionGroupSeparatorBorderThickness: string;
5433
- accordionGroupSeparatorBorderRadius: string;
5434
- accordionGroupSeparatorBorderStyle: string;
5248
+ accordionSeparatorBorderColor: string;
5249
+ accordionSeparatorBorderThickness: string;
5250
+ accordionSeparatorBorderStyle: string;
5435
5251
  };
5436
5252
  alert: {
5437
- titleFontFamily: string;
5438
- titleFontColor: string;
5439
- titleFontSize: string;
5440
- titleFontStyle: string;
5441
- titleFontWeight: string;
5442
- titleTextTransform: string;
5443
- titlePaddingRight: string;
5444
- titlePaddingLeft: string;
5445
- inlineTextFontFamily: string;
5446
- inlineTextFontColor: string;
5447
- inlineTextFontSize: string;
5448
- inlineTextFontStyle: string;
5449
- inlineTextFontWeight: string;
5450
- inlineTextPaddingLeft: string;
5451
- inlineTextPaddingRight: string;
5452
- contentPaddingLeft: string;
5453
- contentPaddingRight: string;
5454
- contentPaddingTop: string;
5455
- contentPaddingBottom: string;
5456
- borderRadius: string;
5457
- borderStyle: string;
5458
- borderThickness: string;
5459
- infoBorderColor: string;
5460
- successBorderColor: string;
5461
- warningBorderColor: string;
5462
- errorBorderColor: string;
5463
- iconSize: string;
5464
- iconPaddingLeft: string;
5465
- iconPaddingRight: string;
5466
- infoIconColor: string;
5467
- successIconColor: string;
5468
- warningIconColor: string;
5253
+ errorBackgroundColor: string;
5469
5254
  errorIconColor: string;
5255
+ fontColor: string;
5256
+ fontFamily: string;
5257
+ fontSize: string;
5258
+ fontStyle: string;
5259
+ fontWeight: string;
5260
+ iconSize: string;
5470
5261
  infoBackgroundColor: string;
5262
+ infoIconColor: string;
5263
+ modalBackgroundColor: string;
5264
+ modalTitleFontSize: string;
5265
+ modalTitleFontWeight: string;
5266
+ overlayColor: string;
5471
5267
  successBackgroundColor: string;
5268
+ successIconColor: string;
5472
5269
  warningBackgroundColor: string;
5473
- errorBackgroundColor: string;
5474
- hoverActionBackgroundColor: string;
5475
- activeActionBackgroundColor: string;
5476
- focusActionBorderColor: string;
5477
- overlayColor: string;
5270
+ warningIconColor: string;
5478
5271
  };
5479
5272
  bulletedList: {
5480
5273
  fontColor: string;
@@ -5800,15 +5593,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
5800
5593
  dialog: {
5801
5594
  overlayColor: string;
5802
5595
  backgroundColor: string;
5803
- closeIconSize: string;
5804
- closeIconTopPosition: string;
5805
- closeIconRightPosition: string;
5806
5596
  closeIconBackgroundColor: string;
5807
- closeIconBorderColor: string;
5808
5597
  closeIconColor: string;
5809
- closeIconBorderThickness: string;
5810
- closeIconBorderStyle: string;
5811
- closeIconBorderRadius: string;
5812
5598
  boxShadowOffsetX: string;
5813
5599
  boxShadowOffsetY: string;
5814
5600
  boxShadowBlur: string;
@@ -5943,15 +5729,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
5943
5729
  };
5944
5730
  header: {
5945
5731
  backgroundColor: string;
5946
- hamburguerFocusColor: string;
5947
- hamburguerFontFamily: string;
5948
- hamburguerFontStyle: string;
5949
- hamburguerFontColor: string;
5950
- hamburguerFontSize: string;
5951
- hamburguerFontWeight: string;
5952
- hamburguerTextTransform: string;
5953
- hamburguerIconColor: string;
5954
- hamburguerHoverColor: string;
5732
+ hamburgerFocusColor: string;
5733
+ hamburgerFontFamily: string;
5734
+ hamburgerFontStyle: string;
5735
+ hamburgerFontColor: string;
5736
+ hamburgerFontSize: string;
5737
+ hamburgerFontWeight: string;
5738
+ hamburgerTextTransform: string;
5739
+ hamburgerIconColor: string;
5740
+ hamburgerHoverColor: string;
5955
5741
  logo: string;
5956
5742
  logoResponsive: string;
5957
5743
  logoHeight: string;
@@ -6696,16 +6482,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
6696
6482
  separatorColor: string;
6697
6483
  focusColor: string;
6698
6484
  };
6699
- }>>;
6700
- declare const HalstackLanguageContext: react.Context<DeepPartial<{
6485
+ }>;
6486
+ declare const HalstackLanguageContext: react.Context<{
6701
6487
  applicationLayout: {
6702
6488
  visibilityToggleTitle: string;
6703
6489
  };
6704
6490
  alert: {
6705
- infoTitleText: string;
6706
- successTitleText: string;
6707
- warningTitleText: string;
6708
- errorTitleText: string;
6491
+ previousMessageActionTitle: string;
6492
+ nextMessageActionTitle: string;
6493
+ closeAlertActionTitle: string;
6494
+ closeMessageActionTitle: string;
6709
6495
  };
6710
6496
  calendar: {
6711
6497
  daysShort: string[];
@@ -6742,7 +6528,7 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6742
6528
  };
6743
6529
  header: {
6744
6530
  closeIcon: string;
6745
- hamburguerTitle: string;
6531
+ hamburgerTitle: string;
6746
6532
  };
6747
6533
  numberInput: {
6748
6534
  valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -6783,20 +6569,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
6783
6569
  toast: {
6784
6570
  clearToastActionTitle: string;
6785
6571
  };
6786
- }>>;
6787
- /**
6788
- * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
6789
- * This is an extension of the already existing Partial type, which only allows one level of partiality.
6790
- */
6791
- type DeepPartial<T> = {
6792
- [P in keyof T]?: Partial<T[P]>;
6793
- };
6572
+ }>;
6794
6573
  type HalstackProviderPropsType = {
6795
6574
  theme?: DeepPartial<OpinionatedTheme>;
6796
6575
  advancedTheme?: DeepPartial<AdvancedTheme>;
6797
6576
  labels?: DeepPartial<TranslatedLabels>;
6798
- children: React.ReactNode;
6577
+ children: ReactNode;
6799
6578
  };
6800
6579
  declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
6801
6580
 
6802
- export { DxcAccordion, DxcAccordionGroup, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, Inset as DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };
6581
+ declare function useToast(): {
6582
+ default: (toast: DefaultToast) => (() => void) | undefined;
6583
+ success: (toast: SemanticToast) => (() => void) | undefined;
6584
+ warning: (toast: SemanticToast) => (() => void) | undefined;
6585
+ info: (toast: SemanticToast) => (() => void) | undefined;
6586
+ loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
6587
+ };
6588
+
6589
+ export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };