npm - @dxc-technology/halstack-react - Versions diffs - 0.0.0-99edeb7 → 0.0.0-99ee508 - Mend

@dxc-technology/halstack-react 0.0.0-99edeb7 → 0.0.0-99ee508

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

package/dist/index.d.mts CHANGED Viewed

@@ -1,34 +1,45 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
+import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SortColumn } from 'react-data-grid';
 import * as styled_components from 'styled-components';
-type Space$u = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$p = {
-    top?: Space$u;
-    bottom?: Space$u;
-    left?: Space$u;
-    right?: Space$u;
+type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
 };
-type SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type Props$K = {
+type SVG = ReactNode & SVGProps<SVGSVGElement>;
+type AccordionItemProps = {
     /**
      * The panel label.
      */
     label: string;
     /**
-     * Initial state of the panel, only when it is uncontrolled.
+     * Additional info label positioned under the label.
+     */
+    subLabel?: string;
+    /**
+     * Badge component to add extra value to the accordion.
      */
-    defaultIsExpanded?: boolean;
+    badge?: {
+        position: "before" | "after";
+        element: ReactNode;
+    };
     /**
-     * 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.
+     * Status light component to add extra value to the accordion.
      */
-    isExpanded?: boolean;
+    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$i;
+    icon?: string | SVG;
     /**
      * Assistive text to be placed on the right side of the panel.
      */
@@ -37,156 +48,170 @@ 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: React.ReactNode;
-    /**
-     * 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$u | Margin$p;
+    children: ReactNode;
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
 };
-declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
-type Space$t = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$o = {
-    top?: Space$t;
-    bottom?: Space$t;
-    left?: Space$t;
-    right?: Space$t;
-};
-type SVG$h = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type AccordionPropsType = {
+type CommonProps$9 = {
     /**
-     * The panel label.
+     * 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.
      */
-    label: string;
+    margin?: Space$1 | Margin;
     /**
-     * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
+     * Contains one or more accordion items.
      */
-    icon?: string | SVG$h;
+    children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
+};
+type IndependentProps = CommonProps$9 & {
     /**
-     * Assistive text to be placed on the right side of the panel.
+     * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
-    assistiveText?: string;
+    independent: true;
     /**
-     * If true, the component will be disabled.
+     * Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
+     * several accordions can be activated by default.
      */
-    disabled?: boolean;
+    defaultIndexActive?: number;
     /**
-     * The expanded panel of the accordion. This area can be used to render
-     * custom content.
+     * 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.
+     */
+    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.
      */
-    children: React.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;
+    onActiveChange?: (index: number[]) => void;
+};
+type Props$I = IndependentProps | NonIndependentProps;
+declare const DxcAccordion: {
+    (props: Props$I): JSX.Element;
+    AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
+};
+type Action$2 = {
     /**
-     * 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 icon of the action. It can be a string with the name of the icon or an SVG component.
      */
-    margin?: Space$t | Margin$o;
+    icon?: string | SVG;
     /**
-     * Customized accordion(s) that are allowed inside an Accordion Group.
+     * The label of the action.
      */
-    children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
-};
-declare const DxcAccordionGroup: {
-    ({ defaultIndexActive, indexActive, disabled, onActiveChange, margin, children, }: Props$J): JSX.Element;
-    Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
+    label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
+    onClick: () => void;
 };
-type Space$s = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$n = {
-    top?: Space$s;
-    bottom?: Space$s;
-    left?: Space$s;
-    right?: Space$s;
+type Message = {
+    /**
+     * The function that will be executed when the user clicks on the close action button.
+     */
+    onClose?: () => void;
+    /**
+     * The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
+     * and it should be used exclusively to direct users to additional resources or relevant pages.
+     * No other components are permitted within the content of an alert.
+     */
+    text: ReactNode;
 };
-type Props$I = {
+type CommonProps$8 = {
     /**
-     * Uses on of the available alert types.
+     * If true, the alert will have a close button that will remove the message from the alert,
+     * only in banner and inline modes. The rest of the functionality will depend
+     * on the onClose event of each message (e.g. closing the modal alert).
      */
-    type?: "info" | "confirm" | "warning" | "error";
+    closable?: boolean;
     /**
-     * Uses on of the available alert modes:
-     *    'inline': If onClose function is received, close button will be visible and the function will be executed when it's clicked.
-     *              There is no overlay layer. Position should be decided by the user.
-     *    'modal':  The alert will be displayed in the middle of the screen with an overlay layer behind.
-     *              The onClose function will be executed when the X button or the overlay is clicked. d
-     *              The user has the responsibility of hiding the modal in the onClose function, otherwise the modal will remain visible.
+     * Primary action of the alert.
      */
-    mode?: "inline" | "modal";
+    primaryAction?: Action$2;
     /**
-     * Text to display after icon and alert type and before content.
+     * Secondary action of the alert.
      */
-    inlineText?: string;
+    secondaryAction?: Action$2;
     /**
-     * This function will be called when the user clicks the close button. If there is no function we should close the alert by default.
+     * Specifies the semantic meaning of the alert.
      */
-    onClose?: () => void;
+    semantic?: "error" | "info" | "success" | "warning";
+    /**
+     * Title of the alert.
+     */
+    title: string;
+};
+type ModeSpecificProps = {
     /**
-     * The details section of the alert. Can be used to render custom content in this area.
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
      */
-    children?: React.ReactNode;
+    message?: Message | Message[];
     /**
-     * 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 mode of the alert.
      */
-    margin?: Space$s | Margin$n;
+    mode?: "inline" | "banner";
+} | {
     /**
-     * Size of the component.
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
      */
-    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    message: Required<Message>;
     /**
-     * Value of the tabindex attribute applied to the close button.
+     * The mode of the alert.
      */
-    tabIndex?: number;
+    mode: "modal";
 };
+type Props$H = CommonProps$8 & ModeSpecificProps;
-declare const DxcAlert: ({ type, mode, inlineText, onClose, children, margin, size, tabIndex, }: Props$I) => JSX.Element;
+declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$H): react_jsx_runtime.JSX.Element;
-type SVG$g = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type SidenavTitlePropsType = {
     /**
      * The area inside the sidenav title. This area can be used to render custom content.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type SidenavSectionPropsType = {
     /**
      * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type SidenavGroupPropsType = {
     /**
@@ -201,11 +226,11 @@ type SidenavGroupPropsType = {
     /**
      * Material Symbol name or SVG icon to be displayed next to the title of the group.
      */
-    icon?: string | SVG$g;
+    icon?: string | SVG;
     /**
      * The area inside the sidenav group. This area can be used to render sidenav links.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type SidenavLinkPropsType = {
     /**
@@ -219,7 +244,7 @@ type SidenavLinkPropsType = {
     /**
      * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
      */
-    icon?: string | SVG$g;
+    icon?: string | SVG;
     /**
      * If true, the link will be marked as selected. Moreover, in that same case,
      * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
@@ -229,100 +254,29 @@ type SidenavLinkPropsType = {
     /**
      * This function will be called when the user clicks the link and the event will be passed to this function.
      */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /**
      * The area inside the sidenav link.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Value of the tabindex.
      */
     tabIndex?: number;
 };
-type Props$H = {
+type Props$G = {
     /**
      * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
-    title?: React.ReactNode;
+    title?: ReactNode;
     /**
      * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
-type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type SocialLink = {
-    /**
-     * URL of the page the link goes to.
-     */
-    href: string;
-    /**
-     * Material Symbol name or SVG element as the icon used for the link.
-     */
-    logo: string | SVG$f;
-    /**
-     * Value for the HTML properties title and aria-label.
-     */
-    title: string;
-};
-type BottomLink = {
-    /**
-     * URL of the page the link goes to.
-     */
-    href: string;
-    /**
-     * Text for the link.
-     */
-    text: string;
-};
-type FooterPropsType = {
-    /**
-     * An array of objects representing the links that will be rendered as
-     * icons at the top-right side of the footer.
-     */
-    socialLinks?: SocialLink[];
-    /**
-     * An array of objects representing the links that will be rendered at
-     * the bottom part of the footer.
-     */
-    bottomLinks?: BottomLink[];
-    /**
-     * The text that will be displayed as copyright disclaimer.
-     */
-    copyright?: string;
-    /**
-     * The center section of the footer. Can be used to render custom
-     * content in this area.
-     */
-    children?: React.ReactNode;
-    /**
-     * Size of the top margin to be applied to the footer.
-     */
-    margin?: Space$r;
-    /**
-     * Value of the tabindex for all interactive elements, except those
-     * inside the custom area.
-     */
-    tabIndex?: number;
-    /**
-     * Determines the visual style and layout
-     * - "default": The default mode with full content and styling.
-     * - "reduced": A reduced mode with minimal content and styling.
-     */
-    mode?: "default" | "reduced";
-};
-type Space$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$m = {
-    top?: Space$q;
-    bottom?: Space$q;
-    left?: Space$q;
-    right?: Space$q;
-};
 type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type Option$1 = {
+type Option$2 = {
     /**
      * Option display value.
      */
@@ -330,17 +284,17 @@ type Option$1 = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$e;
+    icon?: string | SVG;
     /**
      * Option inner value.
      */
     value: string;
 };
-type Props$G = {
+type Props$F = {
     /**
      * 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.
@@ -349,7 +303,7 @@ type Props$G = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$e;
+    icon?: string | SVG;
     /**
      * Whether the icon should appear after or before the label.
      */
@@ -380,7 +334,7 @@ type Props$G = {
      * You can pass an object with 'top', 'bottom', 'left' and 'right'
      * properties in order to specify different margin sizes.
      */
-    margin?: Space$q | Margin$m;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -389,10 +343,28 @@ type Props$G = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Text representing advisory information related to the dropdown's trigger action.
+     * Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
 };
-type Space$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Props$F = {
+type Logo$1 = {
+    /**
+     * URL to navigate when the logo is clicked.
+     */
+    href?: string;
+    /**
+     * Source of the logo image.
+     */
+    src: string;
+    /**
+     * Alternative text for the logo image.
+     */
+    title?: string;
+};
+type Props$E = {
     /**
      * Whether a contrast line should appear at the bottom of the header.
      */
@@ -402,20 +374,24 @@ type Props$F = {
      * for the first child in the content, so we recommend the use of React.Fragment
      * to be applied correctly. Otherwise, the styles can be modified.
      */
-    content?: React.ReactNode;
+    content?: ReactNode;
     /**
      * Content shown in responsive version. It receives the close menu handler that can
      * be used to add that functionality when a element is clicked.
      */
-    responsiveContent?: (closeHandler: () => void) => React.ReactNode;
+    responsiveContent?: (closeHandler: () => void) => ReactNode;
     /**
-     * This function will be called when the user clicks the header logo.
+     * Logo to be displayed inside the header
      */
-    onClick?: () => void;
+    logo?: Logo$1;
     /**
      * Size of the bottom margin to be applied to the header.
      */
-    margin?: Space$p;
+    margin?: Space$1;
+    /**
+     * This function will be called when the user clicks the header logo.
+     */
+    onClick?: () => void;
     /**
      * Value of the tabindex for all interactive elements, except those inside the
      * custom area.
@@ -423,13 +399,92 @@ type Props$F = {
     tabIndex?: number;
 };
+type SocialLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
+    /**
+     * Material Symbol name or SVG element as the icon used for the link.
+     */
+    logo: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title: string;
+};
+type BottomLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
+    /**
+     * Text for the link.
+     */
+    text: string;
+};
+type Logo = {
+    /**
+     * URL to navigate when the logo is clicked.
+     */
+    href?: string;
+    /**
+     * Source of the logo image.
+     */
+    src: string;
+    /**
+     * Alternative text for the logo image.
+     */
+    title?: string;
+};
+type FooterPropsType = {
+    /**
+     * An array of objects representing the links that will be rendered at
+     * the bottom part of the footer.
+     */
+    bottomLinks?: BottomLink[];
+    /**
+     * The center section of the footer. Can be used to render custom
+     * content in this area.
+     */
+    children?: ReactNode;
+    /**
+     * The text that will be displayed as copyright disclaimer.
+     */
+    copyright?: string;
+    /**
+     * Logo to be displayed inside the footer
+     */
+    logo?: Logo;
+    /**
+     * Size of the top margin to be applied to the footer.
+     */
+    margin?: Space$1;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with full content and styling.
+     * - "reduced": A reduced mode with minimal content and styling.
+     */
+    mode?: "default" | "reduced";
+    /**
+     * An array of objects representing the links that will be rendered as
+     * icons at the top-right side of the footer.
+     */
+    socialLinks?: SocialLink[];
+    /**
+     * Value of the tabindex for all interactive elements, except those
+     * inside the custom area.
+     */
+    tabIndex?: number;
+};
 type AppLayoutMainPropsType = {
     /**
      * Everything between the tags will be displayed as the content of the main part of the application.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
-type AppLayoutPropsType = {
+type ApplicationLayoutPropsType = {
     /**
      * Text to be placed next to the hamburger button that toggles the
      * visibility of the sidenav.
@@ -438,40 +493,39 @@ type AppLayoutPropsType = {
     /**
      * Header content.
      */
-    header?: React.ReactNode;
+    header?: ReactNode;
     /**
      * Sidenav content
      */
-    sidenav?: React.ReactNode;
+    sidenav?: ReactNode;
     /**
      * Footer content
      */
-    footer?: React.ReactNode;
+    footer?: ReactNode;
     /**
      * Use the DxcApplicationLayout.Main provided to render main content.
      */
-    children: React.ReactElement<AppLayoutMainPropsType>;
+    children: ReactElement<AppLayoutMainPropsType>;
 };
 declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
+    ({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
+    Footer: ({ bottomLinks, children, copyright, logo, margin, mode, socialLinks, tabIndex, }: 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, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
+        ({ underlined, content, responsiveContent, logo, margin, onClick, tabIndex, }: Props$E): JSX.Element;
+        Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element>) => react_jsx_runtime.JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
     SideNav: {
-        ({ title, children }: Props$H): JSX.Element;
+        ({ title, children }: Props$G): JSX.Element;
         Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
         Group: ({ title, collapsable, icon, children }: SidenavGroupPropsType) => JSX.Element;
         Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
         Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
     };
-    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
+    useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
 };
-type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type ContextualProps = {
     /**
      * Text to be placed in the badge.
@@ -508,7 +562,7 @@ type NotificationProps = {
      */
     color?: never;
 };
-type CommonProps$5 = {
+type CommonProps$7 = {
     /**
      * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
      */
@@ -516,89 +570,52 @@ type CommonProps$5 = {
     /**
      *  Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
      */
-    icon?: string | SVG$d;
+    icon?: string | SVG;
     /**
      * Size of the component.
      */
     size?: "small" | "medium" | "large";
 };
-type Props$E = (ContextualProps | NotificationProps) & CommonProps$5;
+type Props$D = (ContextualProps | NotificationProps) & CommonProps$7;
-declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
+declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$D) => JSX.Element;
-type Spacing$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-type Props$D = {
+type Props$C = {
     /**
      * Applies the spacing scale to all sides.
      */
-    space?: Spacing$1;
+    space?: string;
     /**
      * Applies the spacing scale to the left and right sides.
      */
-    horizontal?: Spacing$1;
+    horizontal?: string;
     /**
      * Applies the spacing scale to the top and bottom sides.
      */
-    vertical?: Spacing$1;
+    vertical?: string;
     /**
      * Applies the spacing scale to the top side.
      */
-    top?: Spacing$1;
+    top?: string;
     /**
      * Applies the spacing scale to the right side.
      */
-    right?: Spacing$1;
+    right?: string;
     /**
      * Applies the spacing scale to the bottom side.
      */
-    bottom?: Spacing$1;
+    bottom?: string;
     /**
      * Applies the spacing scale to the left side.
      */
-    left?: Spacing$1;
+    left?: string;
     /**
      * Custom content inside the bleed.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
-declare function Bleed({ space, horizontal, vertical, top, right, bottom, left, children, }: Props$D): JSX.Element;
-type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$l = {
-    top?: Space$o;
-    bottom?: Space$o;
-    left?: Space$o;
-    right?: Space$o;
-};
-type Props$C = {
-    /**
-     * The size of the shadow to be displayed around the box.
-     */
-    shadowDepth?: 0 | 1 | 2;
-    /**
-     * Changes the display CSS property of the box div.
-     */
-    display?: string;
-    /**
-     * Custom content that will be placed in the box component.
-     */
-    children: React.ReactNode;
-    /**
-     * 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$o | Margin$l;
-    /**
-     * Size of the component.
-     */
-    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
-};
-/**
- * @deprecated
- */
-declare const DxcBox: ({ shadowDepth, display, children, margin, size, }: Props$C) => JSX.Element;
+declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$C): react_jsx_runtime.JSX.Element;
 type Item$1 = {
     href?: string;
@@ -638,7 +655,6 @@ type Props$B = {
 declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$B) => react_jsx_runtime.JSX.Element;
-type SVG$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type IconProps = {
     /**
      * Defines the style of the bullet point in the list.
@@ -647,11 +663,11 @@ type IconProps = {
     /**
      * Icon to display as bullet.
      */
-    icon: string | SVG$c;
+    icon: string | SVG;
     /**
      * Text to be shown in the list.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type OtherProps = {
     /**
@@ -665,7 +681,7 @@ type OtherProps = {
     /**
      * Text to be shown in the list.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type Props$A = IconProps | OtherProps;
@@ -673,7 +689,7 @@ type BulletedListItemPropsType = {
     /**
      * Text to be shown in the list.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 declare const DxcBulletedList: {
@@ -681,17 +697,11 @@ declare const DxcBulletedList: {
     Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
 };
-type Space$n = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$k = {
-    top?: Space$n;
-    bottom?: Space$n;
-    left?: Space$n;
-    right?: Space$n;
-};
-type SVG$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
+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";
@@ -704,11 +714,11 @@ type Props$z = {
     /**
      * 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.
      */
@@ -728,7 +738,7 @@ type Props$z = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$b;
+    icon?: string | SVG;
     /**
      * This function will be called when the user clicks the button.
      */
@@ -737,7 +747,7 @@ type Props$z = {
      * 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$n | Margin$k;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -748,14 +758,13 @@ type Props$z = {
     tabIndex?: number;
 };
-declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$z) => JSX.Element;
+declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$z) => JSX.Element;
-type Space$m = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Size$2 = {
-    top?: Space$m;
-    bottom?: Space$m;
-    left?: Space$m;
-    right?: Space$m;
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
 };
 type Props$y = {
     /**
@@ -773,7 +782,7 @@ type Props$y = {
      * component. You can pass an object with 'top', 'bottom', 'left'
      * and 'right' properties in order to specify different padding sizes.
      */
-    imagePadding?: Space$m | Size$2;
+    imagePadding?: Space$1 | Size$2;
     /**
      * Whether the image should appear in relation to the content.
      */
@@ -796,7 +805,7 @@ type Props$y = {
      * 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$m | Size$2;
+    margin?: Space$1 | Size$2;
     /**
      * Value of the tabindex attribute applied when the component is clickable.
      */
@@ -808,33 +817,29 @@ type Props$y = {
     /**
      * Custom content that will be placed inside the component.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
-declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$y) => JSX.Element;
+declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$y) => react_jsx_runtime.JSX.Element;
-type Space$l = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$j = {
-    top?: Space$l;
-    bottom?: Space$l;
-    left?: Space$l;
-    right?: Space$l;
-};
 type Props$x = {
     /**
-     * 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.
      */
@@ -843,14 +848,22 @@ type Props$x = {
      * 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.
      */
@@ -859,18 +872,6 @@ type Props$x = {
      * 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$l | Margin$j;
     /**
      * Size of the component.
      */
@@ -879,18 +880,15 @@ type Props$x = {
      * Value of the tabindex.
      */
     tabIndex?: number;
+    /**
+     * 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.
+     */
+    value?: string;
 };
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
-type Space$k = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$i = {
-    top?: Space$k;
-    bottom?: Space$k;
-    left?: Space$k;
-    right?: Space$k;
-};
-type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Props$w = {
     /**
      * Text to be placed on the chip.
@@ -899,11 +897,11 @@ type Props$w = {
     /**
      * Element or path used as icon to be placed after the chip label.
      */
-    suffixIcon?: string | SVG$a;
+    suffixIcon?: string | SVG;
     /**
      * Element or path used as icon to be placed before the chip label.
      */
-    prefixIcon?: string | SVG$a;
+    prefixIcon?: string | SVG;
     /**
      * This function will be called when the suffix is clicked.
      */
@@ -920,114 +918,22 @@ type Props$w = {
      * 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$k | Margin$i;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
 };
-declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$w) => JSX.Element;
+declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$w) => react_jsx_runtime.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 SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Space$j = SpacingValues | {
-    top?: SpacingValues;
-    right?: SpacingValues;
-    bottom?: SpacingValues;
-    left?: SpacingValues;
-};
-type Inset$1 = {
+type Space = {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+};
+type Inset = {
     top?: string;
     right?: string;
     bottom?: string;
@@ -1036,7 +942,7 @@ type Inset$1 = {
 type Background = {
     attachment?: string;
     clip?: string;
-    color?: CoreColorTokensType;
+    color?: string;
     image?: string;
     origin?: string;
     position?: string;
@@ -1045,8 +951,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;
@@ -1094,7 +1000,7 @@ type Props$v = {
     /**
      * Custom content inside the container.
      */
-    children: React.ReactNode;
+    children?: ReactNode;
     /**
      * Sets the display CSS property.
      * The set of values is limited to the ones related to the outer display type.
@@ -1120,13 +1026,17 @@ type Props$v = {
      * 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?: string | Space;
+    /**
+     * Sets the max-width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
      */
-    margin?: Space$j;
+    maxHeight?: string;
     /**
      * Sets the max-height CSS property.
      *
@@ -1134,11 +1044,11 @@ type Props$v = {
      */
     maxWidth?: string;
     /**
-     * Sets the max-width CSS property.
+     * Sets the min-width CSS property.
      *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
      */
-    maxHeight?: string;
+    minHeight?: string;
     /**
      * Sets the min-height CSS property.
      *
@@ -1146,85 +1056,308 @@ type Props$v = {
      */
     minWidth?: string;
     /**
-     * Sets the min-width CSS property.
+     * Based on the CSS property outline allows configuring all properties related
+     * to the outline of a container.
+     */
+    outline?: Outline;
+    /**
+     * Sets the overflow CSS property.
      *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
      */
-    minHeight?: string;
+    overflow?: Overflow;
+    /**
+     * Size of the padding to be applied to the container.
+     */
+    padding?: string | Space;
+    /**
+     * Sets the position CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
+    /**
+     * Sets the width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/width
+     */
+    width?: string;
+    /**
+     * Sets the z-index CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+     */
+    zIndex?: "auto" | number;
+};
+declare function DxcContainer({ display, width, height, overflow, ...props }: Props$v): react_jsx_runtime.JSX.Element;
+type CommonItemProps = {
+    badge?: ReactElement;
+    icon?: string | SVG;
+    label: string;
+};
+type Item = CommonItemProps & {
+    onSelect?: () => void;
+    selectedByDefault?: boolean;
+};
+type GroupItem = CommonItemProps & {
+    items: (Item | GroupItem)[];
+};
+type Section = {
+    items: (Item | GroupItem)[];
+    title?: string;
+};
+type Props$u = {
+    /**
+     * Array of items to be displayed in the Contextual menu.
+     * Each item can be a single/simple item, a group item or a section.
+     */
+    items: (Item | GroupItem)[] | Section[];
+};
+declare function DxcContextualMenu({ items }: Props$u): react_jsx_runtime.JSX.Element;
+type BaseActionCell = {
+    disabled?: boolean;
+    tabIndex?: number;
+    title: string;
+};
+type ActionCell = BaseActionCell & ({
+    icon: string | SVG;
+    onClick: () => void;
+    options?: never;
+} | {
+    icon?: never;
+    onClick: (value?: string) => void;
+    options: Option$2[];
+});
+type ActionsCellPropsType = {
+    /**
+     * It represents a list of interactive elements that will work as buttons or as a dropdown. Those with an icon from Material Symbols
+     * or a SVG are treated as buttons. If any element lacks an icon and includes options, it is interpreted as a dropdown.
+     * Only the first action with options will be displayed and only up to 3 actions.
+     * In the case of the dropdown the click function will pass the value assigned to the option.
+     */
+    actions: ActionCell[];
+};
+type Props$t = {
+    /**
+     * The center section of the table. Can be used to render custom
+     * content in this area.
+     */
+    children: ReactNode;
+    /**
+     * 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;
+    /**
+     * Determines the visual style and layout
+     * - "default": Default table size.
+     * - "reduced": More compact table with less spacing for high density information.
+     */
+    mode?: "default" | "reduced";
+};
+type GridColumn = {
+    /**
+     * Key that will be rendered from each row in rows.
+     */
+    key: string;
+    /**
+     * Label that will be used for the column header.
+     */
+    label: string;
+    /**
+     * Whether the column is resizable or not.
+     */
+    resizable?: boolean;
+    /**
+     * Whether the column is sortable or not.
+     */
+    sortable?: boolean;
+    /**
+     * Custom criteria for sorting the column.
+     */
+    sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
+    /**
+     * Whether the column is draggable or not.
+     */
+    draggable?: boolean;
+    /**
+     * Whether the column cells are editable or not.
+     */
+    textEditable?: boolean;
+    /**
+     * Value that will be rendered from the summaryRow.
+     */
+    summaryKey?: string;
+    /**
+     * Sets the alignment inside the cells.
+     */
+    alignment?: "left" | "right" | "center";
+};
+type GridRow = {
+    /**
+     * List of rows that will be rendered in each cell based on the key in each column.
+     */
+    [key: string]: ReactNode | undefined;
+};
+type HierarchyGridRow = GridRow & {
+    childRows?: HierarchyGridRow[] | GridRow[];
+};
+type ExpandableGridRow = GridRow & {
+    expandedContent?: ReactNode;
+    expandedContentHeight?: number;
+    contentIsExpanded?: boolean;
+};
+type ExpandableRows = {
+    rows: ExpandableGridRow[];
+    /**
+     * Whether the rows can expand or not.
+     */
+    expandable: true;
+    /**
+     * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
+     */
+    uniqueRowId: string;
+};
+type HierarchyRows = {
+    rows: HierarchyGridRow[];
+    /**
+     * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
+     */
+    uniqueRowId: string;
+    /**
+     * Whether the rows can expand or not.
+     */
+    expandable?: false;
+};
+type SelectableGridProps = {
+    /**
+     * Whether the rows are selectable or not.
+     */
+    selectable: true;
+    /**
+     * Set of selected rows. This prop is mandatory if selectable is set to true. The uniqueRowId key will be used to identify the each row.
+     */
+    selectedRows: Set<string | number>;
+    /**
+     * Function called whenever the selected values changes. This prop is mandatory if selectable is set to true.The uniqueRowId key will be used to identify the rows.
+     */
+    onSelectRows: (selectedRows: Set<number | string>) => void;
+    /**
+     * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
+     */
+    uniqueRowId: string;
+} | {
+    selectable?: false;
+    selectedRows?: never;
+    onSelectRows?: never;
+    uniqueRowId?: string;
+};
+type PaginatedProps$1 = {
+    /**
+     * If true, paginator will be displayed.
+     */
+    showPaginator?: true;
+    /**
+     * Number of total items.
+     */
+    totalItems?: number;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: boolean;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: (value: number) => void;
+    /**
+     * 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 = {
+    /**
+     * If true, paginator will be displayed.
+     */
+    showPaginator: false;
+    /**
+     * Number of total items.
+     */
+    totalItems?: never;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: never;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: never;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: never;
     /**
-     * Based on the CSS property outline allows configuring all properties related
-     * to the outline of a container.
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
      */
-    outline?: Outline;
+    itemsPerPageFunction?: never;
     /**
-     * Sets the overflow CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     * Function called whenever the current page is changed.
      */
-    overflow?: Overflow;
+    onPageChange?: never;
     /**
-     * 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.
+     * Default page in which the datagrid is rendered
      */
-    padding?: Space$j;
+    defaultPage?: never;
+};
+type CommonProps$6 = {
+    columns: GridColumn[];
     /**
-     * Sets the position CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     * Extra row that will be always visible.
      */
-    position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
+    summaryRow?: GridRow;
     /**
-     * Sets the width CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/width
+     * Function called whenever a cell is edited.
      */
-    width?: string;
+    onGridRowsChange?: (_rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
     /**
-     * Sets the z-index CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+     * Function called whenever a column is sorted. Receives the sorted
+     * column and direction, or `undefined` if no sorting is applied.
      */
-    zIndex?: "auto" | number;
-};
-declare const DxcContainer: ({ display, width, height, overflow, ...props }: Props$v) => react_jsx_runtime.JSX.Element;
-type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type CommonItemProps = {
-    badge?: React.ReactElement;
-    icon?: string | SVG$9;
-    label: string;
-};
-type Item = CommonItemProps & {
-    onSelect?: () => void;
-    selectedByDefault?: boolean;
-};
-type GroupItem = CommonItemProps & {
-    items: (Item | GroupItem)[];
-};
-type Section = {
-    items: (Item | GroupItem)[];
-    title?: string;
+    onSort?: (_sortColumn?: SortColumn) => void;
 };
-type Props$u = {
+type BasicGridProps = {
+    rows: GridRow[];
     /**
-     * Array of items to be displayed in the Contextual menu.
-     * Each item can be a single/simple item, a group item or a section.
+     * Whether the rows can expand or not.
      */
-    items: (Item | GroupItem)[] | Section[];
+    expandable?: false;
 };
+type Props$s = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
-declare const DxcContextualMenu: ({ items }: Props$u) => react_jsx_runtime.JSX.Element;
-type Space$i = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$h = {
-    top?: Space$i;
-    bottom?: Space$i;
-    left?: Space$i;
-    right?: Space$i;
+declare const DxcDataGrid: {
+    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$s): JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
 };
-type Props$t = {
+type Props$r = {
     /**
      * Initial value of the input element, only when it is uncontrolled.
      */
@@ -1315,24 +1448,28 @@ type Props$t = {
      * 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$i | Margin$h;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
-    size?: "medium" | "large" | "fillParent";
+    size?: "small" | "medium" | "large" | "fillParent";
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the date input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
-declare const DxcDateInput: react.ForwardRefExoticComponent<Props$t & react.RefAttributes<HTMLDivElement>>;
+declare const DxcDateInput: react.ForwardRefExoticComponent<Props$r & react.RefAttributes<HTMLDivElement>>;
-type Props$s = {
+type Props$q = {
     /**
      * If true, the close button will be visible.
      */
-    isCloseVisible?: boolean;
+    closable?: boolean;
     /**
      * This function will be called when the user clicks the close button.
      * The responsibility of hiding the dialog lies with the user.
@@ -1354,7 +1491,7 @@ type Props$s = {
      * can lead to unpredictable behaviour for keyboard users, affecting
      * the order of focus and focus locking within the dialog.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Value of the tabindex applied to the close button.
      * Note that values greater than 0 are strongly discouraged. It can
@@ -1363,9 +1500,9 @@ type Props$s = {
     tabIndex?: number;
 };
-declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$s) => JSX.Element;
+declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$q) => JSX.Element;
-type Props$r = {
+type Props$p = {
     /**
      * The divider can be shown in horizontal or vertical.
      */
@@ -1386,17 +1523,10 @@ type Props$r = {
     decorative?: boolean;
 };
-declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$r) => JSX.Element;
+declare function DxcDivider({ color, decorative, orientation, weight, }: Props$p): react_jsx_runtime.JSX.Element;
-declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, }: Props$G) => JSX.Element;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element;
-type Space$h = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$g = {
-    top?: Space$h;
-    bottom?: Space$h;
-    left?: Space$h;
-    right?: Space$h;
-};
 type FileData = {
     /**
      * Selected file.
@@ -1411,7 +1541,7 @@ type FileData = {
      */
     preview?: string;
 };
-type CommonProps$4 = {
+type CommonProps$5 = {
     /**
      * Text to be placed above the component.
      */
@@ -1462,13 +1592,13 @@ type CommonProps$4 = {
      * 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$h | Margin$g;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
 };
-type DropModeProps = CommonProps$4 & {
+type DropModeProps = CommonProps$5 & {
     /**
      * Uses one of the available file input modes:
      *    'file': Files are selected by clicking the button and selecting it through the file explorer.
@@ -1482,7 +1612,7 @@ type DropModeProps = CommonProps$4 & {
      */
     dropAreaLabel?: string;
 };
-type FileModeProps = CommonProps$4 & {
+type FileModeProps = CommonProps$5 & {
     /**
      * Uses one of the available file input modes:
      *    'file': Files are selected by clicking the button and selecting it through the file explorer.
@@ -1496,31 +1626,30 @@ type FileModeProps = CommonProps$4 & {
      */
     dropAreaLabel?: never;
 };
-type Props$q = DropModeProps | FileModeProps;
+type Props$o = DropModeProps | FileModeProps;
-declare const DxcFileInput: react.ForwardRefExoticComponent<Props$q & react.RefAttributes<HTMLDivElement>>;
+declare const DxcFileInput: react.ForwardRefExoticComponent<Props$o & react.RefAttributes<HTMLDivElement>>;
-type Spaces$1 = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
 type Gap$1 = {
-    rowGap: Spaces$1;
-    columnGap?: Spaces$1;
+    rowGap: string;
+    columnGap?: string;
 } | {
-    rowGap?: Spaces$1;
-    columnGap: Spaces$1;
-} | Spaces$1;
-type CommonProps$3 = {
+    rowGap?: string;
+    columnGap: string;
+} | string;
+type CommonProps$4 = {
     /**
      * Sets the justify-content CSS property.
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
      */
-    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
+    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "normal" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
     /**
      * Sets the align-items CSS property.
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
      */
-    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
+    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline" | "normal";
     /**
      * Sets the align-content CSS property.
      *
@@ -1534,7 +1663,7 @@ type CommonProps$3 = {
      */
     alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
 };
-type Props$p = CommonProps$3 & {
+type Props$n = CommonProps$4 & {
     /**
      * Sets the flex-direction CSS property.
      *
@@ -1584,53 +1713,54 @@ type Props$p = CommonProps$3 & {
     /**
      * Custom content inside the flex container.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
-declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: Props$p) => JSX.Element;
+declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$n) => react_jsx_runtime.JSX.Element;
-type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-type Gap = {
-    rowGap: Spaces;
-    columnGap?: Spaces;
+type Gap = string | {
+    columnGap?: string;
+    rowGap: string;
 } | {
-    rowGap?: Spaces;
-    columnGap: Spaces;
-} | Spaces;
+    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.
      *
@@ -1638,15 +1768,13 @@ 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: React.ReactNode;
+    row?: number | string | GridCell;
 };
-type Props$o = GridItemProps & {
+type Props$m = GridItemProps & {
     /**
      * Sets the grid-auto-columns CSS property.
      *
@@ -1670,7 +1798,7 @@ type Props$o = GridItemProps & {
      *
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
      */
-    gap?: Spaces | Gap;
+    gap?: Gap;
     /**
      * Sets the place-content CSS property.
      *
@@ -1704,24 +1832,17 @@ type Props$o = GridItemProps & {
 };
 declare const DxcGrid: {
-    (props: Props$o): JSX.Element;
+    (props: Props$m): react_jsx_runtime.JSX.Element;
     Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
 };
-type Space$g = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$f = {
-    top?: Space$g;
-    bottom?: Space$g;
-    left?: Space$g;
-    right?: Space$g;
-};
-type Props$n = {
+type Props$l = {
     /**
      * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
      * The html tag of the heading will be the one specified in the 'as' prop.
      * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
      */
-    level?: 1 | 2 | 3 | 4 | 5;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * Heading text.
      */
@@ -1729,21 +1850,21 @@ type Props$n = {
     /**
      * Modifies the default weight of the heading.
      */
-    weight?: "light" | "normal" | "bold";
+    weight?: "light" | "default" | "regular";
     /**
      * Specifies the HTML tag of the heading.
      */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5";
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     /**
      * 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$g | Margin$f;
+    margin?: Space$1 | Margin;
 };
-declare const DxcHeading: ({ level, text, as, weight, margin }: Props$n) => JSX.Element;
+declare function DxcHeading({ as, level, margin, text, weight }: Props$l): react_jsx_runtime.JSX.Element;
-type Props$m = {
+type Props$k = {
     /**
      * Alternative text description displayed when the specified image is not loaded.
      *
@@ -1756,21 +1877,35 @@ type Props$m = {
      * which is required regardless of the presence of the caption or not.
      */
     caption?: string;
+    /**
+     * Sets the rendered height of the image.
+     */
+    height?: string;
     /**
      * If true, the image will be loaded only when it is visible on the screen (lazy loading).
      * Otherwise and by default, the image will be loaded as soon as the component is mounted (eager loading).
      */
     lazyLoading?: boolean;
     /**
-     * URL of the image. This prop is required and must be valid.
+     * Sets the object-fit CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
      */
-    src: string;
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
     /**
-     * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
+     * Sets the object-position CSS property.
      *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
      */
-    srcSet?: string;
+    objectPosition?: string;
+    /**
+     * This function will be called when the image fails to load.
+     */
+    onError?: ReactEventHandler<HTMLImageElement>;
+    /**
+     * This function will be called when the image is loaded.
+     */
+    onLoad?: ReactEventHandler<HTMLImageElement>;
     /**
      * One or more strings separated by commas, indicating a set of source sizes.
      * If the srcSet attribute is absent or contains no values with a width descriptor,
@@ -1780,83 +1915,60 @@ type Props$m = {
      */
     sizes?: string;
     /**
-     * Sets the rendered width of the image.
-     */
-    width?: string;
-    /**
-     * Sets the rendered height of the image.
-     */
-    height?: string;
-    /**
-     * Sets the object-fit CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+     * URL of the image. This prop is required and must be valid.
      */
-    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    src: string;
     /**
-     * Sets the object-position CSS property.
+     * List of one or more strings separated by commas indicating a set of possible images for the user agent to use.
      *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
-     */
-    objectPosition?: string;
-    /**
-     * This function will be called when the image is loaded.
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
      */
-    onLoad?: React.ReactEventHandler<HTMLImageElement>;
+    srcSet?: string;
     /**
-     * This function will be called when the image fails to load.
+     * Sets the rendered width of the image.
      */
-    onError?: React.ReactEventHandler<HTMLImageElement>;
+    width?: string;
 };
-declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$m) => react_jsx_runtime.JSX.Element;
+declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$k): react_jsx_runtime.JSX.Element;
-type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
-type Props$l = {
+type Props$j = {
     /**
-     * Applies the spacing scale to all sides.
+     * Applies the spacing scale to the bottom side.
      */
-    space?: Spacing;
+    bottom?: string;
     /**
-     * Applies the spacing scale to the left and right sides.
+     * Custom content inside the inset.
      */
-    horizontal?: Spacing;
+    children: ReactNode;
     /**
-     * Applies the spacing scale to the top and bottom sides.
+     * Applies the spacing scale to the left and right sides.
      */
-    vertical?: Spacing;
+    horizontal?: string;
     /**
-     * Applies the spacing scale to the top side.
+     * Applies the spacing scale to the left side.
      */
-    top?: Spacing;
+    left?: string;
     /**
      * Applies the spacing scale to the right side.
      */
-    right?: Spacing;
+    right?: string;
     /**
-     * Applies the spacing scale to the bottom side.
+     * Applies the spacing scale to all sides.
      */
-    bottom?: Spacing;
+    space?: string;
     /**
-     * Applies the spacing scale to the left side.
+     * Applies the spacing scale to the top side.
      */
-    left?: Spacing;
+    top?: string;
     /**
-     * Custom content inside the inset.
+     * Applies the spacing scale to the top and bottom sides.
      */
-    children: React.ReactNode;
+    vertical?: string;
 };
-declare function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: Props$l): JSX.Element;
+declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$j): react_jsx_runtime.JSX.Element;
-type Space$f = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$e = {
-    top?: Space$f;
-    bottom?: Space$f;
-    left?: Space$f;
-    right?: Space$f;
-};
-type SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type LinkProps = {
     /**
      * If true, the link is disabled.
@@ -1869,7 +1981,7 @@ type LinkProps = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the link text.
      */
-    icon?: string | SVG$8;
+    icon?: string | SVG;
     /**
      * Indicates the position of the icon in the component.
      */
@@ -1895,7 +2007,7 @@ type LinkProps = {
      * 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$f | Margin$e;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex.
      */
@@ -1904,8 +2016,7 @@ type LinkProps = {
 declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
-type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type TabProps = {
+type TabProps$1 = {
     /**
      * Whether the tab is active or not.
      */
@@ -1921,7 +2032,7 @@ type TabProps = {
     /**
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
-    icon?: string | SVG$7;
+    icon?: string | SVG;
     /**
      * If the value is 'true', an empty badge will appear.
      * If it is 'false', no badge will appear.
@@ -1935,7 +2046,7 @@ type TabProps = {
      */
     children: string;
 };
-type Props$k = {
+type Props$i = {
     /**
      * Whether the icon should appear above or to the left of the label.
      */
@@ -1943,7 +2054,7 @@ type Props$k = {
     /**
      * Contains one or more DxcNavTabs.Tab.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Value of the tabindex attribute applied to each tab.
      */
@@ -1951,18 +2062,11 @@ type Props$k = {
 };
 declare const DxcNavTabs: {
-    ({ iconPosition, tabIndex, children }: Props$k): JSX.Element;
-    Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLAnchorElement>>;
+    ({ iconPosition, tabIndex, children }: Props$i): JSX.Element;
+    Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
 };
-type Space$e = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$d = {
-    top?: Space$e;
-    bottom?: Space$e;
-    left?: Space$e;
-    right?: Space$e;
-};
-type Props$j = {
+type Props$h = {
     /**
      * Text to be placed above the number.
      */
@@ -2070,7 +2174,7 @@ type Props$j = {
      * 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$e | Margin$d;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -2079,11 +2183,19 @@ type Props$j = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * 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$j & react.RefAttributes<HTMLDivElement>>;
+declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
-type Props$i = {
+type Props$g = {
     /**
      * Number of the current selected page.
      */
@@ -2121,20 +2233,13 @@ type Props$i = {
     tabIndex?: number;
 };
-declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$i) => JSX.Element;
+declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$g) => JSX.Element;
-declare const DxcParagraph: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
+declare function DxcParagraph({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
-type Space$d = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$c = {
-    top?: Space$d;
-    bottom?: Space$d;
-    left?: Space$d;
-    right?: Space$d;
-};
-type Props$h = {
+type Props$f = {
     /**
      * Text to be placed above the password input.
      */
@@ -2223,7 +2328,7 @@ type Props$h = {
      * 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$d | Margin$c;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -2232,18 +2337,21 @@ type Props$h = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the password input element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
-declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
+declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$f & react.RefAttributes<HTMLDivElement>>;
-type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Size$1 = {
-    top?: Space$c;
-    bottom?: Space$c;
-    left?: Space$c;
-    right?: Space$c;
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
 };
-type Props$g = {
+type Props$e = {
     /**
      * Text to be placed above the progress bar.
      */
@@ -2270,10 +2378,14 @@ type Props$g = {
      * an object with 'top', 'bottom', 'left' and 'right' properties
      * in order to specify different margin sizes.
      */
-    margin?: Space$c | Size$1;
+    margin?: Space$1 | Size$1;
+    /**
+     * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
-declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$g) => JSX.Element;
+declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$e) => JSX.Element;
 type Link = {
     /**
@@ -2285,7 +2397,7 @@ type Link = {
      */
     links?: Link[];
 };
-type Props$f = {
+type Props$d = {
     /**
      * Title of the quick nav component.
      */
@@ -2296,9 +2408,9 @@ type Props$f = {
     links: Link[];
 };
-declare const DxcQuickNav: ({ title, links }: Props$f) => JSX.Element;
+declare function DxcQuickNav({ links, title }: Props$d): react_jsx_runtime.JSX.Element;
-type RadioOption = {
+type Option$1 = {
     /**
      * Label of the option placed next to the radio input.
      */
@@ -2316,26 +2428,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
@@ -2349,28 +2474,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
@@ -2381,78 +2487,37 @@ 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;
     /**
-     * Value of the tabindex attribute.
+     * If true, the component will not be mutable, meaning the user can not edit the control.
      */
-    tabIndex?: number;
-};
-declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$b = {
-    top?: Space$b;
-    bottom?: Space$b;
-    left?: Space$b;
-    right?: Space$b;
-};
-type SVG$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type ActionCellsPropsType = {
-    actions: Array<{
-        icon: string | SVG$6;
-        title: string;
-        onClick: () => void;
-        disabled?: boolean;
-        tabIndex?: number;
-        options?: never;
-    } | {
-        icon?: never;
-        title: string;
-        onClick: (value?: string) => void;
-        disabled?: boolean;
-        tabIndex?: number;
-        options: Option$1[];
-    }>;
-};
-type Props$e = {
+    readOnly?: boolean;
     /**
-     * The center section of the table. Can be used to render custom
-     * content in this area.
+     * Sets the orientation of the options within the radio group.
      */
-    children: React.ReactNode;
+    stacking?: "row" | "column";
     /**
-     * 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.
+     * Value of the tabindex attribute.
      */
-    margin?: Space$b | Margin$b;
+    tabIndex?: number;
     /**
-     * Determines the visual style and layout
-     * - "default": Default table size.
-     * - "reduced": More compact table with less spacing for high density information.
+     * Value of the radio group. If undefined, the component will be
+     * uncontrolled and the value will be managed internally by the
+     * component.
      */
-    mode?: "default" | "reduced";
+    value?: string;
 };
-type Space$a = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$a = {
-    top?: Space$a;
-    bottom?: Space$a;
-    left?: Space$a;
-    right?: Space$a;
-};
+declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 type Column = {
     /**
      * Column display value.
      */
-    displayValue: React.ReactNode;
+    displayValue: ReactNode;
     /**
      * Boolean value to indicate whether the column is sortable or not.
      */
@@ -2462,7 +2527,7 @@ type Cell = {
     /**
      * Value to be displayed in the cell.
      */
-    displayValue: React.ReactNode;
+    displayValue: ReactNode;
     /**
      * Value to be used when sorting the table by that
      * column. If not indicated displayValue will be used for sorting.
@@ -2470,7 +2535,7 @@ type Cell = {
     sortValue?: string | number | Date;
 };
 type Row = Cell[];
-type CommonProps$2 = {
+type CommonProps$3 = {
     /**
      * An array of objects representing the columns of the table.
      */
@@ -2484,7 +2549,7 @@ type CommonProps$2 = {
      * 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.
      */
-    margin?: Space$a | Margin$a;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute applied to the sortable icon.
      */
@@ -2496,7 +2561,7 @@ type CommonProps$2 = {
      */
     mode?: "default" | "reduced";
 };
-type PaginatedProps = CommonProps$2 & {
+type PaginatedProps = CommonProps$3 & {
     hidePaginator?: false;
     /**
      * If true, a select component for navigation between pages will be displayed.
@@ -2516,7 +2581,7 @@ type PaginatedProps = CommonProps$2 & {
      */
     itemsPerPageFunction?: (value: number) => void;
 };
-type NonPaginatedProps = CommonProps$2 & {
+type NonPaginatedProps = CommonProps$3 & {
     /**
      * If true, paginator will not be displayed.
      */
@@ -2539,31 +2604,13 @@ type NonPaginatedProps = CommonProps$2 & {
      */
     itemsPerPageFunction?: never;
 };
-type Props$d = PaginatedProps | NonPaginatedProps;
+type Props$c = PaginatedProps | NonPaginatedProps;
 declare const DxcResultsetTable: {
-    ({ columns, rows, hidePaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, mode, }: Props$d): JSX.Element;
-    ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
+    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, }: Props$c): react_jsx_runtime.JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
 };
-type Space$9 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$9 = {
-    top?: Space$9;
-    bottom?: Space$9;
-    left?: Space$9;
-    right?: Space$9;
-};
-type SVG$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type ListOptionGroupType = {
-    /**
-     * Label of the group to be shown in the select's listbox.
-     */
-    label: string;
-    /**
-     * List of the grouped options.
-     */
-    options: ListOptionType[];
-};
 type ListOptionType = {
     /**
      * Element used as the icon that will be placed before the option label.
@@ -2571,7 +2618,7 @@ type ListOptionType = {
      * is the chosen one, take into account that the component's
      * color styling tokens will not be applied to the image.
      */
-    icon?: string | SVG$5;
+    icon?: string | SVG;
     /**
      * Label of the option to be shown in the select's listbox.
      */
@@ -2583,7 +2630,17 @@ type ListOptionType = {
      */
     value: string;
 };
-type CommonProps$1 = {
+type ListOptionGroupType = {
+    /**
+     * Label of the group to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * List of the grouped options.
+     */
+    options: ListOptionType[];
+};
+type CommonProps$2 = {
     /**
      * Text to be placed above the select.
      */
@@ -2637,7 +2694,7 @@ type CommonProps$1 = {
      * 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$9 | Margin$9;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -2646,8 +2703,16 @@ type CommonProps$1 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the select element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
-type SingleSelect = CommonProps$1 & {
+type SingleSelect = CommonProps$2 & {
+    /**
+     * Enables users to select multiple items from the list.
+     */
+    enableSelectAll?: never;
     /**
      * If true, the select component will support multiple selected options.
      * In that case, value will be an array of strings with each selected
@@ -2683,7 +2748,11 @@ type SingleSelect = CommonProps$1 & {
         error?: string;
     }) => void;
 };
-type MultipleSelect = CommonProps$1 & {
+type MultipleSelect = CommonProps$2 & {
+    /**
+     * Enables users to select multiple items from the list.
+     */
+    enableSelectAll?: boolean;
     /**
      * If true, the select component will support multiple selected options.
      * In that case, value will be an array of strings with each selected
@@ -2719,66 +2788,57 @@ type MultipleSelect = CommonProps$1 & {
         error?: string;
     }) => void;
 };
-type Props$c = SingleSelect | MultipleSelect;
+type Props$b = SingleSelect | MultipleSelect;
-declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSelect: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
-type Space$8 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$8 = {
-    top?: Space$8;
-    bottom?: Space$8;
-    left?: Space$8;
-    right?: Space$8;
-};
-type Props$b = {
-    /**
-     * Text to be placed above the slider.
-     */
-    label?: string;
+type Props$a = {
     /**
-     * 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.
@@ -2790,60 +2850,68 @@ 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$8 | Margin$8;
+    showLimitsValues?: boolean;
     /**
      * Size of the component.
      */
     size?: "medium" | "large" | "fillParent";
+    /**
+     * The step interval between values available for selection.
+     */
+    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>>;
+declare const DxcSlider: react.ForwardRefExoticComponent<Props$a & react.RefAttributes<HTMLDivElement>>;
-type Space$7 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$7 = {
-    top?: Space$7;
-    bottom?: Space$7;
-    left?: Space$7;
-    right?: Space$7;
-};
-type Props$a = {
+type Props$9 = {
     /**
-     * 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..
+     */
+    showValue?: boolean;
+    /**
+     * The value of the progress indicator. If it's received the
+     * component is determinate, otherwise is indeterminate.
      */
-    margin?: Space$7 | Margin$7;
+    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$9) => react_jsx_runtime.JSX.Element;
 type Mode = "default" | "info" | "success" | "warning" | "error";
 type Size = "small" | "medium" | "large";
-type Props$9 = {
+type Props$8 = {
     /**
      * It will define the color of the light based on its semantic meaning.
      */
@@ -2858,30 +2926,26 @@ type Props$9 = {
     size?: Size;
 };
-declare const DxcStatusLight: ({ mode, label, size }: Props$9) => JSX.Element;
+declare function DxcStatusLight({ label, mode, size }: Props$8): react_jsx_runtime.JSX.Element;
-type Space$6 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$6 = {
-    top?: Space$6;
-    bottom?: Space$6;
-    left?: Space$6;
-    right?: Space$6;
-};
-type Props$8 = {
+type Props$7 = {
     /**
-     * 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.
      */
@@ -2891,13 +2955,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.
@@ -2907,11 +2972,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$6 | Margin$6;
     /**
      * Size of the component.
      */
@@ -2920,23 +2980,20 @@ type Props$8 = {
      * Value of the tabindex.
      */
     tabIndex?: number;
+    /**
+     * 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.
+     */
+    value?: string;
 };
-declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSwitch: react.ForwardRefExoticComponent<Props$7 & react.RefAttributes<HTMLDivElement>>;
 declare const DxcTable: {
-    ({ children, margin, mode }: Props$e): JSX.Element;
-    ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
+    ({ children, margin, mode }: Props$t): react_jsx_runtime.JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
 };
-type Space$5 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$5 = {
-    top?: Space$5;
-    bottom?: Space$5;
-    left?: Space$5;
-    right?: Space$5;
-};
-type SVG$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
@@ -2951,7 +3008,7 @@ type TabCommonProps = {
      */
     notificationNumber?: boolean | number;
 };
-type TabLabelProps = TabCommonProps & {
+type TabLabelProps = {
     /**
      * Tab label.
      */
@@ -2959,9 +3016,9 @@ type TabLabelProps = TabCommonProps & {
     /**
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
-    icon?: string | SVG$4;
+    icon?: string | SVG;
 };
-type TabIconProps = TabCommonProps & {
+type TabIconProps = {
     /**
      * Tab label.
      */
@@ -2969,177 +3026,162 @@ type TabIconProps = TabCommonProps & {
     /**
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
-    icon: string | SVG$4;
+    icon: string | SVG;
 };
-type Props$7 = {
-    /**
-     * Initially active tab, only when it is uncontrolled.
-     */
-    defaultActiveTabIndex?: number;
+type TabProps = {
+    defaultActive?: boolean;
+    active?: boolean;
+    title?: string;
+    tabId?: string;
+    disabled?: boolean;
+    notificationNumber?: boolean | number;
+    children: ReactNode;
+    onClick?: () => void;
+    onHover?: () => void;
+} & (TabLabelProps | TabIconProps);
+type LegacyProps = {
     /**
+     * @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) => 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$5 | Margin$5;
+    onTabHover?: (index: number | null) => void;
     /**
      * Value of the tabindex attribute applied to each tab.
      */
     tabIndex?: number;
-};
-declare const DxcTabs: ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, }: Props$7) => JSX.Element;
-type Space$4 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$4 = {
-    top?: Space$4;
-    bottom?: Space$4;
-    left?: Space$4;
-    right?: Space$4;
-};
-type SVG$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type TagCommonProps = {
-    /**
-     * If defined, the tag will be displayed as an anchor, using this prop as "href".
-     * Component will show some visual feedback on hover.
-     */
-    linkHref?: string;
-    /**
-     * If defined, the tag will be displayed as a button. This function will
-     * be called when the user clicks the tag. Component will show some
-     * visual feedback on hover.
-     */
-    onClick?: () => void;
-    /**
-     * Background color of the icon section of the tag.
-     */
-    iconBgColor?: string;
     /**
-     * Whether the label should appear after or before the icon.
+     * @deprecated This prop is deprecated and will be removed in future versions.
+     * An array of objects representing the tabs.
      */
-    labelPosition?: "before" | "after";
+    tabs?: (TabCommonProps & (TabLabelProps | TabIconProps))[];
+};
+type NewProps = {
     /**
-     * If true, the page is opened in a new browser tab.
+     * Whether the icon should appear above or to the left of the label.
      */
-    newWindow?: boolean;
+    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$4 | Margin$4;
-    /**
-     * Size of the component.
-     */
-    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    margin?: Space$1 | Margin;
     /**
-     * Value of the tabindex attribute.
+     * Value of the tabindex attribute applied to each tab.
      */
     tabIndex?: number;
-};
-type TagLabelProps = TagCommonProps & {
-    /**
-     * Material Symbol name or SVG element used as the icon that will be placed next to the label.
-     */
-    icon?: string | SVG$3;
-    /**
-     * Text to be placed next inside the tag.
-     */
-    label: string;
-};
-type TagIconProps = TagCommonProps & {
-    /**
-     * Material Symbol name or SVG element used as the icon that will be placed next to the label.
-     */
-    icon: string | SVG$3;
     /**
-     * Text to be placed next inside the tag.
+     * Contains one or more DxcTabs.Tab.
      */
-    label?: string;
+    children?: ReactNode;
 };
-type Props$6 = TagLabelProps | TagIconProps;
+type Props$6 = LegacyProps & NewProps;
-declare const DxcTag: ({ icon, label, linkHref, onClick, iconBgColor, labelPosition, newWindow, margin, size, tabIndex, }: Props$6) => JSX.Element;
-type Space$3 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$3 = {
-    top?: Space$3;
-    bottom?: Space$3;
-    left?: Space$3;
-    right?: Space$3;
+declare const DxcTabs: {
+    ({ activeTabIndex, children, defaultActiveTabIndex, iconPosition, margin, onTabClick, onTabHover, tabIndex, tabs, }: Props$6): false | react_jsx_runtime.JSX.Element;
+    Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
 };
 type Props$5 = {
     /**
-     * Text to be placed above the textarea.
+     * Specifies a string to be used as the name for the textarea element when no `label` is provided.
      */
-    label?: string;
+    ariaLabel?: string;
     /**
-     * Name attribute of the textarea element.
+     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
+     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
      */
-    name?: string;
+    autocomplete?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
     /**
      * Initial value of the textarea, only when it is uncontrolled.
      */
     defaultValue?: string;
     /**
-     * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the textarea. 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.
      */
-    value?: string;
+    error?: string;
     /**
      * Helper text to be placed above the textarea.
      */
     helperText?: string;
     /**
-     * Text to be put as placeholder of the textarea.
+     * Text to be placed above the textarea.
      */
-    placeholder?: string;
+    label?: string;
     /**
-     * If true, the component will be disabled.
+     * Specifies the maximum length allowed by the textarea.
+     * This will be checked both when the textarea loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the maximum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
      */
-    disabled?: boolean;
+    maxLength?: number;
     /**
-     * If true, the component will not be mutable, meaning the user can not edit the control.
+     * 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.
      */
-    readOnly?: boolean;
+    margin?: Space$1 | Margin;
     /**
-     * If true, the textarea will be optional, showing '(Optional)'
-     * next to the label. Otherwise, the field will be considered required
-     * and an error will be passed as a parameter to the OnBlur and onChange functions
-     * when it has not been filled.
+     * Specifies the minimum length allowed by the textarea.
+     * This will be checked both when the textarea loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the minimum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
      */
-    optional?: boolean;
+    minLength?: number;
     /**
-     * Defines the textarea's ability to resize vertically. It can be:
-     *    - 'auto': The textarea grows or shrinks automatically in order to fit the content.
-     *    - 'manual': The height of the textarea is enabled to be manually modified.
-     *    - 'none': The textarea has a fixed height and can't be modified.
+     * Name attribute of the textarea element.
      */
-    verticalGrow?: "auto" | "manual" | "none";
+    name?: string;
     /**
-     * Number of rows of the textarea.
+     * This function will be called when the textarea loses the focus. An
+     * object including the textarea value and the error (if the value entered
+     * is not valid) will be passed to this function. If there is no error,
+     * error will not be defined.
      */
-    rows?: number;
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
     /**
      * This function will be called when the user types within the textarea.
      * An object including the current value and the error (if the value
@@ -3151,24 +3193,12 @@ type Props$5 = {
         error?: string;
     }) => void;
     /**
-     * This function will be called when the textarea loses the focus. An
-     * object including the textarea value and the error (if the value entered
-     * is not valid) will be passed to this function. If there is no error,
-     * error will not be defined.
-     */
-    onBlur?: (val: {
-        value: string;
-        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 textarea. 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.
+     * If true, the textarea will be optional, showing '(Optional)'
+     * next to the label. Otherwise, the field will be considered required
+     * and an error will be passed as a parameter to the OnBlur and onChange functions
+     * when it has not been filled.
      */
-    error?: string;
+    optional?: boolean;
     /**
      * Regular expression that defines the valid format allowed by the
      * textarea. This will be checked both when the textarea loses the focus
@@ -3180,35 +3210,17 @@ type Props$5 = {
      */
     pattern?: string;
     /**
-     * Specifies the minimum length allowed by the textarea.
-     * This will be checked both when the textarea loses the
-     * focus and while typing within it. If the string entered does not
-     * comply the minimum length, the onBlur and onChange functions will be called
-     * with the current value and an internal error informing that the value
-     * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will not be defined.
-     */
-    minLength?: number;
-    /**
-     * Specifies the maximum length allowed by the textarea.
-     * This will be checked both when the textarea loses the
-     * focus and while typing within it. If the string entered does not
-     * comply the maximum length, the onBlur and onChange functions will be called
-     * with the current value and an internal error informing that the value
-     * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will not be defined.
+     * Text to be put as placeholder of the textarea.
      */
-    maxLength?: number;
+    placeholder?: string;
     /**
-     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
-     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
+     * If true, the component will not be mutable, meaning the user can not edit the control.
      */
-    autocomplete?: string;
+    readOnly?: 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.
+     * Number of rows of the textarea.
      */
-    margin?: Space$3 | Margin$3;
+    rows?: number;
     /**
      * Size of the component.
      */
@@ -3217,19 +3229,22 @@ type Props$5 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
+     */
+    value?: string;
+    /**
+     * Defines the textarea's ability to resize vertically. It can be:
+     *    - 'auto': The textarea grows or shrinks automatically in order to fit the content.
+     *    - 'manual': The height of the textarea is enabled to be manually modified.
+     *    - 'none': The textarea has a fixed height and can't be modified.
+     */
+    verticalGrow?: "auto" | "manual" | "none";
 };
 declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
-type Space$2 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$2 = {
-    top?: Space$2;
-    bottom?: Space$2;
-    left?: Space$2;
-    right?: Space$2;
-};
-type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type Action = {
+type Action$1 = {
     /**
      * This function will be called when the user clicks the action.
      */
@@ -3237,7 +3252,7 @@ type Action = {
     /**
      * Icon to be placed in the action..
      */
-    icon: string | SVG$2;
+    icon: string | SVG;
     /**
      * Text representing advisory information related
      * to the button's action. Under the hood, this prop also serves
@@ -3273,7 +3288,7 @@ type Props$4 = {
     /**
      * Action to be shown in the input.
      */
-    action?: Action;
+    action?: Action$1;
     /**
      * If true, the input will have an action to clear the entered value.
      */
@@ -3379,7 +3394,7 @@ type Props$4 = {
      * 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$2 | Margin$2;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -3388,27 +3403,78 @@ type Props$4 = {
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the textInput element when no `label` is provided.
+     */
+    ariaLabel?: string;
 };
 declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
-type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$1 = {
-    top?: Space$1;
-    bottom?: Space$1;
-    left?: Space$1;
-    right?: Space$1;
+type Action = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
+    icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
+    label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
+    onClick: () => void;
 };
-type SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type OptionIcon = {
+type CommonProps$1 = {
     /**
-     * String with the option display value.
+     * Tertiary button which performs a custom action, specified by the user.
      */
-    label?: never;
+    action?: Action;
+    /**
+     * Message to be displayed as a toast.
+     */
+    message: string;
+};
+type DefaultToast = CommonProps$1 & {
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the 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;
+};
+type LoadingToast = CommonProps$1 & {
+    loading: boolean;
+};
+type SemanticToast = CommonProps$1 & {
+    /**
+     * Flag that allows to hide the semantic icon of the toast.
+     */
+    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;
+};
+declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react_jsx_runtime.JSX.Element;
+type OptionIcon = {
     /**
      * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
-    icon: string | SVG$1;
+    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.
@@ -3417,13 +3483,13 @@ type OptionIcon = {
 };
 type OptionLabel = {
     /**
-     * String with the option display value.
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
-    label: string;
+    icon?: string | SVG;
     /**
-     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
+     * String with the option display value.
      */
-    icon?: string | SVG$1;
+    label: string;
     /**
      * Value for the HTML properties title and aria-label.
      * When a label is defined, this prop can not be use.
@@ -3431,6 +3497,10 @@ type OptionLabel = {
     title?: never;
 };
 type Option = {
+    /**
+     * If true, the option will be disabled.
+     */
+    disabled?: boolean;
     /**
      * Number with the option inner value.
      */
@@ -3438,119 +3508,103 @@ 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$1;
+    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;
+    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: React.ReactNode;
+    position?: "bottom" | "top" | "left" | "right";
 };
-declare const DxcTooltip: ({ position, label, children }: Props$2) => JSX.Element;
+declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
 type Props$1 = {
-    as?: keyof HTMLElementTagNameMap;
+    as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
+    children: ReactNode;
+    color?: string;
     display?: "inline" | "block";
-    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
-    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
+    fontFamily?: string;
+    fontSize?: string;
     fontStyle?: "italic" | "normal";
-    fontWeight?: "300" | "400" | "600" | "700";
-    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
-    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
     textAlign?: "left" | "center" | "right";
-    color?: string;
     textDecoration?: "none" | "underline" | "line-through";
     textOverflow?: "clip" | "ellipsis" | "unset";
     whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
-    children: React.ReactNode;
 };
-declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: Props$1) => JSX.Element;
+declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type StepProps = {
     /**
      * Step label.
@@ -3599,41 +3653,41 @@ type Props = {
      * 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 | Margin;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute that is given to all the steps.
      */
     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;
@@ -3641,81 +3695,34 @@ 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;
-    };
-    alert: {
-        titleFontFamily: string;
-        titleFontColor: string;
-        titleFontSize: string;
-        titleFontStyle: string;
-        titleFontWeight: string;
-        titleTextTransform: string;
-        titlePaddingRight: string;
-        titlePaddingLeft: string;
-        inlineTextFontFamily: string;
-        inlineTextFontColor: string;
-        inlineTextFontSize: string;
-        inlineTextFontStyle: string;
-        inlineTextFontWeight: string;
-        inlineTextPaddingLeft: string;
-        inlineTextPaddingRight: string;
-        contentPaddingLeft: string;
-        contentPaddingRight: string;
-        contentPaddingTop: string;
-        contentPaddingBottom: string;
-        borderRadius: string;
-        borderStyle: string;
-        borderThickness: string;
-        infoBorderColor: string;
-        successBorderColor: string;
-        warningBorderColor: string;
-        errorBorderColor: string;
-        iconSize: string;
-        iconPaddingLeft: string;
-        iconPaddingRight: string;
-        infoIconColor: string;
-        successIconColor: string;
-        warningIconColor: string;
+        accordionSeparatorBorderColor: string;
+        accordionSeparatorBorderThickness: string;
+        accordionSeparatorBorderStyle: string;
+    };
+    alert: {
+        errorBackgroundColor: string;
         errorIconColor: string;
+        fontColor: string;
+        fontFamily: string;
+        fontSize: string;
+        fontStyle: string;
+        fontWeight: string;
+        iconSize: string;
         infoBackgroundColor: string;
+        infoIconColor: string;
+        modalBackgroundColor: string;
+        modalTitleFontSize: string;
+        modalTitleFontWeight: string;
+        overlayColor: string;
         successBackgroundColor: string;
+        successIconColor: string;
         warningBackgroundColor: string;
-        errorBackgroundColor: string;
-        hoverActionBackgroundColor: string;
-        activeActionBackgroundColor: string;
-        focusActionBorderColor: string;
-        overlayColor: string;
-    };
-    box: {
-        backgroundColor: string;
-        borderRadius: string;
-        borderThickness: string;
-        borderStyle: string;
-        borderColor: string;
-        noneShadowDepthShadowOffsetX: string;
-        noneShadowDepthShadowOffsetY: string;
-        noneShadowDepthShadowBlur: string;
-        noneShadowDepthShadowSpread: string;
-        noneShadowDepthShadowColor: string;
-        oneShadowDepthShadowOffsetX: string;
-        oneShadowDepthShadowOffsetY: string;
-        oneShadowDepthShadowBlur: string;
-        oneShadowDepthShadowSpread: string;
-        oneShadowDepthShadowColor: string;
-        twoShadowDepthShadowOffsetX: string;
-        twoShadowDepthShadowOffsetY: string;
-        twoShadowDepthShadowBlur: string;
-        twoShadowDepthShadowSpread: string;
-        twoShadowDepthShadowColor: string;
+        warningIconColor: string;
     };
     bulletedList: {
         fontColor: string;
@@ -3960,6 +3967,53 @@ declare const componentTokens: {
         iconColor: string;
         iconSize: string;
     };
+    dataGrid: {
+        rowSeparatorThickness: string;
+        rowSeparatorStyle: string;
+        rowSeparatorColor: string;
+        dataBackgroundColor: string;
+        dataFontFamily: string;
+        dataFontSize: string;
+        dataFontStyle: string;
+        dataFontWeight: string;
+        dataFontColor: string;
+        dataFontTextTransform: string;
+        dataPaddingRight: string;
+        dataPaddingLeft: string;
+        dataRowHeight: number;
+        dataTextLineHeight: string;
+        headerBackgroundColor: string;
+        headerBorderRadius: string;
+        headerFontFamily: string;
+        headerFontSize: string;
+        headerFontStyle: string;
+        headerFontWeight: string;
+        headerFontColor: string;
+        headerFontTextTransform: string;
+        headerPaddingRight: string;
+        headerPaddingLeft: string;
+        headerRowHeight: number;
+        headerTextLineHeight: string;
+        headerCheckboxBackgroundColorChecked: string;
+        headerCheckboxHoverBackgroundColorChecked: string;
+        headerCheckboxBorderColor: string;
+        headerCheckboxHoverBorderColor: string;
+        headerCheckboxCheckColor: string;
+        summaryRowHeight: number;
+        focusColor: string;
+        scrollBarThumbColor: string;
+        scrollBarTrackColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
+    };
     dateInput: {
         pickerBackgroundColor: string;
         pickerFontColor: string;
@@ -3994,15 +4048,8 @@ declare const componentTokens: {
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconSize: string;
-        closeIconTopPosition: string;
-        closeIconRightPosition: string;
         closeIconBackgroundColor: string;
-        closeIconBorderColor: string;
         closeIconColor: string;
-        closeIconBorderThickness: string;
-        closeIconBorderStyle: string;
-        closeIconBorderRadius: string;
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
@@ -4066,7 +4113,7 @@ declare const componentTokens: {
         helperTextFontColor: string;
         dropLabelFontColor: string;
         disabledLabelFontColor: string;
-        disabledHelperTextFontcolor: string;
+        disabledHelperTextFontColor: string;
         disabledDropLabelFontColor: string;
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
@@ -4137,15 +4184,15 @@ declare const componentTokens: {
     };
     header: {
         backgroundColor: string;
-        hamburguerFocusColor: string;
-        hamburguerFontFamily: string;
-        hamburguerFontStyle: string;
-        hamburguerFontColor: string;
-        hamburguerFontSize: string;
-        hamburguerFontWeight: string;
-        hamburguerTextTransform: string;
-        hamburguerIconColor: string;
-        hamburguerHoverColor: string;
+        hamburgerFocusColor: string;
+        hamburgerFontFamily: string;
+        hamburgerFontStyle: string;
+        hamburgerFontColor: string;
+        hamburgerFontSize: string;
+        hamburgerFontWeight: string;
+        hamburgerTextTransform: string;
+        hamburgerIconColor: string;
+        hamburgerHoverColor: string;
         logo: string;
         logoResponsive: string;
         logoHeight: string;
@@ -4659,23 +4706,6 @@ declare const componentTokens: {
         focusOutline: string;
         scrollButtonsWidth: string;
     };
-    tag: {
-        fontFamily: string;
-        fontColor: string;
-        fontSize: string;
-        fontStyle: string;
-        fontWeight: string;
-        labelPaddingTop: string;
-        labelPaddingBottom: string;
-        labelPaddingLeft: string;
-        labelPaddingRight: string;
-        height: string;
-        iconColor: string;
-        iconSectionWidth: string;
-        iconHeight: string;
-        iconWidth: string;
-        focusColor: string;
-    };
     textarea: {
         fontFamily: string;
         enabledBorderColor: string;
@@ -4787,7 +4817,7 @@ declare const componentTokens: {
         labelFontColor: string;
         disabledLabelFontColor: string;
         helperTextFontColor: string;
-        disabledHelperTextFontcolor: string;
+        disabledHelperTextFontColor: string;
         unselectedBackgroundColor: string;
         unselectedHoverBackgroundColor: string;
         unselectedActiveBackgroundColor: string;
@@ -4896,6 +4926,7 @@ type OpinionatedTheme = {
     accordion: {
         accentColor: string;
         titleFontColor: string;
+        subLabelFontColor: string;
         assistiveTextFontColor: string;
     };
     alert: {
@@ -4903,9 +4934,6 @@ type OpinionatedTheme = {
         accentColor: string;
         overlayColor: string;
     };
-    box: {
-        baseColor: string;
-    };
     button: {
         baseColor: string;
         primaryFontColor: string;
@@ -4927,6 +4955,11 @@ type OpinionatedTheme = {
         fontColor: string;
         iconColor: string;
     };
+    dataGrid: {
+        baseColor: string;
+        headerFontColor: string;
+        cellFontColor: string;
+    };
     dateInput: {
         baseColor: string;
         selectedFontColor: string;
@@ -4955,7 +4988,7 @@ type OpinionatedTheme = {
         accentColor: string;
         fontColor: string;
         menuBaseColor: string;
-        hamburguerColor: string;
+        hamburgerColor: string;
         logo: string;
         logoResponsive: string;
         contentColor: string;
@@ -5020,10 +5053,6 @@ type OpinionatedTheme = {
     tabs: {
         baseColor: string;
     };
-    tag: {
-        fontColor: string;
-        iconColor: string;
-    };
     textarea: {
         fontColor: string;
         hoverBorderColor: string;
@@ -5045,22 +5074,20 @@ type OpinionatedTheme = {
     };
 };
 declare const defaultTranslatedComponentLabels: {
-    formFields: {
-        optionalLabel: string;
-        requiredSelectionErrorMessage: string;
-        requiredValueErrorMessage: string;
-        formatRequestedErrorMessage: string;
-        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
-        logoAlternativeText: string;
-    };
     applicationLayout: {
         visibilityToggleTitle: string;
     };
     alert: {
-        infoTitleText: string;
-        successTitleText: string;
-        warningTitleText: string;
-        errorTitleText: string;
+        previousMessageActionTitle: string;
+        nextMessageActionTitle: string;
+        closeAlertActionTitle: string;
+        closeMessageActionTitle: string;
+    };
+    calendar: {
+        daysShort: string[];
+        months: string[];
+        previousMonthTitle: string;
+        nextMonthTitle: string;
     };
     dateInput: {
         invalidDateErrorMessage: string;
@@ -5081,9 +5108,17 @@ declare const defaultTranslatedComponentLabels: {
     footer: {
         copyrightText: (year: number) => string;
     };
+    formFields: {
+        optionalLabel: string;
+        requiredSelectionErrorMessage: string;
+        requiredValueErrorMessage: string;
+        formatRequestedErrorMessage: string;
+        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
+        logoAlternativeText: string;
+    };
     header: {
         closeIcon: string;
-        hamburguerTitle: string;
+        hamburgerTitle: string;
     };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -5108,9 +5143,10 @@ declare const defaultTranslatedComponentLabels: {
         optionalItemLabelDefault: string;
     };
     select: {
-        noMatchesErrorMessage: string;
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
+        noMatchesErrorMessage: string;
+        selectAllLabel: string;
     };
     tabs: {
         scrollLeft: string;
@@ -5121,41 +5157,45 @@ declare const defaultTranslatedComponentLabels: {
         searchingMessage: string;
         fetchingDataErrorMessage: string;
     };
-    calendar: {
-        daysShort: string[];
-        months: string[];
-        previousMonthTitle: string;
-        nextMonthTitle: string;
+    toast: {
+        clearToastActionTitle: string;
     };
 };
 type TranslatedLabels = typeof defaultTranslatedComponentLabels;
-declare const HalstackContext: react.Context<DeepPartial<{
+/**
+ * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: Partial<T[P]>;
+};
+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;
@@ -5163,81 +5203,34 @@ declare const HalstackContext: react.Context<DeepPartial<{
         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: {
-        titleFontFamily: string;
-        titleFontColor: string;
-        titleFontSize: string;
-        titleFontStyle: string;
-        titleFontWeight: string;
-        titleTextTransform: string;
-        titlePaddingRight: string;
-        titlePaddingLeft: string;
-        inlineTextFontFamily: string;
-        inlineTextFontColor: string;
-        inlineTextFontSize: string;
-        inlineTextFontStyle: string;
-        inlineTextFontWeight: string;
-        inlineTextPaddingLeft: string;
-        inlineTextPaddingRight: string;
-        contentPaddingLeft: string;
-        contentPaddingRight: string;
-        contentPaddingTop: string;
-        contentPaddingBottom: string;
-        borderRadius: string;
-        borderStyle: string;
-        borderThickness: string;
-        infoBorderColor: string;
-        successBorderColor: string;
-        warningBorderColor: string;
-        errorBorderColor: string;
-        iconSize: string;
-        iconPaddingLeft: string;
-        iconPaddingRight: string;
-        infoIconColor: string;
-        successIconColor: string;
-        warningIconColor: string;
+        errorBackgroundColor: string;
         errorIconColor: string;
+        fontColor: string;
+        fontFamily: string;
+        fontSize: string;
+        fontStyle: string;
+        fontWeight: string;
+        iconSize: string;
         infoBackgroundColor: string;
+        infoIconColor: string;
+        modalBackgroundColor: string;
+        modalTitleFontSize: string;
+        modalTitleFontWeight: string;
+        overlayColor: string;
         successBackgroundColor: string;
+        successIconColor: string;
         warningBackgroundColor: string;
-        errorBackgroundColor: string;
-        hoverActionBackgroundColor: string;
-        activeActionBackgroundColor: string;
-        focusActionBorderColor: string;
-        overlayColor: string;
-    };
-    box: {
-        backgroundColor: string;
-        borderRadius: string;
-        borderThickness: string;
-        borderStyle: string;
-        borderColor: string;
-        noneShadowDepthShadowOffsetX: string;
-        noneShadowDepthShadowOffsetY: string;
-        noneShadowDepthShadowBlur: string;
-        noneShadowDepthShadowSpread: string;
-        noneShadowDepthShadowColor: string;
-        oneShadowDepthShadowOffsetX: string;
-        oneShadowDepthShadowOffsetY: string;
-        oneShadowDepthShadowBlur: string;
-        oneShadowDepthShadowSpread: string;
-        oneShadowDepthShadowColor: string;
-        twoShadowDepthShadowOffsetX: string;
-        twoShadowDepthShadowOffsetY: string;
-        twoShadowDepthShadowBlur: string;
-        twoShadowDepthShadowSpread: string;
-        twoShadowDepthShadowColor: string;
+        warningIconColor: string;
     };
     bulletedList: {
         fontColor: string;
@@ -5482,6 +5475,53 @@ declare const HalstackContext: react.Context<DeepPartial<{
         iconColor: string;
         iconSize: string;
     };
+    dataGrid: {
+        rowSeparatorThickness: string;
+        rowSeparatorStyle: string;
+        rowSeparatorColor: string;
+        dataBackgroundColor: string;
+        dataFontFamily: string;
+        dataFontSize: string;
+        dataFontStyle: string;
+        dataFontWeight: string;
+        dataFontColor: string;
+        dataFontTextTransform: string;
+        dataPaddingRight: string;
+        dataPaddingLeft: string;
+        dataRowHeight: number;
+        dataTextLineHeight: string;
+        headerBackgroundColor: string;
+        headerBorderRadius: string;
+        headerFontFamily: string;
+        headerFontSize: string;
+        headerFontStyle: string;
+        headerFontWeight: string;
+        headerFontColor: string;
+        headerFontTextTransform: string;
+        headerPaddingRight: string;
+        headerPaddingLeft: string;
+        headerRowHeight: number;
+        headerTextLineHeight: string;
+        headerCheckboxBackgroundColorChecked: string;
+        headerCheckboxHoverBackgroundColorChecked: string;
+        headerCheckboxBorderColor: string;
+        headerCheckboxHoverBorderColor: string;
+        headerCheckboxCheckColor: string;
+        summaryRowHeight: number;
+        focusColor: string;
+        scrollBarThumbColor: string;
+        scrollBarTrackColor: string;
+        actionIconColor: string;
+        disabledActionIconColor: string;
+        hoverActionIconColor: string;
+        focusActionIconColor: string;
+        activeActionIconColor: string;
+        actionBackgroundColor: string;
+        disabledActionBackgroundColor: string;
+        hoverActionBackgroundColor: string;
+        focusActionBorderColor: string;
+        activeActionBackgroundColor: string;
+    };
     dateInput: {
         pickerBackgroundColor: string;
         pickerFontColor: string;
@@ -5516,15 +5556,8 @@ declare const HalstackContext: react.Context<DeepPartial<{
     dialog: {
         overlayColor: string;
         backgroundColor: string;
-        closeIconSize: string;
-        closeIconTopPosition: string;
-        closeIconRightPosition: string;
         closeIconBackgroundColor: string;
-        closeIconBorderColor: string;
         closeIconColor: string;
-        closeIconBorderThickness: string;
-        closeIconBorderStyle: string;
-        closeIconBorderRadius: string;
         boxShadowOffsetX: string;
         boxShadowOffsetY: string;
         boxShadowBlur: string;
@@ -5588,7 +5621,7 @@ declare const HalstackContext: react.Context<DeepPartial<{
         helperTextFontColor: string;
         dropLabelFontColor: string;
         disabledLabelFontColor: string;
-        disabledHelperTextFontcolor: string;
+        disabledHelperTextFontColor: string;
         disabledDropLabelFontColor: string;
         focusDropBorderColor: string;
         disabledDropBorderColor: string;
@@ -5659,15 +5692,15 @@ declare const HalstackContext: react.Context<DeepPartial<{
     };
     header: {
         backgroundColor: string;
-        hamburguerFocusColor: string;
-        hamburguerFontFamily: string;
-        hamburguerFontStyle: string;
-        hamburguerFontColor: string;
-        hamburguerFontSize: string;
-        hamburguerFontWeight: string;
-        hamburguerTextTransform: string;
-        hamburguerIconColor: string;
-        hamburguerHoverColor: string;
+        hamburgerFocusColor: string;
+        hamburgerFontFamily: string;
+        hamburgerFontStyle: string;
+        hamburgerFontColor: string;
+        hamburgerFontSize: string;
+        hamburgerFontWeight: string;
+        hamburgerTextTransform: string;
+        hamburgerIconColor: string;
+        hamburgerHoverColor: string;
         logo: string;
         logoResponsive: string;
         logoHeight: string;
@@ -6181,23 +6214,6 @@ declare const HalstackContext: react.Context<DeepPartial<{
         focusOutline: string;
         scrollButtonsWidth: string;
     };
-    tag: {
-        fontFamily: string;
-        fontColor: string;
-        fontSize: string;
-        fontStyle: string;
-        fontWeight: string;
-        labelPaddingTop: string;
-        labelPaddingBottom: string;
-        labelPaddingLeft: string;
-        labelPaddingRight: string;
-        height: string;
-        iconColor: string;
-        iconSectionWidth: string;
-        iconHeight: string;
-        iconWidth: string;
-        focusColor: string;
-    };
     textarea: {
         fontFamily: string;
         enabledBorderColor: string;
@@ -6309,7 +6325,7 @@ declare const HalstackContext: react.Context<DeepPartial<{
         labelFontColor: string;
         disabledLabelFontColor: string;
         helperTextFontColor: string;
-        disabledHelperTextFontcolor: string;
+        disabledHelperTextFontColor: string;
         unselectedBackgroundColor: string;
         unselectedHoverBackgroundColor: string;
         unselectedActiveBackgroundColor: string;
@@ -6412,24 +6428,22 @@ declare const HalstackContext: react.Context<DeepPartial<{
         separatorColor: string;
         focusColor: string;
     };
-}>>;
-declare const HalstackLanguageContext: react.Context<DeepPartial<{
-    formFields: {
-        optionalLabel: string;
-        requiredSelectionErrorMessage: string;
-        requiredValueErrorMessage: string;
-        formatRequestedErrorMessage: string;
-        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
-        logoAlternativeText: string;
-    };
+}>;
+declare const HalstackLanguageContext: react.Context<{
     applicationLayout: {
         visibilityToggleTitle: string;
     };
     alert: {
-        infoTitleText: string;
-        successTitleText: string;
-        warningTitleText: string;
-        errorTitleText: string;
+        previousMessageActionTitle: string;
+        nextMessageActionTitle: string;
+        closeAlertActionTitle: string;
+        closeMessageActionTitle: string;
+    };
+    calendar: {
+        daysShort: string[];
+        months: string[];
+        previousMonthTitle: string;
+        nextMonthTitle: string;
     };
     dateInput: {
         invalidDateErrorMessage: string;
@@ -6450,9 +6464,17 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
     footer: {
         copyrightText: (year: number) => string;
     };
+    formFields: {
+        optionalLabel: string;
+        requiredSelectionErrorMessage: string;
+        requiredValueErrorMessage: string;
+        formatRequestedErrorMessage: string;
+        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
+        logoAlternativeText: string;
+    };
     header: {
         closeIcon: string;
-        hamburguerTitle: string;
+        hamburgerTitle: string;
     };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
@@ -6477,9 +6499,10 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
         optionalItemLabelDefault: string;
     };
     select: {
-        noMatchesErrorMessage: string;
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
+        noMatchesErrorMessage: string;
+        selectAllLabel: string;
     };
     tabs: {
         scrollLeft: string;
@@ -6490,26 +6513,24 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
         searchingMessage: string;
         fetchingDataErrorMessage: string;
     };
-    calendar: {
-        daysShort: string[];
-        months: string[];
-        previousMonthTitle: string;
-        nextMonthTitle: string;
+    toast: {
+        clearToastActionTitle: string;
     };
-}>>;
-/**
- * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
- * This is an extension of the already existing Partial type, which only allows one level of partiality.
- */
-type DeepPartial<T> = {
-    [P in keyof T]?: Partial<T[P]>;
-};
+}>;
 type HalstackProviderPropsType = {
     theme?: DeepPartial<OpinionatedTheme>;
     advancedTheme?: DeepPartial<AdvancedTheme>;
     labels?: DeepPartial<TranslatedLabels>;
-    children: React.ReactNode;
+    children: ReactNode;
 };
 declare const HalstackProvider: ({ theme, advancedTheme, labels, children }: HalstackProviderPropsType) => JSX.Element;
-export { DxcAccordion, DxcAccordionGroup, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBox, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, 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, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider };
+declare function useToast(): {
+    default: (toast: DefaultToast) => (() => void) | undefined;
+    success: (toast: SemanticToast) => (() => void) | undefined;
+    warning: (toast: SemanticToast) => (() => void) | undefined;
+    info: (toast: SemanticToast) => (() => void) | undefined;
+    loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
+};
+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, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };