@dxc-technology/halstack-react 16.0.1 → 17.0.0

package/dist/index.d.mts

@@ -59,7 +59,7 @@ type AccordionItemProps = {
      */
     tabIndex?: number;
 };
-type CommonProps$9 = {
+type CommonProps$a = {
     /**
      * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
      * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
@@ -70,7 +70,7 @@ type CommonProps$9 = {
      */
     children: ReactElement<AccordionItemProps>[] | ReactElement<AccordionItemProps>;
 };
-type IndependentProps = CommonProps$9 & {
+type IndependentProps = CommonProps$a & {
     /**
      * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
@@ -91,7 +91,7 @@ type IndependentProps = CommonProps$9 & {
      */
     onActiveChange?: (index: number) => void;
 };
-type NonIndependentProps = CommonProps$9 & {
+type NonIndependentProps = CommonProps$a & {
     /**
      * When true, limits the user to single-open section at a time. When false, multiple sections can be opened simultaneously.
      */
@@ -112,10 +112,10 @@ type NonIndependentProps = CommonProps$9 & {
      */
     onActiveChange?: (index: number[]) => void;
 };
-type Props$K = IndependentProps | NonIndependentProps;
+type Props$L = IndependentProps | NonIndependentProps;
 
 declare const DxcAccordion: {
-    (props: Props$K): JSX.Element;
+    (props: Props$L): JSX.Element;
     AccordionItem: ({ label, subLabel, badge, statusLight, icon, assistiveText, disabled, children, tabIndex, }: AccordionItemProps) => JSX.Element;
 };
 
@@ -145,7 +145,7 @@ type Message = {
      */
     text: ReactNode;
 };
-type CommonProps$8 = {
+type CommonProps$9 = {
     /**
      * If true, the alert will have a close button that will remove the message from the alert,
      * only in banner and inline modes. The rest of the functionality will depend
@@ -198,61 +198,39 @@ type ModeSpecificProps = {
      */
     mode: "modal";
 };
-type Props$J = CommonProps$8 & ModeSpecificProps;
+type Props$K = CommonProps$9 & ModeSpecificProps;
 
-declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$J) => react_jsx_runtime.JSX.Element;
+declare const DxcAlert: ({ closable, message, mode, primaryAction, secondaryAction, semantic, title, }: Props$K) => react_jsx_runtime.JSX.Element;
 
-type Section$1 = {
-    items: (Item$2 | GroupItem$2)[];
-    title?: string;
-};
-type Props$I = {
+type SearchBarProps = {
     /**
-     * The content rendered in the bottom part of the sidenav, under the navigation menu.
-     */
-    bottomContent?: ReactNode;
-    /**
-     * Object with the properties of the branding placed at the top of the sidenav.
+     * If true, the search bar input will be focused when rendered.
      */
-    appTitle?: string | ReactNode;
+    autoFocus?: boolean;
     /**
-     * Initial state of the expansion of the sidenav, only when it is uncontrolled.
+     * If true, the component will be disabled.
      */
-    defaultExpanded?: boolean;
+    disabled?: boolean;
     /**
-     * If true the nav menu will have lines marking the groups.
+     * Function invoked when the search bar loses focus.
      */
-    displayGroupLines?: boolean;
+    onBlur?: (value: string) => void;
     /**
-     * If true, the sidenav is expanded.
-     * If undefined the component will be uncontrolled and the value will be managed internally by the component.
+     * Function invoked when the user cancels the search.
      */
-    expanded?: boolean;
+    onCancel?: () => void;
     /**
-     * Array of items to be displayed in the navigation menu.
-     * Each item can be a single/simple item, a group item or a section.
+     * Function invoked when the user changes the input value.
      */
-    navItems?: (Item$2 | GroupItem$2)[] | Section$1[];
+    onChange?: (value: string) => void;
     /**
-     * Function called when the expansion state of the sidenav changes.
+     * Function invoked when the Enter key is pressed.
      */
-    onExpandedChange?: (value: boolean) => void;
+    onEnter?: (value: string) => void;
     /**
-     * The additional content rendered in the upper part of the sidenav, under the branding.
+     * Placeholder text displayed in the search bar input field.
      */
-    topContent?: ReactNode;
-};
-type CommonItemProps$1 = {
-    badge?: ReactElement;
-    icon?: string | SVG;
-    label: string;
-};
-type Item$2 = CommonItemProps$1 & {
-    onSelect?: () => void;
-    selected?: boolean;
-};
-type GroupItem$2 = CommonItemProps$1 & {
-    items: (Item$2 | GroupItem$2)[];
+    placeholder?: string;
 };
 
 type CommonItemProps = {
@@ -270,17 +248,18 @@ type Item$1 = CommonItemProps & {
 };
 type GroupItem$1 = CommonItemProps & {
     items: (Item$1 | GroupItem$1)[];
+    defaultOpen?: boolean;
 };
-type Section = {
+type Section$1 = {
     items: (Item$1 | GroupItem$1)[];
     title?: string;
 };
-type Props$H = {
+type Props$J = {
     /**
      * Array of items to be displayed in the menu.
      * Each item can be a single/simple item, a group item or a section.
      */
-    items: (Item$1 | GroupItem$1)[] | Section[];
+    items: (Item$1 | GroupItem$1)[] | Section$1[];
     /**
      * If true the menu will be displayed with a border.
      */
@@ -303,14 +282,62 @@ type Props$H = {
     isHorizontal?: boolean;
 };
 
+type Section = {
+    items: (Item$1 | GroupItem$1)[];
+    title?: string;
+};
+type SearchbarSidenavProps = Omit<SearchBarProps, "autoFocus" | "disabled" | "onCancel">;
+type Props$I = {
+    /**
+     * The content rendered in the bottom part of the sidenav, under the navigation menu.
+     */
+    bottomContent?: ReactNode;
+    /**
+     * Object with the properties of the branding placed at the top of the sidenav.
+     */
+    appTitle?: string | ReactNode;
+    /**
+     * Initial state of the expansion of the sidenav, only when it is uncontrolled.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * If true the nav menu will have lines marking the groups.
+     */
+    displayGroupLines?: boolean;
+    /**
+     * If true, the sidenav is expanded.
+     * If undefined the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    expanded?: boolean;
+    /**
+     * Array of items to be displayed in the navigation menu.
+     * Each item can be a single/simple item, a group item or a section.
+     */
+    navItems?: (Item$1 | GroupItem$1)[] | Section[];
+    /**
+     * Function called when the expansion state of the sidenav changes.
+     */
+    onExpandedChange?: (value: boolean) => void;
+    /**
+     * When provided, a search bar will be rendered at the top of the sidenav.
+     */
+    searchBar?: SearchbarSidenavProps;
+    /**
+     * The additional content rendered in the upper part of the sidenav, under the branding.
+     */
+    topContent?: ReactNode;
+};
+
 type GroupItem = CommonItemProps & {
     items: Item$1[];
 };
 type MainNavPropsType = (GroupItem | Item$1)[];
-type Props$G = {
+type SearchBarHeaderProps = Omit<SearchBarProps, "autoFocus" | "disabled">;
+type Props$H = {
     appTitle?: string;
     navItems?: MainNavPropsType;
     responsiveBottomContent?: ReactNode;
+    searchBar?: SearchBarHeaderProps;
     sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode);
 };
 
@@ -342,7 +369,7 @@ type Logo = {
     /**
      * Source of the logo image.
      */
-    src: string;
+    src: string | SVG;
     /**
      * Alternative text for the logo image.
      */
@@ -438,9 +465,9 @@ type ApplicationLayoutPropsType = {
 declare const DxcApplicationLayout: {
     ({ logo, header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element;
     Footer: ({ bottomLinks, copyright, leftContent, logo, mode, rightContent, socialLinks, tabIndex, }: FooterPropsType) => JSX.Element;
-    Header: ({ appTitle, navItems, sideContent, responsiveBottomContent }: Props$G) => JSX.Element;
+    Header: ({ appTitle, navItems, responsiveBottomContent, searchBar, sideContent, }: Props$H) => JSX.Element;
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, }: Props$I) => JSX.Element;
+    Sidenav: ({ topContent, bottomContent, navItems, appTitle, displayGroupLines, expanded, defaultExpanded, onExpandedChange, searchBar, }: Props$I) => JSX.Element;
 };
 
 type Size$5 = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
@@ -450,7 +477,7 @@ interface Status {
     mode: "default" | "info" | "success" | "warning" | "error";
     position: "top" | "bottom";
 }
-type Props$F = {
+type Props$G = {
     /**
      * Affects the visual style of the avatar. It can be used following semantic purposes or not.
      */
@@ -511,7 +538,7 @@ type Props$F = {
     title?: string;
 };
 
-declare const DxcAvatar: react.MemoExoticComponent<({ color, disabled, icon, imageSrc, label, linkHref, onClick, primaryText, secondaryText, shape, size, status, tabIndex, title, }: Props$F) => react_jsx_runtime.JSX.Element>;
+declare const DxcAvatar: react.MemoExoticComponent<({ color, disabled, icon, imageSrc, label, linkHref, onClick, primaryText, secondaryText, shape, size, status, tabIndex, title, }: Props$G) => react_jsx_runtime.JSX.Element>;
 
 type ContextualProps = {
     /**
@@ -549,7 +576,7 @@ type NotificationProps = {
      */
     color?: never;
 };
-type CommonProps$7 = {
+type CommonProps$8 = {
     /**
      * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
      */
@@ -563,11 +590,11 @@ type CommonProps$7 = {
      */
     size?: "small" | "medium" | "large";
 };
-type Props$E = (ContextualProps | NotificationProps) & CommonProps$7;
+type Props$F = (ContextualProps | NotificationProps) & CommonProps$8;
 
-declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$E) => JSX.Element;
+declare const DxcBadge: ({ label, title, mode, color, icon, notificationLimit, size, }: Props$F) => JSX.Element;
 
-type Props$D = {
+type Props$E = {
     /**
      * Applies the spacing scale to all sides.
      */
@@ -602,13 +629,13 @@ type Props$D = {
     children: ReactNode;
 };
 
-declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$D) => react_jsx_runtime.JSX.Element;
+declare const DxcBleed: ({ space, horizontal, vertical, top, right, bottom, left, children }: Props$E) => react_jsx_runtime.JSX.Element;
 
 type Item = {
     href?: string;
     label: string;
 };
-type Props$C = {
+type Props$D = {
     /**
      * Provides a label that describes the type of navigation enabled by
      * the component.
@@ -640,7 +667,7 @@ type Props$C = {
     showRoot?: boolean;
 };
 
-declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$C) => react_jsx_runtime.JSX.Element;
+declare const DxcBreadcrumbs: ({ ariaLabel, items, itemsBeforeCollapse, onItemClick, showRoot, }: Props$D) => react_jsx_runtime.JSX.Element;
 
 type IconProps = {
     /**
@@ -670,7 +697,7 @@ type OtherProps = {
      */
     children: ReactNode;
 };
-type Props$B = IconProps | OtherProps;
+type Props$C = IconProps | OtherProps;
 type BulletedListItemPropsType = {
     /**
      * Text to be shown in the list.
@@ -679,7 +706,7 @@ type BulletedListItemPropsType = {
 };
 
 declare const DxcBulletedList: {
-    ({ children, type, icon }: Props$B): JSX.Element;
+    ({ children, type, icon }: Props$C): JSX.Element;
     Item: ({ children }: BulletedListItemPropsType) => JSX.Element;
 };
 
@@ -692,7 +719,7 @@ type Size$4 = {
     height?: "small" | "medium" | "large";
     width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
 };
-type Props$A = {
+type Props$B = {
     /**
      * Text to be placed in the button.
      */
@@ -744,69 +771,167 @@ type Props$A = {
     tabIndex?: number;
 };
 
-declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$A) => JSX.Element;
+declare const DxcButton: ({ disabled, icon, iconPosition, label, margin, mode, onClick, semantic, size, tabIndex, title, type, }: Props$B) => JSX.Element;
+
+type Props$A = {
+    /**
+     * 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;
+};
 
 type Size$3 = {
-    top?: Space$1;
-    bottom?: Space$1;
-    left?: Space$1;
-    right?: Space$1;
+    width?: "fillParent" | "fitContent";
+    height?: "fillParent" | "fitContent";
 };
 type Props$z = {
     /**
-     * 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.
+     * Custom content that will be placed inside the component.
      */
-    imageSrc?: string;
+    children?: ReactNode;
+    /**
+     * Initial state of the checkbox, only when it is uncontrolled.
+     */
+    defaultSelected?: boolean;
     /**
-     * Color of the image background.
+     * Defines the direction of the content inside the card. It can be set to "row" or "column". The default value is "column".
      */
-    imageBgColor?: string;
+    direction?: "row" | "column";
     /**
-     * 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.
+     * Defines the size of the card when it is empty.
      */
-    imagePadding?: Space$1 | Size$3;
+    emptySize?: {
+        width?: string;
+        height?: string;
+        iconSize?: "small" | "medium" | "large";
+    };
+    /**
+     * URL to navigate to when the card is clicked.
+     * If href is defined selectable will be ignored and the link will be always considered as an anchor.
+     */
+    href?: string;
     /**
-     * Whether the image should appear in relation to the content.
+     * Image to be displayed inside the card.
+     */
+    image?: Props$A;
+    /**
+     * Position of the image inside the card. It can be set to "before" or "after" 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.
+     * If true, the card will be displayed as empty state.
      */
-    linkHref?: string;
+    isEmpty?: boolean;
     /**
-     * This function will be called when the user clicks the card. Component
-     * will show some visual feedback on hover.
+     * If true, a loading state will be displayed inside the card.
      */
-    onClick?: () => void;
+    isLoading?: boolean;
     /**
-     * Whether the image must cover the whole image area of the card.
+     * Defines the size of the loading card when isLoading is true.
      */
-    imageCover?: boolean;
+    loadingSize?: {
+        width?: string;
+        height?: 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.
+     * Defines the visual style of the card. It can be set to "elevated" or "outlined".
      */
-    margin?: Space$1 | Size$3;
+    mode?: "elevated" | "outlined";
     /**
-     * Value of the tabindex attribute applied when the component is clickable.
+     * If true, the link will open in a new window. href must be provided for this to work.
      */
-    tabIndex?: number;
+    newWindow?: boolean;
     /**
-     * Determines whether or not the component should have an outline.
+     * Callback function that is called when the card is clicked.
+     * It receives a boolean value indicating whether the card is selected or not.
+     * selectable must be true for this to work.
      */
-    outlined?: boolean;
+    onSelectionChange?: (selected: boolean) => void;
     /**
-     * Custom content that will be placed inside the component.
+     * Callback function that is called when the card is clicked.
      */
-    children?: ReactNode;
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * If true, the card can be selected. When the card is clicked, the onSelectionChange callback will be called with the new selected state of the card.
+     * If href is defined, the card won't be selectable, even if this prop is true.
+     */
+    selectable?: boolean;
+    /**
+     * If true, the card is selected and if defined it will behave as a controlled component.
+     */
+    selected?: boolean;
+    /**
+     * Defines the size of the card. Width and height can be set to "fillParent" or "fitContent".
+     * The default value is { width: "fitContent", height: "fitContent" }.
+     */
+    size?: Size$3;
+    /**
+     * Specifies the tab index of the card.
+     * The default value is 0.
+     */
+    tabIndex?: number;
 };
 
-declare const DxcCard: ({ imageSrc, imageBgColor, imagePadding, imagePosition, linkHref, onClick, imageCover, margin, tabIndex, outlined, children, }: Props$z) => react_jsx_runtime.JSX.Element;
+declare const DxcCard: react.ForwardRefExoticComponent<Props$z & react.RefAttributes<HTMLAnchorElement>>;
 
 type Props$y = {
     /**
@@ -875,43 +1000,80 @@ type Props$y = {
 
 declare const DxcCheckbox: react.ForwardRefExoticComponent<Props$y & react.RefAttributes<HTMLDivElement>>;
 
-type Props$x = {
+type ChipAvatarType = {
+    color: Props$G["color"];
+    profileName?: Props$G["label"];
+    imageSrc?: Props$G["imageSrc"];
+    icon?: Props$G["icon"];
+};
+type CommonProps$7 = {
     /**
-     * Text to be placed on the chip.
+     * Function to be called when the chip is clicked or the dismiss action is triggered.
      */
-    label?: string;
+    onClick?: () => void;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+type SelectableChipProps = CommonProps$7 & {
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The whole chip is an interactive element that allows users to activate or clear options directly within the interface.
+     */
+    mode?: "selectable";
     /**
-     * Element or path used as icon to be placed after the chip label.
+     * If true, the component will be selected. This property is only applicable when the mode is "selectable".
+     * If undefined, the component manages its own internal state (uncontrolled mode).
      */
-    suffixIcon?: string | SVG;
+    selected?: boolean;
+} & ({
+    /**
+     * Element, path or avatar used as icon to be placed before the chip label.
+     */
+    prefix: ChipAvatarType;
+    /**
+     * Text to be placed on the chip. Required when using an avatar prefix.
+     */
+    label: string;
+} | {
     /**
      * Element or path used as icon to be placed before the chip label.
      */
-    prefixIcon?: string | SVG;
+    prefix: string | SVG;
     /**
-     * This function will be called when the suffix is clicked.
+     * Text to be placed on the chip. Optional when using an icon prefix.
      */
-    onClickSuffix?: () => void;
+    label?: string;
+} | {
+    prefix?: undefined;
     /**
-     * This function will be called when the prefix is clicked.
+     * Text to be placed on the chip.
      */
-    onClickPrefix?: () => void;
+    label: string;
+});
+type DismissibleChipProps = CommonProps$7 & {
     /**
-     * If true, the component will be disabled.
+     * Dismissible chip is used to represent information generated by user input within an interface.
      */
-    disabled?: boolean;
+    mode: "dismissible";
     /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * Text to be placed on the chip.
      */
-    margin?: Space$1 | Margin;
+    label: string;
     /**
-     * Value of the tabindex attribute.
+     * Element, path or avatar used as icon to be placed before the chip label.
      */
-    tabIndex?: number;
+    prefix?: string | SVG | ChipAvatarType;
+    selected?: never;
+    disabled?: never;
 };
+type Props$x = SelectableChipProps | DismissibleChipProps;
 
-declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element;
+declare const DxcChip: ({ disabled, label, mode, onClick, prefix, selected, tabIndex, }: Props$x) => react_jsx_runtime.JSX.Element | null;
 
 type Space = {
     top?: string;
@@ -1078,7 +1240,7 @@ type Props$w = {
 
 declare const DxcContainer: react.ForwardRefExoticComponent<Props$w & react.RefAttributes<HTMLDivElement>>;
 
-type Props$v = Omit<Props$H, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
+type Props$v = Omit<Props$J, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
 
 declare function DxcContextualMenu({ items }: Props$v): react_jsx_runtime.JSX.Element;
 
@@ -1663,6 +1825,10 @@ type CommonProps$5 = {
      * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
      */
     showPreview?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "medium" | "fillParent";
     /**
      * Value of the tabindex attribute.
      */
@@ -1945,75 +2111,9 @@ type Props$l = {
 
 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;
+declare function DxcImage({ alt, caption, height, lazyLoading, objectFit, objectPosition, onError, onLoad, sizes, src, srcSet, width, }: Props$A): react_jsx_runtime.JSX.Element;
 
-type Props$j = {
+type Props$k = {
     /**
      * Applies the spacing scale to the bottom side.
      */
@@ -2048,7 +2148,7 @@ type Props$j = {
     vertical?: string;
 };
 
-declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$j): react_jsx_runtime.JSX.Element;
+declare function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: Props$k): react_jsx_runtime.JSX.Element;
 
 type LinkProps = {
     /**
@@ -2131,7 +2231,7 @@ type TabProps$1 = {
      */
     notificationNumber?: boolean | number;
 };
-type Props$i = {
+type Props$j = {
     /**
      * Contains one or more DxcNavTabs.Tab.
      */
@@ -2147,11 +2247,11 @@ type Props$i = {
 };
 
 declare const DxcNavTabs: {
-    ({ iconPosition, tabIndex, children }: Props$i): JSX.Element;
+    ({ iconPosition, tabIndex, children }: Props$j): JSX.Element;
     Tab: react.ForwardRefExoticComponent<TabProps$1 & react.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
 };
 
-type Props$h = {
+type Props$i = {
     /**
      * Text to be placed above the number.
      */
@@ -2278,9 +2378,9 @@ type Props$h = {
     showControls?: boolean;
 };
 
-declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$h & react.RefAttributes<HTMLDivElement>>;
+declare const DxcNumberInput: react.ForwardRefExoticComponent<Props$i & react.RefAttributes<HTMLDivElement>>;
 
-type Props$g = {
+type Props$h = {
     /**
      * Number of the current selected page.
      */
@@ -2318,13 +2418,13 @@ type Props$g = {
     tabIndex?: number;
 };
 
-declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$g) => JSX.Element;
+declare const DxcPaginator: ({ currentPage, itemsPerPage, itemsPerPageOptions, totalItems, showGoToPage, onPageChange, itemsPerPageFunction, tabIndex, }: Props$h) => JSX.Element;
 
 declare function DxcParagraph({ children }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-type Props$f = {
+type Props$g = {
     /**
      * Text to be placed above the password input.
      */
@@ -2428,7 +2528,35 @@ type Props$f = {
     ariaLabel?: string;
 };
 
-declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$f & react.RefAttributes<HTMLDivElement>>;
+declare const DxcPasswordInput: react.ForwardRefExoticComponent<Props$g & react.RefAttributes<HTMLDivElement>>;
+
+type PopoverPropsType = {
+    /** Action that triggers the popover to open. */
+    actionToOpen?: "click" | "hover";
+    /** Alignment of the popover relative to the trigger element. */
+    align?: "start" | "center" | "end";
+    /** Set to true if child controls the events. It will render the child directly without wrapping it. */
+    asChild?: boolean;
+    /** Element that triggers the popover and works as the anchor. */
+    children: React.ReactNode;
+    /** Whether the popover should display a tip (arrow). */
+    hasTip?: boolean;
+    /** Controlled open state of the popover. If it is left undefined, it will be uncontrolled. */
+    isOpen?: boolean;
+    /** Distance in pixels from the trigger element to the popover. */
+    offset?: number;
+    /** Callback function when the popover is opened.
+     * Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. */
+    onOpen?: () => void;
+    /** Callback function when the popover is closed. */
+    onClose?: () => void;
+    /** Content to be displayed inside the popover. */
+    popoverContent: React.ReactNode;
+    /** Side of the trigger where the popover will appear. */
+    side?: "top" | "bottom" | "left" | "right";
+};
+
+declare const DxcPopover: ({ actionToOpen, align, asChild, children, hasTip, isOpen, offset, onOpen, onClose, popoverContent, side, }: PopoverPropsType) => JSX.Element;
 
 type Size$1 = {
     top?: Space$1;
@@ -2436,7 +2564,7 @@ type Size$1 = {
     left?: Space$1;
     right?: Space$1;
 };
-type Props$e = {
+type Props$f = {
     /**
      * Text to be placed above the progress bar.
      */
@@ -2470,7 +2598,7 @@ type Props$e = {
     ariaLabel?: string;
 };
 
-declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$e) => JSX.Element;
+declare const DxcProgressBar: ({ label, helperText, overlay, value, showValue, margin, ariaLabel, }: Props$f) => JSX.Element;
 
 type Link = {
     /**
@@ -2482,7 +2610,7 @@ type Link = {
      */
     links?: Link[];
 };
-type Props$d = {
+type Props$e = {
     /**
      * Title of the quick nav component.
      */
@@ -2493,7 +2621,7 @@ type Props$d = {
     links: Link[];
 };
 
-declare function DxcQuickNav({ links, title }: Props$d): react_jsx_runtime.JSX.Element;
+declare function DxcQuickNav({ links, title }: Props$e): react_jsx_runtime.JSX.Element;
 
 type Option$1 = {
     /**
@@ -2694,10 +2822,10 @@ type NonPaginatedProps = CommonProps$3 & {
      */
     showGoToPage?: never;
 };
-type Props$c = PaginatedProps | NonPaginatedProps;
+type Props$d = PaginatedProps | NonPaginatedProps;
 
 declare const DxcResultsetTable: {
-    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, virtualizedHeight, }: Props$c): react_jsx_runtime.JSX.Element;
+    ({ columns, hidePaginator, itemsPerPage, itemsPerPageFunction, itemsPerPageOptions, margin, mode, rows, showGoToPage, tabIndex, virtualizedHeight, }: Props$d): react_jsx_runtime.JSX.Element;
     ActionsCell: ({ actions }: ActionsCellPropsType) => react_jsx_runtime.JSX.Element;
 };
 
@@ -2889,11 +3017,11 @@ type MultipleSelect = CommonProps$2 & {
      */
     value?: string[];
 };
-type Props$b = SingleSelect | MultipleSelect;
+type Props$c = SingleSelect | MultipleSelect;
 
-declare const DxcSelect: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSelect: react.ForwardRefExoticComponent<Props$c & react.RefAttributes<HTMLDivElement>>;
 
-type Props$a = {
+type Props$b = {
     /**
      * Specifies a string to be used as the name for the slider element when no `label` is provided.
      */
@@ -2972,9 +3100,9 @@ type Props$a = {
     value?: number;
 };
 
-declare const DxcSlider: react.ForwardRefExoticComponent<Props$a & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSlider: react.ForwardRefExoticComponent<Props$b & react.RefAttributes<HTMLDivElement>>;
 
-type Props$9 = {
+type Props$a = {
     /**
      * Specifies a string to be used as the name for the spinner element when no `label` is provided or the `mode` is set to small.
      */
@@ -3008,11 +3136,11 @@ type Props$9 = {
     value?: number;
 };
 
-declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$9) => react_jsx_runtime.JSX.Element;
+declare const DxcSpinner: ({ ariaLabel, inheritColor, label, margin, mode, showValue, value, }: Props$a) => react_jsx_runtime.JSX.Element;
 
 type Mode = "default" | "info" | "success" | "warning" | "error";
 type Size = "small" | "medium" | "large";
-type Props$8 = {
+type Props$9 = {
     /**
      * It will define the color of the light based on its semantic meaning.
      */
@@ -3027,9 +3155,9 @@ type Props$8 = {
     size?: Size;
 };
 
-declare function DxcStatusLight({ label, mode, size }: Props$8): react_jsx_runtime.JSX.Element;
+declare function DxcStatusLight({ label, mode, size }: Props$9): react_jsx_runtime.JSX.Element;
 
-type Props$7 = {
+type Props$8 = {
     /**
      * Specifies a string to be used as the name for the switch element when no `label` is provided.
      */
@@ -3088,7 +3216,7 @@ type Props$7 = {
     value?: string;
 };
 
-declare const DxcSwitch: react.ForwardRefExoticComponent<Props$7 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcSwitch: react.ForwardRefExoticComponent<Props$8 & react.RefAttributes<HTMLDivElement>>;
 
 declare const DxcTable: {
     ({ children, margin, mode }: Props$t): react_jsx_runtime.JSX.Element;
@@ -3133,14 +3261,14 @@ type TabsProps = {
      */
     children?: ReactNode;
 };
-type Props$6 = TabsProps;
+type Props$7 = TabsProps;
 
 declare const DxcTabs: {
-    ({ children, iconPosition, margin, tabIndex }: Props$6): react_jsx_runtime.JSX.Element;
+    ({ children, iconPosition, margin, tabIndex }: Props$7): react_jsx_runtime.JSX.Element;
     Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
-type Props$5 = {
+type Props$6 = {
     /**
      * Specifies a string to be used as the name for the textarea element when no `label` is provided.
      */
@@ -3274,7 +3402,7 @@ type Props$5 = {
     verticalGrow?: "auto" | "manual" | "none";
 };
 
-declare const DxcTextarea: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcTextarea: react.ForwardRefExoticComponent<Props$6 & react.RefAttributes<HTMLDivElement>>;
 
 type Action$1 = {
     /**
@@ -3292,7 +3420,7 @@ type Action$1 = {
      */
     title?: string;
 };
-type Props$4 = {
+type Props$5 = {
     /**
      * Sets the alignment inside the input.
      */
@@ -3445,7 +3573,96 @@ type Props$4 = {
     ariaLabel?: string;
 };
 
-declare const DxcTextInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
+declare const DxcTextInput: react.ForwardRefExoticComponent<Props$5 & react.RefAttributes<HTMLDivElement>>;
+
+type Props$4 = {
+    /**
+     * Specifies a string to be used as the name for the timeInput element when no `label` is provided.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, the input will have an action to clear the entered value.
+     */
+    clearable?: boolean;
+    /**
+     * Initial value of the input, only when it is uncontrolled.
+     */
+    defaultValue?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the input component. If
+     * the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
+     */
+    error?: string;
+    /**
+     * Helper text to be placed above the input.
+     */
+    helperText?: string;
+    /**
+     * Text to be placed above the input.
+     */
+    label?: string;
+    /**
+     * Name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * This function will be called when the input element loses the focus.
+     * An object including the input value and the error (if the value
+     * entered is not valid) will be passed to this function. If there is no error,
+     * error will not be defined.
+     */
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * This function will be called when the user types within the input
+     * or selects a value in the dropdown element of the component.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * If true, the input will be optional, showing '(Optional)'
+     * next to the label. Otherwise, the field will be considered required and an error will be
+     * passed as a parameter to the OnBlur function when it has
+     * not been filled.
+     */
+    optional?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     * In addition, the clear action will not be displayed even if the flag is set to true.
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the component will display seconds and allow the user to input them. Otherwise, seconds will not be shown and the user will not be able to input them.
+     */
+    showSeconds?: boolean;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Time format of the input. It can be either 12 or 24.
+     */
+    timeFormat?: "12" | "24";
+    /**
+     * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
+     */
+    value?: string;
+};
+
+declare const DxcTimeInput: react.ForwardRefExoticComponent<Props$4 & react.RefAttributes<HTMLDivElement>>;
 
 type Action = {
     /**
@@ -3714,8 +3931,12 @@ declare const defaultTranslatedComponentLabels: {
         previousMonthTitle: string;
         nextMonthTitle: string;
     };
+    card: {
+        noContent: string;
+    };
     dateInput: {
         invalidDateErrorMessage: string;
+        datePickerActionTitle: string;
     };
     dialog: {
         closeIconAriaLabel: string;
@@ -3771,6 +3992,12 @@ declare const defaultTranslatedComponentLabels: {
     radioGroup: {
         optionalItemLabelDefault: string;
     };
+    searchBar: {
+        clearFieldActionTitle: string;
+        inputAriaLabel: string;
+        triggerTitle: string;
+        cancelButtonLabel: string;
+    };
     select: {
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
@@ -3786,6 +4013,9 @@ declare const defaultTranslatedComponentLabels: {
         searchingMessage: string;
         fetchingDataErrorMessage: string;
     };
+    timeInput: {
+        timePickerActionTitle: string;
+    };
     toast: {
         clearToastActionTitle: string;
     };
@@ -3815,8 +4045,12 @@ declare const HalstackLanguageContext: react.Context<{
         previousMonthTitle: string;
         nextMonthTitle: string;
     };
+    card: {
+        noContent: string;
+    };
     dateInput: {
         invalidDateErrorMessage: string;
+        datePickerActionTitle: string;
     };
     dialog: {
         closeIconAriaLabel: string;
@@ -3872,6 +4106,12 @@ declare const HalstackLanguageContext: react.Context<{
     radioGroup: {
         optionalItemLabelDefault: string;
     };
+    searchBar: {
+        clearFieldActionTitle: string;
+        inputAriaLabel: string;
+        triggerTitle: string;
+        cancelButtonLabel: string;
+    };
     select: {
         actionClearSelectionTitle: string;
         actionClearSearchTitle: string;
@@ -3887,11 +4127,17 @@ declare const HalstackLanguageContext: react.Context<{
         searchingMessage: string;
         fetchingDataErrorMessage: string;
     };
+    timeInput: {
+        timePickerActionTitle: string;
+    };
     toast: {
         clearToastActionTitle: string;
     };
 }>;
-type ThemeType = Record<string, string | number>;
+type ThemeType = {
+    tokens?: Record<string, string | number>;
+    logos?: Record<string, string | undefined>;
+};
 type HalstackProviderPropsType = {
     labels?: DeepPartial<TranslatedLabels>;
     children: ReactNode;
@@ -3907,4 +4153,4 @@ declare function useToast(): {
     loading: (toast: Omit<LoadingToast, "loading">) => (() => void) | undefined;
 };
 
-export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcAvatar, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };
+export { DxcAccordion, DxcAlert, DxcApplicationLayout, DxcAvatar, DxcBadge, DxcBleed, DxcBreadcrumbs, DxcBulletedList, DxcButton, DxcCard, DxcCheckbox, DxcChip, DxcContainer, DxcContextualMenu, DxcDataGrid, DxcDateInput, DxcDialog, DxcDivider, DxcDropdown, DxcFileInput, DxcFlex, DxcGrid, DxcHeading, DxcImage, DxcInset, DxcLink, DxcNavTabs, DxcNumberInput, DxcPaginator, DxcParagraph, DxcPasswordInput, DxcPopover, DxcProgressBar, DxcQuickNav, DxcRadioGroup, DxcResultsetTable, DxcSelect, DxcSlider, DxcSpinner, DxcStatusLight, DxcSwitch, DxcTable, DxcTabs, DxcTextInput, DxcTextarea, DxcTimeInput, DxcToastsQueue, DxcToggleGroup, DxcTooltip, DxcTypography, DxcWizard, HalstackLanguageContext, HalstackProvider, useToast };