@dxc-technology/halstack-react 0.0.0-75a707a → 0.0.0-75a7c98

package/dist/index.d.mts

@@ -13,23 +13,31 @@ type Margin = {
 };
 type SVG = ReactNode & SVGProps<SVGSVGElement>;
 
-type Props$K = {
+type AccordionItemProps = {
     /**
      * The panel label.
      */
     label: string;
     /**
-     * Initial state of the panel, only when it is uncontrolled.
+     * Additional info label positioned under the label.
      */
-    defaultIsExpanded?: boolean;
+    subLabel?: string;
     /**
-     * Represents the state of the panel. When true, the component will be
-     * expanded. If undefined, the component will be uncontrolled and its
-     * value will be managed internally by the component.
+     * Badge component to add extra value to the accordion.
      */
-    isExpanded?: boolean;
+    badge?: {
+        position: "before" | "after";
+        element: ReactNode;
+    };
+    /**
+     * Status light component to add extra value to the accordion.
+     */
+    statusLight?: ReactNode;
     /**
-     * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
+     * Material Symbol name or SVG element used as the icon that will be
+     * placed next to panel label. When using Material Symbols, replace spaces with underscores.
+     * By default they are outlined if you want it to be filled
+     * prefix the symbol name with "filled_".
      */
     icon?: string | SVG;
     /**
@@ -40,84 +48,74 @@ type Props$K = {
      * If true, the component will be disabled.
      */
     disabled?: boolean;
-    /**
-     * This function will be called when the user clicks the accordion to expand or collapse
-     * the panel. The new state of the panel will be passed as a parameter.
-     */
-    onChange?: (isExpanded: boolean) => void;
     /**
      * The expanded panel of the accordion. This area can be used to render
      * custom content.
      */
     children: ReactNode;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+type CommonProps$9 = {
     /**
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
     margin?: Space$1 | Margin;
     /**
-     * Value of the tabindex attribute.
+     * Contains one or more accordion items.
      */
-    tabIndex?: number;
+    children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
 };
-
-declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
-
-type AccordionPropsType = {
+type IndependentProps = CommonProps$9 & {
     /**
-     * The panel label.
+     * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
-    label: string;
+    independent: true;
     /**
-     * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
+     * Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
+     * several accordions can be activated by default.
      */
-    icon?: string | SVG;
-    /**
-     * Assistive text to be placed on the right side of the panel.
-     */
-    assistiveText?: string;
+    defaultIndexActive?: number;
     /**
-     * If true, the component will be disabled.
+     * The index of the active accordion. If undefined, the component will be uncontrolled and the active
+     * accordion will be managed internally by the component. If null, the component will be controlled and all
+     * accordions will be closed. If the accordion is not independent, several accordions can be activated.
      */
-    disabled?: boolean;
+    indexActive?: number;
     /**
-     * The expanded panel of the accordion. This area can be used to render
-     * custom content.
+     * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
      */
-    children: ReactNode;
+    onActiveChange?: (index: number) => void;
 };
-type Props$J = {
+type NonIndependentProps = CommonProps$9 & {
     /**
-     * Initially active accordion, only when it is uncontrolled.
+     * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
-    defaultIndexActive?: number;
+    independent?: false;
     /**
-     * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
-     * If null, the component will be controlled and all accordions will be closed.
+     * Initially active accordion, only when it is uncontrolled. If the accordion is not independent,
+     * several accordions can be activated by default.
      */
-    indexActive?: number;
+    defaultIndexActive?: number[];
     /**
-     * If true, the component will be disabled.
+     * The index of the active accordion. If undefined, the component will be uncontrolled and the active
+     * accordion will be managed internally by the component. If null, the component will be controlled and all
+     * accordions will be closed. If the accordion is not independent, several accordions can be activated.
      */
-    disabled?: boolean;
+    indexActive?: number[];
     /**
      * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
      */
-    onActiveChange?: (indexActive: number) => void;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space$1 | Margin;
-    /**
-     * Customized accordion(s) that are allowed inside an Accordion Group.
-     */
-    children: ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType>;
+    onActiveChange?: (index: number[]) => void;
 };
+type Props$J = IndependentProps | NonIndependentProps;
 
-declare const DxcAccordionGroup: {
-    ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
-    Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
+declare const DxcAccordion: {
+    (props: Props$J): JSX.Element;
+    AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
 };
 
 type Action$2 = {
@@ -278,7 +276,7 @@ type Props$H = {
 };
 
 type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type Option$1 = {
+type Option$2 = {
     /**
      * Option display value.
      */
@@ -296,7 +294,7 @@ type Props$G = {
     /**
      * An array of objects representing the options.
      */
-    options: Option$1[];
+    options: Option$2[];
     /**
      * In case options include icons, whether the icon should appear
      * after or before the label.
@@ -479,7 +477,7 @@ declare const DxcApplicationLayout: {
     Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
     Header: {
         ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
-        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;
+        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;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
     SideNav: {
@@ -546,134 +544,42 @@ type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
 
 declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
 
-/**
- * Halstack Color Palette
- * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
- */
-declare const CoreColorTokens: {
-    color_black: string;
-    color_white: string;
-    color_transparent: string;
-    color_grey_50: string;
-    color_grey_100: string;
-    color_grey_200: string;
-    color_grey_300: string;
-    color_grey_400: string;
-    color_grey_500: string;
-    color_grey_600: string;
-    color_grey_700: string;
-    color_grey_800: string;
-    color_grey_900: string;
-    color_grey_50_a: string;
-    color_grey_100_a: string;
-    color_grey_200_a: string;
-    color_grey_300_a: string;
-    color_grey_400_a: string;
-    color_grey_500_a: string;
-    color_grey_600_a: string;
-    color_grey_700_a: string;
-    color_grey_800_a: string;
-    color_grey_900_a: string;
-    color_purple_50: string;
-    color_purple_100: string;
-    color_purple_200: string;
-    color_purple_300: string;
-    color_purple_400: string;
-    color_purple_500: string;
-    color_purple_600: string;
-    color_purple_700: string;
-    color_purple_800: string;
-    color_purple_900: string;
-    color_blue_50: string;
-    color_blue_100: string;
-    color_blue_200: string;
-    color_blue_300: string;
-    color_blue_400: string;
-    color_blue_500: string;
-    color_blue_600: string;
-    color_blue_700: string;
-    color_blue_800: string;
-    color_blue_900: string;
-    color_red_50: string;
-    color_red_100: string;
-    color_red_200: string;
-    color_red_300: string;
-    color_red_400: string;
-    color_red_500: string;
-    color_red_600: string;
-    color_red_700: string;
-    color_red_800: string;
-    color_red_900: string;
-    color_green_50: string;
-    color_green_100: string;
-    color_green_200: string;
-    color_green_300: string;
-    color_green_400: string;
-    color_green_500: string;
-    color_green_600: string;
-    color_green_700: string;
-    color_green_800: string;
-    color_green_900: string;
-    color_yellow_50: string;
-    color_yellow_100: string;
-    color_yellow_200: string;
-    color_yellow_300: string;
-    color_yellow_400: string;
-    color_yellow_500: string;
-    color_yellow_600: string;
-    color_yellow_700: string;
-    color_yellow_800: string;
-    color_yellow_900: string;
-    color_orange_50: string;
-    color_orange_100: string;
-    color_orange_200: string;
-    color_orange_300: string;
-    color_orange_400: string;
-    color_orange_500: string;
-    color_orange_600: string;
-    color_orange_700: string;
-    color_orange_800: string;
-    color_orange_900: string;
-};
-type CoreColorTokensType = keyof typeof CoreColorTokens;
-type CoreSpacingTokensType = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "2.5rem" | "3rem" | "3.5rem" | "4rem" | "5rem" | "6rem" | "7rem";
-
 type Props$D = {
     /**
      * Applies the spacing scale to all sides.
      */
-    space?: CoreSpacingTokensType;
+    space?: string;
     /**
      * Applies the spacing scale to the left and right sides.
      */
-    horizontal?: CoreSpacingTokensType;
+    horizontal?: string;
     /**
      * Applies the spacing scale to the top and bottom sides.
      */
-    vertical?: CoreSpacingTokensType;
+    vertical?: string;
     /**
      * Applies the spacing scale to the top side.
      */
-    top?: CoreSpacingTokensType;
+    top?: string;
     /**
      * Applies the spacing scale to the right side.
      */
-    right?: CoreSpacingTokensType;
+    right?: string;
     /**
      * Applies the spacing scale to the bottom side.
      */
-    bottom?: CoreSpacingTokensType;
+    bottom?: string;
     /**
      * Applies the spacing scale to the left side.
      */
-    left?: CoreSpacingTokensType;
+    left?: string;
     /**
      * Custom content inside the bleed.
      */
     children: ReactNode;
 };
 
-declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
+declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D): react_jsx_runtime.JSX.Element;
 
 type Item$1 = {
     href?: string;
@@ -755,9 +661,11 @@ declare const DxcBulletedList: {
     Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
 };
 
+type Semantic = "default" | "error" | "warning" | "success" | "info";
+type Mode$1 = "primary" | "secondary" | "tertiary";
 type Size$3 = {
     /**
-     * Height of the component.
+     * Height of the button.
      */
     height?: "small" | "medium" | "large";
     width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
@@ -770,11 +678,11 @@ type Props$A = {
     /**
      * The available button modes.
      */
-    mode?: "primary" | "secondary" | "tertiary";
+    mode?: Mode$1;
     /**
      * Specifies the semantic meaning of the buttons, which determines its color.
      */
-    semantic?: "default" | "error" | "warning" | "success" | "info";
+    semantic?: Semantic;
     /**
      * If true, the component will be disabled.
      */
@@ -814,7 +722,7 @@ type Props$A = {
     tabIndex?: number;
 };
 
-declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => JSX.Element;
+declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$A) => JSX.Element;
 
 type Size$2 = {
     top?: Space$1;
@@ -880,19 +788,22 @@ declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, l
 
 type Props$y = {
     /**
-     * Initial state of the checkbox, only when it is uncontrolled.
+     * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
      */
-    defaultChecked?: boolean;
+    ariaLabel?: string;
     /**
      * If true, the component is checked. If undefined the component will be
      * uncontrolled and the value will be managed internally by the component.
      */
     checked?: boolean;
     /**
-     * Will be passed to the value attribute of the html input element.
-     * When inside a form, this value will be only submitted if the checkbox is checked.
+     * Initial state of the checkbox, only when it is uncontrolled.
      */
-    value?: string;
+    defaultChecked?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
     /**
      * Text to be placed next to the checkbox.
      */
@@ -901,14 +812,22 @@ type Props$y = {
      * Whether the label should appear after or before the checkbox.
      */
     labelPosition?: "before" | "after";
+    /**
+     * Size of the margin to be applied to the component
+     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
+     * in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
     /**
      * Name attribute of the input element.
      */
     name?: string;
     /**
-     * If true, the component will be disabled.
+     * This function will be called when the user clicks the checkbox.
+     * The new value will be passed as a parameter.
      */
-    disabled?: boolean;
+    onChange?: (value: boolean) => void;
     /**
      * If true, the component will display '(Optional)' next to the label.
      */
@@ -917,18 +836,6 @@ type Props$y = {
      * If true, the component will not be mutable, meaning the user can not edit the control.
      */
     readOnly?: boolean;
-    /**
-     * This function will be called when the user clicks the checkbox.
-     * The new value will be passed as a parameter.
-     */
-    onChange?: (value: boolean) => void;
-    /**
-     * Size of the margin to be applied to the component
-     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
-     * in order to specify different margin sizes.
-     */
-    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -938,9 +845,10 @@ type Props$y = {
      */
     tabIndex?: number;
     /**
-     * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
+     * Will be passed to the value attribute of the html input element.
+     * When inside a form, this value will be only submitted if the checkbox is checked.
      */
-    ariaLabel?: string;
+    value?: string;
 };
 
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
@@ -981,15 +889,15 @@ type Props$x = {
     tabIndex?: number;
 };
 
-declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
+declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element;
 
-type Space = Space$1 | {
-    top?: Space$1;
-    right?: Space$1;
-    bottom?: Space$1;
-    left?: Space$1;
+type Space = {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
 };
-type Inset$1 = {
+type Inset = {
     top?: string;
     right?: string;
     bottom?: string;
@@ -998,7 +906,7 @@ type Inset$1 = {
 type Background = {
     attachment?: string;
     clip?: string;
-    color?: CoreColorTokensType;
+    color?: string;
     image?: string;
     origin?: string;
     position?: string;
@@ -1007,8 +915,8 @@ type Background = {
 };
 type BorderProperties = {
     width?: string;
-    style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset";
-    color?: CoreColorTokensType;
+    style?: string;
+    color?: string;
 };
 type Border = BorderProperties | {
     top?: BorderProperties;
@@ -1056,7 +964,7 @@ type Props$w = {
     /**
      * Custom content inside the container.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Sets the display CSS property.
      * The set of values is limited to the ones related to the outer display type.
@@ -1082,19 +990,11 @@ type Props$w = {
      * Based on the CSS property inset this prop is a shorthand that corresponds
      * to the top, right, bottom, and/or left properties.
      */
-    inset?: Inset$1;
+    inset?: Inset;
     /**
-     * Size of the margin to be applied to the component.
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
-     * in order to specify different margin sizes.
+     * Size of the margin to be applied to the container.
      */
-    margin?: Space;
-    /**
-     * Sets the max-height CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
-     */
-    maxWidth?: string;
+    margin?: string | Space;
     /**
      * Sets the max-width CSS property.
      *
@@ -1102,17 +1002,23 @@ type Props$w = {
      */
     maxHeight?: string;
     /**
-     * Sets the min-height CSS property.
+     * Sets the max-height CSS property.
      *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
      */
-    minWidth?: string;
+    maxWidth?: string;
     /**
      * Sets the min-width CSS property.
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
      */
     minHeight?: string;
+    /**
+     * Sets the min-height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+     */
+    minWidth?: string;
     /**
      * Based on the CSS property outline allows configuring all properties related
      * to the outline of a container.
@@ -1125,11 +1031,9 @@ type Props$w = {
      */
     overflow?: Overflow;
     /**
-     * Size of the margin to be applied to the component.
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
-     * in order to specify different margin sizes.
+     * Size of the padding to be applied to the container.
      */
-    padding?: Space;
+    padding?: string | Space;
     /**
      * Sets the position CSS property.
      *
@@ -1194,7 +1098,7 @@ type ActionsPropsType = Array<{
     onClick: (value?: string) => void;
     disabled?: boolean;
     tabIndex?: number;
-    options: Option$1[];
+    options: Option$2[];
 }>;
 type Props$u = {
     /**
@@ -1265,6 +1169,7 @@ type HierarchyGridRow = GridRow & {
 type ExpandableGridRow = GridRow & {
     expandedContent?: ReactNode;
     expandedContentHeight?: number;
+    contentIsExpanded?: boolean;
 };
 type ExpandableRows = {
     rows: ExpandableGridRow[];
@@ -1341,6 +1246,10 @@ type PaginatedProps$1 = {
      * Function called whenever the current page is changed.
      */
     onPageChange?: (_page: number) => void;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: number;
 };
 type NonPaginatedProps$1 = {
     /**
@@ -1372,6 +1281,10 @@ type NonPaginatedProps$1 = {
      * Function called whenever the current page is changed.
      */
     onPageChange?: never;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: never;
 };
 type CommonProps$6 = {
     columns: GridColumn[];
@@ -1399,7 +1312,7 @@ type BasicGridProps = {
 type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
 
 declare const DxcDataGrid: {
-    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
+    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
     ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
 };
 
@@ -1569,9 +1482,9 @@ type Props$q = {
     decorative?: boolean;
 };
 
-declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => JSX.Element;
+declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q) => react_jsx_runtime.JSX.Element;
 
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element;
 
 type FileData = {
     /**
@@ -1677,12 +1590,12 @@ type Props$p = DropModeProps | FileModeProps;
 declare const DxcFileInput: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
 
 type Gap$1 = {
-    rowGap: CoreSpacingTokensType;
-    columnGap?: CoreSpacingTokensType;
+    rowGap: string;
+    columnGap?: string;
 } | {
-    rowGap?: CoreSpacingTokensType;
-    columnGap: CoreSpacingTokensType;
-} | CoreSpacingTokensType;
+    rowGap?: string;
+    columnGap: string;
+} | string;
 type CommonProps$4 = {
     /**
      * Sets the justify-content CSS property.
@@ -1764,47 +1677,49 @@ type Props$o = CommonProps$4 & {
 
 declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
 
-type Gap = {
-    rowGap: CoreSpacingTokensType;
-    columnGap?: CoreSpacingTokensType;
+type Gap = string | {
+    columnGap?: string;
+    rowGap: string;
 } | {
-    rowGap?: CoreSpacingTokensType;
-    columnGap: CoreSpacingTokensType;
-} | CoreSpacingTokensType;
+    columnGap: string;
+    rowGap?: string;
+};
 type GridCell = {
-    start: number | string;
     end: number | string;
+    start: number | string;
 };
-type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
-type PlaceContentValues = "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline";
-type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
+type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stretch";
+type PlaceContentValues = "baseline" | "center" | "end" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch";
+type PlaceItemsValues = "baseline" | "center" | "end" | "normal" | "start" | "stretch";
 type PlaceObject<Type, Suffix extends string> = {
     [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
 };
 type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
-    justify?: PlaceValues;
     align: PlaceValues;
+    justify?: PlaceValues;
 }, Element> | PlaceObject<{
-    justify: PlaceValues;
     align?: PlaceValues;
+    justify: PlaceValues;
 }, Element> | PlaceValues;
 type GridItemProps = {
     /**
      * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
      */
     areaName?: string;
+    /**
+     * Sets a custom HTML tag.
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Custom content inside the grid container.
+     */
+    children: ReactNode;
     /**
      * Sets the grid-column CSS property.
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
      */
     column?: number | string | GridCell;
-    /**
-     * Sets the grid-row CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
-     */
-    row?: number | string | GridCell;
     /**
      * Sets the place-self CSS property.
      *
@@ -1812,13 +1727,11 @@ type GridItemProps = {
      */
     placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
     /**
-     * Sets a custom HTML tag.
-     */
-    as?: keyof HTMLElementTagNameMap;
-    /**
-     * Custom content inside the grid container.
+     * Sets the grid-row CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
      */
-    children: ReactNode;
+    row?: number | string | GridCell;
 };
 type Props$n = GridItemProps & {
     /**
@@ -1844,7 +1757,7 @@ type Props$n = GridItemProps & {
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
      */
-    gap?: CoreSpacingTokensType | Gap;
+    gap?: Gap;
     /**
      * Sets the place-content CSS property.
      *
@@ -1980,40 +1893,40 @@ declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width
 
 type Props$k = {
     /**
-     * Applies the spacing scale to all sides.
+     * Applies the spacing scale to the bottom side.
      */
-    space?: CoreSpacingTokensType;
+    bottom?: string;
     /**
-     * Applies the spacing scale to the left and right sides.
+     * Custom content inside the inset.
      */
-    horizontal?: CoreSpacingTokensType;
+    children: ReactNode;
     /**
-     * Applies the spacing scale to the top and bottom sides.
+     * Applies the spacing scale to the left and right sides.
      */
-    vertical?: CoreSpacingTokensType;
+    horizontal?: string;
     /**
-     * Applies the spacing scale to the top side.
+     * Applies the spacing scale to the left side.
      */
-    top?: CoreSpacingTokensType;
+    left?: string;
     /**
      * Applies the spacing scale to the right side.
      */
-    right?: CoreSpacingTokensType;
+    right?: string;
     /**
-     * Applies the spacing scale to the bottom side.
+     * Applies the spacing scale to all sides.
      */
-    bottom?: CoreSpacingTokensType;
+    space?: string;
     /**
-     * Applies the spacing scale to the left side.
+     * Applies the spacing scale to the top side.
      */
-    left?: CoreSpacingTokensType;
+    top?: string;
     /**
-     * Custom content inside the inset.
+     * Applies the spacing scale to the top and bottom sides.
      */
-    children: ReactNode;
+    vertical?: string;
 };
 
-declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
+declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$k): react_jsx_runtime.JSX.Element;
 
 type LinkProps = {
     /**
@@ -2233,6 +2146,10 @@ type Props$i = {
      * Specifies a string to be used as the name for the number input element when no `label` is provided.
      */
     ariaLabel?: string;
+    /**
+     * Decides whether the number input has actions to increase or decrease the value, following the defined step.
+     */
+    showControls?: boolean;
 };
 
 declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
@@ -2452,7 +2369,7 @@ type Props$e = {
 
 declare const DxcQuickNav: ({ title, links }: Props$e) => JSX.Element;
 
-type RadioOption = {
+type Option$1 = {
     /**
      * Label of the option placed next to the radio input.
      */
@@ -2470,26 +2387,39 @@ type RadioOption = {
 };
 type RadioGroupProps = {
     /**
-     * Text to be placed above the radio group.
+     * Specifies a string to be used as the name for the radio group when no `label` is provided.
      */
-    label?: string;
+    ariaLabel?: string;
     /**
-     * Name attribute of the input element. This attribute will allow users
-     * to find the component's value during the submit event.
+     * Initial value of the radio group, only when it is uncontrolled.
      */
-    name?: string;
+    defaultValue?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the radio group. If the
+     * defined value is an empty string, it will reserve a space below the
+     * component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
+     */
+    error?: string;
     /**
      * Helper text to be placed above the radio group.
      */
     helperText?: string;
     /**
-     * An array of objects representing the selectable options.
+     * Text to be placed above the radio group.
      */
-    options: RadioOption[];
+    label?: string;
     /**
-     * If true, the component will be disabled.
+     * Name attribute of the input element. This attribute will allow users
+     * to find the component's value during the submit event.
      */
-    disabled?: boolean;
+    name?: string;
     /**
      * If true, the radio group will be optional, showing
      * (Optional) next to the label and adding a default last
@@ -2503,28 +2433,9 @@ type RadioGroupProps = {
      */
     optionalItemLabel?: string;
     /**
-     * If true, the component will not be mutable, meaning the user can not edit the control.
-     */
-    readOnly?: boolean;
-    /**
-     * Sets the orientation of the options within the radio group.
-     */
-    stacking?: "row" | "column";
-    /**
-     * Initial value of the radio group, only when it is uncontrolled.
-     */
-    defaultValue?: string;
-    /**
-     * Value of the radio group. If undefined, the component will be
-     * uncontrolled and the value will be managed internally by the
-     * component.
-     */
-    value?: string;
-    /**
-     * This function will be called when the user chooses an option. The new
-     * value will be passed to this function.
+     * An array of objects representing the selectable options.
      */
-    onChange?: (value: string) => void;
+    options: Option$1[];
     /**
      * This function will be called when the radio group loses the focus. An
      * object including the value and the error will be passed to this
@@ -2535,18 +2446,28 @@ type RadioGroupProps = {
         error?: string;
     }) => void;
     /**
-     * If it is a defined value and also a truthy string, the component will
-     * change its appearance, showing the error below the radio group. If the
-     * defined value is an empty string, it will reserve a space below the
-     * component for a future error, but it would not change its look. In
-     * case of being undefined or null, both the appearance and the space for
-     * the error message would not be modified.
+     * This function will be called when the user chooses an option. The new
+     * value will be passed to this function.
      */
-    error?: string;
+    onChange?: (value: string) => void;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
+    /**
+     * Sets the orientation of the options within the radio group.
+     */
+    stacking?: "row" | "column";
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Value of the radio group. If undefined, the component will be
+     * uncontrolled and the value will be managed internally by the
+     * component.
+     */
+    value?: string;
 };
 
 declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
@@ -2824,53 +2745,51 @@ declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttr
 
 type Props$b = {
     /**
-     * Text to be placed above the slider.
-     */
-    label?: string;
-    /**
-     * Name attribute of the input element.
+     * Specifies a string to be used as the name for the slider element when no `label` is provided.
      */
-    name?: string;
+    ariaLabel?: string;
     /**
      * Initial value of the slider, only when it is uncontrolled.
      */
     defaultValue?: number;
     /**
-     * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     * If true, the component will be disabled.
      */
-    value?: number;
+    disabled?: boolean;
     /**
      * Helper text to be placed above the slider.
      */
     helperText?: string;
     /**
-     * The minimum value available for selection.
+     * Text to be placed above the slider.
      */
-    minValue?: number;
+    label?: string;
     /**
-     * The maximum value available for selection.
+     * This function will be used to format the labels displayed next to the slider.
+     * The value will be passed as parameter and the function must return the formatted value.
      */
-    maxValue?: number;
+    labelFormatCallback?: (value: number) => string;
     /**
-     * The step interval between values available for selection.
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    step?: number;
+    margin?: Space$1 | Margin;
     /**
-     * Whether the min/max value labels should be displayed next to the slider
+     * Whether the marks between each step should be shown or not.
      */
-    showLimitsValues?: boolean;
+    marks?: boolean;
     /**
-     * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
+     * The maximum value available for selection.
      */
-    showInput?: boolean;
+    maxValue?: number;
     /**
-     * If true, the component will be disabled.
+     * The minimum value available for selection.
      */
-    disabled?: boolean;
+    minValue?: number;
     /**
-     * Whether the marks between each step should be shown or not.
+     * Name attribute of the input element.
      */
-    marks?: boolean;
+    name?: string;
     /**
      * This function will be called when the slider changes its value, as it's being dragged.
      * The new value will be passed as a parameter when this function is executed.
@@ -2882,53 +2801,64 @@ type Props$b = {
      */
     onDragEnd?: (value: number) => void;
     /**
-     * This function will be used to format the labels displayed next to the slider.
-     * The value will be passed as parameter and the function must return the formatted value.
+     * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
      */
-    labelFormatCallback?: (value: number) => string;
+    showInput?: boolean;
     /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * Whether the min/max value labels should be displayed next to the slider
      */
-    margin?: Space$1 | Margin;
+    showLimitsValues?: boolean;
     /**
      * Size of the component.
      */
     size?: "medium" | "large" | "fillParent";
     /**
-     * Specifies a string to be used as the name for the slider element when no `label` is provided.
+     * The step interval between values available for selection.
      */
-    ariaLabel?: string;
+    step?: number;
+    /**
+     * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number;
 };
 
 declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
 
 type Props$a = {
     /**
-     * Text to be placed inside the spinner.
+     * 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.
      */
-    label?: string;
+    ariaLabel?: string;
     /**
-     * The value of the progress indicator. If it's received the
-     * component is determinate, otherwise is indeterminate.
+     * If true, the color is inherited from the closest parent with a defined color. This allows users to adapt the spinner
+     * to the semantic color of the use case in which it is used.
      */
-    value?: number;
+    inheritColor?: boolean;
     /**
-     * If true, the value is displayed inside the spinner..
+     * Text to be placed inside the spinner.
      */
-    showValue?: boolean;
+    label?: string;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
     /**
      * Available modes of the spinner.
      */
     mode?: "large" | "small" | "overlay";
     /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * If true, the value is displayed inside the spinner..
      */
-    margin?: Space$1 | Margin;
+    showValue?: boolean;
+    /**
+     * The value of the progress indicator. If it's received the
+     * component is determinate, otherwise is indeterminate.
+     */
+    value?: number;
 };
 
-declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
+declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$a) => react_jsx_runtime.JSX.Element;
 
 type Mode = "default" | "info" | "success" | "warning" | "error";
 type Size = "small" | "medium" | "large";
@@ -2947,23 +2877,26 @@ type Props$9 = {
     size?: Size;
 };
 
-declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
+declare function DxcStatusLight({ label, mode, size }: Props$9): react_jsx_runtime.JSX.Element;
 
 type Props$8 = {
     /**
-     * Initial state of the switch, only when it is uncontrolled.
+     * Specifies a string to be used as the name for the switch element when no `label` is provided.
      */
-    defaultChecked?: boolean;
+    ariaLabel?: string;
     /**
      * If true, the component is checked. If undefined, the component will be uncontrolled
      * and the checked attribute will be managed internally by the component.
      */
     checked?: boolean;
     /**
-     * Will be passed to the value attribute of the html input element. When inside a form,
-     * this value will be only submitted if the switch is checked.
+     * Initial state of the switch, only when it is uncontrolled.
      */
-    value?: string;
+    defaultChecked?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
     /**
      * Text to be placed next to the switch.
      */
@@ -2973,13 +2906,14 @@ type Props$8 = {
      */
     labelPosition?: "before" | "after";
     /**
-     * Name attribute of the input element.
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    name?: string;
+    margin?: Space$1 | Margin;
     /**
-     * If true, the component will be disabled.
+     * Name attribute of the input element.
      */
-    disabled?: boolean;
+    name?: string;
     /**
      * This function will be called when the user changes the state of the switch.
      * The new value of the checked attribute will be passed as a parameter.
@@ -2989,11 +2923,6 @@ type Props$8 = {
      * If true, the component will display '(Optional)' next to the label.
      */
     optional?: boolean;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -3003,9 +2932,10 @@ type Props$8 = {
      */
     tabIndex?: number;
     /**
-     * Specifies a string to be used as the name for the switch element when no `label` is provided.
+     * Will be passed to the value attribute of the html input element. When inside a form,
+     * this value will be only submitted if the switch is checked.
      */
-    ariaLabel?: string;
+    value?: string;
 };
 
 declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
@@ -3063,41 +2993,46 @@ type TabProps = {
 };
 type LegacyProps = {
     /**
-     * Initially active tab, only when it is uncontrolled.
-     */
-    defaultActiveTabIndex?: number;
-    /**
+     * @deprecated This prop is deprecated and will be removed in future versions. Use the children prop instead.
      * The index of the active tab. If undefined, the component will be
      * uncontrolled and the active tab will be managed internally by the component.
      */
     activeTabIndex?: number;
     /**
-     * An array of objects representing the tabs.
+     * @deprecated This prop is deprecated and will be removed in future versions.
+     * Initially active tab, only when it is uncontrolled.
      */
-    tabs?: (TabLabelProps | TabIconProps)[];
+    defaultActiveTabIndex?: number;
     /**
      * Whether the icon should appear above or to the left of the label.
      */
     iconPosition?: "top" | "left";
     /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * @deprecated This prop is deprecated and will be removed in future versions.
      * This function will be called when the user clicks on a tab. The index of the
      * clicked tab will be passed as a parameter.
      */
     onTabClick?: (index: number) => void;
     /**
+     * @deprecated This prop is deprecated and will be removed in future versions.
      * This function will be called when the user hovers a tab.The index of the
      * hovered tab will be passed as a parameter.
      */
     onTabHover?: (index: number | null) => void;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute applied to each tab.
      */
     tabIndex?: number;
+    /**
+     * @deprecated This prop is deprecated and will be removed in future versions.
+     * An array of objects representing the tabs.
+     */
+    tabs?: (TabLabelProps | TabIconProps)[];
 };
 type NewProps = {
     /**
@@ -3121,7 +3056,7 @@ type NewProps = {
 type Props$7 = LegacyProps & NewProps;
 
 declare const DxcTabs: {
-    ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): false | react_jsx_runtime.JSX.Element;
+    ({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$7): false | react_jsx_runtime.JSX.Element;
     Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
@@ -3535,28 +3470,28 @@ type SemanticToast = CommonProps$1 & {
     hideSemanticIcon?: boolean;
 };
 type ToastsQueuePropsType = {
+    /**
+     * Tree of components from which the useToast hook can be triggered.
+     */
+    children: ReactNode;
     /**
      * Duration in milliseconds before a toast automatically hides itself.
      * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
      */
     duration?: number;
-    /**
-     * Tree of components from which the useToast hook can be triggered.
-     */
-    children: ReactNode;
 };
 
-declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
+declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react_jsx_runtime.JSX.Element;
 
 type OptionIcon = {
-    /**
-     * String with the option display value.
-     */
-    label?: never;
     /**
      * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
     icon: string | SVG;
+    /**
+     * String with the option display value.
+     */
+    label?: never;
     /**
      * Value for the HTML properties title and aria-label.
      * When a label is defined, this prop can not be use.
@@ -3564,14 +3499,14 @@ type OptionIcon = {
     title: string;
 };
 type OptionLabel = {
-    /**
-     * String with the option display value.
-     */
-    label: string;
     /**
      * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
+    /**
+     * String with the option display value.
+     */
+    label: string;
     /**
      * Value for the HTML properties title and aria-label.
      * When a label is defined, this prop can not be use.
@@ -3579,6 +3514,10 @@ type OptionLabel = {
     title?: never;
 };
 type Option = {
+    /**
+     * If true, the option will be disabled.
+     */
+    disabled?: boolean;
     /**
      * Number with the option inner value.
      */
@@ -3586,88 +3525,80 @@ type Option = {
 } & (OptionIcon | OptionLabel);
 type CommonProps = {
     /**
-     * Text to be placed above the component.
-     */
-    label?: string;
-    /**
-     * Helper text to be placed above the component.
-     */
-    helperText?: string;
-    /**
-     * If true, the component will be disabled.
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    disabled?: boolean;
+    margin?: Space$1 | Margin;
     /**
      * An array of objects representing the selectable options.
      */
     options: Option[];
     /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * The orientation of the toggle group.
      */
-    margin?: Space$1 | Margin;
+    orientation?: "horizontal" | "vertical";
     /**
      * Value of the tabindex.
      */
     tabIndex?: number;
 };
-type SingleSelectionToggleGroup = CommonProps & {
+type MultipleSelectionToggleGroup = {
+    /**
+     * The array of keys with the initially selected values.
+     */
+    defaultValue?: number[];
     /**
      * 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.
      */
-    multiple?: false;
+    multiple: true;
     /**
-     * The key of the initially selected value.
+     * This function will be called every time the selection changes. An array with the key of
+     * the selected values will be passed as a parameter to this function.
      */
-    defaultValue?: number;
+    onChange?: (optionIndex: number[]) => void;
     /**
-     * The key of the selected value. If the component allows multiple selection, value must be an array.
+     * An array with the keys of the selected values.
      * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
-    value?: number;
+    value?: number[];
+};
+type SingleSelectionToggleGroup = {
     /**
-     * This function will be called every time the selection changes. The number with the key of the selected
-     * value will be passed as a parameter to this function.
+     * The key of the initially selected value.
      */
-    onChange?: (optionIndex: number) => void;
-};
-type MultipleSelectionToggleGroup = CommonProps & {
+    defaultValue?: number;
     /**
      * 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.
      */
-    multiple: true;
+    multiple?: false;
     /**
-     * The array of keys with the initially selected values.
+     * This function will be called every time the selection changes. The number with the key of the selected
+     * value will be passed as a parameter to this function.
      */
-    defaultValue?: number[];
+    onChange?: (optionIndex: number) => void;
     /**
-     * An array with the keys of the selected values.
+     * The key of the selected value. If the component allows multiple selection, value must be an array.
      * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
-    value?: number[];
-    /**
-     * This function will be called every time the selection changes. An array with the key of
-     * the selected values will be passed as a parameter to this function.
-     */
-    onChange?: (optionIndex: number[]) => void;
+    value?: number;
 };
-type Props$3 = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
+type Props$3 = CommonProps & (MultipleSelectionToggleGroup | SingleSelectionToggleGroup);
 
-declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: Props$3) => JSX.Element;
+declare function DxcToggleGroup({ defaultValue, margin, multiple, onChange, options, orientation, tabIndex, value, }: Props$3): react_jsx_runtime.JSX.Element;
 
 type Props$2 = {
     /**
-     * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
+     * Content in which the Tooltip will be displayed.
      */
-    position?: "bottom" | "top" | "left" | "right";
+    children: ReactNode;
     /**
      * Text to be displayed inside the tooltip.
      */
     label?: string;
     /**
-     * Content in which the Tooltip will be displayed.
+     * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
      */
-    children: ReactNode;
+    position?: "bottom" | "top" | "left" | "right";
 };
 
 declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
@@ -3746,34 +3677,34 @@ type Props = {
     tabIndex?: number;
 };
 
-declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
+declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react_jsx_runtime.JSX.Element;
 
 declare const componentTokens: {
     accordion: {
         backgroundColor: string;
         hoverBackgroundColor: string;
+        focusBackgroundColor: string;
+        activeBackgroundColor: string;
         arrowColor: string;
         disabledArrowColor: string;
+        subLabelFontFamily: string;
+        subLabelFontSize: string;
+        subLabelFontWeight: string;
+        subLabelFontStyle: string;
+        subLabelFontColor: string;
+        disabledSubLabelFontColor: string;
         assistiveTextFontFamily: string;
         assistiveTextFontSize: string;
         assistiveTextFontWeight: string;
         assistiveTextFontStyle: string;
-        assistiveTextLetterSpacing: string;
         assistiveTextFontColor: string;
         disabledAssistiveTextFontColor: string;
-        assistiveTextMinWidth: string;
-        assistiveTextPaddingRight: string;
-        assistiveTextPaddingLeft: string;
         titleLabelFontFamily: string;
         titleLabelFontSize: string;
         titleLabelFontWeight: string;
         titleLabelFontStyle: string;
         titleLabelFontColor: string;
         disabledTitleLabelFontColor: string;
-        titleLabelPaddingTop: string;
-        titleLabelPaddingBottom: string;
-        titleLabelPaddingLeft: string;
-        titleLabelPaddingRight: string;
         focusBorderColor: string;
         focusBorderStyle: string;
         focusBorderThickness: string;
@@ -3781,16 +3712,14 @@ declare const componentTokens: {
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
+        boxShadowSpread: string;
         boxShadowColor: string;
         iconColor: string;
         disabledIconColor: string;
         iconSize: string;
-        iconMarginLeft: string;
-        iconMarginRight: string;
-        accordionGroupSeparatorBorderColor: string;
-        accordionGroupSeparatorBorderThickness: string;
-        accordionGroupSeparatorBorderRadius: string;
-        accordionGroupSeparatorBorderStyle: string;
+        accordionSeparatorBorderColor: string;
+        accordionSeparatorBorderThickness: string;
+        accordionSeparatorBorderStyle: string;
     };
     alert: {
         errorBackgroundColor: string;
@@ -5031,6 +4960,7 @@ type OpinionatedTheme = {
     accordion: {
         accentColor: string;
         titleFontColor: string;
+        subLabelFontColor: string;
         assistiveTextFontColor: string;
     };
     alert: {
@@ -5281,28 +5211,28 @@ declare const HalstackContext: react.Context<{
     accordion: {
         backgroundColor: string;
         hoverBackgroundColor: string;
+        focusBackgroundColor: string;
+        activeBackgroundColor: string;
         arrowColor: string;
         disabledArrowColor: string;
+        subLabelFontFamily: string;
+        subLabelFontSize: string;
+        subLabelFontWeight: string;
+        subLabelFontStyle: string;
+        subLabelFontColor: string;
+        disabledSubLabelFontColor: string;
         assistiveTextFontFamily: string;
         assistiveTextFontSize: string;
         assistiveTextFontWeight: string;
         assistiveTextFontStyle: string;
-        assistiveTextLetterSpacing: string;
         assistiveTextFontColor: string;
         disabledAssistiveTextFontColor: string;
-        assistiveTextMinWidth: string;
-        assistiveTextPaddingRight: string;
-        assistiveTextPaddingLeft: string;
         titleLabelFontFamily: string;
         titleLabelFontSize: string;
         titleLabelFontWeight: string;
         titleLabelFontStyle: string;
         titleLabelFontColor: string;
         disabledTitleLabelFontColor: string;
-        titleLabelPaddingTop: string;
-        titleLabelPaddingBottom: string;
-        titleLabelPaddingLeft: string;
-        titleLabelPaddingRight: string;
         focusBorderColor: string;
         focusBorderStyle: string;
         focusBorderThickness: string;
@@ -5310,16 +5240,14 @@ declare const HalstackContext: react.Context<{
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
+        boxShadowSpread: string;
         boxShadowColor: string;
         iconColor: string;
         disabledIconColor: string;
         iconSize: string;
-        iconMarginLeft: string;
-        iconMarginRight: string;
-        accordionGroupSeparatorBorderColor: string;
-        accordionGroupSeparatorBorderThickness: string;
-        accordionGroupSeparatorBorderRadius: string;
-        accordionGroupSeparatorBorderStyle: string;
+        accordionSeparatorBorderColor: string;
+        accordionSeparatorBorderThickness: string;
+        accordionSeparatorBorderStyle: string;
     };
     alert: {
         errorBackgroundColor: string;
@@ -6650,7 +6578,7 @@ type HalstackProviderPropsType = {
 };
 declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
 
-declare const useToast: () => {
+declare function useToast(): {
     default: (toast: DefaultToast) => (() => void) | undefined;
     success: (toast: SemanticToast) => (() => void) | undefined;
     warning: (toast: SemanticToast) => (() => void) | undefined;
@@ -6658,4 +6586,4 @@ declare const useToast: () => {
     loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
 };
 
-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 };
+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 };