@dxc-technology/halstack-react 15.2.2 → 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_react12 = 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,7 +3176,7 @@ var FocusLock = ({ children }) => {
 var FocusLock_default = FocusLock;
 
 // src/alert/ModalAlertWrapper.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var BodyStyle = import_styled_components10.createGlobalStyle`
   body {
@@ -3213,9 +3210,9 @@ var ModalAlertContainer = import_styled_components10.default.div`
   }
 `;
 var ModalAlertWrapper = ({ condition, onClose, children }) => {
-  const id = (0, import_react11.useId)();
-  const [portalContainer, setPortalContainer] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  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: [
@@ -3279,7 +3276,7 @@ var NavigationText = import_styled_components11.default.span`
   ${typographyStyles}
   white-space: nowrap;
 `;
-var Actions = (0, import_react12.memo)(
+var Actions = (0, import_react13.memo)(
   ({
     mode,
     primaryAction,
@@ -3330,15 +3327,15 @@ function DxcAlert({
   semantic = "info",
   title = ""
 }) {
-  const [messages, setMessages] = (0, import_react12.useState)(Array.isArray(message) ? message : [message]);
-  const [currentIndex, setCurrentIndex] = (0, import_react12.useState)(0);
-  const id = (0, import_react12.useId)();
-  const colorsTheme = (0, import_react12.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react12.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_react12.useCallback)(() => {
+  const handlePrevOnClick = (0, import_react13.useCallback)(() => {
     setCurrentIndex((prevIndex) => prevIndex > 0 ? prevIndex - 1 : prevIndex);
   }, []);
   const handleOnClose = () => {
@@ -3347,7 +3344,7 @@ function DxcAlert({
       setMessages((prevMessages) => prevMessages.filter((_, index) => index !== currentIndex));
     }
   };
-  (0, import_react12.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)(
@@ -3436,11 +3433,11 @@ function DxcAlert({
 }
 
 // src/layout/ApplicationLayout.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/footer/Footer.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
 
 // src/footer/Icons.tsx
@@ -3643,9 +3640,9 @@ var DxcFooter = ({
   tabIndex = 0,
   mode = "default"
 }) => {
-  const colorsTheme = (0, import_react13.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react13.useContext)(HalstackLanguageContext);
-  const footerLogo = (0, import_react13.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]
   );
@@ -3792,19 +3789,19 @@ var BottomLink = import_styled_components12.default.a`
 var Footer_default = DxcFooter;
 
 // src/header/Header.tsx
-var import_react18 = 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_react17 = require("react");
+var import_react18 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/utils/useWidth.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var useWidth = (target) => {
-  const [width, setWidth] = (0, import_react14.useState)(0);
-  (0, import_react14.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) => {
@@ -3824,11 +3821,11 @@ var useWidth = (target) => {
 var useWidth_default = useWidth;
 
 // src/dropdown/DropdownMenu.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/dropdown/DropdownMenuItem.tsx
-var import_react15 = 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 = ({
@@ -3893,11 +3890,11 @@ var DropdownMenuItemIcon = import_styled_components13.default.div`
     height: ${(props) => props.theme.optionIconSize};
   }
 `;
-var DropdownMenuItem_default = (0, import_react15.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_react16.forwardRef)(
+var DropdownMenu = (0, import_react17.forwardRef)(
   ({ id, dropdownTriggerId, iconsPosition, visualFocusIndex, menuItemOnClick, onKeyDown, options, styles }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     DropdownMenuContainer,
     {
@@ -3957,7 +3954,7 @@ var DropdownMenuContainer = import_styled_components14.default.ul`
     border-radius: 6px;
   }
 `;
-var DropdownMenu_default = (0, import_react16.memo)(DropdownMenu);
+var DropdownMenu_default = (0, import_react17.memo)(DropdownMenu);
 
 // src/dropdown/Dropdown.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -3976,14 +3973,14 @@ var DxcDropdown = ({
   tabIndex = 0,
   title
 }) => {
-  const id = (0, import_react17.useId)();
+  const id = (0, import_react18.useId)();
   const triggerId = `trigger-${id}`;
   const menuId = `menu-${id}`;
-  const [isOpen, changeIsOpen] = (0, import_react17.useState)(false);
-  const [visualFocusIndex, setVisualFocusIndex] = (0, import_react17.useState)(0);
-  const colorsTheme = (0, import_react17.useContext)(HalstackContext);
-  const triggerRef = (0, import_react17.useRef)(null);
-  const menuRef = (0, import_react17.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);
@@ -3992,7 +3989,7 @@ var DxcDropdown = ({
     changeIsOpen(false);
     setVisualFocusIndex(0);
   };
-  const handleMenuItemOnClick = (0, import_react17.useCallback)(
+  const handleMenuItemOnClick = (0, import_react18.useCallback)(
     (value) => {
       if (value) onSelectOption(value);
       handleOnCloseMenu();
@@ -4039,7 +4036,7 @@ var DxcDropdown = ({
       return index;
     });
   };
-  const handleMenuOnKeyDown = (0, import_react17.useCallback)(
+  const handleMenuOnKeyDown = (0, import_react18.useCallback)(
     (event) => {
       switch (event.key) {
         case "Up":
@@ -4086,7 +4083,7 @@ var DxcDropdown = ({
     },
     [onSelectOption, visualFocusIndex, options]
   );
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const visualFocusedMenuItem = menuRef.current?.querySelectorAll("[role='menuitem']")[visualFocusIndex];
     visualFocusedMenuItem?.scrollIntoView?.({
       block: "nearest",
@@ -4252,7 +4249,7 @@ var CaretIcon = import_styled_components15.default.span`
 var Dropdown_default = DxcDropdown;
 
 // src/header/Header.tsx
-var import_react19 = 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) => {
@@ -4290,11 +4287,11 @@ var DxcHeader = ({
   margin,
   tabIndex = 0
 }) => {
-  const [isResponsive, setIsResponsive] = (0, import_react18.useState)(false);
-  const [isMenuVisible, setIsMenuVisible] = (0, import_react18.useState)(false);
-  const colorsTheme = (0, import_react19.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react19.useContext)(HalstackLanguageContext);
-  const ref = (0, import_react18.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);
@@ -4302,15 +4299,15 @@ var DxcHeader = ({
       setIsMenuVisible(!isMenuVisible);
     }
   };
-  const headerLogo = (0, import_react18.useMemo)(
+  const headerLogo = (0, import_react19.useMemo)(
     () => getLogoElement(colorsTheme.header.logo, translatedLabels.formFields.logoAlternativeText),
     [colorsTheme, translatedLabels]
   );
-  const headerResponsiveLogo = (0, import_react18.useMemo)(
+  const headerResponsiveLogo = (0, import_react19.useMemo)(
     () => getLogoElement(colorsTheme.header.logoResponsive, translatedLabels.formFields.logoAlternativeText),
     [colorsTheme, translatedLabels]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
     };
@@ -4320,7 +4317,7 @@ var DxcHeader = ({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isResponsive) {
       setIsMenuVisible(false);
     }
@@ -4517,7 +4514,7 @@ var Overlay2 = import_styled_components16.default.div`
 var Header_default = DxcHeader;
 
 // src/sidenav/Sidenav.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 
 // src/bleed/Bleed.tsx
@@ -4547,20 +4544,20 @@ var Bleed = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Bleed_default = Bleed;
 
 // src/sidenav/SidenavContext.tsx
-var import_react20 = require("react");
-var SidenavContext = (0, import_react20.createContext)(null);
-var GroupContext = (0, import_react20.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_react20.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_react21.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 })
@@ -4572,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_react21.useState)(false);
-  const [isSelected, changeIsSelected] = (0, import_react21.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,
@@ -4596,15 +4593,15 @@ var Group = ({ title, collapsable = false, icon, children }) => {
     !collapsed && children
   ] }) });
 };
-var Link = (0, import_react21.forwardRef)(
+var Link = (0, import_react22.forwardRef)(
   ({ href, newWindow = false, selected = false, icon, onClick, tabIndex = 0, children, ...otherProps }, ref) => {
-    const changeIsGroupSelected = (0, import_react21.useContext)(GroupContext);
+    const changeIsGroupSelected = (0, import_react22.useContext)(GroupContext);
     const setIsSidenavVisibleResponsive = useResponsiveSidenavVisibility();
     const handleClick = ($event) => {
       onClick?.($event);
       setIsSidenavVisibleResponsive?.(false);
     };
-    (0, import_react21.useEffect)(() => {
+    (0, import_react22.useEffect)(() => {
       changeIsGroupSelected?.((isGroupSelected2) => !isGroupSelected2 ? selected : isGroupSelected2);
     }, [selected, changeIsGroupSelected]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -4778,7 +4775,7 @@ DxcSidenav.Title = Title2;
 var Sidenav_default = DxcSidenav;
 
 // src/layout/utils.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/layout/Icons.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -4865,10 +4862,10 @@ var socialLinks = [
     title: "Facebook"
   }
 ];
-var findChildType = (children, childType) => import_react22.Children.toArray(children).find((child) => (0, import_react22.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_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const [isResponsive, setIsResponsive] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${breakpoint}rem)`).matches);
     };
@@ -4980,14 +4977,14 @@ var DxcApplicationLayout = ({
   footer,
   children
 }) => {
-  const [isSidenavVisibleResponsive, setIsSidenavVisibleResponsive] = (0, import_react23.useState)(false);
+  const [isSidenavVisibleResponsive, setIsSidenavVisibleResponsive] = (0, import_react24.useState)(false);
   const isResponsive = useResponsive(responsiveSizes.large);
-  const ref = (0, import_react23.useRef)(null);
-  const translatedLabels = (0, import_react23.useContext)(HalstackLanguageContext);
+  const ref = (0, import_react24.useRef)(null);
+  const translatedLabels = (0, import_react24.useContext)(HalstackLanguageContext);
   const handleSidenavVisibility = () => {
     setIsSidenavVisibleResponsive((currentIsSidenavVisibleResponsive) => !currentIsSidenavVisibleResponsive);
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!isResponsive) {
       setIsSidenavVisibleResponsive(false);
     }
@@ -5156,7 +5153,7 @@ var Label = import_styled_components20.default.span`
 var Badge_default = DxcBadge;
 
 // src/breadcrumbs/Breadcrumbs.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/breadcrumbs/dropdownTheme.ts
@@ -5216,11 +5213,11 @@ var dropdownTheme_default = {
 };
 
 // src/breadcrumbs/Item.tsx
-var import_react24 = 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_react24.useRef)(null);
+  const currentItemRef = (0, import_react25.useRef)(null);
   const handleOnMouseEnter = (event) => {
     const labelContainer = event.currentTarget;
     const optionElement = currentItemRef.current;
@@ -5281,7 +5278,7 @@ var DxcBreadcrumbs = ({
   onItemClick,
   showRoot = true
 }) => {
-  const handleOnSelectOption = (0, import_react25.useCallback)(
+  const handleOnSelectOption = (0, import_react26.useCallback)(
     (href) => {
       if (onItemClick) {
         onItemClick(href);
@@ -5340,16 +5337,16 @@ var OrderedList = import_styled_components22.default.ol`
 var Breadcrumbs_default = DxcBreadcrumbs;
 
 // src/bulleted-list/BulletedList.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/typography/Typography.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
 
 // src/typography/TypographyContext.tsx
-var import_react26 = require("react");
-var TypographyContext_default = (0, import_react26.createContext)({
+var import_react27 = require("react");
+var TypographyContext_default = (0, import_react27.createContext)({
   as: "span",
   color: "#000000",
   display: "inline",
@@ -5384,8 +5381,8 @@ var Typography = import_styled_components23.default.span`
   overflow: ${({ textOverflow }) => textOverflow !== "unset" ? "hidden" : "visible"};
 `;
 function DxcTypography({ children, ...props }) {
-  const componentContext = (0, import_react27.useContext)(TypographyContext_default);
-  const contextValue = (0, import_react27.useMemo)(
+  const componentContext = (0, import_react28.useContext)(TypographyContext_default);
+  const contextValue = (0, import_react28.useMemo)(
     () => ({
       ...componentContext,
       ...props
@@ -5399,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_react28.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_react28.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,
       "."
@@ -5479,7 +5476,7 @@ var ListItem2 = import_styled_components24.default.li`
 var BulletedList_default = DxcBulletedList;
 
 // src/card/Card.tsx
-var import_react29 = 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 = ({
@@ -5495,8 +5492,8 @@ var DxcCard = ({
   outlined = true,
   children
 }) => {
-  const colorsTheme = (0, import_react29.useContext)(HalstackContext);
-  const [isHovered, changeIsHovered] = (0, import_react29.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,
     {
@@ -5562,11 +5559,11 @@ var CardContent = import_styled_components25.default.div`
 var Card_default = DxcCard;
 
 // src/checkbox/Checkbox.tsx
-var import_react30 = 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_react30.forwardRef)(
+var DxcCheckbox = (0, import_react31.forwardRef)(
   ({
     checked,
     defaultChecked = false,
@@ -5583,11 +5580,11 @@ var DxcCheckbox = (0, import_react30.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Checkbox"
   }, ref) => {
-    const labelId = `label-checkbox-${(0, import_react30.useId)()}`;
-    const [innerChecked, setInnerChecked] = (0, import_react30.useState)(defaultChecked);
-    const checkboxRef = (0, import_react30.useRef)(null);
-    const colorsTheme = (0, import_react30.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react30.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) {
@@ -5784,7 +5781,7 @@ var MainContainer2 = import_styled_components26.default.div`
 var Checkbox_default = DxcCheckbox;
 
 // src/chip/Chip.tsx
-var import_react31 = 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 = ({
@@ -5797,7 +5794,7 @@ var DxcChip = ({
   margin,
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react31.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,
@@ -5889,22 +5886,22 @@ var IconContainer5 = import_styled_components27.default.div`
 var Chip_default = DxcChip;
 
 // src/contextual-menu/ContextualMenu.tsx
-var import_react37 = 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_react34 = require("react");
+var import_react35 = require("react");
 
 // src/contextual-menu/ItemAction.tsx
-var import_react32 = 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_react32.useState)(false);
-  const modifiedBadge = badge && (0, import_react32.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 }),
@@ -5980,8 +5977,8 @@ var Text2 = import_styled_components28.default.span`
 var ItemAction_default = ItemAction;
 
 // src/contextual-menu/ContextualMenuContext.tsx
-var import_react33 = require("react");
-var ContextualMenuContext_default = (0, import_react33.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");
@@ -5991,10 +5988,10 @@ var isGroupSelected = (items, selectedItemId) => items.some((item) => {
   else return item.selectedByDefault;
 });
 var GroupItem = ({ items, ...props }) => {
-  const groupMenuId = `group-menu-${(0, import_react34.useId)()}`;
-  const { selectedItemId } = (0, import_react34.useContext)(ContextualMenuContext_default) ?? {};
-  const groupSelected = (0, import_react34.useMemo)(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
-  const [isOpen, setIsOpen] = (0, import_react34.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,
@@ -6013,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_react34.memo)(GroupItem);
+var GroupItem_default = (0, import_react35.memo)(GroupItem);
 
 // src/contextual-menu/SingleItem.tsx
-var import_react35 = 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_react35.useContext)(ContextualMenuContext_default) ?? {};
+  const { selectedItemId, setSelectedItemId } = (0, import_react36.useContext)(ContextualMenuContext_default) ?? {};
   const handleClick = () => {
     setSelectedItemId?.(id);
     onSelect?.();
   };
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (selectedItemId === -1 && selectedByDefault) {
       setSelectedItemId?.(id);
     }
@@ -6052,10 +6049,10 @@ var MenuItem_default = MenuItem;
 
 // src/contextual-menu/Section.tsx
 var import_styled_components30 = __toESM(require("styled-components"));
-var import_react36 = 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_react36.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}`)) }),
@@ -6122,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_react37.useState)(-1);
-  const contextualMenuRef = (0, import_react37.useRef)(null);
-  const itemsWithId = (0, import_react37.useMemo)(() => addIdToItems(items), [items]);
-  const contextValue = (0, import_react37.useMemo)(() => ({ selectedItemId, setSelectedItemId }), [selectedItemId, setSelectedItemId]);
-  const colorsTheme = (0, import_react37.useContext)(HalstackContext);
-  const [firstUpdate, setFirstUpdate] = (0, import_react37.useState)(true);
-  (0, import_react37.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']");
@@ -6142,17 +6139,17 @@ function DxcContextualMenu({ items }) {
 }
 
 // src/data-grid/DataGrid.tsx
-var import_react45 = 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_react39 = require("react");
+var import_react40 = require("react");
 var import_react_data_grid = require("react-data-grid");
 
 // src/spinner/Spinner.tsx
-var import_react38 = 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 = ({
@@ -6163,9 +6160,9 @@ var DxcSpinner = ({
   margin,
   ariaLabel = "Spinner"
 }) => {
-  const labelId = (0, import_react38.useId)();
-  const colorsTheme = (0, import_react38.useContext)(HalstackContext);
-  const determinated = (0, import_react38.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 }) }) }),
@@ -6423,7 +6420,7 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
   }
 );
 var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender, childrenTrigger) => {
-  const [loading, setLoading] = (0, import_react39.useState)(false);
+  const [loading, setLoading] = (0, import_react40.useState)(false);
   const onClick = async () => {
     if (loading) return;
     if (!triggerRow.visibleChildren) {
@@ -6702,21 +6699,21 @@ var getPaginatedNodes = (rows, uniqueRowId, start, end) => {
 };
 
 // src/paginator/Paginator.tsx
-var import_react43 = 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_react42 = require("react");
+var import_react43 = require("react");
 var import_styled_components35 = __toESM(require("styled-components"));
 
 // src/select/Listbox.tsx
-var import_react41 = 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_react40 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var ListOption = ({
   id,
@@ -6728,7 +6725,7 @@ var ListOption = ({
   isLastOption,
   isSelected
 }) => {
-  const [hasTooltip, setHasTooltip] = (0, import_react40.useState)(false);
+  const [hasTooltip, setHasTooltip] = (0, import_react41.useState)(false);
   const handleOnMouseEnter = (event) => {
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
@@ -6826,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;
@@ -6924,8 +6920,8 @@ var Listbox = ({
   handleOptionOnClick,
   styles
 }) => {
-  const translatedLabels = (0, import_react41.useContext)(HalstackLanguageContext);
-  const listboxRef = (0, import_react41.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}`;
@@ -6967,7 +6963,7 @@ var Listbox = ({
       );
     }
   };
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     if (currentValue && !multiple) {
       const listEl = listboxRef?.current;
       const selectedListOptionEl = listEl?.querySelector("[aria-selected='true']");
@@ -6976,7 +6972,7 @@ var Listbox = ({
       });
     }
   }, [currentValue, multiple]);
-  (0, import_react41.useLayoutEffect)(() => {
+  (0, import_react42.useLayoutEffect)(() => {
     const visualFocusedOptionEl = listboxRef.current?.querySelectorAll("[role='option']")[visualFocusIndex];
     visualFocusedOptionEl?.scrollIntoView?.({
       block: "nearest",
@@ -7066,7 +7062,7 @@ var Listbox_default = Listbox;
 
 // src/select/Select.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var DxcSelect = (0, import_react42.forwardRef)(
+var DxcSelect = (0, import_react43.forwardRef)(
   ({
     label,
     name = "",
@@ -7079,6 +7075,7 @@ var DxcSelect = (0, import_react42.forwardRef)(
     multiple = false,
     optional = false,
     searchable = false,
+    searchByStartsWith = false,
     onChange,
     onBlur,
     error,
@@ -7087,27 +7084,27 @@ var DxcSelect = (0, import_react42.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Select"
   }, ref) => {
-    const selectId = `select-${(0, import_react42.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_react42.useState)(defaultValue ?? (multiple ? [] : ""));
-    const [searchValue, setSearchValue] = (0, import_react42.useState)("");
-    const [visualFocusIndex, changeVisualFocusIndex] = (0, import_react42.useState)(-1);
-    const [isOpen, changeIsOpen] = (0, import_react42.useState)(false);
-    const [hasTooltip, setHasTooltip] = (0, import_react42.useState)(false);
-    const selectRef = (0, import_react42.useRef)(null);
-    const selectSearchInputRef = (0, import_react42.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_react42.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react42.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_react42.useMemo)(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
-    const lastOptionIndex = (0, import_react42.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_react42.useMemo)(
+    const { selectedOption, singleSelectionIndex } = (0, import_react43.useMemo)(
       () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem),
       [value, innerValue, options, multiple, optional, optionalItem]
     );
@@ -7122,7 +7119,7 @@ var DxcSelect = (0, import_react42.forwardRef)(
         changeVisualFocusIndex(-1);
       }
     };
-    const handleSelectChangeValue = (0, import_react42.useCallback)(
+    const handleSelectChangeValue = (0, import_react43.useCallback)(
       (newOption) => {
         if (newOption) {
           let newValue;
@@ -7279,7 +7276,7 @@ var DxcSelect = (0, import_react42.forwardRef)(
       event.stopPropagation();
       setSearchValue("");
     };
-    const handleOptionOnClick = (0, import_react42.useCallback)(
+    const handleOptionOnClick = (0, import_react43.useCallback)(
       (option) => {
         handleSelectChangeValue(option);
         if (!multiple) {
@@ -7659,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_react43.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react43.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 }),
@@ -7809,7 +7806,7 @@ var PageToSelectContainer = import_styled_components36.default.span`
 var Paginator_default = DxcPaginator;
 
 // src/table/Table.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
 
 // src/table/dropdownTheme.ts
@@ -7885,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_react44.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)(
@@ -7914,7 +7911,7 @@ var DxcActionsCell = ({ actions }) => {
   ] });
 };
 var DxcTable = ({ children, margin, mode = "default" }) => {
-  const colorsTheme = (0, import_react44.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")})`;
@@ -8148,9 +8145,9 @@ var DxcDataGrid = ({
   totalItems,
   defaultPage = 1
 }) => {
-  const [rowsToRender, setRowsToRender] = (0, import_react45.useState)([...rows]);
-  const colorsTheme = (0, import_react45.useContext)(HalstackContext);
-  const [page, changePage] = (0, import_react45.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);
@@ -8168,7 +8165,7 @@ var DxcDataGrid = ({
     }
     setSortColumns(newSortColumns);
   };
-  const columnsToRender = (0, import_react45.useMemo)(() => {
+  const columnsToRender = (0, import_react46.useMemo)(() => {
     let expectedColumns = columns.map((column) => convertToRDGColumns(column, summaryRow));
     if (expandable) {
       expectedColumns = [
@@ -8233,12 +8230,12 @@ var DxcDataGrid = ({
     }
     return expectedColumns;
   }, [selectable, expandable, columns, rowsToRender, onSelectRows, rows, summaryRow, uniqueRowId, selectedRows]);
-  const [columnsOrder, setColumnsOrder] = (0, import_react45.useState)(() => columnsToRender.map((_, index) => index));
-  const [sortColumns, setSortColumns] = (0, import_react45.useState)([]);
-  (0, import_react45.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_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const finalRows = [...rows];
     if (expandable) {
       finalRows.filter((row) => {
@@ -8250,7 +8247,7 @@ var DxcDataGrid = ({
     }
     setRowsToRender(finalRows);
   }, [rows]);
-  const reorderedColumns = (0, import_react45.useMemo)(
+  const reorderedColumns = (0, import_react46.useMemo)(
     () => (
       // Array ordered by columnsOrder
       columnsOrder.map((index) => columnsToRender[index])
@@ -8282,7 +8279,7 @@ var DxcDataGrid = ({
       onGridRowsChange(newRows);
     }
   };
-  const sortedRows = (0, import_react45.useMemo)(() => {
+  const sortedRows = (0, import_react46.useMemo)(() => {
     const sortFunctions = getCustomSortFn(columns);
     if (!onSort) {
       if (sortColumns.length > 0 && uniqueRowId) {
@@ -8311,12 +8308,12 @@ var DxcDataGrid = ({
     }
     return rowsToRender;
   }, [expandable, rowsToRender, sortColumns, uniqueRowId]);
-  const minItemsPerPageIndex = (0, import_react45.useMemo)(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = (0, import_react45.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_react45.useMemo)(() => {
+  const filteredRows = (0, import_react46.useMemo)(() => {
     if (onSort && sortColumns?.length > 0) {
       onSort?.(sortColumns?.[0]);
     }
@@ -8360,19 +8357,19 @@ DxcDataGrid.ActionsCell = DxcActionsCell;
 var DataGrid_default = DxcDataGrid;
 
 // src/date-input/DateInput.tsx
-var import_react53 = 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_react48 = 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_react46 = 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) => {
@@ -8416,11 +8413,11 @@ var Calendar = ({
   onDaySelect,
   today: today2
 }) => {
-  const [dateToFocus, setDateToFocus] = (0, import_react46.useState)(getDateToFocus(selectedDate, innerDate, today2));
-  const [isFocusable, setIsFocusable] = (0, import_react46.useState)(false);
-  const id = (0, import_react46.useId)();
-  const translatedLabels = (0, import_react46.useContext)(HalstackLanguageContext);
-  const dayCells = (0, import_react46.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);
@@ -8438,13 +8435,13 @@ var Calendar = ({
     setDateToFocus(date);
     setIsFocusable(true);
   };
-  (0, import_react46.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_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
       setDateToFocus(getDateToFocus(selectedDate, innerDate, today2));
     }
@@ -8605,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_react46.memo)(Calendar);
+var Calendar_default = (0, import_react47.memo)(Calendar);
 
 // src/date-input/YearPicker.tsx
 var import_dayjs = __toESM(require("dayjs"));
-var import_react47 = 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 = () => {
@@ -8621,9 +8618,9 @@ var getYearsArray = () => {
 };
 var yearList = getYearsArray();
 var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
-  const id = (0, import_react47.useId)();
-  const [yearToFocus, setYearToFocus] = (0, import_react47.useState)(selectedDate ? selectedDate.get("year") : (0, import_dayjs.default)().get("year"));
-  (0, import_react47.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();
@@ -8710,16 +8707,16 @@ var YearPickerButton = import_styled_components40.default.button`
     background-color: ${(props) => props.theme.dateInput.pickerActiveBackgroundColor} !important;
   }
 `;
-var YearPicker_default = (0, import_react47.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_react48.useState)(date?.isValid() ? date : (0, import_dayjs2.default)());
-  const [content, setContent] = (0, import_react48.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_react48.useContext)(HalstackLanguageContext);
+  const translatedLabels = (0, import_react49.useContext)(HalstackLanguageContext);
   const handleDateSelect = (chosenDate) => {
     setInnerDate(chosenDate);
     onDateSelect(chosenDate);
@@ -8845,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_react48.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_react52 = require("react");
+var import_react53 = require("react");
 var import_styled_components44 = __toESM(require("styled-components"));
 
 // src/number-input/NumberInputContext.tsx
-var import_react49 = require("react");
-var NumberInputContext_default = (0, import_react49.createContext)(null);
+var import_react50 = require("react");
+var NumberInputContext_default = (0, import_react50.createContext)(null);
 
 // src/text-input/Suggestions.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
 
 // src/text-input/Suggestion.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_styled_components42 = __toESM(require("styled-components"));
 
 // src/text-input/utils.ts
@@ -8939,7 +8936,7 @@ var Suggestion = ({
   visuallyFocused,
   highlighted
 }) => {
-  const matchedSuggestion = (0, import_react50.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]);
@@ -8960,7 +8957,7 @@ var Suggestion = ({
     }
   );
 };
-var Suggestion_default = (0, import_react50.memo)(Suggestion);
+var Suggestion_default = (0, import_react51.memo)(Suggestion);
 
 // src/text-input/Suggestions.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -9016,9 +9013,9 @@ var Suggestions = ({
   suggestionOnClick,
   styles
 }) => {
-  const translatedLabels = (0, import_react51.useContext)(HalstackLanguageContext);
-  const listboxRef = (0, import_react51.useRef)(null);
-  (0, import_react51.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",
@@ -9060,7 +9057,7 @@ var Suggestions = ({
     }
   );
 };
-var Suggestions_default = (0, import_react51.memo)(Suggestions);
+var Suggestions_default = (0, import_react52.memo)(Suggestions);
 
 // src/text-input/TextInput.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -9188,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_react52.forwardRef)(
+var DxcTextInput = (0, import_react53.forwardRef)(
   ({
     alignment = "left",
     label,
@@ -9217,21 +9214,21 @@ var DxcTextInput = (0, import_react52.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Text input"
   }, ref) => {
-    const inputId = `input-${(0, import_react52.useId)()}`;
+    const inputId = `input-${(0, import_react53.useId)()}`;
     const autosuggestId = `suggestions-${inputId}`;
     const errorId = `error-${inputId}`;
-    const colorsTheme = (0, import_react52.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react52.useContext)(HalstackLanguageContext);
-    const numberInputContext = (0, import_react52.useContext)(NumberInputContext_default);
-    const inputRef = (0, import_react52.useRef)(null);
-    const inputContainerRef = (0, import_react52.useRef)(null);
-    const actionRef = (0, import_react52.useRef)(null);
-    const [innerValue, setInnerValue] = (0, import_react52.useState)(defaultValue);
-    const [isOpen, changeIsOpen] = (0, import_react52.useState)(false);
-    const [isSearching, changeIsSearching] = (0, import_react52.useState)(false);
-    const [isAutosuggestError, changeIsAutosuggestError] = (0, import_react52.useState)(false);
-    const [filteredSuggestions, changeFilteredSuggestions] = (0, import_react52.useState)([]);
-    const [visualFocusIndex, changeVisualFocusIndex] = (0, import_react52.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 = () => {
@@ -9441,7 +9438,7 @@ var DxcTextInput = (0, import_react52.forwardRef)(
         inputRef.current?.setAttribute("type", type);
       }
     };
-    (0, import_react52.useEffect)(() => {
+    (0, import_react53.useEffect)(() => {
       if (typeof suggestions === "function") {
         changeIsSearching(true);
         changeIsAutosuggestError(false);
@@ -9588,7 +9585,7 @@ var DxcTextInput = (0, import_react52.forwardRef)(
                         onClick: handleClearActionOnClick,
                         icon: "close",
                         tabIndex,
-                        title: !disabled ? translatedLabels.textInput.clearFieldActionTitle : void 0
+                        title: translatedLabels.textInput.clearFieldActionTitle
                       }
                     ),
                     numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
@@ -9599,7 +9596,7 @@ var DxcTextInput = (0, import_react52.forwardRef)(
                           icon: "remove",
                           tabIndex,
                           ref: actionRef,
-                          title: !disabled ? translatedLabels.numberInput.decrementValueTitle : void 0,
+                          title: translatedLabels.numberInput.decrementValueTitle,
                           disabled
                         }
                       ),
@@ -9610,7 +9607,7 @@ var DxcTextInput = (0, import_react52.forwardRef)(
                           icon: "add",
                           tabIndex,
                           ref: actionRef,
-                          title: !disabled ? translatedLabels.numberInput.incrementValueTitle : void 0,
+                          title: translatedLabels.numberInput.incrementValueTitle,
                           disabled
                         }
                       )
@@ -9622,7 +9619,7 @@ var DxcTextInput = (0, import_react52.forwardRef)(
                         icon: action.icon,
                         tabIndex,
                         ref: actionRef,
-                        title: !disabled ? action.title ?? void 0 : void 0,
+                        title: action.title ?? void 0,
                         disabled
                       }
                     )
@@ -9664,7 +9661,7 @@ var getDate = (value, format, lastValidYear, setLastValidYear) => {
   }
   return newDate;
 };
-var DxcDateInput = (0, import_react53.forwardRef)(
+var DxcDateInput = (0, import_react54.forwardRef)(
   ({
     label,
     name,
@@ -9686,18 +9683,18 @@ var DxcDateInput = (0, import_react53.forwardRef)(
     tabIndex,
     ariaLabel = "Date input"
   }, ref) => {
-    const [innerValue, setInnerValue] = (0, import_react53.useState)(defaultValue);
-    const [isOpen, setIsOpen] = (0, import_react53.useState)(false);
-    const calendarId = `date-picker-${(0, import_react53.useId)()}`;
-    const [dayjsDate, setDayjsDate] = (0, import_react53.useState)(getValueForPicker(value ?? defaultValue ?? "", format));
-    const [lastValidYear, setLastValidYear] = (0, import_react53.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_react53.useState)(SIDEOFFSET);
-    const colorsTheme = (0, import_react53.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react53.useContext)(HalstackLanguageContext);
-    const dateRef = (0, import_react53.useRef)(null);
-    const popoverContentRef = (0, import_react53.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) {
@@ -9754,7 +9751,7 @@ var DxcDateInput = (0, import_react53.forwardRef)(
         onBlur?.(callbackParams);
       }
     };
-    const adjustSideOffset = (0, import_react53.useCallback)(() => {
+    const adjustSideOffset = (0, import_react54.useCallback)(() => {
       if (error != null) {
         setTimeout(() => {
           if (popoverContentRef.current && dateRef.current) {
@@ -9790,18 +9787,18 @@ var DxcDateInput = (0, import_react53.forwardRef)(
         closeCalendar();
       }
     };
-    (0, import_react53.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       window.addEventListener("scroll", adjustSideOffset);
       return () => {
         window.removeEventListener("scroll", adjustSideOffset);
       };
     }, [adjustSideOffset]);
-    (0, import_react53.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (value || value === "") {
         setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
       }
     }, [value, format, lastValidYear]);
-    (0, import_react53.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (!disabled) {
         const actionButtonElement = dateRef.current?.querySelector("[aria-label='Select date']");
         actionButtonElement?.setAttribute("aria-haspopup", "true");
@@ -9922,7 +9919,7 @@ var StyledPopoverContent = (0, import_styled_components45.default)(Popover4.Cont
 var DateInput_default = DxcDateInput;
 
 // src/dialog/Dialog.tsx
-var import_react54 = 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");
@@ -9975,14 +9972,14 @@ var DxcDialog = ({
   tabIndex = 0,
   disableFocusLock = false
 }) => {
-  const id = (0, import_react54.useId)();
-  const colorsTheme = (0, import_react54.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react54.useContext)(HalstackLanguageContext);
-  const [portalContainer, setPortalContainer] = (0, import_react54.useState)(null);
-  (0, import_react54.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_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -10031,11 +10028,11 @@ var DxcDialog = ({
 var Dialog_default = DxcDialog;
 
 // src/file-input/FileInput.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_styled_components48 = __toESM(require("styled-components"));
 
 // src/file-input/FileItem.tsx
-var import_react55 = 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`
@@ -10119,8 +10116,8 @@ var FileItem = ({
   onDelete,
   tabIndex
 }) => {
-  const translatedLabels = (0, import_react55.useContext)(HalstackLanguageContext);
-  const fileNameId = (0, import_react55.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: [
@@ -10141,7 +10138,7 @@ var FileItem = ({
     ] })
   ] });
 };
-var FileItem_default = (0, import_react55.memo)(FileItem);
+var FileItem_default = (0, import_react56.memo)(FileItem);
 
 // src/file-input/utils.ts
 var getFilePreview = async (file) => {
@@ -10252,7 +10249,7 @@ var ErrorMessage2 = import_styled_components48.default.div`
   line-height: ${(props) => props.theme.errorMessageLineHeight};
   margin-top: 0.25rem;
 `;
-var DxcFileInput = (0, import_react56.forwardRef)(
+var DxcFileInput = (0, import_react57.forwardRef)(
   ({
     mode = "file",
     label = "",
@@ -10270,11 +10267,11 @@ var DxcFileInput = (0, import_react56.forwardRef)(
     margin,
     tabIndex = 0
   }, ref) => {
-    const [isDragging, setIsDragging] = (0, import_react56.useState)(false);
-    const [files, setFiles] = (0, import_react56.useState)([]);
-    const fileInputId = `file-input-${(0, import_react56.useId)()}`;
-    const colorsTheme = (0, import_react56.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react56.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;
@@ -10307,7 +10304,7 @@ var DxcFileInput = (0, import_react56.forwardRef)(
         e.target.value = "";
       }
     };
-    const onDelete = (0, import_react56.useCallback)(
+    const onDelete = (0, import_react57.useCallback)(
       (fileName) => {
         const filesCopy = [...files];
         const fileToRemove = filesCopy.find((file) => file.file.name === fileName);
@@ -10346,7 +10343,7 @@ var DxcFileInput = (0, import_react56.forwardRef)(
         addFile(filesArray);
       }
     };
-    (0, import_react56.useEffect)(() => {
+    (0, import_react57.useEffect)(() => {
       const getFiles = async () => {
         if (value) {
           const valueFiles = await Promise.all(
@@ -10498,10 +10495,10 @@ var Grid_default = DxcGrid;
 
 // src/heading/Heading.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
-var import_react57 = 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_react57.useContext)(HalstackContext);
+  const colorsTheme = (0, import_react58.useContext)(HalstackContext);
   const checkValidAs = () => {
     if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as;
   };
@@ -10568,7 +10565,7 @@ var Heading_default = DxcHeading;
 
 // src/image/Image.tsx
 var import_styled_components51 = __toESM(require("styled-components"));
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var Figure = import_styled_components51.default.figure`
   display: flex;
@@ -10604,7 +10601,7 @@ function DxcImage({
   onLoad,
   onError
 }) {
-  const colorsTheme = (0, import_react58.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",
     {
@@ -10651,7 +10648,7 @@ var Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Inset_default = Inset;
 
 // src/link/Link.tsx
-var import_react59 = 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`
@@ -10716,7 +10713,7 @@ var LinkIconContainer = import_styled_components53.default.div`
     height: ${(props) => props.theme.iconSize};
   }
 `;
-var DxcLink = (0, import_react59.forwardRef)(
+var DxcLink = (0, import_react60.forwardRef)(
   ({
     inheritColor = false,
     disabled = false,
@@ -10730,7 +10727,7 @@ var DxcLink = (0, import_react59.forwardRef)(
     children,
     ...otherProps
   }, ref) => {
-    const colorsTheme = (0, import_react59.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,
       {
@@ -10755,20 +10752,20 @@ var DxcLink = (0, import_react59.forwardRef)(
 var Link_default = DxcLink;
 
 // src/nav-tabs/NavTabs.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_styled_components55 = __toESM(require("styled-components"));
 
 // src/nav-tabs/Tab.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_styled_components54 = __toESM(require("styled-components"));
 
 // src/nav-tabs/NavTabsContext.tsx
-var import_react60 = require("react");
-var NavTabsContext_default = (0, import_react60.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_react61.forwardRef)(
+var DxcTab = (0, import_react62.forwardRef)(
   ({
     href,
     active = false,
@@ -10779,11 +10776,11 @@ var DxcTab = (0, import_react61.forwardRef)(
     children,
     ...otherProps
   }, ref) => {
-    const tabRef = (0, import_react61.useRef)();
-    const { iconPosition, tabIndex, focusedLabel } = (0, import_react61.useContext)(NavTabsContext_default) ?? {};
-    const innerRef = (0, import_react61.useRef)(null);
-    (0, import_react61.useImperativeHandle)(ref, () => innerRef.current, []);
-    (0, import_react61.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();
       }
@@ -10943,17 +10940,17 @@ var getNextTabIndex = (array, initialIndex) => {
   return index;
 };
 var DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }) => {
-  const [innerFocusIndex, setInnerFocusIndex] = (0, import_react62.useState)(null);
-  const [underlineWidth, setUnderlineWidth] = (0, import_react62.useState)(null);
-  const refNavTabList = (0, import_react62.useRef)(null);
-  const colorsTheme = (0, import_react62.useContext)(HalstackContext);
-  const childArray = import_react62.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_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     setUnderlineWidth(refNavTabList?.current?.scrollWidth ?? null);
   }, [children]);
-  const contextValue = (0, import_react62.useMemo)(
+  const contextValue = (0, import_react63.useMemo)(
     () => ({
       iconPosition,
       tabIndex,
@@ -11002,10 +10999,10 @@ var NavTabsContainer = import_styled_components55.default.div`
 var NavTabs_default = DxcNavTabs;
 
 // src/number-input/NumberInput.tsx
-var import_react63 = 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_react63.forwardRef)(
+var DxcNumberInput = (0, import_react64.forwardRef)(
   ({
     label,
     name,
@@ -11031,8 +11028,8 @@ var DxcNumberInput = (0, import_react63.forwardRef)(
     ariaLabel = "Number input",
     showControls = true
   }, ref) => {
-    const numberInputRef = (0, import_react63.useRef)(null);
-    const contextValue = (0, import_react63.useMemo)(
+    const numberInputRef = (0, import_react64.useRef)(null);
+    const contextValue = (0, import_react64.useMemo)(
       () => ({
         maxNumber: max,
         minNumber: min,
@@ -11042,7 +11039,7 @@ var DxcNumberInput = (0, import_react63.forwardRef)(
       }),
       [max, min, showControls, step]
     );
-    (0, import_react63.useEffect)(() => {
+    (0, import_react64.useEffect)(() => {
       const input = numberInputRef.current?.getElementsByTagName("input")[0];
       const preventDefault = (event) => {
         event.preventDefault();
@@ -11096,7 +11093,7 @@ var NumberInputContainer = import_styled_components56.default.div`
 var NumberInput_default = DxcNumberInput;
 
 // src/paragraph/Paragraph.tsx
-var import_react64 = 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`
@@ -11115,12 +11112,12 @@ var Paragraph = import_styled_components57.default.p`
   margin: 0;
 `;
 function DxcParagraph({ children }) {
-  const colorsTheme = (0, import_react64.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_react65 = 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) => {
@@ -11130,7 +11127,7 @@ var setAriaAttributes = (ariaExpanded, element) => {
   const buttonElement = element?.getElementsByTagName("button")[0];
   buttonElement?.setAttribute("aria-expanded", ariaExpanded);
 };
-var DxcPasswordInput = (0, import_react65.forwardRef)(
+var DxcPasswordInput = (0, import_react66.forwardRef)(
   ({
     label,
     name = "",
@@ -11149,10 +11146,10 @@ var DxcPasswordInput = (0, import_react65.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Password input"
   }, ref) => {
-    const [isPasswordVisible, setIsPasswordVisible] = (0, import_react65.useState)(false);
-    const inputRef = (0, import_react65.useRef)(null);
-    const { passwordInput } = (0, import_react65.useContext)(HalstackLanguageContext);
-    (0, import_react65.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);
@@ -11207,7 +11204,7 @@ var PasswordInput = import_styled_components58.default.div`
 var PasswordInput_default = DxcPasswordInput;
 
 // src/progress-bar/ProgressBar.tsx
-var import_react66 = 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`
@@ -11327,10 +11324,10 @@ var DxcProgressBar = ({
   margin,
   ariaLabel = "Progress bar"
 }) => {
-  const colorsTheme = (0, import_react66.useContext)(HalstackContext);
-  const labelId = `label-${(0, import_react66.useId)()}`;
-  const [innerValue, setInnerValue] = (0, import_react66.useState)();
-  (0, import_react66.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: [
@@ -11360,13 +11357,13 @@ var DxcProgressBar = ({
 var ProgressBar_default = DxcProgressBar;
 
 // src/quick-nav/QuickNav.tsx
-var import_react67 = 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_react67.useContext)(HalstackLanguageContext);
-  const colorsTheme = (0, import_react67.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("/#/");
@@ -11452,11 +11449,11 @@ var Link3 = import_styled_components60.default.a`
 var QuickNav_default = DxcQuickNav;
 
 // src/radio-group/RadioGroup.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_styled_components62 = __toESM(require("styled-components"));
 
 // src/radio-group/Radio.tsx
-var import_react68 = 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 = ({
@@ -11469,15 +11466,15 @@ var DxcRadio = ({
   readOnly,
   tabIndex
 }) => {
-  const radioLabelId = `radio-${(0, import_react68.useId)()}`;
-  const ref = (0, import_react68.useRef)(null);
-  const colorsTheme = (0, import_react68.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_react68.useState)(true);
-  (0, import_react68.useEffect)(() => {
+  const [firstUpdate, setFirstUpdate] = (0, import_react69.useState)(true);
+  (0, import_react69.useEffect)(() => {
     if (firstUpdate) {
       setFirstUpdate(false);
       return;
@@ -11582,7 +11579,7 @@ var RadioContainer = import_styled_components61.default.span`
     }
   }
 `;
-var Radio_default = (0, import_react68.memo)(DxcRadio);
+var Radio_default = (0, import_react69.memo)(DxcRadio);
 
 // src/radio-group/RadioGroup.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
@@ -11590,7 +11587,7 @@ var getInitialFocusIndex = (innerOptions, value) => {
   const initialSelectedOptionIndex = innerOptions.findIndex((option) => option.value === value);
   return initialSelectedOptionIndex !== -1 ? initialSelectedOptionIndex : 0;
 };
-var DxcRadioGroup = (0, import_react69.forwardRef)(
+var DxcRadioGroup = (0, import_react70.forwardRef)(
   ({
     label,
     name,
@@ -11609,14 +11606,14 @@ var DxcRadioGroup = (0, import_react69.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Radio group"
   }, ref) => {
-    const radioGroupId = `radio-group-${(0, import_react69.useId)()}`;
+    const radioGroupId = `radio-group-${(0, import_react70.useId)()}`;
     const radioGroupLabelId = `label-${radioGroupId}`;
     const errorId = `error-${radioGroupId}`;
-    const [innerValue, setInnerValue] = (0, import_react69.useState)(defaultValue);
-    const [firstTimeFocus, setFirstTimeFocus] = (0, import_react69.useState)(true);
-    const colorsTheme = (0, import_react69.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react69.useContext)(HalstackLanguageContext);
-    const innerOptions = (0, import_react69.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,
         {
@@ -11627,8 +11624,8 @@ var DxcRadioGroup = (0, import_react69.forwardRef)(
       ] : options,
       [optional, options, optionalItemLabel, translatedLabels]
     );
-    const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react69.useState)(getInitialFocusIndex(innerOptions, value ?? innerValue));
-    const handleOnChange = (0, import_react69.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) {
@@ -11807,7 +11804,7 @@ var ErrorMessageContainer2 = import_styled_components62.default.span`
 var RadioGroup_default = DxcRadioGroup;
 
 // src/resultset-table/ResultsetTable.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_styled_components63 = __toESM(require("styled-components"));
 
 // src/resultset-table/Icons.tsx
@@ -11863,22 +11860,22 @@ var DxcResultsetTable = ({
   tabIndex = 0,
   mode = "default"
 }) => {
-  const colorsTheme = (0, import_react70.useContext)(HalstackContext);
-  const [page, changePage] = (0, import_react70.useState)(1);
-  const [sortColumnIndex, changeSortColumnIndex] = (0, import_react70.useState)(-1);
-  const [sortOrder, changeSortOrder] = (0, import_react70.useState)("ascending");
-  const prevRowCountRef = (0, import_react70.useRef)(rows.length);
-  const rowsWithIds = (0, import_react70.useMemo)(() => assignIdsToRows(rows), [rows]);
-  const minItemsPerPageIndex = (0, import_react70.useMemo)(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = (0, import_react70.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_react70.useMemo)(
+  const sortedResultset = (0, import_react71.useMemo)(
     () => sortColumnIndex !== -1 ? sortArray(sortColumnIndex, sortOrder, rowsWithIds) : rowsWithIds,
     [sortColumnIndex, sortOrder, rowsWithIds]
   );
-  const filteredResultset = (0, import_react70.useMemo)(
+  const filteredResultset = (0, import_react71.useMemo)(
     () => sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1),
     [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]
   );
@@ -11892,7 +11889,7 @@ var DxcResultsetTable = ({
       sortColumnIndex === -1 || sortColumnIndex !== columnIndex ? "ascending" : sortOrder === "ascending" ? "descending" : "ascending"
     );
   };
-  (0, import_react70.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (!hidePaginator) {
       if (rows.length === 0) {
         changePage(0);
@@ -11991,7 +11988,7 @@ DxcResultsetTable.ActionsCell = DxcActionsCell;
 var ResultsetTable_default = DxcResultsetTable;
 
 // src/slider/Slider.tsx
-var import_react71 = 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 = {
@@ -12162,7 +12159,7 @@ var TextInputContainer2 = import_styled_components64.default.div`
   margin-left: ${(props) => props.theme.inputMarginLeft};
   max-width: 70px;
 `;
-var DxcSlider = (0, import_react71.forwardRef)(
+var DxcSlider = (0, import_react72.forwardRef)(
   ({
     label = "",
     name = "",
@@ -12183,20 +12180,20 @@ var DxcSlider = (0, import_react71.forwardRef)(
     size = "fillParent",
     ariaLabel = "Slider"
   }, ref) => {
-    const labelId = `label-${(0, import_react71.useId)()}`;
-    const [innerValue, setInnerValue] = (0, import_react71.useState)(defaultValue ?? 0);
-    const [dragging, setDragging] = (0, import_react71.useState)(false);
-    const colorsTheme = (0, import_react71.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_react71.useMemo)(
+    const minLabel = (0, import_react72.useMemo)(
       () => labelFormatCallback ? labelFormatCallback(minValue) : minValue,
       [labelFormatCallback, minValue]
     );
-    const maxLabel = (0, import_react71.useMemo)(
+    const maxLabel = (0, import_react72.useMemo)(
       () => labelFormatCallback ? labelFormatCallback(maxValue) : maxValue,
       [labelFormatCallback, maxValue]
     );
-    const tickMarks = (0, import_react71.useMemo)(() => {
+    const tickMarks = (0, import_react72.useMemo)(() => {
       const numberOfMarks = Math.floor(maxValue / step - minValue / step);
       const range = maxValue - minValue;
       const ticks = [];
@@ -12322,10 +12319,10 @@ var StatusLabel = import_styled_components65.default.span`
 var StatusLight_default = DxcStatusLight;
 
 // src/switch/Switch.tsx
-var import_react72 = 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_react72.forwardRef)(
+var DxcSwitch = (0, import_react73.forwardRef)(
   ({
     defaultChecked = false,
     checked,
@@ -12341,12 +12338,12 @@ var DxcSwitch = (0, import_react72.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Switch"
   }, ref) => {
-    const switchId = `switch-${(0, import_react72.useId)()}`;
+    const switchId = `switch-${(0, import_react73.useId)()}`;
     const labelId = `label-${switchId}`;
-    const [innerChecked, setInnerChecked] = (0, import_react72.useState)(defaultChecked);
-    const colorsTheme = (0, import_react72.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react72.useContext)(HalstackLanguageContext);
-    const refTrack = (0, import_react72.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":
@@ -12564,18 +12561,18 @@ var SwitchTrack = import_styled_components66.default.span`
 var Switch_default = DxcSwitch;
 
 // src/tabs/Tabs.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_styled_components70 = __toESM(require("styled-components"));
 
 // src/tabs/TabsContext.tsx
-var import_react73 = require("react");
-var TabsContext_default = (0, import_react73.createContext)(null);
+var import_react74 = require("react");
+var TabsContext_default = (0, import_react74.createContext)(null);
 
 // src/tabs/Tab.tsx
-var import_react74 = 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_react74.forwardRef)(
+var DxcTab2 = (0, import_react75.forwardRef)(
   ({
     icon,
     label,
@@ -12589,7 +12586,7 @@ var DxcTab2 = (0, import_react74.forwardRef)(
     onHover = () => {
     }
   }, ref) => {
-    const tabRef = (0, import_react74.useRef)(null);
+    const tabRef = (0, import_react75.useRef)(null);
     const {
       iconPosition = "top",
       tabIndex = 0,
@@ -12600,19 +12597,19 @@ var DxcTab2 = (0, import_react74.forwardRef)(
       setActiveTab,
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
-    } = (0, import_react74.useContext)(TabsContext_default) ?? {};
-    (0, import_react74.useEffect)(() => {
+    } = (0, import_react75.useContext)(TabsContext_default) ?? {};
+    (0, import_react75.useEffect)(() => {
       if (focusedTab === tabId) {
         tabRef?.current?.focus();
       }
     }, [focusedTab, tabId]);
-    (0, import_react74.useEffect)(() => {
+    (0, import_react75.useEffect)(() => {
       if (activeTab === tabId) {
         setActiveIndicatorWidth?.(tabRef.current?.offsetWidth ?? 0);
         setActiveIndicatorLeft?.(tabRef.current?.offsetLeft ?? 0);
       }
     }, [activeTab, tabId, setActiveIndicatorWidth, setActiveIndicatorLeft]);
-    (0, import_react74.useEffect)(() => {
+    (0, import_react75.useEffect)(() => {
       if (active) {
         setActiveTab?.(tabId ?? label ?? "");
       }
@@ -12788,14 +12785,14 @@ var TabIconContainer2 = import_styled_components67.default.div`
 var Tab_default2 = DxcTab2;
 
 // src/tabs/TabsLegacy.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_styled_components69 = __toESM(require("styled-components"));
 
 // src/tabs/TabLegacy.tsx
-var import_react75 = 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_react75.forwardRef)(
+var Tab2 = (0, import_react76.forwardRef)(
   ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     TabContainer3,
     {
@@ -12939,16 +12936,16 @@ var TabIconContainer3 = import_styled_components68.default.div`
     width: 22px;
   }
 `;
-var TabLegacy_default = (0, import_react75.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_react76.useState)(0);
-  const handleWindowSizeChange = (0, import_react76.useCallback)(() => {
+  const [viewWidth, setViewWidth] = (0, import_react77.useState)(0);
+  const handleWindowSizeChange = (0, import_react77.useCallback)(() => {
     setViewWidth(refTabList.current?.offsetWidth ?? 0);
   }, [refTabList]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return () => {
@@ -12967,28 +12964,28 @@ var DxcTabs = ({
   iconPosition = "top",
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react76.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_react76.useState)(
+  const [innerActiveTabIndex, setInnerActiveTabIndex] = (0, import_react77.useState)(
     tabs != null && defaultActiveTabIndex && !tabs[defaultActiveTabIndex]?.isDisabled ? defaultActiveTabIndex : firstFocus
   );
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react76.useState)(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = (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 [countClick, setCountClick] = (0, import_react76.useState)(0);
-  const [totalTabsWidth, setTotalTabsWidth] = (0, import_react76.useState)(0);
-  const [currentFocusIndex, setCurrentFocusIndex] = (0, import_react76.useState)(activeTabIndex ?? innerActiveTabIndex);
-  const [temporalFocusIndex, setTemporalFocusIndex] = (0, import_react76.useState)(activeTabIndex ?? innerActiveTabIndex);
-  const [minHeightTabs, setMinHeightTabs] = (0, import_react76.useState)(0);
-  const refTabs = (0, import_react76.useRef)([]);
-  const refTabList = (0, import_react76.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_react76.useContext)(HalstackLanguageContext);
-  const enabledIndicator = (0, import_react76.useMemo)(() => viewWidth < totalTabsWidth, [viewWidth]);
-  (0, import_react76.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);
@@ -12996,10 +12993,10 @@ var DxcTabs = ({
       setActiveIndicatorLeft(refTabs.current[activeTabIndex ?? innerActiveTabIndex]?.offsetLeft ?? 0);
     }
   }, [activeTabIndex, innerActiveTabIndex]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     setMinHeightTabs((refTabList.current?.offsetHeight ?? 0) + 1);
   }, []);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (activeTabIndex && activeTabIndex >= 0) {
       setActiveIndicatorWidth(refTabs.current[activeTabIndex]?.offsetWidth ?? 0);
       setActiveIndicatorLeft(refTabs.current[activeTabIndex]?.offsetLeft ?? 0);
@@ -13310,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_react77.useState)(0);
-  const handleWindowSizeChange = (0, import_react77.useCallback)(() => {
+  const [viewWidth, setViewWidth] = (0, import_react78.useState)(0);
+  const handleWindowSizeChange = (0, import_react78.useCallback)(() => {
     setViewWidth(refTabList?.current?.offsetWidth ?? 0);
   }, [refTabList]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return () => {
@@ -13348,51 +13345,50 @@ var DxcTabs2 = ({
   tabIndex = 0,
   children
 }) => {
-  const childrenArray = (0, import_react77.useMemo)(
-    () => import_react77.Children.toArray(children),
+  const childrenArray = (0, import_react78.useMemo)(
+    () => import_react78.Children.toArray(children),
     [children]
   );
-  const hasLabelAndIcon = (0, import_react77.useMemo)(
-    () => childrenArray.some((child) => (0, import_react77.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_react77.useState)(() => {
+  const [activeTab, setActiveTab] = (0, import_react78.useState)(() => {
     const hasActiveChild = childrenArray.some(
-      (child) => (0, import_react77.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_react77.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
-    ) : childrenArray.find((child) => (0, import_react77.isValidElement)(child) && !child.props.disabled);
-    return (0, import_react77.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_react77.useState)(null);
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react77.useState)(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = (0, import_react77.useState)(0);
-  const [countClick, setCountClick] = (0, import_react77.useState)(0);
-  const [totalTabsWidth, setTotalTabsWidth] = (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 [minHeightTabs, setMinHeightTabs] = (0, import_react77.useState)(0);
-  const refTabList = (0, import_react77.useRef)(null);
-  const refTabListContainer = (0, import_react77.useRef)(null);
-  const colorsTheme = (0, import_react77.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_react77.useContext)(HalstackLanguageContext);
-  const enabledIndicator = (0, import_react77.useMemo)(() => viewWidth < totalTabsWidth, [viewWidth]);
-  (0, import_react77.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_react77.useMemo)(() => {
+  const contextValue = (0, import_react78.useMemo)(() => {
     const focusedChild = innerFocusIndex != null ? childrenArray[innerFocusIndex] : null;
     return {
       iconPosition,
       tabIndex,
-      focusedTab: (0, import_react77.isValidElement)(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
-      isControlled: childrenArray.some((child) => (0, import_react77.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,
@@ -13453,7 +13449,7 @@ var DxcTabs2 = ({
       scrollLimitCheck();
     }, 0);
   };
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (refTabList.current)
       setTotalTabsWidth(() => {
         let total = 0;
@@ -13465,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, {}),
@@ -13491,7 +13489,7 @@ var DxcTabs2 = ({
               tabWidth: activeIndicatorWidth,
               tabLeft: activeIndicatorLeft,
               "aria-disabled": childrenArray.some(
-                (child) => (0, import_react77.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
               )
             }
           )
@@ -13510,8 +13508,8 @@ var DxcTabs2 = ({
         )
       ] })
     ] }) }),
-    import_react77.Children.map(children, (child) => {
-      if ((0, import_react77.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;
@@ -13635,7 +13633,7 @@ DxcTabs2.Tab = Tab_default2;
 var Tabs_default = DxcTabs2;
 
 // src/tag/Tag.tsx
-var import_react78 = 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 });
@@ -13651,8 +13649,8 @@ var DxcTag = ({
   size = "fitContent",
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react78.useContext)(HalstackContext);
-  const [isHovered, changeIsHovered] = (0, import_react78.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,
     {
@@ -13763,11 +13761,11 @@ var TagLabel = import_styled_components71.default.div`
 var Tag_default = DxcTag;
 
 // src/textarea/Textarea.tsx
-var import_react79 = 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_react79.forwardRef)(
+var DxcTextarea = (0, import_react80.forwardRef)(
   ({
     label,
     name = "",
@@ -13792,12 +13790,12 @@ var DxcTextarea = (0, import_react79.forwardRef)(
     tabIndex = 0,
     ariaLabel = "Text area"
   }, ref) => {
-    const [innerValue, setInnerValue] = (0, import_react79.useState)(defaultValue);
-    const textareaId = `textarea-${(0, import_react79.useId)()}`;
-    const colorsTheme = (0, import_react79.useContext)(HalstackContext);
-    const translatedLabels = (0, import_react79.useContext)(HalstackLanguageContext);
-    const textareaRef = (0, import_react79.useRef)(null);
-    const prevValueRef = (0, import_react79.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);
@@ -13847,7 +13845,7 @@ var DxcTextarea = (0, import_react79.forwardRef)(
     const handleOnChange = (event) => {
       changeValue(event.target.value);
     };
-    (0, import_react79.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);
@@ -13991,24 +13989,24 @@ var ErrorMessageContainer3 = import_styled_components72.default.span`
 var Textarea_default = DxcTextarea;
 
 // src/toast/ToastsQueue.tsx
-var import_react83 = 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_react81 = require("react");
+var import_react82 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
 
 // src/utils/useTimeout.tsx
-var import_react80 = require("react");
+var import_react81 = require("react");
 function useTimeout(callback, delay) {
-  const savedCallback = (0, import_react80.useRef)();
-  const timerRef = (0, import_react80.useRef)();
-  const clearTimerCallback = (0, import_react80.useCallback)(() => clearTimeout(timerRef.current), []);
-  (0, import_react80.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_react80.useEffect)(() => {
+  (0, import_react81.useEffect)(() => {
     function tick() {
       savedCallback.current?.();
     }
@@ -14112,7 +14110,7 @@ var spinnerTheme = {
     accentColor: getSemantic("info").primaryColor
   }
 };
-var ToastIcon = (0, import_react81.memo)(
+var ToastIcon = (0, import_react82.memo)(
   ({
     icon,
     hideSemanticIcon,
@@ -14135,8 +14133,8 @@ var DxcToast = ({
   onClear,
   semantic
 }) => {
-  const [isClosing, setIsClosing] = (0, import_react81.useState)(false);
-  const translatedLabels = (0, import_react81.useContext)(HalstackLanguageContext);
+  const [isClosing, setIsClosing] = (0, import_react82.useState)(false);
+  const translatedLabels = (0, import_react82.useContext)(HalstackLanguageContext);
   const clearClosingAnimationTimer = useTimeout(
     () => {
       setIsClosing(true);
@@ -14186,11 +14184,11 @@ var DxcToast = ({
     ] })
   ] });
 };
-var Toast_default = (0, import_react81.memo)(DxcToast);
+var Toast_default = (0, import_react82.memo)(DxcToast);
 
 // src/toast/ToastContext.tsx
-var import_react82 = require("react");
-var ToastContext_default = (0, import_react82.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");
@@ -14221,14 +14219,14 @@ var generateUniqueToastId = (toasts) => {
   return id;
 };
 var DxcToastsQueue = ({ children, duration = 3e3 }) => {
-  const [toasts, setToasts] = (0, import_react83.useState)([]);
-  const [isMounted, setIsMounted] = (0, import_react83.useState)(false);
-  const adjustedDuration = (0, import_react83.useMemo)(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
-  const id = (0, import_react83.useId)();
-  const remove = (0, import_react83.useCallback)((id2) => {
+  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_react83.useCallback)(
+  const add = (0, import_react84.useCallback)(
     (toast, semantic) => {
       const id2 = generateUniqueToastId(toasts);
       setToasts((prevToasts) => [...prevToasts, { id: id2, semantic, ...toast }].slice(-5));
@@ -14236,7 +14234,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
     },
     [duration]
   );
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     setIsMounted(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(ToastContext_default.Provider, { value: add, children: [
@@ -14261,7 +14259,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
 var ToastsQueue_default = DxcToastsQueue;
 
 // src/toggle-group/ToggleGroup.tsx
-var import_react84 = 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 = ({
@@ -14276,9 +14274,9 @@ var DxcToggleGroup = ({
   multiple = false,
   tabIndex = 0
 }) => {
-  const toggleGroupLabelId = `label-toggle-group-${(0, import_react84.useId)()}`;
-  const [selectedValue, setSelectedValue] = (0, import_react84.useState)(defaultValue ?? (multiple ? [] : -1));
-  const colorsTheme = (0, import_react84.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) {
@@ -14430,7 +14428,7 @@ var IconContainer7 = import_styled_components75.default.div`
 var ToggleGroup_default = DxcToggleGroup;
 
 // src/wizard/Wizard.tsx
-var import_react85 = require("react");
+var import_react86 = require("react");
 var import_styled_components76 = __toESM(require("styled-components"));
 
 // src/wizard/Icons.tsx
@@ -14604,9 +14602,9 @@ var DxcWizard = ({
   margin,
   tabIndex = 0
 }) => {
-  const colorsTheme = (0, import_react85.useContext)(HalstackContext);
-  const [innerCurrent, setInnerCurrentStep] = (0, import_react85.useState)(defaultCurrentStep);
-  const renderedCurrent = (0, import_react85.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);
@@ -14642,10 +14640,10 @@ var DxcWizard = ({
 var Wizard_default = DxcWizard;
 
 // src/toast/useToast.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var useToast = () => {
-  const add = (0, import_react86.useContext)(ToastContext_default);
-  const toast = (0, import_react86.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"),