@dxc-technology/halstack-react 0.0.0-68dad03 → 0.0.0-694be29

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as react from 'react';
-import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, SVGProps, ReactElement, JSX, Ref, ReactEventHandler } from 'react';
 import { SortColumn } from 'react-data-grid';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -59,7 +58,7 @@ type AccordionItemProps = {
      */
     tabIndex?: number;
 };
-type CommonProps$9 = {
+type CommonProps$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.
@@ -70,7 +69,7 @@ type CommonProps$9 = {
      */
     children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
 };
-type IndependentProps = CommonProps$9 & {
+type IndependentProps = CommonProps$a & {
     /**
      * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
@@ -91,7 +90,7 @@ type IndependentProps = CommonProps$9 & {
      */
     onActiveChange?: (index: number) => void;
 };
-type NonIndependentProps = CommonProps$9 & {
+type NonIndependentProps = CommonProps$a & {
     /**
      * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
@@ -112,10 +111,10 @@ type NonIndependentProps = CommonProps$9 & {
      */
     onActiveChange?: (index: number[]) => void;
 };
-type Props$I = IndependentProps | NonIndependentProps;
+type Props$M = IndependentProps | NonIndependentProps;
 
 declare const DxcAccordion: {
-    (props: Props$I): JSX.Element;
+    (props: Props$M): JSX.Element;
     AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
 };
 
@@ -145,7 +144,7 @@ type Message = {
      */
     text: ReactNode;
 };
-type CommonProps$8 = {
+type CommonProps$9 = {
     /**
      * 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
@@ -198,206 +197,152 @@ type ModeSpecificProps = {
      */
     mode: "modal";
 };
-type Props$H = CommonProps$8 & ModeSpecificProps;
+type Props$L = CommonProps$9 & ModeSpecificProps;
 
-declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$H) => react_jsx_runtime.JSX.Element;
+declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$L) => react.JSX.Element;
 
-type SidenavTitlePropsType = {
-    /**
-     * The area inside the sidenav title. This area can be used to render custom content.
-     */
-    children: ReactNode;
-};
-type SidenavSectionPropsType = {
-    /**
-     * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
-     */
-    children: ReactNode;
-};
-type SidenavGroupPropsType = {
+type SearchBarProps = {
     /**
-     * The title of the sidenav group.
+     * If true, the search bar input will be focused when rendered.
      */
-    title?: string;
+    autoFocus?: boolean;
     /**
-     * If true, the sidenav group will be a button that will allow you to collapse the links contained within it.
-     * In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected.
+     * If true, the component will be disabled.
      */
-    collapsable?: boolean;
+    disabled?: boolean;
     /**
-     * Material Symbol name or SVG icon to be displayed next to the title of the group.
+     * Function invoked when the search bar loses focus.
      */
-    icon?: string | SVG;
+    onBlur?: (value: string) => void;
     /**
-     * The area inside the sidenav group. This area can be used to render sidenav links.
+     * Function invoked when the user cancels the search.
      */
-    children: ReactNode;
-};
-type SidenavLinkPropsType = {
+    onCancel?: () => void;
     /**
-     * Page to be opened when the user clicks on the link.
+     * Function invoked when the user changes the input value.
      */
-    href?: string;
+    onChange?: (value: string) => void;
     /**
-     * If true, the page is opened in a new browser tab.
+     * Function invoked when the Enter key is pressed.
      */
-    newWindow?: boolean;
+    onEnter?: (value: string) => void;
     /**
-     * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
+     * Placeholder text displayed in the search bar input field.
      */
+    placeholder?: string;
+};
+
+type CommonItemProps = {
+    badge?: ReactElement;
     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,
-     * the group title will appear as selected too.
-     */
+    label: string;
+};
+type Item$1 = CommonItemProps & {
+    onSelect?: () => void;
     selected?: boolean;
-    /**
-     * This function will be called when the user clicks the link and the event will be passed to this function.
-     */
-    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * The area inside the sidenav link.
-     */
-    children: ReactNode;
-    /**
-     * Value of the tabindex.
-     */
-    tabIndex?: number;
+    href?: string;
+    renderItem?: (props: {
+        children: ReactNode;
+    }) => ReactNode;
 };
-type Props$G = {
-    /**
-     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
-     */
-    title?: ReactNode;
-    /**
-     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
-     */
-    children: ReactNode;
+type GroupItem$1 = CommonItemProps & {
+    items: (Item$1 | GroupItem$1)[];
+    defaultOpen?: boolean;
 };
-
-type Size$4 = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type Option$2 = {
-    /**
-     * Option display value.
-     */
-    label?: string;
-    /**
-     * Material Symbol name or SVG element as the icon that will be placed next to the label.
-     */
-    icon?: string | SVG;
-    /**
-     * Option inner value.
-     */
-    value: string;
+type Section$1 = {
+    items: (Item$1 | GroupItem$1)[];
+    title?: string;
 };
-type Props$F = {
-    /**
-     * An array of objects representing the options.
-     */
-    options: Option$2[];
-    /**
-     * In case options include icons, whether the icon should appear
-     * after or before the label.
-     */
-    optionsIconPosition?: "before" | "after";
-    /**
-     * Material Symbol name or SVG element as the icon that will be placed next to the label.
-     */
-    icon?: string | SVG;
-    /**
-     * Whether the icon should appear after or before the label.
-     */
-    iconPosition?: "before" | "after";
+type Props$K = {
     /**
-     * Text to be placed within the dropdown.
-     */
-    label?: string;
-    /**
-     * Whether the arrow next to the label must be displayed or not.
-     */
-    caretHidden?: boolean;
-    /**
-     * If true, the component will be disabled.
+     * Array of items to be displayed in the menu.
+     * Each item can be a single/simple item, a group item or a section.
      */
-    disabled?: boolean;
+    items: (Item$1 | GroupItem$1)[] | Section$1[];
     /**
-     * If true, the options are shown when the dropdown is hover.
+     * If true the menu will be displayed with a border.
      */
-    expandOnHover?: boolean;
+    displayBorder?: boolean;
     /**
-     * This function will be called every time the selection changes.
-     * The value of the selected option will be passed as a parameter.
+     * If true the menu will have lines marking the groups.
      */
-    onSelectOption: (value: string) => void;
+    displayGroupLines?: boolean;
     /**
-     * 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.
+     * If true the menu will have controls at the end.
      */
-    margin?: Space$1 | Margin;
+    displayControlsAfter?: boolean;
     /**
-     * Size of the component.
+     * If true the menu will be icons only and display a popover on click.
      */
-    size?: Size$4;
+    hasPopOver?: boolean;
     /**
-     * Value of the tabindex attribute.
+     * If true the menu will be displayed horizontally.
      */
-    tabIndex?: number;
+    isHorizontal?: boolean;
     /**
-     * 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.
+     * Function that will be called when an option is clicked.
+     * This is used to notify that an item has been selected to close any visible menu that is not managed by the navigation tree.
      */
-    title?: string;
+    onSelectItem?: () => void;
 };
 
-type Logo$1 = {
-    /**
-     * URL to navigate when the logo is clicked.
-     */
-    href?: string;
+type Section = {
+    items: (Item$1 | GroupItem$1)[];
+    title?: string;
+};
+type SearchbarSidenavProps = Omit<SearchBarProps, "autoFocus" | "disabled" | "onCancel">;
+type Props$J = {
     /**
-     * Source of the logo image.
+     * The content rendered in the bottom part of the sidenav, under the navigation menu.
      */
-    src: string;
+    bottomContent?: ReactNode;
     /**
-     * Alternative text for the logo image.
+     * Object with the properties of the branding placed at the top of the sidenav.
      */
-    title?: string;
-};
-type Props$E = {
+    appTitle?: string | ReactNode;
     /**
-     * Whether a contrast line should appear at the bottom of the header.
+     * Initial state of the expansion of the sidenav, only when it is uncontrolled.
      */
-    underlined?: boolean;
+    defaultExpanded?: boolean;
     /**
-     * Content shown in the header. Take into account that the component applies styles
-     * for the first child in the content, so we recommend the use of Fragment
-     * to be applied correctly. Otherwise, the styles can be modified.
+     * If true the nav menu will have lines marking the groups.
      */
-    content?: ReactNode;
+    displayGroupLines?: boolean;
     /**
-     * Content shown in responsive version. It receives the close menu handler that can
-     * be used to add that functionality when a element is clicked.
+     * If true, the sidenav is expanded.
+     * If undefined the component will be uncontrolled and the value will be managed internally by the component.
      */
-    responsiveContent?: (closeHandler: () => void) => ReactNode;
+    expanded?: boolean;
     /**
-     * Logo to be displayed inside the header
+     * Array of items to be displayed in the navigation menu.
+     * Each item can be a single/simple item, a group item or a section.
      */
-    logo?: Logo$1;
+    navItems?: (Item$1 | GroupItem$1)[] | Section[];
     /**
-     * Size of the bottom margin to be applied to the header.
+     * Function called when the expansion state of the sidenav changes.
      */
-    margin?: Space$1;
+    onExpandedChange?: (value: boolean) => void;
     /**
-     * This function will be called when the user clicks the header logo.
+     * When provided, a search bar will be rendered at the top of the sidenav.
      */
-    onClick?: () => void;
+    searchBar?: SearchbarSidenavProps;
     /**
-     * Value of the tabindex for all interactive elements, except those inside the
-     * custom area.
+     * The additional content rendered in the upper part of the sidenav, under the branding.
      */
-    tabIndex?: number;
+    topContent?: ReactNode;
+};
+
+type GroupItem = CommonItemProps & {
+    items: Item$1[];
+};
+type MainNavPropsType = (GroupItem | Item$1)[];
+type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">;
+type Props$I = {
+    appTitle?: string;
+    navItems?: MainNavPropsType;
+    responsiveBottomContent?: ReactNode;
+    searchBar?: SearchBarHeaderProps;
+    sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode);
 };
 
 type SocialLink = {
@@ -425,18 +370,14 @@ type BottomLink = {
     text: string;
 };
 type Logo = {
-    /**
-     * URL to navigate when the logo is clicked.
-     */
-    href?: string;
     /**
      * Source of the logo image.
      */
-    src: string;
+    src: string | SVG;
     /**
      * Alternative text for the logo image.
      */
-    title?: string;
+    alt: string;
 };
 type FooterPropsType = {
     /**
@@ -444,29 +385,28 @@ type FooterPropsType = {
      * 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
+     * Content to be displayed on the left side of the footer under the logo.
      */
-    logo?: Logo;
+    leftContent?: ReactNode;
     /**
-     * Size of the top margin to be applied to the footer.
+     * Logo to be displayed inside the footer
      */
-    margin?: Space$1;
+    logo?: Logo;
     /**
      * 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";
+    /**
+     * Content to be displayed on the right side of the footer before the socialLinks if provided.
+     */
+    rightContent?: ReactNode;
     /**
      * An array of objects representing the links that will be rendered as
      * icons at the top-right side of the footer.
@@ -474,7 +414,7 @@ type FooterPropsType = {
     socialLinks?: SocialLink[];
     /**
      * Value of the tabindex for all interactive elements, except those
-     * inside the custom area.
+     * inside the leftContent and rightContent.
      */
     tabIndex?: number;
 };
@@ -485,12 +425,29 @@ type AppLayoutMainPropsType = {
      */
     children: ReactNode;
 };
+type LogoPropsType = {
+    /**
+     * Alternative text for the logo image.
+     */
+    alt: string;
+    /**
+     * URL to navigate when the logo is clicked.
+     */
+    href?: string;
+    /**
+     * Function to be called on logo click.
+     */
+    onClick?: () => void;
+    /**
+     * URL or SVG of the image that will be placed in the logo.
+     */
+    src: string | SVG;
+};
 type ApplicationLayoutPropsType = {
     /**
-     * Text to be placed next to the hamburger button that toggles the
-     * visibility of the sidenav.
+     * Logo properties.
      */
-    visibilityToggleLabel?: string;
+    logo?: LogoPropsType;
     /**
      * Header content.
      */
@@ -510,23 +467,87 @@ type ApplicationLayoutPropsType = {
 };
 
 declare const DxcApplicationLayout: {
-    ({ visibilityToggleLabel, header, sidenav, footer, children, }: ApplicationLayoutPropsType): JSX.Element;
-    Footer: ({ bottomLinks, children, copyright, logo, margin, mode, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
-    Header: {
-        ({ 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;
-    };
+    ({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element;
+    Footer: ({ bottomLinks, copyright, leftContent, logo, mode, rightContent, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
+    Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$I) => JSX.Element;
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    SideNav: {
-        ({ 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) | null;
+    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$J) => JSX.Element;
+};
+
+type Size$5 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Shape = "circle" | "square";
+type Color = "primary" | "secondary" | "tertiary" | "success" | "info" | "neutral" | "warning" | "error";
+interface Status {
+    mode: "default" | "info" | "success" | "warning" | "error";
+    position: "top" | "bottom";
+}
+type Props$H = {
+    /**
+     * Affects the visual style of the avatar. It can be used following semantic purposes or not.
+     */
+    color?: Color;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed as avatar.
+     */
+    icon?: string | SVG;
+    /**
+     * URL of the image.
+     */
+    imageSrc?: string;
+    /**
+     * Text label associated with the avatar.
+     * Used to generate and display initials inside the avatar.
+     */
+    label?: string;
+    /**
+     * Page to be opened when the user clicks on the link.
+     */
+    linkHref?: string;
+    /**
+     * This function will be called when the user clicks the avatar. Makes it behave as a button.
+     */
+    onClick?: () => void;
+    /**
+     * Text to be displayed as label next to the avatar.
+     */
+    primaryText?: string;
+    /**
+     * Ref to the avatar container element.
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Text to be displayed as sublabel next to the avatar.
+     */
+    secondaryText?: string;
+    /**
+     * This will determine if the avatar will be rounded square or a circle.
+     */
+    shape?: Shape;
+    /**
+     * Size of the component.
+     */
+    size?: Size$5;
+    /**
+     * Defines the color of the status indicator displayed on the avatar and where it will be placed.
+     * If not provided, no indicator will be rendered.
+     */
+    status?: Status;
+    /**
+     * Value of the tabindex attribute. It will only apply when the onClick property is passed.
+     */
+    tabIndex?: number;
+    /**
+     * Text to be displayed inside a tooltip when hovering the avatar.
+     */
+    title?: string;
 };
 
+declare const DxcAvatar: ({ color, disabled, icon, imageSrc, label, linkHref, onClick, primaryText, ref, secondaryText, shape, size, status, tabIndex, title, }: Props$H) => react.JSX.Element;
+
 type ContextualProps = {
     /**
      * Text to be placed in the badge.
@@ -563,7 +584,7 @@ type NotificationProps = {
      */
     color?: never;
 };
-type CommonProps$7 = {
+type CommonProps$8 = {
     /**
      * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
      */
@@ -572,16 +593,20 @@ 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;
+    /**
+     * Ref to be forwarded to the badge container element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
     /**
      * Size of the component.
      */
     size?: "small" | "medium" | "large";
 };
-type Props$D = (ContextualProps | NotificationProps) & CommonProps$7;
+type Props$G = (ContextualProps | NotificationProps) & CommonProps$8;
 
-declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$D) => JSX.Element;
+declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, ref, size, }: Props$G) => react.JSX.Element;
 
-type Props$C = {
+type Props$F = {
     /**
      * Applies the spacing scale to all sides.
      */
@@ -616,13 +641,13 @@ type Props$C = {
     children: ReactNode;
 };
 
-declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$C): react_jsx_runtime.JSX.Element;
+declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$F) => react.JSX.Element;
 
-type Item$1 = {
+type Item = {
     href?: string;
     label: string;
 };
-type Props$B = {
+type Props$E = {
     /**
      * Provides a label that describes the type of navigation enabled by
      * the component.
@@ -631,7 +656,7 @@ type Props$B = {
     /**
      * Array of objects representing the items of the breadcrumbs.
      */
-    items: Item$1[];
+    items: Item[];
     /**
      * Number of items before showing a collapsed version of the
      * breadcrumbs. It can't be lower than two (root/collapsed action and
@@ -654,7 +679,7 @@ type Props$B = {
     showRoot?: boolean;
 };
 
-declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$B) => react_jsx_runtime.JSX.Element;
+declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$E) => react.JSX.Element;
 
 type IconProps = {
     /**
@@ -684,7 +709,7 @@ type OtherProps = {
      */
     children: ReactNode;
 };
-type Props$A = IconProps | OtherProps;
+type Props$D = IconProps | OtherProps;
 type BulletedListItemPropsType = {
     /**
      * Text to be shown in the list.
@@ -693,136 +718,246 @@ type BulletedListItemPropsType = {
 };
 
 declare const DxcBulletedList: {
-    ({ children, type, icon }: Props$A): JSX.Element;
+    ({ children, type, icon }: Props$D): JSX.Element;
     Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
 };
 
 type Semantic = "default" | "error" | "warning" | "success" | "info";
 type Mode$1 = "primary" | "secondary" | "tertiary";
-type Size$3 = {
+type Size$4 = {
     /**
      * Height of the button.
      */
     height?: "small" | "medium" | "large";
     width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
 };
-type Props$z = {
-    /**
-     * Text to be placed in the button.
-     */
-    label?: string;
-    /**
-     * The available button modes.
-     */
-    mode?: Mode$1;
-    /**
-     * Specifies the semantic meaning of the buttons, which determines its color.
-     */
-    semantic?: Semantic;
+type Props$C = {
     /**
      * If true, the component will be disabled.
      */
     disabled?: boolean;
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
+     */
+    icon?: string | SVG;
     /**
      * Whether the icon should appear after or before the label.
      */
     iconPosition?: "before" | "after";
     /**
-     * Value for the HTML properties title and aria-label.
+     * Text to be placed in the button.
      */
-    title?: string;
+    label?: string;
     /**
-     * 'type' html prop of the button.
+     * 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.
      */
-    type?: "button" | "reset" | "submit";
+    margin?: Space$1 | Margin;
     /**
-     * Material Symbol name or SVG element as the icon that will be placed next to the label.
+     * The available button modes.
      */
-    icon?: string | SVG;
+    mode?: Mode$1;
     /**
      * This function will be called when the user clicks the button.
      */
     onClick?: () => 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.
+     * ref to the button element.
      */
-    margin?: Space$1 | Margin;
+    ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * Specifies the semantic meaning of the buttons, which determines its color.
+     */
+    semantic?: Semantic;
     /**
      * Size of the component.
      */
-    size?: Size$3;
+    size?: Size$4;
     /**
      * Value of the tabindex attribute.
      */
     tabIndex?: number;
-};
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title?: string;
+    /**
+     * 'type' html prop of the button.
+     */
+    type?: "button" | "reset" | "submit";
+};
 
-declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$z) => JSX.Element;
+declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, ref, semantic, size, tabIndex, title, type, }: Props$C) => react.JSX.Element;
 
-type Size$2 = {
-    top?: Space$1;
-    bottom?: Space$1;
-    left?: Space$1;
-    right?: Space$1;
-};
-type Props$y = {
+type Props$B = {
     /**
-     * URL of the image that will be placed in the card component.
-     * In case of omission, the image container will not appear and
-     * the content will occupy its space.
+     * Alternative text description displayed when the specified image is not loaded.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
+     * See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
      */
-    imageSrc?: string;
+    alt: string;
     /**
-     * Color of the image background.
+     * Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
+     * which is required regardless of the presence of the caption or not.
      */
-    imageBgColor?: string;
+    caption?: string;
     /**
-     * Size of the padding to be applied to the image section of the
-     * component. You can pass an object with 'top', 'bottom', 'left'
-     * and 'right' properties in order to specify different padding sizes.
+     * Sets the rendered height of the image.
      */
-    imagePadding?: Space$1 | Size$2;
+    height?: string;
     /**
-     * Whether the image should appear in relation to the content.
+     * 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).
      */
-    imagePosition?: "before" | "after";
+    lazyLoading?: boolean;
+    /**
+     * Sets the object-fit CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+     */
+    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
     /**
-     * If defined, the tag will be displayed as an anchor, using this prop
-     * as "href". Component will show some visual feedback on hover.
+     * Sets the object-position CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
      */
-    linkHref?: string;
+    objectPosition?: string;
     /**
-     * This function will be called when the user clicks the card. Component
-     * will show some visual feedback on hover.
+     * This function will be called when the image fails to load.
      */
-    onClick?: () => void;
+    onError?: ReactEventHandler<HTMLImageElement>;
     /**
-     * Whether the image must cover the whole image area of the card.
+     * This function will be called when the image is loaded.
      */
-    imageCover?: boolean;
+    onLoad?: ReactEventHandler<HTMLImageElement>;
     /**
-     * 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.
+     * 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,
+     * then this attribute has no effect.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
      */
-    margin?: Space$1 | Size$2;
+    sizes?: string;
     /**
-     * Value of the tabindex attribute applied when the component is clickable.
+     * URL of the image. This prop is required and must be valid.
      */
-    tabIndex?: number;
+    src: string;
+    /**
+     * 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/API/HTMLImageElement/srcset
+     */
+    srcSet?: string;
     /**
-     * Determines whether or not the component should have an outline.
+     * Sets the rendered width of the image.
      */
-    outlined?: boolean;
+    width?: string;
+};
+
+type Size$3 = {
+    width?: "fillParent" | "fitContent";
+    height?: "fillParent" | "fitContent";
+};
+type Props$A = {
     /**
      * Custom content that will be placed inside the component.
      */
     children?: ReactNode;
+    /**
+     * Initial state of the checkbox, only when it is uncontrolled.
+     */
+    defaultSelected?: boolean;
+    /**
+     * Defines the direction of the content inside the card. It can be set to "row" or "column". The default value is "column".
+     */
+    direction?: "row" | "column";
+    /**
+     * Defines the size of the card when it is empty.
+     */
+    emptySize?: {
+        width?: string;
+        height?: string;
+        iconSize?: "small" | "medium" | "large";
+    };
+    /**
+     * URL to navigate to when the card is clicked.
+     * If href is defined selectable will be ignored and the link will be always considered as an anchor.
+     */
+    href?: string;
+    /**
+     * Image to be displayed inside the card.
+     */
+    image?: Props$B;
+    /**
+     * Position of the image inside the card. It can be set to "before" or "after" the content.
+     */
+    imagePosition?: "before" | "after";
+    /**
+     * If true, the card will be displayed as empty state.
+     */
+    isEmpty?: boolean;
+    /**
+     * If true, a loading state will be displayed inside the card.
+     */
+    isLoading?: boolean;
+    /**
+     * Defines the size of the loading card when isLoading is true.
+     */
+    loadingSize?: {
+        width?: string;
+        height?: string;
+    };
+    /**
+     * Defines the visual style of the card. It can be set to "elevated" or "outlined".
+     */
+    mode?: "elevated" | "outlined";
+    /**
+     * If true, the link will open in a new window. href must be provided for this to work.
+     */
+    newWindow?: boolean;
+    /**
+     * Callback function that is called when the card is clicked.
+     * It receives a boolean value indicating whether the card is selected or not.
+     * selectable must be true for this to work.
+     */
+    onSelectionChange?: (selected: boolean) => void;
+    /**
+     * Callback function that is called when the card is clicked.
+     */
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * Ref to the card element.
+     */
+    ref?: React.Ref<HTMLDivElement | HTMLAnchorElement>;
+    /**
+     * If true, the card can be selected. When the card is clicked, the onSelectionChange callback will be called with the new selected state of the card.
+     * If href is defined, the card won't be selectable, even if this prop is true.
+     */
+    selectable?: boolean;
+    /**
+     * If true, the card is selected and if defined it will behave as a controlled component.
+     */
+    selected?: boolean;
+    /**
+     * Defines the size of the card. Width and height can be set to "fillParent" or "fitContent".
+     * The default value is { width: "fitContent", height: "fitContent" }.
+     */
+    size?: Size$3;
+    /**
+     * Specifies the tab index of the card.
+     * The default value is 0.
+     */
+    tabIndex?: number;
 };
 
-declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$y) => react_jsx_runtime.JSX.Element;
+declare const DxcCard: ({ children, defaultSelected, direction, emptySize, href, imagePosition, image, isEmpty, isLoading, loadingSize, mode, newWindow, onSelectionChange, onClick, ref, selectable, selected, size, tabIndex, }: Props$A) => react.JSX.Element;
 
-type Props$x = {
+/**
+ * Reference to the component.
+ */
+type RefType$a = HTMLDivElement;
+type Props$z = {
     /**
      * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
      */
@@ -872,6 +1007,10 @@ type Props$x = {
      * If true, the component will not be mutable, meaning the user can not edit the control.
      */
     readOnly?: boolean;
+    /**
+     * ref to the checkbox container element.
+     */
+    ref?: React.Ref<RefType$a>;
     /**
      * Size of the component.
      */
@@ -887,45 +1026,89 @@ type Props$x = {
     value?: string;
 };
 
-declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
+declare const DxcCheckbox: {
+    ({ ariaLabel, checked, defaultChecked, disabled, label, labelPosition, margin, name, onChange, optional, readOnly, ref, size, tabIndex, value, }: Props$z): react.JSX.Element;
+    displayName: string;
+};
 
-type Props$w = {
+type ChipAvatarType = {
+    color: Props$H["color"];
+    profileName?: Props$H["label"];
+    imageSrc?: Props$H["imageSrc"];
+    icon?: Props$H["icon"];
+};
+type CommonProps$7 = {
     /**
-     * Text to be placed on the chip.
+     * Function to be called when the chip is clicked or the dismiss action is triggered.
      */
-    label?: string;
+    onClick?: () => void;
+    /**
+     * Ref to the chip element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
     /**
-     * Element or path used as icon to be placed after the chip label.
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+type SelectableChipProps = CommonProps$7 & {
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The whole chip is an interactive element that allows users to activate or clear options directly within the interface.
+     */
+    mode?: "selectable";
+    /**
+     * If true, the component will be selected. This property is only applicable when the mode is "selectable".
+     * If undefined, the component manages its own internal state (uncontrolled mode).
+     */
+    selected?: boolean;
+} & ({
+    /**
+     * Element, path or avatar used as icon to be placed before the chip label.
+     */
+    prefix: ChipAvatarType;
+    /**
+     * Text to be placed on the chip. Required when using an avatar prefix.
      */
-    suffixIcon?: string | SVG;
+    label: string;
+} | {
     /**
      * Element or path used as icon to be placed before the chip label.
      */
-    prefixIcon?: string | SVG;
+    prefix: string | SVG;
     /**
-     * This function will be called when the suffix is clicked.
+     * Text to be placed on the chip. Optional when using an icon prefix.
      */
-    onClickSuffix?: () => void;
+    label?: string;
+} | {
+    prefix?: undefined;
     /**
-     * This function will be called when the prefix is clicked.
+     * Text to be placed on the chip.
      */
-    onClickPrefix?: () => void;
+    label: string;
+});
+type DismissibleChipProps = CommonProps$7 & {
     /**
-     * If true, the component will be disabled.
+     * Dismissible chip is used to represent information generated by user input within an interface.
      */
-    disabled?: boolean;
+    mode: "dismissible";
     /**
-     * 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.
+     * Text to be placed on the chip.
      */
-    margin?: Space$1 | Margin;
+    label: string;
     /**
-     * Value of the tabindex attribute.
+     * Element, path or avatar used as icon to be placed before the chip label.
      */
-    tabIndex?: number;
+    prefix?: string | SVG | ChipAvatarType;
+    selected?: never;
+    disabled?: never;
 };
+type Props$y = SelectableChipProps | DismissibleChipProps;
 
-declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$w) => react_jsx_runtime.JSX.Element;
+declare const DxcChip: ({ disabled, label, mode, onClick, prefix, selected, tabIndex, ref, }: Props$y) => react.JSX.Element | null;
 
 type Space = {
     top?: string;
@@ -968,7 +1151,7 @@ type Overflow = OverflowValues | {
     x?: OverflowValues;
     y?: OverflowValues;
 };
-type Props$v = {
+type Props$x = {
     /**
      * Based on the CSS property background allows configuring all properties related to the background of a container.
      *
@@ -1001,6 +1184,10 @@ type Props$v = {
      * Custom content inside the container.
      */
     children?: ReactNode;
+    /**
+     * Reference to the container element.
+     */
+    ref?: Ref<HTMLDivElement>;
     /**
      * Sets the display CSS property.
      * The set of values is limited to the ones related to the outer display type.
@@ -1090,34 +1277,91 @@ type Props$v = {
     zIndex?: "auto" | number;
 };
 
-declare function DxcContainer({ display, width, height, overflow, ...props }: Props$v): react_jsx_runtime.JSX.Element;
+declare const DxcContainer: ({ display, width, height, overflow, ref, ...props }: Props$x) => react.JSX.Element;
 
-type CommonItemProps = {
-    badge?: ReactElement;
+type Props$w = Omit<Props$K, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
+
+declare function DxcContextualMenu({ items }: Props$w): react.JSX.Element;
+
+type Size$2 = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Option$2 = {
+    /**
+     * Option display value.
+     */
+    label?: string;
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
+     */
     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;
+    /**
+     * Option inner value.
+     */
+    value: string;
+    /**
+     * Whether the option has a divider below it.
+     */
+    hasDivider?: boolean;
 };
-type Props$u = {
+type Props$v = {
     /**
-     * Array of items to be displayed in the Contextual menu.
-     * Each item can be a single/simple item, a group item or a section.
+     * An array of objects representing the options.
+     */
+    options: Option$2[];
+    /**
+     * In case options include icons, whether the icon should appear
+     * after or before the label.
+     */
+    optionsIconPosition?: "before" | "after";
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
+     */
+    icon?: string | SVG;
+    /**
+     * Whether the icon should appear after or before the label.
+     */
+    iconPosition?: "before" | "after";
+    /**
+     * Text to be placed within the dropdown.
+     */
+    label?: string;
+    /**
+     * Whether the arrow next to the label must be displayed or not.
+     */
+    caretHidden?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the options are shown when the dropdown is hover.
+     */
+    expandOnHover?: boolean;
+    /**
+     * This function will be called every time the selection changes.
+     * The value of the selected option will be passed as a parameter.
+     */
+    onSelectOption: (value: string) => void;
+    /**
+     * 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$1 | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: Size$2;
+    /**
+     * 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.
      */
-    items: (Item | GroupItem)[] | Section[];
+    title?: string;
 };
 
-declare function DxcContextualMenu({ items }: Props$u): react_jsx_runtime.JSX.Element;
-
 type BaseActionCell = {
     disabled?: boolean;
     tabIndex?: number;
@@ -1141,7 +1385,7 @@ type ActionsCellPropsType = {
      */
     actions: ActionCell[];
 };
-type Props$t = {
+type Props$u = {
     /**
      * The center section of the table. Can be used to render custom
      * content in this area.
@@ -1375,14 +1619,15 @@ type BasicGridProps = {
      */
     expandable?: false;
 };
-type Props$s = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
+type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
 
 declare const DxcDataGrid: {
-    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$s): JSX.Element;
-    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
+    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => JSX.Element;
 };
 
-type Props$r = {
+type RefType$9 = React.Ref<HTMLDivElement>;
+type Props$s = {
     /**
      * Initial value of the input element, only when it is uncontrolled.
      */
@@ -1486,11 +1731,18 @@ type Props$r = {
      * Specifies a string to be used as the name for the date input element when no `label` is provided.
      */
     ariaLabel?: string;
+    /**
+     * Ref object to access the date input element.
+     */
+    ref?: RefType$9;
 };
 
-declare const DxcDateInput: react.ForwardRefExoticComponent<Props$r & react.RefAttributes<HTMLDivElement>>;
+declare const DxcDateInput: {
+    ({ label, name, defaultValue, value, format, helperText, placeholder, clearable, disabled, readOnly, optional, onChange, onBlur, error, autocomplete, margin, size, tabIndex, ariaLabel, ref, }: Props$s): react.JSX.Element;
+    displayName: string;
+};
 
-type Props$q = {
+type Props$r = {
     /**
      * If true, the close button will be visible.
      */
@@ -1530,9 +1782,9 @@ type Props$q = {
     disableFocusLock?: boolean;
 };
 
-declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, disableFocusLock, }: Props$q) => JSX.Element;
+declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, disableFocusLock, }: Props$r) => JSX.Element;
 
-type Props$p = {
+type Props$q = {
     /**
      * The divider can be shown in horizontal or vertical.
      */
@@ -1553,10 +1805,14 @@ type Props$p = {
     decorative?: boolean;
 };
 
-declare function DxcDivider({ color, decorative, orientation, weight, }: Props$p): react_jsx_runtime.JSX.Element;
+declare function DxcDivider({ color, decorative, orientation, weight, }: Props$q): react.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;
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$v) => react.JSX.Element;
 
+/**
+ * Reference to the component.
+ */
+type RefType$8 = React.Ref<HTMLDivElement>;
 type FileData = {
     /**
      * Error of the file. If it is defined, it will be shown and the file item will be mark as invalid.
@@ -1620,10 +1876,18 @@ type CommonProps$5 = {
      * next to the label.
      */
     optional?: boolean;
+    /**
+     * Reference to the component.
+     */
+    ref?: RefType$8;
     /**
      * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
      */
     showPreview?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "medium" | "fillParent";
     /**
      * Value of the tabindex attribute.
      */
@@ -1661,9 +1925,12 @@ type FileModeProps = CommonProps$5 & {
      */
     mode?: "file";
 };
-type Props$o = DropModeProps | FileModeProps;
+type Props$p = DropModeProps | FileModeProps;
 
-declare const DxcFileInput: react.ForwardRefExoticComponent<Props$o & react.RefAttributes<HTMLDivElement>>;
+declare const DxcFileInput: {
+    ({ mode, label, buttonLabel, dropAreaLabel, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, size, value, margin, tabIndex, optional, ref, }: Props$p): react.JSX.Element;
+    displayName: string;
+};
 
 type Gap$1 = {
     rowGap: string;
@@ -1698,7 +1965,7 @@ type CommonProps$4 = {
      */
     alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
 };
-type Props$n = CommonProps$4 & {
+type Props$o = CommonProps$4 & {
     /**
      * Sets the flex-direction CSS property.
      *
@@ -1723,6 +1990,10 @@ type Props$n = CommonProps$4 & {
      * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/order
      */
     order?: number;
+    /**
+     * If true, the flex container will take the full height of its parent.
+     */
+    fullHeight?: boolean;
     /**
      * Sets the flex-grow CSS property.
      *
@@ -1751,7 +2022,7 @@ type Props$n = CommonProps$4 & {
     children: ReactNode;
 };
 
-declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$n) => react_jsx_runtime.JSX.Element;
+declare const DxcFlex: ({ basis, direction, fullHeight, gap, grow, order, shrink, wrap, ...props }: Props$o) => react.JSX.Element;
 
 type Gap = string | {
     columnGap?: string;
@@ -1768,7 +2039,7 @@ type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stret
 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];
+    [Property in Extract<keyof Type, string> as `${Property}${Capitalize<Suffix>}`]: Type[Property];
 };
 type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
     align: PlaceValues;
@@ -1809,7 +2080,7 @@ type GridItemProps = {
      */
     row?: number | string | GridCell;
 };
-type Props$m = GridItemProps & {
+type Props$n = GridItemProps & {
     /**
      * Sets the grid-auto-columns CSS property.
      *
@@ -1867,14 +2138,14 @@ type Props$m = GridItemProps & {
 };
 
 declare const DxcGrid: {
-    (props: Props$m): react_jsx_runtime.JSX.Element;
+    (props: Props$n): react.JSX.Element;
     Item: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme;
         as?: React.ElementType;
     } & GridItemProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 };
 
-type Props$l = {
+type Props$m = {
     /**
      * 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.
@@ -1900,77 +2171,11 @@ type Props$l = {
     margin?: Space$1 | Margin;
 };
 
-declare function DxcHeading({ as, level, margin, text, weight }: Props$l): react_jsx_runtime.JSX.Element;
-
-type Props$k = {
-    /**
-     * Alternative text description displayed when the specified image is not loaded.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt
-     * See W3C alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
-     */
-    alt: string;
-    /**
-     * Image legend with a descriptive purpose. It is placed below the image and is complementary to the alt attribute,
-     * 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;
-    /**
-     * Sets the object-fit CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
-     */
-    objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
-    /**
-     * Sets the object-position CSS property.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
-     */
-    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,
-     * then this attribute has no effect.
-     *
-     * See MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
-     */
-    sizes?: string;
-    /**
-     * URL of the image. This prop is required and must be valid.
-     */
-    src: string;
-    /**
-     * 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/API/HTMLImageElement/srcset
-     */
-    srcSet?: string;
-    /**
-     * Sets the rendered width of the image.
-     */
-    width?: string;
-};
+declare function DxcHeading({ as, level, margin, text, weight }: Props$m): react.JSX.Element;
 
-declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$k): react_jsx_runtime.JSX.Element;
+declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$B): react.JSX.Element;
 
-type Props$j = {
+type Props$l = {
     /**
      * Applies the spacing scale to the bottom side.
      */
@@ -2005,13 +2210,21 @@ type Props$j = {
     vertical?: string;
 };
 
-declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$j): react_jsx_runtime.JSX.Element;
+declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$l): react.JSX.Element;
 
 type LinkProps = {
     /**
-     * If true, the link is disabled.
+     * Text of the link.
+     */
+    children: string;
+    /**
+     * If true, the link will be disabled.
      */
     disabled?: boolean;
+    /**
+     * Page to be opened when the user clicks on the link.
+     */
+    href?: string;
     /**
      * If true, the color is inherited from parent.
      */
@@ -2025,9 +2238,10 @@ type LinkProps = {
      */
     iconPosition?: "before" | "after";
     /**
-     * Page to be opened when the user clicks on the link.
+     * 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.
      */
-    href?: string;
+    margin?: Space$1 | Margin;
     /**
      * If true, the page is opened in a new browser tab.
      */
@@ -2038,21 +2252,134 @@ type LinkProps = {
      */
     onClick?: () => void;
     /**
-     * Text of the link.
+     * Ref of the link element.
      */
-    children: string;
+    ref?: React.Ref<HTMLAnchorElement>;
     /**
-     * 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.
      */
-    margin?: Space$1 | Margin;
+    tabIndex?: number;
+};
+
+declare const DxcLink: {
+    ({ children, disabled, href, icon, iconPosition, inheritColor, margin, newWindow, onClick, tabIndex, ref, ...otherProps }: LinkProps): react.JSX.Element;
+    displayName: string;
+};
+
+type SelectOption = {
+    label?: string;
+    value: string;
+    onSelect: (value: string) => void;
+    selected?: boolean;
+};
+type Props$k = {
     /**
-     * Value of the tabindex.
+     * If true, the voice recording button will be shown.
+     */
+    allowRecording?: boolean;
+    /**
+     * This function will be called when the selection of top items changes.
+     * If this function is provided the message input will allow file selection.
+     */
+    callbackFile?: (files: File[]) => void;
+    /**
+     * Initial value of the input, only when it is uncontrolled.
+     */
+    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 input component. 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;
+    /**
+     * Items to be shown at the top.
+     */
+    files?: File[];
+    /**
+     * If true, it indicates that a request is being processed after the user submits a query.
+     */
+    isGenerating?: boolean;
+    /**
+     * Specifies the maximum length allowed by the input.
+     * This will be checked both when the input element 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.
+     */
+    maxLength?: number;
+    /**
+     * Specifies the minimum length allowed by the input.
+     * This will be checked both when the input element 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;
+    /**
+     * Options to be shown on the dropdown under the input.
+     */
+    selectOptions?: SelectOption[];
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the input 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;
+    /**
+     * This function will be called when the user types within the input
+     * element of the component. An object including the current 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.
+     */
+    onChange?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * This function will be called when the user clicks on the button (submit or stop) or presses enter.
+     * The type parameter indicates whether it's a "submit" or "stop" event. For submit events, "value", "files" and "selectedOption" are provided.
+     */
+    onButtonClick?: (val: {
+        type: "submit" | "stop";
+        value?: string;
+        files?: File[];
+        selectedOption?: SelectOption;
+    }) => void;
+    /**
+     * Text to be put as placeholder of the input.
+     */
+    placeholder?: string;
+    /**
+     * Specifies the size of the component. The size will affect the width of the input.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
      */
     tabIndex?: number;
+    /**
+     * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
 };
 
-declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+declare const DxcMessageInput: ({ allowRecording, callbackFile, defaultValue, disabled, error, files, isGenerating, maxLength, minLength, selectOptions, onBlur, onButtonClick, onChange, placeholder, size, tabIndex, value, }: Props$k) => react.JSX.Element;
 
 type TabProps$1 = {
     /**
@@ -2064,7 +2391,7 @@ type TabProps$1 = {
      */
     children: string;
     /**
-     * Whether the tab is disabled or not.
+     * If true, the tab will be disabled.
      */
     disabled?: boolean;
     /**
@@ -2075,10 +2402,6 @@ type TabProps$1 = {
      * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
     icon?: string | SVG;
-    /**
-     * This function will be called when the user clicks on this tab.
-     */
-    onClick?: () => void;
     /**
      * If the value is 'true', an empty badge will appear.
      * If it is 'false', no badge will appear.
@@ -2087,8 +2410,16 @@ type TabProps$1 = {
      * it will appear as '+99' in the badge.
      */
     notificationNumber?: boolean | number;
+    /**
+     * This function will be called when the user clicks on this tab.
+     */
+    onClick?: () => void;
+    /**
+     * Ref of the tab element.
+     */
+    ref?: React.Ref<HTMLAnchorElement | HTMLDivElement>;
 };
-type Props$i = {
+type Props$j = {
     /**
      * Contains one or more DxcNavTabs.Tab.
      */
@@ -2104,11 +2435,18 @@ type Props$i = {
 };
 
 declare const DxcNavTabs: {
-    ({ iconPosition, tabIndex, children }: Props$i): JSX.Element;
-    Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
+    ({ iconPosition, tabIndex, children }: Props$j): JSX.Element;
+    Tab: {
+        ({ active, children, disabled, href, icon, notificationNumber, onClick, ref, ...otherProps }: TabProps$1): JSX.Element;
+        displayName: string;
+    };
 };
 
-type Props$h = {
+/**
+ * Reference to the component.
+ */
+type RefType$7 = React.Ref<HTMLInputElement>;
+type Props$i = {
     /**
      * Text to be placed above the number.
      */
@@ -2144,6 +2482,10 @@ type Props$h = {
      * functions when it has not been filled.
      */
     optional?: boolean;
+    /**
+     * Prefix to be placed before the number value.
+     */
+    prefix?: string;
     /**
      * If true, the component will not be mutable, meaning the user can
      * not edit the control. The value won't change when pressing on the
@@ -2151,9 +2493,9 @@ type Props$h = {
      */
     readOnly?: boolean;
     /**
-     * Prefix to be placed before the number value.
+     * Ref of the component.
      */
-    prefix?: string;
+    ref?: RefType$7;
     /**
      * Suffix to be placed after the number value.
      */
@@ -2235,9 +2577,12 @@ type Props$h = {
     showControls?: boolean;
 };
 
-declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
+declare const DxcNumberInput: {
+    ({ ariaLabel, autocomplete, defaultValue, disabled, error, helperText, label, margin, max, min, name, onBlur, onChange, optional, placeholder, prefix, readOnly, ref, showControls, size, step, suffix, tabIndex, value, }: Props$i): react.JSX.Element;
+    displayName: string;
+};
 
-type Props$g = {
+type Props$h = {
     /**
      * Number of the current selected page.
      */
@@ -2275,53 +2620,30 @@ type Props$g = {
     tabIndex?: number;
 };
 
-declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$g) => JSX.Element;
+declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
 
 declare function DxcParagraph({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
-type Props$f = {
-    /**
-     * Text to be placed above the password input.
-     */
-    label?: string;
-    /**
-     * Name attribute of the input element.
-     */
-    name?: string;
+/**
+ * Reference to the component.
+ */
+type RefType$6 = React.Ref<HTMLDivElement>;
+type Props$g = {
     /**
-     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     * Specifies a string to be used as the name for the password input element when no `label` is provided.
      */
-    value?: string;
+    ariaLabel?: string;
     /**
-     * Helper text to be placed above the password.
+     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
+     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
      */
-    helperText?: string;
+    autocomplete?: string;
     /**
      * If true, the password input will have an action to clear the entered value.
      */
     clearable?: boolean;
-    /**
-     * This function will be called when the user types within the input
-     * element of the component. An object including the current 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.
-     * */
-    onChange?: (val: {
-        value: string;
-        error?: string;
-    }) => void;
-    /**
-     * This function will be called when the input element loses the focus.
-     * An object including the input 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 password input
@@ -2332,45 +2654,76 @@ type Props$f = {
      */
     error?: string;
     /**
-     * Regular expression that defines the valid format allowed by the
-     * password input. This will be checked both when the input element loses the
-     * focus and while typing within it. If the string entered does not match
-     * the pattern, the onBlur and onChange functions will be called with the
-     * current value and an internal error informing that this value does not
-     * match the pattern. If the pattern is met, the error parameter of both
-     * events will not be defined.
+     * Helper text to be placed above the password.
      */
-    pattern?: string;
+    helperText?: string;
     /**
-     * Specifies the minimum length allowed by the password input.
+     * Text to be placed above the password input.
+     */
+    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;
+    /**
+     * Specifies the maximum length allowed by the password input.
      * This will be checked both when the input element 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
+     * 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.
      */
-    minLength?: number;
+    maxLength?: number;
     /**
-     * Specifies the maximum length allowed by the password input.
+     * Specifies the minimum length allowed by the password input.
      * This will be checked both when the input element 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
+     * 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.
      */
-    maxLength?: number;
+    minLength?: number;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the input 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;
     /**
-     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
-     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
+     * This function will be called when the user types within the input
+     * element of the component. An object including the current 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.
+     * */
+    onChange?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * Regular expression that defines the valid format allowed by the
+     * password input. This will be checked both when the input element loses the
+     * focus and while typing within it. If the string entered does not match
+     * the pattern, the onBlur and onChange functions will be called with the
+     * current value and an internal error informing that this value does not
+     * match the pattern. If the pattern is met, the error parameter of both
+     * events will not be defined.
      */
-    autocomplete?: string;
+    pattern?: 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.
+     * Reference to the input element.
      */
-    margin?: Space$1 | Margin;
+    ref?: RefType$6;
     /**
      * Size of the component.
      */
@@ -2380,12 +2733,49 @@ type Props$f = {
      */
     tabIndex?: number;
     /**
-     * Specifies a string to be used as the name for the password input element when no `label` is provided.
+     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
-    ariaLabel?: string;
+    value?: string;
+};
+
+declare const DxcPasswordInput: {
+    ({ label, name, value, helperText, clearable, onChange, onBlur, error, pattern, minLength, maxLength, autocomplete, margin, size, tabIndex, ariaLabel, ref, }: Props$g): react.JSX.Element;
+    displayName: string;
+};
+
+type PopoverPropsType = {
+    /** Action that triggers the popover to open. */
+    actionToOpen?: "click" | "hover";
+    /** Alignment of the popover relative to the trigger element. */
+    align?: "start" | "center" | "end";
+    /** Set to true if child controls the events. It will render the child directly without wrapping it. */
+    asChild?: boolean;
+    /** Element that triggers the popover and works as the anchor. */
+    children: React.ReactNode;
+    /** Whether the popover should display a tip (arrow). */
+    hasTip?: boolean;
+    /** Controlled open state of the popover. If it is left undefined, it will be uncontrolled. */
+    isOpen?: boolean;
+    /** Distance in pixels from the trigger element to the popover. */
+    offset?: number;
+    /** Callback function when the popover is opened.
+     * Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
+    onOpen?: () => void;
+    /** Callback function when the popover is opened and the focus is set to the first focusable element inside the popover.
+     * */
+    onOpenAutoFocus?: (event: Event) => void;
+    /** Callback function when the popover is closed. */
+    onClose?: () => void;
+    /** Callback function when the popover is closed and the focus is set back to the trigger element.
+     * */
+    onCloseAutoFocus?: (event: Event) => void;
+    /** Content to be displayed inside the popover. */
+    popoverContent: React.ReactNode;
+    /** Side of the trigger where the popover will appear. */
+    side?: "top" | "bottom" | "left" | "right";
 };
 
-declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$f & react.RefAttributes<HTMLDivElement>>;
+declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onOpenAutoFocus, onClose, onCloseAutoFocus, popoverContent, side, }: PopoverPropsType) => JSX.Element;
 
 type Size$1 = {
     top?: Space$1;
@@ -2393,7 +2783,7 @@ type Size$1 = {
     left?: Space$1;
     right?: Space$1;
 };
-type Props$e = {
+type Props$f = {
     /**
      * Text to be placed above the progress bar.
      */
@@ -2427,7 +2817,7 @@ type Props$e = {
     ariaLabel?: string;
 };
 
-declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$e) => JSX.Element;
+declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
 
 type Link = {
     /**
@@ -2439,7 +2829,7 @@ type Link = {
      */
     links?: Link[];
 };
-type Props$d = {
+type Props$e = {
     /**
      * Title of the quick nav component.
      */
@@ -2450,8 +2840,12 @@ type Props$d = {
     links: Link[];
 };
 
-declare function DxcQuickNav({ links, title }: Props$d): react_jsx_runtime.JSX.Element;
+declare function DxcQuickNav({ links, title }: Props$e): react.JSX.Element;
 
+/**
+ * Reference to the component.
+ */
+type RefType$5 = React.Ref<HTMLDivElement>;
 type Option$1 = {
     /**
      * Label of the option placed next to the radio input.
@@ -2537,6 +2931,10 @@ type RadioGroupProps = {
      * If true, the component will not be mutable, meaning the user can not edit the control.
      */
     readOnly?: boolean;
+    /**
+     * Reference to the component.
+     */
+    ref?: RefType$5;
     /**
      * Sets the orientation of the options within the radio group.
      */
@@ -2553,7 +2951,10 @@ type RadioGroupProps = {
     value?: string;
 };
 
-declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DxcRadioGroup: {
+    ({ ariaLabel, defaultValue, disabled, error, helperText, label, name, onBlur, onChange, optional, optionalItemLabel, options, readOnly, ref, stacking, tabIndex, value, }: RadioGroupProps): react.JSX.Element;
+    displayName: string;
+};
 
 type Column = {
     /**
@@ -2651,13 +3052,17 @@ type NonPaginatedProps = CommonProps$3 & {
      */
     showGoToPage?: never;
 };
-type Props$c = PaginatedProps | NonPaginatedProps;
+type Props$d = PaginatedProps | NonPaginatedProps;
 
 declare const DxcResultsetTable: {
-    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, virtualizedHeight, }: Props$c): react_jsx_runtime.JSX.Element;
-    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
+    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, virtualizedHeight, }: Props$d): react.JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react.JSX.Element;
 };
 
+/**
+ * Reference to the select component.
+ */
+type RefType$4 = React.Ref<HTMLDivElement>;
 type ListOptionType = {
     /**
      * Element used as the icon that will be placed before the option label.
@@ -2742,10 +3147,20 @@ type CommonProps$2 = {
      * Text to be put as placeholder of the select.
      */
     placeholder?: string;
+    /**
+     * Reference to the select component.
+     */
+    ref?: RefType$4;
     /**
      * If true, enables search functionality.
      */
     searchable?: boolean;
+    /**
+     * Defines the search mode when searchable is true.
+     * If true, matches options that start with the search text.
+     * If false, matches options that contain the search text anywhere in their label.
+     */
+    searchByStartsWith?: boolean;
     /**
      * Size of the component.
      */
@@ -2840,11 +3255,18 @@ type MultipleSelect = CommonProps$2 & {
      */
     value?: string[];
 };
-type Props$b = SingleSelect | MultipleSelect;
+type Props$c = SingleSelect | MultipleSelect;
 
-declare const DxcSelect: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSelect: {
+    ({ ariaLabel, defaultValue, disabled, enableSelectAll, error, helperText, label, margin, multiple, name, onBlur, onChange, optional, options, placeholder, ref, searchable, searchByStartsWith, size, tabIndex, value, virtualizedHeight, }: Props$c): react.JSX.Element;
+    displayName: string;
+};
 
-type Props$a = {
+/**
+ * Reference to the component.
+ */
+type RefType$3 = React.Ref<HTMLDivElement>;
+type Props$b = {
     /**
      * Specifies a string to be used as the name for the slider element when no `label` is provided.
      */
@@ -2901,6 +3323,10 @@ type Props$a = {
      * The new value will be passed as a parameter when this function is executed.
      */
     onDragEnd?: (value: number) => void;
+    /**
+     * Reference to the component.
+     */
+    ref?: RefType$3;
     /**
      * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
      */
@@ -2923,9 +3349,12 @@ type Props$a = {
     value?: number;
 };
 
-declare const DxcSlider: react.ForwardRefExoticComponent<Props$a & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSlider: {
+    ({ ariaLabel, defaultValue, disabled, helperText, label, labelFormatCallback, margin, marks, maxValue, minValue, name, onChange, onDragEnd, ref, showLimitsValues, showInput, size, step, value, }: Props$b): react.JSX.Element;
+    displayName: string;
+};
 
-type Props$9 = {
+type Props$a = {
     /**
      * 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.
      */
@@ -2959,11 +3388,11 @@ type Props$9 = {
     value?: number;
 };
 
-declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$a) => react.JSX.Element;
 
 type Mode = "default" | "info" | "success" | "warning" | "error";
 type Size = "small" | "medium" | "large";
-type Props$8 = {
+type Props$9 = {
     /**
      * It will define the color of the light based on its semantic meaning.
      */
@@ -2978,9 +3407,13 @@ type Props$8 = {
     size?: Size;
 };
 
-declare function DxcStatusLight({ label, mode, size }: Props$8): react_jsx_runtime.JSX.Element;
+declare function DxcStatusLight({ label, mode, size }: Props$9): react.JSX.Element;
 
-type Props$7 = {
+/**
+ * Reference to the component.
+ */
+type RefType$2 = React.Ref<HTMLDivElement>;
+type Props$8 = {
     /**
      * Specifies a string to be used as the name for the switch element when no `label` is provided.
      */
@@ -3024,6 +3457,10 @@ type Props$7 = {
      * If true, the component will display '(Optional)' next to the label.
      */
     optional?: boolean;
+    /**
+     * Reference to the component.
+     */
+    ref?: RefType$2;
     /**
      * Size of the component.
      */
@@ -3039,11 +3476,14 @@ type Props$7 = {
     value?: string;
 };
 
-declare const DxcSwitch: react.ForwardRefExoticComponent<Props$7 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSwitch: {
+    ({ ariaLabel, checked, defaultChecked, disabled, label, labelPosition, margin, name, onChange, optional, ref, size, tabIndex, value, }: Props$8): react.JSX.Element;
+    displayName: string;
+};
 
 declare const DxcTable: {
-    ({ children, margin, mode }: Props$t): react_jsx_runtime.JSX.Element;
-    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
+    ({ children, margin, mode }: Props$u): react.JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react.JSX.Element;
 };
 
 type CommonTabProps = {
@@ -3055,6 +3495,7 @@ type CommonTabProps = {
     children: ReactNode;
     onClick?: () => void;
     onHover?: () => void;
+    ref?: React.Ref<HTMLButtonElement>;
 };
 type TabProps = (CommonTabProps & {
     tabId: string;
@@ -3084,14 +3525,21 @@ type TabsProps = {
      */
     children?: ReactNode;
 };
-type Props$6 = TabsProps;
+type Props$7 = TabsProps;
 
 declare const DxcTabs: {
-    ({ children, iconPosition, margin, tabIndex }: Props$6): react_jsx_runtime.JSX.Element;
-    Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
+    ({ children, iconPosition, margin, tabIndex }: Props$7): react.JSX.Element;
+    Tab: {
+        ({ active, disabled, icon, label, notificationNumber, onClick, onHover, ref, title, tabId, }: TabProps): react.JSX.Element;
+        displayName: string;
+    };
 };
 
-type Props$5 = {
+/**
+ * Reference to the component.
+ */
+type RefType$1 = React.Ref<HTMLDivElement>;
+type Props$6 = {
     /**
      * Specifies a string to be used as the name for the textarea element when no `label` is provided.
      */
@@ -3200,6 +3648,10 @@ type Props$5 = {
      * If true, the component will not be mutable, meaning the user can not edit the control.
      */
     readOnly?: boolean;
+    /**
+     * Reference to the container element of the textarea component.
+     */
+    ref?: RefType$1;
     /**
      * Number of rows of the textarea.
      */
@@ -3225,7 +3677,10 @@ type Props$5 = {
     verticalGrow?: "auto" | "manual" | "none";
 };
 
-declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcTextarea: {
+    ({ ariaLabel, autocomplete, defaultValue, disabled, error, helperText, label, margin, maxLength, minLength, name, onBlur, onChange, optional, pattern, placeholder, readOnly, ref, rows, size, tabIndex, value, verticalGrow, }: Props$6): react.JSX.Element;
+    displayName: string;
+};
 
 type Action$1 = {
     /**
@@ -3243,7 +3698,7 @@ type Action$1 = {
      */
     title?: string;
 };
-type Props$4 = {
+type Props$5 = {
     /**
      * Sets the alignment inside the input.
      */
@@ -3290,6 +3745,10 @@ type Props$4 = {
      * and the custom action will not execute its onClick event.
      */
     readOnly?: boolean;
+    /**
+     * Ref to the input element.
+     */
+    ref?: React.Ref<HTMLInputElement>;
     /**
      * If true, the input will be optional, showing '(Optional)'
      * next to the label. Otherwise, the field will be considered required and an error will be
@@ -3396,7 +3855,107 @@ type Props$4 = {
     ariaLabel?: string;
 };
 
-declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcTextInput: {
+    ({ alignment, action, ariaLabel, autocomplete, clearable, defaultValue, disabled, error, helperText, label, margin, maxLength, minLength, name, optional, placeholder, prefix, readOnly, suffix, onBlur, onChange, pattern, ref, size, suggestions, tabIndex, value, }: Props$5): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Reference to the component.
+ */
+type RefType = React.Ref<HTMLDivElement>;
+type Props$4 = {
+    /**
+     * Specifies a string to be used as the name for the timeInput element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, the input will have an action to clear the entered value.
+     */
+    clearable?: boolean;
+    /**
+     * Initial value of the input, only when it is uncontrolled.
+     */
+    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 input component. 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 input.
+     */
+    helperText?: string;
+    /**
+     * Text to be placed above the input.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the input 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;
+    /**
+     * This function will be called when the user types within the input
+     * or selects a value in the dropdown element of the component.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, the input 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 function when it has
+     * not been filled.
+     */
+    optional?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     * In addition, the clear action will not be displayed even if the flag is set to true.
+     */
+    readOnly?: boolean;
+    /**
+     * Reference to the component.
+     */
+    ref?: RefType;
+    /**
+     * If true, the component will display seconds and allow the user to input them. Otherwise, seconds will not be shown and the user will not be able to input them.
+     */
+    showSeconds?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Time format of the input. It can be either 12 or 24.
+     */
+    timeFormat?: "12" | "24";
+    /**
+     * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+};
+
+declare const DxcTimeInput: ({ ariaLabel, clearable, defaultValue, disabled, error, helperText, label, name, optional, readOnly, onBlur, onChange, ref, showSeconds, size, tabIndex, timeFormat, value, }: Props$4) => react.JSX.Element;
 
 type Action = {
     /**
@@ -3451,7 +4010,7 @@ type ToastsQueuePropsType = {
     duration?: number;
 };
 
-declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react_jsx_runtime.JSX.Element;
+declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react.JSX.Element;
 
 type OptionIcon = {
     /**
@@ -3554,7 +4113,7 @@ type SingleSelectionToggleGroup = {
 };
 type Props$3 = CommonProps & (MultipleSelectionToggleGroup | SingleSelectionToggleGroup);
 
-declare function DxcToggleGroup({ defaultValue, margin, multiple, onChange, options, orientation, tabIndex, value, }: Props$3): react_jsx_runtime.JSX.Element;
+declare function DxcToggleGroup({ defaultValue, margin, multiple, onChange, options, orientation, tabIndex, value, }: Props$3): react.JSX.Element;
 
 type Props$2 = {
     /**
@@ -3571,7 +4130,7 @@ type Props$2 = {
     position?: "bottom" | "top" | "left" | "right";
 };
 
-declare const DxcTooltip: (props: Props$2) => react_jsx_runtime.JSX.Element;
+declare const DxcTooltip: (props: Props$2) => react.JSX.Element;
 
 type Props$1 = {
     as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
@@ -3590,7 +4149,7 @@ type Props$1 = {
     whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
 };
 
-declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
+declare function DxcTypography({ children, ...props }: Props$1): react.JSX.Element;
 
 type StepProps = {
     /**
@@ -3606,7 +4165,7 @@ type StepProps = {
      */
     icon?: string | SVG;
     /**
-     * Whether the step is disabled or not.
+     * If true, the step will be disabled.
      */
     disabled?: boolean;
     /**
@@ -3647,7 +4206,7 @@ type Props = {
     tabIndex?: number;
 };
 
-declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react_jsx_runtime.JSX.Element;
+declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react.JSX.Element;
 
 declare const defaultTranslatedComponentLabels: {
     applicationLayout: {
@@ -3665,8 +4224,12 @@ declare const defaultTranslatedComponentLabels: {
         previousMonthTitle: string;
         nextMonthTitle: string;
     };
+    card: {
+        noContent: string;
+    };
     dateInput: {
         invalidDateErrorMessage: string;
+        datePickerActionTitle: string;
     };
     dialog: {
         closeIconAriaLabel: string;
@@ -3689,13 +4252,21 @@ declare const defaultTranslatedComponentLabels: {
         requiredSelectionErrorMessage: string;
         requiredValueErrorMessage: string;
         formatRequestedErrorMessage: string;
-        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
-        logoAlternativeText: string;
+        minLengthErrorMessage: (minLength: number) => string;
+        maxLengthErrorMessage: (maxLength: number) => string;
     };
     header: {
         closeIcon: string;
         hamburgerTitle: string;
     };
+    messageInput: {
+        inputAriaLabel: string;
+        sendButtonTitle: string;
+        stopButtonTitle: string;
+        attachFileButtonTitle: string;
+        recordAudioButtonTitle: string;
+        stopRecordingButtonTitle: string;
+    };
     numberInput: {
         valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
         valueLessThanOrEqualToErrorMessage: (value: number) => string;
@@ -3722,6 +4293,12 @@ declare const defaultTranslatedComponentLabels: {
     radioGroup: {
         optionalItemLabelDefault: string;
     };
+    searchBar: {
+        clearFieldActionTitle: string;
+        inputAriaLabel: string;
+        triggerTitle: string;
+        cancelButtonLabel: string;
+    };
     select: {
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
@@ -3737,11 +4314,20 @@ declare const defaultTranslatedComponentLabels: {
         searchingMessage: string;
         fetchingDataErrorMessage: string;
     };
+    timeInput: {
+        timePickerActionTitle: string;
+        timePeriodAM: string;
+        timePeriodPM: string;
+    };
     toast: {
         clearToastActionTitle: string;
     };
 };
 type TranslatedLabels = typeof defaultTranslatedComponentLabels;
+type LocalizedContext = {
+    labels: TranslatedLabels;
+    locale?: string;
+};
 
 /**
  * This type is used to allow labels objects to be passed to the HalstackProvider.
@@ -3750,105 +4336,18 @@ type TranslatedLabels = typeof defaultTranslatedComponentLabels;
 type DeepPartial<T> = {
     [P in keyof T]?: Partial<T[P]>;
 };
-declare const HalstackLanguageContext: react.Context<{
-    applicationLayout: {
-        visibilityToggleTitle: string;
-    };
-    alert: {
-        previousMessageActionTitle: string;
-        nextMessageActionTitle: string;
-        closeAlertActionTitle: string;
-        closeMessageActionTitle: string;
-    };
-    calendar: {
-        daysShort: string[];
-        months: string[];
-        previousMonthTitle: string;
-        nextMonthTitle: string;
-    };
-    dateInput: {
-        invalidDateErrorMessage: string;
-    };
-    dialog: {
-        closeIconAriaLabel: string;
-    };
-    fileInput: {
-        fileSizeGreaterThanErrorMessage: string;
-        fileSizeLessThanErrorMessage: string;
-        multipleButtonLabelDefault: string;
-        singleButtonLabelDefault: string;
-        dropAreaButtonLabelDefault: string;
-        multipleDropAreaLabelDefault: string;
-        singleDropAreaLabelDefault: string;
-        deleteFileActionTitle: string;
-    };
-    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;
-        hamburgerTitle: string;
-    };
-    numberInput: {
-        valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
-        valueLessThanOrEqualToErrorMessage: (value: number) => string;
-        decrementValueTitle: string;
-        incrementValueTitle: string;
-    };
-    paginator: {
-        itemsPerPageText: string;
-        minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
-        goToPageText: string;
-        pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
-        firstResultsTitle: string;
-        previousResultsTitle: string;
-        nextResultsTitle: string;
-        lastResultsTitle: string;
-    };
-    passwordInput: {
-        inputShowPasswordTitle: string;
-        inputHidePasswordTitle: string;
-    };
-    quickNav: {
-        contentTitle: string;
-    };
-    radioGroup: {
-        optionalItemLabelDefault: string;
-    };
-    select: {
-        actionClearSelectionTitle: string;
-        actionClearSearchTitle: string;
-        noMatchesErrorMessage: string;
-        selectAllLabel: string;
-    };
-    tabs: {
-        scrollLeft: string;
-        scrollRight: string;
-    };
-    textInput: {
-        clearFieldActionTitle: string;
-        searchingMessage: string;
-        fetchingDataErrorMessage: string;
-    };
-    toast: {
-        clearToastActionTitle: string;
-    };
-}>;
-type ThemeType = Record<string, string | number>;
+declare const HalstackLanguageContext: react.Context<LocalizedContext>;
+type ThemeType = {
+    tokens?: Record<string, string | number>;
+    logos?: Record<string, string | undefined>;
+};
 type HalstackProviderPropsType = {
     labels?: DeepPartial<TranslatedLabels>;
     children: ReactNode;
     opinionatedTheme?: ThemeType;
+    localeTag?: string;
 };
-declare const HalstackProvider: ({ labels, children, opinionatedTheme }: HalstackProviderPropsType) => JSX.Element;
+declare const HalstackProvider: ({ labels, children, opinionatedTheme, localeTag, }: HalstackProviderPropsType) => JSX.Element;
 
 declare function useToast(): {
     default: (toast: DefaultToast) => (() => void) | undefined;
@@ -3858,4 +4357,4 @@ declare function useToast(): {
     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, HalstackLanguageContext, HalstackProvider, useToast };
+export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcAvatar, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcMessageInput, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcPopover, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcTimeInput, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };