@dxc-technology/halstack-react 17.0.0 → 17.1.0

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as react from 'react';
 import { ReactNode, SVGProps, ReactElement, ReactEventHandler } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { SortColumn } from 'react-data-grid';
 import * as _emotion_styled from '@emotion/styled';
 import * as _emotion_react from '@emotion/react';
@@ -112,10 +111,10 @@ type NonIndependentProps = CommonProps$a & {
      */
     onActiveChange?: (index: number[]) => void;
 };
-type Props$L = IndependentProps | NonIndependentProps;
+type Props$M = IndependentProps | NonIndependentProps;
 
 declare const DxcAccordion: {
-    (props: Props$L): JSX.Element;
+    (props: Props$M): JSX.Element;
     AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
 };
 
@@ -198,9 +197,9 @@ type ModeSpecificProps = {
      */
     mode: "modal";
 };
-type Props$K = CommonProps$9 & ModeSpecificProps;
+type Props$L = CommonProps$9 & ModeSpecificProps;
 
-declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$K) => react_jsx_runtime.JSX.Element;
+declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$L) => react.JSX.Element;
 
 type SearchBarProps = {
     /**
@@ -254,7 +253,7 @@ type Section$1 = {
     items: (Item$1 | GroupItem$1)[];
     title?: string;
 };
-type Props$J = {
+type Props$K = {
     /**
      * Array of items to be displayed in the menu.
      * Each item can be a single/simple item, a group item or a section.
@@ -280,6 +279,11 @@ type Props$J = {
      * If true the menu will be displayed horizontally.
      */
     isHorizontal?: boolean;
+    /**
+     * 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.
+     */
+    onSelectItem?: () => void;
 };
 
 type Section = {
@@ -287,7 +291,7 @@ type Section = {
     title?: string;
 };
 type SearchbarSidenavProps = Omit<SearchBarProps, "autoFocus" | "disabled" | "onCancel">;
-type Props$I = {
+type Props$J = {
     /**
      * The content rendered in the bottom part of the sidenav, under the navigation menu.
      */
@@ -333,7 +337,7 @@ type GroupItem = CommonItemProps & {
 };
 type MainNavPropsType = (GroupItem | Item$1)[];
 type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">;
-type Props$H = {
+type Props$I = {
     appTitle?: string;
     navItems?: MainNavPropsType;
     responsiveBottomContent?: ReactNode;
@@ -465,9 +469,9 @@ type ApplicationLayoutPropsType = {
 declare const DxcApplicationLayout: {
     ({ 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$H) => JSX.Element;
+    Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$I) => JSX.Element;
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$I) => JSX.Element;
+    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$J) => JSX.Element;
 };
 
 type Size$5 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
@@ -477,7 +481,7 @@ interface Status {
     mode: "default" | "info" | "success" | "warning" | "error";
     position: "top" | "bottom";
 }
-type Props$G = {
+type Props$H = {
     /**
      * Affects the visual style of the avatar. It can be used following semantic purposes or not.
      */
@@ -538,7 +542,7 @@ type Props$G = {
     title?: string;
 };
 
-declare const DxcAvatar: react.MemoExoticComponent<({ color, disabled, icon, imageSrc, label, linkHref, onClick, primaryText, secondaryText, shape, size, status, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element>;
+declare const DxcAvatar: react.ForwardRefExoticComponent<Props$H & react.RefAttributes<HTMLDivElement>>;
 
 type ContextualProps = {
     /**
@@ -590,11 +594,11 @@ type CommonProps$8 = {
      */
     size?: "small" | "medium" | "large";
 };
-type Props$F = (ContextualProps | NotificationProps) & CommonProps$8;
+type Props$G = (ContextualProps | NotificationProps) & CommonProps$8;
 
-declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$F) => JSX.Element;
+declare const DxcBadge: react.ForwardRefExoticComponent<Props$G & react.RefAttributes<HTMLDivElement>>;
 
-type Props$E = {
+type Props$F = {
     /**
      * Applies the spacing scale to all sides.
      */
@@ -629,13 +633,13 @@ type Props$E = {
     children: ReactNode;
 };
 
-declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$E) => react_jsx_runtime.JSX.Element;
+declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$F) => react.JSX.Element;
 
 type Item = {
     href?: string;
     label: string;
 };
-type Props$D = {
+type Props$E = {
     /**
      * Provides a label that describes the type of navigation enabled by
      * the component.
@@ -667,7 +671,7 @@ type Props$D = {
     showRoot?: boolean;
 };
 
-declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$D) => react_jsx_runtime.JSX.Element;
+declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$E) => react.JSX.Element;
 
 type IconProps = {
     /**
@@ -697,7 +701,7 @@ type OtherProps = {
      */
     children: ReactNode;
 };
-type Props$C = IconProps | OtherProps;
+type Props$D = IconProps | OtherProps;
 type BulletedListItemPropsType = {
     /**
      * Text to be shown in the list.
@@ -706,7 +710,7 @@ type BulletedListItemPropsType = {
 };
 
 declare const DxcBulletedList: {
-    ({ children, type, icon }: Props$C): JSX.Element;
+    ({ children, type, icon }: Props$D): JSX.Element;
     Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
 };
 
@@ -719,7 +723,7 @@ type Size$4 = {
     height?: "small" | "medium" | "large";
     width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
 };
-type Props$B = {
+type Props$C = {
     /**
      * Text to be placed in the button.
      */
@@ -771,9 +775,9 @@ type Props$B = {
     tabIndex?: number;
 };
 
-declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$B) => JSX.Element;
+declare const DxcButton: react.ForwardRefExoticComponent<Props$C & react.RefAttributes<HTMLButtonElement>>;
 
-type Props$A = {
+type Props$B = {
     /**
      * Alternative text description displayed when the specified image is not loaded.
      *
@@ -843,7 +847,7 @@ type Size$3 = {
     width?: "fillParent" | "fitContent";
     height?: "fillParent" | "fitContent";
 };
-type Props$z = {
+type Props$A = {
     /**
      * Custom content that will be placed inside the component.
      */
@@ -872,7 +876,7 @@ type Props$z = {
     /**
      * Image to be displayed inside the card.
      */
-    image?: Props$A;
+    image?: Props$B;
     /**
      * Position of the image inside the card. It can be set to "before" or "after" the content.
      */
@@ -931,9 +935,9 @@ type Props$z = {
     tabIndex?: number;
 };
 
-declare const DxcCard: react.ForwardRefExoticComponent<Props$z & react.RefAttributes<HTMLAnchorElement>>;
+declare const DxcCard: react.ForwardRefExoticComponent<Props$A & react.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 
-type Props$y = {
+type Props$z = {
     /**
      * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
      */
@@ -998,13 +1002,13 @@ type Props$y = {
     value?: string;
 };
 
-declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
+declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$z & react.RefAttributes<HTMLDivElement>>;
 
 type ChipAvatarType = {
-    color: Props$G["color"];
-    profileName?: Props$G["label"];
-    imageSrc?: Props$G["imageSrc"];
-    icon?: Props$G["icon"];
+    color: Props$H["color"];
+    profileName?: Props$H["label"];
+    imageSrc?: Props$H["imageSrc"];
+    icon?: Props$H["icon"];
 };
 type CommonProps$7 = {
     /**
@@ -1071,9 +1075,9 @@ type DismissibleChipProps = CommonProps$7 & {
     selected?: never;
     disabled?: never;
 };
-type Props$x = SelectableChipProps | DismissibleChipProps;
+type Props$y = SelectableChipProps | DismissibleChipProps;
 
-declare const DxcChip: ({ disabled, label, mode, onClick, prefix, selected, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element | null;
+declare const DxcChip: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
 
 type Space = {
     top?: string;
@@ -1116,7 +1120,7 @@ type Overflow = OverflowValues | {
     x?: OverflowValues;
     y?: OverflowValues;
 };
-type Props$w = {
+type Props$x = {
     /**
      * Based on the CSS property background allows configuring all properties related to the background of a container.
      *
@@ -1238,11 +1242,11 @@ type Props$w = {
     zIndex?: "auto" | number;
 };
 
-declare const DxcContainer: react.ForwardRefExoticComponent<Props$w & react.RefAttributes<HTMLDivElement>>;
+declare const DxcContainer: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
 
-type Props$v = Omit<Props$J, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
+type Props$w = Omit<Props$K, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
 
-declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
+declare function DxcContextualMenu({ items }: Props$w): react.JSX.Element;
 
 type Size$2 = "small" | "medium" | "large" | "fillParent" | "fitContent";
 type Option$2 = {
@@ -1258,8 +1262,12 @@ type Option$2 = {
      * Option inner value.
      */
     value: string;
+    /**
+     * Whether the option has a divider below it.
+     */
+    hasDivider?: boolean;
 };
-type Props$u = {
+type Props$v = {
     /**
      * An array of objects representing the options.
      */
@@ -1342,7 +1350,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.
@@ -1576,14 +1584,14 @@ 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) => react.JSX.Element;
 };
 
-type Props$r = {
+type Props$s = {
     /**
      * Initial value of the input element, only when it is uncontrolled.
      */
@@ -1689,9 +1697,9 @@ type Props$r = {
     ariaLabel?: string;
 };
 
-declare const DxcDateInput: react.ForwardRefExoticComponent<Props$r & react.RefAttributes<HTMLDivElement>>;
+declare const DxcDateInput: react.ForwardRefExoticComponent<Props$s & react.RefAttributes<HTMLDivElement>>;
 
-type Props$q = {
+type Props$r = {
     /**
      * If true, the close button will be visible.
      */
@@ -1731,9 +1739,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.
      */
@@ -1754,9 +1762,9 @@ 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$u) => 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;
 
 type FileData = {
     /**
@@ -1866,9 +1874,9 @@ 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: react.ForwardRefExoticComponent<Props$p & react.RefAttributes<HTMLDivElement>>;
 
 type Gap$1 = {
     rowGap: string;
@@ -1903,7 +1911,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.
      *
@@ -1960,7 +1968,7 @@ type Props$n = CommonProps$4 & {
     children: ReactNode;
 };
 
-declare const DxcFlex: ({ basis, direction, fullHeight, 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;
@@ -2018,7 +2026,7 @@ type GridItemProps = {
      */
     row?: number | string | GridCell;
 };
-type Props$m = GridItemProps & {
+type Props$n = GridItemProps & {
     /**
      * Sets the grid-auto-columns CSS property.
      *
@@ -2076,14 +2084,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.
@@ -2109,11 +2117,11 @@ type Props$l = {
     margin?: Space$1 | Margin;
 };
 
-declare function DxcHeading({ as, level, margin, text, weight }: Props$l): react_jsx_runtime.JSX.Element;
+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$A): 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$k = {
+type Props$l = {
     /**
      * Applies the spacing scale to the bottom side.
      */
@@ -2148,7 +2156,7 @@ type Props$k = {
     vertical?: string;
 };
 
-declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$k): react_jsx_runtime.JSX.Element;
+declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$l): react.JSX.Element;
 
 type LinkProps = {
     /**
@@ -2197,6 +2205,121 @@ type LinkProps = {
 
 declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
+type SelectOption = {
+    label?: string;
+    value: string;
+    onSelect: (value: string) => void;
+    selected?: boolean;
+};
+type Props$k = {
+    /**
+     * 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 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 = {
     /**
      * Whether the tab is active or not.
@@ -2422,7 +2545,7 @@ declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, t
 
 declare function DxcParagraph({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 type Props$g = {
     /**
@@ -2548,15 +2671,21 @@ type PopoverPropsType = {
     /** 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 DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onClose, popoverContent, side, }: PopoverPropsType) => JSX.Element;
+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;
@@ -2621,7 +2750,7 @@ type Props$e = {
     links: Link[];
 };
 
-declare function DxcQuickNav({ links, title }: Props$e): react_jsx_runtime.JSX.Element;
+declare function DxcQuickNav({ links, title }: Props$e): react.JSX.Element;
 
 type Option$1 = {
     /**
@@ -2825,8 +2954,8 @@ type NonPaginatedProps = CommonProps$3 & {
 type Props$d = PaginatedProps | NonPaginatedProps;
 
 declare const DxcResultsetTable: {
-    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, virtualizedHeight, }: Props$d): 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;
 };
 
 type ListOptionType = {
@@ -3136,7 +3265,7 @@ type Props$a = {
     value?: number;
 };
 
-declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$a) => 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";
@@ -3155,7 +3284,7 @@ type Props$9 = {
     size?: Size;
 };
 
-declare function DxcStatusLight({ label, mode, size }: Props$9): react_jsx_runtime.JSX.Element;
+declare function DxcStatusLight({ label, mode, size }: Props$9): react.JSX.Element;
 
 type Props$8 = {
     /**
@@ -3219,8 +3348,8 @@ type Props$8 = {
 declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
 
 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 = {
@@ -3264,7 +3393,7 @@ type TabsProps = {
 type Props$7 = TabsProps;
 
 declare const DxcTabs: {
-    ({ children, iconPosition, margin, tabIndex }: Props$7): react_jsx_runtime.JSX.Element;
+    ({ children, iconPosition, margin, tabIndex }: Props$7): react.JSX.Element;
     Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
@@ -3717,7 +3846,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 = {
     /**
@@ -3820,7 +3949,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 = {
     /**
@@ -3837,7 +3966,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";
@@ -3856,7 +3985,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 = {
     /**
@@ -3913,7 +4042,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: {
@@ -3966,6 +4095,14 @@ declare const defaultTranslatedComponentLabels: {
         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;
@@ -4080,6 +4217,14 @@ declare const HalstackLanguageContext: react.Context<{
         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;
@@ -4153,4 +4298,4 @@ declare function useToast(): {
     loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
 };
 
-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, 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 };
+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 };