@dxc-technology/halstack-react 15.2.1 → 15.3.2

package/dist/index.mjs

@@ -1959,6 +1959,7 @@ var Flex = styled2.div`
     ${typeof props.alignSelf === "string" ? `align-self: ${props.alignSelf};` : ""}
     ${typeof props.$basis === "string" ? `flex-basis: ${props.$basis};` : ""}
     ${typeof props.$direction === "string" ? `flex-direction: ${props.$direction};` : ""}
+    ${props.$fullHeight ? "height: 100%;" : ""}
     ${typeof props.$gap === "string" ? `gap: ${props.$gap};` : ""}
     ${typeof props.$gap === "object" ? `column-gap: ${props.$gap.columnGap}; row-gap: ${props.$gap.rowGap};` : ""}
     ${typeof props.$grow === "number" ? `flex-grow: ${props.$grow};` : ""}
@@ -1968,16 +1969,7 @@ var Flex = styled2.div`
     ${typeof props.$wrap === "string" ? `flex-wrap: ${props.$wrap};` : ""}
   `}
 `;
-var DxcFlex = ({
-  basis,
-  direction,
-  gap,
-  grow,
-  order,
-  shrink,
-  wrap,
-  ...props
-}) => /* @__PURE__ */ jsx3(
+var DxcFlex = ({ basis, direction, fullHeight = false, gap, grow, order, shrink, wrap, ...props }) => /* @__PURE__ */ jsx3(
   Flex,
   {
     $basis: basis,
@@ -1987,6 +1979,7 @@ var DxcFlex = ({
     $order: order,
     $shrink: shrink,
     $wrap: wrap,
+    $fullHeight: fullHeight,
     ...props
   }
 );
@@ -1994,6 +1987,7 @@ var Flex_default = DxcFlex;
 
 // src/container/Container.tsx
 import styled3 from "styled-components";
+import { forwardRef } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var getBorderStyles = (direction, borderProperties) => `border-${direction}: ${borderProperties.width ?? ""} ${borderProperties.style ?? ""} ${borderProperties.color ? getCoreColorToken(borderProperties.color) : ""};`;
 var Container = styled3.div`
@@ -2057,9 +2051,12 @@ var Container = styled3.div`
   padding-bottom: ${({ padding }) => typeof padding === "object" && padding.bottom ? spaces[padding.bottom] : ""};
   padding-left: ${({ padding }) => typeof padding === "object" && padding.left ? spaces[padding.left] : ""};
 `;
-function DxcContainer({ display, width, height, overflow, ...props }) {
-  return /* @__PURE__ */ jsx4(Container, { $display: display, $width: width, $height: height, $overflow: overflow, ...props });
-}
+var DxcContainer = forwardRef(
+  ({ display, width, height, overflow, ...props }, ref) => {
+    return /* @__PURE__ */ jsx4(Container, { ref, $display: display, $width: width, $height: height, $overflow: overflow, ...props });
+  }
+);
+var Container_default = DxcContainer;
 
 // src/accordion/AccordionItem.tsx
 import React from "react";
@@ -2094,7 +2091,7 @@ var AccordionItem = ({
         tabIndex: disabled ? -1 : tabIndex,
         "aria-expanded": isItemExpanded,
         "aria-controls": `accordion-panel-${id}`,
-        children: /* @__PURE__ */ jsx5(DxcContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(Flex_default, { gap: "1.5rem", children: [
+        children: /* @__PURE__ */ jsx5(Container_default, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(Flex_default, { gap: "1.5rem", children: [
           /* @__PURE__ */ jsx5(LeftSideContainer, { children: /* @__PURE__ */ jsxs(Flex_default, { gap: "0.75rem", children: [
             (icon || badge?.position === "before") && /* @__PURE__ */ jsx5(OptionalElement, { children: icon ? /* @__PURE__ */ jsx5(IconContainer2, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx5(Icon_default, { icon }) : icon }) : /* @__PURE__ */ jsx5(StatusContainer, { subLabel, children: disabled ? cloneElement(badge?.element, { color: "grey" }) : badge?.element }) }),
             /* @__PURE__ */ jsxs(LabelsContainer, { children: [
@@ -2350,7 +2347,7 @@ var Accordion_default = DxcAccordion;
 
 // src/alert/Alert.tsx
 import styled11, { css, ThemeProvider as ThemeProvider4 } from "styled-components";
-import { useState as useState3, memo, useId as useId2, useEffect as useEffect2, useCallback as useCallback3, useContext as useContext5 } from "react";
+import { useState as useState4, memo, useId as useId3, useEffect as useEffect3, useCallback as useCallback3, useContext as useContext5 } from "react";
 
 // src/button/Button.tsx
 import { useContext as useContext4 } from "react";
@@ -2928,7 +2925,7 @@ var StyledDivider = styled8.hr`
 var Divider_default = DxcDivider;
 
 // src/action-icon/ActionIcon.tsx
-import { forwardRef } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ActionIcon = styled9.button`
@@ -2968,7 +2965,7 @@ var ActionIcon = styled9.button`
     height: 16px;
   }
 `;
-var ActionIcon_default = forwardRef(
+var ActionIcon_default = forwardRef2(
   ({ disabled = false, title, icon, onClick, tabIndex }, ref) => /* @__PURE__ */ jsx10(Tooltip, { label: title, children: /* @__PURE__ */ jsx10(
     ActionIcon,
     {
@@ -3091,6 +3088,7 @@ var FocusLock = ({ children }) => {
 var FocusLock_default = FocusLock;
 
 // src/alert/ModalAlertWrapper.tsx
+import { useEffect as useEffect2, useId as useId2, useState as useState3 } from "react";
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var BodyStyle = createGlobalStyle`
   body {
@@ -3123,16 +3121,24 @@ var ModalAlertContainer = styled10.div`
     min-width: 92%;
   }
 `;
-var ModalAlertWrapper = ({ condition, onClose, children }) => condition ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
-  /* @__PURE__ */ jsx12(BodyStyle, {}),
-  createPortal(
-    /* @__PURE__ */ jsxs5(Modal, { children: [
-      /* @__PURE__ */ jsx12(Overlay, { onClick: onClose }),
-      /* @__PURE__ */ jsx12(ModalAlertContainer, { children: /* @__PURE__ */ jsx12(FocusLock_default, { children }) })
-    ] }),
-    document.body
-  )
-] }) : children;
+var ModalAlertWrapper = ({ condition, onClose, children }) => {
+  const id = useId2();
+  const [portalContainer, setPortalContainer] = useState3(null);
+  useEffect2(() => {
+    setPortalContainer(document.getElementById(`dialog-${id}-portal`));
+  }, []);
+  return condition ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx12(BodyStyle, {}),
+    /* @__PURE__ */ jsx12("div", { id: `dialog-${id}-portal`, style: { position: "absolute" } }),
+    portalContainer && createPortal(
+      /* @__PURE__ */ jsxs5(Modal, { children: [
+        /* @__PURE__ */ jsx12(Overlay, { onClick: onClose }),
+        /* @__PURE__ */ jsx12(ModalAlertContainer, { children: /* @__PURE__ */ jsx12(FocusLock_default, { children }) })
+      ] }),
+      portalContainer
+    )
+  ] }) : children;
+};
 var ModalAlertWrapper_default = ModalAlertWrapper;
 
 // src/alert/Alert.tsx
@@ -3233,9 +3239,9 @@ function DxcAlert({
   semantic = "info",
   title = ""
 }) {
-  const [messages, setMessages] = useState3(Array.isArray(message) ? message : [message]);
-  const [currentIndex, setCurrentIndex] = useState3(0);
-  const id = useId2();
+  const [messages, setMessages] = useState4(Array.isArray(message) ? message : [message]);
+  const [currentIndex, setCurrentIndex] = useState4(0);
+  const id = useId3();
   const colorsTheme = useContext5(HalstackContext);
   const translatedLabels = useContext5(HalstackLanguageContext);
   const handleNextOnClick = () => {
@@ -3250,7 +3256,7 @@ function DxcAlert({
       setMessages((prevMessages) => prevMessages.filter((_, index) => index !== currentIndex));
     }
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (currentIndex === messages.length) handlePrevOnClick();
   }, [currentIndex, messages, handlePrevOnClick]);
   return /* @__PURE__ */ jsx13(ThemeProvider4, { theme: colorsTheme.alert, children: /* @__PURE__ */ jsx13(ModalAlertWrapper_default, { condition: mode === "modal", onClose: handleOnClose, children: /* @__PURE__ */ jsxs6(
@@ -3339,7 +3345,7 @@ function DxcAlert({
 }
 
 // src/layout/ApplicationLayout.tsx
-import { useContext as useContext11, useEffect as useEffect6, useRef as useRef4, useState as useState9 } from "react";
+import { useContext as useContext11, useEffect as useEffect7, useRef as useRef4, useState as useState10 } from "react";
 import styled19 from "styled-components";
 
 // src/footer/Footer.tsx
@@ -3695,18 +3701,18 @@ var BottomLink = styled12.a`
 var Footer_default = DxcFooter;
 
 // src/header/Header.tsx
-import { useEffect as useEffect3, useMemo as useMemo5, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState7 } from "react";
 import styled16, { ThemeProvider as ThemeProvider7 } from "styled-components";
 
 // src/dropdown/Dropdown.tsx
 import * as Popover from "@radix-ui/react-popover";
-import { useCallback as useCallback4, useId as useId3, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState5, useContext as useContext7 } from "react";
+import { useCallback as useCallback4, useId as useId4, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState6, useContext as useContext7 } from "react";
 import styled15, { ThemeProvider as ThemeProvider6 } from "styled-components";
 
 // src/utils/useWidth.tsx
-import { useLayoutEffect, useState as useState4 } from "react";
+import { useLayoutEffect, useState as useState5 } from "react";
 var useWidth = (target) => {
-  const [width, setWidth] = useState4(0);
+  const [width, setWidth] = useState5(0);
   useLayoutEffect(() => {
     if (target != null) {
       setWidth(target.getBoundingClientRect().width);
@@ -3727,7 +3733,7 @@ var useWidth = (target) => {
 var useWidth_default = useWidth;
 
 // src/dropdown/DropdownMenu.tsx
-import { forwardRef as forwardRef2, memo as memo3 } from "react";
+import { forwardRef as forwardRef3, memo as memo3 } from "react";
 import styled14 from "styled-components";
 
 // src/dropdown/DropdownMenuItem.tsx
@@ -3800,7 +3806,7 @@ var DropdownMenuItem_default = memo2(DropdownMenuItem);
 
 // src/dropdown/DropdownMenu.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var DropdownMenu = forwardRef2(
+var DropdownMenu = forwardRef3(
   ({ id, dropdownTriggerId, iconsPosition, visualFocusIndex, menuItemOnClick, onKeyDown, options, styles }, ref) => /* @__PURE__ */ jsx17(
     DropdownMenuContainer,
     {
@@ -3879,11 +3885,11 @@ var DxcDropdown = ({
   tabIndex = 0,
   title
 }) => {
-  const id = useId3();
+  const id = useId4();
   const triggerId = `trigger-${id}`;
   const menuId = `menu-${id}`;
-  const [isOpen, changeIsOpen] = useState5(false);
-  const [visualFocusIndex, setVisualFocusIndex] = useState5(0);
+  const [isOpen, changeIsOpen] = useState6(false);
+  const [visualFocusIndex, setVisualFocusIndex] = useState6(0);
   const colorsTheme = useContext7(HalstackContext);
   const triggerRef = useRef2(null);
   const menuRef = useRef2(null);
@@ -3996,72 +4002,75 @@ var DxcDropdown = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ jsx18(ThemeProvider6, { theme: colorsTheme.dropdown, children: /* @__PURE__ */ jsx18(
-    DropdownContainer,
-    {
-      onMouseEnter: !disabled && expandOnHover ? handleOnOpenMenu : void 0,
-      onMouseLeave: !disabled && expandOnHover ? handleOnCloseMenu : void 0,
-      onBlur: !disabled ? handleOnBlur : void 0,
-      margin,
-      size,
-      children: /* @__PURE__ */ jsxs10(Popover.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx18(Tooltip, { label: title, children: /* @__PURE__ */ jsx18(Popover.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs10(
-          DropdownTrigger,
-          {
-            onClick: handleTriggerOnClick,
-            onKeyDown: handleTriggerOnKeyDown,
-            onBlur: (event) => {
-              event.stopPropagation();
-            },
-            disabled,
-            label,
-            margin,
-            size,
-            id: triggerId,
-            "aria-haspopup": "true",
-            "aria-controls": isOpen ? menuId : void 0,
-            "aria-expanded": isOpen ? true : void 0,
-            "aria-label": "Show options",
-            tabIndex,
-            ref: triggerRef,
-            children: [
-              /* @__PURE__ */ jsxs10(DropdownTriggerContent, { children: [
-                label && iconPosition === "after" && /* @__PURE__ */ jsx18(DropdownTriggerLabel, { children: label }),
-                icon && /* @__PURE__ */ jsx18(
-                  DropdownTriggerIcon,
-                  {
-                    disabled,
-                    role: typeof icon === "string" ? void 0 : "img",
-                    "aria-hidden": true,
-                    children: typeof icon === "string" ? /* @__PURE__ */ jsx18(Icon_default, { icon }) : icon
-                  }
-                ),
-                label && iconPosition === "before" && /* @__PURE__ */ jsx18(DropdownTriggerLabel, { children: label })
-              ] }),
-              !caretHidden && /* @__PURE__ */ jsxs10(CaretIcon, { disabled, children: [
-                /* @__PURE__ */ jsx18(Icon_default, { icon: isOpen ? "arrow_drop_up" : "arrow_drop_down" }),
-                " "
-              ] })
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx18(Popover.Portal, { children: /* @__PURE__ */ jsx18(Popover.Content, { asChild: true, sideOffset: 1, children: /* @__PURE__ */ jsx18(
-          DropdownMenu_default,
-          {
-            id: menuId,
-            dropdownTriggerId: triggerId,
-            options,
-            iconsPosition: optionsIconPosition,
-            visualFocusIndex,
-            menuItemOnClick: handleMenuItemOnClick,
-            onKeyDown: handleMenuOnKeyDown,
-            styles: { width, zIndex: "310" },
-            ref: menuRef
-          }
-        ) }) })
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ jsxs10(ThemeProvider6, { theme: colorsTheme.dropdown, children: [
+    /* @__PURE__ */ jsx18(
+      DropdownContainer,
+      {
+        onMouseEnter: !disabled && expandOnHover ? handleOnOpenMenu : void 0,
+        onMouseLeave: !disabled && expandOnHover ? handleOnCloseMenu : void 0,
+        onBlur: !disabled ? handleOnBlur : void 0,
+        margin,
+        size,
+        children: /* @__PURE__ */ jsxs10(Popover.Root, { open: isOpen, children: [
+          /* @__PURE__ */ jsx18(Tooltip, { label: title, children: /* @__PURE__ */ jsx18(Popover.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs10(
+            DropdownTrigger,
+            {
+              onClick: handleTriggerOnClick,
+              onKeyDown: handleTriggerOnKeyDown,
+              onBlur: (event) => {
+                event.stopPropagation();
+              },
+              disabled,
+              label,
+              margin,
+              size,
+              id: triggerId,
+              "aria-haspopup": "true",
+              "aria-controls": isOpen ? menuId : void 0,
+              "aria-expanded": isOpen ? true : void 0,
+              "aria-label": "Show options",
+              tabIndex,
+              ref: triggerRef,
+              children: [
+                /* @__PURE__ */ jsxs10(DropdownTriggerContent, { children: [
+                  label && iconPosition === "after" && /* @__PURE__ */ jsx18(DropdownTriggerLabel, { children: label }),
+                  icon && /* @__PURE__ */ jsx18(
+                    DropdownTriggerIcon,
+                    {
+                      disabled,
+                      role: typeof icon === "string" ? void 0 : "img",
+                      "aria-hidden": true,
+                      children: typeof icon === "string" ? /* @__PURE__ */ jsx18(Icon_default, { icon }) : icon
+                    }
+                  ),
+                  label && iconPosition === "before" && /* @__PURE__ */ jsx18(DropdownTriggerLabel, { children: label })
+                ] }),
+                !caretHidden && /* @__PURE__ */ jsxs10(CaretIcon, { disabled, children: [
+                  /* @__PURE__ */ jsx18(Icon_default, { icon: isOpen ? "arrow_drop_up" : "arrow_drop_down" }),
+                  " "
+                ] })
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx18(Popover.Portal, { container: document.getElementById(`${id}-portal`), children: /* @__PURE__ */ jsx18(Popover.Content, { asChild: true, sideOffset: 1, children: /* @__PURE__ */ jsx18(
+            DropdownMenu_default,
+            {
+              id: menuId,
+              dropdownTriggerId: triggerId,
+              options,
+              iconsPosition: optionsIconPosition,
+              visualFocusIndex,
+              menuItemOnClick: handleMenuItemOnClick,
+              onKeyDown: handleMenuOnKeyDown,
+              styles: { width, zIndex: "320" },
+              ref: menuRef
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { id: `${id}-portal`, style: { position: "absolute" } })
+  ] });
 };
 var sizes = {
   small: "60px",
@@ -4190,8 +4199,8 @@ var DxcHeader = ({
   margin,
   tabIndex = 0
 }) => {
-  const [isResponsive, setIsResponsive] = useState6(false);
-  const [isMenuVisible, setIsMenuVisible] = useState6(false);
+  const [isResponsive, setIsResponsive] = useState7(false);
+  const [isMenuVisible, setIsMenuVisible] = useState7(false);
   const colorsTheme = useContext8(HalstackContext);
   const translatedLabels = useContext8(HalstackLanguageContext);
   const ref = useRef3(null);
@@ -4210,7 +4219,7 @@ var DxcHeader = ({
     () => getLogoElement(colorsTheme.header.logoResponsive, translatedLabels.formFields.logoAlternativeText),
     [colorsTheme, translatedLabels]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
     };
@@ -4220,7 +4229,7 @@ var DxcHeader = ({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isResponsive) {
       setIsMenuVisible(false);
     }
@@ -4417,7 +4426,7 @@ var Overlay2 = styled16.div`
 var Header_default = DxcHeader;
 
 // src/sidenav/Sidenav.tsx
-import { forwardRef as forwardRef3, useContext as useContext10, useEffect as useEffect4, useState as useState7 } from "react";
+import { forwardRef as forwardRef4, useContext as useContext10, useEffect as useEffect5, useState as useState8 } from "react";
 import styled18, { ThemeProvider as ThemeProvider8 } from "styled-components";
 
 // src/bleed/Bleed.tsx
@@ -4472,8 +4481,8 @@ var Section = ({ children }) => /* @__PURE__ */ jsxs12(Fragment6, { children: [
   /* @__PURE__ */ jsx21(Divider, {})
 ] });
 var Group = ({ title, collapsable = false, icon, children }) => {
-  const [collapsed, setCollapsed] = useState7(false);
-  const [isSelected, changeIsSelected] = useState7(false);
+  const [collapsed, setCollapsed] = useState8(false);
+  const [isSelected, changeIsSelected] = useState8(false);
   return /* @__PURE__ */ jsx21(GroupContextProvider, { value: changeIsSelected, children: /* @__PURE__ */ jsxs12(SidenavGroup, { children: [
     collapsable && title ? /* @__PURE__ */ jsxs12(
       SidenavGroupTitleButton,
@@ -4496,7 +4505,7 @@ var Group = ({ title, collapsable = false, icon, children }) => {
     !collapsed && children
   ] }) });
 };
-var Link = forwardRef3(
+var Link = forwardRef4(
   ({ href, newWindow = false, selected = false, icon, onClick, tabIndex = 0, children, ...otherProps }, ref) => {
     const changeIsGroupSelected = useContext10(GroupContext);
     const setIsSidenavVisibleResponsive = useResponsiveSidenavVisibility();
@@ -4504,7 +4513,7 @@ var Link = forwardRef3(
       onClick?.($event);
       setIsSidenavVisibleResponsive?.(false);
     };
-    useEffect4(() => {
+    useEffect5(() => {
       changeIsGroupSelected?.((isGroupSelected2) => !isGroupSelected2 ? selected : isGroupSelected2);
     }, [selected, changeIsGroupSelected]);
     return /* @__PURE__ */ jsxs12(
@@ -4678,7 +4687,7 @@ DxcSidenav.Title = Title2;
 var Sidenav_default = DxcSidenav;
 
 // src/layout/utils.tsx
-import { Children as Children2, isValidElement, useState as useState8, useEffect as useEffect5 } from "react";
+import { Children as Children2, isValidElement, useState as useState9, useEffect as useEffect6 } from "react";
 
 // src/layout/Icons.tsx
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -4767,8 +4776,8 @@ var socialLinks = [
 ];
 var findChildType = (children, childType) => Children2.toArray(children).find((child) => isValidElement(child) && child.type === childType);
 var useResponsive = (breakpoint) => {
-  const [isResponsive, setIsResponsive] = useState8(false);
-  useEffect5(() => {
+  const [isResponsive, setIsResponsive] = useState9(false);
+  useEffect6(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${breakpoint}rem)`).matches);
     };
@@ -4880,14 +4889,14 @@ var DxcApplicationLayout = ({
   footer,
   children
 }) => {
-  const [isSidenavVisibleResponsive, setIsSidenavVisibleResponsive] = useState9(false);
+  const [isSidenavVisibleResponsive, setIsSidenavVisibleResponsive] = useState10(false);
   const isResponsive = useResponsive(responsiveSizes.large);
   const ref = useRef4(null);
   const translatedLabels = useContext11(HalstackLanguageContext);
   const handleSidenavVisibility = () => {
     setIsSidenavVisibleResponsive((currentIsSidenavVisibleResponsive) => !currentIsSidenavVisibleResponsive);
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isResponsive) {
       setIsSidenavVisibleResponsive(false);
     }
@@ -5129,10 +5138,9 @@ var Item = ({ isCurrentPage = false, href, label, onClick }) => {
     }
   };
   const handleOnClick = (event) => {
+    if (typeof onClick !== "function") return;
     event.preventDefault();
-    if (href) {
-      onClick?.(href);
-    }
+    if (href) onClick(href);
   };
   return /* @__PURE__ */ jsx25(ListItem, { "aria-current": isCurrentPage ? "page" : void 0, isCurrentPage, children: isCurrentPage ? /* @__PURE__ */ jsx25(CurrentPage, { ref: currentItemRef, onMouseEnter: handleOnMouseEnter, children: label }) : /* @__PURE__ */ jsx25(Link2, { href, onClick: handleOnClick, children: /* @__PURE__ */ jsx25(Text, { children: label }) }) });
 };
@@ -5380,7 +5388,7 @@ var ListItem2 = styled24.li`
 var BulletedList_default = DxcBulletedList;
 
 // src/card/Card.tsx
-import { useContext as useContext14, useState as useState10 } from "react";
+import { useContext as useContext14, useState as useState11 } from "react";
 import styled25, { ThemeProvider as ThemeProvider10 } from "styled-components";
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var DxcCard = ({
@@ -5397,7 +5405,7 @@ var DxcCard = ({
   children
 }) => {
   const colorsTheme = useContext14(HalstackContext);
-  const [isHovered, changeIsHovered] = useState10(false);
+  const [isHovered, changeIsHovered] = useState11(false);
   return /* @__PURE__ */ jsx29(ThemeProvider10, { theme: colorsTheme.card, children: /* @__PURE__ */ jsx29(
     Card,
     {
@@ -5463,11 +5471,11 @@ var CardContent = styled25.div`
 var Card_default = DxcCard;
 
 // src/checkbox/Checkbox.tsx
-import { useContext as useContext15, useState as useState11, useRef as useRef6, useId as useId4, forwardRef as forwardRef4 } from "react";
+import { useContext as useContext15, useState as useState12, useRef as useRef6, useId as useId5, forwardRef as forwardRef5 } from "react";
 import styled26, { ThemeProvider as ThemeProvider11 } from "styled-components";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var checkedIcon = /* @__PURE__ */ jsx30("svg", { fill: "currentColor", focusable: "false", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx30("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) });
-var DxcCheckbox = forwardRef4(
+var DxcCheckbox = forwardRef5(
   ({
     checked,
     defaultChecked = false,
@@ -5484,8 +5492,8 @@ var DxcCheckbox = forwardRef4(
     tabIndex = 0,
     ariaLabel = "Checkbox"
   }, ref) => {
-    const labelId = `label-checkbox-${useId4()}`;
-    const [innerChecked, setInnerChecked] = useState11(defaultChecked);
+    const labelId = `label-checkbox-${useId5()}`;
+    const [innerChecked, setInnerChecked] = useState12(defaultChecked);
     const checkboxRef = useRef6(null);
     const colorsTheme = useContext15(HalstackContext);
     const translatedLabels = useContext15(HalstackLanguageContext);
@@ -5790,21 +5798,21 @@ var IconContainer5 = styled27.div`
 var Chip_default = DxcChip;
 
 // src/contextual-menu/ContextualMenu.tsx
-import { useContext as useContext19, useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef7, useState as useState14 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef7, useState as useState15 } from "react";
 import styled31, { ThemeProvider as ThemeProvider13 } from "styled-components";
 
 // src/contextual-menu/MenuItem.tsx
 import styled29 from "styled-components";
 
 // src/contextual-menu/GroupItem.tsx
-import { useContext as useContext17, useMemo as useMemo7, useState as useState13, memo as memo4, useId as useId5 } from "react";
+import { useContext as useContext17, useMemo as useMemo7, useState as useState14, memo as memo4, useId as useId6 } from "react";
 
 // src/contextual-menu/ItemAction.tsx
-import { cloneElement as cloneElement2, useState as useState12 } from "react";
+import { cloneElement as cloneElement2, useState as useState13 } from "react";
 import styled28 from "styled-components";
 import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 var ItemAction = ({ badge, collapseIcon, icon, label, depthLevel, ...props }) => {
-  const [hasTooltip, setHasTooltip] = useState12(false);
+  const [hasTooltip, setHasTooltip] = useState13(false);
   const modifiedBadge = badge && cloneElement2(badge, { size: "small" });
   return /* @__PURE__ */ jsx32(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ jsxs21(Action, { depthLevel, ...props, children: [
     /* @__PURE__ */ jsxs21(Label2, { children: [
@@ -5892,10 +5900,10 @@ var isGroupSelected = (items, selectedItemId) => items.some((item) => {
   else return item.selectedByDefault;
 });
 var GroupItem = ({ items, ...props }) => {
-  const groupMenuId = `group-menu-${useId5()}`;
+  const groupMenuId = `group-menu-${useId6()}`;
   const { selectedItemId } = useContext17(ContextualMenuContext_default) ?? {};
   const groupSelected = useMemo7(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
-  const [isOpen, setIsOpen] = useState13(groupSelected && selectedItemId === -1);
+  const [isOpen, setIsOpen] = useState14(groupSelected && selectedItemId === -1);
   return /* @__PURE__ */ jsxs22(Fragment10, { children: [
     /* @__PURE__ */ jsx33(
       ItemAction_default,
@@ -5917,7 +5925,7 @@ var GroupItem = ({ items, ...props }) => {
 var GroupItem_default = memo4(GroupItem);
 
 // src/contextual-menu/SingleItem.tsx
-import { useContext as useContext18, useEffect as useEffect7 } from "react";
+import { useContext as useContext18, useEffect as useEffect8 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var SingleItem = ({ id, onSelect, selectedByDefault = false, ...props }) => {
   const { selectedItemId, setSelectedItemId } = useContext18(ContextualMenuContext_default) ?? {};
@@ -5925,7 +5933,7 @@ var SingleItem = ({ id, onSelect, selectedByDefault = false, ...props }) => {
     setSelectedItemId?.(id);
     onSelect?.();
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (selectedItemId === -1 && selectedByDefault) {
       setSelectedItemId?.(id);
     }
@@ -5953,10 +5961,10 @@ var MenuItem_default = MenuItem;
 
 // src/contextual-menu/Section.tsx
 import styled30 from "styled-components";
-import { useId as useId6 } from "react";
+import { useId as useId7 } from "react";
 import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var Section2 = ({ section, index, length }) => {
-  const id = `section-${useId6()}`;
+  const id = `section-${useId7()}`;
   return /* @__PURE__ */ jsxs23("section", { "aria-label": section.title ?? id, "aria-labelledby": id, children: [
     section.title && /* @__PURE__ */ jsx36(Title3, { id, children: section.title }),
     /* @__PURE__ */ jsx36(SubMenu, { children: section.items.map((item, index2) => /* @__PURE__ */ jsx36(MenuItem_default, { item }, `${item.label}-${index2}`)) }),
@@ -6023,12 +6031,12 @@ var addIdToItems = (items) => {
 };
 var SubMenu = ({ children, id }) => /* @__PURE__ */ jsx37(StyledSubMenu, { id, role: "menu", children });
 function DxcContextualMenu({ items }) {
-  const [selectedItemId, setSelectedItemId] = useState14(-1);
+  const [selectedItemId, setSelectedItemId] = useState15(-1);
   const contextualMenuRef = useRef7(null);
   const itemsWithId = useMemo8(() => addIdToItems(items), [items]);
   const contextValue = useMemo8(() => ({ selectedItemId, setSelectedItemId }), [selectedItemId, setSelectedItemId]);
   const colorsTheme = useContext19(HalstackContext);
-  const [firstUpdate, setFirstUpdate] = useState14(true);
+  const [firstUpdate, setFirstUpdate] = useState15(true);
   useLayoutEffect3(() => {
     if (selectedItemId !== -1 && firstUpdate) {
       const contextualMenuEl = contextualMenuRef.current;
@@ -6043,17 +6051,17 @@ function DxcContextualMenu({ items }) {
 }
 
 // src/data-grid/DataGrid.tsx
-import { useContext as useContext25, useEffect as useEffect8, useMemo as useMemo11, useState as useState18 } from "react";
+import { useContext as useContext25, useEffect as useEffect9, useMemo as useMemo11, useState as useState19 } from "react";
 import DataGrid from "react-data-grid";
 import styled38, { ThemeProvider as ThemeProvider18 } from "styled-components";
 import "react-data-grid/lib/styles.css";
 
 // src/data-grid/utils.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { textEditor } from "react-data-grid";
 
 // src/spinner/Spinner.tsx
-import { useContext as useContext20, useId as useId7, useMemo as useMemo9 } from "react";
+import { useContext as useContext20, useId as useId8, useMemo as useMemo9 } from "react";
 import styled32, { ThemeProvider as ThemeProvider14 } from "styled-components";
 import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 var DxcSpinner = ({
@@ -6064,7 +6072,7 @@ var DxcSpinner = ({
   margin,
   ariaLabel = "Spinner"
 }) => {
-  const labelId = useId7();
+  const labelId = useId8();
   const colorsTheme = useContext20(HalstackContext);
   const determinated = useMemo9(() => value != null && value >= 0 && value <= 100, [value]);
   return /* @__PURE__ */ jsx38(ThemeProvider14, { theme: colorsTheme.spinner, children: /* @__PURE__ */ jsx38(DXCSpinner, { margin, mode, children: /* @__PURE__ */ jsxs24(SpinnerContainer, { mode, children: [
@@ -6324,7 +6332,7 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
   }
 );
 var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender, childrenTrigger) => {
-  const [loading, setLoading] = useState15(false);
+  const [loading, setLoading] = useState16(false);
   const onClick = async () => {
     if (loading) return;
     if (!triggerRow.visibleChildren) {
@@ -6609,13 +6617,13 @@ import styled36, { ThemeProvider as ThemeProvider16 } from "styled-components";
 // src/select/Select.tsx
 import * as Popover2 from "@radix-ui/react-popover";
 import {
-  forwardRef as forwardRef5,
+  forwardRef as forwardRef6,
   useCallback as useCallback6,
   useContext as useContext22,
-  useId as useId8,
+  useId as useId9,
   useMemo as useMemo10,
   useRef as useRef9,
-  useState as useState17
+  useState as useState18
 } from "react";
 import styled35, { ThemeProvider as ThemeProvider15 } from "styled-components";
 
@@ -6625,7 +6633,7 @@ import styled34 from "styled-components";
 
 // src/select/ListOption.tsx
 import styled33 from "styled-components";
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var ListOption = ({
   id,
@@ -6637,7 +6645,7 @@ var ListOption = ({
   isLastOption,
   isSelected
 }) => {
-  const [hasTooltip, setHasTooltip] = useState16(false);
+  const [hasTooltip, setHasTooltip] = useState17(false);
   const handleOnMouseEnter = (event) => {
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
@@ -6735,22 +6743,21 @@ var isOptionGroup = (option) => "options" in option && option.options != null;
 var isArrayOfOptionGroups = (options) => options[0] != null && isOptionGroup(options[0]);
 var groupsHaveOptions = (options) => isArrayOfOptionGroups(options) ? options.some((groupOption) => groupOption.options.length > 0) : true;
 var canOpenListbox = (options, disabled) => !disabled && options.length > 0 && groupsHaveOptions(options);
-var filterOptionsBySearchValue = (options, searchValue) => {
-  if (options.length > 0) {
-    if (isArrayOfOptionGroups(options))
-      return options.map((optionGroup) => {
-        const group = {
-          label: optionGroup.label,
-          options: optionGroup.options.filter(
-            (option) => option.label.toUpperCase().includes(searchValue.toUpperCase())
-          )
-        };
-        return group;
-      });
-    else return options.filter((option) => option.label.toUpperCase().includes(searchValue.toUpperCase()));
-  } else {
-    return [];
-  }
+var filterOptionsBySearchValue = (options, searchValue, searchByStartsWith = false) => {
+  const matchesSearch = (label, search, searchByStartsWith2) => {
+    const upperLabel = label.toUpperCase();
+    const upperSearch = search.toUpperCase();
+    return searchByStartsWith2 ? upperLabel.startsWith(upperSearch) : upperLabel.includes(upperSearch);
+  };
+  return options.length > 0 ? isArrayOfOptionGroups(options) ? options.map((optionGroup) => {
+    const group = {
+      label: optionGroup.label,
+      options: optionGroup.options.filter(
+        (option) => matchesSearch(option.label, searchValue, searchByStartsWith)
+      )
+    };
+    return group;
+  }) : options.filter((option) => matchesSearch(option.label, searchValue, searchByStartsWith)) : [];
 };
 var getLastOptionIndex = (options, filteredOptions, searchable, optional, multiple) => {
   let last = 0;
@@ -6975,7 +6982,7 @@ var Listbox_default = Listbox;
 
 // src/select/Select.tsx
 import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
-var DxcSelect = forwardRef5(
+var DxcSelect = forwardRef6(
   ({
     label,
     name = "",
@@ -6988,6 +6995,7 @@ var DxcSelect = forwardRef5(
     multiple = false,
     optional = false,
     searchable = false,
+    searchByStartsWith = false,
     onChange,
     onBlur,
     error,
@@ -6996,22 +7004,22 @@ var DxcSelect = forwardRef5(
     tabIndex = 0,
     ariaLabel = "Select"
   }, ref) => {
-    const selectId = `select-${useId8()}`;
+    const selectId = `select-${useId9()}`;
     const selectLabelId = `label-${selectId}`;
     const errorId = `error-${selectId}`;
     const listboxId = `${selectId}-listbox`;
-    const [innerValue, setInnerValue] = useState17(defaultValue ?? (multiple ? [] : ""));
-    const [searchValue, setSearchValue] = useState17("");
-    const [visualFocusIndex, changeVisualFocusIndex] = useState17(-1);
-    const [isOpen, changeIsOpen] = useState17(false);
-    const [hasTooltip, setHasTooltip] = useState17(false);
+    const [innerValue, setInnerValue] = useState18(defaultValue ?? (multiple ? [] : ""));
+    const [searchValue, setSearchValue] = useState18("");
+    const [visualFocusIndex, changeVisualFocusIndex] = useState18(-1);
+    const [isOpen, changeIsOpen] = useState18(false);
+    const [hasTooltip, setHasTooltip] = useState18(false);
     const selectRef = useRef9(null);
     const selectSearchInputRef = useRef9(null);
     const width = useWidth_default(selectRef.current);
     const colorsTheme = useContext22(HalstackContext);
     const translatedLabels = useContext22(HalstackLanguageContext);
     const optionalItem = { label: placeholder, value: "" };
-    const filteredOptions = useMemo10(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
+    const filteredOptions = useMemo10(() => filterOptionsBySearchValue(options, searchValue, searchByStartsWith), [options, searchValue, searchByStartsWith]);
     const lastOptionIndex = useMemo10(
       () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple),
       [options, filteredOptions, searchable, optional, multiple]
@@ -7202,148 +7210,151 @@ var DxcSelect = forwardRef5(
       const text = event.currentTarget;
       setHasTooltip(text.scrollWidth > text.clientWidth);
     };
-    return /* @__PURE__ */ jsx42(ThemeProvider15, { theme: colorsTheme.select, children: /* @__PURE__ */ jsxs28(SelectContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs28(
-        Label3,
-        {
-          id: selectLabelId,
-          disabled,
-          onClick: () => {
-            selectRef?.current?.focus();
-          },
-          helperText,
-          children: [
-            label,
-            " ",
-            optional && /* @__PURE__ */ jsx42(OptionalLabel, { children: translatedLabels.formFields.optionalLabel })
-          ]
-        }
-      ),
-      helperText && /* @__PURE__ */ jsx42(HelperText, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs28(Popover2.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx42(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs28(
-          Select,
+    return /* @__PURE__ */ jsxs28(ThemeProvider15, { theme: colorsTheme.select, children: [
+      /* @__PURE__ */ jsxs28(SelectContainer, { margin, size, ref, children: [
+        label && /* @__PURE__ */ jsxs28(
+          Label3,
           {
-            id: selectId,
+            id: selectLabelId,
             disabled,
-            error,
-            onBlur: handleSelectOnBlur,
-            onClick: handleSelectOnClick,
-            onFocus: handleSelectOnFocus,
-            onKeyDown: handleSelectOnKeyDown,
-            ref: selectRef,
-            tabIndex: disabled ? -1 : tabIndex,
-            role: "combobox",
-            "aria-controls": isOpen ? listboxId : void 0,
-            "aria-disabled": disabled,
-            "aria-expanded": isOpen,
-            "aria-haspopup": "listbox",
-            "aria-labelledby": label ? selectLabelId : void 0,
-            "aria-activedescendant": visualFocusIndex >= 0 ? `option-${visualFocusIndex}` : void 0,
-            "aria-invalid": !!error,
-            "aria-errormessage": error ? errorId : void 0,
-            "aria-required": !disabled && !optional,
-            "aria-label": label ? void 0 : ariaLabel,
+            onClick: () => {
+              selectRef?.current?.focus();
+            },
+            helperText,
             children: [
-              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ jsxs28(SelectionIndicator, { children: [
-                /* @__PURE__ */ jsx42(SelectionNumber, { disabled, children: selectedOption.length }),
-                /* @__PURE__ */ jsx42(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx42(
-                  ClearOptionsAction,
+              label,
+              " ",
+              optional && /* @__PURE__ */ jsx42(OptionalLabel, { children: translatedLabels.formFields.optionalLabel })
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ jsx42(HelperText, { disabled, children: helperText }),
+        /* @__PURE__ */ jsxs28(Popover2.Root, { open: isOpen, children: [
+          /* @__PURE__ */ jsx42(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs28(
+            Select,
+            {
+              id: selectId,
+              disabled,
+              error,
+              onBlur: handleSelectOnBlur,
+              onClick: handleSelectOnClick,
+              onFocus: handleSelectOnFocus,
+              onKeyDown: handleSelectOnKeyDown,
+              ref: selectRef,
+              tabIndex: disabled ? -1 : tabIndex,
+              role: "combobox",
+              "aria-controls": isOpen ? listboxId : void 0,
+              "aria-disabled": disabled,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-labelledby": label ? selectLabelId : void 0,
+              "aria-activedescendant": visualFocusIndex >= 0 ? `option-${visualFocusIndex}` : void 0,
+              "aria-invalid": !!error,
+              "aria-errormessage": error ? errorId : void 0,
+              "aria-required": !disabled && !optional,
+              "aria-label": label ? void 0 : ariaLabel,
+              children: [
+                multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ jsxs28(SelectionIndicator, { children: [
+                  /* @__PURE__ */ jsx42(SelectionNumber, { disabled, children: selectedOption.length }),
+                  /* @__PURE__ */ jsx42(TooltipWrapper, { condition: !disabled, label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx42(
+                    ClearOptionsAction,
+                    {
+                      disabled,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                      },
+                      onClick: handleClearOptionsActionOnClick,
+                      tabIndex: -1,
+                      "aria-label": translatedLabels.select.actionClearSelectionTitle,
+                      children: /* @__PURE__ */ jsx42(Icon_default, { icon: "clear" })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx42(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ jsxs28(SearchableValueContainer, { children: [
+                  /* @__PURE__ */ jsx42(
+                    "input",
+                    {
+                      style: { display: "none" },
+                      name,
+                      disabled,
+                      value: multiple ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") : value ?? innerValue,
+                      readOnly: true,
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  searchable && /* @__PURE__ */ jsx42(
+                    SearchInput,
+                    {
+                      value: searchValue,
+                      disabled,
+                      onChange: handleSearchIOnChange,
+                      ref: selectSearchInputRef,
+                      autoComplete: "nope",
+                      autoCorrect: "nope",
+                      size: 1,
+                      "aria-labelledby": label ? selectLabelId : void 0
+                    }
+                  ),
+                  (!searchable || searchValue === "") && /* @__PURE__ */ jsx42(
+                    SelectedOption,
+                    {
+                      disabled,
+                      atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
+                      children: /* @__PURE__ */ jsx42(SelectedOptionLabel, { onMouseEnter: handleOnMouseEnter, children: getSelectedOptionLabel(placeholder, selectedOption) })
+                    }
+                  )
+                ] }) }),
+                !disabled && error && /* @__PURE__ */ jsx42(ErrorIcon, { children: /* @__PURE__ */ jsx42(Icon_default, { icon: "filled_error" }) }),
+                searchable && searchValue.length > 0 && /* @__PURE__ */ jsx42(TooltipWrapper, { condition: !disabled, label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx42(
+                  ClearSearchAction,
                   {
-                    disabled,
                     onMouseDown: (event) => {
                       event.preventDefault();
                     },
-                    onClick: handleClearOptionsActionOnClick,
+                    onClick: handleClearSearchActionOnClick,
                     tabIndex: -1,
-                    "aria-label": translatedLabels.select.actionClearSelectionTitle,
+                    "aria-label": translatedLabels.select.actionClearSearchTitle,
                     children: /* @__PURE__ */ jsx42(Icon_default, { icon: "clear" })
                   }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx42(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ jsxs28(SearchableValueContainer, { children: [
-                /* @__PURE__ */ jsx42(
-                  "input",
-                  {
-                    style: { display: "none" },
-                    name,
-                    disabled,
-                    value: multiple ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") : value ?? innerValue,
-                    readOnly: true,
-                    "aria-hidden": "true"
-                  }
-                ),
-                searchable && /* @__PURE__ */ jsx42(
-                  SearchInput,
-                  {
-                    value: searchValue,
-                    disabled,
-                    onChange: handleSearchIOnChange,
-                    ref: selectSearchInputRef,
-                    autoComplete: "nope",
-                    autoCorrect: "nope",
-                    size: 1,
-                    "aria-labelledby": label ? selectLabelId : void 0
-                  }
-                ),
-                (!searchable || searchValue === "") && /* @__PURE__ */ jsx42(
-                  SelectedOption,
-                  {
-                    disabled,
-                    atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
-                    children: /* @__PURE__ */ jsx42(SelectedOptionLabel, { onMouseEnter: handleOnMouseEnter, children: getSelectedOptionLabel(placeholder, selectedOption) })
-                  }
-                )
-              ] }) }),
-              !disabled && error && /* @__PURE__ */ jsx42(ErrorIcon, { children: /* @__PURE__ */ jsx42(Icon_default, { icon: "filled_error" }) }),
-              searchable && searchValue.length > 0 && /* @__PURE__ */ jsx42(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx42(
-                ClearSearchAction,
+                ) }),
+                /* @__PURE__ */ jsx42(CollapseIndicator2, { disabled, children: /* @__PURE__ */ jsx42(Icon_default, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx42(Popover2.Portal, { container: document.getElementById(`${selectId}-portal`), children: /* @__PURE__ */ jsx42(
+            Popover2.Content,
+            {
+              sideOffset: 4,
+              style: { zIndex: "310" },
+              onOpenAutoFocus: (event) => {
+                event.preventDefault();
+              },
+              onCloseAutoFocus: (event) => {
+                event.preventDefault();
+              },
+              children: /* @__PURE__ */ jsx42(
+                Listbox_default,
                 {
-                  onMouseDown: (event) => {
-                    event.preventDefault();
-                  },
-                  onClick: handleClearSearchActionOnClick,
-                  tabIndex: -1,
-                  "aria-label": translatedLabels.select.actionClearSearchTitle,
-                  children: /* @__PURE__ */ jsx42(Icon_default, { icon: "clear" })
+                  id: listboxId,
+                  currentValue: value ?? innerValue,
+                  options: searchable ? filteredOptions : options,
+                  visualFocusIndex,
+                  lastOptionIndex,
+                  multiple,
+                  optional,
+                  optionalItem,
+                  searchable,
+                  handleOptionOnClick,
+                  styles: { width }
                 }
-              ) }),
-              /* @__PURE__ */ jsx42(CollapseIndicator2, { disabled, children: /* @__PURE__ */ jsx42(Icon_default, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" }) })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx42(Popover2.Portal, { children: /* @__PURE__ */ jsx42(
-          Popover2.Content,
-          {
-            sideOffset: 4,
-            style: { zIndex: "310" },
-            onOpenAutoFocus: (event) => {
-              event.preventDefault();
-            },
-            onCloseAutoFocus: (event) => {
-              event.preventDefault();
-            },
-            children: /* @__PURE__ */ jsx42(
-              Listbox_default,
-              {
-                id: listboxId,
-                currentValue: value ?? innerValue,
-                options: searchable ? filteredOptions : options,
-                visualFocusIndex,
-                lastOptionIndex,
-                multiple,
-                optional,
-                optionalItem,
-                searchable,
-                handleOptionOnClick,
-                styles: { width }
-              }
-            )
-          }
-        ) })
+              )
+            }
+          ) })
+        ] }),
+        !disabled && typeof error === "string" && /* @__PURE__ */ jsx42(Error2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
       ] }),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx42(Error2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
-    ] }) });
+      /* @__PURE__ */ jsx42("div", { id: `${selectId}-portal`, style: { position: "absolute" } })
+    ] });
   }
 );
 var sizes3 = {
@@ -8054,9 +8065,9 @@ var DxcDataGrid = ({
   totalItems,
   defaultPage = 1
 }) => {
-  const [rowsToRender, setRowsToRender] = useState18([...rows]);
+  const [rowsToRender, setRowsToRender] = useState19([...rows]);
   const colorsTheme = useContext25(HalstackContext);
-  const [page, changePage] = useState18(defaultPage);
+  const [page, changePage] = useState19(defaultPage);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -8139,12 +8150,12 @@ var DxcDataGrid = ({
     }
     return expectedColumns;
   }, [selectable, expandable, columns, rowsToRender, onSelectRows, rows, summaryRow, uniqueRowId, selectedRows]);
-  const [columnsOrder, setColumnsOrder] = useState18(() => columnsToRender.map((_, index) => index));
-  const [sortColumns, setSortColumns] = useState18([]);
-  useEffect8(() => {
+  const [columnsOrder, setColumnsOrder] = useState19(() => columnsToRender.map((_, index) => index));
+  const [sortColumns, setSortColumns] = useState19([]);
+  useEffect9(() => {
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
-  useEffect8(() => {
+  useEffect9(() => {
     const finalRows = [...rows];
     if (expandable) {
       finalRows.filter((row) => {
@@ -8267,13 +8278,13 @@ var DataGrid_default = DxcDataGrid;
 
 // src/date-input/DateInput.tsx
 import {
-  useState as useState23,
+  useState as useState24,
   useRef as useRef12,
-  useEffect as useEffect13,
-  useId as useId12,
+  useEffect as useEffect14,
+  useId as useId13,
   useCallback as useCallback7,
   useContext as useContext30,
-  forwardRef as forwardRef7
+  forwardRef as forwardRef8
 } from "react";
 import dayjs3 from "dayjs";
 import styled45, { ThemeProvider as ThemeProvider20 } from "styled-components";
@@ -8281,12 +8292,12 @@ import * as Popover4 from "@radix-ui/react-popover";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // src/date-input/DatePicker.tsx
-import { memo as memo7, useContext as useContext27, useState as useState21 } from "react";
+import { memo as memo7, useContext as useContext27, useState as useState22 } from "react";
 import dayjs2 from "dayjs";
 import styled41 from "styled-components";
 
 // src/date-input/Calendar.tsx
-import { useContext as useContext26, useState as useState19, useMemo as useMemo12, useEffect as useEffect9, useId as useId9, memo as memo5 } from "react";
+import { useContext as useContext26, useState as useState20, useMemo as useMemo12, useEffect as useEffect10, useId as useId10, memo as memo5 } from "react";
 import styled39 from "styled-components";
 import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 var getDays = (innerDate) => {
@@ -8330,9 +8341,9 @@ var Calendar = ({
   onDaySelect,
   today: today2
 }) => {
-  const [dateToFocus, setDateToFocus] = useState19(getDateToFocus(selectedDate, innerDate, today2));
-  const [isFocusable, setIsFocusable] = useState19(false);
-  const id = useId9();
+  const [dateToFocus, setDateToFocus] = useState20(getDateToFocus(selectedDate, innerDate, today2));
+  const [isFocusable, setIsFocusable] = useState20(false);
+  const id = useId10();
   const translatedLabels = useContext26(HalstackLanguageContext);
   const dayCells = useMemo12(() => getDays(innerDate), [innerDate]);
   const onDateClickHandler = (date) => {
@@ -8352,13 +8363,13 @@ var Calendar = ({
     setDateToFocus(date);
     setIsFocusable(true);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (isFocusable) {
       document.getElementById(`${id}_day_${dateToFocus.get("date")}_month${dateToFocus.get("month")}`)?.focus();
       setIsFocusable(false);
     }
   }, [dateToFocus, isFocusable]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
       setDateToFocus(getDateToFocus(selectedDate, innerDate, today2));
     }
@@ -8523,7 +8534,7 @@ var Calendar_default = memo5(Calendar);
 
 // src/date-input/YearPicker.tsx
 import dayjs from "dayjs";
-import { useEffect as useEffect10, useId as useId10, useState as useState20, memo as memo6 } from "react";
+import { useEffect as useEffect11, useId as useId11, useState as useState21, memo as memo6 } from "react";
 import styled40 from "styled-components";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var getYearsArray = () => {
@@ -8535,9 +8546,9 @@ var getYearsArray = () => {
 };
 var yearList = getYearsArray();
 var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
-  const id = useId10();
-  const [yearToFocus, setYearToFocus] = useState20(selectedDate ? selectedDate.get("year") : dayjs().get("year"));
-  useEffect10(() => {
+  const id = useId11();
+  const [yearToFocus, setYearToFocus] = useState21(selectedDate ? selectedDate.get("year") : dayjs().get("year"));
+  useEffect11(() => {
     const yearToFocusEl = document.getElementById(`${id}_year_${yearToFocus}`);
     yearToFocusEl?.scrollIntoView?.({ block: "nearest", inline: "start" });
     yearToFocusEl?.focus();
@@ -8630,8 +8641,8 @@ var YearPicker_default = memo6(YearPicker);
 import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var today = dayjs2();
 var DatePicker = ({ date, onDateSelect, id }) => {
-  const [innerDate, setInnerDate] = useState21(date?.isValid() ? date : dayjs2());
-  const [content, setContent] = useState21("calendar");
+  const [innerDate, setInnerDate] = useState22(date?.isValid() ? date : dayjs2());
+  const [content, setContent] = useState22("calendar");
   const selectedDate = date?.isValid() ? date : dayjs2(null);
   const translatedLabels = useContext27(HalstackLanguageContext);
   const handleDateSelect = (chosenDate) => {
@@ -8764,12 +8775,12 @@ var DatePicker_default = memo7(DatePicker);
 // src/text-input/TextInput.tsx
 import * as Popover3 from "@radix-ui/react-popover";
 import {
-  forwardRef as forwardRef6,
+  forwardRef as forwardRef7,
   useContext as useContext29,
-  useEffect as useEffect12,
-  useId as useId11,
+  useEffect as useEffect13,
+  useId as useId12,
   useRef as useRef11,
-  useState as useState22
+  useState as useState23
 } from "react";
 import styled44, { ThemeProvider as ThemeProvider19 } from "styled-components";
 
@@ -8778,7 +8789,7 @@ import { createContext as createContext7 } from "react";
 var NumberInputContext_default = createContext7(null);
 
 // src/text-input/Suggestions.tsx
-import { memo as memo9, useContext as useContext28, useEffect as useEffect11, useRef as useRef10 } from "react";
+import { memo as memo9, useContext as useContext28, useEffect as useEffect12, useRef as useRef10 } from "react";
 import styled43 from "styled-components";
 
 // src/text-input/Suggestion.tsx
@@ -8939,7 +8950,7 @@ var Suggestions = ({
 }) => {
   const translatedLabels = useContext28(HalstackLanguageContext);
   const listboxRef = useRef10(null);
-  useEffect11(() => {
+  useEffect12(() => {
     const visualFocusedOptionEl = listboxRef?.current?.querySelectorAll("[role='option']")[visualFocusIndex];
     visualFocusedOptionEl?.scrollIntoView?.({
       block: "nearest",
@@ -9109,7 +9120,7 @@ var ErrorMessageContainer = styled44.span`
   margin-top: 0.25rem;
 `;
 var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx51(Fragment12, { children: condition ? wrapper(children) : children });
-var DxcTextInput = forwardRef6(
+var DxcTextInput = forwardRef7(
   ({
     alignment = "left",
     label,
@@ -9138,7 +9149,7 @@ var DxcTextInput = forwardRef6(
     tabIndex = 0,
     ariaLabel = "Text input"
   }, ref) => {
-    const inputId = `input-${useId11()}`;
+    const inputId = `input-${useId12()}`;
     const autosuggestId = `suggestions-${inputId}`;
     const errorId = `error-${inputId}`;
     const colorsTheme = useContext29(HalstackContext);
@@ -9147,12 +9158,12 @@ var DxcTextInput = forwardRef6(
     const inputRef = useRef11(null);
     const inputContainerRef = useRef11(null);
     const actionRef = useRef11(null);
-    const [innerValue, setInnerValue] = useState22(defaultValue);
-    const [isOpen, changeIsOpen] = useState22(false);
-    const [isSearching, changeIsSearching] = useState22(false);
-    const [isAutosuggestError, changeIsAutosuggestError] = useState22(false);
-    const [filteredSuggestions, changeFilteredSuggestions] = useState22([]);
-    const [visualFocusIndex, changeVisualFocusIndex] = useState22(-1);
+    const [innerValue, setInnerValue] = useState23(defaultValue);
+    const [isOpen, changeIsOpen] = useState23(false);
+    const [isSearching, changeIsSearching] = useState23(false);
+    const [isAutosuggestError, changeIsAutosuggestError] = useState23(false);
+    const [filteredSuggestions, changeFilteredSuggestions] = useState23([]);
+    const [visualFocusIndex, changeVisualFocusIndex] = useState23(-1);
     const width = useWidth_default(inputContainerRef.current);
     const getNumberErrorMessage = (checkedValue) => numberInputContext?.minNumber != null && checkedValue < numberInputContext?.minNumber ? translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage?.(numberInputContext.minNumber) : numberInputContext?.maxNumber != null && checkedValue > numberInputContext?.maxNumber ? translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage?.(numberInputContext.maxNumber) : void 0;
     const openSuggestions = () => {
@@ -9362,7 +9373,7 @@ var DxcTextInput = forwardRef6(
         inputRef.current?.setAttribute("type", type);
       }
     };
-    useEffect12(() => {
+    useEffect13(() => {
       if (typeof suggestions === "function") {
         changeIsSearching(true);
         changeIsAutosuggestError(false);
@@ -9398,163 +9409,166 @@ var DxcTextInput = forwardRef6(
       }
       return void 0;
     }, [value, innerValue, suggestions, numberInputContext]);
-    return /* @__PURE__ */ jsx51(ThemeProvider19, { theme: colorsTheme.textInput, children: /* @__PURE__ */ jsxs36(TextInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs36(Label4, { htmlFor: inputId, disabled, hasHelperText: !!helperText, children: [
-        label,
-        " ",
-        optional && /* @__PURE__ */ jsx51(OptionalLabel2, { children: translatedLabels.formFields.optionalLabel })
-      ] }),
-      helperText && /* @__PURE__ */ jsx51(HelperText2, { disabled, children: helperText }),
-      /* @__PURE__ */ jsx51(
-        AutosuggestWrapper,
-        {
-          condition: hasSuggestions(suggestions),
-          wrapper: (children) => /* @__PURE__ */ jsxs36(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
-            /* @__PURE__ */ jsx51(
-              Popover3.Trigger,
-              {
-                asChild: true,
-                type: void 0,
-                "aria-controls": void 0,
-                "aria-haspopup": void 0,
-                "aria-expanded": void 0,
-                children
-              }
-            ),
-            /* @__PURE__ */ jsx51(Popover3.Portal, { children: /* @__PURE__ */ jsx51(
-              Popover3.Content,
-              {
-                sideOffset: 5,
-                style: { zIndex: "320" },
-                onOpenAutoFocus: (event) => {
-                  event.preventDefault();
-                },
-                onCloseAutoFocus: (event) => {
-                  event.preventDefault();
-                },
-                children: /* @__PURE__ */ jsx51(
-                  Suggestions_default,
-                  {
-                    id: autosuggestId,
-                    value: value ?? innerValue,
-                    suggestions: filteredSuggestions,
-                    visualFocusIndex,
-                    highlightedSuggestions: typeof suggestions !== "function",
-                    searchHasErrors: isAutosuggestError,
-                    isSearching,
-                    suggestionOnClick: (suggestion) => {
-                      changeValue(suggestion);
-                      closeSuggestions();
-                    },
-                    styles: { width }
-                  }
-                )
-              }
-            ) })
-          ] }),
-          children: /* @__PURE__ */ jsxs36(
-            InputContainer,
-            {
-              error: !!error,
-              disabled,
-              readOnly,
-              onClick: handleInputContainerOnClick,
-              onMouseDown: handleInputContainerOnMouseDown,
-              ref: inputContainerRef,
-              children: [
-                prefix && /* @__PURE__ */ jsx51(Prefix, { disabled, children: prefix }),
-                /* @__PURE__ */ jsxs36(Flex_default, { gap: "0.25rem", alignItems: "center", grow: 1, children: [
-                  /* @__PURE__ */ jsx51(
-                    Input,
+    return /* @__PURE__ */ jsxs36(ThemeProvider19, { theme: colorsTheme.textInput, children: [
+      /* @__PURE__ */ jsxs36(TextInputContainer, { margin, size, ref, children: [
+        label && /* @__PURE__ */ jsxs36(Label4, { htmlFor: inputId, disabled, hasHelperText: !!helperText, children: [
+          label,
+          " ",
+          optional && /* @__PURE__ */ jsx51(OptionalLabel2, { children: translatedLabels.formFields.optionalLabel })
+        ] }),
+        helperText && /* @__PURE__ */ jsx51(HelperText2, { disabled, children: helperText }),
+        /* @__PURE__ */ jsx51(
+          AutosuggestWrapper,
+          {
+            condition: hasSuggestions(suggestions),
+            wrapper: (children) => /* @__PURE__ */ jsxs36(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
+              /* @__PURE__ */ jsx51(
+                Popover3.Trigger,
+                {
+                  asChild: true,
+                  type: void 0,
+                  "aria-controls": void 0,
+                  "aria-haspopup": void 0,
+                  "aria-expanded": void 0,
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsx51(Popover3.Portal, { container: document.getElementById(`${inputId}-portal`), children: /* @__PURE__ */ jsx51(
+                Popover3.Content,
+                {
+                  sideOffset: 5,
+                  style: { zIndex: "320" },
+                  onOpenAutoFocus: (event) => {
+                    event.preventDefault();
+                  },
+                  onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                  },
+                  children: /* @__PURE__ */ jsx51(
+                    Suggestions_default,
                     {
-                      alignment,
-                      id: inputId,
-                      name,
+                      id: autosuggestId,
                       value: value ?? innerValue,
-                      placeholder,
-                      onBlur: handleInputOnBlur,
-                      onChange: handleInputOnChange,
-                      onFocus: !readOnly ? openSuggestions : void 0,
-                      onKeyDown: !readOnly ? handleInputOnKeyDown : void 0,
-                      onMouseDown: (event) => {
-                        event.stopPropagation();
+                      suggestions: filteredSuggestions,
+                      visualFocusIndex,
+                      highlightedSuggestions: typeof suggestions !== "function",
+                      searchHasErrors: isAutosuggestError,
+                      isSearching,
+                      suggestionOnClick: (suggestion) => {
+                        changeValue(suggestion);
+                        closeSuggestions();
                       },
-                      onWheel: numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : void 0,
-                      disabled,
-                      readOnly,
-                      ref: inputRef,
-                      pattern,
-                      minLength,
-                      maxLength,
-                      autoComplete: autocomplete === "off" ? "nope" : autocomplete,
-                      tabIndex,
-                      type: "text",
-                      role: hasSuggestions(suggestions) ? "combobox" : void 0,
-                      "aria-autocomplete": hasSuggestions(suggestions) ? "list" : void 0,
-                      "aria-controls": hasSuggestions(suggestions) ? autosuggestId : void 0,
-                      "aria-expanded": hasSuggestions(suggestions) ? isOpen : void 0,
-                      "aria-haspopup": hasSuggestions(suggestions) ? "listbox" : void 0,
-                      "aria-activedescendant": hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 ? `suggestion-${visualFocusIndex}` : void 0,
-                      "aria-invalid": !!error,
-                      "aria-errormessage": error ? errorId : void 0,
-                      "aria-required": !disabled && !optional,
-                      "aria-label": label ? void 0 : ariaLabel
+                      styles: { width }
                     }
-                  ),
-                  !disabled && error && /* @__PURE__ */ jsx51(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Icon_default, { icon: "filled_error" }) }),
-                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ jsx51(
-                    ActionIcon_default,
-                    {
-                      onClick: handleClearActionOnClick,
-                      icon: "close",
-                      tabIndex,
-                      title: translatedLabels.textInput.clearFieldActionTitle
-                    }
-                  ),
-                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ jsxs36(Fragment12, { children: [
+                  )
+                }
+              ) })
+            ] }),
+            children: /* @__PURE__ */ jsxs36(
+              InputContainer,
+              {
+                error: !!error,
+                disabled,
+                readOnly,
+                onClick: handleInputContainerOnClick,
+                onMouseDown: handleInputContainerOnMouseDown,
+                ref: inputContainerRef,
+                children: [
+                  prefix && /* @__PURE__ */ jsx51(Prefix, { disabled, children: prefix }),
+                  /* @__PURE__ */ jsxs36(Flex_default, { gap: "0.25rem", alignItems: "center", grow: 1, children: [
                     /* @__PURE__ */ jsx51(
+                      Input,
+                      {
+                        alignment,
+                        id: inputId,
+                        name,
+                        value: value ?? innerValue,
+                        placeholder,
+                        onBlur: handleInputOnBlur,
+                        onChange: handleInputOnChange,
+                        onFocus: !readOnly ? openSuggestions : void 0,
+                        onKeyDown: !readOnly ? handleInputOnKeyDown : void 0,
+                        onMouseDown: (event) => {
+                          event.stopPropagation();
+                        },
+                        onWheel: numberInputContext?.typeNumber === "number" ? handleNumberInputWheel : void 0,
+                        disabled,
+                        readOnly,
+                        ref: inputRef,
+                        pattern,
+                        minLength,
+                        maxLength,
+                        autoComplete: autocomplete === "off" ? "nope" : autocomplete,
+                        tabIndex,
+                        type: "text",
+                        role: hasSuggestions(suggestions) ? "combobox" : void 0,
+                        "aria-autocomplete": hasSuggestions(suggestions) ? "list" : void 0,
+                        "aria-controls": hasSuggestions(suggestions) ? autosuggestId : void 0,
+                        "aria-expanded": hasSuggestions(suggestions) ? isOpen : void 0,
+                        "aria-haspopup": hasSuggestions(suggestions) ? "listbox" : void 0,
+                        "aria-activedescendant": hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 ? `suggestion-${visualFocusIndex}` : void 0,
+                        "aria-invalid": !!error,
+                        "aria-errormessage": error ? errorId : void 0,
+                        "aria-required": !disabled && !optional,
+                        "aria-label": label ? void 0 : ariaLabel
+                      }
+                    ),
+                    !disabled && error && /* @__PURE__ */ jsx51(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Icon_default, { icon: "filled_error" }) }),
+                    !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ jsx51(
                       ActionIcon_default,
                       {
-                        onClick: !readOnly ? handleDecrementActionOnClick : void 0,
-                        icon: "remove",
+                        onClick: handleClearActionOnClick,
+                        icon: "close",
                         tabIndex,
-                        ref: actionRef,
-                        title: translatedLabels.numberInput.decrementValueTitle,
-                        disabled
+                        title: translatedLabels.textInput.clearFieldActionTitle
                       }
                     ),
-                    /* @__PURE__ */ jsx51(
+                    numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ jsxs36(Fragment12, { children: [
+                      /* @__PURE__ */ jsx51(
+                        ActionIcon_default,
+                        {
+                          onClick: !readOnly ? handleDecrementActionOnClick : void 0,
+                          icon: "remove",
+                          tabIndex,
+                          ref: actionRef,
+                          title: translatedLabels.numberInput.decrementValueTitle,
+                          disabled
+                        }
+                      ),
+                      /* @__PURE__ */ jsx51(
+                        ActionIcon_default,
+                        {
+                          onClick: !readOnly ? handleIncrementActionOnClick : void 0,
+                          icon: "add",
+                          tabIndex,
+                          ref: actionRef,
+                          title: translatedLabels.numberInput.incrementValueTitle,
+                          disabled
+                        }
+                      )
+                    ] }),
+                    action && /* @__PURE__ */ jsx51(
                       ActionIcon_default,
                       {
-                        onClick: !readOnly ? handleIncrementActionOnClick : void 0,
-                        icon: "add",
+                        onClick: !readOnly ? action.onClick : void 0,
+                        icon: action.icon,
                         tabIndex,
                         ref: actionRef,
-                        title: translatedLabels.numberInput.incrementValueTitle,
+                        title: action.title ?? void 0,
                         disabled
                       }
                     )
                   ] }),
-                  action && /* @__PURE__ */ jsx51(
-                    ActionIcon_default,
-                    {
-                      onClick: !readOnly ? action.onClick : void 0,
-                      icon: action.icon,
-                      tabIndex,
-                      ref: actionRef,
-                      title: action.title ?? "",
-                      disabled
-                    }
-                  )
-                ] }),
-                suffix && /* @__PURE__ */ jsx51(Suffix, { disabled, children: suffix })
-              ]
-            }
-          )
-        }
-      ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx51(ErrorMessageContainer, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
-    ] }) });
+                  suffix && /* @__PURE__ */ jsx51(Suffix, { disabled, children: suffix })
+                ]
+              }
+            )
+          }
+        ),
+        !disabled && typeof error === "string" && /* @__PURE__ */ jsx51(ErrorMessageContainer, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
+      ] }),
+      /* @__PURE__ */ jsx51("div", { id: `${inputId}-portal`, style: { position: "absolute" } })
+    ] });
   }
 );
 var TextInput_default = DxcTextInput;
@@ -9582,7 +9596,7 @@ var getDate = (value, format, lastValidYear, setLastValidYear) => {
   }
   return newDate;
 };
-var DxcDateInput = forwardRef7(
+var DxcDateInput = forwardRef8(
   ({
     label,
     name,
@@ -9604,14 +9618,14 @@ var DxcDateInput = forwardRef7(
     tabIndex,
     ariaLabel = "Date input"
   }, ref) => {
-    const [innerValue, setInnerValue] = useState23(defaultValue);
-    const [isOpen, setIsOpen] = useState23(false);
-    const calendarId = `date-picker-${useId12()}`;
-    const [dayjsDate, setDayjsDate] = useState23(getValueForPicker(value ?? defaultValue ?? "", format));
-    const [lastValidYear, setLastValidYear] = useState23(
+    const [innerValue, setInnerValue] = useState24(defaultValue);
+    const [isOpen, setIsOpen] = useState24(false);
+    const calendarId = `date-picker-${useId13()}`;
+    const [dayjsDate, setDayjsDate] = useState24(getValueForPicker(value ?? defaultValue ?? "", format));
+    const [lastValidYear, setLastValidYear] = useState24(
       innerValue || value ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value ?? innerValue, format).format("YY") < 68 ? 2e3 : 1900 : null
     );
-    const [sideOffset, setSideOffset] = useState23(SIDEOFFSET);
+    const [sideOffset, setSideOffset] = useState24(SIDEOFFSET);
     const colorsTheme = useContext30(HalstackContext);
     const translatedLabels = useContext30(HalstackLanguageContext);
     const dateRef = useRef12(null);
@@ -9708,18 +9722,18 @@ var DxcDateInput = forwardRef7(
         closeCalendar();
       }
     };
-    useEffect13(() => {
+    useEffect14(() => {
       window.addEventListener("scroll", adjustSideOffset);
       return () => {
         window.removeEventListener("scroll", adjustSideOffset);
       };
     }, [adjustSideOffset]);
-    useEffect13(() => {
+    useEffect14(() => {
       if (value || value === "") {
         setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
       }
     }, [value, format, lastValidYear]);
-    useEffect13(() => {
+    useEffect14(() => {
       if (!disabled) {
         const actionButtonElement = dateRef.current?.querySelector("[aria-label='Select date']");
         actionButtonElement?.setAttribute("aria-haspopup", "true");
@@ -9731,62 +9745,65 @@ var DxcDateInput = forwardRef7(
         }
       }
     }, [isOpen, disabled, calendarId]);
-    return /* @__PURE__ */ jsx52(ThemeProvider20, { theme: colorsTheme, children: /* @__PURE__ */ jsxs37(DateInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs37(
-        Label5,
-        {
-          htmlFor: dateRef.current?.getElementsByTagName("input")[0]?.id,
-          disabled,
-          hasHelperText: !!helperText,
-          children: [
-            label,
-            " ",
-            optional && /* @__PURE__ */ jsx52(OptionalLabel3, { children: translatedLabels.formFields.optionalLabel })
-          ]
-        }
-      ),
-      helperText && /* @__PURE__ */ jsx52(HelperText3, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs37(Popover4.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx52(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ jsx52(
-          TextInput_default,
+    return /* @__PURE__ */ jsxs37(ThemeProvider20, { theme: colorsTheme, children: [
+      /* @__PURE__ */ jsxs37(DateInputContainer, { margin, size, ref, children: [
+        label && /* @__PURE__ */ jsxs37(
+          Label5,
           {
-            name,
-            defaultValue,
-            value: value ?? innerValue,
-            placeholder: placeholder ? format.toUpperCase() : void 0,
-            action: {
-              onClick: openCalendar,
-              icon: "filled_calendar_today",
-              title: "Select date"
-            },
-            clearable,
+            htmlFor: dateRef.current?.getElementsByTagName("input")[0]?.id,
             disabled,
-            readOnly,
-            optional,
-            onChange: handleOnChange,
-            onBlur: handleOnBlur,
-            error,
-            autocomplete,
-            size,
-            tabIndex,
-            ref: dateRef,
-            ariaLabel
-          }
-        ) }),
-        /* @__PURE__ */ jsx52(Popover4.Portal, { children: /* @__PURE__ */ jsx52(
-          StyledPopoverContent,
-          {
-            sideOffset,
-            align: "end",
-            "aria-modal": true,
-            onBlur: handleDatePickerOnBlur,
-            onKeyDown: handleDatePickerEscKeydown,
-            ref: popoverContentRef,
-            children: /* @__PURE__ */ jsx52(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            hasHelperText: !!helperText,
+            children: [
+              label,
+              " ",
+              optional && /* @__PURE__ */ jsx52(OptionalLabel3, { children: translatedLabels.formFields.optionalLabel })
+            ]
           }
-        ) })
-      ] })
-    ] }) });
+        ),
+        helperText && /* @__PURE__ */ jsx52(HelperText3, { disabled, children: helperText }),
+        /* @__PURE__ */ jsxs37(Popover4.Root, { open: isOpen, children: [
+          /* @__PURE__ */ jsx52(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ jsx52(
+            TextInput_default,
+            {
+              name,
+              defaultValue,
+              value: value ?? innerValue,
+              placeholder: placeholder ? format.toUpperCase() : void 0,
+              action: {
+                onClick: openCalendar,
+                icon: "filled_calendar_today",
+                title: "Select date"
+              },
+              clearable,
+              disabled,
+              readOnly,
+              optional,
+              onChange: handleOnChange,
+              onBlur: handleOnBlur,
+              error,
+              autocomplete,
+              size,
+              tabIndex,
+              ref: dateRef,
+              ariaLabel
+            }
+          ) }),
+          /* @__PURE__ */ jsx52(Popover4.Portal, { container: document.getElementById(`${calendarId}-portal`), children: /* @__PURE__ */ jsx52(
+            StyledPopoverContent,
+            {
+              sideOffset,
+              align: "end",
+              "aria-modal": true,
+              onBlur: handleDatePickerOnBlur,
+              onKeyDown: handleDatePickerEscKeydown,
+              ref: popoverContentRef,
+              children: /* @__PURE__ */ jsx52(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx52("div", { id: `${calendarId}-portal`, style: { position: "absolute" } })
+    ] });
   }
 );
 var sizes5 = {
@@ -9829,7 +9846,7 @@ var HelperText3 = styled45.span`
   margin-bottom: 0.25rem;
 `;
 var StyledPopoverContent = styled45(Popover4.Content)`
-  z-index: 300;
+  z-index: 310;
   &:focus-visible {
     outline: none;
   }
@@ -9837,7 +9854,7 @@ var StyledPopoverContent = styled45(Popover4.Content)`
 var DateInput_default = DxcDateInput;
 
 // src/dialog/Dialog.tsx
-import { useContext as useContext31, useEffect as useEffect14 } from "react";
+import { useContext as useContext31, useEffect as useEffect15, useId as useId14, useState as useState25 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import styled46, { createGlobalStyle as createGlobalStyle2, ThemeProvider as ThemeProvider21 } from "styled-components";
 import { Fragment as Fragment13, jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -9853,7 +9870,7 @@ var DialogContainer = styled46.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 420;
+  z-index: 300;
 `;
 var Overlay3 = styled46.div`
   position: fixed;
@@ -9890,9 +9907,14 @@ var DxcDialog = ({
   tabIndex = 0,
   disableFocusLock = false
 }) => {
+  const id = useId14();
   const colorsTheme = useContext31(HalstackContext);
   const translatedLabels = useContext31(HalstackLanguageContext);
-  useEffect14(() => {
+  const [portalContainer, setPortalContainer] = useState25(null);
+  useEffect15(() => {
+    setPortalContainer(document.getElementById(`dialog-${id}-portal`));
+  }, []);
+  useEffect15(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -9906,7 +9928,8 @@ var DxcDialog = ({
   }, [onCloseClick]);
   return /* @__PURE__ */ jsxs38(ThemeProvider21, { theme: colorsTheme.dialog, children: [
     /* @__PURE__ */ jsx53(BodyStyle2, {}),
-    createPortal2(
+    /* @__PURE__ */ jsx53("div", { id: `dialog-${id}-portal`, style: { position: "absolute" } }),
+    portalContainer && createPortal2(
       /* @__PURE__ */ jsxs38(DialogContainer, { children: [
         overlay && /* @__PURE__ */ jsx53(Overlay3, { onClick: onBackgroundClick }),
         /* @__PURE__ */ jsx53(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: !disableFocusLock ? /* @__PURE__ */ jsxs38(FocusLock_default, { children: [
@@ -9933,18 +9956,18 @@ var DxcDialog = ({
           ) })
         ] }) })
       ] }),
-      document.body
+      portalContainer
     )
   ] });
 };
 var Dialog_default = DxcDialog;
 
 // src/file-input/FileInput.tsx
-import { useCallback as useCallback8, useContext as useContext33, useEffect as useEffect15, useId as useId14, useState as useState24, forwardRef as forwardRef8 } from "react";
+import { useCallback as useCallback8, useContext as useContext33, useEffect as useEffect16, useId as useId16, useState as useState26, forwardRef as forwardRef9 } from "react";
 import styled48, { ThemeProvider as ThemeProvider22 } from "styled-components";
 
 // src/file-input/FileItem.tsx
-import { memo as memo10, useContext as useContext32, useId as useId13 } from "react";
+import { memo as memo10, useContext as useContext32, useId as useId15 } from "react";
 import styled47 from "styled-components";
 import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
 var MainContainer3 = styled47.div`
@@ -10029,7 +10052,7 @@ var FileItem = ({
   tabIndex
 }) => {
   const translatedLabels = useContext32(HalstackLanguageContext);
-  const fileNameId = useId13();
+  const fileNameId = useId15();
   return /* @__PURE__ */ jsxs39(MainContainer3, { error, role: "listitem", singleFileMode, showPreview, children: [
     showPreview && (type.includes("image") ? /* @__PURE__ */ jsx54(ImagePreview, { src: preview, alt: fileName }) : /* @__PURE__ */ jsx54(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ jsx54(Icon_default, { icon: preview }) })),
     /* @__PURE__ */ jsxs39(FileItemContent, { children: [
@@ -10161,7 +10184,7 @@ var ErrorMessage2 = styled48.div`
   line-height: ${(props) => props.theme.errorMessageLineHeight};
   margin-top: 0.25rem;
 `;
-var DxcFileInput = forwardRef8(
+var DxcFileInput = forwardRef9(
   ({
     mode = "file",
     label = "",
@@ -10179,9 +10202,9 @@ var DxcFileInput = forwardRef8(
     margin,
     tabIndex = 0
   }, ref) => {
-    const [isDragging, setIsDragging] = useState24(false);
-    const [files, setFiles] = useState24([]);
-    const fileInputId = `file-input-${useId14()}`;
+    const [isDragging, setIsDragging] = useState26(false);
+    const [files, setFiles] = useState26([]);
+    const fileInputId = `file-input-${useId16()}`;
     const colorsTheme = useContext33(HalstackContext);
     const translatedLabels = useContext33(HalstackLanguageContext);
     const checkFileSize = (file) => {
@@ -10255,7 +10278,7 @@ var DxcFileInput = forwardRef8(
         addFile(filesArray);
       }
     };
-    useEffect15(() => {
+    useEffect16(() => {
       const getFiles = async () => {
         if (value) {
           const valueFiles = await Promise.all(
@@ -10560,7 +10583,7 @@ var Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Inset_default = Inset;
 
 // src/link/Link.tsx
-import { forwardRef as forwardRef9, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef10, useContext as useContext36 } from "react";
 import styled53, { ThemeProvider as ThemeProvider25 } from "styled-components";
 import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledLink = styled53.a`
@@ -10625,7 +10648,7 @@ var LinkIconContainer = styled53.div`
     height: ${(props) => props.theme.iconSize};
   }
 `;
-var DxcLink = forwardRef9(
+var DxcLink = forwardRef10(
   ({
     inheritColor = false,
     disabled = false,
@@ -10664,11 +10687,11 @@ var DxcLink = forwardRef9(
 var Link_default = DxcLink;
 
 // src/nav-tabs/NavTabs.tsx
-import { Children as Children4, useContext as useContext38, useEffect as useEffect17, useMemo as useMemo14, useRef as useRef14, useState as useState25 } from "react";
+import { Children as Children4, useContext as useContext38, useEffect as useEffect18, useMemo as useMemo14, useRef as useRef14, useState as useState27 } from "react";
 import styled55, { ThemeProvider as ThemeProvider26 } from "styled-components";
 
 // src/nav-tabs/Tab.tsx
-import { useEffect as useEffect16, forwardRef as forwardRef10, useContext as useContext37, useRef as useRef13, useImperativeHandle } from "react";
+import { useEffect as useEffect17, forwardRef as forwardRef11, useContext as useContext37, useRef as useRef13, useImperativeHandle } from "react";
 import styled54 from "styled-components";
 
 // src/nav-tabs/NavTabsContext.tsx
@@ -10677,7 +10700,7 @@ var NavTabsContext_default = createContext8(null);
 
 // src/nav-tabs/Tab.tsx
 import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
-var DxcTab = forwardRef10(
+var DxcTab = forwardRef11(
   ({
     href,
     active = false,
@@ -10692,7 +10715,7 @@ var DxcTab = forwardRef10(
     const { iconPosition, tabIndex, focusedLabel } = useContext37(NavTabsContext_default) ?? {};
     const innerRef = useRef13(null);
     useImperativeHandle(ref, () => innerRef.current, []);
-    useEffect16(() => {
+    useEffect17(() => {
       if (focusedLabel === children.toString()) {
         tabRef?.current?.focus();
       }
@@ -10716,8 +10739,9 @@ var DxcTab = forwardRef10(
         disabled,
         active,
         href: !disabled ? href : void 0,
+        as: href ? "a" : onClick ? "button" : "div",
         iconPosition,
-        onClick,
+        onClick: !disabled ? onClick : void 0,
         onKeyDown: handleOnKeyDown,
         hasIcon: icon != null,
         ref: (anchorRef) => {
@@ -10851,14 +10875,14 @@ var getNextTabIndex = (array, initialIndex) => {
   return index;
 };
 var DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }) => {
-  const [innerFocusIndex, setInnerFocusIndex] = useState25(null);
-  const [underlineWidth, setUnderlineWidth] = useState25(null);
+  const [innerFocusIndex, setInnerFocusIndex] = useState27(null);
+  const [underlineWidth, setUnderlineWidth] = useState27(null);
   const refNavTabList = useRef14(null);
   const colorsTheme = useContext38(HalstackContext);
   const childArray = Children4.toArray(children).filter(
     (child) => typeof child === "object" && "props" in child
   );
-  useEffect17(() => {
+  useEffect18(() => {
     setUnderlineWidth(refNavTabList?.current?.scrollWidth ?? null);
   }, [children]);
   const contextValue = useMemo14(
@@ -10910,10 +10934,10 @@ var NavTabsContainer = styled55.div`
 var NavTabs_default = DxcNavTabs;
 
 // src/number-input/NumberInput.tsx
-import { forwardRef as forwardRef11, useEffect as useEffect18, useMemo as useMemo15, useRef as useRef15 } from "react";
+import { forwardRef as forwardRef12, useEffect as useEffect19, useMemo as useMemo15, useRef as useRef15 } from "react";
 import styled56 from "styled-components";
 import { jsx as jsx63 } from "react/jsx-runtime";
-var DxcNumberInput = forwardRef11(
+var DxcNumberInput = forwardRef12(
   ({
     label,
     name,
@@ -10950,7 +10974,7 @@ var DxcNumberInput = forwardRef11(
       }),
       [max, min, showControls, step]
     );
-    useEffect18(() => {
+    useEffect19(() => {
       const input = numberInputRef.current?.getElementsByTagName("input")[0];
       const preventDefault = (event) => {
         event.preventDefault();
@@ -11028,7 +11052,7 @@ function DxcParagraph({ children }) {
 }
 
 // src/password-input/PasswordInput.tsx
-import { forwardRef as forwardRef12, useContext as useContext40, useEffect as useEffect19, useRef as useRef16, useState as useState26 } from "react";
+import { forwardRef as forwardRef13, useContext as useContext40, useEffect as useEffect20, useRef as useRef16, useState as useState28 } from "react";
 import styled58 from "styled-components";
 import { jsx as jsx65 } from "react/jsx-runtime";
 var setInputType = (type, element) => {
@@ -11038,7 +11062,7 @@ var setAriaAttributes = (ariaExpanded, element) => {
   const buttonElement = element?.getElementsByTagName("button")[0];
   buttonElement?.setAttribute("aria-expanded", ariaExpanded);
 };
-var DxcPasswordInput = forwardRef12(
+var DxcPasswordInput = forwardRef13(
   ({
     label,
     name = "",
@@ -11057,10 +11081,10 @@ var DxcPasswordInput = forwardRef12(
     tabIndex = 0,
     ariaLabel = "Password input"
   }, ref) => {
-    const [isPasswordVisible, setIsPasswordVisible] = useState26(false);
+    const [isPasswordVisible, setIsPasswordVisible] = useState28(false);
     const inputRef = useRef16(null);
     const { passwordInput } = useContext40(HalstackLanguageContext);
-    useEffect19(() => {
+    useEffect20(() => {
       (() => {
         if (isPasswordVisible) {
           setInputType("text", inputRef.current);
@@ -11115,7 +11139,7 @@ var PasswordInput = styled58.div`
 var PasswordInput_default = DxcPasswordInput;
 
 // src/progress-bar/ProgressBar.tsx
-import { useContext as useContext41, useEffect as useEffect20, useId as useId15, useState as useState27 } from "react";
+import { useContext as useContext41, useEffect as useEffect21, useId as useId17, useState as useState29 } from "react";
 import styled59, { ThemeProvider as ThemeProvider28 } from "styled-components";
 import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
 var Overlay4 = styled59.div`
@@ -11236,9 +11260,9 @@ var DxcProgressBar = ({
   ariaLabel = "Progress bar"
 }) => {
   const colorsTheme = useContext41(HalstackContext);
-  const labelId = `label-${useId15()}`;
-  const [innerValue, setInnerValue] = useState27();
-  useEffect20(() => {
+  const labelId = `label-${useId17()}`;
+  const [innerValue, setInnerValue] = useState29();
+  useEffect21(() => {
     if (value != null) setInnerValue(value < 0 ? 0 : value > 100 ? 100 : value);
   }, [value]);
   return /* @__PURE__ */ jsx66(ThemeProvider28, { theme: colorsTheme.progressBar, children: /* @__PURE__ */ jsx66(Overlay4, { overlay, children: /* @__PURE__ */ jsxs45(MainContainer4, { overlay, margin, children: [
@@ -11275,16 +11299,36 @@ import { jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
 var DxcQuickNav = ({ title, links }) => {
   const translatedLabels = useContext42(HalstackLanguageContext);
   const colorsTheme = useContext42(HalstackContext);
+  const isHashRouter = () => {
+    if (typeof window === "undefined") return false;
+    return window.location.href.includes("/#/");
+  };
   return /* @__PURE__ */ jsx67(ThemeProvider29, { theme: colorsTheme.quickNav, children: /* @__PURE__ */ jsx67(QuickNavContainer, { children: /* @__PURE__ */ jsxs46(Flex_default, { direction: "column", gap: "0.5rem", children: [
     /* @__PURE__ */ jsx67(Heading_default, { level: 4, text: title || translatedLabels.quickNav.contentTitle }),
     /* @__PURE__ */ jsx67(ListColumn, { children: links.map((link) => /* @__PURE__ */ jsx67("li", { children: /* @__PURE__ */ jsx67(Inset_default, { space: "0.25rem", children: /* @__PURE__ */ jsxs46(DxcTypography, { children: [
-      /* @__PURE__ */ jsx67(Link3, { href: `#${slugify(link.label, { lower: true })}`, children: link.label }),
+      /* @__PURE__ */ jsx67(
+        Link3,
+        {
+          href: `#${slugify(link.label, { lower: true })}`,
+          onClick: isHashRouter() ? (e) => {
+            e.preventDefault();
+            const id = slugify(link.label, { lower: true });
+            document.getElementById(id)?.scrollIntoView();
+          } : void 0,
+          children: /* @__PURE__ */ jsx67("span", { children: link.label })
+        }
+      ),
       /* @__PURE__ */ jsx67(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ jsx67("li", { children: /* @__PURE__ */ jsx67(Inset_default, { horizontal: "0.5rem", children: /* @__PURE__ */ jsx67(DxcTypography, { children: /* @__PURE__ */ jsx67(
         Link3,
         {
           href: `#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
             lower: true
           })}`,
+          onClick: isHashRouter() ? (e) => {
+            e.preventDefault();
+            const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`;
+            document.getElementById(id)?.scrollIntoView();
+          } : void 0,
           children: sublink.label
         }
       ) }) }) }, sublink.label)) })
@@ -11340,11 +11384,11 @@ var Link3 = styled60.a`
 var QuickNav_default = DxcQuickNav;
 
 // src/radio-group/RadioGroup.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback10, useContext as useContext44, useId as useId17, useMemo as useMemo16, useState as useState29 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback10, useContext as useContext44, useId as useId19, useMemo as useMemo16, useState as useState31 } from "react";
 import styled62, { ThemeProvider as ThemeProvider31 } from "styled-components";
 
 // src/radio-group/Radio.tsx
-import { memo as memo11, useContext as useContext43, useEffect as useEffect21, useId as useId16, useRef as useRef17, useState as useState28 } from "react";
+import { memo as memo11, useContext as useContext43, useEffect as useEffect22, useId as useId18, useRef as useRef17, useState as useState30 } from "react";
 import styled61, { ThemeProvider as ThemeProvider30 } from "styled-components";
 import { jsx as jsx68, jsxs as jsxs47 } from "react/jsx-runtime";
 var DxcRadio = ({
@@ -11357,15 +11401,15 @@ var DxcRadio = ({
   readOnly,
   tabIndex
 }) => {
-  const radioLabelId = `radio-${useId16()}`;
+  const radioLabelId = `radio-${useId18()}`;
   const ref = useRef17(null);
   const colorsTheme = useContext43(HalstackContext);
   const handleOnClick = () => {
     onClick();
     document.activeElement !== ref.current && ref.current?.focus();
   };
-  const [firstUpdate, setFirstUpdate] = useState28(true);
-  useEffect21(() => {
+  const [firstUpdate, setFirstUpdate] = useState30(true);
+  useEffect22(() => {
     if (firstUpdate) {
       setFirstUpdate(false);
       return;
@@ -11478,7 +11522,7 @@ var getInitialFocusIndex = (innerOptions, value) => {
   const initialSelectedOptionIndex = innerOptions.findIndex((option) => option.value === value);
   return initialSelectedOptionIndex !== -1 ? initialSelectedOptionIndex : 0;
 };
-var DxcRadioGroup = forwardRef13(
+var DxcRadioGroup = forwardRef14(
   ({
     label,
     name,
@@ -11497,11 +11541,11 @@ var DxcRadioGroup = forwardRef13(
     tabIndex = 0,
     ariaLabel = "Radio group"
   }, ref) => {
-    const radioGroupId = `radio-group-${useId17()}`;
+    const radioGroupId = `radio-group-${useId19()}`;
     const radioGroupLabelId = `label-${radioGroupId}`;
     const errorId = `error-${radioGroupId}`;
-    const [innerValue, setInnerValue] = useState29(defaultValue);
-    const [firstTimeFocus, setFirstTimeFocus] = useState29(true);
+    const [innerValue, setInnerValue] = useState31(defaultValue);
+    const [firstTimeFocus, setFirstTimeFocus] = useState31(true);
     const colorsTheme = useContext44(HalstackContext);
     const translatedLabels = useContext44(HalstackLanguageContext);
     const innerOptions = useMemo16(
@@ -11515,7 +11559,7 @@ var DxcRadioGroup = forwardRef13(
       ] : options,
       [optional, options, optionalItemLabel, translatedLabels]
     );
-    const [currentFocusIndex, setCurrentFocusIndex] = useState29(getInitialFocusIndex(innerOptions, value ?? innerValue));
+    const [currentFocusIndex, setCurrentFocusIndex] = useState31(getInitialFocusIndex(innerOptions, value ?? innerValue));
     const handleOnChange = useCallback10(
       (newValue) => {
         const currentValue = value ?? innerValue;
@@ -11695,7 +11739,7 @@ var ErrorMessageContainer2 = styled62.span`
 var RadioGroup_default = DxcRadioGroup;
 
 // src/resultset-table/ResultsetTable.tsx
-import { useContext as useContext45, useEffect as useEffect22, useMemo as useMemo17, useRef as useRef18, useState as useState30 } from "react";
+import { useContext as useContext45, useEffect as useEffect23, useMemo as useMemo17, useRef as useRef18, useState as useState32 } from "react";
 import styled63, { ThemeProvider as ThemeProvider32 } from "styled-components";
 
 // src/resultset-table/Icons.tsx
@@ -11752,9 +11796,9 @@ var DxcResultsetTable = ({
   mode = "default"
 }) => {
   const colorsTheme = useContext45(HalstackContext);
-  const [page, changePage] = useState30(1);
-  const [sortColumnIndex, changeSortColumnIndex] = useState30(-1);
-  const [sortOrder, changeSortOrder] = useState30("ascending");
+  const [page, changePage] = useState32(1);
+  const [sortColumnIndex, changeSortColumnIndex] = useState32(-1);
+  const [sortOrder, changeSortOrder] = useState32("ascending");
   const prevRowCountRef = useRef18(rows.length);
   const rowsWithIds = useMemo17(() => assignIdsToRows(rows), [rows]);
   const minItemsPerPageIndex = useMemo17(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
@@ -11780,7 +11824,7 @@ var DxcResultsetTable = ({
       sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending"
     );
   };
-  useEffect22(() => {
+  useEffect23(() => {
     if (!hidePaginator) {
       if (rows.length === 0) {
         changePage(0);
@@ -11879,7 +11923,7 @@ DxcResultsetTable.ActionsCell = DxcActionsCell;
 var ResultsetTable_default = DxcResultsetTable;
 
 // src/slider/Slider.tsx
-import { forwardRef as forwardRef14, useContext as useContext46, useId as useId18, useMemo as useMemo18, useState as useState31 } from "react";
+import { forwardRef as forwardRef15, useContext as useContext46, useId as useId20, useMemo as useMemo18, useState as useState33 } from "react";
 import styled64, { ThemeProvider as ThemeProvider33 } from "styled-components";
 import { jsx as jsx72, jsxs as jsxs50 } from "react/jsx-runtime";
 var sizes6 = {
@@ -12050,7 +12094,7 @@ var TextInputContainer2 = styled64.div`
   margin-left: ${(props) => props.theme.inputMarginLeft};
   max-width: 70px;
 `;
-var DxcSlider = forwardRef14(
+var DxcSlider = forwardRef15(
   ({
     label = "",
     name = "",
@@ -12071,9 +12115,9 @@ var DxcSlider = forwardRef14(
     size = "fillParent",
     ariaLabel = "Slider"
   }, ref) => {
-    const labelId = `label-${useId18()}`;
-    const [innerValue, setInnerValue] = useState31(defaultValue ?? 0);
-    const [dragging, setDragging] = useState31(false);
+    const labelId = `label-${useId20()}`;
+    const [innerValue, setInnerValue] = useState33(defaultValue ?? 0);
+    const [dragging, setDragging] = useState33(false);
     const colorsTheme = useContext46(HalstackContext);
     const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
     const minLabel = useMemo18(
@@ -12210,10 +12254,10 @@ var StatusLabel = styled65.span`
 var StatusLight_default = DxcStatusLight;
 
 // src/switch/Switch.tsx
-import { forwardRef as forwardRef15, useContext as useContext47, useId as useId19, useRef as useRef19, useState as useState32 } from "react";
+import { forwardRef as forwardRef16, useContext as useContext47, useId as useId21, useRef as useRef19, useState as useState34 } from "react";
 import styled66, { ThemeProvider as ThemeProvider34 } from "styled-components";
 import { Fragment as Fragment14, jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
-var DxcSwitch = forwardRef15(
+var DxcSwitch = forwardRef16(
   ({
     defaultChecked = false,
     checked,
@@ -12229,9 +12273,9 @@ var DxcSwitch = forwardRef15(
     tabIndex = 0,
     ariaLabel = "Switch"
   }, ref) => {
-    const switchId = `switch-${useId19()}`;
+    const switchId = `switch-${useId21()}`;
     const labelId = `label-${switchId}`;
-    const [innerChecked, setInnerChecked] = useState32(defaultChecked);
+    const [innerChecked, setInnerChecked] = useState34(defaultChecked);
     const colorsTheme = useContext47(HalstackContext);
     const translatedLabels = useContext47(HalstackLanguageContext);
     const refTrack = useRef19(null);
@@ -12457,10 +12501,10 @@ import {
   isValidElement as isValidElement2,
   useCallback as useCallback12,
   useContext as useContext50,
-  useEffect as useEffect25,
+  useEffect as useEffect26,
   useMemo as useMemo20,
   useRef as useRef22,
-  useState as useState34
+  useState as useState36
 } from "react";
 import styled70, { ThemeProvider as ThemeProvider36 } from "styled-components";
 
@@ -12469,10 +12513,10 @@ import { createContext as createContext9 } from "react";
 var TabsContext_default = createContext9(null);
 
 // src/tabs/Tab.tsx
-import { forwardRef as forwardRef16, useContext as useContext48, useEffect as useEffect23, useRef as useRef20 } from "react";
+import { forwardRef as forwardRef17, useContext as useContext48, useEffect as useEffect24, useRef as useRef20 } from "react";
 import styled67 from "styled-components";
 import { jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
-var DxcTab2 = forwardRef16(
+var DxcTab2 = forwardRef17(
   ({
     icon,
     label,
@@ -12498,18 +12542,18 @@ var DxcTab2 = forwardRef16(
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
     } = useContext48(TabsContext_default) ?? {};
-    useEffect23(() => {
+    useEffect24(() => {
       if (focusedTab === tabId) {
         tabRef?.current?.focus();
       }
     }, [focusedTab, tabId]);
-    useEffect23(() => {
+    useEffect24(() => {
       if (activeTab === tabId) {
         setActiveIndicatorWidth?.(tabRef.current?.offsetWidth ?? 0);
         setActiveIndicatorLeft?.(tabRef.current?.offsetLeft ?? 0);
       }
     }, [activeTab, tabId, setActiveIndicatorWidth, setActiveIndicatorLeft]);
-    useEffect23(() => {
+    useEffect24(() => {
       if (active) {
         setActiveTab?.(tabId ?? label ?? "");
       }
@@ -12685,14 +12729,14 @@ var TabIconContainer2 = styled67.div`
 var Tab_default2 = DxcTab2;
 
 // src/tabs/TabsLegacy.tsx
-import { useCallback as useCallback11, useContext as useContext49, useEffect as useEffect24, useMemo as useMemo19, useRef as useRef21, useState as useState33 } from "react";
+import { useCallback as useCallback11, useContext as useContext49, useEffect as useEffect25, useMemo as useMemo19, useRef as useRef21, useState as useState35 } from "react";
 import styled69, { ThemeProvider as ThemeProvider35 } from "styled-components";
 
 // src/tabs/TabLegacy.tsx
-import { forwardRef as forwardRef17, memo as memo12 } from "react";
+import { forwardRef as forwardRef18, memo as memo12 } from "react";
 import styled68 from "styled-components";
 import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
-var Tab2 = forwardRef17(
+var Tab2 = forwardRef18(
   ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ jsxs54(
     TabContainer3,
     {
@@ -12841,11 +12885,11 @@ var TabLegacy_default = memo12(Tab2);
 // src/tabs/TabsLegacy.tsx
 import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 var useResize = (refTabList) => {
-  const [viewWidth, setViewWidth] = useState33(0);
+  const [viewWidth, setViewWidth] = useState35(0);
   const handleWindowSizeChange = useCallback11(() => {
     setViewWidth(refTabList.current?.offsetWidth ?? 0);
   }, [refTabList]);
-  useEffect24(() => {
+  useEffect25(() => {
     handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return () => {
@@ -12867,25 +12911,25 @@ var DxcTabs = ({
   const colorsTheme = useContext49(HalstackContext);
   const hasLabelAndIcon = tabs != null && tabs.filter((tab) => tab.label && tab.icon).length > 0;
   const firstFocus = tabs != null ? tabs.findIndex((tab) => !tab.isDisabled) : null;
-  const [innerActiveTabIndex, setInnerActiveTabIndex] = useState33(
+  const [innerActiveTabIndex, setInnerActiveTabIndex] = useState35(
     tabs != null && defaultActiveTabIndex && !tabs[defaultActiveTabIndex]?.isDisabled ? defaultActiveTabIndex : firstFocus
   );
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState33(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState33(0);
-  const [translateScroll, setTranslateScroll] = useState33(0);
-  const [scrollRightEnabled, setScrollRightEnabled] = useState33(true);
-  const [scrollLeftEnabled, setScrollLeftEnabled] = useState33(false);
-  const [countClick, setCountClick] = useState33(0);
-  const [totalTabsWidth, setTotalTabsWidth] = useState33(0);
-  const [currentFocusIndex, setCurrentFocusIndex] = useState33(activeTabIndex ?? innerActiveTabIndex);
-  const [temporalFocusIndex, setTemporalFocusIndex] = useState33(activeTabIndex ?? innerActiveTabIndex);
-  const [minHeightTabs, setMinHeightTabs] = useState33(0);
+  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState35(0);
+  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState35(0);
+  const [translateScroll, setTranslateScroll] = useState35(0);
+  const [scrollRightEnabled, setScrollRightEnabled] = useState35(true);
+  const [scrollLeftEnabled, setScrollLeftEnabled] = useState35(false);
+  const [countClick, setCountClick] = useState35(0);
+  const [totalTabsWidth, setTotalTabsWidth] = useState35(0);
+  const [currentFocusIndex, setCurrentFocusIndex] = useState35(activeTabIndex ?? innerActiveTabIndex);
+  const [temporalFocusIndex, setTemporalFocusIndex] = useState35(activeTabIndex ?? innerActiveTabIndex);
+  const [minHeightTabs, setMinHeightTabs] = useState35(0);
   const refTabs = useRef21([]);
   const refTabList = useRef21(null);
   const viewWidth = useResize(refTabList);
   const translatedLabels = useContext49(HalstackLanguageContext);
   const enabledIndicator = useMemo19(() => viewWidth < totalTabsWidth, [viewWidth]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (activeTabIndex != null || innerActiveTabIndex != null) {
       const sumWidth = refTabs.current?.reduce((count, obj) => count + obj.offsetWidth, 0);
       setTotalTabsWidth(sumWidth);
@@ -12893,10 +12937,10 @@ var DxcTabs = ({
       setActiveIndicatorLeft(refTabs.current[activeTabIndex ?? innerActiveTabIndex]?.offsetLeft ?? 0);
     }
   }, [activeTabIndex, innerActiveTabIndex]);
-  useEffect24(() => {
+  useEffect25(() => {
     setMinHeightTabs((refTabList.current?.offsetHeight ?? 0) + 1);
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (activeTabIndex && activeTabIndex >= 0) {
       setActiveIndicatorWidth(refTabs.current[activeTabIndex]?.offsetWidth ?? 0);
       setActiveIndicatorLeft(refTabs.current[activeTabIndex]?.offsetLeft ?? 0);
@@ -13207,11 +13251,11 @@ var TabsLegacy_default = DxcTabs;
 // src/tabs/Tabs.tsx
 import { Fragment as Fragment15, jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 var useResize2 = (refTabList) => {
-  const [viewWidth, setViewWidth] = useState34(0);
+  const [viewWidth, setViewWidth] = useState36(0);
   const handleWindowSizeChange = useCallback12(() => {
     setViewWidth(refTabList?.current?.offsetWidth ?? 0);
   }, [refTabList]);
-  useEffect25(() => {
+  useEffect26(() => {
     handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return () => {
@@ -13253,7 +13297,7 @@ var DxcTabs2 = ({
     () => childrenArray.some((child) => isValidElement2(child) && child.props.icon && child.props.label),
     [childrenArray]
   );
-  const [activeTab, setActiveTab] = useState34(() => {
+  const [activeTab, setActiveTab] = useState36(() => {
     const hasActiveChild = childrenArray.some(
       (child) => isValidElement2(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     );
@@ -13262,22 +13306,21 @@ var DxcTabs2 = ({
     ) : childrenArray.find((child) => isValidElement2(child) && !child.props.disabled);
     return isValidElement2(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
-  const [innerFocusIndex, setInnerFocusIndex] = useState34(null);
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState34(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState34(0);
-  const [countClick, setCountClick] = useState34(0);
-  const [totalTabsWidth, setTotalTabsWidth] = useState34(0);
-  const [translateScroll, setTranslateScroll] = useState34(0);
-  const [scrollRightEnabled, setScrollRightEnabled] = useState34(true);
-  const [scrollLeftEnabled, setScrollLeftEnabled] = useState34(false);
-  const [minHeightTabs, setMinHeightTabs] = useState34(0);
+  const [innerFocusIndex, setInnerFocusIndex] = useState36(null);
+  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState36(0);
+  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState36(0);
+  const [totalTabsWidth, setTotalTabsWidth] = useState36(0);
+  const [translateScroll, setTranslateScroll] = useState36(0);
+  const [scrollRightEnabled, setScrollRightEnabled] = useState36(true);
+  const [scrollLeftEnabled, setScrollLeftEnabled] = useState36(false);
+  const [minHeightTabs, setMinHeightTabs] = useState36(0);
   const refTabList = useRef22(null);
   const refTabListContainer = useRef22(null);
   const colorsTheme = useContext50(HalstackContext);
   const viewWidth = useResize2(refTabList);
   const translatedLabels = useContext50(HalstackLanguageContext);
   const enabledIndicator = useMemo20(() => viewWidth < totalTabsWidth, [viewWidth]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (refTabList.current) {
       setTotalTabsWidth(refTabList.current.firstElementChild?.offsetWidth);
       setMinHeightTabs(refTabList.current.offsetHeight + 1);
@@ -13350,7 +13393,7 @@ var DxcTabs2 = ({
       scrollLimitCheck();
     }, 0);
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (refTabList.current)
       setTotalTabsWidth(() => {
         let total = 0;
@@ -13362,8 +13405,10 @@ var DxcTabs2 = ({
         });
         return total;
       });
-    scrollLimitCheck();
-  }, [viewWidth, totalTabsWidth]);
+    setTimeout(() => {
+      scrollLimitCheck();
+    }, 0);
+  }, [viewWidth, totalTabsWidth, activeTab]);
   return children ? /* @__PURE__ */ jsxs56(Fragment15, { children: [
     /* @__PURE__ */ jsx78(ThemeProvider36, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs56(TabsContainer2, { margin, children: [
       /* @__PURE__ */ jsx78(Underline3, {}),
@@ -13532,7 +13577,7 @@ DxcTabs2.Tab = Tab_default2;
 var Tabs_default = DxcTabs2;
 
 // src/tag/Tag.tsx
-import { useContext as useContext51, useState as useState35 } from "react";
+import { useContext as useContext51, useState as useState37 } from "react";
 import styled71, { ThemeProvider as ThemeProvider37 } from "styled-components";
 import { Fragment as Fragment16, jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
 var TagWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx79(Fragment16, { children: condition ? wrapper(children) : children });
@@ -13549,7 +13594,7 @@ var DxcTag = ({
   tabIndex = 0
 }) => {
   const colorsTheme = useContext51(HalstackContext);
-  const [isHovered, changeIsHovered] = useState35(false);
+  const [isHovered, changeIsHovered] = useState37(false);
   return /* @__PURE__ */ jsx79(ThemeProvider37, { theme: colorsTheme.tag, children: /* @__PURE__ */ jsx79(
     StyledDxcTag,
     {
@@ -13660,11 +13705,11 @@ var TagLabel = styled71.div`
 var Tag_default = DxcTag;
 
 // src/textarea/Textarea.tsx
-import { forwardRef as forwardRef18, useContext as useContext52, useEffect as useEffect26, useId as useId20, useRef as useRef23, useState as useState36 } from "react";
+import { forwardRef as forwardRef19, useContext as useContext52, useEffect as useEffect27, useId as useId22, useRef as useRef23, useState as useState38 } from "react";
 import styled72, { ThemeProvider as ThemeProvider38 } from "styled-components";
 import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
 var patternMatch = (pattern, value) => new RegExp(pattern).test(value);
-var DxcTextarea = forwardRef18(
+var DxcTextarea = forwardRef19(
   ({
     label,
     name = "",
@@ -13689,8 +13734,8 @@ var DxcTextarea = forwardRef18(
     tabIndex = 0,
     ariaLabel = "Text area"
   }, ref) => {
-    const [innerValue, setInnerValue] = useState36(defaultValue);
-    const textareaId = `textarea-${useId20()}`;
+    const [innerValue, setInnerValue] = useState38(defaultValue);
+    const textareaId = `textarea-${useId22()}`;
     const colorsTheme = useContext52(HalstackContext);
     const translatedLabels = useContext52(HalstackLanguageContext);
     const textareaRef = useRef23(null);
@@ -13744,7 +13789,7 @@ var DxcTextarea = forwardRef18(
     const handleOnChange = (event) => {
       changeValue(event.target.value);
     };
-    useEffect26(() => {
+    useEffect27(() => {
       if (verticalGrow === "auto" && prevValueRef.current !== (value ?? innerValue) && textareaRef.current) {
         const computedStyle = window.getComputedStyle(textareaRef.current);
         const textareaLineHeight = parseInt(computedStyle.lineHeight || "0", 10);
@@ -13888,24 +13933,24 @@ var ErrorMessageContainer3 = styled72.span`
 var Textarea_default = DxcTextarea;
 
 // src/toast/ToastsQueue.tsx
-import { useCallback as useCallback14, useEffect as useEffect28, useMemo as useMemo21, useState as useState38 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect29, useId as useId23, useMemo as useMemo21, useState as useState40 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import styled74 from "styled-components";
 
 // src/toast/Toast.tsx
-import { memo as memo13, useContext as useContext53, useState as useState37 } from "react";
+import { memo as memo13, useContext as useContext53, useState as useState39 } from "react";
 import styled73, { keyframes } from "styled-components";
 
 // src/utils/useTimeout.tsx
-import { useRef as useRef24, useCallback as useCallback13, useEffect as useEffect27 } from "react";
+import { useRef as useRef24, useCallback as useCallback13, useEffect as useEffect28 } from "react";
 function useTimeout(callback, delay) {
   const savedCallback = useRef24();
   const timerRef = useRef24();
   const clearTimerCallback = useCallback13(() => clearTimeout(timerRef.current), []);
-  useEffect27(() => {
+  useEffect28(() => {
     savedCallback.current = callback;
   }, [callback]);
-  useEffect27(() => {
+  useEffect28(() => {
     function tick() {
       savedCallback.current?.();
     }
@@ -14032,7 +14077,7 @@ var DxcToast = ({
   onClear,
   semantic
 }) => {
-  const [isClosing, setIsClosing] = useState37(false);
+  const [isClosing, setIsClosing] = useState39(false);
   const translatedLabels = useContext53(HalstackLanguageContext);
   const clearClosingAnimationTimer = useTimeout(
     () => {
@@ -14118,24 +14163,26 @@ var generateUniqueToastId = (toasts) => {
   return id;
 };
 var DxcToastsQueue = ({ children, duration = 3e3 }) => {
-  const [toasts, setToasts] = useState38([]);
-  const [isMounted, setIsMounted] = useState38(false);
+  const [toasts, setToasts] = useState40([]);
+  const [isMounted, setIsMounted] = useState40(false);
   const adjustedDuration = useMemo21(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
-  const remove = useCallback14((id) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+  const id = useId23();
+  const remove = useCallback14((id2) => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id2));
   }, []);
   const add = useCallback14(
     (toast, semantic) => {
-      const id = generateUniqueToastId(toasts);
-      setToasts((prevToasts) => [...prevToasts, { id, semantic, ...toast }].slice(-5));
-      return () => remove(id);
+      const id2 = generateUniqueToastId(toasts);
+      setToasts((prevToasts) => [...prevToasts, { id: id2, semantic, ...toast }].slice(-5));
+      return () => remove(id2);
     },
     [duration]
   );
-  useEffect28(() => {
+  useEffect29(() => {
     setIsMounted(true);
   }, []);
   return /* @__PURE__ */ jsxs60(ToastContext_default.Provider, { value: add, children: [
+    /* @__PURE__ */ jsx82("div", { id: `toasts-${id}-portal`, style: { position: "absolute" } }),
     isMounted && createPortal3(
       /* @__PURE__ */ jsx82(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ jsx82(
         Toast_default,
@@ -14148,7 +14195,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
         },
         t.id
       )) }),
-      document.body
+      document.getElementById(`toasts-${id}-portal`) || document.body
     ),
     children
   ] });
@@ -14156,7 +14203,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
 var ToastsQueue_default = DxcToastsQueue;
 
 // src/toggle-group/ToggleGroup.tsx
-import { useContext as useContext54, useId as useId21, useState as useState39 } from "react";
+import { useContext as useContext54, useId as useId24, useState as useState41 } from "react";
 import styled75, { ThemeProvider as ThemeProvider39 } from "styled-components";
 import { jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
 var DxcToggleGroup = ({
@@ -14171,8 +14218,8 @@ var DxcToggleGroup = ({
   multiple = false,
   tabIndex = 0
 }) => {
-  const toggleGroupLabelId = `label-toggle-group-${useId21()}`;
-  const [selectedValue, setSelectedValue] = useState39(defaultValue ?? (multiple ? [] : -1));
+  const toggleGroupLabelId = `label-toggle-group-${useId24()}`;
+  const [selectedValue, setSelectedValue] = useState41(defaultValue ?? (multiple ? [] : -1));
   const colorsTheme = useContext54(HalstackContext);
   const handleToggleChange = (selectedOption) => {
     let newSelectedOptions = [];
@@ -14325,7 +14372,7 @@ var IconContainer7 = styled75.div`
 var ToggleGroup_default = DxcToggleGroup;
 
 // src/wizard/Wizard.tsx
-import { useContext as useContext55, useMemo as useMemo22, useState as useState40 } from "react";
+import { useContext as useContext55, useMemo as useMemo22, useState as useState42 } from "react";
 import styled76, { ThemeProvider as ThemeProvider40 } from "styled-components";
 
 // src/wizard/Icons.tsx
@@ -14500,7 +14547,7 @@ var DxcWizard = ({
   tabIndex = 0
 }) => {
   const colorsTheme = useContext55(HalstackContext);
-  const [innerCurrent, setInnerCurrentStep] = useState40(defaultCurrentStep);
+  const [innerCurrent, setInnerCurrentStep] = useState42(defaultCurrentStep);
   const renderedCurrent = useMemo22(() => currentStep ?? innerCurrent, [currentStep, innerCurrent]);
   const handleStepClick = (newValue) => {
     setInnerCurrentStep(newValue);
@@ -14565,7 +14612,7 @@ export {
   Card_default as DxcCard,
   Checkbox_default as DxcCheckbox,
   Chip_default as DxcChip,
-  DxcContainer,
+  Container_default as DxcContainer,
   DxcContextualMenu,
   DataGrid_default as DxcDataGrid,
   DateInput_default as DxcDateInput,