@dxc-technology/halstack-react 0.0.0-cf70c89 → 0.0.0-d004266

package/dist/index.d.mts

@@ -1,17 +1,18 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode } 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$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$j = React.ReactNode & React.SVGProps<SVGSVGElement>;
+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 = ReactNode & SVGProps<SVGSVGElement>;
+
 type Props$K = {
     /**
      * The panel label.
@@ -30,7 +31,7 @@ type Props$K = {
     /**
      * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
      */
-    icon?: string | SVG$j;
+    icon?: string | SVG;
     /**
      * Assistive text to be placed on the right side of the panel.
      */
@@ -48,12 +49,12 @@ type Props$K = {
      * The expanded panel of the accordion. This area can be used to render
      * custom content.
      */
-    children: React.ReactNode;
+    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$t | Margin$o;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute.
      */
@@ -62,14 +63,6 @@ type Props$K = {
 
 declare const DxcAccordion: ({ label, defaultIsExpanded, isExpanded, icon, assistiveText, disabled, onChange, children, margin, tabIndex, }: Props$K) => JSX.Element;
 
-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 SVG$i = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type AccordionPropsType = {
     /**
      * The panel label.
@@ -78,7 +71,7 @@ type AccordionPropsType = {
     /**
      * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
      */
-    icon?: string | SVG$i;
+    icon?: string | SVG;
     /**
      * Assistive text to be placed on the right side of the panel.
      */
@@ -91,7 +84,7 @@ type AccordionPropsType = {
      * The expanded panel of the accordion. This area can be used to render
      * custom content.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type Props$J = {
     /**
@@ -115,11 +108,11 @@ 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$s | Margin$n;
+    margin?: Space$1 | Margin;
     /**
      * Customized accordion(s) that are allowed inside an Accordion Group.
      */
-    children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
+    children: ReactElement<AccordionPropsType>[] | ReactElement<AccordionPropsType>;
 };
 
 declare const DxcAccordionGroup: {
@@ -127,68 +120,44 @@ declare const DxcAccordionGroup: {
     Accordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
 };
 
-type Space$r = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$m = {
-    top?: Space$r;
-    bottom?: Space$r;
-    left?: Space$r;
-    right?: Space$r;
+type Action$2 = {
+    icon?: string | SVG;
+    label: string;
+    onClick: () => void;
 };
-type Props$I = {
-    /**
-     * Uses on of the available alert types.
-     */
-    type?: "info" | "confirm" | "warning" | "error";
-    /**
-     * 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.
-     */
-    mode?: "inline" | "modal";
-    /**
-     * Text to display after icon and alert type and before content.
-     */
-    inlineText?: string;
-    /**
-     * This function will be called when the user clicks the close button. If there is no function we should close the alert by default.
-     */
+type Message = {
     onClose?: () => void;
-    /**
-     * The details section of the alert. Can be used to render custom content in this area.
-     */
-    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$r | Margin$m;
-    /**
-     * Size of the component.
-     */
-    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
-    /**
-     * Value of the tabindex attribute applied to the close button.
-     */
-    tabIndex?: number;
+    text: ReactNode;
+};
+type CommonProps$8 = {
+    closable?: boolean;
+    primaryAction?: Action$2;
+    secondaryAction?: Action$2;
+    semantic?: "error" | "info" | "success" | "warning";
+    title: string;
 };
+type ModeSpecificProps = {
+    message?: Message | Message[];
+    mode?: "inline" | "banner";
+} | {
+    message: Required<Message>;
+    mode: "modal";
+};
+type Props$I = 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$I): react_jsx_runtime.JSX.Element;
 
-type SVG$h = 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 = {
     /**
@@ -203,11 +172,11 @@ type SidenavGroupPropsType = {
     /**
      * Material Symbol name or SVG icon to be displayed next to the title of the group.
      */
-    icon?: string | SVG$h;
+    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 = {
     /**
@@ -221,7 +190,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$h;
+    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,
@@ -231,11 +200,11 @@ 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.
      */
@@ -245,85 +214,14 @@ type Props$H = {
     /**
      * 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$q = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type SVG$g = 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$g;
-    /**
-     * 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$q;
-    /**
-     * 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$p = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$l = {
-    top?: Space$p;
-    bottom?: Space$p;
-    left?: Space$p;
-    right?: Space$p;
-};
 type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type SVG$f = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Option$1 = {
     /**
      * Option display value.
@@ -332,7 +230,7 @@ type Option$1 = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$f;
+    icon?: string | SVG;
     /**
      * Option inner value.
      */
@@ -351,7 +249,7 @@ type Props$G = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$f;
+    icon?: string | SVG;
     /**
      * Whether the icon should appear after or before the label.
      */
@@ -382,7 +280,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$p | Margin$l;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -398,7 +296,6 @@ type Props$G = {
     title?: string;
 };
 
-type Space$o = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Props$F = {
     /**
      * Whether a contrast line should appear at the bottom of the header.
@@ -409,12 +306,12 @@ 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.
      */
@@ -422,7 +319,7 @@ type Props$F = {
     /**
      * Size of the bottom margin to be applied to the header.
      */
-    margin?: Space$o;
+    margin?: Space$1;
     /**
      * Value of the tabindex for all interactive elements, except those inside the
      * custom area.
@@ -430,13 +327,74 @@ 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 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?: ReactNode;
+    /**
+     * Size of the top margin to be applied to the footer.
+     */
+    margin?: Space$1;
+    /**
+     * 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 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.
@@ -445,29 +403,29 @@ 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: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
     Header: {
         ({ underlined, content, responsiveContent, onClick, margin, tabIndex, }: Props$F): JSX.Element;
         Dropdown: (props: react.ComponentProps<({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element>) => react_jsx_runtime.JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
     SideNav: {
         ({ title, children }: Props$H): JSX.Element;
         Section: ({ children }: SidenavSectionPropsType) => JSX.Element;
@@ -475,10 +433,9 @@ declare const DxcApplicationLayout: {
         Link: react.ForwardRefExoticComponent<SidenavLinkPropsType & react.RefAttributes<HTMLAnchorElement>>;
         Title: ({ children }: SidenavTitlePropsType) => JSX.Element;
     };
-    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
+    useResponsiveSidenavVisibility: () => ((_isSidenavVisible: boolean) => void) | null;
 };
 
-type SVG$e = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type ContextualProps = {
     /**
      * Text to be placed in the badge.
@@ -523,7 +480,7 @@ type CommonProps$7 = {
     /**
      *  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$e;
+    icon?: string | SVG;
     /**
      * Size of the component.
      */
@@ -657,7 +614,7 @@ type Props$D = {
     /**
      * Custom content inside the bleed.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
 declare const Bleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
@@ -700,7 +657,6 @@ type Props$C = {
 
 declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
 
-type SVG$d = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type IconProps = {
     /**
      * Defines the style of the bullet point in the list.
@@ -709,11 +665,11 @@ type IconProps = {
     /**
      * Icon to display as bullet.
      */
-    icon: string | SVG$d;
+    icon: string | SVG;
     /**
      * Text to be shown in the list.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type OtherProps = {
     /**
@@ -727,7 +683,7 @@ type OtherProps = {
     /**
      * Text to be shown in the list.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type Props$B = IconProps | OtherProps;
 
@@ -735,7 +691,7 @@ type BulletedListItemPropsType = {
     /**
      * Text to be shown in the list.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 
 declare const DxcBulletedList: {
@@ -743,14 +699,6 @@ 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$c = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Size$3 = {
     /**
      * Height of the component.
@@ -790,7 +738,7 @@ type Props$A = {
     /**
      * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$c;
+    icon?: string | SVG;
     /**
      * This function will be called when the user clicks the button.
      */
@@ -799,7 +747,7 @@ type Props$A = {
      * 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.
      */
@@ -812,12 +760,11 @@ type Props$A = {
 
 declare const DxcButton: ({ label, mode, semantic, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: Props$A) => 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$z = {
     /**
@@ -835,7 +782,7 @@ type Props$z = {
      * 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.
      */
@@ -858,7 +805,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$m | Size$2;
+    margin?: Space$1 | Size$2;
     /**
      * Value of the tabindex attribute applied when the component is clickable.
      */
@@ -870,18 +817,11 @@ type Props$z = {
     /**
      * 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$z) => 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$y = {
     /**
      * Initial state of the checkbox, only when it is uncontrolled.
@@ -932,7 +872,7 @@ type Props$y = {
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
      * in order to specify different margin sizes.
      */
-    margin?: Space$l | Margin$j;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -945,14 +885,6 @@ type Props$y = {
 
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & 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$b = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Props$x = {
     /**
      * Text to be placed on the chip.
@@ -961,11 +893,11 @@ type Props$x = {
     /**
      * Element or path used as icon to be placed after the chip label.
      */
-    suffixIcon?: string | SVG$b;
+    suffixIcon?: string | SVG;
     /**
      * Element or path used as icon to be placed before the chip label.
      */
-    prefixIcon?: string | SVG$b;
+    prefixIcon?: string | SVG;
     /**
      * This function will be called when the suffix is clicked.
      */
@@ -982,7 +914,7 @@ type Props$x = {
      * 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.
      */
@@ -991,12 +923,11 @@ type Props$x = {
 
 declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => JSX.Element;
 
-type SpacingValues = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Space$j = SpacingValues | {
-    top?: SpacingValues;
-    right?: SpacingValues;
-    bottom?: SpacingValues;
-    left?: SpacingValues;
+type Space = Space$1 | {
+    top?: Space$1;
+    right?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
 };
 type Inset$1 = {
     top?: string;
@@ -1065,7 +996,7 @@ type Props$w = {
     /**
      * 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.
@@ -1097,7 +1028,7 @@ type Props$w = {
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
      * in order to specify different margin sizes.
      */
-    margin?: Space$j;
+    margin?: Space;
     /**
      * Sets the max-height CSS property.
      *
@@ -1138,7 +1069,7 @@ type Props$w = {
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
      * in order to specify different margin sizes.
      */
-    padding?: Space$j;
+    padding?: Space;
     /**
      * Sets the position CSS property.
      *
@@ -1159,12 +1090,11 @@ type Props$w = {
     zIndex?: "auto" | number;
 };
 
-declare const DxcContainer: ({ display, width, height, overflow, ...props }: Props$w) => react_jsx_runtime.JSX.Element;
+declare function DxcContainer({ display, width, height, overflow, ...props }: Props$w): react_jsx_runtime.JSX.Element;
 
-type SVG$a = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type CommonItemProps = {
-    badge?: React.ReactElement;
-    icon?: string | SVG$a;
+    badge?: ReactElement;
+    icon?: string | SVG;
     label: string;
 };
 type Item = CommonItemProps & {
@@ -1186,21 +1116,13 @@ type Props$v = {
     items: (Item | GroupItem)[] | Section[];
 };
 
-declare const DxcContextualMenu: ({ items }: Props$v) => react_jsx_runtime.JSX.Element;
+declare function DxcContextualMenu({ items }: Props$v): 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;
-};
-type SVG$9 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type ActionCellsPropsType = {
     actions: ActionsPropsType;
 };
 type ActionsPropsType = Array<{
-    icon: string | SVG$9;
+    icon: string | SVG;
     title: string;
     onClick: () => void;
     disabled?: boolean;
@@ -1219,12 +1141,12 @@ type Props$u = {
      * The center section of the table. Can be used to render custom
      * content in this area.
      */
-    children: React.ReactNode;
+    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$i | Margin$h;
+    margin?: Space$1 | Margin;
     /**
      * Determines the visual style and layout
      * - "default": Default table size.
@@ -1253,7 +1175,7 @@ type GridColumn = {
     /**
      * Custom criteria for sorting the column.
      */
-    sortFn?: (_a: ReactNode, _b: ReactNode) => number;
+    sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
     /**
      * Whether the column is draggable or not.
      */
@@ -1421,13 +1343,6 @@ declare const DxcDataGrid: {
     ActionsCell: ({ actions }: ActionCellsPropsType) => 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 Props$s = {
     /**
      * Initial value of the input element, only when it is uncontrolled.
@@ -1519,7 +1434,7 @@ type Props$s = {
      * 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;
     /**
      * Size of the component.
      */
@@ -1536,7 +1451,7 @@ type Props$r = {
     /**
      * 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.
@@ -1558,7 +1473,7 @@ type Props$r = {
      * 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
@@ -1567,7 +1482,7 @@ type Props$r = {
     tabIndex?: number;
 };
 
-declare const DxcDialog: ({ isCloseVisible, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
+declare const DxcDialog: ({ closable, onCloseClick, children, overlay, onBackgroundClick, tabIndex, }: Props$r) => JSX.Element;
 
 type Props$q = {
     /**
@@ -1594,13 +1509,6 @@ declare const DxcDivider: ({ orientation, weight, color, decorative, }: Props$q)
 
 declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$G) => JSX.Element;
 
-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 FileData = {
     /**
      * Selected file.
@@ -1666,7 +1574,7 @@ type CommonProps$5 = {
      * 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;
     /**
      * Value of the tabindex attribute.
      */
@@ -1787,7 +1695,7 @@ type Props$o = CommonProps$4 & {
     /**
      * Custom content inside the flex container.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
 declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$o) => react_jsx_runtime.JSX.Element;
@@ -1846,7 +1754,7 @@ type GridItemProps = {
     /**
      * Custom content inside the grid container.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 type Props$n = GridItemProps & {
     /**
@@ -1910,13 +1818,6 @@ declare const DxcGrid: {
     Item: styled_components.StyledComponent<"div", any, GridItemProps, never>;
 };
 
-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 Props$m = {
     /**
      * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
@@ -1940,7 +1841,7 @@ type Props$m = {
      * 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;
 };
 
 declare const DxcHeading: ({ level, text, as, weight, margin }: Props$m) => JSX.Element;
@@ -2004,14 +1905,14 @@ type Props$l = {
     /**
      * This function will be called when the image is loaded.
      */
-    onLoad?: React.ReactEventHandler<HTMLImageElement>;
+    onLoad?: ReactEventHandler<HTMLImageElement>;
     /**
      * This function will be called when the image fails to load.
      */
-    onError?: React.ReactEventHandler<HTMLImageElement>;
+    onError?: ReactEventHandler<HTMLImageElement>;
 };
 
-declare const DxcImage: ({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l) => react_jsx_runtime.JSX.Element;
+declare function DxcImage({ alt, caption, lazyLoading, src, srcSet, sizes, width, height, objectFit, objectPosition, onLoad, onError, }: Props$l): react_jsx_runtime.JSX.Element;
 
 type Props$k = {
     /**
@@ -2045,19 +1946,11 @@ type Props$k = {
     /**
      * Custom content inside the inset.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
 declare const Inset: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$k) => react_jsx_runtime.JSX.Element;
 
-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 SVG$8 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type LinkProps = {
     /**
      * If true, the link is disabled.
@@ -2070,7 +1963,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.
      */
@@ -2096,7 +1989,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$e | Margin$d;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex.
      */
@@ -2105,7 +1998,6 @@ type LinkProps = {
 
 declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-type SVG$7 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type TabProps$1 = {
     /**
      * Whether the tab is active or not.
@@ -2122,7 +2014,7 @@ type TabProps$1 = {
     /**
      * 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.
@@ -2144,7 +2036,7 @@ type Props$j = {
     /**
      * Contains one or more DxcNavTabs.Tab.
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Value of the tabindex attribute applied to each tab.
      */
@@ -2156,13 +2048,6 @@ declare const DxcNavTabs: {
     Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-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$i = {
     /**
      * Text to be placed above the number.
@@ -2271,7 +2156,7 @@ type Props$i = {
      * 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.
      */
@@ -2324,17 +2209,10 @@ type Props$h = {
 
 declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
 
-declare const DxcParagraph: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
+declare function DxcParagraph({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
 
-type Space$c = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin$b = {
-    top?: Space$c;
-    bottom?: Space$c;
-    left?: Space$c;
-    right?: Space$c;
-};
 type Props$g = {
     /**
      * Text to be placed above the password input.
@@ -2424,7 +2302,7 @@ type Props$g = {
      * 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$c | Margin$b;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -2437,12 +2315,11 @@ type Props$g = {
 
 declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
 
-type Space$b = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Size$1 = {
-    top?: Space$b;
-    bottom?: Space$b;
-    left?: Space$b;
-    right?: Space$b;
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
 };
 type Props$f = {
     /**
@@ -2471,7 +2348,7 @@ type Props$f = {
      * an object with 'top', 'bottom', 'left' and 'right' properties
      * in order to specify different margin sizes.
      */
-    margin?: Space$b | Size$1;
+    margin?: Space$1 | Size$1;
 };
 
 declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, }: Props$f) => JSX.Element;
@@ -2598,18 +2475,11 @@ type RadioGroupProps = {
 
 declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 
-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;
-};
 type Column = {
     /**
      * Column display value.
      */
-    displayValue: React.ReactNode;
+    displayValue: ReactNode;
     /**
      * Boolean value to indicate whether the column is sortable or not.
      */
@@ -2619,7 +2489,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.
@@ -2641,7 +2511,7 @@ type CommonProps$3 = {
      * 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.
      */
@@ -2703,14 +2573,6 @@ declare const DxcResultsetTable: {
     ActionsCell: ({ actions }: ActionCellsPropsType) => 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$6 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type ListOptionGroupType = {
     /**
      * Label of the group to be shown in the select's listbox.
@@ -2728,7 +2590,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$6;
+    icon?: string | SVG;
     /**
      * Label of the option to be shown in the select's listbox.
      */
@@ -2794,7 +2656,7 @@ type CommonProps$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.
      */
-    margin?: Space$9 | Margin$9;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -2880,13 +2742,6 @@ type Props$c = SingleSelect | MultipleSelect;
 
 declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & 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.
@@ -2955,7 +2810,7 @@ type Props$b = {
      * 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$8 | Margin$8;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -2964,13 +2819,6 @@ type Props$b = {
 
 declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & 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 = {
     /**
      * Text to be placed inside the spinner.
@@ -2993,7 +2841,7 @@ type Props$a = {
      * 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$7 | Margin$7;
+    margin?: Space$1 | Margin;
 };
 
 declare const DxcSpinner: ({ label, value, showValue, mode, margin }: Props$a) => JSX.Element;
@@ -3017,13 +2865,6 @@ type Props$9 = {
 
 declare const DxcStatusLight: ({ mode, label, size }: Props$9) => 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 = {
     /**
      * Initial state of the switch, only when it is uncontrolled.
@@ -3068,7 +2909,7 @@ type Props$8 = {
      * 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;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -3086,14 +2927,6 @@ declare const DxcTable: {
     ActionsCell: ({ actions }: ActionCellsPropsType) => 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$5 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
@@ -3116,7 +2949,7 @@ type TabLabelProps = TabCommonProps & {
     /**
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
-    icon?: string | SVG$5;
+    icon?: string | SVG;
 };
 type TabIconProps = TabCommonProps & {
     /**
@@ -3126,17 +2959,17 @@ type TabIconProps = TabCommonProps & {
     /**
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
-    icon: string | SVG$5;
+    icon: string | SVG;
 };
 type TabProps = {
     defaultActive?: boolean;
     active?: boolean;
-    icon?: string | SVG$5;
-    label?: string;
+    icon?: string | SVG;
+    label: string;
     title?: string;
     disabled?: boolean;
     notificationNumber?: boolean | number;
-    children: React.ReactNode;
+    children: ReactNode;
     onClick?: () => void;
     onHover?: () => void;
 };
@@ -3167,12 +3000,12 @@ type LegacyProps = {
      * 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;
+    onTabHover?: (index: number | null) => void;
     /**
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
      */
-    margin?: Space$5 | Margin$5;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute applied to each tab.
      */
@@ -3187,7 +3020,7 @@ type NewProps = {
      * 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;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex attribute applied to each tab.
      */
@@ -3195,23 +3028,15 @@ type NewProps = {
     /**
      * Contains one or more DxcTabs.Tab.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 type Props$7 = LegacyProps & NewProps;
 
 declare const DxcTabs: {
-    ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): JSX.Element;
+    ({ defaultActiveTabIndex, activeTabIndex, tabs, onTabClick, onTabHover, margin, iconPosition, tabIndex, children, }: Props$7): false | react_jsx_runtime.JSX.Element;
     Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
-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$4 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type TagCommonProps = {
     /**
      * If defined, the tag will be displayed as an anchor, using this prop as "href".
@@ -3240,7 +3065,7 @@ type TagCommonProps = {
      * 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;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -3254,7 +3079,7 @@ type TagLabelProps = TagCommonProps & {
     /**
      * Material Symbol name or SVG element used as the icon that will be placed next to the label.
      */
-    icon?: string | SVG$4;
+    icon?: string | SVG;
     /**
      * Text to be placed next inside the tag.
      */
@@ -3264,7 +3089,7 @@ type TagIconProps = TagCommonProps & {
     /**
      * Material Symbol name or SVG element used as the icon that will be placed next to the label.
      */
-    icon: string | SVG$4;
+    icon: string | SVG;
     /**
      * Text to be placed next inside the tag.
      */
@@ -3277,13 +3102,6 @@ type Props$6 = TagLabelProps | TagIconProps;
  */
 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;
-};
 type Props$5 = {
     /**
      * Text to be placed above the textarea.
@@ -3403,7 +3221,7 @@ type Props$5 = {
      * 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$3 | Margin$3;
+    margin?: Space$1 | Margin;
     /**
      * Size of the component.
      */
@@ -3416,14 +3234,6 @@ type Props$5 = {
 
 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$3 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Action$1 = {
     /**
      * This function will be called when the user clicks the action.
@@ -3432,7 +3242,7 @@ type Action$1 = {
     /**
      * Icon to be placed in the action..
      */
-    icon: string | SVG$3;
+    icon: string | SVG;
     /**
      * Text representing advisory information related
      * to the button's action. Under the hood, this prop also serves
@@ -3574,7 +3384,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.
      */
@@ -3587,9 +3397,8 @@ type Props$4 = {
 
 declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
 
-type SVG$2 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type Action = {
-    icon?: string | SVG$2;
+    icon?: string | SVG;
     label: string;
     onClick: () => void;
 };
@@ -3598,7 +3407,7 @@ type CommonProps$1 = {
     message: string;
 };
 type DefaultToast = CommonProps$1 & {
-    icon?: string | SVG$2;
+    icon?: string | SVG;
 };
 type LoadingToast = CommonProps$1 & {
     loading: boolean;
@@ -3608,19 +3417,11 @@ type SemanticToast = CommonProps$1 & {
 };
 type ToastsQueuePropsType = {
     duration?: number;
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
 declare const DxcToastsQueue: ({ children, duration }: ToastsQueuePropsType) => react_jsx_runtime.JSX.Element;
 
-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 SVG$1 = React.ReactNode & React.SVGProps<SVGSVGElement>;
 type OptionIcon = {
     /**
      * String with the option display value.
@@ -3629,7 +3430,7 @@ 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;
     /**
      * Value for the HTML properties title and aria-label.
      * When a label is defined, this prop can not be use.
@@ -3644,7 +3445,7 @@ type OptionLabel = {
     /**
      * Material Symbols icon or SVG element. Icon and label can't be used at same time.
      */
-    icon?: string | SVG$1;
+    icon?: string | SVG;
     /**
      * Value for the HTML properties title and aria-label.
      * When a label is defined, this prop can not be use.
@@ -3678,7 +3479,7 @@ type CommonProps = {
      * 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$1;
+    margin?: Space$1 | Margin;
     /**
      * Value of the tabindex.
      */
@@ -3736,17 +3537,19 @@ type Props$2 = {
     /**
      * Text to be displayed inside the tooltip.
      */
-    label: string;
+    label?: string;
     /**
      * Content in which the Tooltip will be displayed.
      */
-    children: React.ReactNode;
+    children: ReactNode;
 };
 
 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";
@@ -3755,23 +3558,13 @@ type Props$1 = {
     letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
     lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
     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.
@@ -3820,7 +3613,7 @@ 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.
      */
@@ -3829,14 +3622,6 @@ type Props = {
 
 declare const DxcWizard: ({ mode, defaultCurrentStep, currentStep, onStepClick, steps, margin, tabIndex, }: Props) => JSX.Element;
 
-declare const useToast: () => {
-    default: (toast: DefaultToast) => () => void;
-    success: (toast: SemanticToast) => () => void;
-    warning: (toast: SemanticToast) => () => void;
-    info: (toast: SemanticToast) => () => void;
-    loading: (toast: LoadingToast) => () => void;
-};
-
 declare const componentTokens: {
     accordion: {
         backgroundColor: string;
@@ -3882,47 +3667,24 @@ declare const componentTokens: {
         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;
+        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;
+        warningIconColor: string;
     };
     bulletedList: {
         fontColor: string;
@@ -5305,10 +5067,10 @@ declare const defaultTranslatedComponentLabels: {
         visibilityToggleTitle: string;
     };
     alert: {
-        infoTitleText: string;
-        successTitleText: string;
-        warningTitleText: string;
-        errorTitleText: string;
+        previousMessageActionTitle: string;
+        nextMessageActionTitle: string;
+        closeAlertActionTitle: string;
+        closeMessageActionTitle: string;
     };
     calendar: {
         daysShort: string[];
@@ -5389,7 +5151,14 @@ declare const defaultTranslatedComponentLabels: {
 };
 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;
@@ -5434,47 +5203,24 @@ declare const HalstackContext: react.Context<DeepPartial<{
         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;
+        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;
+        warningIconColor: string;
     };
     bulletedList: {
         fontColor: string;
@@ -6696,16 +6442,16 @@ declare const HalstackContext: react.Context<DeepPartial<{
         separatorColor: string;
         focusColor: string;
     };
-}>>;
-declare const HalstackLanguageContext: react.Context<DeepPartial<{
+}>;
+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[];
@@ -6783,20 +6529,21 @@ declare const HalstackLanguageContext: react.Context<DeepPartial<{
     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;
 
+declare const 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, DxcAccordionGroup, DxcAlert, DxcApplicationLayout, DxcBadge, Bleed as DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, Inset as DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTag, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackContext, HalstackLanguageContext, HalstackProvider, useToast };