@dxc-technology/halstack-react 0.0.0-f319e71 → 0.0.0-f35154e

package/dist/index.d.mts

@@ -0,0 +1,3857 @@
+import * as react from 'react';
+import { ReactNode, SVGProps, ReactElement, MouseEvent, ReactEventHandler } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SortColumn } from 'react-data-grid';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+
+type Space$1 = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
+};
+type SVG = ReactNode & SVGProps<SVGSVGElement>;
+
+type AccordionItemProps = {
+    /**
+     * The panel label.
+     */
+    label: string;
+    /**
+     * Additional info label positioned under the label.
+     */
+    subLabel?: string;
+    /**
+     * Badge component to add extra value to the accordion.
+     */
+    badge?: {
+        position: "before" | "after";
+        element: ReactNode;
+    };
+    /**
+     * Status light component to add extra value to the accordion.
+     */
+    statusLight?: ReactNode;
+    /**
+     * Material Symbol name or SVG element used as the icon that will be
+     * placed next to panel label. When using Material Symbols, replace spaces with underscores.
+     * By default they are outlined if you want it to be filled
+     * prefix the symbol name with "filled_".
+     */
+    icon?: string | SVG;
+    /**
+     * Assistive text to be placed on the right side of the panel.
+     */
+    assistiveText?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The expanded panel of the accordion. This area can be used to render
+     * custom content.
+     */
+    children: ReactNode;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+type CommonProps$9 = {
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Contains one or more accordion items.
+     */
+    children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
+};
+type IndependentProps = CommonProps$9 & {
+    /**
+     * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
+     */
+    independent: true;
+    /**
+     * Initially active accordion, only when it is uncontrolled.If the accordion is not independent,
+     * several accordions can be activated by default.
+     */
+    defaultIndexActive?: number;
+    /**
+     * The index of the active accordion. If undefined, the component will be uncontrolled and the active
+     * accordion will be managed internally by the component. If null, the component will be controlled and all
+     * accordions will be closed. If the accordion is not independent, several accordions can be activated.
+     */
+    indexActive?: number;
+    /**
+     * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
+     */
+    onActiveChange?: (index: number) => void;
+};
+type NonIndependentProps = CommonProps$9 & {
+    /**
+     * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
+     */
+    independent?: false;
+    /**
+     * Initially active accordion, only when it is uncontrolled. If the accordion is not independent,
+     * several accordions can be activated by default.
+     */
+    defaultIndexActive?: number[];
+    /**
+     * The index of the active accordion. If undefined, the component will be uncontrolled and the active
+     * accordion will be managed internally by the component. If null, the component will be controlled and all
+     * accordions will be closed. If the accordion is not independent, several accordions can be activated.
+     */
+    indexActive?: number[];
+    /**
+     * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
+     */
+    onActiveChange?: (index: number[]) => void;
+};
+type Props$I = IndependentProps | NonIndependentProps;
+
+declare const DxcAccordion: {
+    (props: Props$I): JSX.Element;
+    AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
+};
+
+type Action$2 = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
+    icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
+    label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
+    onClick: () => void;
+};
+type Message = {
+    /**
+     * The function that will be executed when the user clicks on the close action button.
+     */
+    onClose?: () => void;
+    /**
+     * The content of the message. The only Halstack component allowed within the text of an alert is the Link component,
+     * and it should be used exclusively to direct users to additional resources or relevant pages.
+     * No other components are permitted within the content of an alert.
+     */
+    text: ReactNode;
+};
+type CommonProps$8 = {
+    /**
+     * If true, the alert will have a close button that will remove the message from the alert,
+     * only in banner and inline modes. The rest of the functionality will depend
+     * on the onClose event of each message (e.g. closing the modal alert).
+     */
+    closable?: boolean;
+    /**
+     * Primary action of the alert.
+     */
+    primaryAction?: Action$2;
+    /**
+     * Secondary action of the alert.
+     */
+    secondaryAction?: Action$2;
+    /**
+     * Specifies the semantic meaning of the alert.
+     */
+    semantic?: "error" | "info" | "success" | "warning";
+    /**
+     * Title of the alert.
+     */
+    title: string;
+};
+type ModeSpecificProps = {
+    /**
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
+     */
+    message?: Message | Message[];
+    /**
+     * The mode of the alert.
+     */
+    mode?: "inline" | "banner";
+} | {
+    /**
+     * List of messages to be displayed. Each message has a close action that will,
+     * apart from remove from the alert the current message, call the onClose if it is defined.
+     * If the message is an array, the alert will show a navigation bar to move between the messages.
+     * The modal mode only allows one message per alert. In this case, the message must be an object
+     * and the presence of the onClose attribute is mandatory, since the management of the closing
+     * of the alert relies completely on the user.
+     */
+    message: Required<Message>;
+    /**
+     * The mode of the alert.
+     */
+    mode: "modal";
+};
+type Props$H = CommonProps$8 & ModeSpecificProps;
+
+declare function DxcAlert({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$H): react_jsx_runtime.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 = {
+    /**
+     * The title of the sidenav group.
+     */
+    title?: string;
+    /**
+     * 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.
+     */
+    collapsable?: boolean;
+    /**
+     * Material Symbol name or SVG icon to be displayed next to the title of the group.
+     */
+    icon?: string | SVG;
+    /**
+     * The area inside the sidenav group. This area can be used to render sidenav links.
+     */
+    children: ReactNode;
+};
+type SidenavLinkPropsType = {
+    /**
+     * Page to be opened when the user clicks on the link.
+     */
+    href?: string;
+    /**
+     * If true, the page is opened in a new browser tab.
+     */
+    newWindow?: boolean;
+    /**
+     * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
+     */
+    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.
+     */
+    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;
+};
+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 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 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";
+    /**
+     * 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$4;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Text representing advisory information related to the dropdown's trigger action.
+     * Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
+};
+
+type Logo$1 = {
+    /**
+     * URL to navigate when the logo is clicked.
+     */
+    href?: string;
+    /**
+     * Source of the logo image.
+     */
+    src: string;
+    /**
+     * Alternative text for the logo image.
+     */
+    title?: string;
+};
+type Props$E = {
+    /**
+     * Whether a contrast line should appear at the bottom of the header.
+     */
+    underlined?: 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 React.Fragment
+     * to be applied correctly. Otherwise, the styles can be modified.
+     */
+    content?: ReactNode;
+    /**
+     * Content shown in responsive version. It receives the close menu handler that can
+     * be used to add that functionality when a element is clicked.
+     */
+    responsiveContent?: (closeHandler: () => void) => ReactNode;
+    /**
+     * Logo to be displayed inside the header
+     */
+    logo?: Logo$1;
+    /**
+     * Size of the bottom margin to be applied to the header.
+     */
+    margin?: Space$1;
+    /**
+     * This function will be called when the user clicks the header logo.
+     */
+    onClick?: () => void;
+    /**
+     * Value of the tabindex for all interactive elements, except those inside the
+     * custom area.
+     */
+    tabIndex?: number;
+};
+
+type SocialLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
+    /**
+     * Material Symbol name or SVG element as the icon used for the link.
+     */
+    logo: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title: string;
+};
+type BottomLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
+    /**
+     * Text for the link.
+     */
+    text: string;
+};
+type Logo = {
+    /**
+     * URL to navigate when the logo is clicked.
+     */
+    href?: string;
+    /**
+     * Source of the logo image.
+     */
+    src: string;
+    /**
+     * Alternative text for the logo image.
+     */
+    title?: string;
+};
+type FooterPropsType = {
+    /**
+     * An array of objects representing the links that will be rendered at
+     * the bottom part of the footer.
+     */
+    bottomLinks?: BottomLink[];
+    /**
+     * The center section of the footer. Can be used to render custom
+     * content in this area.
+     */
+    children?: ReactNode;
+    /**
+     * The text that will be displayed as copyright disclaimer.
+     */
+    copyright?: string;
+    /**
+     * Logo to be displayed inside the footer
+     */
+    logo?: Logo;
+    /**
+     * Size of the top margin to be applied to the footer.
+     */
+    margin?: Space$1;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with full content and styling.
+     * - "reduced": A reduced mode with minimal content and styling.
+     */
+    mode?: "default" | "reduced";
+    /**
+     * An array of objects representing the links that will be rendered as
+     * icons at the top-right side of the footer.
+     */
+    socialLinks?: SocialLink[];
+    /**
+     * Value of the tabindex for all interactive elements, except those
+     * inside the custom area.
+     */
+    tabIndex?: number;
+};
+
+type AppLayoutMainPropsType = {
+    /**
+     * Everything between the tags will be displayed as the content of the main part of the application.
+     */
+    children: ReactNode;
+};
+type ApplicationLayoutPropsType = {
+    /**
+     * Text to be placed next to the hamburger button that toggles the
+     * visibility of the sidenav.
+     */
+    visibilityToggleLabel?: string;
+    /**
+     * Header content.
+     */
+    header?: ReactNode;
+    /**
+     * Sidenav content
+     */
+    sidenav?: ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: ReactNode;
+    /**
+     * Use the DxcApplicationLayout.Main provided to render main content.
+     */
+    children: ReactElement<AppLayoutMainPropsType>;
+};
+
+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;
+    };
+    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;
+};
+
+type ContextualProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label: string;
+    /**
+     * The available badge modes.
+     */
+    mode?: "contextual";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: never;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
+};
+type NotificationProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label?: number;
+    /**
+     * The available badge modes.
+     */
+    mode: "notification";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: number;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: never;
+};
+type CommonProps$7 = {
+    /**
+     * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
+    /**
+     *  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;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large";
+};
+type Props$D = (ContextualProps | NotificationProps) & CommonProps$7;
+
+declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$D) => JSX.Element;
+
+type Props$C = {
+    /**
+     * Applies the spacing scale to all sides.
+     */
+    space?: string;
+    /**
+     * Applies the spacing scale to the left and right sides.
+     */
+    horizontal?: string;
+    /**
+     * Applies the spacing scale to the top and bottom sides.
+     */
+    vertical?: string;
+    /**
+     * Applies the spacing scale to the top side.
+     */
+    top?: string;
+    /**
+     * Applies the spacing scale to the right side.
+     */
+    right?: string;
+    /**
+     * Applies the spacing scale to the bottom side.
+     */
+    bottom?: string;
+    /**
+     * Applies the spacing scale to the left side.
+     */
+    left?: string;
+    /**
+     * Custom content inside the bleed.
+     */
+    children: ReactNode;
+};
+
+declare function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }: Props$C): react_jsx_runtime.JSX.Element;
+
+type Item$1 = {
+    href?: string;
+    label: string;
+};
+type Props$B = {
+    /**
+     * Provides a label that describes the type of navigation enabled by
+     * the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of objects representing the items of the breadcrumbs.
+     */
+    items: Item$1[];
+    /**
+     * Number of items before showing a collapsed version of the
+     * breadcrumbs. It can't be lower than two (root/collapsed action and
+     * current page).
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Callback for custom navigation with third-party libraries such as
+     * Next ('useRouter') or React Router ('useNavigate').
+     * This function will be called when an item is clicked,
+     * receiving its 'href' as a parameter.
+     * @param href
+     * @returns
+     */
+    onItemClick?: (href: string) => void;
+    /**
+     * When items are collapsed, whether the root item should always be
+     * displayed or not.
+     */
+    showRoot?: boolean;
+};
+
+declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$B) => react_jsx_runtime.JSX.Element;
+
+type IconProps = {
+    /**
+     * Defines the style of the bullet point in the list.
+     */
+    type: "icon";
+    /**
+     * Icon to display as bullet.
+     */
+    icon: string | SVG;
+    /**
+     * Text to be shown in the list.
+     */
+    children: ReactNode;
+};
+type OtherProps = {
+    /**
+     * Defines the style of the bullet point in the list.
+     */
+    type?: "disc" | "circle" | "square" | "number";
+    /**
+     * Icon to display as bullet.
+     */
+    icon?: never;
+    /**
+     * Text to be shown in the list.
+     */
+    children: ReactNode;
+};
+type Props$A = IconProps | OtherProps;
+
+type BulletedListItemPropsType = {
+    /**
+     * Text to be shown in the list.
+     */
+    children?: ReactNode;
+};
+
+declare const DxcBulletedList: {
+    ({ children, type, icon }: Props$A): JSX.Element;
+    Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
+};
+
+type Semantic = "default" | "error" | "warning" | "success" | "info";
+type Mode$1 = "primary" | "secondary" | "tertiary";
+type Size$3 = {
+    /**
+     * 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;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the icon should appear after or before the label.
+     */
+    iconPosition?: "before" | "after";
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title?: string;
+    /**
+     * 'type' html prop of the button.
+     */
+    type?: "button" | "reset" | "submit";
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
+     */
+    icon?: string | SVG;
+    /**
+     * 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.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: Size$3;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+
+declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$z) => JSX.Element;
+
+type Size$2 = {
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
+};
+type Props$y = {
+    /**
+     * 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.
+     */
+    imageSrc?: string;
+    /**
+     * Color of the image background.
+     */
+    imageBgColor?: 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.
+     */
+    imagePadding?: Space$1 | Size$2;
+    /**
+     * Whether the image should appear in relation to the content.
+     */
+    imagePosition?: "before" | "after";
+    /**
+     * If defined, the tag will be displayed as an anchor, using this prop
+     * as "href". Component will show some visual feedback on hover.
+     */
+    linkHref?: string;
+    /**
+     * This function will be called when the user clicks the card. Component
+     * will show some visual feedback on hover.
+     */
+    onClick?: () => void;
+    /**
+     * Whether the image must cover the whole image area of the card.
+     */
+    imageCover?: boolean;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Size$2;
+    /**
+     * Value of the tabindex attribute applied when the component is clickable.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether or not the component should have an outline.
+     */
+    outlined?: boolean;
+    /**
+     * Custom content that will be placed inside the component.
+     */
+    children?: ReactNode;
+};
+
+declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$y) => react_jsx_runtime.JSX.Element;
+
+type Props$x = {
+    /**
+     * Specifies a string to be used as the name for the checkbox element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, the component is checked. If undefined the component will be
+     * uncontrolled and the value will be managed internally by the component.
+     */
+    checked?: boolean;
+    /**
+     * Initial state of the checkbox, only when it is uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Text to be placed next to the checkbox.
+     */
+    label?: string;
+    /**
+     * Whether the label should appear after or before the checkbox.
+     */
+    labelPosition?: "before" | "after";
+    /**
+     * Size of the margin to be applied to the component
+     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
+     * in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the user clicks the checkbox.
+     * The new value will be passed as a parameter.
+     */
+    onChange?: (value: boolean) => void;
+    /**
+     * If true, the component will display '(Optional)' next to the label.
+     */
+    optional?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+    /**
+     * Will be passed to the value attribute of the html input element.
+     * When inside a form, this value will be only submitted if the checkbox is checked.
+     */
+    value?: string;
+};
+
+declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$x & react.RefAttributes<HTMLDivElement>>;
+
+type Props$w = {
+    /**
+     * Text to be placed on the chip.
+     */
+    label?: string;
+    /**
+     * Element or path used as icon to be placed after the chip label.
+     */
+    suffixIcon?: string | SVG;
+    /**
+     * Element or path used as icon to be placed before the chip label.
+     */
+    prefixIcon?: string | SVG;
+    /**
+     * This function will be called when the suffix is clicked.
+     */
+    onClickSuffix?: () => void;
+    /**
+     * This function will be called when the prefix is clicked.
+     */
+    onClickPrefix?: () => void;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+
+declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$w) => react_jsx_runtime.JSX.Element;
+
+type Space = {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+};
+type Inset = {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+};
+type Background = {
+    attachment?: string;
+    clip?: string;
+    color?: string;
+    image?: string;
+    origin?: string;
+    position?: string;
+    repeat?: string;
+    size?: string;
+};
+type BorderProperties = {
+    width?: string;
+    style?: string;
+    color?: string;
+};
+type Border = BorderProperties | {
+    top?: BorderProperties;
+    right?: BorderProperties;
+    bottom?: BorderProperties;
+    left?: BorderProperties;
+};
+type Outline = BorderProperties & {
+    offset?: string;
+};
+type OverflowValues = "visible" | "hidden" | "clip" | "scroll" | "auto";
+type Overflow = OverflowValues | {
+    x?: OverflowValues;
+    y?: OverflowValues;
+};
+type Props$v = {
+    /**
+     * Based on the CSS property background allows configuring all properties related to the background of a container.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background
+     */
+    background?: Background;
+    /**
+     * Based on the CSS property border allows configuring all properties related to the border of a container.
+     */
+    border?: Border;
+    /**
+     * Sets the border-radius CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
+     */
+    borderRadius?: string;
+    /**
+     * Sets the box-shadow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+     */
+    boxShadow?: string;
+    /**
+     * Sets the box-sizing CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
+     */
+    boxSizing?: "border-box" | "content-box";
+    /**
+     * Custom content inside the container.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the display CSS property.
+     * The set of values is limited to the ones related to the outer display type.
+     * If you want to apply any pattern from the inner box and how the children are laid out,
+     * we recommend you to use the Flex and Grid components.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/display
+     */
+    display?: "block" | "inline-block" | "inline" | "none";
+    /**
+     * Sets the float CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
+     */
+    float?: "left" | "right" | "none";
+    /**
+     * Sets the height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/height
+     */
+    height?: string;
+    /**
+     * Based on the CSS property inset this prop is a shorthand that corresponds
+     * to the top, right, bottom, and/or left properties.
+     */
+    inset?: Inset;
+    /**
+     * Size of the margin to be applied to the container.
+     */
+    margin?: string | Space;
+    /**
+     * Sets the max-width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+     */
+    maxHeight?: string;
+    /**
+     * Sets the max-height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+     */
+    maxWidth?: string;
+    /**
+     * Sets the min-width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+     */
+    minHeight?: string;
+    /**
+     * Sets the min-height CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+     */
+    minWidth?: string;
+    /**
+     * Based on the CSS property outline allows configuring all properties related
+     * to the outline of a container.
+     */
+    outline?: Outline;
+    /**
+     * Sets the overflow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
+     */
+    overflow?: Overflow;
+    /**
+     * Size of the padding to be applied to the container.
+     */
+    padding?: string | Space;
+    /**
+     * Sets the position CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position
+     */
+    position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
+    /**
+     * Sets the width CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/width
+     */
+    width?: string;
+    /**
+     * Sets the z-index CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+     */
+    zIndex?: "auto" | number;
+};
+
+declare function DxcContainer({ display, width, height, overflow, ...props }: Props$v): react_jsx_runtime.JSX.Element;
+
+type CommonItemProps = {
+    badge?: ReactElement;
+    icon?: string | SVG;
+    label: string;
+};
+type Item = CommonItemProps & {
+    onSelect?: () => void;
+    selectedByDefault?: boolean;
+};
+type GroupItem = CommonItemProps & {
+    items: (Item | GroupItem)[];
+};
+type Section = {
+    items: (Item | GroupItem)[];
+    title?: string;
+};
+type Props$u = {
+    /**
+     * Array of items to be displayed in the Contextual menu.
+     * Each item can be a single/simple item, a group item or a section.
+     */
+    items: (Item | GroupItem)[] | Section[];
+};
+
+declare function DxcContextualMenu({ items }: Props$u): react_jsx_runtime.JSX.Element;
+
+type BaseActionCell = {
+    disabled?: boolean;
+    tabIndex?: number;
+    title: string;
+};
+type ActionCell = BaseActionCell & ({
+    icon: string | SVG;
+    onClick: () => void;
+    options?: never;
+} | {
+    icon?: never;
+    onClick: (value?: string) => void;
+    options: Option$2[];
+});
+type ActionsCellPropsType = {
+    /**
+     * It represents a list of interactive elements that will work as buttons or as a dropdown. Those with an icon from Material Symbols
+     * or a SVG are treated as buttons. If any element lacks an icon and includes options, it is interpreted as a dropdown.
+     * Only the first action with options will be displayed and only up to 3 actions.
+     * In the case of the dropdown the click function will pass the value assigned to the option.
+     */
+    actions: ActionCell[];
+};
+type Props$t = {
+    /**
+     * The center section of the table. Can be used to render custom
+     * content in this area.
+     */
+    children: ReactNode;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Determines the visual style and layout
+     * - "default": Default table size.
+     * - "reduced": More compact table with less spacing for high density information.
+     */
+    mode?: "default" | "reduced";
+};
+
+type GridColumn = {
+    /**
+     * Key that will be rendered from each row in rows.
+     */
+    key: string;
+    /**
+     * Label that will be used for the column header.
+     */
+    label: string;
+    /**
+     * Whether the column is resizable or not.
+     */
+    resizable?: boolean;
+    /**
+     * Whether the column is sortable or not.
+     */
+    sortable?: boolean;
+    /**
+     * Custom criteria for sorting the column.
+     */
+    sortFn?: (_a: ReactNode, _b: ReactNode) => 0 | 1 | -1;
+    /**
+     * Whether the column is draggable or not.
+     */
+    draggable?: boolean;
+    /**
+     * Whether the column cells are editable or not.
+     */
+    textEditable?: boolean;
+    /**
+     * Value that will be rendered from the summaryRow.
+     */
+    summaryKey?: string;
+    /**
+     * Sets the alignment inside the cells.
+     */
+    alignment?: "left" | "right" | "center";
+};
+type GridRow = {
+    /**
+     * List of rows that will be rendered in each cell based on the key in each column.
+     */
+    [key: string]: ReactNode | undefined;
+};
+type HierarchyGridRow = GridRow & {
+    /**
+     * Array of child rows nested under this row, enabling hierarchical (tree-like) structures.
+     * These child rows will be displayed when the parent row is expanded.
+     */
+    childRows?: HierarchyGridRow[] | GridRow[];
+    /**
+     * Function called when a row with children is expanded or collapsed (based on the value of `open`).
+     * Returns (or resolves to) the array of child rows nested under this row to display when expanded.
+     */
+    childrenTrigger?: (open?: boolean, triggerRow?: HierarchyGridRow) => (HierarchyGridRow[] | GridRow[]) | Promise<HierarchyGridRow[] | GridRow[]>;
+    /**
+     * Indicates whether child rows are currently being loaded.
+     */
+    loadingChildren?: boolean;
+    /**
+     * Indicates the level of nesting for this row in the hierarchy.
+     */
+    rowLevel?: number;
+    /**
+     * Reference to the parent row's unique identifier.
+     */
+    parentKey?: string | number;
+    /**
+     * Indicates whether child rows are currently visible.
+     */
+    visibleChildren?: boolean;
+};
+type ExpandableGridRow = GridRow & {
+    expandedContent?: ReactNode;
+    expandedContentHeight?: number;
+    contentIsExpanded?: boolean;
+};
+type ExpandableRows = {
+    rows: ExpandableGridRow[];
+    /**
+     * Whether the rows can expand or not.
+     */
+    expandable: true;
+    /**
+     * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
+     */
+    uniqueRowId: string;
+};
+type HierarchyRows = {
+    rows: HierarchyGridRow[];
+    /**
+     * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
+     */
+    uniqueRowId: string;
+    /**
+     * Whether the rows can expand or not.
+     */
+    expandable?: false;
+};
+type SelectableGridProps = {
+    /**
+     * Whether the rows are selectable or not.
+     */
+    selectable: true;
+    /**
+     * Set of selected rows. This prop is mandatory if selectable is set to true. The uniqueRowId key will be used to identify the each row.
+     */
+    selectedRows: Set<string | number>;
+    /**
+     * Function called whenever the selected values changes. This prop is mandatory if selectable is set to true.The uniqueRowId key will be used to identify the rows.
+     */
+    onSelectRows: (selectedRows: Set<number | string>) => void;
+    /**
+     * This prop indicates the unique key that can be used to identify each row. This prop is mandatory if selectable is set to true, expandable is set to true or rows is of type HierarchyGridRow[].
+     */
+    uniqueRowId: string;
+} | {
+    selectable?: false;
+    selectedRows?: never;
+    onSelectRows?: never;
+    uniqueRowId?: string;
+};
+type PaginatedProps$1 = {
+    /**
+     * If true, paginator will be displayed.
+     */
+    showPaginator?: true;
+    /**
+     * Number of total items.
+     */
+    totalItems?: number;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: boolean;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: (value: number) => void;
+    /**
+     * Function called whenever the current page is changed.
+     */
+    onPageChange?: (_page: number) => void;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: number;
+};
+type NonPaginatedProps$1 = {
+    /**
+     * If true, paginator will be displayed.
+     */
+    showPaginator: false;
+    /**
+     * Number of total items.
+     */
+    totalItems?: never;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: never;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: never;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: never;
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: never;
+    /**
+     * Function called whenever the current page is changed.
+     */
+    onPageChange?: never;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: never;
+};
+type CommonProps$6 = {
+    columns: GridColumn[];
+    /**
+     * Extra row that will be always visible.
+     */
+    summaryRow?: GridRow;
+    /**
+     * Function called whenever a cell is edited.
+     */
+    onGridRowsChange?: (_rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void;
+    /**
+     * Function called whenever a column is sorted. Receives the sorted
+     * column and direction, or `undefined` if no sorting is applied.
+     */
+    onSort?: (_sortColumn?: SortColumn) => void;
+};
+type BasicGridProps = {
+    rows: GridRow[];
+    /**
+     * Whether the rows can expand or not.
+     */
+    expandable?: false;
+};
+type Props$s = 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;
+};
+
+type Props$r = {
+    /**
+     * Initial value of the input element, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * Text to be placed above the date input.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Helper text to be placed above the date.
+     */
+    helperText?: string;
+    /**
+     * If true, the date format will appear as placeholder in the field.
+     */
+    placeholder?: boolean;
+    /**
+     * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
+     */
+    format?: string;
+    /**
+     * If true, the date input will have an action to clear the entered value.
+     */
+    clearable?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the date will be optional, showing the text '(Optional)'
+     * next to the label. Otherwise, the field will be considered required and an error will be
+     * passed as a parameter to the OnBlur and onChange functions when it has
+     * not been filled.
+     */
+    optional?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     * The date picker cannot be opened either. In addition, the clear action will not be displayed
+     * even if the flag is set to true.
+     */
+    readOnly?: boolean;
+    /**
+     * This function will be called when the user types within the input
+     * element of the component. An object including the string value, the
+     * error and the date value will be passed to this function.
+     * If the string value is a valid date, error will
+     * be undefined. Also, if the string value is not a valid date, date will be undefined.
+     */
+    onChange?: (val: {
+        value: string;
+        error?: string;
+        date?: Date;
+    }) => void;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the string value, the error and the date value
+     * will be passed to this function. If the string value is a valid date, error will
+     * be undefined. Also, if the string value is not a valid date, date will be undefined.
+     */
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+        date?: Date;
+    }) => void;
+    /**
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the date 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;
+    /**
+     * 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', ...
+     */
+    autocomplete?: 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;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the date input element when no `label` is provided.
+     */
+    ariaLabel?: string;
+};
+
+declare const DxcDateInput: react.ForwardRefExoticComponent<Props$r & react.RefAttributes<HTMLDivElement>>;
+
+type Props$q = {
+    /**
+     * If true, the close button will be visible.
+     */
+    closable?: boolean;
+    /**
+     * This function will be called when the user clicks the close button.
+     * The responsibility of hiding the dialog lies with the user.
+     */
+    onCloseClick?: () => void;
+    /**
+     * This function will be called when the user clicks on the background of the modal.
+     * The responsibility of hiding the dialog lies with the user.
+     */
+    onBackgroundClick?: () => void;
+    /**
+     * If true, the dialog will be displayed over a darker background that covers the content behind.
+     */
+    overlay?: boolean;
+    /**
+     * Area within the dialog that can be used to render custom content.
+     * We strongly encourage users to not change the
+     * tabindex of the inner components or elements. This
+     * can lead to unpredictable behaviour for keyboard users, affecting
+     * the order of focus and focus locking within the dialog.
+     */
+    children: ReactNode;
+    /**
+     * Value of the tabindex applied to the close button.
+     * Note that values greater than 0 are strongly discouraged. It can
+     * lead to unexpected behaviours with the focus within the dialog.
+     */
+    tabIndex?: number;
+};
+
+declare const DxcDialog: ({ children, closable, onBackgroundClick, onCloseClick, overlay, tabIndex, }: Props$q) => JSX.Element;
+
+type Props$p = {
+    /**
+     * The divider can be shown in horizontal or vertical.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Modifies the thickness of the divider.
+     */
+    weight?: "regular" | "strong";
+    /**
+     * Modifies the color of the divider.
+     */
+    color?: "lightGrey" | "mediumGrey" | "darkGrey";
+    /**
+     * Specifies whether the divider serves a purely decorative purpose
+     * or functions as a semantic separator for content. Additionally, it
+     * determines whether the divider is accessible to screen readers.
+     */
+    decorative?: boolean;
+};
+
+declare function DxcDivider({ color, decorative, orientation, weight, }: Props$p): react_jsx_runtime.JSX.Element;
+
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconPosition, label, caretHidden, disabled, expandOnHover, onSelectOption, margin, size, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element;
+
+type FileData = {
+    /**
+     * Error of the file. If it is defined, it will be shown and the file item will be mark as invalid.
+     */
+    error?: string;
+    /**
+     * Selected file.
+     */
+    file: File;
+    /**
+     * Preview of the file.
+     */
+    preview?: string;
+};
+type CommonProps$5 = {
+    /**
+     * The file types that the component accepts. Its value must be one of all the possible values of the HTML file input's accept attribute.
+     */
+    accept?: string;
+    /**
+     * Text to be placed inside the button.
+     */
+    buttonLabel?: string;
+    /**
+     * This function will be called when the user selects or drops a file. The list of files will be sent as a parameter.
+     * In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.
+     */
+    callbackFile: (files: FileData[]) => void;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Helper text to be placed above the component.
+     */
+    helperText?: string;
+    /**
+     * Text to be placed above the component.
+     */
+    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;
+    /**
+     * The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error.
+     */
+    maxSize?: number;
+    /**
+     * The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error.
+     */
+    minSize?: number;
+    /**
+     * If true, the component allows multiple file items and will show all of them. If false, only one file will be shown, and if there is already one
+     *  file selected and a new one is chosen, it will be replaced by the new selected one.
+     */
+    multiple?: boolean;
+    /**
+     * If true, the input will be optional, showing '(Optional)'
+     * next to the label.
+     */
+    optional?: boolean;
+    /**
+     * 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;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * An array of files representing the selected files.
+     */
+    value: FileData[];
+};
+type DropModeProps = CommonProps$5 & {
+    /**
+     * Text to be placed inside the drag and drop zone alongside the button.
+     */
+    dropAreaLabel?: string;
+    /**
+     * Uses one of the available file input modes:
+     *    'file': Files are selected by clicking the button and selecting it through the file explorer.
+     *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
+     */
+    mode: "filedrop" | "dropzone";
+};
+type FileModeProps = CommonProps$5 & {
+    /**
+     * Text to be placed inside the drag and drop zone alongside the button.
+     */
+    dropAreaLabel?: never;
+    /**
+     * Uses one of the available file input modes:
+     *    'file': Files are selected by clicking the button and selecting it through the file explorer.
+     *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
+     *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
+     */
+    mode?: "file";
+};
+type Props$o = DropModeProps | FileModeProps;
+
+declare const DxcFileInput: react.ForwardRefExoticComponent<Props$o & react.RefAttributes<HTMLDivElement>>;
+
+type Gap$1 = {
+    rowGap: string;
+    columnGap?: string;
+} | {
+    rowGap?: string;
+    columnGap: string;
+} | string;
+type CommonProps$4 = {
+    /**
+     * Sets the justify-content CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+     */
+    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "normal" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
+    /**
+     * Sets the align-items CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+     */
+    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline" | "normal";
+    /**
+     * Sets the align-content CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+     */
+    alignContent?: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
+    /**
+     * Sets the align-self CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+};
+type Props$n = CommonProps$4 & {
+    /**
+     * Sets the flex-direction CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
+     */
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    /**
+     * Sets the flex-wrap CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
+     */
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    /**
+     * Sets the gap CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     */
+    gap?: Gap$1;
+    /**
+     * Sets the order CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/order
+     */
+    order?: number;
+    /**
+     * Sets the flex-grow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
+     */
+    grow?: number;
+    /**
+     * Sets the flex-shrink CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
+     */
+    shrink?: number;
+    /**
+     * Sets the flex-basis CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
+     */
+    basis?: string;
+    /**
+     * Sets a custom HTML tag.
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Custom content inside the flex container.
+     */
+    children: ReactNode;
+};
+
+declare const DxcFlex: ({ basis, direction, gap, grow, order, shrink, wrap, ...props }: Props$n) => react_jsx_runtime.JSX.Element;
+
+type Gap = string | {
+    columnGap?: string;
+    rowGap: string;
+} | {
+    columnGap: string;
+    rowGap?: string;
+};
+type GridCell = {
+    end: number | string;
+    start: number | string;
+};
+type PlaceSelfValues = "auto" | "baseline" | "center" | "end" | "start" | "stretch";
+type PlaceContentValues = "baseline" | "center" | "end" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch";
+type PlaceItemsValues = "baseline" | "center" | "end" | "normal" | "start" | "stretch";
+type PlaceObject<Type, Suffix extends string> = {
+    [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
+};
+type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
+    align: PlaceValues;
+    justify?: PlaceValues;
+}, Element> | PlaceObject<{
+    align?: PlaceValues;
+    justify: PlaceValues;
+}, Element> | PlaceValues;
+type GridItemProps = {
+    /**
+     * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
+     */
+    areaName?: string;
+    /**
+     * Sets a custom HTML tag.
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Custom content inside the grid container.
+     */
+    children: ReactNode;
+    /**
+     * Sets the grid-column CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+     */
+    column?: number | string | GridCell;
+    /**
+     * Sets the place-self CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
+     */
+    placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
+    /**
+     * Sets the grid-row CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+    row?: number | string | GridCell;
+};
+type Props$m = GridItemProps & {
+    /**
+     * Sets the grid-auto-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+     */
+    autoColumns?: string;
+    /**
+     * Sets the grid-auto-flow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+     */
+    autoFlow?: "row" | "column" | "row dense" | "column dense";
+    /**
+     * Sets the grid-auto-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+     */
+    autoRows?: string;
+    /**
+     * Sets the gap CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     */
+    gap?: Gap;
+    /**
+     * Sets the place-content CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
+     */
+    placeContent?: PlaceGeneric<PlaceContentValues, "content">;
+    /**
+     * Sets the place-items CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
+     */
+    placeItems?: PlaceGeneric<PlaceItemsValues, "items">;
+    /**
+     * Sets the grid-template-areas CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+     */
+    templateAreas?: string[];
+    /**
+     * Sets the grid-template-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+     */
+    templateColumns?: string[];
+    /**
+     * Sets the grid-template-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+     */
+    templateRows?: string[];
+};
+
+declare const DxcGrid: {
+    (props: Props$m): react_jsx_runtime.JSX.Element;
+    Item: _emotion_styled.StyledComponent<{
+        theme?: _emotion_react.Theme;
+        as?: React.ElementType;
+    } & GridItemProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+
+type Props$l = {
+    /**
+     * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
+     * The html tag of the heading will be the one specified in the 'as' prop.
+     * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Heading text.
+     */
+    text: string;
+    /**
+     * Modifies the default weight of the heading.
+     */
+    weight?: "light" | "default" | "regular";
+    /**
+     * Specifies the HTML tag of the heading.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$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 DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$k): react_jsx_runtime.JSX.Element;
+
+type Props$j = {
+    /**
+     * Applies the spacing scale to the bottom side.
+     */
+    bottom?: string;
+    /**
+     * Custom content inside the inset.
+     */
+    children: ReactNode;
+    /**
+     * Applies the spacing scale to the left and right sides.
+     */
+    horizontal?: string;
+    /**
+     * Applies the spacing scale to the left side.
+     */
+    left?: string;
+    /**
+     * Applies the spacing scale to the right side.
+     */
+    right?: string;
+    /**
+     * Applies the spacing scale to all sides.
+     */
+    space?: string;
+    /**
+     * Applies the spacing scale to the top side.
+     */
+    top?: string;
+    /**
+     * Applies the spacing scale to the top and bottom sides.
+     */
+    vertical?: string;
+};
+
+declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$j): react_jsx_runtime.JSX.Element;
+
+type LinkProps = {
+    /**
+     * If true, the link is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the color is inherited from parent.
+     */
+    inheritColor?: boolean;
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the link text.
+     */
+    icon?: string | SVG;
+    /**
+     * Indicates the position of the icon in the component.
+     */
+    iconPosition?: "before" | "after";
+    /**
+     * Page to be opened when the user clicks on the link.
+     */
+    href?: string;
+    /**
+     * If true, the page is opened in a new browser tab.
+     */
+    newWindow?: boolean;
+    /**
+     * If defined, the link will be displayed as a button. This
+     * function will be called when the user clicks the link.
+     */
+    onClick?: () => void;
+    /**
+     * Text of the link.
+     */
+    children: 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;
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+
+declare const DxcLink: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+type TabProps$1 = {
+    /**
+     * Whether the tab is active or not.
+     */
+    active?: boolean;
+    /**
+     * Tab text label.
+     */
+    children: string;
+    /**
+     * Whether the tab is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Page to be opened when the user clicks on the tab.
+     */
+    href?: string;
+    /**
+     * 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.
+     * If a number is put it will be shown as the label of the notification
+     * in the tab, taking into account that if that number is greater than 99,
+     * it will appear as '+99' in the badge.
+     */
+    notificationNumber?: boolean | number;
+};
+type Props$i = {
+    /**
+     * Contains one or more DxcNavTabs.Tab.
+     */
+    children: ReactNode;
+    /**
+     * Whether the icon should appear above or to the left of the label.
+     */
+    iconPosition?: "top" | "left";
+    /**
+     * Value of the tabindex attribute applied to each tab.
+     */
+    tabIndex?: number;
+};
+
+declare const DxcNavTabs: {
+    ({ iconPosition, tabIndex, children }: Props$i): JSX.Element;
+    Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+type Props$h = {
+    /**
+     * Text to be placed above the number.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Initial value of the input element, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * Helper text to be placed above the number.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the number.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the number will be optional, showing the text '(Optional)'
+     * next to the label. Otherwise, the field will be considered required
+     * and an error will be passed as a parameter to the OnBlur and onChange
+     * functions when it has not been filled.
+     */
+    optional?: boolean;
+    /**
+     * 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
+     * up or down arrows and neither on the spin buttons.
+     */
+    readOnly?: boolean;
+    /**
+     * Prefix to be placed before the number value.
+     */
+    prefix?: string;
+    /**
+     * Suffix to be placed after the number value.
+     */
+    suffix?: string;
+    /**
+     * Minimum value allowed by the number input. If the typed value by the user is
+     * lower than min, the onBlur and onChange functions will be called with
+     * the current value and an internal error informing that the current
+     * value is not correct. If a valid state is reached, the error parameter
+     * will not be defined in both events.
+     */
+    min?: number;
+    /**
+     * Maximum value allowed by the number input. If the typed value by the user
+     * surpasses max, the onBlur and onChange functions will be called with
+     * the current value and an internal error informing that the current
+     * value is not correct. If a valid state is reached, the error parameter
+     * will not be defined in both events.
+     */
+    max?: number;
+    /**
+     * The step interval to use when using the up and down arrows to adjust the value.
+     */
+    step?: number;
+    /**
+     * 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 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;
+    /**
+     * 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', ...
+     */
+    autocomplete?: 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;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the number input element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Decides whether the number input has actions to increase or decrease the value, following the defined step.
+     */
+    showControls?: boolean;
+};
+
+declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
+
+type Props$g = {
+    /**
+     * Number of the current selected page.
+     */
+    currentPage?: number;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * Array of numbers representing the items per page options.
+     * If undefined, the select with items per page options will not be displayed.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page option.
+     * The number will be passed as a parameter to this function.
+     */
+    itemsPerPageFunction?: (itemsPerPage: number) => void;
+    /**
+     * Total number of items in the pages.
+     */
+    totalItems?: number;
+    /**
+     * If true, a select will be displayed with the page numbers to move through them.
+     */
+    showGoToPage?: boolean;
+    /**
+     * This function will be called when the user clicks on any of the button to change pages.
+     * The page number will be passed as a parameter to this function.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+
+declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$g) => JSX.Element;
+
+declare function DxcParagraph({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type Props$f = {
+    /**
+     * Text to be placed above the password input.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * Helper text to be placed above the password.
+     */
+    helperText?: 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
+     * 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;
+    /**
+     * 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.
+     */
+    pattern?: string;
+    /**
+     * 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 minimum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
+     */
+    minLength?: number;
+    /**
+     * Specifies the maximum length allowed by the 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
+     * 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;
+    /**
+     * 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', ...
+     */
+    autocomplete?: 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;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the password input element when no `label` is provided.
+     */
+    ariaLabel?: string;
+};
+
+declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$f & react.RefAttributes<HTMLDivElement>>;
+
+type Size$1 = {
+    top?: Space$1;
+    bottom?: Space$1;
+    left?: Space$1;
+    right?: Space$1;
+};
+type Props$e = {
+    /**
+     * Text to be placed above the progress bar.
+     */
+    label?: string;
+    /**
+     * Helper text to be placed under the progress bar.
+     */
+    helperText?: string;
+    /**
+     * If true, the progress bar will be displayed as a modal.
+     */
+    overlay?: boolean;
+    /**
+     * The value of the progress indicator. If it's received the component is
+     * determinate otherwise is indeterminate.
+     */
+    value?: number;
+    /**
+     * If true, the value is displayed above the progress bar.
+     */
+    showValue?: 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.
+     */
+    margin?: Space$1 | Size$1;
+    /**
+     * Specifies a string to be used as the name for the progress bar element when no `label` is provided.
+     */
+    ariaLabel?: string;
+};
+
+declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$e) => JSX.Element;
+
+type Link = {
+    /**
+     * Label to be shown in the link.
+     */
+    label: string;
+    /**
+     * Sublinks of the link.
+     */
+    links?: Link[];
+};
+type Props$d = {
+    /**
+     * Title of the quick nav component.
+     */
+    title?: string;
+    /**
+     * Links to be shown inside the quick nav component.
+     */
+    links: Link[];
+};
+
+declare function DxcQuickNav({ links, title }: Props$d): react_jsx_runtime.JSX.Element;
+
+type Option$1 = {
+    /**
+     * Label of the option placed next to the radio input.
+     */
+    value: string;
+    /**
+     * Value of the option. It should be unique and
+     * not an empty string, which is reserved to the optional item added
+     * by 'optional' prop.
+     */
+    label: string;
+    /**
+     * If true, disables the option.
+     */
+    disabled?: boolean;
+};
+type RadioGroupProps = {
+    /**
+     * Specifies a string to be used as the name for the radio group when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Initial value of the radio group, 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 radio group. If the
+     * defined value is an empty string, it will reserve a space below the
+     * component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
+     */
+    error?: string;
+    /**
+     * Helper text to be placed above the radio group.
+     */
+    helperText?: string;
+    /**
+     * Text to be placed above the radio group.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element. This attribute will allow users
+     * to find the component's value during the submit event.
+     */
+    name?: string;
+    /**
+     * If true, the radio group will be optional, showing
+     * (Optional) next to the label and adding a default last
+     * option with an empty string as value. Otherwise, the field will be
+     * considered required and an error will be passed as a parameter to the
+     * OnBlur functions if an option wasn't selected.
+     */
+    optional?: boolean;
+    /**
+     * Label of the optional radio input.
+     */
+    optionalItemLabel?: string;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: Option$1[];
+    /**
+     * This function will be called when the radio group loses the focus. An
+     * object including the value and the error will be passed to this
+     * 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 chooses an option. The new
+     * value will be passed to this function.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
+    /**
+     * Sets the orientation of the options within the radio group.
+     */
+    stacking?: "row" | "column";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Value of the radio group. If undefined, the component will be
+     * uncontrolled and the value will be managed internally by the
+     * component.
+     */
+    value?: string;
+};
+
+declare const DxcRadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+type Column = {
+    /**
+     * Column display value.
+     */
+    displayValue: ReactNode;
+    /**
+     * Boolean value to indicate whether the column is sortable or not.
+     */
+    isSortable?: boolean;
+};
+type Cell = {
+    /**
+     * Value to be displayed in the cell.
+     */
+    displayValue: ReactNode;
+    /**
+     * Value to be used when sorting the table by that
+     * column. If not indicated displayValue will be used for sorting.
+     */
+    sortValue?: string | number | Date;
+};
+type Row = Cell[];
+type CommonProps$3 = {
+    /**
+     * An array of objects representing the columns of the table.
+     */
+    columns: Column[];
+    /**
+     * An array of objects representing the rows of the table, you will have
+     * as many objects as columns in the table.
+     */
+    rows: Row[];
+    /**
+     * 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;
+    /**
+     * Value of the tabindex attribute applied to the sortable icon.
+     */
+    tabIndex?: number;
+    /**
+     * Determines the visual style and layout
+     * - "default": The default mode with big spacing
+     * - "reduced": A reduced mode with minimal spacing for dense tables
+     */
+    mode?: "default" | "reduced";
+};
+type PaginatedProps = CommonProps$3 & {
+    hidePaginator?: false;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: boolean;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: (value: number) => void;
+};
+type NonPaginatedProps = CommonProps$3 & {
+    /**
+     * If true, paginator will not be displayed.
+     */
+    hidePaginator: true;
+    /**
+     * If true, a select component for navigation between pages will be displayed.
+     */
+    showGoToPage?: never;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: never;
+    /**
+     * An array of numbers representing the items per page options.
+     */
+    itemsPerPageOptions?: never;
+    /**
+     * This function will be called when the user selects an item per page
+     * option. The value selected will be passed as a parameter.
+     */
+    itemsPerPageFunction?: never;
+};
+type Props$c = PaginatedProps | NonPaginatedProps;
+
+declare const DxcResultsetTable: {
+    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, }: Props$c): react_jsx_runtime.JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
+};
+
+type ListOptionType = {
+    /**
+     * Element used as the icon that will be placed before the option label.
+     * It can be an inline SVG or Material Symbol name. If the url option
+     * is the chosen one, take into account that the component's
+     * color styling tokens will not be applied to the image.
+     */
+    icon?: string | SVG;
+    /**
+     * Label of the option to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * Value of the option. It should be unique and
+     * not an empty string, which is reserved to the empty option added
+     * by optional prop.
+     */
+    value: string;
+};
+type ListOptionGroupType = {
+    /**
+     * Label of the group to be shown in the select's listbox.
+     */
+    label: string;
+    /**
+     * List of the grouped options.
+     */
+    options: ListOptionType[];
+};
+type CommonProps$2 = {
+    /**
+     * Text to be placed above the select.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element. This attribute will allow users
+     * to find the component's value during the submit event. In this event,
+     * the component's value will always be a regular string, for both single
+     * and multiple selection modes, being a single option value in the first case
+     * and more than one value when multiple selection is available, separated by commas.
+     */
+    name?: string;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: ListOptionType[] | ListOptionGroupType[];
+    /**
+     * Helper text to be placed above the select.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the select.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will be optional, showing '(Optional)'
+     * next to the label and adding a default first option with an empty string as value,
+     * been the placeholder (if defined) its label. Otherwise, the field will be
+     * considered required and an error will be passed as a parameter to the
+     * OnBlur and onChange functions if an option wasn't selected.
+     */
+    optional?: boolean;
+    /**
+     * If true, enables search functionality.
+     */
+    searchable?: boolean;
+    /**
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the select 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;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the select element when no `label` is provided.
+     */
+    ariaLabel?: string;
+};
+type SingleSelect = CommonProps$2 & {
+    /**
+     * Enables users to select multiple items from the list.
+     */
+    enableSelectAll?: never;
+    /**
+     * If true, the select component will support multiple selected options.
+     * In that case, value will be an array of strings with each selected
+     * option value.
+     */
+    multiple?: false;
+    /**
+     * Initial value of the select, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * This function will be called when the user selects an option.
+     * 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 select loses the focus. An
+     * object including the value and the error (if the value
+     * selected 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;
+};
+type MultipleSelect = CommonProps$2 & {
+    /**
+     * Enables users to select multiple items from the list.
+     */
+    enableSelectAll?: boolean;
+    /**
+     * If true, the select component will support multiple selected options.
+     * In that case, value will be an array of strings with each selected
+     * option value.
+     */
+    multiple: true;
+    /**
+     * Initial value of the select, only when it is uncontrolled.
+     */
+    defaultValue?: string[];
+    /**
+     * Value of the select. If undefined, the component will be uncontrolled
+     * and the value will be managed internally by the component.
+     */
+    value?: string[];
+    /**
+     * This function will be called when the user selects an option.
+     * An object including the current selected values and the error (if the value entered is not valid)
+     * will be passed to this function. If there is no error, error will be null.
+     */
+    onChange?: (val: {
+        value: string[];
+        error?: string;
+    }) => void;
+    /**
+     * This function will be called when the select loses the focus. An
+     * object including the selected values and the error (if the value
+     * selected is not valid) will be passed to this function. If there is no error,
+     * error will be null.
+     */
+    onBlur?: (val: {
+        value: string[];
+        error?: string;
+    }) => void;
+};
+type Props$b = SingleSelect | MultipleSelect;
+
+declare const DxcSelect: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
+
+type Props$a = {
+    /**
+     * Specifies a string to be used as the name for the slider element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Initial value of the slider, only when it is uncontrolled.
+     */
+    defaultValue?: number;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Helper text to be placed above the slider.
+     */
+    helperText?: string;
+    /**
+     * Text to be placed above the slider.
+     */
+    label?: string;
+    /**
+     * This function will be used to format the labels displayed next to the slider.
+     * The value will be passed as parameter and the function must return the formatted value.
+     */
+    labelFormatCallback?: (value: number) => 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;
+    /**
+     * Whether the marks between each step should be shown or not.
+     */
+    marks?: boolean;
+    /**
+     * The maximum value available for selection.
+     */
+    maxValue?: number;
+    /**
+     * The minimum value available for selection.
+     */
+    minValue?: number;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the slider changes its value, as it's being dragged.
+     * The new value will be passed as a parameter when this function is executed.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * This function will be called when the slider changes its value, but only when the thumb is released.
+     * The new value will be passed as a parameter when this function is executed.
+     */
+    onDragEnd?: (value: number) => void;
+    /**
+     * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
+     */
+    showInput?: boolean;
+    /**
+     * Whether the min/max value labels should be displayed next to the slider
+     */
+    showLimitsValues?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "medium" | "large" | "fillParent";
+    /**
+     * The step interval between values available for selection.
+     */
+    step?: number;
+    /**
+     * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number;
+};
+
+declare const DxcSlider: react.ForwardRefExoticComponent<Props$a & react.RefAttributes<HTMLDivElement>>;
+
+type Props$9 = {
+    /**
+     * 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.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, the color is inherited from the closest parent with a defined color. This allows users to adapt the spinner
+     * to the semantic color of the use case in which it is used.
+     */
+    inheritColor?: boolean;
+    /**
+     * Text to be placed inside the spinner.
+     */
+    label?: string;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Available modes of the spinner.
+     */
+    mode?: "large" | "small" | "overlay";
+    /**
+     * If true, the value is displayed inside the spinner..
+     */
+    showValue?: boolean;
+    /**
+     * The value of the progress indicator. If it's received the
+     * component is determinate, otherwise is indeterminate.
+     */
+    value?: number;
+};
+
+declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$9) => react_jsx_runtime.JSX.Element;
+
+type Mode = "default" | "info" | "success" | "warning" | "error";
+type Size = "small" | "medium" | "large";
+type Props$8 = {
+    /**
+     * It will define the color of the light based on its semantic meaning.
+     */
+    mode?: Mode;
+    /**
+     * An auxiliar text that will add some context to the status.
+     */
+    label: string;
+    /**
+     *  Size of the component. Should be defined based on its importance and/or available space.
+     */
+    size?: Size;
+};
+
+declare function DxcStatusLight({ label, mode, size }: Props$8): react_jsx_runtime.JSX.Element;
+
+type Props$7 = {
+    /**
+     * Specifies a string to be used as the name for the switch element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, the component is checked. If undefined, the component will be uncontrolled
+     * and the checked attribute will be managed internally by the component.
+     */
+    checked?: boolean;
+    /**
+     * Initial state of the switch, only when it is uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Text to be placed next to the switch.
+     */
+    label?: string;
+    /**
+     * Whether the label should appear after or before the switch.
+     */
+    labelPosition?: "before" | "after";
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the user changes the state of the switch.
+     * The new value of the checked attribute will be passed as a parameter.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * If true, the component will display '(Optional)' next to the label.
+     */
+    optional?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+    /**
+     * Will be passed to the value attribute of the html input element. When inside a form,
+     * this value will be only submitted if the switch is checked.
+     */
+    value?: string;
+};
+
+declare const DxcSwitch: react.ForwardRefExoticComponent<Props$7 & react.RefAttributes<HTMLDivElement>>;
+
+declare const DxcTable: {
+    ({ children, margin, mode }: Props$t): react_jsx_runtime.JSX.Element;
+    ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
+};
+
+type TabLabelProps = {
+    /**
+     * Tab label.
+     */
+    label: string;
+    /**
+     * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
+     */
+    icon?: string | SVG;
+};
+type TabIconProps = {
+    /**
+     * Tab label.
+     */
+    label?: string;
+    /**
+     * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
+     */
+    icon: string | SVG;
+};
+type TabProps = {
+    defaultActive?: boolean;
+    active?: boolean;
+    title?: string;
+    tabId?: string;
+    disabled?: boolean;
+    notificationNumber?: boolean | number;
+    children: ReactNode;
+    onClick?: () => void;
+    onHover?: () => void;
+} & (TabLabelProps | TabIconProps);
+type TabsProps = {
+    /**
+     * Whether the icon should appear above or to the left of the label.
+     */
+    iconPosition?: "top" | "left";
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Value of the tabindex attribute applied to each tab.
+     */
+    tabIndex?: number;
+    /**
+     * Contains one or more DxcTabs.Tab.
+     */
+    children?: ReactNode;
+};
+type Props$6 = TabsProps;
+
+declare const DxcTabs: {
+    ({ children, iconPosition, margin, tabIndex }: Props$6): react_jsx_runtime.JSX.Element;
+    Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
+};
+
+type Props$5 = {
+    /**
+     * Specifies a string to be used as the name for the textarea element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
+     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
+     */
+    autocomplete?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Initial value of the textarea, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the textarea. If the
+     * defined value is an empty string, it will reserve a space below the
+     * component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
+     */
+    error?: string;
+    /**
+     * Helper text to be placed above the textarea.
+     */
+    helperText?: string;
+    /**
+     * Text to be placed above the textarea.
+     */
+    label?: string;
+    /**
+     * Specifies the maximum length allowed by the textarea.
+     * This will be checked both when the textarea loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the maximum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
+     */
+    maxLength?: number;
+    /**
+     * 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 minimum length allowed by the textarea.
+     * This will be checked both when the textarea loses the
+     * focus and while typing within it. If the string entered does not
+     * comply the minimum length, the onBlur and onChange functions will be called
+     * with the current value and an internal error informing that the value
+     * length does not comply the specified range. If a valid length is
+     * reached, the error parameter of both events will not be defined.
+     */
+    minLength?: number;
+    /**
+     * Name attribute of the textarea element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the textarea loses the focus. An
+     * object including the textarea value and the error (if the value entered
+     * is not valid) will be passed to this function. If there is no error,
+     * error will not be defined.
+     */
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * This function will be called when the user types within the textarea.
+     * 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;
+    /**
+     * If true, the textarea will be optional, showing '(Optional)'
+     * next to the label. Otherwise, the field will be considered required
+     * and an error will be passed as a parameter to the OnBlur and onChange functions
+     * when it has not been filled.
+     */
+    optional?: boolean;
+    /**
+     * Regular expression that defines the valid format allowed by the
+     * textarea. This will be checked both when the textarea loses the focus
+     * and while typing within it. If the string entered does not 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.
+     */
+    pattern?: string;
+    /**
+     * Text to be put as placeholder of the textarea.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
+    /**
+     * Number of rows of the textarea.
+     */
+    rows?: number;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
+     */
+    value?: string;
+    /**
+     * Defines the textarea's ability to resize vertically. It can be:
+     *    - 'auto': The textarea grows or shrinks automatically in order to fit the content.
+     *    - 'manual': The height of the textarea is enabled to be manually modified.
+     *    - 'none': The textarea has a fixed height and can't be modified.
+     */
+    verticalGrow?: "auto" | "manual" | "none";
+};
+
+declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
+
+type Action$1 = {
+    /**
+     * This function will be called when the user clicks the action.
+     */
+    onClick: () => void;
+    /**
+     * Icon to be placed in the action..
+     */
+    icon: string | SVG;
+    /**
+     * Text representing advisory information related
+     * to the button's action. Under the hood, this prop also serves
+     * as an accessible label for the component.
+     */
+    title?: string;
+};
+type Props$4 = {
+    /**
+     * Sets the alignment inside the input.
+     */
+    alignment?: "left" | "right";
+    /**
+     * Text to be placed above the input. This label will be used as the aria-label attribute of the list of suggestions.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Initial value of the input, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+    /**
+     * Helper text to be placed above the input.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the input.
+     */
+    placeholder?: string;
+    /**
+     * Action to be shown in the input.
+     */
+    action?: Action$1;
+    /**
+     * If true, the input will have an action to clear the entered value.
+     */
+    clearable?: boolean;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: 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
+     * and the custom action will not execute its onClick event.
+     */
+    readOnly?: boolean;
+    /**
+     * 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 and onChange functions when it has
+     * not been filled.
+     */
+    optional?: boolean;
+    /**
+     * Prefix to be placed before the input value.
+     */
+    prefix?: string;
+    /**
+     * Suffix to be placed after the input value.
+     */
+    suffix?: string;
+    /**
+     * 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 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;
+    /**
+     * These are the options to be displayed as suggestions. It can be either an array or a function:
+     *    - Array:    Array of options that will be filtered by the component.
+     *    - Function: This function will be called when the user changes the value.
+     *                It will receive the new value as a parameter and should return a promise
+     *                that resolves to an array with the filtered options.
+     */
+    suggestions?: string[] | ((value: string) => Promise<string[]>);
+    /**
+     * Regular expression that defines the valid format 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 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.
+     */
+    pattern?: string;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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', ...
+     */
+    autocomplete?: 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;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies a string to be used as the name for the textInput element when no `label` is provided.
+     */
+    ariaLabel?: string;
+};
+
+declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
+
+type Action = {
+    /**
+     * The icon of the action. It can be a string with the name of the icon or an SVG component.
+     */
+    icon?: string | SVG;
+    /**
+     * The label of the action.
+     */
+    label: string;
+    /**
+     * The function that will be executed when the user clicks on the action button.
+     */
+    onClick: () => void;
+};
+type CommonProps$1 = {
+    /**
+     * Tertiary button which performs a custom action, specified by the user.
+     */
+    action?: Action;
+    /**
+     * Message to be displayed as a toast.
+     */
+    message: string;
+};
+type DefaultToast = CommonProps$1 & {
+    /**
+     * Material Symbol name or SVG element as the icon that will be placed next to the panel label.
+     * When using Material Symbols, replace spaces with underscores.
+     * By default they are outlined if you want it to be filled prefix the symbol name with "filled_".
+     */
+    icon?: string | SVG;
+};
+type LoadingToast = CommonProps$1 & {
+    loading: boolean;
+};
+type SemanticToast = CommonProps$1 & {
+    /**
+     * Flag that allows to hide the semantic icon of the toast.
+     */
+    hideSemanticIcon?: boolean;
+};
+type ToastsQueuePropsType = {
+    /**
+     * Tree of components from which the useToast hook can be triggered.
+     */
+    children: ReactNode;
+    /**
+     * Duration in milliseconds before a toast automatically hides itself.
+     * The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.
+     */
+    duration?: number;
+};
+
+declare function DxcToastsQueue({ children, duration }: ToastsQueuePropsType): react_jsx_runtime.JSX.Element;
+
+type OptionIcon = {
+    /**
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
+     */
+    icon: string | SVG;
+    /**
+     * String with the option display value.
+     */
+    label?: never;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title: string;
+};
+type OptionLabel = {
+    /**
+     * Material Symbols icon or SVG element. Icon and label can't be used at same time.
+     */
+    icon?: string | SVG;
+    /**
+     * String with the option display value.
+     */
+    label: string;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title?: never;
+};
+type Option = {
+    /**
+     * If true, the option will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
+type CommonProps = {
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: Option[];
+    /**
+     * The orientation of the toggle group.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+type MultipleSelectionToggleGroup = {
+    /**
+     * The array of keys with the initially selected values.
+     */
+    defaultValue?: number[];
+    /**
+     * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
+     */
+    multiple: true;
+    /**
+     * This function will be called every time the selection changes. An array with the key of
+     * the selected values will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number[]) => void;
+    /**
+     * An array with the keys of the selected values.
+     * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number[];
+};
+type SingleSelectionToggleGroup = {
+    /**
+     * The key of the initially selected value.
+     */
+    defaultValue?: number;
+    /**
+     * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
+     */
+    multiple?: false;
+    /**
+     * This function will be called every time the selection changes. The number with the key of the selected
+     * value will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number) => void;
+    /**
+     * The key of the selected value. If the component allows multiple selection, value must be an array.
+     * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: number;
+};
+type Props$3 = CommonProps & (MultipleSelectionToggleGroup | SingleSelectionToggleGroup);
+
+declare function DxcToggleGroup({ defaultValue, margin, multiple, onChange, options, orientation, tabIndex, value, }: Props$3): react_jsx_runtime.JSX.Element;
+
+type Props$2 = {
+    /**
+     * Content in which the Tooltip will be displayed.
+     */
+    children: ReactNode;
+    /**
+     * Text to be displayed inside the tooltip.
+     */
+    label?: string;
+    /**
+     * Preferred position for displaying the tooltip. It may adjust automatically based on available space.
+     */
+    position?: "bottom" | "top" | "left" | "right";
+};
+
+declare function DxcTooltip(props: Props$2): react_jsx_runtime.JSX.Element;
+
+type Props$1 = {
+    as?: "a" | "blockquote" | "cite" | "code" | "div" | "em" | "figcaption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "pre" | "small" | "span" | "strong";
+    children: ReactNode;
+    color?: string;
+    display?: "inline" | "block";
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: "italic" | "normal";
+    fontWeight?: string;
+    letterSpacing?: string;
+    lineHeight?: string;
+    textAlign?: "left" | "center" | "right";
+    textDecoration?: "none" | "underline" | "line-through";
+    textOverflow?: "clip" | "ellipsis" | "unset";
+    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+};
+
+declare function DxcTypography({ children, ...props }: Props$1): react_jsx_runtime.JSX.Element;
+
+type StepProps = {
+    /**
+     * Step label.
+     */
+    label: string;
+    /**
+     * Description that will be placed next to the step.
+     */
+    description?: string;
+    /**
+     * Material Symbol name or SVG element used as the icon displayed in the step.
+     */
+    icon?: string | SVG;
+    /**
+     * Whether the step is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the step is valid or not.
+     */
+    valid?: boolean;
+};
+type Props = {
+    /**
+     * The wizard can be shown in horizontal or vertical.
+     */
+    mode?: "horizontal" | "vertical";
+    /**
+     * Initially selected step, only when it is uncontrolled.
+     */
+    defaultCurrentStep?: number;
+    /**
+     * Defines which step is marked as the current. The numeration starts at 0.
+     */
+    currentStep?: number;
+    /**
+     * This function will be called when the user clicks a step. The step
+     * number will be passed as a parameter.
+     */
+    onStepClick?: (currentStep: number) => void;
+    /**
+     * An array of objects representing the steps.
+     */
+    steps: StepProps[];
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space$1 | Margin;
+    /**
+     * Value of the tabindex attribute that is given to all the steps.
+     */
+    tabIndex?: number;
+};
+
+declare function DxcWizard({ currentStep, defaultCurrentStep, margin, mode, onStepClick, steps, tabIndex, }: Props): react_jsx_runtime.JSX.Element;
+
+declare const defaultTranslatedComponentLabels: {
+    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 TranslatedLabels = typeof defaultTranslatedComponentLabels;
+
+/**
+ * This type is used to allow labels objects to be passed to the HalstackProvider.
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: Partial<T[P]>;
+};
+declare const 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 HalstackProviderPropsType = {
+    labels?: DeepPartial<TranslatedLabels>;
+    children: ReactNode;
+};
+declare const HalstackProvider: ({ labels, children }: HalstackProviderPropsType) => JSX.Element;
+
+declare function useToast(): {
+    default: (toast: DefaultToast) => (() => void) | undefined;
+    success: (toast: SemanticToast) => (() => void) | undefined;
+    warning: (toast: SemanticToast) => (() => void) | undefined;
+    info: (toast: SemanticToast) => (() => void) | undefined;
+    loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
+};
+
+export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };