@dxc-technology/halstack-react 15.2.1 → 15.3.2

package/dist/index.js

@@ -41,7 +41,7 @@ __export(index_exports, {
   DxcCard: () => Card_default,
   DxcCheckbox: () => Checkbox_default,
   DxcChip: () => Chip_default,
-  DxcContainer: () => DxcContainer,
+  DxcContainer: () => Container_default,
   DxcContextualMenu: () => DxcContextualMenu,
   DxcDataGrid: () => DataGrid_default,
   DxcDateInput: () => DateInput_default,
@@ -112,7 +112,7 @@ function styleInject(css2, { insertAt } = {}) {
 styleInject('@import "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1";\n');
 
 // src/accordion/Accordion.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/common/coreTokens.ts
@@ -1998,7 +1998,7 @@ var HalstackProvider = ({ theme, advancedTheme, labels, children }) => {
 };
 
 // src/accordion/AccordionItem.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/icon/Icon.tsx
@@ -2047,6 +2047,7 @@ var Flex = import_styled_components2.default.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};` : ""}
@@ -2056,16 +2057,7 @@ var Flex = import_styled_components2.default.div`
     ${typeof props.$wrap === "string" ? `flex-wrap: ${props.$wrap};` : ""}
   `}
 `;
-var DxcFlex = ({
-  basis,
-  direction,
-  gap,
-  grow,
-  order,
-  shrink,
-  wrap,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+var DxcFlex = ({ basis, direction, fullHeight = false, gap, grow, order, shrink, wrap, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   Flex,
   {
     $basis: basis,
@@ -2075,6 +2067,7 @@ var DxcFlex = ({
     $order: order,
     $shrink: shrink,
     $wrap: wrap,
+    $fullHeight: fullHeight,
     ...props
   }
 );
@@ -2082,6 +2075,7 @@ var Flex_default = DxcFlex;
 
 // src/container/Container.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var getBorderStyles = (direction, borderProperties) => `border-${direction}: ${borderProperties.width ?? ""} ${borderProperties.style ?? ""} ${borderProperties.color ? getCoreColorToken(borderProperties.color) : ""};`;
 var Container = import_styled_components3.default.div`
@@ -2145,12 +2139,15 @@ var Container = import_styled_components3.default.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__ */ (0, import_jsx_runtime4.jsx)(Container, { $display: display, $width: width, $height: height, $overflow: overflow, ...props });
-}
+var DxcContainer = (0, import_react3.forwardRef)(
+  ({ display, width, height, overflow, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { ref, $display: display, $width: width, $height: height, $overflow: overflow, ...props });
+  }
+);
+var Container_default = DxcContainer;
 
 // src/accordion/AccordionItem.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var AccordionItem = ({
   label = "",
@@ -2163,10 +2160,10 @@ var AccordionItem = ({
   children,
   tabIndex = 0
 }) => {
-  const id = (0, import_react3.useId)();
-  const colorsTheme = (0, import_react3.useContext)(HalstackContext);
-  const { activeIndex, handlerActiveChange, index, independent } = (0, import_react3.useContext)(AccordionContext_default) ?? {};
-  const isItemExpanded = (0, import_react3.useMemo)(() => {
+  const id = (0, import_react4.useId)();
+  const colorsTheme = (0, import_react4.useContext)(HalstackContext);
+  const { activeIndex, handlerActiveChange, index, independent } = (0, import_react4.useContext)(AccordionContext_default) ?? {};
+  const isItemExpanded = (0, import_react4.useMemo)(() => {
     return independent ? activeIndex === index : Array.isArray(activeIndex) && index !== void 0 && activeIndex.includes(index);
   }, [independent, activeIndex, index]);
   const handleAccordionState = () => {
@@ -2182,9 +2179,9 @@ var AccordionItem = ({
         tabIndex: disabled ? -1 : tabIndex,
         "aria-expanded": isItemExpanded,
         "aria-controls": `accordion-panel-${id}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DxcContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Flex_default, { gap: "1.5rem", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container_default, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Flex_default, { gap: "1.5rem", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LeftSideContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Flex_default, { gap: "0.75rem", children: [
-            (icon || badge?.position === "before") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OptionalElement, { children: icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconContainer2, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { icon }) : icon }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusContainer, { subLabel, children: disabled ? (0, import_react3.cloneElement)(badge?.element, { color: "grey" }) : badge?.element }) }),
+            (icon || badge?.position === "before") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OptionalElement, { children: icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconContainer2, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { icon }) : icon }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusContainer, { subLabel, children: disabled ? (0, import_react4.cloneElement)(badge?.element, { color: "grey" }) : badge?.element }) }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(LabelsContainer, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionLabel, { disabled, children: label }),
               subLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SubLabel, { disabled, children: subLabel })
@@ -2192,8 +2189,8 @@ var AccordionItem = ({
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(RightSideContainer, { children: [
             assistiveText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AssistiveText, { disabled, subLabel, children: assistiveText }),
-            badge && badge?.position === "after" && !assistiveText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusContainer, { subLabel, children: disabled ? import_react4.default.cloneElement(badge.element, { color: "grey" }) : badge.element }),
-            badge?.position !== "after" && statusLight && !assistiveText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusContainer, { subLabel, children: disabled ? import_react4.default.cloneElement(statusLight, { mode: "default" }) : statusLight }),
+            badge && badge?.position === "after" && !assistiveText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusContainer, { subLabel, children: disabled ? import_react5.default.cloneElement(badge.element, { color: "grey" }) : badge.element }),
+            badge?.position !== "after" && statusLight && !assistiveText && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StatusContainer, { subLabel, children: disabled ? import_react5.default.cloneElement(statusLight, { mode: "default" }) : statusLight }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIndicator, { disabled, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { icon: isItemExpanded ? "expand_less" : "expand_more" }) })
           ] })
         ] }) })
@@ -2331,11 +2328,11 @@ var AccordionItem_default = AccordionItem;
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var DxcAccordion = (props) => {
   const { children, margin, onActiveChange } = props;
-  const colorsTheme = (0, import_react5.useContext)(HalstackContext);
-  const [innerIndexActive, setInnerIndexActive] = (0, import_react5.useState)(
+  const colorsTheme = (0, import_react6.useContext)(HalstackContext);
+  const [innerIndexActive, setInnerIndexActive] = (0, import_react6.useState)(
     props.independent ? props.defaultIndexActive ?? -1 : Array.isArray(props.defaultIndexActive) ? props.defaultIndexActive.filter((i) => i !== void 0) : []
   );
-  const handlerActiveChange = (0, import_react5.useCallback)(
+  const handlerActiveChange = (0, import_react6.useCallback)(
     (index) => {
       if (props.indexActive == null) {
         setInnerIndexActive((prev) => {
@@ -2350,7 +2347,7 @@ var DxcAccordion = (props) => {
     },
     [props.indexActive, props.independent, onActiveChange, innerIndexActive]
   );
-  const contextValue = (0, import_react5.useMemo)(
+  const contextValue = (0, import_react6.useMemo)(
     () => ({
       activeIndex: props.indexActive ?? innerIndexActive,
       handlerActiveChange,
@@ -2358,7 +2355,7 @@ var DxcAccordion = (props) => {
     }),
     [props.indexActive, innerIndexActive, handlerActiveChange, props.independent]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_styled_components5.ThemeProvider, { theme: colorsTheme.accordion, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionContainer2, { margin, children: import_react5.Children.map(children, (accordion, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionContext_default.Provider, { value: { index, ...contextValue }, children: accordion }, `accordion-${index}`)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_styled_components5.ThemeProvider, { theme: colorsTheme.accordion, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionContainer2, { margin, children: import_react6.Children.map(children, (accordion, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionContext_default.Provider, { value: { index, ...contextValue }, children: accordion }, `accordion-${index}`)) }) });
 };
 DxcAccordion.AccordionItem = AccordionItem_default;
 var calculateWidth = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
@@ -2438,21 +2435,21 @@ var Accordion_default = DxcAccordion;
 
 // src/alert/Alert.tsx
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_react11 = require("react");
+var import_react13 = require("react");
 
 // src/button/Button.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/tooltip/Tooltip.tsx
 var import_styled_components6 = __toESM(require("styled-components"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_tooltip = require("@radix-ui/react-tooltip");
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 
 // src/tooltip/TooltipContext.tsx
-var import_react6 = require("react");
-var TooltipContext = (0, import_react6.createContext)(false);
+var import_react7 = require("react");
+var TooltipContext = (0, import_react7.createContext)(false);
 
 // src/tooltip/Tooltip.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -2559,7 +2556,7 @@ var Tooltip = ({
   position = "bottom",
   children
 }) => {
-  const hasTooltip = (0, import_react7.useContext)(TooltipContext);
+  const hasTooltip = (0, import_react8.useContext)(TooltipContext);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContext.Provider, { value: true, children: label && !hasTooltip ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_tooltip2.Provider, { delayDuration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_tooltip.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_tooltip.Trigger, { asChild: true, children: hasAdditionalContainer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTriggerContainer, { children }) : children }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledTooltipContent, { side: position, sideOffset: 8, children: [
@@ -2590,7 +2587,7 @@ var DxcButton = ({
   size = { height: "large", width: "fitContent" },
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react8.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react9.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_styled_components7.ThemeProvider, { theme: colorsTheme.button, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     Button,
     {
@@ -3016,7 +3013,7 @@ var StyledDivider = import_styled_components8.default.hr`
 var Divider_default = DxcDivider;
 
 // src/action-icon/ActionIcon.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ActionIcon = import_styled_components9.default.button`
@@ -3056,7 +3053,7 @@ var ActionIcon = import_styled_components9.default.button`
     height: 16px;
   }
 `;
-var ActionIcon_default = (0, import_react9.forwardRef)(
+var ActionIcon_default = (0, import_react10.forwardRef)(
   ({ disabled = false, title, icon, onClick, tabIndex }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     ActionIcon,
     {
@@ -3079,7 +3076,7 @@ var import_react_dom = require("react-dom");
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/utils/FocusLock.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var not = {
   negTabIndex: ':not([tabindex^="-"])',
@@ -3112,8 +3109,8 @@ var radixPortalContains = (activeElement) => {
   return Array.prototype.slice.call(radixPortals).some((portal) => portal.contains(activeElement)) || Array.prototype.slice.call(radixPoppers).some((popper) => popper.contains(activeElement));
 };
 var useFocusableElements = (ref) => {
-  const [focusableElements, setFocusableElements] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
+  const [focusableElements, setFocusableElements] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
     if (ref.current != null) {
       setFocusableElements(getFocusableElements(ref.current));
       const observer = new MutationObserver(() => {
@@ -3128,10 +3125,10 @@ var useFocusableElements = (ref) => {
   return focusableElements;
 };
 var FocusLock = ({ children }) => {
-  const childrenContainerRef = (0, import_react10.useRef)(null);
+  const childrenContainerRef = (0, import_react11.useRef)(null);
   const focusableElements = useFocusableElements(childrenContainerRef);
-  const initialFocus = (0, import_react10.useRef)(false);
-  const focusFirst = (0, import_react10.useCallback)(() => {
+  const initialFocus = (0, import_react11.useRef)(false);
+  const focusFirst = (0, import_react11.useCallback)(() => {
     if (focusableElements != null) {
       if (focusableElements.length === 0) childrenContainerRef.current?.focus();
       else if (focusableElements.length > 0) focusableElements.some((element) => attemptFocus(element));
@@ -3143,13 +3140,13 @@ var FocusLock = ({ children }) => {
   const focusLock = (event) => {
     if (event.key === "Tab" && focusableElements?.length === 0) event.preventDefault();
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (focusableElements != null && !initialFocus.current) {
       initialFocus.current = true;
       focusFirst();
     }
   }, [focusableElements, focusFirst]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const focusGuardHandler = (event) => {
       const target = event.relatedTarget;
       const container = childrenContainerRef.current;
@@ -3179,6 +3176,7 @@ var FocusLock = ({ children }) => {
 var FocusLock_default = FocusLock;
 
 // src/alert/ModalAlertWrapper.tsx
+var import_react12 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var BodyStyle = import_styled_components10.createGlobalStyle`
   body {
@@ -3211,16 +3209,24 @@ var ModalAlertContainer = import_styled_components10.default.div`
     min-width: 92%;
   }
 `;
-var ModalAlertWrapper = ({ condition, onClose, children }) => condition ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BodyStyle, {}),
-  (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Modal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Overlay, { onClick: onClose }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalAlertContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FocusLock_default, { children }) })
-    ] }),
-    document.body
-  )
-] }) : children;
+var ModalAlertWrapper = ({ condition, onClose, children }) => {
+  const id = (0, import_react12.useId)();
+  const [portalContainer, setPortalContainer] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
+    setPortalContainer(document.getElementById(`dialog-${id}-portal`));
+  }, []);
+  return condition ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BodyStyle, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: `dialog-${id}-portal`, style: { position: "absolute" } }),
+    portalContainer && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Modal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Overlay, { onClick: onClose }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ModalAlertContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FocusLock_default, { children }) })
+      ] }),
+      portalContainer
+    )
+  ] }) : children;
+};
 var ModalAlertWrapper_default = ModalAlertWrapper;
 
 // src/alert/Alert.tsx
@@ -3270,7 +3276,7 @@ var NavigationText = import_styled_components11.default.span`
   ${typographyStyles}
   white-space: nowrap;
 `;
-var Actions = (0, import_react11.memo)(
+var Actions = (0, import_react13.memo)(
   ({
     mode,
     primaryAction,
@@ -3321,15 +3327,15 @@ function DxcAlert({
   semantic = "info",
   title = ""
 }) {
-  const [messages, setMessages] = (0, import_react11.useState)(Array.isArray(message) ? message : [message]);
-  const [currentIndex, setCurrentIndex] = (0, import_react11.useState)(0);
-  const id = (0, import_react11.useId)();
-  const colorsTheme = (0, import_react11.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react11.useContext)(HalstackLanguageContext);
+  const [messages, setMessages] = (0, import_react13.useState)(Array.isArray(message) ? message : [message]);
+  const [currentIndex, setCurrentIndex] = (0, import_react13.useState)(0);
+  const id = (0, import_react13.useId)();
+  const colorsTheme = (0, import_react13.useContext)(HalstackContext);
+  const translatedLabels = (0, import_react13.useContext)(HalstackLanguageContext);
   const handleNextOnClick = () => {
     setCurrentIndex((prevIndex) => prevIndex < messages.length ? prevIndex + 1 : prevIndex);
   };
-  const handlePrevOnClick = (0, import_react11.useCallback)(() => {
+  const handlePrevOnClick = (0, import_react13.useCallback)(() => {
     setCurrentIndex((prevIndex) => prevIndex > 0 ? prevIndex - 1 : prevIndex);
   }, []);
   const handleOnClose = () => {
@@ -3338,7 +3344,7 @@ function DxcAlert({
       setMessages((prevMessages) => prevMessages.filter((_, index) => index !== currentIndex));
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (currentIndex === messages.length) handlePrevOnClick();
   }, [currentIndex, messages, handlePrevOnClick]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_styled_components11.ThemeProvider, { theme: colorsTheme.alert, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalAlertWrapper_default, { condition: mode === "modal", onClose: handleOnClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -3427,11 +3433,11 @@ function DxcAlert({
 }
 
 // src/layout/ApplicationLayout.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/footer/Footer.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
 
 // src/footer/Icons.tsx
@@ -3634,9 +3640,9 @@ var DxcFooter = ({
   tabIndex = 0,
   mode = "default"
 }) => {
-  const colorsTheme = (0, import_react12.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react12.useContext)(HalstackLanguageContext);
-  const footerLogo = (0, import_react12.useMemo)(
+  const colorsTheme = (0, import_react14.useContext)(HalstackContext);
+  const translatedLabels = (0, import_react14.useContext)(HalstackLanguageContext);
+  const footerLogo = (0, import_react14.useMemo)(
     () => !colorsTheme.footer.logo ? mode === "default" ? dxcLogo : dxcSmallLogo : typeof colorsTheme.footer.logo === "string" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LogoImg, { mode, alt: translatedLabels.formFields.logoAlternativeText, src: colorsTheme.footer.logo }) : colorsTheme.footer.logo,
     [colorsTheme, translatedLabels]
   );
@@ -3783,19 +3789,19 @@ var BottomLink = import_styled_components12.default.a`
 var Footer_default = DxcFooter;
 
 // src/header/Header.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/dropdown/Dropdown.tsx
 var Popover = __toESM(require("@radix-ui/react-popover"));
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/utils/useWidth.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var useWidth = (target) => {
-  const [width, setWidth] = (0, import_react13.useState)(0);
-  (0, import_react13.useLayoutEffect)(() => {
+  const [width, setWidth] = (0, import_react15.useState)(0);
+  (0, import_react15.useLayoutEffect)(() => {
     if (target != null) {
       setWidth(target.getBoundingClientRect().width);
       const triggerObserver = new ResizeObserver((entries) => {
@@ -3815,11 +3821,11 @@ var useWidth = (target) => {
 var useWidth_default = useWidth;
 
 // src/dropdown/DropdownMenu.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/dropdown/DropdownMenuItem.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var DropdownMenuItem = ({
@@ -3884,11 +3890,11 @@ var DropdownMenuItemIcon = import_styled_components13.default.div`
     height: ${(props) => props.theme.optionIconSize};
   }
 `;
-var DropdownMenuItem_default = (0, import_react14.memo)(DropdownMenuItem);
+var DropdownMenuItem_default = (0, import_react16.memo)(DropdownMenuItem);
 
 // src/dropdown/DropdownMenu.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var DropdownMenu = (0, import_react15.forwardRef)(
+var DropdownMenu = (0, import_react17.forwardRef)(
   ({ id, dropdownTriggerId, iconsPosition, visualFocusIndex, menuItemOnClick, onKeyDown, options, styles }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     DropdownMenuContainer,
     {
@@ -3948,7 +3954,7 @@ var DropdownMenuContainer = import_styled_components14.default.ul`
     border-radius: 6px;
   }
 `;
-var DropdownMenu_default = (0, import_react15.memo)(DropdownMenu);
+var DropdownMenu_default = (0, import_react17.memo)(DropdownMenu);
 
 // src/dropdown/Dropdown.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -3967,14 +3973,14 @@ var DxcDropdown = ({
   tabIndex = 0,
   title
 }) => {
-  const id = (0, import_react16.useId)();
+  const id = (0, import_react18.useId)();
   const triggerId = `trigger-${id}`;
   const menuId = `menu-${id}`;
-  const [isOpen, changeIsOpen] = (0, import_react16.useState)(false);
-  const [visualFocusIndex, setVisualFocusIndex] = (0, import_react16.useState)(0);
-  const colorsTheme = (0, import_react16.useContext)(HalstackContext);
-  const triggerRef = (0, import_react16.useRef)(null);
-  const menuRef = (0, import_react16.useRef)(null);
+  const [isOpen, changeIsOpen] = (0, import_react18.useState)(false);
+  const [visualFocusIndex, setVisualFocusIndex] = (0, import_react18.useState)(0);
+  const colorsTheme = (0, import_react18.useContext)(HalstackContext);
+  const triggerRef = (0, import_react18.useRef)(null);
+  const menuRef = (0, import_react18.useRef)(null);
   const width = useWidth_default(triggerRef.current);
   const handleOnOpenMenu = () => {
     changeIsOpen(true);
@@ -3983,7 +3989,7 @@ var DxcDropdown = ({
     changeIsOpen(false);
     setVisualFocusIndex(0);
   };
-  const handleMenuItemOnClick = (0, import_react16.useCallback)(
+  const handleMenuItemOnClick = (0, import_react18.useCallback)(
     (value) => {
       if (value) onSelectOption(value);
       handleOnCloseMenu();
@@ -4030,7 +4036,7 @@ var DxcDropdown = ({
       return index;
     });
   };
-  const handleMenuOnKeyDown = (0, import_react16.useCallback)(
+  const handleMenuOnKeyDown = (0, import_react18.useCallback)(
     (event) => {
       switch (event.key) {
         case "Up":
@@ -4077,79 +4083,82 @@ var DxcDropdown = ({
     },
     [onSelectOption, visualFocusIndex, options]
   );
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const visualFocusedMenuItem = menuRef.current?.querySelectorAll("[role='menuitem']")[visualFocusIndex];
     visualFocusedMenuItem?.scrollIntoView?.({
       block: "nearest",
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_styled_components15.ThemeProvider, { theme: colorsTheme.dropdown, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    DropdownContainer,
-    {
-      onMouseEnter: !disabled && expandOnHover ? handleOnOpenMenu : void 0,
-      onMouseLeave: !disabled && expandOnHover ? handleOnCloseMenu : void 0,
-      onBlur: !disabled ? handleOnBlur : void 0,
-      margin,
-      size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover.Root, { open: isOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          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__ */ (0, import_jsx_runtime18.jsxs)(DropdownTriggerContent, { children: [
-                label && iconPosition === "after" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownTriggerLabel, { children: label }),
-                icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  DropdownTriggerIcon,
-                  {
-                    disabled,
-                    role: typeof icon === "string" ? void 0 : "img",
-                    "aria-hidden": true,
-                    children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { icon }) : icon
-                  }
-                ),
-                label && iconPosition === "before" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownTriggerLabel, { children: label })
-              ] }),
-              !caretHidden && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CaretIcon, { disabled, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { icon: isOpen ? "arrow_drop_up" : "arrow_drop_down" }),
-                " "
-              ] })
-            ]
-          }
-        ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover.Content, { asChild: true, sideOffset: 1, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          DropdownMenu_default,
-          {
-            id: menuId,
-            dropdownTriggerId: triggerId,
-            options,
-            iconsPosition: optionsIconPosition,
-            visualFocusIndex,
-            menuItemOnClick: handleMenuItemOnClick,
-            onKeyDown: handleMenuOnKeyDown,
-            styles: { width, zIndex: "310" },
-            ref: menuRef
-          }
-        ) }) })
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_styled_components15.ThemeProvider, { theme: colorsTheme.dropdown, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      DropdownContainer,
+      {
+        onMouseEnter: !disabled && expandOnHover ? handleOnOpenMenu : void 0,
+        onMouseLeave: !disabled && expandOnHover ? handleOnCloseMenu : void 0,
+        onBlur: !disabled ? handleOnBlur : void 0,
+        margin,
+        size,
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Popover.Root, { open: isOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            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__ */ (0, import_jsx_runtime18.jsxs)(DropdownTriggerContent, { children: [
+                  label && iconPosition === "after" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownTriggerLabel, { children: label }),
+                  icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    DropdownTriggerIcon,
+                    {
+                      disabled,
+                      role: typeof icon === "string" ? void 0 : "img",
+                      "aria-hidden": true,
+                      children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { icon }) : icon
+                    }
+                  ),
+                  label && iconPosition === "before" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownTriggerLabel, { children: label })
+                ] }),
+                !caretHidden && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(CaretIcon, { disabled, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { icon: isOpen ? "arrow_drop_up" : "arrow_drop_down" }),
+                  " "
+                ] })
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover.Portal, { container: document.getElementById(`${id}-portal`), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover.Content, { asChild: true, sideOffset: 1, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            DropdownMenu_default,
+            {
+              id: menuId,
+              dropdownTriggerId: triggerId,
+              options,
+              iconsPosition: optionsIconPosition,
+              visualFocusIndex,
+              menuItemOnClick: handleMenuItemOnClick,
+              onKeyDown: handleMenuOnKeyDown,
+              styles: { width, zIndex: "320" },
+              ref: menuRef
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id: `${id}-portal`, style: { position: "absolute" } })
+  ] });
 };
 var sizes = {
   small: "60px",
@@ -4240,7 +4249,7 @@ var CaretIcon = import_styled_components15.default.span`
 var Dropdown_default = DxcDropdown;
 
 // src/header/Header.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Dropdown = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(HeaderDropdown, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dropdown_default, { ...props }) });
 var getLogoElement = (themeInput, logoLabel) => {
@@ -4278,11 +4287,11 @@ var DxcHeader = ({
   margin,
   tabIndex = 0
 }) => {
-  const [isResponsive, setIsResponsive] = (0, import_react17.useState)(false);
-  const [isMenuVisible, setIsMenuVisible] = (0, import_react17.useState)(false);
-  const colorsTheme = (0, import_react18.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react18.useContext)(HalstackLanguageContext);
-  const ref = (0, import_react17.useRef)(null);
+  const [isResponsive, setIsResponsive] = (0, import_react19.useState)(false);
+  const [isMenuVisible, setIsMenuVisible] = (0, import_react19.useState)(false);
+  const colorsTheme = (0, import_react20.useContext)(HalstackContext);
+  const translatedLabels = (0, import_react20.useContext)(HalstackLanguageContext);
+  const ref = (0, import_react19.useRef)(null);
   const handleMenu = () => {
     if (isResponsive && !isMenuVisible) {
       setIsMenuVisible(!isMenuVisible);
@@ -4290,15 +4299,15 @@ var DxcHeader = ({
       setIsMenuVisible(!isMenuVisible);
     }
   };
-  const headerLogo = (0, import_react17.useMemo)(
+  const headerLogo = (0, import_react19.useMemo)(
     () => getLogoElement(colorsTheme.header.logo, translatedLabels.formFields.logoAlternativeText),
     [colorsTheme, translatedLabels]
   );
-  const headerResponsiveLogo = (0, import_react17.useMemo)(
+  const headerResponsiveLogo = (0, import_react19.useMemo)(
     () => getLogoElement(colorsTheme.header.logoResponsive, translatedLabels.formFields.logoAlternativeText),
     [colorsTheme, translatedLabels]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
     };
@@ -4308,7 +4317,7 @@ var DxcHeader = ({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isResponsive) {
       setIsMenuVisible(false);
     }
@@ -4505,7 +4514,7 @@ var Overlay2 = import_styled_components16.default.div`
 var Header_default = DxcHeader;
 
 // src/sidenav/Sidenav.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 
 // src/bleed/Bleed.tsx
@@ -4535,20 +4544,20 @@ var Bleed = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Bleed_default = Bleed;
 
 // src/sidenav/SidenavContext.tsx
-var import_react19 = require("react");
-var SidenavContext = (0, import_react19.createContext)(null);
-var GroupContext = (0, import_react19.createContext)(null);
+var import_react21 = require("react");
+var SidenavContext = (0, import_react21.createContext)(null);
+var GroupContext = (0, import_react21.createContext)(null);
 var SidenavContextProvider = SidenavContext.Provider;
 var GroupContextProvider = GroupContext.Provider;
 var useResponsiveSidenavVisibility = () => {
-  const changeResponsiveSidenavVisibility = (0, import_react19.useContext)(SidenavContext);
+  const changeResponsiveSidenavVisibility = (0, import_react21.useContext)(SidenavContext);
   return changeResponsiveSidenavVisibility;
 };
 
 // src/sidenav/Sidenav.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var DxcSidenav = ({ title, children }) => {
-  const colorsTheme = (0, import_react20.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react22.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_styled_components18.ThemeProvider, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SidenavContainer, { children: [
     title,
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Flex_default, { direction: "column", gap: "1rem", children })
@@ -4560,8 +4569,8 @@ var Section = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(i
   /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Divider, {})
 ] });
 var Group = ({ title, collapsable = false, icon, children }) => {
-  const [collapsed, setCollapsed] = (0, import_react20.useState)(false);
-  const [isSelected, changeIsSelected] = (0, import_react20.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react22.useState)(false);
+  const [isSelected, changeIsSelected] = (0, import_react22.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GroupContextProvider, { value: changeIsSelected, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SidenavGroup, { children: [
     collapsable && title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       SidenavGroupTitleButton,
@@ -4584,15 +4593,15 @@ var Group = ({ title, collapsable = false, icon, children }) => {
     !collapsed && children
   ] }) });
 };
-var Link = (0, import_react20.forwardRef)(
+var Link = (0, import_react22.forwardRef)(
   ({ href, newWindow = false, selected = false, icon, onClick, tabIndex = 0, children, ...otherProps }, ref) => {
-    const changeIsGroupSelected = (0, import_react20.useContext)(GroupContext);
+    const changeIsGroupSelected = (0, import_react22.useContext)(GroupContext);
     const setIsSidenavVisibleResponsive = useResponsiveSidenavVisibility();
     const handleClick = ($event) => {
       onClick?.($event);
       setIsSidenavVisibleResponsive?.(false);
     };
-    (0, import_react20.useEffect)(() => {
+    (0, import_react22.useEffect)(() => {
       changeIsGroupSelected?.((isGroupSelected2) => !isGroupSelected2 ? selected : isGroupSelected2);
     }, [selected, changeIsGroupSelected]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -4766,7 +4775,7 @@ DxcSidenav.Title = Title2;
 var Sidenav_default = DxcSidenav;
 
 // src/layout/utils.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/layout/Icons.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -4853,10 +4862,10 @@ var socialLinks = [
     title: "Facebook"
   }
 ];
-var findChildType = (children, childType) => import_react21.Children.toArray(children).find((child) => (0, import_react21.isValidElement)(child) && child.type === childType);
+var findChildType = (children, childType) => import_react23.Children.toArray(children).find((child) => (0, import_react23.isValidElement)(child) && child.type === childType);
 var useResponsive = (breakpoint) => {
-  const [isResponsive, setIsResponsive] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [isResponsive, setIsResponsive] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${breakpoint}rem)`).matches);
     };
@@ -4968,14 +4977,14 @@ var DxcApplicationLayout = ({
   footer,
   children
 }) => {
-  const [isSidenavVisibleResponsive, setIsSidenavVisibleResponsive] = (0, import_react22.useState)(false);
+  const [isSidenavVisibleResponsive, setIsSidenavVisibleResponsive] = (0, import_react24.useState)(false);
   const isResponsive = useResponsive(responsiveSizes.large);
-  const ref = (0, import_react22.useRef)(null);
-  const translatedLabels = (0, import_react22.useContext)(HalstackLanguageContext);
+  const ref = (0, import_react24.useRef)(null);
+  const translatedLabels = (0, import_react24.useContext)(HalstackLanguageContext);
   const handleSidenavVisibility = () => {
     setIsSidenavVisibleResponsive((currentIsSidenavVisibleResponsive) => !currentIsSidenavVisibleResponsive);
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!isResponsive) {
       setIsSidenavVisibleResponsive(false);
     }
@@ -5144,7 +5153,7 @@ var Label = import_styled_components20.default.span`
 var Badge_default = DxcBadge;
 
 // src/breadcrumbs/Breadcrumbs.tsx
-var import_react24 = require("react");
+var import_react26 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/breadcrumbs/dropdownTheme.ts
@@ -5204,11 +5213,11 @@ var dropdownTheme_default = {
 };
 
 // src/breadcrumbs/Item.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Item = ({ isCurrentPage = false, href, label, onClick }) => {
-  const currentItemRef = (0, import_react23.useRef)(null);
+  const currentItemRef = (0, import_react25.useRef)(null);
   const handleOnMouseEnter = (event) => {
     const labelContainer = event.currentTarget;
     const optionElement = currentItemRef.current;
@@ -5217,10 +5226,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__ */ (0, import_jsx_runtime25.jsx)(ListItem, { "aria-current": isCurrentPage ? "page" : void 0, isCurrentPage, children: isCurrentPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CurrentPage, { ref: currentItemRef, onMouseEnter: handleOnMouseEnter, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Link2, { href, onClick: handleOnClick, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Text, { children: label }) }) });
 };
@@ -5270,7 +5278,7 @@ var DxcBreadcrumbs = ({
   onItemClick,
   showRoot = true
 }) => {
-  const handleOnSelectOption = (0, import_react24.useCallback)(
+  const handleOnSelectOption = (0, import_react26.useCallback)(
     (href) => {
       if (onItemClick) {
         onItemClick(href);
@@ -5329,16 +5337,16 @@ var OrderedList = import_styled_components22.default.ol`
 var Breadcrumbs_default = DxcBreadcrumbs;
 
 // src/bulleted-list/BulletedList.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/typography/Typography.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
 
 // src/typography/TypographyContext.tsx
-var import_react25 = require("react");
-var TypographyContext_default = (0, import_react25.createContext)({
+var import_react27 = require("react");
+var TypographyContext_default = (0, import_react27.createContext)({
   as: "span",
   color: "#000000",
   display: "inline",
@@ -5373,8 +5381,8 @@ var Typography = import_styled_components23.default.span`
   overflow: ${({ textOverflow }) => textOverflow !== "unset" ? "hidden" : "visible"};
 `;
 function DxcTypography({ children, ...props }) {
-  const componentContext = (0, import_react26.useContext)(TypographyContext_default);
-  const contextValue = (0, import_react26.useMemo)(
+  const componentContext = (0, import_react28.useContext)(TypographyContext_default);
+  const contextValue = (0, import_react28.useMemo)(
     () => ({
       ...componentContext,
       ...props
@@ -5388,8 +5396,8 @@ function DxcTypography({ children, ...props }) {
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var BulletedListItem = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children });
 var DxcBulletedList = ({ children, type = "disc", icon = "" }) => {
-  const colorsTheme = (0, import_react27.useContext)(HalstackContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_styled_components24.ThemeProvider, { theme: colorsTheme.bulletedList, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flex_default, { direction: "column", as: type === "number" ? "ol" : "ul", gap: "0.125rem", children: import_react27.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListItem2, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(GeneralContent, { children: [
+  const colorsTheme = (0, import_react29.useContext)(HalstackContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_styled_components24.ThemeProvider, { theme: colorsTheme.bulletedList, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flex_default, { direction: "column", as: type === "number" ? "ol" : "ul", gap: "0.125rem", children: import_react29.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ListItem2, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(GeneralContent, { children: [
     type === "number" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Number2, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: [
       index + 1,
       "."
@@ -5468,7 +5476,7 @@ var ListItem2 = import_styled_components24.default.li`
 var BulletedList_default = DxcBulletedList;
 
 // src/card/Card.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_styled_components25 = __toESM(require("styled-components"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var DxcCard = ({
@@ -5484,8 +5492,8 @@ var DxcCard = ({
   outlined = true,
   children
 }) => {
-  const colorsTheme = (0, import_react28.useContext)(HalstackContext);
-  const [isHovered, changeIsHovered] = (0, import_react28.useState)(false);
+  const colorsTheme = (0, import_react30.useContext)(HalstackContext);
+  const [isHovered, changeIsHovered] = (0, import_react30.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_styled_components25.ThemeProvider, { theme: colorsTheme.card, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Card,
     {
@@ -5551,11 +5559,11 @@ var CardContent = import_styled_components25.default.div`
 var Card_default = DxcCard;
 
 // src/checkbox/Checkbox.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_styled_components26 = __toESM(require("styled-components"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var checkedIcon = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { fill: "currentColor", focusable: "false", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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 = (0, import_react29.forwardRef)(
+var DxcCheckbox = (0, import_react31.forwardRef)(
   ({
     checked,
     defaultChecked = false,
@@ -5572,11 +5580,11 @@ var DxcCheckbox = (0, import_react29.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Checkbox"
   }, ref) => {
-    const labelId = `label-checkbox-${(0, import_react29.useId)()}`;
-    const [innerChecked, setInnerChecked] = (0, import_react29.useState)(defaultChecked);
-    const checkboxRef = (0, import_react29.useRef)(null);
-    const colorsTheme = (0, import_react29.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react29.useContext)(HalstackLanguageContext);
+    const labelId = `label-checkbox-${(0, import_react31.useId)()}`;
+    const [innerChecked, setInnerChecked] = (0, import_react31.useState)(defaultChecked);
+    const checkboxRef = (0, import_react31.useRef)(null);
+    const colorsTheme = (0, import_react31.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react31.useContext)(HalstackLanguageContext);
     const handleCheckboxChange = () => {
       if (!disabled && !readOnly) {
         if (document.activeElement !== checkboxRef.current) {
@@ -5773,7 +5781,7 @@ var MainContainer2 = import_styled_components26.default.div`
 var Checkbox_default = DxcCheckbox;
 
 // src/chip/Chip.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_styled_components27 = __toESM(require("styled-components"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var DxcChip = ({
@@ -5786,7 +5794,7 @@ var DxcChip = ({
   margin,
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react30.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react32.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_styled_components27.ThemeProvider, { theme: colorsTheme.chip, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Chip, { disabled, margin, children: [
     prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       IconContainer5,
@@ -5878,22 +5886,22 @@ var IconContainer5 = import_styled_components27.default.div`
 var Chip_default = DxcChip;
 
 // src/contextual-menu/ContextualMenu.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_styled_components31 = __toESM(require("styled-components"));
 
 // src/contextual-menu/MenuItem.tsx
 var import_styled_components29 = __toESM(require("styled-components"));
 
 // src/contextual-menu/GroupItem.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // src/contextual-menu/ItemAction.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_styled_components28 = __toESM(require("styled-components"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ItemAction = ({ badge, collapseIcon, icon, label, depthLevel, ...props }) => {
-  const [hasTooltip, setHasTooltip] = (0, import_react31.useState)(false);
-  const modifiedBadge = badge && (0, import_react31.cloneElement)(badge, { size: "small" });
+  const [hasTooltip, setHasTooltip] = (0, import_react33.useState)(false);
+  const modifiedBadge = badge && (0, import_react33.cloneElement)(badge, { size: "small" });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Action, { depthLevel, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Label2, { children: [
       collapseIcon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon2, { children: collapseIcon }),
@@ -5969,8 +5977,8 @@ var Text2 = import_styled_components28.default.span`
 var ItemAction_default = ItemAction;
 
 // src/contextual-menu/ContextualMenuContext.tsx
-var import_react32 = require("react");
-var ContextualMenuContext_default = (0, import_react32.createContext)(null);
+var import_react34 = require("react");
+var ContextualMenuContext_default = (0, import_react34.createContext)(null);
 
 // src/contextual-menu/GroupItem.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
@@ -5980,10 +5988,10 @@ var isGroupSelected = (items, selectedItemId) => items.some((item) => {
   else return item.selectedByDefault;
 });
 var GroupItem = ({ items, ...props }) => {
-  const groupMenuId = `group-menu-${(0, import_react33.useId)()}`;
-  const { selectedItemId } = (0, import_react33.useContext)(ContextualMenuContext_default) ?? {};
-  const groupSelected = (0, import_react33.useMemo)(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
-  const [isOpen, setIsOpen] = (0, import_react33.useState)(groupSelected && selectedItemId === -1);
+  const groupMenuId = `group-menu-${(0, import_react35.useId)()}`;
+  const { selectedItemId } = (0, import_react35.useContext)(ContextualMenuContext_default) ?? {};
+  const groupSelected = (0, import_react35.useMemo)(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(groupSelected && selectedItemId === -1);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       ItemAction_default,
@@ -6002,18 +6010,18 @@ var GroupItem = ({ items, ...props }) => {
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SubMenu, { id: groupMenuId, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuItem_default, { item, depthLevel: props.depthLevel + 1 }, `${item.label}-${index}`)) })
   ] });
 };
-var GroupItem_default = (0, import_react33.memo)(GroupItem);
+var GroupItem_default = (0, import_react35.memo)(GroupItem);
 
 // src/contextual-menu/SingleItem.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var SingleItem = ({ id, onSelect, selectedByDefault = false, ...props }) => {
-  const { selectedItemId, setSelectedItemId } = (0, import_react34.useContext)(ContextualMenuContext_default) ?? {};
+  const { selectedItemId, setSelectedItemId } = (0, import_react36.useContext)(ContextualMenuContext_default) ?? {};
   const handleClick = () => {
     setSelectedItemId?.(id);
     onSelect?.();
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (selectedItemId === -1 && selectedByDefault) {
       setSelectedItemId?.(id);
     }
@@ -6041,10 +6049,10 @@ var MenuItem_default = MenuItem;
 
 // src/contextual-menu/Section.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var Section2 = ({ section, index, length }) => {
-  const id = `section-${(0, import_react35.useId)()}`;
+  const id = `section-${(0, import_react37.useId)()}`;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { "aria-label": section.title ?? id, "aria-labelledby": id, children: [
     section.title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Title3, { id, children: section.title }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SubMenu, { children: section.items.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MenuItem_default, { item }, `${item.label}-${index2}`)) }),
@@ -6111,13 +6119,13 @@ var addIdToItems = (items) => {
 };
 var SubMenu = ({ children, id }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledSubMenu, { id, role: "menu", children });
 function DxcContextualMenu({ items }) {
-  const [selectedItemId, setSelectedItemId] = (0, import_react36.useState)(-1);
-  const contextualMenuRef = (0, import_react36.useRef)(null);
-  const itemsWithId = (0, import_react36.useMemo)(() => addIdToItems(items), [items]);
-  const contextValue = (0, import_react36.useMemo)(() => ({ selectedItemId, setSelectedItemId }), [selectedItemId, setSelectedItemId]);
-  const colorsTheme = (0, import_react36.useContext)(HalstackContext);
-  const [firstUpdate, setFirstUpdate] = (0, import_react36.useState)(true);
-  (0, import_react36.useLayoutEffect)(() => {
+  const [selectedItemId, setSelectedItemId] = (0, import_react38.useState)(-1);
+  const contextualMenuRef = (0, import_react38.useRef)(null);
+  const itemsWithId = (0, import_react38.useMemo)(() => addIdToItems(items), [items]);
+  const contextValue = (0, import_react38.useMemo)(() => ({ selectedItemId, setSelectedItemId }), [selectedItemId, setSelectedItemId]);
+  const colorsTheme = (0, import_react38.useContext)(HalstackContext);
+  const [firstUpdate, setFirstUpdate] = (0, import_react38.useState)(true);
+  (0, import_react38.useLayoutEffect)(() => {
     if (selectedItemId !== -1 && firstUpdate) {
       const contextualMenuEl = contextualMenuRef.current;
       const selectedItemEl = contextualMenuEl?.querySelector("[aria-pressed='true']");
@@ -6131,17 +6139,17 @@ function DxcContextualMenu({ items }) {
 }
 
 // src/data-grid/DataGrid.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_react_data_grid2 = __toESM(require("react-data-grid"));
 var import_styled_components38 = __toESM(require("styled-components"));
 var import_styles = require("react-data-grid/lib/styles.css");
 
 // src/data-grid/utils.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_react_data_grid = require("react-data-grid");
 
 // src/spinner/Spinner.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_styled_components32 = __toESM(require("styled-components"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var DxcSpinner = ({
@@ -6152,9 +6160,9 @@ var DxcSpinner = ({
   margin,
   ariaLabel = "Spinner"
 }) => {
-  const labelId = (0, import_react37.useId)();
-  const colorsTheme = (0, import_react37.useContext)(HalstackContext);
-  const determinated = (0, import_react37.useMemo)(() => value != null && value >= 0 && value <= 100, [value]);
+  const labelId = (0, import_react39.useId)();
+  const colorsTheme = (0, import_react39.useContext)(HalstackContext);
+  const determinated = (0, import_react39.useMemo)(() => value != null && value >= 0 && value <= 100, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_styled_components32.ThemeProvider, { theme: colorsTheme.spinner, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DXCSpinner, { margin, mode, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(SpinnerContainer, { mode, children: [
     mode === "overlay" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BackOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BackgroundSpinner, { children: mode === "small" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SVGBackground, { viewBox: "0 0 16 16", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CircleBackground, { cx: "8", cy: "8", r: "6", mode }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SVGBackground, { viewBox: "0 0 140 140", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CircleBackground, { cx: "70", cy: "70", r: "65", mode }) }) }),
@@ -6412,7 +6420,7 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
   }
 );
 var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender, childrenTrigger) => {
-  const [loading, setLoading] = (0, import_react38.useState)(false);
+  const [loading, setLoading] = (0, import_react40.useState)(false);
   const onClick = async () => {
     if (loading) return;
     if (!triggerRow.visibleChildren) {
@@ -6691,21 +6699,21 @@ var getPaginatedNodes = (rows, uniqueRowId, start, end) => {
 };
 
 // src/paginator/Paginator.tsx
-var import_react42 = require("react");
+var import_react44 = require("react");
 var import_styled_components36 = __toESM(require("styled-components"));
 
 // src/select/Select.tsx
 var Popover2 = __toESM(require("@radix-ui/react-popover"));
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_styled_components35 = __toESM(require("styled-components"));
 
 // src/select/Listbox.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_styled_components34 = __toESM(require("styled-components"));
 
 // src/select/ListOption.tsx
 var import_styled_components33 = __toESM(require("styled-components"));
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var ListOption = ({
   id,
@@ -6717,7 +6725,7 @@ var ListOption = ({
   isLastOption,
   isSelected
 }) => {
-  const [hasTooltip, setHasTooltip] = (0, import_react39.useState)(false);
+  const [hasTooltip, setHasTooltip] = (0, import_react41.useState)(false);
   const handleOnMouseEnter = (event) => {
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
@@ -6815,22 +6823,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;
@@ -6913,8 +6920,8 @@ var Listbox = ({
   handleOptionOnClick,
   styles
 }) => {
-  const translatedLabels = (0, import_react40.useContext)(HalstackLanguageContext);
-  const listboxRef = (0, import_react40.useRef)(null);
+  const translatedLabels = (0, import_react42.useContext)(HalstackLanguageContext);
+  const listboxRef = (0, import_react42.useRef)(null);
   let globalIndex = optional && !multiple ? 0 : -1;
   const mapOptionFunc = (option, mapIndex) => {
     const groupId = `${id}-group-${mapIndex}`;
@@ -6956,7 +6963,7 @@ var Listbox = ({
       );
     }
   };
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (currentValue && !multiple) {
       const listEl = listboxRef?.current;
       const selectedListOptionEl = listEl?.querySelector("[aria-selected='true']");
@@ -6965,7 +6972,7 @@ var Listbox = ({
       });
     }
   }, [currentValue, multiple]);
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     const visualFocusedOptionEl = listboxRef.current?.querySelectorAll("[role='option']")[visualFocusIndex];
     visualFocusedOptionEl?.scrollIntoView?.({
       block: "nearest",
@@ -7055,7 +7062,7 @@ var Listbox_default = Listbox;
 
 // src/select/Select.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var DxcSelect = (0, import_react41.forwardRef)(
+var DxcSelect = (0, import_react43.forwardRef)(
   ({
     label,
     name = "",
@@ -7068,6 +7075,7 @@ var DxcSelect = (0, import_react41.forwardRef)(
     multiple = false,
     optional = false,
     searchable = false,
+    searchByStartsWith = false,
     onChange,
     onBlur,
     error,
@@ -7076,27 +7084,27 @@ var DxcSelect = (0, import_react41.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Select"
   }, ref) => {
-    const selectId = `select-${(0, import_react41.useId)()}`;
+    const selectId = `select-${(0, import_react43.useId)()}`;
     const selectLabelId = `label-${selectId}`;
     const errorId = `error-${selectId}`;
     const listboxId = `${selectId}-listbox`;
-    const [innerValue, setInnerValue] = (0, import_react41.useState)(defaultValue ?? (multiple ? [] : ""));
-    const [searchValue, setSearchValue] = (0, import_react41.useState)("");
-    const [visualFocusIndex, changeVisualFocusIndex] = (0, import_react41.useState)(-1);
-    const [isOpen, changeIsOpen] = (0, import_react41.useState)(false);
-    const [hasTooltip, setHasTooltip] = (0, import_react41.useState)(false);
-    const selectRef = (0, import_react41.useRef)(null);
-    const selectSearchInputRef = (0, import_react41.useRef)(null);
+    const [innerValue, setInnerValue] = (0, import_react43.useState)(defaultValue ?? (multiple ? [] : ""));
+    const [searchValue, setSearchValue] = (0, import_react43.useState)("");
+    const [visualFocusIndex, changeVisualFocusIndex] = (0, import_react43.useState)(-1);
+    const [isOpen, changeIsOpen] = (0, import_react43.useState)(false);
+    const [hasTooltip, setHasTooltip] = (0, import_react43.useState)(false);
+    const selectRef = (0, import_react43.useRef)(null);
+    const selectSearchInputRef = (0, import_react43.useRef)(null);
     const width = useWidth_default(selectRef.current);
-    const colorsTheme = (0, import_react41.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react41.useContext)(HalstackLanguageContext);
+    const colorsTheme = (0, import_react43.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react43.useContext)(HalstackLanguageContext);
     const optionalItem = { label: placeholder, value: "" };
-    const filteredOptions = (0, import_react41.useMemo)(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
-    const lastOptionIndex = (0, import_react41.useMemo)(
+    const filteredOptions = (0, import_react43.useMemo)(() => filterOptionsBySearchValue(options, searchValue, searchByStartsWith), [options, searchValue, searchByStartsWith]);
+    const lastOptionIndex = (0, import_react43.useMemo)(
       () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple),
       [options, filteredOptions, searchable, optional, multiple]
     );
-    const { selectedOption, singleSelectionIndex } = (0, import_react41.useMemo)(
+    const { selectedOption, singleSelectionIndex } = (0, import_react43.useMemo)(
       () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem),
       [value, innerValue, options, multiple, optional, optionalItem]
     );
@@ -7111,7 +7119,7 @@ var DxcSelect = (0, import_react41.forwardRef)(
         changeVisualFocusIndex(-1);
       }
     };
-    const handleSelectChangeValue = (0, import_react41.useCallback)(
+    const handleSelectChangeValue = (0, import_react43.useCallback)(
       (newOption) => {
         if (newOption) {
           let newValue;
@@ -7268,7 +7276,7 @@ var DxcSelect = (0, import_react41.forwardRef)(
       event.stopPropagation();
       setSearchValue("");
     };
-    const handleOptionOnClick = (0, import_react41.useCallback)(
+    const handleOptionOnClick = (0, import_react43.useCallback)(
       (option) => {
         handleSelectChangeValue(option);
         if (!multiple) {
@@ -7282,148 +7290,151 @@ var DxcSelect = (0, import_react41.forwardRef)(
       const text = event.currentTarget;
       setHasTooltip(text.scrollWidth > text.clientWidth);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_styled_components35.ThemeProvider, { theme: colorsTheme.select, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(SelectContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        Label3,
-        {
-          id: selectLabelId,
-          disabled,
-          onClick: () => {
-            selectRef?.current?.focus();
-          },
-          helperText,
-          children: [
-            label,
-            " ",
-            optional && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OptionalLabel, { children: translatedLabels.formFields.optionalLabel })
-          ]
-        }
-      ),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(HelperText, { disabled, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover2.Root, { open: isOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-          Select,
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_styled_components35.ThemeProvider, { theme: colorsTheme.select, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(SelectContainer, { margin, size, ref, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+          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__ */ (0, import_jsx_runtime42.jsxs)(SelectionIndicator, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectionNumber, { disabled, children: selectedOption.length }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  ClearOptionsAction,
+              label,
+              " ",
+              optional && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OptionalLabel, { children: translatedLabels.formFields.optionalLabel })
+            ]
+          }
+        ),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(HelperText, { disabled, children: helperText }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Popover2.Root, { open: isOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            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__ */ (0, import_jsx_runtime42.jsxs)(SelectionIndicator, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectionNumber, { disabled, children: selectedOption.length }),
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipWrapper, { condition: !disabled, label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    ClearOptionsAction,
+                    {
+                      disabled,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                      },
+                      onClick: handleClearOptionsActionOnClick,
+                      tabIndex: -1,
+                      "aria-label": translatedLabels.select.actionClearSelectionTitle,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: "clear" })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(SearchableValueContainer, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    "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__ */ (0, import_jsx_runtime42.jsx)(
+                    SearchInput,
+                    {
+                      value: searchValue,
+                      disabled,
+                      onChange: handleSearchIOnChange,
+                      ref: selectSearchInputRef,
+                      autoComplete: "nope",
+                      autoCorrect: "nope",
+                      size: 1,
+                      "aria-labelledby": label ? selectLabelId : void 0
+                    }
+                  ),
+                  (!searchable || searchValue === "") && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                    SelectedOption,
+                    {
+                      disabled,
+                      atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectedOptionLabel, { onMouseEnter: handleOnMouseEnter, children: getSelectedOptionLabel(placeholder, selectedOption) })
+                    }
+                  )
+                ] }) }),
+                !disabled && error && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: "filled_error" }) }),
+                searchable && searchValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipWrapper, { condition: !disabled, label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  ClearSearchAction,
                   {
-                    disabled,
                     onMouseDown: (event) => {
                       event.preventDefault();
                     },
-                    onClick: handleClearOptionsActionOnClick,
+                    onClick: handleClearSearchActionOnClick,
                     tabIndex: -1,
-                    "aria-label": translatedLabels.select.actionClearSelectionTitle,
+                    "aria-label": translatedLabels.select.actionClearSearchTitle,
                     children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: "clear" })
                   }
-                ) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(SearchableValueContainer, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  "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__ */ (0, import_jsx_runtime42.jsx)(
-                  SearchInput,
-                  {
-                    value: searchValue,
-                    disabled,
-                    onChange: handleSearchIOnChange,
-                    ref: selectSearchInputRef,
-                    autoComplete: "nope",
-                    autoCorrect: "nope",
-                    size: 1,
-                    "aria-labelledby": label ? selectLabelId : void 0
-                  }
-                ),
-                (!searchable || searchValue === "") && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  SelectedOption,
-                  {
-                    disabled,
-                    atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectedOptionLabel, { onMouseEnter: handleOnMouseEnter, children: getSelectedOptionLabel(placeholder, selectedOption) })
-                  }
-                )
-              ] }) }),
-              !disabled && error && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ErrorIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: "filled_error" }) }),
-              searchable && searchValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                ClearSearchAction,
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CollapseIndicator2, { disabled, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Popover2.Portal, { container: document.getElementById(`${selectId}-portal`), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            Popover2.Content,
+            {
+              sideOffset: 4,
+              style: { zIndex: "310" },
+              onOpenAutoFocus: (event) => {
+                event.preventDefault();
+              },
+              onCloseAutoFocus: (event) => {
+                event.preventDefault();
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                Listbox_default,
                 {
-                  onMouseDown: (event) => {
-                    event.preventDefault();
-                  },
-                  onClick: handleClearSearchActionOnClick,
-                  tabIndex: -1,
-                  "aria-label": translatedLabels.select.actionClearSearchTitle,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: "clear" })
+                  id: listboxId,
+                  currentValue: value ?? innerValue,
+                  options: searchable ? filteredOptions : options,
+                  visualFocusIndex,
+                  lastOptionIndex,
+                  multiple,
+                  optional,
+                  optionalItem,
+                  searchable,
+                  handleOptionOnClick,
+                  styles: { width }
                 }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CollapseIndicator2, { disabled, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon_default, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" }) })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          Popover2.Content,
-          {
-            sideOffset: 4,
-            style: { zIndex: "310" },
-            onOpenAutoFocus: (event) => {
-              event.preventDefault();
-            },
-            onCloseAutoFocus: (event) => {
-              event.preventDefault();
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-              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__ */ (0, import_jsx_runtime42.jsx)(Error2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
       ] }),
-      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Error2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
-    ] }) });
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { id: `${selectId}-portal`, style: { position: "absolute" } })
+    ] });
   }
 );
 var sizes3 = {
@@ -7645,8 +7656,8 @@ var DxcPaginator = ({
   const currentPageInternal = currentPage === -1 ? totalPages : currentPage;
   const minItemsPerPage = currentPageInternal === 1 || currentPageInternal === 0 ? currentPageInternal : (currentPageInternal - 1) * itemsPerPage + 1;
   const maxItemsPerPage = minItemsPerPage - 1 + itemsPerPage > totalItems ? totalItems : minItemsPerPage - 1 + itemsPerPage;
-  const colorsTheme = (0, import_react42.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react42.useContext)(HalstackLanguageContext);
+  const colorsTheme = (0, import_react44.useContext)(HalstackContext);
+  const translatedLabels = (0, import_react44.useContext)(HalstackLanguageContext);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_styled_components36.ThemeProvider, { theme: colorsTheme.paginator, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DxcPaginatorContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(LabelsContainer3, { children: [
     itemsPerPageOptions && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ItemsPageContainer, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ItemsLabel, { children: translatedLabels.paginator.itemsPerPageText }),
@@ -7795,7 +7806,7 @@ var PageToSelectContainer = import_styled_components36.default.span`
 var Paginator_default = DxcPaginator;
 
 // src/table/Table.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
 
 // src/table/dropdownTheme.ts
@@ -7871,7 +7882,7 @@ var DxcActionsCell = ({ actions }) => {
   const actionIcons = actions.filter((action) => !action.options);
   const actionDropdown = actions.find((action) => action.options);
   const maxNumberOfActions = actionDropdown ? 2 : 3;
-  const colorsTheme = (0, import_react43.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react45.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Flex_default, { gap: "0.5rem", alignItems: "center", children: [
     actionIcons.map(
       (action, index) => index < maxNumberOfActions && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -7900,7 +7911,7 @@ var DxcActionsCell = ({ actions }) => {
   ] });
 };
 var DxcTable = ({ children, margin, mode = "default" }) => {
-  const colorsTheme = (0, import_react43.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react45.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_styled_components37.ThemeProvider, { theme: colorsTheme.table, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DxcTableContainer, { margin, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DxcTableContent, { mode, children }) }) });
 };
 var calculateWidth7 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
@@ -8134,9 +8145,9 @@ var DxcDataGrid = ({
   totalItems,
   defaultPage = 1
 }) => {
-  const [rowsToRender, setRowsToRender] = (0, import_react44.useState)([...rows]);
-  const colorsTheme = (0, import_react44.useContext)(HalstackContext);
-  const [page, changePage] = (0, import_react44.useState)(defaultPage);
+  const [rowsToRender, setRowsToRender] = (0, import_react46.useState)([...rows]);
+  const colorsTheme = (0, import_react46.useContext)(HalstackContext);
+  const [page, changePage] = (0, import_react46.useState)(defaultPage);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -8154,7 +8165,7 @@ var DxcDataGrid = ({
     }
     setSortColumns(newSortColumns);
   };
-  const columnsToRender = (0, import_react44.useMemo)(() => {
+  const columnsToRender = (0, import_react46.useMemo)(() => {
     let expectedColumns = columns.map((column) => convertToRDGColumns(column, summaryRow));
     if (expandable) {
       expectedColumns = [
@@ -8219,12 +8230,12 @@ var DxcDataGrid = ({
     }
     return expectedColumns;
   }, [selectable, expandable, columns, rowsToRender, onSelectRows, rows, summaryRow, uniqueRowId, selectedRows]);
-  const [columnsOrder, setColumnsOrder] = (0, import_react44.useState)(() => columnsToRender.map((_, index) => index));
-  const [sortColumns, setSortColumns] = (0, import_react44.useState)([]);
-  (0, import_react44.useEffect)(() => {
+  const [columnsOrder, setColumnsOrder] = (0, import_react46.useState)(() => columnsToRender.map((_, index) => index));
+  const [sortColumns, setSortColumns] = (0, import_react46.useState)([]);
+  (0, import_react46.useEffect)(() => {
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const finalRows = [...rows];
     if (expandable) {
       finalRows.filter((row) => {
@@ -8236,7 +8247,7 @@ var DxcDataGrid = ({
     }
     setRowsToRender(finalRows);
   }, [rows]);
-  const reorderedColumns = (0, import_react44.useMemo)(
+  const reorderedColumns = (0, import_react46.useMemo)(
     () => (
       // Array ordered by columnsOrder
       columnsOrder.map((index) => columnsToRender[index])
@@ -8268,7 +8279,7 @@ var DxcDataGrid = ({
       onGridRowsChange(newRows);
     }
   };
-  const sortedRows = (0, import_react44.useMemo)(() => {
+  const sortedRows = (0, import_react46.useMemo)(() => {
     const sortFunctions = getCustomSortFn(columns);
     if (!onSort) {
       if (sortColumns.length > 0 && uniqueRowId) {
@@ -8297,12 +8308,12 @@ var DxcDataGrid = ({
     }
     return rowsToRender;
   }, [expandable, rowsToRender, sortColumns, uniqueRowId]);
-  const minItemsPerPageIndex = (0, import_react44.useMemo)(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = (0, import_react44.useMemo)(
+  const minItemsPerPageIndex = (0, import_react46.useMemo)(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
+  const maxItemsPerPageIndex = (0, import_react46.useMemo)(
     () => getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page),
     [itemsPerPage, minItemsPerPageIndex, page, rows]
   );
-  const filteredRows = (0, import_react44.useMemo)(() => {
+  const filteredRows = (0, import_react46.useMemo)(() => {
     if (onSort && sortColumns?.length > 0) {
       onSort?.(sortColumns?.[0]);
     }
@@ -8346,19 +8357,19 @@ DxcDataGrid.ActionsCell = DxcActionsCell;
 var DataGrid_default = DxcDataGrid;
 
 // src/date-input/DateInput.tsx
-var import_react52 = require("react");
+var import_react54 = require("react");
 var import_dayjs3 = __toESM(require("dayjs"));
 var import_styled_components45 = __toESM(require("styled-components"));
 var Popover4 = __toESM(require("@radix-ui/react-popover"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
 
 // src/date-input/DatePicker.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_styled_components41 = __toESM(require("styled-components"));
 
 // src/date-input/Calendar.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 var import_styled_components39 = __toESM(require("styled-components"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var getDays = (innerDate) => {
@@ -8402,11 +8413,11 @@ var Calendar = ({
   onDaySelect,
   today: today2
 }) => {
-  const [dateToFocus, setDateToFocus] = (0, import_react45.useState)(getDateToFocus(selectedDate, innerDate, today2));
-  const [isFocusable, setIsFocusable] = (0, import_react45.useState)(false);
-  const id = (0, import_react45.useId)();
-  const translatedLabels = (0, import_react45.useContext)(HalstackLanguageContext);
-  const dayCells = (0, import_react45.useMemo)(() => getDays(innerDate), [innerDate]);
+  const [dateToFocus, setDateToFocus] = (0, import_react47.useState)(getDateToFocus(selectedDate, innerDate, today2));
+  const [isFocusable, setIsFocusable] = (0, import_react47.useState)(false);
+  const id = (0, import_react47.useId)();
+  const translatedLabels = (0, import_react47.useContext)(HalstackLanguageContext);
+  const dayCells = (0, import_react47.useMemo)(() => getDays(innerDate), [innerDate]);
   const onDateClickHandler = (date) => {
     const newDate = innerDate.set("month", date.month).set("date", date.day);
     onDaySelect(newDate);
@@ -8424,13 +8435,13 @@ var Calendar = ({
     setDateToFocus(date);
     setIsFocusable(true);
   };
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (isFocusable) {
       document.getElementById(`${id}_day_${dateToFocus.get("date")}_month${dateToFocus.get("month")}`)?.focus();
       setIsFocusable(false);
     }
   }, [dateToFocus, isFocusable]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
       setDateToFocus(getDateToFocus(selectedDate, innerDate, today2));
     }
@@ -8591,11 +8602,11 @@ var DayCellButton = import_styled_components39.default.button`
   background-color: ${(props) => props.selected ? props.theme.dateInput.pickerSelectedBackgroundColor : "transparent"};
   color: ${(props) => props.selected ? props.theme.dateInput.pickerSelectedFontColor : props.isCurrentDay ? props.theme.dateInput.pickerCurrentDateFontColor : !props.actualMonth ? props.theme.dateInput.pickerNonCurrentMonthFontColor : props.theme.dateInput.pickerFontColor};
 `;
-var Calendar_default = (0, import_react45.memo)(Calendar);
+var Calendar_default = (0, import_react47.memo)(Calendar);
 
 // src/date-input/YearPicker.tsx
 var import_dayjs = __toESM(require("dayjs"));
-var import_react46 = require("react");
+var import_react48 = require("react");
 var import_styled_components40 = __toESM(require("styled-components"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var getYearsArray = () => {
@@ -8607,9 +8618,9 @@ var getYearsArray = () => {
 };
 var yearList = getYearsArray();
 var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
-  const id = (0, import_react46.useId)();
-  const [yearToFocus, setYearToFocus] = (0, import_react46.useState)(selectedDate ? selectedDate.get("year") : (0, import_dayjs.default)().get("year"));
-  (0, import_react46.useEffect)(() => {
+  const id = (0, import_react48.useId)();
+  const [yearToFocus, setYearToFocus] = (0, import_react48.useState)(selectedDate ? selectedDate.get("year") : (0, import_dayjs.default)().get("year"));
+  (0, import_react48.useEffect)(() => {
     const yearToFocusEl = document.getElementById(`${id}_year_${yearToFocus}`);
     yearToFocusEl?.scrollIntoView?.({ block: "nearest", inline: "start" });
     yearToFocusEl?.focus();
@@ -8696,16 +8707,16 @@ var YearPickerButton = import_styled_components40.default.button`
     background-color: ${(props) => props.theme.dateInput.pickerActiveBackgroundColor} !important;
   }
 `;
-var YearPicker_default = (0, import_react46.memo)(YearPicker);
+var YearPicker_default = (0, import_react48.memo)(YearPicker);
 
 // src/date-input/DatePicker.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var today = (0, import_dayjs2.default)();
 var DatePicker = ({ date, onDateSelect, id }) => {
-  const [innerDate, setInnerDate] = (0, import_react47.useState)(date?.isValid() ? date : (0, import_dayjs2.default)());
-  const [content, setContent] = (0, import_react47.useState)("calendar");
+  const [innerDate, setInnerDate] = (0, import_react49.useState)(date?.isValid() ? date : (0, import_dayjs2.default)());
+  const [content, setContent] = (0, import_react49.useState)("calendar");
   const selectedDate = date?.isValid() ? date : (0, import_dayjs2.default)(null);
-  const translatedLabels = (0, import_react47.useContext)(HalstackLanguageContext);
+  const translatedLabels = (0, import_react49.useContext)(HalstackLanguageContext);
   const handleDateSelect = (chosenDate) => {
     setInnerDate(chosenDate);
     onDateSelect(chosenDate);
@@ -8831,23 +8842,23 @@ var HeaderYearTriggerLabel = import_styled_components41.default.span`
   font-family: ${(props) => props.theme.dateInput.pickerFontFamily};
   font-size: ${(props) => props.theme.dateInput.pickerHeaderFontSize};
 `;
-var DatePicker_default = (0, import_react47.memo)(DatePicker);
+var DatePicker_default = (0, import_react49.memo)(DatePicker);
 
 // src/text-input/TextInput.tsx
 var Popover3 = __toESM(require("@radix-ui/react-popover"));
-var import_react51 = require("react");
+var import_react53 = require("react");
 var import_styled_components44 = __toESM(require("styled-components"));
 
 // src/number-input/NumberInputContext.tsx
-var import_react48 = require("react");
-var NumberInputContext_default = (0, import_react48.createContext)(null);
+var import_react50 = require("react");
+var NumberInputContext_default = (0, import_react50.createContext)(null);
 
 // src/text-input/Suggestions.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
 
 // src/text-input/Suggestion.tsx
-var import_react49 = require("react");
+var import_react51 = require("react");
 var import_styled_components42 = __toESM(require("styled-components"));
 
 // src/text-input/utils.ts
@@ -8925,7 +8936,7 @@ var Suggestion = ({
   visuallyFocused,
   highlighted
 }) => {
-  const matchedSuggestion = (0, import_react49.useMemo)(() => {
+  const matchedSuggestion = (0, import_react51.useMemo)(() => {
     const regEx = new RegExp(transformSpecialChars(value), "i");
     return { matchedWords: suggestion.match(regEx), noMatchedWords: suggestion.replace(regEx, "") };
   }, [value, suggestion]);
@@ -8946,7 +8957,7 @@ var Suggestion = ({
     }
   );
 };
-var Suggestion_default = (0, import_react49.memo)(Suggestion);
+var Suggestion_default = (0, import_react51.memo)(Suggestion);
 
 // src/text-input/Suggestions.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -9002,9 +9013,9 @@ var Suggestions = ({
   suggestionOnClick,
   styles
 }) => {
-  const translatedLabels = (0, import_react50.useContext)(HalstackLanguageContext);
-  const listboxRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const translatedLabels = (0, import_react52.useContext)(HalstackLanguageContext);
+  const listboxRef = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
     const visualFocusedOptionEl = listboxRef?.current?.querySelectorAll("[role='option']")[visualFocusIndex];
     visualFocusedOptionEl?.scrollIntoView?.({
       block: "nearest",
@@ -9046,7 +9057,7 @@ var Suggestions = ({
     }
   );
 };
-var Suggestions_default = (0, import_react50.memo)(Suggestions);
+var Suggestions_default = (0, import_react52.memo)(Suggestions);
 
 // src/text-input/TextInput.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -9174,7 +9185,7 @@ var ErrorMessageContainer = import_styled_components44.default.span`
   margin-top: 0.25rem;
 `;
 var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: condition ? wrapper(children) : children });
-var DxcTextInput = (0, import_react51.forwardRef)(
+var DxcTextInput = (0, import_react53.forwardRef)(
   ({
     alignment = "left",
     label,
@@ -9203,21 +9214,21 @@ var DxcTextInput = (0, import_react51.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Text input"
   }, ref) => {
-    const inputId = `input-${(0, import_react51.useId)()}`;
+    const inputId = `input-${(0, import_react53.useId)()}`;
     const autosuggestId = `suggestions-${inputId}`;
     const errorId = `error-${inputId}`;
-    const colorsTheme = (0, import_react51.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react51.useContext)(HalstackLanguageContext);
-    const numberInputContext = (0, import_react51.useContext)(NumberInputContext_default);
-    const inputRef = (0, import_react51.useRef)(null);
-    const inputContainerRef = (0, import_react51.useRef)(null);
-    const actionRef = (0, import_react51.useRef)(null);
-    const [innerValue, setInnerValue] = (0, import_react51.useState)(defaultValue);
-    const [isOpen, changeIsOpen] = (0, import_react51.useState)(false);
-    const [isSearching, changeIsSearching] = (0, import_react51.useState)(false);
-    const [isAutosuggestError, changeIsAutosuggestError] = (0, import_react51.useState)(false);
-    const [filteredSuggestions, changeFilteredSuggestions] = (0, import_react51.useState)([]);
-    const [visualFocusIndex, changeVisualFocusIndex] = (0, import_react51.useState)(-1);
+    const colorsTheme = (0, import_react53.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react53.useContext)(HalstackLanguageContext);
+    const numberInputContext = (0, import_react53.useContext)(NumberInputContext_default);
+    const inputRef = (0, import_react53.useRef)(null);
+    const inputContainerRef = (0, import_react53.useRef)(null);
+    const actionRef = (0, import_react53.useRef)(null);
+    const [innerValue, setInnerValue] = (0, import_react53.useState)(defaultValue);
+    const [isOpen, changeIsOpen] = (0, import_react53.useState)(false);
+    const [isSearching, changeIsSearching] = (0, import_react53.useState)(false);
+    const [isAutosuggestError, changeIsAutosuggestError] = (0, import_react53.useState)(false);
+    const [filteredSuggestions, changeFilteredSuggestions] = (0, import_react53.useState)([]);
+    const [visualFocusIndex, changeVisualFocusIndex] = (0, import_react53.useState)(-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 = () => {
@@ -9427,7 +9438,7 @@ var DxcTextInput = (0, import_react51.forwardRef)(
         inputRef.current?.setAttribute("type", type);
       }
     };
-    (0, import_react51.useEffect)(() => {
+    (0, import_react53.useEffect)(() => {
       if (typeof suggestions === "function") {
         changeIsSearching(true);
         changeIsAutosuggestError(false);
@@ -9463,163 +9474,166 @@ var DxcTextInput = (0, import_react51.forwardRef)(
       }
       return void 0;
     }, [value, innerValue, suggestions, numberInputContext]);
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_styled_components44.ThemeProvider, { theme: colorsTheme.textInput, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(TextInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Label4, { htmlFor: inputId, disabled, hasHelperText: !!helperText, children: [
-        label,
-        " ",
-        optional && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(OptionalLabel2, { children: translatedLabels.formFields.optionalLabel })
-      ] }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(HelperText2, { disabled, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        AutosuggestWrapper,
-        {
-          condition: hasSuggestions(suggestions),
-          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Popover3.Trigger,
-              {
-                asChild: true,
-                type: void 0,
-                "aria-controls": void 0,
-                "aria-haspopup": void 0,
-                "aria-expanded": void 0,
-                children
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Popover3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              Popover3.Content,
-              {
-                sideOffset: 5,
-                style: { zIndex: "320" },
-                onOpenAutoFocus: (event) => {
-                  event.preventDefault();
-                },
-                onCloseAutoFocus: (event) => {
-                  event.preventDefault();
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                  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__ */ (0, import_jsx_runtime51.jsxs)(
-            InputContainer,
-            {
-              error: !!error,
-              disabled,
-              readOnly,
-              onClick: handleInputContainerOnClick,
-              onMouseDown: handleInputContainerOnMouseDown,
-              ref: inputContainerRef,
-              children: [
-                prefix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Prefix, { disabled, children: prefix }),
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex_default, { gap: "0.25rem", alignItems: "center", grow: 1, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                    Input,
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_styled_components44.ThemeProvider, { theme: colorsTheme.textInput, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(TextInputContainer, { margin, size, ref, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Label4, { htmlFor: inputId, disabled, hasHelperText: !!helperText, children: [
+          label,
+          " ",
+          optional && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(OptionalLabel2, { children: translatedLabels.formFields.optionalLabel })
+        ] }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(HelperText2, { disabled, children: helperText }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          AutosuggestWrapper,
+          {
+            condition: hasSuggestions(suggestions),
+            wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                Popover3.Trigger,
+                {
+                  asChild: true,
+                  type: void 0,
+                  "aria-controls": void 0,
+                  "aria-haspopup": void 0,
+                  "aria-expanded": void 0,
+                  children
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Popover3.Portal, { container: document.getElementById(`${inputId}-portal`), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                Popover3.Content,
+                {
+                  sideOffset: 5,
+                  style: { zIndex: "320" },
+                  onOpenAutoFocus: (event) => {
+                    event.preventDefault();
+                  },
+                  onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    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
-                    }
-                  ),
-                  !disabled && error && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon_default, { icon: "filled_error" }) }),
-                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                    ActionIcon_default,
-                    {
-                      onClick: handleClearActionOnClick,
-                      icon: "close",
-                      tabIndex,
-                      title: translatedLabels.textInput.clearFieldActionTitle
+                      styles: { width }
                     }
-                  ),
-                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+                  )
+                }
+              ) })
+            ] }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+              InputContainer,
+              {
+                error: !!error,
+                disabled,
+                readOnly,
+                onClick: handleInputContainerOnClick,
+                onMouseDown: handleInputContainerOnMouseDown,
+                ref: inputContainerRef,
+                children: [
+                  prefix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Prefix, { disabled, children: prefix }),
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Flex_default, { gap: "0.25rem", alignItems: "center", grow: 1, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                      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__ */ (0, import_jsx_runtime51.jsx)(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon_default, { icon: "filled_error" }) }),
+                    !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                       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__ */ (0, import_jsx_runtime51.jsx)(
+                    numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        ActionIcon_default,
+                        {
+                          onClick: !readOnly ? handleDecrementActionOnClick : void 0,
+                          icon: "remove",
+                          tabIndex,
+                          ref: actionRef,
+                          title: translatedLabels.numberInput.decrementValueTitle,
+                          disabled
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        ActionIcon_default,
+                        {
+                          onClick: !readOnly ? handleIncrementActionOnClick : void 0,
+                          icon: "add",
+                          tabIndex,
+                          ref: actionRef,
+                          title: translatedLabels.numberInput.incrementValueTitle,
+                          disabled
+                        }
+                      )
+                    ] }),
+                    action && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                       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__ */ (0, import_jsx_runtime51.jsx)(
-                    ActionIcon_default,
-                    {
-                      onClick: !readOnly ? action.onClick : void 0,
-                      icon: action.icon,
-                      tabIndex,
-                      ref: actionRef,
-                      title: action.title ?? "",
-                      disabled
-                    }
-                  )
-                ] }),
-                suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Suffix, { disabled, children: suffix })
-              ]
-            }
-          )
-        }
-      ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorMessageContainer, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
-    ] }) });
+                  suffix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Suffix, { disabled, children: suffix })
+                ]
+              }
+            )
+          }
+        ),
+        !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ErrorMessageContainer, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { id: `${inputId}-portal`, style: { position: "absolute" } })
+    ] });
   }
 );
 var TextInput_default = DxcTextInput;
@@ -9647,7 +9661,7 @@ var getDate = (value, format, lastValidYear, setLastValidYear) => {
   }
   return newDate;
 };
-var DxcDateInput = (0, import_react52.forwardRef)(
+var DxcDateInput = (0, import_react54.forwardRef)(
   ({
     label,
     name,
@@ -9669,18 +9683,18 @@ var DxcDateInput = (0, import_react52.forwardRef)(
     tabIndex,
     ariaLabel = "Date input"
   }, ref) => {
-    const [innerValue, setInnerValue] = (0, import_react52.useState)(defaultValue);
-    const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
-    const calendarId = `date-picker-${(0, import_react52.useId)()}`;
-    const [dayjsDate, setDayjsDate] = (0, import_react52.useState)(getValueForPicker(value ?? defaultValue ?? "", format));
-    const [lastValidYear, setLastValidYear] = (0, import_react52.useState)(
+    const [innerValue, setInnerValue] = (0, import_react54.useState)(defaultValue);
+    const [isOpen, setIsOpen] = (0, import_react54.useState)(false);
+    const calendarId = `date-picker-${(0, import_react54.useId)()}`;
+    const [dayjsDate, setDayjsDate] = (0, import_react54.useState)(getValueForPicker(value ?? defaultValue ?? "", format));
+    const [lastValidYear, setLastValidYear] = (0, import_react54.useState)(
       innerValue || value ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value ?? innerValue, format).format("YY") < 68 ? 2e3 : 1900 : null
     );
-    const [sideOffset, setSideOffset] = (0, import_react52.useState)(SIDEOFFSET);
-    const colorsTheme = (0, import_react52.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react52.useContext)(HalstackLanguageContext);
-    const dateRef = (0, import_react52.useRef)(null);
-    const popoverContentRef = (0, import_react52.useRef)(null);
+    const [sideOffset, setSideOffset] = (0, import_react54.useState)(SIDEOFFSET);
+    const colorsTheme = (0, import_react54.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react54.useContext)(HalstackLanguageContext);
+    const dateRef = (0, import_react54.useRef)(null);
+    const popoverContentRef = (0, import_react54.useRef)(null);
     const handleCalendarOnClick = (newDate) => {
       const newValue = newDate.format(format.toUpperCase());
       if (!value) {
@@ -9737,7 +9751,7 @@ var DxcDateInput = (0, import_react52.forwardRef)(
         onBlur?.(callbackParams);
       }
     };
-    const adjustSideOffset = (0, import_react52.useCallback)(() => {
+    const adjustSideOffset = (0, import_react54.useCallback)(() => {
       if (error != null) {
         setTimeout(() => {
           if (popoverContentRef.current && dateRef.current) {
@@ -9773,18 +9787,18 @@ var DxcDateInput = (0, import_react52.forwardRef)(
         closeCalendar();
       }
     };
-    (0, import_react52.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       window.addEventListener("scroll", adjustSideOffset);
       return () => {
         window.removeEventListener("scroll", adjustSideOffset);
       };
     }, [adjustSideOffset]);
-    (0, import_react52.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (value || value === "") {
         setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
       }
     }, [value, format, lastValidYear]);
-    (0, import_react52.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (!disabled) {
         const actionButtonElement = dateRef.current?.querySelector("[aria-label='Select date']");
         actionButtonElement?.setAttribute("aria-haspopup", "true");
@@ -9796,62 +9810,65 @@ var DxcDateInput = (0, import_react52.forwardRef)(
         }
       }
     }, [isOpen, disabled, calendarId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_styled_components45.ThemeProvider, { theme: colorsTheme, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DateInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
-        Label5,
-        {
-          htmlFor: dateRef.current?.getElementsByTagName("input")[0]?.id,
-          disabled,
-          hasHelperText: !!helperText,
-          children: [
-            label,
-            " ",
-            optional && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(OptionalLabel3, { children: translatedLabels.formFields.optionalLabel })
-          ]
-        }
-      ),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(HelperText3, { disabled, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Popover4.Root, { open: isOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          TextInput_default,
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_styled_components45.ThemeProvider, { theme: colorsTheme, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DateInputContainer, { margin, size, ref, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+          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__ */ (0, import_jsx_runtime52.jsx)(Popover4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          StyledPopoverContent,
-          {
-            sideOffset,
-            align: "end",
-            "aria-modal": true,
-            onBlur: handleDatePickerOnBlur,
-            onKeyDown: handleDatePickerEscKeydown,
-            ref: popoverContentRef,
-            children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            hasHelperText: !!helperText,
+            children: [
+              label,
+              " ",
+              optional && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(OptionalLabel3, { children: translatedLabels.formFields.optionalLabel })
+            ]
           }
-        ) })
-      ] })
-    ] }) });
+        ),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(HelperText3, { disabled, children: helperText }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Popover4.Root, { open: isOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            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__ */ (0, import_jsx_runtime52.jsx)(Popover4.Portal, { container: document.getElementById(`${calendarId}-portal`), children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            StyledPopoverContent,
+            {
+              sideOffset,
+              align: "end",
+              "aria-modal": true,
+              onBlur: handleDatePickerOnBlur,
+              onKeyDown: handleDatePickerEscKeydown,
+              ref: popoverContentRef,
+              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { id: `${calendarId}-portal`, style: { position: "absolute" } })
+    ] });
   }
 );
 var sizes5 = {
@@ -9894,7 +9911,7 @@ var HelperText3 = import_styled_components45.default.span`
   margin-bottom: 0.25rem;
 `;
 var StyledPopoverContent = (0, import_styled_components45.default)(Popover4.Content)`
-  z-index: 300;
+  z-index: 310;
   &:focus-visible {
     outline: none;
   }
@@ -9902,7 +9919,7 @@ var StyledPopoverContent = (0, import_styled_components45.default)(Popover4.Cont
 var DateInput_default = DxcDateInput;
 
 // src/dialog/Dialog.tsx
-var import_react53 = require("react");
+var import_react55 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_styled_components46 = __toESM(require("styled-components"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -9918,7 +9935,7 @@ var DialogContainer = import_styled_components46.default.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 420;
+  z-index: 300;
 `;
 var Overlay3 = import_styled_components46.default.div`
   position: fixed;
@@ -9955,9 +9972,14 @@ var DxcDialog = ({
   tabIndex = 0,
   disableFocusLock = false
 }) => {
-  const colorsTheme = (0, import_react53.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react53.useContext)(HalstackLanguageContext);
-  (0, import_react53.useEffect)(() => {
+  const id = (0, import_react55.useId)();
+  const colorsTheme = (0, import_react55.useContext)(HalstackContext);
+  const translatedLabels = (0, import_react55.useContext)(HalstackLanguageContext);
+  const [portalContainer, setPortalContainer] = (0, import_react55.useState)(null);
+  (0, import_react55.useEffect)(() => {
+    setPortalContainer(document.getElementById(`dialog-${id}-portal`));
+  }, []);
+  (0, import_react55.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -9971,7 +9993,8 @@ var DxcDialog = ({
   }, [onCloseClick]);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_styled_components46.ThemeProvider, { theme: colorsTheme.dialog, children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BodyStyle2, {}),
-    (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { id: `dialog-${id}-portal`, style: { position: "absolute" } }),
+    portalContainer && (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(DialogContainer, { children: [
         overlay && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Overlay3, { onClick: onBackgroundClick }),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: !disableFocusLock ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(FocusLock_default, { children: [
@@ -9998,18 +10021,18 @@ var DxcDialog = ({
           ) })
         ] }) })
       ] }),
-      document.body
+      portalContainer
     )
   ] });
 };
 var Dialog_default = DxcDialog;
 
 // src/file-input/FileInput.tsx
-var import_react55 = require("react");
+var import_react57 = require("react");
 var import_styled_components48 = __toESM(require("styled-components"));
 
 // src/file-input/FileItem.tsx
-var import_react54 = require("react");
+var import_react56 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var MainContainer3 = import_styled_components47.default.div`
@@ -10093,8 +10116,8 @@ var FileItem = ({
   onDelete,
   tabIndex
 }) => {
-  const translatedLabels = (0, import_react54.useContext)(HalstackLanguageContext);
-  const fileNameId = (0, import_react54.useId)();
+  const translatedLabels = (0, import_react56.useContext)(HalstackLanguageContext);
+  const fileNameId = (0, import_react56.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(MainContainer3, { error, role: "listitem", singleFileMode, showPreview, children: [
     showPreview && (type.includes("image") ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ImagePreview, { src: preview, alt: fileName }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon_default, { icon: preview }) })),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(FileItemContent, { children: [
@@ -10115,7 +10138,7 @@ var FileItem = ({
     ] })
   ] });
 };
-var FileItem_default = (0, import_react54.memo)(FileItem);
+var FileItem_default = (0, import_react56.memo)(FileItem);
 
 // src/file-input/utils.ts
 var getFilePreview = async (file) => {
@@ -10226,7 +10249,7 @@ var ErrorMessage2 = import_styled_components48.default.div`
   line-height: ${(props) => props.theme.errorMessageLineHeight};
   margin-top: 0.25rem;
 `;
-var DxcFileInput = (0, import_react55.forwardRef)(
+var DxcFileInput = (0, import_react57.forwardRef)(
   ({
     mode = "file",
     label = "",
@@ -10244,11 +10267,11 @@ var DxcFileInput = (0, import_react55.forwardRef)(
     margin,
     tabIndex = 0
   }, ref) => {
-    const [isDragging, setIsDragging] = (0, import_react55.useState)(false);
-    const [files, setFiles] = (0, import_react55.useState)([]);
-    const fileInputId = `file-input-${(0, import_react55.useId)()}`;
-    const colorsTheme = (0, import_react55.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react55.useContext)(HalstackLanguageContext);
+    const [isDragging, setIsDragging] = (0, import_react57.useState)(false);
+    const [files, setFiles] = (0, import_react57.useState)([]);
+    const fileInputId = `file-input-${(0, import_react57.useId)()}`;
+    const colorsTheme = (0, import_react57.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react57.useContext)(HalstackLanguageContext);
     const checkFileSize = (file) => {
       if (minSize && file.size < minSize) return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
       else if (maxSize && file.size > maxSize) return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
@@ -10281,7 +10304,7 @@ var DxcFileInput = (0, import_react55.forwardRef)(
         e.target.value = "";
       }
     };
-    const onDelete = (0, import_react55.useCallback)(
+    const onDelete = (0, import_react57.useCallback)(
       (fileName) => {
         const filesCopy = [...files];
         const fileToRemove = filesCopy.find((file) => file.file.name === fileName);
@@ -10320,7 +10343,7 @@ var DxcFileInput = (0, import_react55.forwardRef)(
         addFile(filesArray);
       }
     };
-    (0, import_react55.useEffect)(() => {
+    (0, import_react57.useEffect)(() => {
       const getFiles = async () => {
         if (value) {
           const valueFiles = await Promise.all(
@@ -10472,10 +10495,10 @@ var Grid_default = DxcGrid;
 
 // src/heading/Heading.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var DxcHeading = ({ level = 1, text = "", as, weight, margin }) => {
-  const colorsTheme = (0, import_react56.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react58.useContext)(HalstackContext);
   const checkValidAs = () => {
     if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as;
   };
@@ -10542,7 +10565,7 @@ var Heading_default = DxcHeading;
 
 // src/image/Image.tsx
 var import_styled_components51 = __toESM(require("styled-components"));
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var Figure = import_styled_components51.default.figure`
   display: flex;
@@ -10578,7 +10601,7 @@ function DxcImage({
   onLoad,
   onError
 }) {
-  const colorsTheme = (0, import_react57.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react59.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_styled_components51.ThemeProvider, { theme: colorsTheme.image, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CaptionWrapper, { caption, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "img",
     {
@@ -10625,7 +10648,7 @@ var Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Inset_default = Inset;
 
 // src/link/Link.tsx
-var import_react58 = require("react");
+var import_react60 = require("react");
 var import_styled_components53 = __toESM(require("styled-components"));
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var StyledLink = import_styled_components53.default.a`
@@ -10690,7 +10713,7 @@ var LinkIconContainer = import_styled_components53.default.div`
     height: ${(props) => props.theme.iconSize};
   }
 `;
-var DxcLink = (0, import_react58.forwardRef)(
+var DxcLink = (0, import_react60.forwardRef)(
   ({
     inheritColor = false,
     disabled = false,
@@ -10704,7 +10727,7 @@ var DxcLink = (0, import_react58.forwardRef)(
     children,
     ...otherProps
   }, ref) => {
-    const colorsTheme = (0, import_react58.useContext)(HalstackContext);
+    const colorsTheme = (0, import_react60.useContext)(HalstackContext);
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_styled_components53.ThemeProvider, { theme: colorsTheme.link, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       StyledLink,
       {
@@ -10729,20 +10752,20 @@ var DxcLink = (0, import_react58.forwardRef)(
 var Link_default = DxcLink;
 
 // src/nav-tabs/NavTabs.tsx
-var import_react61 = require("react");
+var import_react63 = require("react");
 var import_styled_components55 = __toESM(require("styled-components"));
 
 // src/nav-tabs/Tab.tsx
-var import_react60 = require("react");
+var import_react62 = require("react");
 var import_styled_components54 = __toESM(require("styled-components"));
 
 // src/nav-tabs/NavTabsContext.tsx
-var import_react59 = require("react");
-var NavTabsContext_default = (0, import_react59.createContext)(null);
+var import_react61 = require("react");
+var NavTabsContext_default = (0, import_react61.createContext)(null);
 
 // src/nav-tabs/Tab.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var DxcTab = (0, import_react60.forwardRef)(
+var DxcTab = (0, import_react62.forwardRef)(
   ({
     href,
     active = false,
@@ -10753,11 +10776,11 @@ var DxcTab = (0, import_react60.forwardRef)(
     children,
     ...otherProps
   }, ref) => {
-    const tabRef = (0, import_react60.useRef)();
-    const { iconPosition, tabIndex, focusedLabel } = (0, import_react60.useContext)(NavTabsContext_default) ?? {};
-    const innerRef = (0, import_react60.useRef)(null);
-    (0, import_react60.useImperativeHandle)(ref, () => innerRef.current, []);
-    (0, import_react60.useEffect)(() => {
+    const tabRef = (0, import_react62.useRef)();
+    const { iconPosition, tabIndex, focusedLabel } = (0, import_react62.useContext)(NavTabsContext_default) ?? {};
+    const innerRef = (0, import_react62.useRef)(null);
+    (0, import_react62.useImperativeHandle)(ref, () => innerRef.current, []);
+    (0, import_react62.useEffect)(() => {
       if (focusedLabel === children.toString()) {
         tabRef?.current?.focus();
       }
@@ -10781,8 +10804,9 @@ var DxcTab = (0, import_react60.forwardRef)(
         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) => {
@@ -10916,17 +10940,17 @@ var getNextTabIndex = (array, initialIndex) => {
   return index;
 };
 var DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }) => {
-  const [innerFocusIndex, setInnerFocusIndex] = (0, import_react61.useState)(null);
-  const [underlineWidth, setUnderlineWidth] = (0, import_react61.useState)(null);
-  const refNavTabList = (0, import_react61.useRef)(null);
-  const colorsTheme = (0, import_react61.useContext)(HalstackContext);
-  const childArray = import_react61.Children.toArray(children).filter(
+  const [innerFocusIndex, setInnerFocusIndex] = (0, import_react63.useState)(null);
+  const [underlineWidth, setUnderlineWidth] = (0, import_react63.useState)(null);
+  const refNavTabList = (0, import_react63.useRef)(null);
+  const colorsTheme = (0, import_react63.useContext)(HalstackContext);
+  const childArray = import_react63.Children.toArray(children).filter(
     (child) => typeof child === "object" && "props" in child
   );
-  (0, import_react61.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     setUnderlineWidth(refNavTabList?.current?.scrollWidth ?? null);
   }, [children]);
-  const contextValue = (0, import_react61.useMemo)(
+  const contextValue = (0, import_react63.useMemo)(
     () => ({
       iconPosition,
       tabIndex,
@@ -10975,10 +10999,10 @@ var NavTabsContainer = import_styled_components55.default.div`
 var NavTabs_default = DxcNavTabs;
 
 // src/number-input/NumberInput.tsx
-var import_react62 = require("react");
+var import_react64 = require("react");
 var import_styled_components56 = __toESM(require("styled-components"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var DxcNumberInput = (0, import_react62.forwardRef)(
+var DxcNumberInput = (0, import_react64.forwardRef)(
   ({
     label,
     name,
@@ -11004,8 +11028,8 @@ var DxcNumberInput = (0, import_react62.forwardRef)(
     ariaLabel = "Number input",
     showControls = true
   }, ref) => {
-    const numberInputRef = (0, import_react62.useRef)(null);
-    const contextValue = (0, import_react62.useMemo)(
+    const numberInputRef = (0, import_react64.useRef)(null);
+    const contextValue = (0, import_react64.useMemo)(
       () => ({
         maxNumber: max,
         minNumber: min,
@@ -11015,7 +11039,7 @@ var DxcNumberInput = (0, import_react62.forwardRef)(
       }),
       [max, min, showControls, step]
     );
-    (0, import_react62.useEffect)(() => {
+    (0, import_react64.useEffect)(() => {
       const input = numberInputRef.current?.getElementsByTagName("input")[0];
       const preventDefault = (event) => {
         event.preventDefault();
@@ -11069,7 +11093,7 @@ var NumberInputContainer = import_styled_components56.default.div`
 var NumberInput_default = DxcNumberInput;
 
 // src/paragraph/Paragraph.tsx
-var import_react63 = require("react");
+var import_react65 = require("react");
 var import_styled_components57 = __toESM(require("styled-components"));
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var Paragraph = import_styled_components57.default.p`
@@ -11088,12 +11112,12 @@ var Paragraph = import_styled_components57.default.p`
   margin: 0;
 `;
 function DxcParagraph({ children }) {
-  const colorsTheme = (0, import_react63.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react65.useContext)(HalstackContext);
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_styled_components57.ThemeProvider, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Paragraph, { children }) });
 }
 
 // src/password-input/PasswordInput.tsx
-var import_react64 = require("react");
+var import_react66 = require("react");
 var import_styled_components58 = __toESM(require("styled-components"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var setInputType = (type, element) => {
@@ -11103,7 +11127,7 @@ var setAriaAttributes = (ariaExpanded, element) => {
   const buttonElement = element?.getElementsByTagName("button")[0];
   buttonElement?.setAttribute("aria-expanded", ariaExpanded);
 };
-var DxcPasswordInput = (0, import_react64.forwardRef)(
+var DxcPasswordInput = (0, import_react66.forwardRef)(
   ({
     label,
     name = "",
@@ -11122,10 +11146,10 @@ var DxcPasswordInput = (0, import_react64.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Password input"
   }, ref) => {
-    const [isPasswordVisible, setIsPasswordVisible] = (0, import_react64.useState)(false);
-    const inputRef = (0, import_react64.useRef)(null);
-    const { passwordInput } = (0, import_react64.useContext)(HalstackLanguageContext);
-    (0, import_react64.useEffect)(() => {
+    const [isPasswordVisible, setIsPasswordVisible] = (0, import_react66.useState)(false);
+    const inputRef = (0, import_react66.useRef)(null);
+    const { passwordInput } = (0, import_react66.useContext)(HalstackLanguageContext);
+    (0, import_react66.useEffect)(() => {
       (() => {
         if (isPasswordVisible) {
           setInputType("text", inputRef.current);
@@ -11180,7 +11204,7 @@ var PasswordInput = import_styled_components58.default.div`
 var PasswordInput_default = DxcPasswordInput;
 
 // src/progress-bar/ProgressBar.tsx
-var import_react65 = require("react");
+var import_react67 = require("react");
 var import_styled_components59 = __toESM(require("styled-components"));
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var Overlay4 = import_styled_components59.default.div`
@@ -11300,10 +11324,10 @@ var DxcProgressBar = ({
   margin,
   ariaLabel = "Progress bar"
 }) => {
-  const colorsTheme = (0, import_react65.useContext)(HalstackContext);
-  const labelId = `label-${(0, import_react65.useId)()}`;
-  const [innerValue, setInnerValue] = (0, import_react65.useState)();
-  (0, import_react65.useEffect)(() => {
+  const colorsTheme = (0, import_react67.useContext)(HalstackContext);
+  const labelId = `label-${(0, import_react67.useId)()}`;
+  const [innerValue, setInnerValue] = (0, import_react67.useState)();
+  (0, import_react67.useEffect)(() => {
     if (value != null) setInnerValue(value < 0 ? 0 : value > 100 ? 100 : value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_styled_components59.ThemeProvider, { theme: colorsTheme.progressBar, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Overlay4, { overlay, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(MainContainer4, { overlay, margin, children: [
@@ -11333,23 +11357,43 @@ var DxcProgressBar = ({
 var ProgressBar_default = DxcProgressBar;
 
 // src/quick-nav/QuickNav.tsx
-var import_react66 = require("react");
+var import_react68 = require("react");
 var import_slugify = __toESM(require("slugify"));
 var import_styled_components60 = __toESM(require("styled-components"));
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var DxcQuickNav = ({ title, links }) => {
-  const translatedLabels = (0, import_react66.useContext)(HalstackLanguageContext);
-  const colorsTheme = (0, import_react66.useContext)(HalstackContext);
+  const translatedLabels = (0, import_react68.useContext)(HalstackLanguageContext);
+  const colorsTheme = (0, import_react68.useContext)(HalstackContext);
+  const isHashRouter = () => {
+    if (typeof window === "undefined") return false;
+    return window.location.href.includes("/#/");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_styled_components60.ThemeProvider, { theme: colorsTheme.quickNav, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(QuickNavContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Flex_default, { direction: "column", gap: "0.5rem", children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Heading_default, { level: 4, text: title || translatedLabels.quickNav.contentTitle }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ListColumn, { children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Inset_default, { space: "0.25rem", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(DxcTypography, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Link3, { href: `#${(0, import_slugify.default)(link.label, { lower: true })}`, children: link.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        Link3,
+        {
+          href: `#${(0, import_slugify.default)(link.label, { lower: true })}`,
+          onClick: isHashRouter() ? (e) => {
+            e.preventDefault();
+            const id = (0, import_slugify.default)(link.label, { lower: true });
+            document.getElementById(id)?.scrollIntoView();
+          } : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: link.label })
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Inset_default, { horizontal: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DxcTypography, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         Link3,
         {
           href: `#${(0, import_slugify.default)(link?.label, { lower: true })}-${(0, import_slugify.default)(sublink?.label, {
             lower: true
           })}`,
+          onClick: isHashRouter() ? (e) => {
+            e.preventDefault();
+            const id = `${(0, import_slugify.default)(link.label, { lower: true })}-${(0, import_slugify.default)(sublink.label, { lower: true })}`;
+            document.getElementById(id)?.scrollIntoView();
+          } : void 0,
           children: sublink.label
         }
       ) }) }) }, sublink.label)) })
@@ -11405,11 +11449,11 @@ var Link3 = import_styled_components60.default.a`
 var QuickNav_default = DxcQuickNav;
 
 // src/radio-group/RadioGroup.tsx
-var import_react68 = require("react");
+var import_react70 = require("react");
 var import_styled_components62 = __toESM(require("styled-components"));
 
 // src/radio-group/Radio.tsx
-var import_react67 = require("react");
+var import_react69 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var DxcRadio = ({
@@ -11422,15 +11466,15 @@ var DxcRadio = ({
   readOnly,
   tabIndex
 }) => {
-  const radioLabelId = `radio-${(0, import_react67.useId)()}`;
-  const ref = (0, import_react67.useRef)(null);
-  const colorsTheme = (0, import_react67.useContext)(HalstackContext);
+  const radioLabelId = `radio-${(0, import_react69.useId)()}`;
+  const ref = (0, import_react69.useRef)(null);
+  const colorsTheme = (0, import_react69.useContext)(HalstackContext);
   const handleOnClick = () => {
     onClick();
     document.activeElement !== ref.current && ref.current?.focus();
   };
-  const [firstUpdate, setFirstUpdate] = (0, import_react67.useState)(true);
-  (0, import_react67.useEffect)(() => {
+  const [firstUpdate, setFirstUpdate] = (0, import_react69.useState)(true);
+  (0, import_react69.useEffect)(() => {
     if (firstUpdate) {
       setFirstUpdate(false);
       return;
@@ -11535,7 +11579,7 @@ var RadioContainer = import_styled_components61.default.span`
     }
   }
 `;
-var Radio_default = (0, import_react67.memo)(DxcRadio);
+var Radio_default = (0, import_react69.memo)(DxcRadio);
 
 // src/radio-group/RadioGroup.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
@@ -11543,7 +11587,7 @@ var getInitialFocusIndex = (innerOptions, value) => {
   const initialSelectedOptionIndex = innerOptions.findIndex((option) => option.value === value);
   return initialSelectedOptionIndex !== -1 ? initialSelectedOptionIndex : 0;
 };
-var DxcRadioGroup = (0, import_react68.forwardRef)(
+var DxcRadioGroup = (0, import_react70.forwardRef)(
   ({
     label,
     name,
@@ -11562,14 +11606,14 @@ var DxcRadioGroup = (0, import_react68.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Radio group"
   }, ref) => {
-    const radioGroupId = `radio-group-${(0, import_react68.useId)()}`;
+    const radioGroupId = `radio-group-${(0, import_react70.useId)()}`;
     const radioGroupLabelId = `label-${radioGroupId}`;
     const errorId = `error-${radioGroupId}`;
-    const [innerValue, setInnerValue] = (0, import_react68.useState)(defaultValue);
-    const [firstTimeFocus, setFirstTimeFocus] = (0, import_react68.useState)(true);
-    const colorsTheme = (0, import_react68.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react68.useContext)(HalstackLanguageContext);
-    const innerOptions = (0, import_react68.useMemo)(
+    const [innerValue, setInnerValue] = (0, import_react70.useState)(defaultValue);
+    const [firstTimeFocus, setFirstTimeFocus] = (0, import_react70.useState)(true);
+    const colorsTheme = (0, import_react70.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react70.useContext)(HalstackLanguageContext);
+    const innerOptions = (0, import_react70.useMemo)(
       () => optional ? [
         ...options,
         {
@@ -11580,8 +11624,8 @@ var DxcRadioGroup = (0, import_react68.forwardRef)(
       ] : options,
       [optional, options, optionalItemLabel, translatedLabels]
     );
-    const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react68.useState)(getInitialFocusIndex(innerOptions, value ?? innerValue));
-    const handleOnChange = (0, import_react68.useCallback)(
+    const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react70.useState)(getInitialFocusIndex(innerOptions, value ?? innerValue));
+    const handleOnChange = (0, import_react70.useCallback)(
       (newValue) => {
         const currentValue = value ?? innerValue;
         if (newValue !== currentValue && !readOnly) {
@@ -11760,7 +11804,7 @@ var ErrorMessageContainer2 = import_styled_components62.default.span`
 var RadioGroup_default = DxcRadioGroup;
 
 // src/resultset-table/ResultsetTable.tsx
-var import_react69 = require("react");
+var import_react71 = require("react");
 var import_styled_components63 = __toESM(require("styled-components"));
 
 // src/resultset-table/Icons.tsx
@@ -11816,22 +11860,22 @@ var DxcResultsetTable = ({
   tabIndex = 0,
   mode = "default"
 }) => {
-  const colorsTheme = (0, import_react69.useContext)(HalstackContext);
-  const [page, changePage] = (0, import_react69.useState)(1);
-  const [sortColumnIndex, changeSortColumnIndex] = (0, import_react69.useState)(-1);
-  const [sortOrder, changeSortOrder] = (0, import_react69.useState)("ascending");
-  const prevRowCountRef = (0, import_react69.useRef)(rows.length);
-  const rowsWithIds = (0, import_react69.useMemo)(() => assignIdsToRows(rows), [rows]);
-  const minItemsPerPageIndex = (0, import_react69.useMemo)(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = (0, import_react69.useMemo)(
+  const colorsTheme = (0, import_react71.useContext)(HalstackContext);
+  const [page, changePage] = (0, import_react71.useState)(1);
+  const [sortColumnIndex, changeSortColumnIndex] = (0, import_react71.useState)(-1);
+  const [sortOrder, changeSortOrder] = (0, import_react71.useState)("ascending");
+  const prevRowCountRef = (0, import_react71.useRef)(rows.length);
+  const rowsWithIds = (0, import_react71.useMemo)(() => assignIdsToRows(rows), [rows]);
+  const minItemsPerPageIndex = (0, import_react71.useMemo)(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
+  const maxItemsPerPageIndex = (0, import_react71.useMemo)(
     () => getMaxItemsPerPageIndex2(minItemsPerPageIndex, itemsPerPage, rows, page),
     [itemsPerPage, minItemsPerPageIndex, page, rows]
   );
-  const sortedResultset = (0, import_react69.useMemo)(
+  const sortedResultset = (0, import_react71.useMemo)(
     () => sortColumnIndex !== -1 ? sortArray(sortColumnIndex, sortOrder, rowsWithIds) : rowsWithIds,
     [sortColumnIndex, sortOrder, rowsWithIds]
   );
-  const filteredResultset = (0, import_react69.useMemo)(
+  const filteredResultset = (0, import_react71.useMemo)(
     () => sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1),
     [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]
   );
@@ -11845,7 +11889,7 @@ var DxcResultsetTable = ({
       sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending"
     );
   };
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (!hidePaginator) {
       if (rows.length === 0) {
         changePage(0);
@@ -11944,7 +11988,7 @@ DxcResultsetTable.ActionsCell = DxcActionsCell;
 var ResultsetTable_default = DxcResultsetTable;
 
 // src/slider/Slider.tsx
-var import_react70 = require("react");
+var import_react72 = require("react");
 var import_styled_components64 = __toESM(require("styled-components"));
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var sizes6 = {
@@ -12115,7 +12159,7 @@ var TextInputContainer2 = import_styled_components64.default.div`
   margin-left: ${(props) => props.theme.inputMarginLeft};
   max-width: 70px;
 `;
-var DxcSlider = (0, import_react70.forwardRef)(
+var DxcSlider = (0, import_react72.forwardRef)(
   ({
     label = "",
     name = "",
@@ -12136,20 +12180,20 @@ var DxcSlider = (0, import_react70.forwardRef)(
     size = "fillParent",
     ariaLabel = "Slider"
   }, ref) => {
-    const labelId = `label-${(0, import_react70.useId)()}`;
-    const [innerValue, setInnerValue] = (0, import_react70.useState)(defaultValue ?? 0);
-    const [dragging, setDragging] = (0, import_react70.useState)(false);
-    const colorsTheme = (0, import_react70.useContext)(HalstackContext);
+    const labelId = `label-${(0, import_react72.useId)()}`;
+    const [innerValue, setInnerValue] = (0, import_react72.useState)(defaultValue ?? 0);
+    const [dragging, setDragging] = (0, import_react72.useState)(false);
+    const colorsTheme = (0, import_react72.useContext)(HalstackContext);
     const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
-    const minLabel = (0, import_react70.useMemo)(
+    const minLabel = (0, import_react72.useMemo)(
       () => labelFormatCallback ? labelFormatCallback(minValue) : minValue,
       [labelFormatCallback, minValue]
     );
-    const maxLabel = (0, import_react70.useMemo)(
+    const maxLabel = (0, import_react72.useMemo)(
       () => labelFormatCallback ? labelFormatCallback(maxValue) : maxValue,
       [labelFormatCallback, maxValue]
     );
-    const tickMarks = (0, import_react70.useMemo)(() => {
+    const tickMarks = (0, import_react72.useMemo)(() => {
       const numberOfMarks = Math.floor(maxValue / step - minValue / step);
       const range = maxValue - minValue;
       const ticks = [];
@@ -12275,10 +12319,10 @@ var StatusLabel = import_styled_components65.default.span`
 var StatusLight_default = DxcStatusLight;
 
 // src/switch/Switch.tsx
-var import_react71 = require("react");
+var import_react73 = require("react");
 var import_styled_components66 = __toESM(require("styled-components"));
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var DxcSwitch = (0, import_react71.forwardRef)(
+var DxcSwitch = (0, import_react73.forwardRef)(
   ({
     defaultChecked = false,
     checked,
@@ -12294,12 +12338,12 @@ var DxcSwitch = (0, import_react71.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Switch"
   }, ref) => {
-    const switchId = `switch-${(0, import_react71.useId)()}`;
+    const switchId = `switch-${(0, import_react73.useId)()}`;
     const labelId = `label-${switchId}`;
-    const [innerChecked, setInnerChecked] = (0, import_react71.useState)(defaultChecked);
-    const colorsTheme = (0, import_react71.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react71.useContext)(HalstackLanguageContext);
-    const refTrack = (0, import_react71.useRef)(null);
+    const [innerChecked, setInnerChecked] = (0, import_react73.useState)(defaultChecked);
+    const colorsTheme = (0, import_react73.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react73.useContext)(HalstackLanguageContext);
+    const refTrack = (0, import_react73.useRef)(null);
     const handleOnKeyDown = (event) => {
       switch (event.key) {
         case "Enter":
@@ -12517,18 +12561,18 @@ var SwitchTrack = import_styled_components66.default.span`
 var Switch_default = DxcSwitch;
 
 // src/tabs/Tabs.tsx
-var import_react76 = require("react");
+var import_react78 = require("react");
 var import_styled_components70 = __toESM(require("styled-components"));
 
 // src/tabs/TabsContext.tsx
-var import_react72 = require("react");
-var TabsContext_default = (0, import_react72.createContext)(null);
+var import_react74 = require("react");
+var TabsContext_default = (0, import_react74.createContext)(null);
 
 // src/tabs/Tab.tsx
-var import_react73 = require("react");
+var import_react75 = require("react");
 var import_styled_components67 = __toESM(require("styled-components"));
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var DxcTab2 = (0, import_react73.forwardRef)(
+var DxcTab2 = (0, import_react75.forwardRef)(
   ({
     icon,
     label,
@@ -12542,7 +12586,7 @@ var DxcTab2 = (0, import_react73.forwardRef)(
     onHover = () => {
     }
   }, ref) => {
-    const tabRef = (0, import_react73.useRef)(null);
+    const tabRef = (0, import_react75.useRef)(null);
     const {
       iconPosition = "top",
       tabIndex = 0,
@@ -12553,19 +12597,19 @@ var DxcTab2 = (0, import_react73.forwardRef)(
       setActiveTab,
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
-    } = (0, import_react73.useContext)(TabsContext_default) ?? {};
-    (0, import_react73.useEffect)(() => {
+    } = (0, import_react75.useContext)(TabsContext_default) ?? {};
+    (0, import_react75.useEffect)(() => {
       if (focusedTab === tabId) {
         tabRef?.current?.focus();
       }
     }, [focusedTab, tabId]);
-    (0, import_react73.useEffect)(() => {
+    (0, import_react75.useEffect)(() => {
       if (activeTab === tabId) {
         setActiveIndicatorWidth?.(tabRef.current?.offsetWidth ?? 0);
         setActiveIndicatorLeft?.(tabRef.current?.offsetLeft ?? 0);
       }
     }, [activeTab, tabId, setActiveIndicatorWidth, setActiveIndicatorLeft]);
-    (0, import_react73.useEffect)(() => {
+    (0, import_react75.useEffect)(() => {
       if (active) {
         setActiveTab?.(tabId ?? label ?? "");
       }
@@ -12741,14 +12785,14 @@ var TabIconContainer2 = import_styled_components67.default.div`
 var Tab_default2 = DxcTab2;
 
 // src/tabs/TabsLegacy.tsx
-var import_react75 = require("react");
+var import_react77 = require("react");
 var import_styled_components69 = __toESM(require("styled-components"));
 
 // src/tabs/TabLegacy.tsx
-var import_react74 = require("react");
+var import_react76 = require("react");
 var import_styled_components68 = __toESM(require("styled-components"));
 var import_jsx_runtime76 = require("react/jsx-runtime");
-var Tab2 = (0, import_react74.forwardRef)(
+var Tab2 = (0, import_react76.forwardRef)(
   ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     TabContainer3,
     {
@@ -12892,16 +12936,16 @@ var TabIconContainer3 = import_styled_components68.default.div`
     width: 22px;
   }
 `;
-var TabLegacy_default = (0, import_react74.memo)(Tab2);
+var TabLegacy_default = (0, import_react76.memo)(Tab2);
 
 // src/tabs/TabsLegacy.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var useResize = (refTabList) => {
-  const [viewWidth, setViewWidth] = (0, import_react75.useState)(0);
-  const handleWindowSizeChange = (0, import_react75.useCallback)(() => {
+  const [viewWidth, setViewWidth] = (0, import_react77.useState)(0);
+  const handleWindowSizeChange = (0, import_react77.useCallback)(() => {
     setViewWidth(refTabList.current?.offsetWidth ?? 0);
   }, [refTabList]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return () => {
@@ -12920,28 +12964,28 @@ var DxcTabs = ({
   iconPosition = "top",
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react75.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react77.useContext)(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] = (0, import_react75.useState)(
+  const [innerActiveTabIndex, setInnerActiveTabIndex] = (0, import_react77.useState)(
     tabs != null && defaultActiveTabIndex && !tabs[defaultActiveTabIndex]?.isDisabled ? defaultActiveTabIndex : firstFocus
   );
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react75.useState)(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = (0, import_react75.useState)(0);
-  const [translateScroll, setTranslateScroll] = (0, import_react75.useState)(0);
-  const [scrollRightEnabled, setScrollRightEnabled] = (0, import_react75.useState)(true);
-  const [scrollLeftEnabled, setScrollLeftEnabled] = (0, import_react75.useState)(false);
-  const [countClick, setCountClick] = (0, import_react75.useState)(0);
-  const [totalTabsWidth, setTotalTabsWidth] = (0, import_react75.useState)(0);
-  const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react75.useState)(activeTabIndex ?? innerActiveTabIndex);
-  const [temporalFocusIndex, setTemporalFocusIndex] = (0, import_react75.useState)(activeTabIndex ?? innerActiveTabIndex);
-  const [minHeightTabs, setMinHeightTabs] = (0, import_react75.useState)(0);
-  const refTabs = (0, import_react75.useRef)([]);
-  const refTabList = (0, import_react75.useRef)(null);
+  const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react77.useState)(0);
+  const [activeIndicatorLeft, setActiveIndicatorLeft] = (0, import_react77.useState)(0);
+  const [translateScroll, setTranslateScroll] = (0, import_react77.useState)(0);
+  const [scrollRightEnabled, setScrollRightEnabled] = (0, import_react77.useState)(true);
+  const [scrollLeftEnabled, setScrollLeftEnabled] = (0, import_react77.useState)(false);
+  const [countClick, setCountClick] = (0, import_react77.useState)(0);
+  const [totalTabsWidth, setTotalTabsWidth] = (0, import_react77.useState)(0);
+  const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react77.useState)(activeTabIndex ?? innerActiveTabIndex);
+  const [temporalFocusIndex, setTemporalFocusIndex] = (0, import_react77.useState)(activeTabIndex ?? innerActiveTabIndex);
+  const [minHeightTabs, setMinHeightTabs] = (0, import_react77.useState)(0);
+  const refTabs = (0, import_react77.useRef)([]);
+  const refTabList = (0, import_react77.useRef)(null);
   const viewWidth = useResize(refTabList);
-  const translatedLabels = (0, import_react75.useContext)(HalstackLanguageContext);
-  const enabledIndicator = (0, import_react75.useMemo)(() => viewWidth < totalTabsWidth, [viewWidth]);
-  (0, import_react75.useEffect)(() => {
+  const translatedLabels = (0, import_react77.useContext)(HalstackLanguageContext);
+  const enabledIndicator = (0, import_react77.useMemo)(() => viewWidth < totalTabsWidth, [viewWidth]);
+  (0, import_react77.useEffect)(() => {
     if (activeTabIndex != null || innerActiveTabIndex != null) {
       const sumWidth = refTabs.current?.reduce((count, obj) => count + obj.offsetWidth, 0);
       setTotalTabsWidth(sumWidth);
@@ -12949,10 +12993,10 @@ var DxcTabs = ({
       setActiveIndicatorLeft(refTabs.current[activeTabIndex ?? innerActiveTabIndex]?.offsetLeft ?? 0);
     }
   }, [activeTabIndex, innerActiveTabIndex]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     setMinHeightTabs((refTabList.current?.offsetHeight ?? 0) + 1);
   }, []);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (activeTabIndex && activeTabIndex >= 0) {
       setActiveIndicatorWidth(refTabs.current[activeTabIndex]?.offsetWidth ?? 0);
       setActiveIndicatorLeft(refTabs.current[activeTabIndex]?.offsetLeft ?? 0);
@@ -13263,11 +13307,11 @@ var TabsLegacy_default = DxcTabs;
 // src/tabs/Tabs.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var useResize2 = (refTabList) => {
-  const [viewWidth, setViewWidth] = (0, import_react76.useState)(0);
-  const handleWindowSizeChange = (0, import_react76.useCallback)(() => {
+  const [viewWidth, setViewWidth] = (0, import_react78.useState)(0);
+  const handleWindowSizeChange = (0, import_react78.useCallback)(() => {
     setViewWidth(refTabList?.current?.offsetWidth ?? 0);
   }, [refTabList]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return () => {
@@ -13301,51 +13345,50 @@ var DxcTabs2 = ({
   tabIndex = 0,
   children
 }) => {
-  const childrenArray = (0, import_react76.useMemo)(
-    () => import_react76.Children.toArray(children),
+  const childrenArray = (0, import_react78.useMemo)(
+    () => import_react78.Children.toArray(children),
     [children]
   );
-  const hasLabelAndIcon = (0, import_react76.useMemo)(
-    () => childrenArray.some((child) => (0, import_react76.isValidElement)(child) && child.props.icon && child.props.label),
+  const hasLabelAndIcon = (0, import_react78.useMemo)(
+    () => childrenArray.some((child) => (0, import_react78.isValidElement)(child) && child.props.icon && child.props.label),
     [childrenArray]
   );
-  const [activeTab, setActiveTab] = (0, import_react76.useState)(() => {
+  const [activeTab, setActiveTab] = (0, import_react78.useState)(() => {
     const hasActiveChild = childrenArray.some(
-      (child) => (0, import_react76.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
+      (child) => (0, import_react78.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     );
     const initialActiveTab = hasActiveChild ? childrenArray.find(
-      (child) => (0, import_react76.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
-    ) : childrenArray.find((child) => (0, import_react76.isValidElement)(child) && !child.props.disabled);
-    return (0, import_react76.isValidElement)(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
+      (child) => (0, import_react78.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
+    ) : childrenArray.find((child) => (0, import_react78.isValidElement)(child) && !child.props.disabled);
+    return (0, import_react78.isValidElement)(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
-  const [innerFocusIndex, setInnerFocusIndex] = (0, import_react76.useState)(null);
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react76.useState)(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = (0, import_react76.useState)(0);
-  const [countClick, setCountClick] = (0, import_react76.useState)(0);
-  const [totalTabsWidth, setTotalTabsWidth] = (0, import_react76.useState)(0);
-  const [translateScroll, setTranslateScroll] = (0, import_react76.useState)(0);
-  const [scrollRightEnabled, setScrollRightEnabled] = (0, import_react76.useState)(true);
-  const [scrollLeftEnabled, setScrollLeftEnabled] = (0, import_react76.useState)(false);
-  const [minHeightTabs, setMinHeightTabs] = (0, import_react76.useState)(0);
-  const refTabList = (0, import_react76.useRef)(null);
-  const refTabListContainer = (0, import_react76.useRef)(null);
-  const colorsTheme = (0, import_react76.useContext)(HalstackContext);
+  const [innerFocusIndex, setInnerFocusIndex] = (0, import_react78.useState)(null);
+  const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react78.useState)(0);
+  const [activeIndicatorLeft, setActiveIndicatorLeft] = (0, import_react78.useState)(0);
+  const [totalTabsWidth, setTotalTabsWidth] = (0, import_react78.useState)(0);
+  const [translateScroll, setTranslateScroll] = (0, import_react78.useState)(0);
+  const [scrollRightEnabled, setScrollRightEnabled] = (0, import_react78.useState)(true);
+  const [scrollLeftEnabled, setScrollLeftEnabled] = (0, import_react78.useState)(false);
+  const [minHeightTabs, setMinHeightTabs] = (0, import_react78.useState)(0);
+  const refTabList = (0, import_react78.useRef)(null);
+  const refTabListContainer = (0, import_react78.useRef)(null);
+  const colorsTheme = (0, import_react78.useContext)(HalstackContext);
   const viewWidth = useResize2(refTabList);
-  const translatedLabels = (0, import_react76.useContext)(HalstackLanguageContext);
-  const enabledIndicator = (0, import_react76.useMemo)(() => viewWidth < totalTabsWidth, [viewWidth]);
-  (0, import_react76.useEffect)(() => {
+  const translatedLabels = (0, import_react78.useContext)(HalstackLanguageContext);
+  const enabledIndicator = (0, import_react78.useMemo)(() => viewWidth < totalTabsWidth, [viewWidth]);
+  (0, import_react78.useEffect)(() => {
     if (refTabList.current) {
       setTotalTabsWidth(refTabList.current.firstElementChild?.offsetWidth);
       setMinHeightTabs(refTabList.current.offsetHeight + 1);
     }
   }, []);
-  const contextValue = (0, import_react76.useMemo)(() => {
+  const contextValue = (0, import_react78.useMemo)(() => {
     const focusedChild = innerFocusIndex != null ? childrenArray[innerFocusIndex] : null;
     return {
       iconPosition,
       tabIndex,
-      focusedTab: (0, import_react76.isValidElement)(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
-      isControlled: childrenArray.some((child) => (0, import_react76.isValidElement)(child) && typeof child.props.active !== "undefined"),
+      focusedTab: (0, import_react78.isValidElement)(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
+      isControlled: childrenArray.some((child) => (0, import_react78.isValidElement)(child) && typeof child.props.active !== "undefined"),
       activeTab,
       hasLabelAndIcon,
       setActiveTab,
@@ -13406,7 +13449,7 @@ var DxcTabs2 = ({
       scrollLimitCheck();
     }, 0);
   };
-  (0, import_react76.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (refTabList.current)
       setTotalTabsWidth(() => {
         let total = 0;
@@ -13418,8 +13461,10 @@ var DxcTabs2 = ({
         });
         return total;
       });
-    scrollLimitCheck();
-  }, [viewWidth, totalTabsWidth]);
+    setTimeout(() => {
+      scrollLimitCheck();
+    }, 0);
+  }, [viewWidth, totalTabsWidth, activeTab]);
   return children ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_styled_components70.ThemeProvider, { theme: colorsTheme.tabs, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(TabsContainer2, { margin, children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Underline3, {}),
@@ -13444,7 +13489,7 @@ var DxcTabs2 = ({
               tabWidth: activeIndicatorWidth,
               tabLeft: activeIndicatorLeft,
               "aria-disabled": childrenArray.some(
-                (child) => (0, import_react76.isValidElement)(child) && activeTab === (child.props.label ?? child.props.tabId) && child.props.disabled
+                (child) => (0, import_react78.isValidElement)(child) && activeTab === (child.props.label ?? child.props.tabId) && child.props.disabled
               )
             }
           )
@@ -13463,8 +13508,8 @@ var DxcTabs2 = ({
         )
       ] })
     ] }) }),
-    import_react76.Children.map(children, (child) => {
-      if ((0, import_react76.isValidElement)(child) && (child.props.label ?? child.props.tabId) === activeTab) {
+    import_react78.Children.map(children, (child) => {
+      if ((0, import_react78.isValidElement)(child) && (child.props.label ?? child.props.tabId) === activeTab) {
         return child.props.children;
       }
       return null;
@@ -13588,7 +13633,7 @@ DxcTabs2.Tab = Tab_default2;
 var Tabs_default = DxcTabs2;
 
 // src/tag/Tag.tsx
-var import_react77 = require("react");
+var import_react79 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var TagWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: condition ? wrapper(children) : children });
@@ -13604,8 +13649,8 @@ var DxcTag = ({
   size = "fitContent",
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react77.useContext)(HalstackContext);
-  const [isHovered, changeIsHovered] = (0, import_react77.useState)(false);
+  const colorsTheme = (0, import_react79.useContext)(HalstackContext);
+  const [isHovered, changeIsHovered] = (0, import_react79.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_styled_components71.ThemeProvider, { theme: colorsTheme.tag, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     StyledDxcTag,
     {
@@ -13716,11 +13761,11 @@ var TagLabel = import_styled_components71.default.div`
 var Tag_default = DxcTag;
 
 // src/textarea/Textarea.tsx
-var import_react78 = require("react");
+var import_react80 = require("react");
 var import_styled_components72 = __toESM(require("styled-components"));
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var patternMatch = (pattern, value) => new RegExp(pattern).test(value);
-var DxcTextarea = (0, import_react78.forwardRef)(
+var DxcTextarea = (0, import_react80.forwardRef)(
   ({
     label,
     name = "",
@@ -13745,12 +13790,12 @@ var DxcTextarea = (0, import_react78.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Text area"
   }, ref) => {
-    const [innerValue, setInnerValue] = (0, import_react78.useState)(defaultValue);
-    const textareaId = `textarea-${(0, import_react78.useId)()}`;
-    const colorsTheme = (0, import_react78.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react78.useContext)(HalstackLanguageContext);
-    const textareaRef = (0, import_react78.useRef)(null);
-    const prevValueRef = (0, import_react78.useRef)(null);
+    const [innerValue, setInnerValue] = (0, import_react80.useState)(defaultValue);
+    const textareaId = `textarea-${(0, import_react80.useId)()}`;
+    const colorsTheme = (0, import_react80.useContext)(HalstackContext);
+    const translatedLabels = (0, import_react80.useContext)(HalstackLanguageContext);
+    const textareaRef = (0, import_react80.useRef)(null);
+    const prevValueRef = (0, import_react80.useRef)(null);
     const errorId = `error-${textareaId}`;
     const isNotOptional = (value2) => value2 === "" && !optional;
     const isLengthIncorrect2 = (value2) => value2 !== "" && minLength && maxLength && (value2.length < minLength || value2.length > maxLength);
@@ -13800,7 +13845,7 @@ var DxcTextarea = (0, import_react78.forwardRef)(
     const handleOnChange = (event) => {
       changeValue(event.target.value);
     };
-    (0, import_react78.useEffect)(() => {
+    (0, import_react80.useEffect)(() => {
       if (verticalGrow === "auto" && prevValueRef.current !== (value ?? innerValue) && textareaRef.current) {
         const computedStyle = window.getComputedStyle(textareaRef.current);
         const textareaLineHeight = parseInt(computedStyle.lineHeight || "0", 10);
@@ -13944,24 +13989,24 @@ var ErrorMessageContainer3 = import_styled_components72.default.span`
 var Textarea_default = DxcTextarea;
 
 // src/toast/ToastsQueue.tsx
-var import_react82 = require("react");
+var import_react84 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_styled_components74 = __toESM(require("styled-components"));
 
 // src/toast/Toast.tsx
-var import_react80 = require("react");
+var import_react82 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
 
 // src/utils/useTimeout.tsx
-var import_react79 = require("react");
+var import_react81 = require("react");
 function useTimeout(callback, delay) {
-  const savedCallback = (0, import_react79.useRef)();
-  const timerRef = (0, import_react79.useRef)();
-  const clearTimerCallback = (0, import_react79.useCallback)(() => clearTimeout(timerRef.current), []);
-  (0, import_react79.useEffect)(() => {
+  const savedCallback = (0, import_react81.useRef)();
+  const timerRef = (0, import_react81.useRef)();
+  const clearTimerCallback = (0, import_react81.useCallback)(() => clearTimeout(timerRef.current), []);
+  (0, import_react81.useEffect)(() => {
     savedCallback.current = callback;
   }, [callback]);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     function tick() {
       savedCallback.current?.();
     }
@@ -14065,7 +14110,7 @@ var spinnerTheme = {
     accentColor: getSemantic("info").primaryColor
   }
 };
-var ToastIcon = (0, import_react80.memo)(
+var ToastIcon = (0, import_react82.memo)(
   ({
     icon,
     hideSemanticIcon,
@@ -14088,8 +14133,8 @@ var DxcToast = ({
   onClear,
   semantic
 }) => {
-  const [isClosing, setIsClosing] = (0, import_react80.useState)(false);
-  const translatedLabels = (0, import_react80.useContext)(HalstackLanguageContext);
+  const [isClosing, setIsClosing] = (0, import_react82.useState)(false);
+  const translatedLabels = (0, import_react82.useContext)(HalstackLanguageContext);
   const clearClosingAnimationTimer = useTimeout(
     () => {
       setIsClosing(true);
@@ -14139,11 +14184,11 @@ var DxcToast = ({
     ] })
   ] });
 };
-var Toast_default = (0, import_react80.memo)(DxcToast);
+var Toast_default = (0, import_react82.memo)(DxcToast);
 
 // src/toast/ToastContext.tsx
-var import_react81 = require("react");
-var ToastContext_default = (0, import_react81.createContext)(null);
+var import_react83 = require("react");
+var ToastContext_default = (0, import_react83.createContext)(null);
 
 // src/toast/ToastsQueue.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
@@ -14174,24 +14219,26 @@ var generateUniqueToastId = (toasts) => {
   return id;
 };
 var DxcToastsQueue = ({ children, duration = 3e3 }) => {
-  const [toasts, setToasts] = (0, import_react82.useState)([]);
-  const [isMounted, setIsMounted] = (0, import_react82.useState)(false);
-  const adjustedDuration = (0, import_react82.useMemo)(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
-  const remove = (0, import_react82.useCallback)((id) => {
-    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+  const [toasts, setToasts] = (0, import_react84.useState)([]);
+  const [isMounted, setIsMounted] = (0, import_react84.useState)(false);
+  const adjustedDuration = (0, import_react84.useMemo)(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
+  const id = (0, import_react84.useId)();
+  const remove = (0, import_react84.useCallback)((id2) => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id2));
   }, []);
-  const add = (0, import_react82.useCallback)(
+  const add = (0, import_react84.useCallback)(
     (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]
   );
-  (0, import_react82.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     setIsMounted(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(ToastContext_default.Provider, { value: add, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { id: `toasts-${id}-portal`, style: { position: "absolute" } }),
     isMounted && (0, import_react_dom3.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         Toast_default,
@@ -14204,7 +14251,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
         },
         t.id
       )) }),
-      document.body
+      document.getElementById(`toasts-${id}-portal`) || document.body
     ),
     children
   ] });
@@ -14212,7 +14259,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
 var ToastsQueue_default = DxcToastsQueue;
 
 // src/toggle-group/ToggleGroup.tsx
-var import_react83 = require("react");
+var import_react85 = require("react");
 var import_styled_components75 = __toESM(require("styled-components"));
 var import_jsx_runtime83 = require("react/jsx-runtime");
 var DxcToggleGroup = ({
@@ -14227,9 +14274,9 @@ var DxcToggleGroup = ({
   multiple = false,
   tabIndex = 0
 }) => {
-  const toggleGroupLabelId = `label-toggle-group-${(0, import_react83.useId)()}`;
-  const [selectedValue, setSelectedValue] = (0, import_react83.useState)(defaultValue ?? (multiple ? [] : -1));
-  const colorsTheme = (0, import_react83.useContext)(HalstackContext);
+  const toggleGroupLabelId = `label-toggle-group-${(0, import_react85.useId)()}`;
+  const [selectedValue, setSelectedValue] = (0, import_react85.useState)(defaultValue ?? (multiple ? [] : -1));
+  const colorsTheme = (0, import_react85.useContext)(HalstackContext);
   const handleToggleChange = (selectedOption) => {
     let newSelectedOptions = [];
     if (value == null) {
@@ -14381,7 +14428,7 @@ var IconContainer7 = import_styled_components75.default.div`
 var ToggleGroup_default = DxcToggleGroup;
 
 // src/wizard/Wizard.tsx
-var import_react84 = require("react");
+var import_react86 = require("react");
 var import_styled_components76 = __toESM(require("styled-components"));
 
 // src/wizard/Icons.tsx
@@ -14555,9 +14602,9 @@ var DxcWizard = ({
   margin,
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react84.useContext)(HalstackContext);
-  const [innerCurrent, setInnerCurrentStep] = (0, import_react84.useState)(defaultCurrentStep);
-  const renderedCurrent = (0, import_react84.useMemo)(() => currentStep ?? innerCurrent, [currentStep, innerCurrent]);
+  const colorsTheme = (0, import_react86.useContext)(HalstackContext);
+  const [innerCurrent, setInnerCurrentStep] = (0, import_react86.useState)(defaultCurrentStep);
+  const renderedCurrent = (0, import_react86.useMemo)(() => currentStep ?? innerCurrent, [currentStep, innerCurrent]);
   const handleStepClick = (newValue) => {
     setInnerCurrentStep(newValue);
     onStepClick?.(newValue);
@@ -14593,10 +14640,10 @@ var DxcWizard = ({
 var Wizard_default = DxcWizard;
 
 // src/toast/useToast.tsx
-var import_react85 = require("react");
+var import_react87 = require("react");
 var useToast = () => {
-  const add = (0, import_react85.useContext)(ToastContext_default);
-  const toast = (0, import_react85.useMemo)(
+  const add = (0, import_react87.useContext)(ToastContext_default);
+  const toast = (0, import_react87.useMemo)(
     () => ({
       default: (toast2) => add?.(toast2, "default"),
       success: (toast2) => add?.(toast2, "success"),