@dxc-technology/halstack-react 0.0.0-c2aa807 → 0.0.0-c2da493

package/dist/index.mjs

@@ -3540,8 +3540,8 @@ var BottomLink = styled12.a`
 var Footer_default = DxcFooter;
 
 // src/header/Header.tsx
-import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, useState as useState6 } from "react";
-import styled16, { ThemeProvider as ThemeProvider2 } from "styled-components";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState6 } from "react";
+import styled16 from "styled-components";
 
 // src/dropdown/Dropdown.tsx
 import * as Popover from "@radix-ui/react-popover";
@@ -3982,114 +3982,33 @@ var Dropdown_default = DxcDropdown;
 
 // src/header/Header.tsx
 import { useContext as useContext6 } from "react";
+
+// src/header/Icons.tsx
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-var Dropdown = (props) => /* @__PURE__ */ jsx20(HeaderDropdown, { children: /* @__PURE__ */ jsx20(Dropdown_default, { ...props }) });
-var getLogoElement = (themeInput, logoLabel) => {
-  if (!themeInput) {
-    return /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "73", height: "40", viewBox: "0 0 73 40", children: [
-      /* @__PURE__ */ jsx20("title", { children: "DXC Logo" }),
-      /* @__PURE__ */ jsx20("g", { transform: "translate(0)", children: /* @__PURE__ */ jsxs12("g", { children: [
-        /* @__PURE__ */ jsx20(
-          "path",
-          {
-            d: "M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322",
-            transform: "translate(-21.028 65.555)",
-            fill: "#010101"
-          }
-        ),
-        /* @__PURE__ */ jsx20(
-          "path",
-          {
-            d: "M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978",
-            transform: "translate(-21.049 88.739)",
-            fill: "#603494"
-          }
-        )
-      ] }) })
-    ] });
-  } else if (typeof themeInput === "string") return /* @__PURE__ */ jsx20(LogoImg2, { alt: logoLabel, src: themeInput });
-  else return themeInput;
-};
-var Content3 = ({ isResponsive, responsiveContent, handleMenu, content }) => isResponsive ? /* @__PURE__ */ jsx20(MenuContent, { children: responsiveContent?.(handleMenu) }) : /* @__PURE__ */ jsx20(ContentContainer, { children: content });
-var DxcHeader = ({
-  underlined = false,
-  content,
-  responsiveContent,
-  onClick,
-  margin,
-  tabIndex = 0
-}) => {
-  const [isResponsive, setIsResponsive] = useState6(false);
-  const [isMenuVisible, setIsMenuVisible] = useState6(false);
-  const colorsTheme = useContext6(HalstackContext);
-  const translatedLabels = useContext6(HalstackLanguageContext);
-  const ref = useRef3(null);
-  const handleMenu = () => {
-    if (isResponsive && !isMenuVisible) {
-      setIsMenuVisible(!isMenuVisible);
-    } else {
-      setIsMenuVisible(!isMenuVisible);
-    }
-  };
-  const headerLogo = useMemo5(
-    () => getLogoElement(colorsTheme.header.logo, translatedLabels.formFields.logoAlternativeText),
-    [colorsTheme, translatedLabels]
-  );
-  const headerResponsiveLogo = useMemo5(
-    () => getLogoElement(colorsTheme.header.logoResponsive, translatedLabels.formFields.logoAlternativeText),
-    [colorsTheme, translatedLabels]
-  );
-  useEffect4(() => {
-    const handleResize = () => {
-      setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  useEffect4(() => {
-    if (!isResponsive) {
-      setIsMenuVisible(false);
-    }
-  }, [isResponsive]);
-  return /* @__PURE__ */ jsx20(ThemeProvider2, { theme: colorsTheme.header, children: /* @__PURE__ */ jsxs12(HeaderContainer, { underlined, margin, ref, children: [
-    /* @__PURE__ */ jsx20(LogoAnchor, { tabIndex: onClick ? tabIndex : -1, interactive: !!onClick, onClick, children: /* @__PURE__ */ jsx20(LogoContainer2, { children: headerLogo }) }),
-    isResponsive && responsiveContent && /* @__PURE__ */ jsxs12(Flex_default, { grow: 1, children: [
-      /* @__PURE__ */ jsx20(ChildContainer, { children: /* @__PURE__ */ jsxs12(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
-        /* @__PURE__ */ jsx20(DxcIcon, { icon: "menu" }),
-        translatedLabels.header.hamburgerTitle
-      ] }) }),
-      /* @__PURE__ */ jsxs12(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
-        /* @__PURE__ */ jsxs12(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ jsx20(ResponsiveLogoContainer, { children: headerResponsiveLogo }),
-          /* @__PURE__ */ jsx20(Tooltip, { label: translatedLabels.header.closeIcon, children: /* @__PURE__ */ jsx20(CloseAction, { tabIndex, onClick: handleMenu, "aria-label": translatedLabels.header.closeIcon, children: /* @__PURE__ */ jsx20(DxcIcon, { icon: "close" }) }) })
-        ] }),
-        /* @__PURE__ */ jsx20(
-          Content3,
-          {
-            isResponsive,
-            responsiveContent,
-            handleMenu,
-            content
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx20(Overlay2, { onClick: handleMenu, hasVisibility: isMenuVisible })
-    ] }),
-    !isResponsive && /* @__PURE__ */ jsx20(
-      Content3,
+var dxcLogo2 = /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "73", height: "40", viewBox: "0 0 73 40", children: [
+  /* @__PURE__ */ jsx20("title", { children: "DXC Logo" }),
+  /* @__PURE__ */ jsx20("g", { transform: "translate(0)", children: /* @__PURE__ */ jsxs12("g", { children: [
+    /* @__PURE__ */ jsx20(
+      "path",
       {
-        isResponsive,
-        responsiveContent,
-        handleMenu,
-        content
+        d: "M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322",
+        transform: "translate(-21.028 65.555)",
+        fill: "#010101"
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      "path",
+      {
+        d: "M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978",
+        transform: "translate(-21.049 88.739)",
+        fill: "#603494"
       }
     )
-  ] }) });
-};
-DxcHeader.Dropdown = Dropdown;
+  ] }) })
+] });
+
+// src/header/Header.tsx
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var HeaderDropdown = styled16.div`
   display: flex;
   button {
@@ -4100,28 +4019,28 @@ var HeaderDropdown = styled16.div`
   }
 `;
 var HeaderContainer = styled16.header`
+  background-color: var(--color-bg-neutral-lightest);
+  border-bottom: ${(props) => props.underlined && `var(--border-width-m) var(--border-style-default) var(--border-color-neutral-strongest)`};
+  align-items: center;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: space-between;
-  min-height: ${(props) => props.theme.minHeight};
   margin-bottom: ${(props) => props.margin ? spaces[props.margin] : "0px"};
-  padding: ${(props) => `${props.theme.paddingTop} ${props.theme.paddingRight} ${props.theme.paddingBottom} ${props.theme.paddingLeft}`};
-  background-color: ${(props) => props.theme.backgroundColor};
-  border-bottom: ${(props) => props.underlined && `${props.theme.underlinedThickness} ${props.theme.underlinedStyle} ${props.theme.underlinedColor}`};
+  min-height: 64px;
+  padding: var(--spacing-padding-none) var(--spacing-padding-l);
 `;
 var LogoAnchor = styled16.a`
   ${(props) => props.interactive ? "cursor: pointer" : "cursor: default; outline:none;"};
 `;
 var LogoImg2 = styled16.img`
-  max-height: ${(props) => props.theme.logoHeight};
-  width: ${(props) => props.theme.logoWidth};
+  max-height: var(--height-xl);
+  width: auto;
 `;
 var LogoContainer2 = styled16.div`
-  max-height: ${(props) => props.theme.logoHeight};
-  width: ${(props) => props.theme.logoWidth};
+  max-height: var(--height-xl);
   vertical-align: middle;
+  width: auto;
 `;
 var ChildContainer = styled16.div`
   display: flex;
@@ -4136,94 +4055,74 @@ var ContentContainer = styled16.div`
   flex-grow: 1;
   justify-content: flex-end;
   width: calc(100% - 186px);
-  color: ${(props) => props.theme.contentColor};
+  color: var(--color-fg-neutral-dark);
 `;
 var HamburgerTrigger = styled16.button`
+  align-items: center;
+  background-color: transparent;
+  border-radius: var(--border-radius-xs);
+  border: var(--border-width-s) var(--border-style-default) transparent;
+  color: var(--color-fg-neutral-dark);
+  cursor: pointer;
   display: flex;
   flex-direction: column;
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-label-s);
+  font-weight: var(--typography-label-semibold);
+  height: var(--height-xl);
   justify-content: center;
-  align-items: center;
-  width: 54px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  background-color: transparent;
+  // TODO: Ask about padding (spacing-padding-m or spacing-padding-xs?)
+  padding: var(--spacing-padding-none) var(--spacing-padding-m);
+  text-transform: uppercase;
   :hover {
-    background-color: ${(props) => props.theme.hamburgerHoverColor};
+    background-color: var(--color-bg-neutral-medium);
   }
   &:focus {
-    outline: ${(props) => props.theme.hamburgerFocusColor} auto 1px;
+    outline: var(--border-color-secondary-medium) var(--border-style-default) var(--border-width-m);
   }
   & > svg {
-    fill: ${(props) => props.theme.hamburgerIconColor};
+    fill: var(--color-fg-neutral-dark);
   }
   & > span {
-    font-size: 24px;
+    font-size: var(--height-s);
   }
-  font-family: ${(props) => props.theme.hamburgerFontFamily};
-  font-style: ${(props) => props.theme.hamburgerFontStyle};
-  font-size: ${(props) => props.theme.hamburgerFontSize};
-  text-transform: ${(props) => props.theme.hamburgerTextTransform};
-  font-weight: ${(props) => props.theme.hamburgerFontWeight};
-  color: ${(props) => props.theme.hamburgerFontColor};
 `;
 var ResponsiveMenu = styled16.div`
   display: flex;
   flex-direction: column;
-  background-color: ${(props) => props.theme.menuBackgroundColor};
+  background-color: var(--color-bg-neutral-lightest);
   position: fixed;
   top: 0;
   right: 0;
-  z-index: ${(props) => props.theme.menuZindex};
+  z-index: 2000;
 
   @media (max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem) {
-    width: ${(props) => props.theme.menuTabletWidth};
+    width: 60vw;
   }
 
   @media (not((max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem))) {
-    width: ${(props) => props.theme.menuMobileWidth};
+    width: 100vw;
   }
 
   height: 100vh;
   padding: 20px;
   transform: ${(props) => props.hasVisibility ? "translateX(0)" : "translateX(100vw)"};
-  opacity: ${(props) => props.hasVisibility ? "1" : "0.96"};
   transition-property: transform, opacity;
   transition-duration: 0.6s;
   transition-timing-function: ease-in-out;
   box-sizing: border-box;
 `;
 var ResponsiveLogoContainer = styled16.div`
-  max-height: ${(props) => props.theme.logoHeight};
-  width: ${(props) => props.theme.logoWidth};
+  max-height: var(--height-xl);
+  width: auto;
   display: flex;
 `;
-var CloseAction = styled16.button`
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  padding: 6px;
-  border: unset;
-  border-radius: 2px;
-  background-color: transparent;
-  cursor: pointer;
-
-  :focus,
-  :focus-visible {
-    outline: ${(props) => props.theme.hamburgerFocusColor} auto 1px;
-  }
-  font-size: 24px;
-  svg {
-    height: 24px;
-    width: 24px;
-  }
-`;
 var MenuContent = styled16.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: 100%;
-  color: ${(props) => props.theme.contentColor};
+  color: var(--color-fg-neutral-dark);
 `;
 var Overlay2 = styled16.div`
   position: fixed;
@@ -4231,29 +4130,123 @@ var Overlay2 = styled16.div`
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: ${(props) => props.theme.overlayColor};
-  opacity: ${(props) => props.theme.overlayOpacity} !important;
-  visibility: ${(props) => props.hasVisibility ? "visible" : "hidden"};
-  opacity: ${(props) => props.hasVisibility ? "1" : "0"};
+  background-color: ${(props) => props.hasVisibility ? "var(--color-bg-alpha-medium)" : "transparent"};
 
   @media (max-width: ${responsiveSizes.small}rem) {
-    display: none;
+    ${(props) => !props.hasVisibility && "display: none"};
   }
 
-  transition: opacity 0.2s 0.2s ease-in-out;
-  z-index: ${(props) => props.theme.overlayZindex};
+  z-index: 1600;
 `;
+var Dropdown = (props) => /* @__PURE__ */ jsx21(HeaderDropdown, { children: /* @__PURE__ */ jsx21(Dropdown_default, { ...props }) });
+var getLogoElement = (logo) => {
+  if (logo) {
+    return /* @__PURE__ */ jsx21(LogoImg2, { alt: logo.title, src: logo.src, title: logo.title });
+  } else {
+    return dxcLogo2;
+  }
+};
+var Content3 = ({ isResponsive, responsiveContent, handleMenu, content }) => isResponsive ? /* @__PURE__ */ jsx21(MenuContent, { children: responsiveContent?.(handleMenu) }) : /* @__PURE__ */ jsx21(ContentContainer, { children: content });
+var DxcHeader = ({
+  underlined = false,
+  content,
+  responsiveContent,
+  logo,
+  margin,
+  onClick,
+  tabIndex = 0
+}) => {
+  const [isResponsive, setIsResponsive] = useState6(false);
+  const [isMenuVisible, setIsMenuVisible] = useState6(false);
+  const translatedLabels = useContext6(HalstackLanguageContext);
+  const ref = useRef3(null);
+  const handleMenu = () => {
+    if (isResponsive && !isMenuVisible) {
+      setIsMenuVisible(!isMenuVisible);
+    } else {
+      setIsMenuVisible(!isMenuVisible);
+    }
+  };
+  const headerLogo = getLogoElement(logo);
+  useEffect4(() => {
+    const handleResize = () => {
+      setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  useEffect4(() => {
+    if (!isResponsive) {
+      setIsMenuVisible(false);
+    }
+  }, [isResponsive]);
+  return /* @__PURE__ */ jsxs13(HeaderContainer, { underlined, margin, ref, children: [
+    /* @__PURE__ */ jsx21(
+      LogoAnchor,
+      {
+        href: logo?.href,
+        tabIndex: onClick ? tabIndex : -1,
+        interactive: !!onClick || !!logo?.href,
+        onClick,
+        children: /* @__PURE__ */ jsx21(LogoContainer2, { children: headerLogo })
+      }
+    ),
+    isResponsive && responsiveContent && /* @__PURE__ */ jsxs13(Flex_default, { grow: 1, children: [
+      /* @__PURE__ */ jsx21(ChildContainer, { children: /* @__PURE__ */ jsxs13(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
+        /* @__PURE__ */ jsx21(DxcIcon, { icon: "menu" }),
+        translatedLabels.header.hamburgerTitle
+      ] }) }),
+      /* @__PURE__ */ jsxs13(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
+        /* @__PURE__ */ jsxs13(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx21(ResponsiveLogoContainer, { children: headerLogo }),
+          /* @__PURE__ */ jsx21(
+            ActionIcon_default,
+            {
+              icon: "close",
+              onClick: handleMenu,
+              tabIndex,
+              title: translatedLabels.header.closeIcon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx21(
+          Content3,
+          {
+            isResponsive,
+            responsiveContent,
+            handleMenu,
+            content
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx21(Overlay2, { onClick: handleMenu, hasVisibility: isMenuVisible })
+    ] }),
+    !isResponsive && /* @__PURE__ */ jsx21(
+      Content3,
+      {
+        isResponsive,
+        responsiveContent,
+        handleMenu,
+        content
+      }
+    )
+  ] });
+};
+DxcHeader.Dropdown = Dropdown;
 var Header_default = DxcHeader;
 
 // src/sidenav/Sidenav.tsx
 import { forwardRef as forwardRef3, useContext as useContext8, useEffect as useEffect5, useState as useState7 } from "react";
-import styled17, { ThemeProvider as ThemeProvider3 } from "styled-components";
+import styled17, { ThemeProvider as ThemeProvider2 } from "styled-components";
 
 // src/bleed/Bleed.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var getNegativeValue = (value) => value ? `calc(${value} * -1)` : null;
 function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     DxcContainer,
     {
       margin: {
@@ -4279,39 +4272,39 @@ var useResponsiveSidenavVisibility = () => {
 };
 
 // src/sidenav/Sidenav.tsx
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var DxcSidenav = ({ title, children }) => {
   const colorsTheme = useContext8(HalstackContext);
-  return /* @__PURE__ */ jsx22(ThemeProvider3, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ jsxs13(SidenavContainer, { children: [
+  return /* @__PURE__ */ jsx23(ThemeProvider2, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ jsxs14(SidenavContainer, { children: [
     title,
-    /* @__PURE__ */ jsx22(Flex_default, { direction: "column", gap: "1rem", children })
+    /* @__PURE__ */ jsx23(Flex_default, { direction: "column", gap: "1rem", children })
   ] }) });
 };
-var Title2 = ({ children }) => /* @__PURE__ */ jsx22(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx22(SidenavTitle, { children }) });
-var Section = ({ children }) => /* @__PURE__ */ jsxs13(Fragment6, { children: [
-  /* @__PURE__ */ jsx22(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx22(Flex_default, { direction: "column", children }) }),
-  /* @__PURE__ */ jsx22(Divider, {})
+var Title2 = ({ children }) => /* @__PURE__ */ jsx23(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx23(SidenavTitle, { children }) });
+var Section = ({ children }) => /* @__PURE__ */ jsxs14(Fragment6, { children: [
+  /* @__PURE__ */ jsx23(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx23(Flex_default, { direction: "column", children }) }),
+  /* @__PURE__ */ jsx23(Divider, {})
 ] });
 var Group = ({ title, collapsable = false, icon, children }) => {
   const [collapsed, setCollapsed] = useState7(false);
   const [isSelected, changeIsSelected] = useState7(false);
-  return /* @__PURE__ */ jsx22(GroupContextProvider, { value: changeIsSelected, children: /* @__PURE__ */ jsxs13(SidenavGroup, { children: [
-    collapsable && title ? /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx23(GroupContextProvider, { value: changeIsSelected, children: /* @__PURE__ */ jsxs14(SidenavGroup, { children: [
+    collapsable && title ? /* @__PURE__ */ jsxs14(
       SidenavGroupTitleButton,
       {
         "aria-expanded": !collapsed,
         onClick: () => setCollapsed(!collapsed),
         selectedGroup: collapsed && isSelected,
         children: [
-          /* @__PURE__ */ jsxs13(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            typeof icon === "string" ? /* @__PURE__ */ jsx22(DxcIcon, { icon }) : icon,
+          /* @__PURE__ */ jsxs14(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            typeof icon === "string" ? /* @__PURE__ */ jsx23(DxcIcon, { icon }) : icon,
             title
           ] }),
-          /* @__PURE__ */ jsx22(DxcIcon, { icon: collapsed ? "expand_more" : "expand_less" })
+          /* @__PURE__ */ jsx23(DxcIcon, { icon: collapsed ? "expand_more" : "expand_less" })
         ]
       }
-    ) : title && /* @__PURE__ */ jsxs13(SidenavGroupTitle, { children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx22(DxcIcon, { icon }) : icon,
+    ) : title && /* @__PURE__ */ jsxs14(SidenavGroupTitle, { children: [
+      typeof icon === "string" ? /* @__PURE__ */ jsx23(DxcIcon, { icon }) : icon,
       title
     ] }),
     !collapsed && children
@@ -4328,7 +4321,7 @@ var Link = forwardRef3(
     useEffect5(() => {
       changeIsGroupSelected?.((isGroupSelected2) => !isGroupSelected2 ? selected : isGroupSelected2);
     }, [selected, changeIsGroupSelected]);
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       SidenavLink,
       {
         selected,
@@ -4339,11 +4332,11 @@ var Link = forwardRef3(
         onClick: handleClick,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsxs13(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            typeof icon === "string" ? /* @__PURE__ */ jsx22(DxcIcon, { icon }) : icon,
+          /* @__PURE__ */ jsxs14(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            typeof icon === "string" ? /* @__PURE__ */ jsx23(DxcIcon, { icon }) : icon,
             children
           ] }),
-          newWindow && /* @__PURE__ */ jsx22(DxcIcon, { icon: "open_in_new" })
+          newWindow && /* @__PURE__ */ jsx23(DxcIcon, { icon: "open_in_new" })
         ]
       }
     );
@@ -4502,9 +4495,9 @@ var Sidenav_default = DxcSidenav;
 import { Children as Children2, isValidElement, useState as useState8, useEffect as useEffect6 } from "react";
 
 // src/layout/Icons.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var layoutIcons = {
-  facebookLogo: /* @__PURE__ */ jsx23(
+  facebookLogo: /* @__PURE__ */ jsx24(
     "svg",
     {
       version: "1.1",
@@ -4514,7 +4507,7 @@ var layoutIcons = {
       height: "438.536px",
       viewBox: "0 0 438.536 438.536",
       fill: "#FFFFFF",
-      children: /* @__PURE__ */ jsx23("g", { children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24("g", { children: /* @__PURE__ */ jsx24(
         "path",
         {
           d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123\n      C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126\n      h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225\n      C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402\n      c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401\n      c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
@@ -4522,9 +4515,9 @@ var layoutIcons = {
       ) })
     }
   ),
-  xLogo: /* @__PURE__ */ jsxs14("svg", { width: "256", height: "256", viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx23("rect", { width: "256", height: "256", rx: "40", fill: "white" }),
-    /* @__PURE__ */ jsx23(
+  xLogo: /* @__PURE__ */ jsxs15("svg", { width: "256", height: "256", viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx24("rect", { width: "256", height: "256", rx: "40", fill: "white" }),
+    /* @__PURE__ */ jsx24(
       "path",
       {
         d: "M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z",
@@ -4532,7 +4525,7 @@ var layoutIcons = {
       }
     )
   ] }),
-  linkedinLogo: /* @__PURE__ */ jsx23(
+  linkedinLogo: /* @__PURE__ */ jsx24(
     "svg",
     {
       version: "1.1",
@@ -4542,7 +4535,7 @@ var layoutIcons = {
       height: "438.536px",
       viewBox: "0 0 438.536 438.536",
       fill: "#FFFFFF",
-      children: /* @__PURE__ */ jsx23("g", { children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24("g", { children: /* @__PURE__ */ jsx24(
         "path",
         {
           d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123\n        C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126\n        h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225\n        C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332\n        c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41\n        c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708\n        c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92\n        c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991\n        c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974\n        c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64\n        H370.873z"
@@ -4601,7 +4594,7 @@ var useResponsive = (breakpoint) => {
 };
 
 // src/layout/ApplicationLayout.tsx
-import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var ApplicationLayoutContainer = styled18.div`
   position: absolute;
   top: 64px;
@@ -4693,7 +4686,7 @@ var MainContentContainer = styled18.main`
   flex: 1;
   background-color: #fff;
 `;
-var Main = ({ children }) => /* @__PURE__ */ jsx24(Fragment7, { children });
+var Main = ({ children }) => /* @__PURE__ */ jsx25(Fragment7, { children });
 var DxcApplicationLayout = ({
   visibilityToggleLabel = "",
   header,
@@ -4713,24 +4706,24 @@ var DxcApplicationLayout = ({
       setIsSidenavVisibleResponsive(false);
     }
   }, [isResponsive]);
-  return /* @__PURE__ */ jsxs15(ApplicationLayoutContainer, { hasSidenav: !!sidenav, isSidenavVisible: isSidenavVisibleResponsive, ref, children: [
-    /* @__PURE__ */ jsx24(HeaderContainer2, { children: header ?? /* @__PURE__ */ jsx24(Header_default, { underlined: true }) }),
-    sidenav && isResponsive && /* @__PURE__ */ jsx24(VisibilityToggle, { children: /* @__PURE__ */ jsx24(Tooltip, { label: translatedLabels.applicationLayout.visibilityToggleTitle, children: /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(ApplicationLayoutContainer, { hasSidenav: !!sidenav, isSidenavVisible: isSidenavVisibleResponsive, ref, children: [
+    /* @__PURE__ */ jsx25(HeaderContainer2, { children: header ?? /* @__PURE__ */ jsx25(Header_default, { underlined: true }) }),
+    sidenav && isResponsive && /* @__PURE__ */ jsx25(VisibilityToggle, { children: /* @__PURE__ */ jsx25(Tooltip, { label: translatedLabels.applicationLayout.visibilityToggleTitle, children: /* @__PURE__ */ jsxs16(
       HamburgerTrigger2,
       {
         onClick: handleSidenavVisibility,
         "aria-label": visibilityToggleLabel ? void 0 : translatedLabels.applicationLayout.visibilityToggleTitle,
         children: [
-          /* @__PURE__ */ jsx24(DxcIcon, { icon: "Menu" }),
+          /* @__PURE__ */ jsx25(DxcIcon, { icon: "Menu" }),
           visibilityToggleLabel
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxs15(BodyContainer, { children: [
-      /* @__PURE__ */ jsx24(SidenavContextProvider, { value: setIsSidenavVisibleResponsive, children: sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /* @__PURE__ */ jsx24(SidenavContainer2, { children: sidenav }) }),
-      /* @__PURE__ */ jsxs15(MainContainer, { children: [
-        /* @__PURE__ */ jsx24(MainContentContainer, { children: findChildType(children, Main) }),
-        footer ?? /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsxs16(BodyContainer, { children: [
+      /* @__PURE__ */ jsx25(SidenavContextProvider, { value: setIsSidenavVisibleResponsive, children: sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /* @__PURE__ */ jsx25(SidenavContainer2, { children: sidenav }) }),
+      /* @__PURE__ */ jsxs16(MainContainer, { children: [
+        /* @__PURE__ */ jsx25(MainContentContainer, { children: findChildType(children, Main) }),
+        footer ?? /* @__PURE__ */ jsx25(
           Footer_default,
           {
             copyright: `\xA9 DXC Technology ${year}. All rights reserved.`,
@@ -4751,7 +4744,7 @@ var ApplicationLayout_default = DxcApplicationLayout;
 
 // src/badge/Badge.tsx
 import styled19 from "styled-components";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var contextualColorMap = {
   grey: {
     background: "var(--color-bg-neutral-light)",
@@ -4866,7 +4859,7 @@ var DxcBadge = ({
   icon,
   notificationLimit = 99,
   size = "medium"
-}) => /* @__PURE__ */ jsx25(Tooltip, { label: title, children: /* @__PURE__ */ jsxs16(
+}) => /* @__PURE__ */ jsx26(Tooltip, { label: title, children: /* @__PURE__ */ jsxs17(
   BadgeContainer,
   {
     label,
@@ -4875,8 +4868,8 @@ var DxcBadge = ({
     size,
     "aria-label": title,
     children: [
-      mode === "contextual" && icon && /* @__PURE__ */ jsx25(IconContainer4, { size, children: typeof icon === "string" ? /* @__PURE__ */ jsx25(DxcIcon, { icon }) : icon }),
-      label && /* @__PURE__ */ jsx25(Label, { size, children: typeof label === "number" ? label > notificationLimit ? `+${notificationLimit}` : label : label })
+      mode === "contextual" && icon && /* @__PURE__ */ jsx26(IconContainer4, { size, children: typeof icon === "string" ? /* @__PURE__ */ jsx26(DxcIcon, { icon }) : icon }),
+      label && /* @__PURE__ */ jsx26(Label, { size, children: typeof label === "number" ? label > notificationLimit ? `+${notificationLimit}` : label : label })
     ]
   }
 ) });
@@ -4889,7 +4882,7 @@ import styled21 from "styled-components";
 // src/breadcrumbs/Item.tsx
 import { useRef as useRef5 } from "react";
 import styled20 from "styled-components";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ListItem = styled20.li`
   display: flex;
   align-items: center;
@@ -4940,12 +4933,12 @@ var Item = ({ isCurrentPage = false, href, label, onClick }) => {
     if (optionElement?.title === "" && labelContainer.scrollWidth > labelContainer.clientWidth)
       optionElement.title = label;
   };
-  return /* @__PURE__ */ jsx26(ListItem, { "aria-current": isCurrentPage ? "page" : void 0, isCurrentPage, children: isCurrentPage ? /* @__PURE__ */ jsx26(CurrentPage, { ref: currentItemRef, onMouseEnter: handleOnMouseEnter, children: label }) : /* @__PURE__ */ jsx26(Link2, { href, onClick: handleOnClick, children: /* @__PURE__ */ jsx26(Text, { children: label }) }) });
+  return /* @__PURE__ */ jsx27(ListItem, { "aria-current": isCurrentPage ? "page" : void 0, isCurrentPage, children: isCurrentPage ? /* @__PURE__ */ jsx27(CurrentPage, { ref: currentItemRef, onMouseEnter: handleOnMouseEnter, children: label }) : /* @__PURE__ */ jsx27(Link2, { href, onClick: handleOnClick, children: /* @__PURE__ */ jsx27(Text, { children: label }) }) });
 };
 var Item_default = Item;
 
 // src/breadcrumbs/Breadcrumbs.tsx
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var OrderedList = styled21.ol`
   display: flex;
   align-items: center;
@@ -4982,21 +4975,21 @@ var DxcBreadcrumbs = ({
     },
     [items]
   );
-  return /* @__PURE__ */ jsx27("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx27(OrderedList, { children: items && items.length > Math.max(itemsBeforeCollapse, 2) ? /* @__PURE__ */ jsxs17(Fragment8, { children: [
-    showRoot && /* @__PURE__ */ jsx27(Item_default, { href: items[0]?.href, label: items[0]?.label ?? "" }, 0),
-    /* @__PURE__ */ jsx27(Flex_default, { alignItems: "center", as: "li", children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx28(OrderedList, { children: items && items.length > Math.max(itemsBeforeCollapse, 2) ? /* @__PURE__ */ jsxs18(Fragment8, { children: [
+    showRoot && /* @__PURE__ */ jsx28(Item_default, { href: items[0]?.href, label: items[0]?.label ?? "" }, 0),
+    /* @__PURE__ */ jsx28(Flex_default, { alignItems: "center", as: "li", children: /* @__PURE__ */ jsx28(
       Dropdown_default,
       {
         caretHidden: true,
-        icon: /* @__PURE__ */ jsx27(DxcIcon, { icon: "more_horiz" }),
+        icon: /* @__PURE__ */ jsx28(DxcIcon, { icon: "more_horiz" }),
         margin: showRoot ? { left: "small" } : void 0,
         onSelectOption: handleOnSelectOption,
         options: items.slice(showRoot ? 1 : 0, -1).map(({ label, href }) => ({ label, value: href })),
         title: "More options"
       }
     ) }, 1),
-    /* @__PURE__ */ jsx27(Item_default, { isCurrentPage: true, label: items[items.length - 1]?.label ?? "" }, 2)
-  ] }) : items.map((item, index, { length }) => /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(Item_default, { isCurrentPage: true, label: items[items.length - 1]?.label ?? "" }, 2)
+  ] }) : items.map((item, index, { length }) => /* @__PURE__ */ jsx28(
     Item_default,
     {
       href: item.href,
@@ -5011,10 +5004,10 @@ var Breadcrumbs_default = DxcBreadcrumbs;
 
 // src/bulleted-list/BulletedList.tsx
 import { Children as Children3, useContext as useContext11 } from "react";
-import styled23, { ThemeProvider as ThemeProvider4 } from "styled-components";
+import styled23, { ThemeProvider as ThemeProvider3 } from "styled-components";
 
 // src/typography/Typography.tsx
-import { useContext as useContext10, useMemo as useMemo6 } from "react";
+import { useContext as useContext10, useMemo as useMemo5 } from "react";
 import styled22 from "styled-components";
 
 // src/typography/TypographyContext.tsx
@@ -5036,7 +5029,7 @@ var TypographyContext_default = createContext5({
 });
 
 // src/typography/Typography.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Typography = styled22.span`
   margin: 0px;
   display: ${({ display }) => display};
@@ -5055,103 +5048,101 @@ var Typography = styled22.span`
 `;
 function DxcTypography({ children, ...props }) {
   const componentContext = useContext10(TypographyContext_default);
-  const contextValue = useMemo6(
+  const contextValue = useMemo5(
     () => ({
       ...componentContext,
       ...props
     }),
     [componentContext, props]
   );
-  return /* @__PURE__ */ jsx28(TypographyContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsx28(Typography, { ...contextValue, children }) });
+  return /* @__PURE__ */ jsx29(TypographyContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsx29(Typography, { ...contextValue, children }) });
 }
 
 // src/bulleted-list/BulletedList.tsx
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
-var BulletedListItem = ({ children }) => /* @__PURE__ */ jsx29(Fragment9, { children });
-var DxcBulletedList = ({ children, type = "disc", icon = "" }) => {
-  const colorsTheme = useContext11(HalstackContext);
-  return /* @__PURE__ */ jsx29(ThemeProvider4, { theme: colorsTheme.bulletedList, children: /* @__PURE__ */ jsx29(ListContainer, { children: /* @__PURE__ */ jsx29(Flex_default, { direction: "column", as: type === "number" ? "ol" : "ul", gap: "0.125rem", children: Children3.map(children, (child, index) => /* @__PURE__ */ jsx29(ListItem2, { children: /* @__PURE__ */ jsxs18(GeneralContent, { children: [
-    type === "number" ? /* @__PURE__ */ jsx29(Number2, { children: /* @__PURE__ */ jsxs18(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: [
-      index + 1,
-      "."
-    ] }) }) : type === "square" ? /* @__PURE__ */ jsx29(Bullet, { children: /* @__PURE__ */ jsx29(Square, {}) }) : type === "circle" ? /* @__PURE__ */ jsx29(Bullet, { children: /* @__PURE__ */ jsx29(Circle, {}) }) : type === "icon" ? /* @__PURE__ */ jsx29(Bullet, { children: /* @__PURE__ */ jsx29(Icon, { children: typeof icon === "string" ? /* @__PURE__ */ jsx29(DxcIcon, { icon }) : icon }) }) : /* @__PURE__ */ jsx29(Bullet, { children: /* @__PURE__ */ jsx29(Disc, {}) }),
-    /* @__PURE__ */ jsx29(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: child })
-  ] }) })) }) }) });
-};
-DxcBulletedList.Item = BulletedListItem;
+import { Fragment as Fragment9, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var ListContainer = styled23.div`
   ul,
   ol {
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 `;
 var Bullet = styled23.div`
-  display: flex;
-  align-self: flex-start;
   align-items: center;
-  height: 1.5rem;
+  align-self: flex-start;
+  display: flex;
+  height: var(--height-s);
 `;
 var GeneralContent = styled23.div`
+  align-items: center;
   display: grid;
+  gap: var(--spacing-gap-s);
   grid-template-columns: auto 1fr;
-  align-items: center;
 `;
 var Icon = styled23.div`
-  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  font-size: var(--height-xxs);
+  height: var(--height-s);
   width: auto;
-  margin-right: ${(props) => props.theme.bulletMarginRight};
-  align-content: center;
-  color: ${(props) => props.theme.fontColor};
-
-  font-size: ${(props) => props.theme.bulletIconHeight};
   svg {
-    height: ${(props) => props.theme.bulletIconHeight};
-    width: ${(props) => props.theme.bulletIconWidth};
+    height: var(--height-xxs);
+    width: 16px;
   }
 `;
 var Number2 = styled23.div`
-  user-select: none;
-  margin-right: ${(props) => props.theme.bulletMarginRight};
-  display: flex;
-  box-sizing: border-box;
   align-self: flex-start;
+  box-sizing: border-box;
+  display: flex;
   min-width: 0;
+  user-select: none;
 `;
 var Square = styled23.div`
-  background-color: ${(props) => props.theme.fontColor};
-  height: ${(props) => props.theme.bulletHeight};
-  width: ${(props) => props.theme.bulletWidth};
-  margin-right: ${(props) => props.theme.bulletMarginRight};
+  background-color: var(--color-fg-neutral-dark);
+  height: 4px;
+  width: 4px;
 `;
 var Circle = styled23.div`
-  height: ${(props) => props.theme.bulletHeight};
-  width: ${(props) => props.theme.bulletWidth};
+  border-color: var(--color-fg-neutral-dark);
   border-radius: 50%;
-  border: 1px solid;
-  border-color: ${(props) => props.theme.fontColor};
-  margin-right: ${(props) => props.theme.bulletMarginRight};
+  border: var(--border-width-s) var(--border-style-default);
+  height: 4px;
+  width: 4px;
 `;
 var Disc = styled23.div`
-  background-color: ${(props) => props.theme.fontColor};
-  height: ${(props) => props.theme.bulletHeight};
-  width: ${(props) => props.theme.bulletWidth};
+  background-color: var(--color-fg-neutral-dark);
   border-radius: 50%;
-  margin-right: ${(props) => props.theme.bulletMarginRight};
+  height: 4px;
+  width: 4px;
 `;
 var ListItem2 = styled23.li`
+  color: var(--color-fg-neutral-dark);
   display: flex;
-  margin: 0px;
-  padding: 0px;
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-body-m);
+  font-weight: var(--typography-body-regular);
   list-style: none;
-  font-size: 1em;
+  margin: var(--spacing-padding-none);
+  padding: var(--spacing-padding-none);
 `;
+var BulletedListItem = ({ children }) => /* @__PURE__ */ jsx30(Fragment9, { children });
+var DxcBulletedList = ({ children, type = "disc", icon = "" }) => {
+  const colorsTheme = useContext11(HalstackContext);
+  return /* @__PURE__ */ jsx30(ThemeProvider3, { theme: colorsTheme.bulletedList, children: /* @__PURE__ */ jsx30(ListContainer, { children: /* @__PURE__ */ jsx30(Flex_default, { direction: "column", as: type === "number" ? "ol" : "ul", gap: "0.125rem", children: Children3.map(children, (child, index) => /* @__PURE__ */ jsx30(ListItem2, { children: /* @__PURE__ */ jsxs19(GeneralContent, { children: [
+    type === "number" ? /* @__PURE__ */ jsx30(Number2, { children: /* @__PURE__ */ jsxs19(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: [
+      index + 1,
+      "."
+    ] }) }) : type === "square" ? /* @__PURE__ */ jsx30(Bullet, { children: /* @__PURE__ */ jsx30(Square, {}) }) : type === "circle" ? /* @__PURE__ */ jsx30(Bullet, { children: /* @__PURE__ */ jsx30(Circle, {}) }) : type === "icon" ? /* @__PURE__ */ jsx30(Bullet, { children: /* @__PURE__ */ jsx30(Icon, { children: typeof icon === "string" ? /* @__PURE__ */ jsx30(DxcIcon, { icon }) : icon }) }) : /* @__PURE__ */ jsx30(Bullet, { children: /* @__PURE__ */ jsx30(Disc, {}) }),
+    /* @__PURE__ */ jsx30(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: child })
+  ] }) })) }) }) });
+};
+DxcBulletedList.Item = BulletedListItem;
 var BulletedList_default = DxcBulletedList;
 
 // src/card/Card.tsx
 import { useState as useState10 } from "react";
 import styled24 from "styled-components";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 var Card = styled24.div`
   display: flex;
   cursor: ${({ hasAction }) => hasAction ? "pointer" : "unset"};
@@ -5215,7 +5206,7 @@ var DxcCard = ({
   children
 }) => {
   const [isHovered, changeIsHovered] = useState10(false);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Card,
     {
       hasAction: !!(onClick || linkHref),
@@ -5227,9 +5218,9 @@ var DxcCard = ({
       as: linkHref && "a",
       href: linkHref,
       shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1,
-      children: /* @__PURE__ */ jsxs19(CardContainer, { hasAction: onClick || linkHref ? true : false, imagePosition: imageSrc ? imagePosition : "none", children: [
-        imageSrc && /* @__PURE__ */ jsx30(ImageContainer, { imageBgColor, children: /* @__PURE__ */ jsx30(TagImage, { imagePadding, imageCover, src: imageSrc, alt: "Card image" }) }),
-        /* @__PURE__ */ jsx30(CardContent, { children })
+      children: /* @__PURE__ */ jsxs20(CardContainer, { hasAction: onClick || linkHref ? true : false, imagePosition: imageSrc ? imagePosition : "none", children: [
+        imageSrc && /* @__PURE__ */ jsx31(ImageContainer, { imageBgColor, children: /* @__PURE__ */ jsx31(TagImage, { imagePadding, imageCover, src: imageSrc, alt: "Card image" }) }),
+        /* @__PURE__ */ jsx31(CardContent, { children })
       ] })
     }
   );
@@ -5241,7 +5232,7 @@ import { useContext as useContext12, useState as useState11, useRef as useRef6,
 import styled25 from "styled-components";
 
 // src/checkbox/utils.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var sizes2 = {
   small: "120px",
   medium: "240px",
@@ -5260,21 +5251,21 @@ var spaces2 = {
 };
 var calculateWidth4 = (margin, size) => size === "fillParent" ? `calc(${sizes2[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : size && sizes2[size];
 var icons = {
-  checked: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx31(
+  checked: /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx32(
     "path",
     {
       d: "M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z",
       fill: "currentColor"
     }
   ) }),
-  partial: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx31(
+  partial: /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx32(
     "path",
     {
       d: "M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM7 11H17V13H7V11Z",
       fill: "currentColor"
     }
   ) }),
-  unchecked: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx31(
+  unchecked: /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx32(
     "path",
     {
       d: "M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z",
@@ -5288,7 +5279,7 @@ import { createContext as createContext6 } from "react";
 var CheckboxContext_default = createContext6(null);
 
 // src/checkbox/Checkbox.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var Label2 = styled25.span`
   color: ${({ disabled }) => disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)"};
   font-family: var(--typography-font-family);
@@ -5372,7 +5363,7 @@ var DxcCheckbox = forwardRef4(
           break;
       }
     };
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       CheckboxContainer,
       {
         disabled,
@@ -5383,12 +5374,12 @@ var DxcCheckbox = forwardRef4(
         ref,
         size,
         children: [
-          label && /* @__PURE__ */ jsxs20(Label2, { "aria-label": label, disabled, id: labelId, children: [
+          label && /* @__PURE__ */ jsxs21(Label2, { "aria-label": label, disabled, id: labelId, children: [
             label,
             " ",
-            optional && /* @__PURE__ */ jsx32("span", { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ jsx33("span", { children: translatedLabels.formFields.optionalLabel })
           ] }),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             Checkbox,
             {
               "aria-checked": checked ?? innerChecked,
@@ -5406,7 +5397,7 @@ var DxcCheckbox = forwardRef4(
               children: partial ? icons.partial : checked ?? innerChecked ? icons.checked : icons.unchecked
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "input",
             {
               checked: checked ?? innerChecked,
@@ -5427,7 +5418,7 @@ var Checkbox_default = DxcCheckbox;
 
 // src/chip/Chip.tsx
 import styled26 from "styled-components";
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var calculateWidth5 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 var Chip = styled26.div`
   box-sizing: border-box;
@@ -5474,8 +5465,8 @@ var DxcChip = ({
   disabled,
   margin,
   tabIndex = 0
-}) => /* @__PURE__ */ jsxs21(Chip, { disabled, margin, children: [
-  prefixIcon && (typeof onClickPrefix === "function" ? /* @__PURE__ */ jsx33(
+}) => /* @__PURE__ */ jsxs22(Chip, { disabled, margin, children: [
+  prefixIcon && (typeof onClickPrefix === "function" ? /* @__PURE__ */ jsx34(
     ActionIcon_default,
     {
       disabled,
@@ -5484,9 +5475,9 @@ var DxcChip = ({
       tabIndex,
       title: "Prefix Action"
     }
-  ) : /* @__PURE__ */ jsx33(IconContainer5, { disabled, children: typeof prefixIcon === "string" ? /* @__PURE__ */ jsx33(DxcIcon, { icon: prefixIcon }) : prefixIcon })),
-  label && /* @__PURE__ */ jsx33(LabelContainer2, { disabled, children: label }),
-  suffixIcon && (typeof onClickSuffix === "function" ? /* @__PURE__ */ jsx33(
+  ) : /* @__PURE__ */ jsx34(IconContainer5, { disabled, children: typeof prefixIcon === "string" ? /* @__PURE__ */ jsx34(DxcIcon, { icon: prefixIcon }) : prefixIcon })),
+  label && /* @__PURE__ */ jsx34(LabelContainer2, { disabled, children: label }),
+  suffixIcon && (typeof onClickSuffix === "function" ? /* @__PURE__ */ jsx34(
     ActionIcon_default,
     {
       disabled,
@@ -5495,23 +5486,23 @@ var DxcChip = ({
       tabIndex,
       title: "Suffix Action"
     }
-  ) : /* @__PURE__ */ jsx33(IconContainer5, { disabled, children: typeof suffixIcon === "string" ? /* @__PURE__ */ jsx33(DxcIcon, { icon: suffixIcon }) : suffixIcon }))
+  ) : /* @__PURE__ */ jsx34(IconContainer5, { disabled, children: typeof suffixIcon === "string" ? /* @__PURE__ */ jsx34(DxcIcon, { icon: suffixIcon }) : suffixIcon }))
 ] });
 var Chip_default = DxcChip;
 
 // src/contextual-menu/ContextualMenu.tsx
-import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef7, useState as useState14 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo7, useRef as useRef7, useState as useState14 } from "react";
 import styled31 from "styled-components";
 
 // src/contextual-menu/MenuItem.tsx
 import styled29 from "styled-components";
 
 // src/contextual-menu/GroupItem.tsx
-import { useContext as useContext13, useMemo as useMemo7, useState as useState13, useId as useId5 } from "react";
+import { useContext as useContext13, useMemo as useMemo6, useState as useState13, useId as useId5 } from "react";
 
 // src/contextual-menu/SubMenu.tsx
 import styled27 from "styled-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var SubMenuContainer = styled27.ul`
   margin: 0;
   padding: 0;
@@ -5520,13 +5511,13 @@ var SubMenuContainer = styled27.ul`
   list-style: none;
 `;
 function SubMenu({ children, id }) {
-  return /* @__PURE__ */ jsx34(SubMenuContainer, { id, role: "menu", children });
+  return /* @__PURE__ */ jsx35(SubMenuContainer, { id, role: "menu", children });
 }
 
 // src/contextual-menu/ItemAction.tsx
 import { cloneElement as cloneElement2, memo as memo4, useState as useState12 } from "react";
 import styled28 from "styled-components";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 var Action = styled28.button`
   box-sizing: content-box;
   border: none;
@@ -5580,11 +5571,11 @@ var Text2 = styled28.span`
 var ItemAction_default = memo4(function ItemAction({ badge, collapseIcon, depthLevel, icon, label, ...props }) {
   const [hasTooltip, setHasTooltip] = useState12(false);
   const modifiedBadge = badge && cloneElement2(badge, { size: "small" });
-  return /* @__PURE__ */ jsx35(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ jsxs22(Action, { depthLevel, ...props, children: [
-    /* @__PURE__ */ jsxs22(Label3, { children: [
-      collapseIcon && /* @__PURE__ */ jsx35(Icon2, { children: collapseIcon }),
-      icon && depthLevel === 0 && /* @__PURE__ */ jsx35(Icon2, { children: typeof icon === "string" ? /* @__PURE__ */ jsx35(DxcIcon, { icon }) : icon }),
-      /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ jsxs23(Action, { depthLevel, ...props, children: [
+    /* @__PURE__ */ jsxs23(Label3, { children: [
+      collapseIcon && /* @__PURE__ */ jsx36(Icon2, { children: collapseIcon }),
+      icon && depthLevel === 0 && /* @__PURE__ */ jsx36(Icon2, { children: typeof icon === "string" ? /* @__PURE__ */ jsx36(DxcIcon, { icon }) : icon }),
+      /* @__PURE__ */ jsx36(
         Text2,
         {
           selected: props.selected,
@@ -5623,20 +5614,20 @@ var isGroupSelected = (items, selectedItemId) => items.some((item) => {
 });
 
 // src/contextual-menu/GroupItem.tsx
-import { Fragment as Fragment10, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function GroupItem({ items, ...props }) {
   const groupMenuId = `group-menu-${useId5()}`;
   const { selectedItemId } = useContext13(ContextualMenuContext_default) ?? {};
-  const groupSelected = useMemo7(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
+  const groupSelected = useMemo6(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
   const [isOpen, setIsOpen] = useState13(groupSelected && selectedItemId === -1);
-  return /* @__PURE__ */ jsxs23(Fragment10, { children: [
-    /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs24(Fragment10, { children: [
+    /* @__PURE__ */ jsx37(
       ItemAction_default,
       {
         "aria-controls": isOpen ? groupMenuId : void 0,
         "aria-expanded": isOpen ? true : void 0,
         "aria-pressed": groupSelected && !isOpen,
-        collapseIcon: isOpen ? /* @__PURE__ */ jsx36(DxcIcon, { icon: "filled_expand_less" }) : /* @__PURE__ */ jsx36(DxcIcon, { icon: "filled_expand_more" }),
+        collapseIcon: isOpen ? /* @__PURE__ */ jsx37(DxcIcon, { icon: "filled_expand_less" }) : /* @__PURE__ */ jsx37(DxcIcon, { icon: "filled_expand_more" }),
         onClick: () => {
           setIsOpen((isCurrentlyOpen) => !isCurrentlyOpen);
         },
@@ -5644,13 +5635,13 @@ function GroupItem({ items, ...props }) {
         ...props
       }
     ),
-    isOpen && /* @__PURE__ */ jsx36(SubMenu, { id: groupMenuId, children: items.map((item, index) => /* @__PURE__ */ jsx36(MenuItem, { item, depthLevel: props.depthLevel + 1 }, `${item.label}-${index}`)) })
+    isOpen && /* @__PURE__ */ jsx37(SubMenu, { id: groupMenuId, children: items.map((item, index) => /* @__PURE__ */ jsx37(MenuItem, { item, depthLevel: props.depthLevel + 1 }, `${item.label}-${index}`)) })
   ] });
 }
 
 // src/contextual-menu/SingleItem.tsx
 import { useContext as useContext14, useEffect as useEffect8 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function SingleItem({ id, onSelect, selectedByDefault = false, ...props }) {
   const { selectedItemId, setSelectedItemId } = useContext14(ContextualMenuContext_default) ?? {};
   const handleClick = () => {
@@ -5662,7 +5653,7 @@ function SingleItem({ id, onSelect, selectedByDefault = false, ...props }) {
       setSelectedItemId?.(id);
     }
   }, [selectedItemId, selectedByDefault, id]);
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     ItemAction_default,
     {
       "aria-pressed": selectedItemId === -1 ? selectedByDefault : selectedItemId === id,
@@ -5674,19 +5665,19 @@ function SingleItem({ id, onSelect, selectedByDefault = false, ...props }) {
 }
 
 // src/contextual-menu/MenuItem.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var MenuItemContainer = styled29.li`
   display: grid;
   gap: var(--spacing-gap-xs);
 `;
 function MenuItem({ item, depthLevel = 0 }) {
-  return /* @__PURE__ */ jsx38(MenuItemContainer, { role: "menuitem", children: "items" in item ? /* @__PURE__ */ jsx38(GroupItem, { ...item, depthLevel }) : /* @__PURE__ */ jsx38(SingleItem, { ...item, depthLevel }) });
+  return /* @__PURE__ */ jsx39(MenuItemContainer, { role: "menuitem", children: "items" in item ? /* @__PURE__ */ jsx39(GroupItem, { ...item, depthLevel }) : /* @__PURE__ */ jsx39(SingleItem, { ...item, depthLevel }) });
 }
 
 // src/contextual-menu/Section.tsx
 import styled30 from "styled-components";
 import { useId as useId6 } from "react";
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var SectionContainer = styled30.section`
   display: grid;
   gap: var(--spacing-gap-xs);
@@ -5701,15 +5692,15 @@ var Title3 = styled30.h2`
 `;
 function Section2({ index, length, section }) {
   const id = `section-${useId6()}`;
-  return /* @__PURE__ */ jsxs24(SectionContainer, { "aria-label": section.title ?? id, "aria-labelledby": id, children: [
-    section.title && /* @__PURE__ */ jsx39(Title3, { id, children: section.title }),
-    /* @__PURE__ */ jsx39(SubMenu, { children: section.items.map((item, index2) => /* @__PURE__ */ jsx39(MenuItem, { item }, `${item.label}-${index2}`)) }),
-    index !== length - 1 && /* @__PURE__ */ jsx39(DxcInset, { top: "var(--spacing-padding-xxs)", bottom: "var(--spacing-padding-xxs)", children: /* @__PURE__ */ jsx39(DxcDivider, { color: "lightGrey" }) })
+  return /* @__PURE__ */ jsxs25(SectionContainer, { "aria-label": section.title ?? id, "aria-labelledby": id, children: [
+    section.title && /* @__PURE__ */ jsx40(Title3, { id, children: section.title }),
+    /* @__PURE__ */ jsx40(SubMenu, { children: section.items.map((item, index2) => /* @__PURE__ */ jsx40(MenuItem, { item }, `${item.label}-${index2}`)) }),
+    index !== length - 1 && /* @__PURE__ */ jsx40(DxcInset, { top: "var(--spacing-padding-xxs)", bottom: "var(--spacing-padding-xxs)", children: /* @__PURE__ */ jsx40(DxcDivider, { color: "lightGrey" }) })
   ] });
 }
 
 // src/contextual-menu/ContextualMenu.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var ContextualMenu = styled31.div`
   box-sizing: border-box;
   margin: 0;
@@ -5729,8 +5720,8 @@ function DxcContextualMenu({ items }) {
   const [firstUpdate, setFirstUpdate] = useState14(true);
   const [selectedItemId, setSelectedItemId] = useState14(-1);
   const contextualMenuRef = useRef7(null);
-  const itemsWithId = useMemo8(() => addIdToItems(items), [items]);
-  const contextValue = useMemo8(() => ({ selectedItemId, setSelectedItemId }), [selectedItemId, setSelectedItemId]);
+  const itemsWithId = useMemo7(() => addIdToItems(items), [items]);
+  const contextValue = useMemo7(() => ({ selectedItemId, setSelectedItemId }), [selectedItemId, setSelectedItemId]);
   useLayoutEffect3(() => {
     if (selectedItemId !== -1 && firstUpdate) {
       const contextualMenuEl = contextualMenuRef.current;
@@ -5741,31 +5732,18 @@ function DxcContextualMenu({ items }) {
       setFirstUpdate(false);
     }
   }, [firstUpdate, selectedItemId]);
-  return /* @__PURE__ */ jsx40(ContextualMenu, { ref: contextualMenuRef, children: /* @__PURE__ */ jsx40(ContextualMenuContext_default.Provider, { value: contextValue, children: itemsWithId[0] && isSection(itemsWithId[0]) ? itemsWithId.map((item, index) => /* @__PURE__ */ jsx40(Section2, { section: item, index, length: itemsWithId.length }, `section-${index}`)) : /* @__PURE__ */ jsx40(SubMenu, { children: itemsWithId.map((item, index) => /* @__PURE__ */ jsx40(MenuItem, { item }, `${item.label}-${index}`)) }) }) });
+  return /* @__PURE__ */ jsx41(ContextualMenu, { ref: contextualMenuRef, children: /* @__PURE__ */ jsx41(ContextualMenuContext_default.Provider, { value: contextValue, children: itemsWithId[0] && isSection(itemsWithId[0]) ? itemsWithId.map((item, index) => /* @__PURE__ */ jsx41(Section2, { section: item, index, length: itemsWithId.length }, `section-${index}`)) : /* @__PURE__ */ jsx41(SubMenu, { children: itemsWithId.map((item, index) => /* @__PURE__ */ jsx41(MenuItem, { item }, `${item.label}-${index}`)) }) }) });
 }
 
 // src/data-grid/DataGrid.tsx
-import { useContext as useContext18, useEffect as useEffect11, useMemo as useMemo11, useState as useState17 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo10, useState as useState17 } from "react";
 import DataGrid from "react-data-grid";
-import styled40, { ThemeProvider as ThemeProvider5 } from "styled-components";
+import styled40 from "styled-components";
 import "react-data-grid/lib/styles.css";
 
 // src/data-grid/utils.tsx
 import { textEditor } from "react-data-grid";
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
-var overwriteTheme = (theme) => {
-  const newTheme = {
-    checkbox: {
-      backgroundColorChecked: theme?.dataGrid?.headerCheckboxBackgroundColorChecked,
-      hoverBackgroundColorChecked: theme?.dataGrid?.headerCheckboxHoverBackgroundColorChecked,
-      borderColor: theme?.dataGrid?.headerCheckboxBorderColor,
-      hoverBorderColor: theme?.dataGrid?.headerCheckboxHoverBorderColor,
-      checkColor: theme?.dataGrid?.headerCheckboxCheckColor,
-      focusColor: theme?.dataGrid?.focusColor
-    }
-  };
-  return newTheme;
-};
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var convertToRDGColumns = (gridColumn, summaryRow) => ({
   key: gridColumn.key,
   name: gridColumn.label,
@@ -5775,11 +5753,11 @@ var convertToRDGColumns = (gridColumn, summaryRow) => ({
   editable: gridColumn.textEditable,
   headerCellClass: gridColumn.alignment ? `header-align-${gridColumn.alignment}` : `header-align-left`,
   renderEditCell: gridColumn.textEditable ? textEditor : void 0,
-  renderCell: ({ row }) => /* @__PURE__ */ jsx41("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: row[gridColumn.key] }),
-  renderSummaryCell: () => gridColumn.summaryKey ? /* @__PURE__ */ jsx41("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: summaryRow?.[gridColumn.summaryKey] }) : void 0
+  renderCell: ({ row }) => /* @__PURE__ */ jsx42("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: row[gridColumn.key] }),
+  renderSummaryCell: () => gridColumn.summaryKey ? /* @__PURE__ */ jsx42("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: summaryRow?.[gridColumn.summaryKey] }) : void 0
 });
-var renderSortStatus = ({ sortDirection }) => /* @__PURE__ */ jsx41("div", { className: "sortIconContainer", children: sortDirection !== void 0 ? sortDirection === "ASC" ? /* @__PURE__ */ jsx41(DxcIcon, { icon: "Keyboard_Arrow_Up" }) : /* @__PURE__ */ jsx41(DxcIcon, { icon: "Keyboard_Arrow_Down" }) : /* @__PURE__ */ jsx41(DxcIcon, { icon: "Expand_All" }) });
-var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @__PURE__ */ jsx41(
+var renderSortStatus = ({ sortDirection }) => /* @__PURE__ */ jsx42("div", { className: "sortIconContainer", children: sortDirection !== void 0 ? sortDirection === "ASC" ? /* @__PURE__ */ jsx42(DxcIcon, { icon: "Keyboard_Arrow_Up" }) : /* @__PURE__ */ jsx42(DxcIcon, { icon: "Keyboard_Arrow_Down" }) : /* @__PURE__ */ jsx42(DxcIcon, { icon: "Expand_All" }) });
+var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @__PURE__ */ jsx42(
   ActionIcon_default,
   {
     icon: row.contentIsExpanded ? "arrow_drop_down" : "arrow_right",
@@ -5812,7 +5790,7 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
     disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
-var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ jsxs25(
+var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ jsxs26(
   "button",
   {
     type: "button",
@@ -5852,12 +5830,12 @@ var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsT
       setRowsToRender(newRowsToRender);
     },
     children: [
-      /* @__PURE__ */ jsx41(DxcIcon, { icon: triggerRow.visibleChildren ? "Keyboard_Arrow_Down" : "Chevron_Right" }),
-      /* @__PURE__ */ jsx41("span", { className: "ellipsis-cell", children: triggerRow[columnKey] })
+      /* @__PURE__ */ jsx42(DxcIcon, { icon: triggerRow.visibleChildren ? "Keyboard_Arrow_Down" : "Chevron_Right" }),
+      /* @__PURE__ */ jsx42("span", { className: "ellipsis-cell", children: triggerRow[columnKey] })
     ]
   }
 );
-var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ jsx41(
+var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ jsx42(
   Checkbox_default,
   {
     checked: selectedRows.has(rowKeyGetter(row, uniqueRowId)),
@@ -5879,7 +5857,7 @@ var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /*
     disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
-var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) => /* @__PURE__ */ jsx41(HalstackProvider, { advancedTheme: overwriteTheme(colorsTheme), children: /* @__PURE__ */ jsx41(
+var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ jsx42(
   Checkbox_default,
   {
     checked: rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId))),
@@ -5904,7 +5882,7 @@ var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSele
     },
     disabled: rows.length === 0 || !rows.some((row) => uniqueRowId in row)
   }
-) });
+);
 var rowKeyGetter = (row, uniqueRowId) => {
   const keyValue = row[uniqueRowId];
   return typeof keyValue === "string" || typeof keyValue === "number" ? keyValue : "";
@@ -6059,7 +6037,7 @@ import {
   useCallback as useCallback6,
   useContext as useContext16,
   useId as useId7,
-  useMemo as useMemo9,
+  useMemo as useMemo8,
   useRef as useRef10,
   useState as useState16
 } from "react";
@@ -6072,7 +6050,7 @@ import styled33 from "styled-components";
 // src/select/ListOption.tsx
 import styled32 from "styled-components";
 import { useEffect as useEffect9, useRef as useRef8, useState as useState15 } from "react";
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var OptionItem = styled32.li`
   padding: var(--spacing-padding-none) var(--spacing-padding-xs);
   cursor: pointer;
@@ -6143,7 +6121,7 @@ var ListOption = ({
   useEffect9(() => {
     if (checkboxRef.current) checkboxRef.current.style.pointerEvents = "none";
   }, []);
-  return /* @__PURE__ */ jsx42(TooltipWrapper, { condition: hasTooltip, label: option.label, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(TooltipWrapper, { condition: hasTooltip, label: option.label, children: /* @__PURE__ */ jsx43(
     OptionItem,
     {
       "aria-selected": !multiple ? isSelected : void 0,
@@ -6155,12 +6133,12 @@ var ListOption = ({
       role: "option",
       selected: isSelected,
       visualFocused,
-      children: /* @__PURE__ */ jsxs26(StyledOption, { grouped: isGroupedOption, last: isLastOption, selected: isSelected, visualFocused, children: [
-        multiple && /* @__PURE__ */ jsx42(Checkbox_default, { checked: isSelected, tabIndex: -1, ref: checkboxRef }),
-        option.icon && /* @__PURE__ */ jsx42(OptionIcon, { children: typeof option.icon === "string" ? /* @__PURE__ */ jsx42(DxcIcon, { icon: option.icon }) : option.icon }),
-        /* @__PURE__ */ jsxs26(OptionContent, { children: [
-          /* @__PURE__ */ jsx42(OptionLabel, { isSelectAllOption, onMouseEnter: handleOnMouseEnter, children: option.label }),
-          !multiple && isSelected && /* @__PURE__ */ jsx42(DxcIcon, { icon: "done" })
+      children: /* @__PURE__ */ jsxs27(StyledOption, { grouped: isGroupedOption, last: isLastOption, selected: isSelected, visualFocused, children: [
+        multiple && /* @__PURE__ */ jsx43(Checkbox_default, { checked: isSelected, tabIndex: -1, ref: checkboxRef }),
+        option.icon && /* @__PURE__ */ jsx43(OptionIcon, { children: typeof option.icon === "string" ? /* @__PURE__ */ jsx43(DxcIcon, { icon: option.icon }) : option.icon }),
+        /* @__PURE__ */ jsxs27(OptionContent, { children: [
+          /* @__PURE__ */ jsx43(OptionLabel, { isSelectAllOption, onMouseEnter: handleOnMouseEnter, children: option.label }),
+          !multiple && isSelected && /* @__PURE__ */ jsx43(DxcIcon, { icon: "done" })
         ] })
       ] })
     }
@@ -6261,7 +6239,7 @@ var getSelectableOptionsValues = (options) => isArrayOfGroupedOptions(options) ?
 var computeNewValue = (currentValue, newOption) => currentValue.includes(newOption.value) ? currentValue.filter((val) => val !== newOption.value) : [...currentValue, newOption.value];
 
 // src/select/Listbox.tsx
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var ListboxContainer = styled33.div`
   box-sizing: border-box;
   max-height: 304px;
@@ -6323,7 +6301,7 @@ var Listbox = ({
     if (multiple && enableSelectAll) {
       const groupSelectionType = getGroupSelectionType(option.options, currentValue);
       globalMappingIndex++;
-      return /* @__PURE__ */ jsx43(CheckboxContext_default.Provider, { value: { partial: groupSelectionType === "indeterminate" }, children: /* @__PURE__ */ jsx43(
+      return /* @__PURE__ */ jsx44(CheckboxContext_default.Provider, { value: { partial: groupSelectionType === "indeterminate" }, children: /* @__PURE__ */ jsx44(
         ListOption_default,
         {
           id: groupId,
@@ -6341,17 +6319,17 @@ var Listbox = ({
         groupId
       ) });
     } else
-      return /* @__PURE__ */ jsx43(GroupLabel, { id: groupId, role: "presentation", children: option.label });
+      return /* @__PURE__ */ jsx44(GroupLabel, { id: groupId, role: "presentation", children: option.label });
   };
   const mapOptionFunc = (option, mapIndex) => {
     if ("options" in option) {
       const groupId = `${id}-group-${mapIndex}`;
-      return option.options.length > 0 && /* @__PURE__ */ jsxs27("ul", { "aria-labelledby": groupId, role: "group", style: { padding: 0, margin: 0 }, children: [
+      return option.options.length > 0 && /* @__PURE__ */ jsxs28("ul", { "aria-labelledby": groupId, role: "group", style: { padding: 0, margin: 0 }, children: [
         getGroupOption(groupId, option),
         option.options.map((singleOption) => {
           globalMappingIndex++;
           const optionId = `${id}-option-${globalMappingIndex}`;
-          return /* @__PURE__ */ jsx43(
+          return /* @__PURE__ */ jsx44(
             ListOption_default,
             {
               id: optionId,
@@ -6370,7 +6348,7 @@ var Listbox = ({
     } else {
       globalMappingIndex++;
       const optionId = `${id}-option-${globalMappingIndex}`;
-      return /* @__PURE__ */ jsx43(
+      return /* @__PURE__ */ jsx44(
         ListOption_default,
         {
           id: optionId,
@@ -6387,12 +6365,12 @@ var Listbox = ({
   };
   const getFirstItem = () => {
     if (searchable && (options.length === 0 || !groupsHaveOptions(options)))
-      return /* @__PURE__ */ jsxs27(OptionsSystemMessage, { children: [
-        /* @__PURE__ */ jsx43(DxcIcon, { icon: "search_off" }),
+      return /* @__PURE__ */ jsxs28(OptionsSystemMessage, { children: [
+        /* @__PURE__ */ jsx44(DxcIcon, { icon: "search_off" }),
         translatedLabels.select.noMatchesErrorMessage
       ] });
     else if (optional && !multiple)
-      return /* @__PURE__ */ jsx43(
+      return /* @__PURE__ */ jsx44(
         ListOption_default,
         {
           id: `${id}-option-${0}`,
@@ -6406,7 +6384,7 @@ var Listbox = ({
         `${id}-option-${optionalItem.value}`
       );
     else if (multiple && enableSelectAll) {
-      return /* @__PURE__ */ jsx43(CheckboxContext_default.Provider, { value: { partial: selectionType === "indeterminate" }, children: /* @__PURE__ */ jsx43(
+      return /* @__PURE__ */ jsx44(CheckboxContext_default.Provider, { value: { partial: selectionType === "indeterminate" }, children: /* @__PURE__ */ jsx44(
         ListOption_default,
         {
           id: `${id}-option-${0}`,
@@ -6441,7 +6419,7 @@ var Listbox = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     ListboxContainer,
     {
       "aria-labelledby": ariaLabelledBy,
@@ -6467,7 +6445,7 @@ var Listbox_default = Listbox;
 
 // src/styles/forms/ErrorMessage.tsx
 import styled34 from "styled-components";
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var ErrorMessageContainer = styled34.div`
   display: flex;
   align-items: center;
@@ -6482,8 +6460,8 @@ var ErrorMessageContainer = styled34.div`
     font-size: var(--height-xxs);
   }
 `;
-var ErrorMessage = ({ error, id }) => /* @__PURE__ */ jsxs28(ErrorMessageContainer, { "aria-live": error ? "assertive" : "off", id, role: "alert", children: [
-  error && /* @__PURE__ */ jsx44(DxcIcon, { icon: "filled_error" }),
+var ErrorMessage = ({ error, id }) => /* @__PURE__ */ jsxs29(ErrorMessageContainer, { "aria-live": error ? "assertive" : "off", id, role: "alert", children: [
+  error && /* @__PURE__ */ jsx45(DxcIcon, { icon: "filled_error" }),
   error
 ] });
 var ErrorMessage_default = ErrorMessage;
@@ -6539,7 +6517,7 @@ var inputStylesByState = (disabled, error, readOnly) => css3`
 `;
 
 // src/select/Select.tsx
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 var SelectContainer = styled37.div`
   box-sizing: border-box;
   display: flex;
@@ -6676,18 +6654,18 @@ var DxcSelect = forwardRef5(
     const selectSearchInputRef = useRef10(null);
     const width = useWidth_default(selectRef.current);
     const translatedLabels = useContext16(HalstackLanguageContext);
-    const optionalItem = useMemo9(() => ({ label: placeholder, value: "" }), [placeholder]);
-    const filteredOptions = useMemo9(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
-    const lastOptionIndex = useMemo9(
+    const optionalItem = useMemo8(() => ({ label: placeholder, value: "" }), [placeholder]);
+    const filteredOptions = useMemo8(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
+    const lastOptionIndex = useMemo8(
       () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple, enableSelectAll),
       [options, filteredOptions, searchable, optional, multiple, enableSelectAll]
     );
-    const { selectedOption, singleSelectionIndex } = useMemo9(
+    const { selectedOption, singleSelectionIndex } = useMemo8(
       () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem),
       [value, innerValue, options, multiple, optional, optionalItem]
     );
-    const selectableOptionsValues = useMemo9(() => getSelectableOptionsValues(options), [options]);
-    const selectionType = useMemo9(
+    const selectableOptionsValues = useMemo8(() => getSelectableOptionsValues(options), [options]);
+    const selectionType = useMemo8(
       () => getSelectionType(options, value ?? innerValue),
       [innerValue, options, value]
     );
@@ -6902,8 +6880,8 @@ var DxcSelect = forwardRef5(
       },
       [handleOptionOnClick, innerValue, value]
     );
-    return /* @__PURE__ */ jsxs29(SelectContainer, { margin, ref, size, children: [
-      label && /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(SelectContainer, { margin, ref, size, children: [
+      label && /* @__PURE__ */ jsxs30(
         Label_default,
         {
           disabled,
@@ -6915,13 +6893,13 @@ var DxcSelect = forwardRef5(
           children: [
             label,
             " ",
-            optional && /* @__PURE__ */ jsx45("span", { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ jsx46("span", { children: translatedLabels.formFields.optionalLabel })
           ]
         }
       ),
-      helperText && /* @__PURE__ */ jsx45(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ jsxs29(Popover2.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx45(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs29(
+      helperText && /* @__PURE__ */ jsx46(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ jsxs30(Popover2.Root, { open: isOpen, children: [
+        /* @__PURE__ */ jsx46(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs30(
           Select,
           {
             "aria-activedescendant": visualFocusIndex >= 0 ? `option-${visualFocusIndex}` : void 0,
@@ -6945,9 +6923,9 @@ var DxcSelect = forwardRef5(
             role: "combobox",
             tabIndex: disabled ? -1 : tabIndex,
             children: [
-              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ jsxs29(SelectionIndicator, { disabled, children: [
-                /* @__PURE__ */ jsx45(SelectionNumber, { disabled, children: selectedOption.length }),
-                /* @__PURE__ */ jsx45(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx45(
+              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ jsxs30(SelectionIndicator, { disabled, children: [
+                /* @__PURE__ */ jsx46(SelectionNumber, { disabled, children: selectedOption.length }),
+                /* @__PURE__ */ jsx46(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx46(
                   ClearOptionsAction,
                   {
                     "aria-label": translatedLabels.select.actionClearSelectionTitle,
@@ -6957,12 +6935,12 @@ var DxcSelect = forwardRef5(
                       event.preventDefault();
                     },
                     tabIndex: -1,
-                    children: /* @__PURE__ */ jsx45(DxcIcon, { icon: "clear" })
+                    children: /* @__PURE__ */ jsx46(DxcIcon, { icon: "clear" })
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx45(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ jsxs29(SearchableValueContainer, { children: [
-                /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx46(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ jsxs30(SearchableValueContainer, { children: [
+                /* @__PURE__ */ jsx46(
                   "input",
                   {
                     disabled,
@@ -6971,7 +6949,7 @@ var DxcSelect = forwardRef5(
                     value: multiple ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") : value ?? innerValue
                   }
                 ),
-                searchable && /* @__PURE__ */ jsx45(
+                searchable && /* @__PURE__ */ jsx46(
                   SearchInput,
                   {
                     "aria-labelledby": label ? labelId : void 0,
@@ -6984,7 +6962,7 @@ var DxcSelect = forwardRef5(
                     value: searchValue
                   }
                 ),
-                (!searchable || searchValue === "") && /* @__PURE__ */ jsx45(
+                (!searchable || searchValue === "") && /* @__PURE__ */ jsx46(
                   SelectedOption,
                   {
                     atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
@@ -6994,8 +6972,8 @@ var DxcSelect = forwardRef5(
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ jsxs29(Flex_default, { alignItems: "center", children: [
-                searchable && searchValue.length > 0 && /* @__PURE__ */ jsx45(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsxs30(Flex_default, { alignItems: "center", children: [
+                searchable && searchValue.length > 0 && /* @__PURE__ */ jsx46(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx46(
                   ActionIcon_default,
                   {
                     icon: "clear",
@@ -7004,12 +6982,12 @@ var DxcSelect = forwardRef5(
                     title: translatedLabels.select.actionClearSearchTitle
                   }
                 ) }),
-                /* @__PURE__ */ jsx45(DxcIcon, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" })
+                /* @__PURE__ */ jsx46(DxcIcon, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" })
               ] })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx45(Popover2.Portal, { children: /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(Popover2.Portal, { children: /* @__PURE__ */ jsx46(
           Popover2.Content,
           {
             onCloseAutoFocus: (event) => {
@@ -7020,7 +6998,7 @@ var DxcSelect = forwardRef5(
             },
             sideOffset: 4,
             style: { zIndex: "2147483647" },
-            children: /* @__PURE__ */ jsx45(
+            children: /* @__PURE__ */ jsx46(
               Listbox_default,
               {
                 ariaLabelledBy: labelId,
@@ -7044,14 +7022,14 @@ var DxcSelect = forwardRef5(
           }
         ) })
       ] }),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx45(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx46(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
 var Select_default = DxcSelect;
 
 // src/paginator/Paginator.tsx
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 var DxcPaginator = ({
   currentPage = 1,
   itemsPerPage = 5,
@@ -7108,10 +7086,10 @@ var DxcPaginator = ({
     align-items: center;
     gap: var(--spacing-gap-s);
   `;
-  return /* @__PURE__ */ jsxs30(DxcPaginatorContainer, { children: [
-    itemsPerPageOptions && /* @__PURE__ */ jsxs30(ItemsPerPageContainer, { children: [
-      /* @__PURE__ */ jsx46("span", { children: translatedLabels.paginator.itemsPerPageText }),
-      /* @__PURE__ */ jsx46(SelectContainer2, { children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs31(DxcPaginatorContainer, { children: [
+    itemsPerPageOptions && /* @__PURE__ */ jsxs31(ItemsPerPageContainer, { children: [
+      /* @__PURE__ */ jsx47("span", { children: translatedLabels.paginator.itemsPerPageText }),
+      /* @__PURE__ */ jsx47(SelectContainer2, { children: /* @__PURE__ */ jsx47(
         Select_default,
         {
           options: itemsPerPageOptions.map((num) => ({
@@ -7127,10 +7105,10 @@ var DxcPaginator = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx46(TotalItemsContainer, { children: translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems) }),
-    /* @__PURE__ */ jsxs30(GoToPageContainer, { children: [
-      onPageChange && /* @__PURE__ */ jsxs30(ButtonsContainer, { children: [
-        /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(TotalItemsContainer, { children: translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems) }),
+    /* @__PURE__ */ jsxs31(GoToPageContainer, { children: [
+      onPageChange && /* @__PURE__ */ jsxs31(ButtonsContainer, { children: [
+        /* @__PURE__ */ jsx47(
           Button_default,
           {
             mode: "secondary",
@@ -7144,7 +7122,7 @@ var DxcPaginator = ({
             size: { height: "medium" }
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           Button_default,
           {
             mode: "secondary",
@@ -7159,12 +7137,12 @@ var DxcPaginator = ({
           }
         )
       ] }),
-      showGoToPage ? /* @__PURE__ */ jsxs30(PageToSelectContainer, { children: [
-        /* @__PURE__ */ jsxs30("span", { children: [
+      showGoToPage ? /* @__PURE__ */ jsxs31(PageToSelectContainer, { children: [
+        /* @__PURE__ */ jsxs31("span", { children: [
           translatedLabels.paginator.goToPageText,
           " "
         ] }),
-        /* @__PURE__ */ jsx46(SelectContainer2, { children: /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(SelectContainer2, { children: /* @__PURE__ */ jsx47(
           Select_default,
           {
             options: Array.from(Array(totalPages), (e, num) => ({
@@ -7179,9 +7157,9 @@ var DxcPaginator = ({
             tabIndex
           }
         ) })
-      ] }) : /* @__PURE__ */ jsx46("span", { children: translatedLabels.paginator.pageOfText(currentPageInternal, totalPages) }),
-      onPageChange && /* @__PURE__ */ jsxs30(ButtonsContainer, { children: [
-        /* @__PURE__ */ jsx46(
+      ] }) : /* @__PURE__ */ jsx47("span", { children: translatedLabels.paginator.pageOfText(currentPageInternal, totalPages) }),
+      onPageChange && /* @__PURE__ */ jsxs31(ButtonsContainer, { children: [
+        /* @__PURE__ */ jsx47(
           Button_default,
           {
             mode: "secondary",
@@ -7195,7 +7173,7 @@ var DxcPaginator = ({
             size: { height: "medium" }
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           Button_default,
           {
             mode: "secondary",
@@ -7217,8 +7195,8 @@ var Paginator_default = DxcPaginator;
 
 // src/table/Table.tsx
 import styled39 from "styled-components";
-import { useMemo as useMemo10 } from "react";
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useMemo as useMemo9 } from "react";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 var calculateWidth7 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 var TableContainer = styled39.div`
   width: ${({ margin }) => calculateWidth7(margin)};
@@ -7287,11 +7265,11 @@ var ActionsContainer = styled39.div`
   }
 `;
 var DxcActionsCell = ({ actions }) => {
-  const actionIcons = useMemo10(() => actions.filter((action) => !action.options), [actions]);
-  const dropdownAction = useMemo10(() => actions.find((action) => action.options), [actions]);
-  return /* @__PURE__ */ jsxs31(ActionsContainer, { children: [
+  const actionIcons = useMemo9(() => actions.filter((action) => !action.options), [actions]);
+  const dropdownAction = useMemo9(() => actions.find((action) => action.options), [actions]);
+  return /* @__PURE__ */ jsxs32(ActionsContainer, { children: [
     actionIcons.map(
-      (action, index) => index < (dropdownAction ? 2 : 3) && /* @__PURE__ */ jsx47(
+      (action, index) => index < (dropdownAction ? 2 : 3) && /* @__PURE__ */ jsx48(
         ActionIcon_default,
         {
           icon: action.icon,
@@ -7303,7 +7281,7 @@ var DxcActionsCell = ({ actions }) => {
         `action-${index}`
       )
     ),
-    dropdownAction && /* @__PURE__ */ jsx47(
+    dropdownAction && /* @__PURE__ */ jsx48(
       Dropdown_default,
       {
         caretHidden: true,
@@ -7317,99 +7295,56 @@ var DxcActionsCell = ({ actions }) => {
     )
   ] });
 };
-var DxcTable = ({ children, margin, mode = "default" }) => /* @__PURE__ */ jsx47(TableContainer, { margin, children: /* @__PURE__ */ jsx47(Table, { mode, children }) });
+var DxcTable = ({ children, margin, mode = "default" }) => /* @__PURE__ */ jsx48(TableContainer, { margin, children: /* @__PURE__ */ jsx48(Table, { mode, children }) });
 DxcTable.ActionsCell = DxcActionsCell;
 var Table_default = DxcTable;
 
 // src/data-grid/DataGrid.tsx
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
-var ActionContainer = styled40.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  width: 100%;
-`;
-var HierarchyContainer = styled40.div`
-  padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
-  button {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0px;
-    border: 0px;
-    width: 100%;
-    height: ${(props) => props.theme.dataRowHeight}px;
-    background: transparent;
-    text-align: left;
-    font-size: ${(props) => props.theme.dataFontSize};
-    font-family: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-`;
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 var DataGridContainer = styled40.div`
   width: 100%;
   height: ${(props) => props.paginatorRendered ? `calc(100% - 50px)` : `100%`};
   .rdg {
-    border-radius: 4px;
+    border-radius: var(--border-radius-s);
     height: 100%;
     border: 0px;
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: ${(props) => props.theme.scrollBarThumbColor};
-      border-radius: 6px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: ${(props) => props.theme.scrollBarTrackColor};
-      border-radius: 6px;
-    }
+    ${scrollbarStyles}
   }
-  .rdg-cell:has(> #action) {
+  .rdg-cell:has(> #small_action) {
     padding: 0px;
   }
   .rdg-cell {
     display: grid;
     align-items: center;
     width: 100%;
-    padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
-    font-family: ${(props) => props.theme.dataFontFamily};
-    font-size: ${(props) => props.theme.dataFontSize};
-    font-style: ${(props) => props.theme.dataFontStyle};
-    font-weight: ${(props) => props.theme.dataFontWeight};
-    color: ${(props) => props.theme.dataFontColor};
-    text-transform: ${(props) => props.theme.dataFontTextTransform};
-    line-height: ${(props) => props.theme.dataTextLineHeight};
-    border-bottom: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
-    border-right: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
-    background-color: ${(props) => props.theme.dataBackgroundColor};
-    outline-color: ${(props) => props.theme.focusColor} !important;
+    padding: 0px var(--spacing-padding-xs);
+    font-family: var(--typography-font-family);
+    font-size: var(--typography-label-m);
+    font-weight: var(--typography-label-regular);
+    color: var(--color-fg-neutral-dark);
+    border-bottom: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-lightest);
+    border-right: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-lightest);
+    background-color: var(--color-bg-neutral-lightest);
+
+    &[aria-selected="true"] {
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    }
     .rdg-text-editor:focus {
       border-color: transparent;
-      background-color: transparent;
-      color: ${(props) => props.theme.dataFontColor};
+      background-color: var(--color-bg-neutral-lightest);
+      color: var(--color-fg-neutral-dark);
     }
   }
   .rdg-header-row {
-    border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
-    border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
+    border-top-left-radius: var(--border-radius-s);
+    border-top-right-radius: var(--border-radius-s);
     .rdg-cell {
-      font-family: ${(props) => props.theme.headerFontFamily};
-      font-size: ${(props) => props.theme.headerFontSize};
-      font-style: ${(props) => props.theme.headerFontStyle};
-      font-weight: ${(props) => props.theme.headerFontWeight};
-      color: ${(props) => props.theme.headerFontColor};
-      text-transform: ${(props) => props.theme.headerFontTextTransform};
-      padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
-      line-height: ${(props) => props.theme.headerTextLineHeight};
-      background-color: ${(props) => props.theme.headerBackgroundColor};
+      font-weight: var(--font-weight-bold);
+      color: var(--color-fg-neutral-bright);
+      padding: 0px var(--spacing-padding-xs);
+      background-color: var(--color-bg-primary-strong);
       .sortIconContainer {
-        margin-left: 0.5rem;
+        margin-left: var(--spacing-gap-s);
         display: flex;
         height: 100%;
         align-items: center;
@@ -7422,10 +7357,10 @@ var DataGridContainer = styled40.div`
     }
   }
   .rdg-summary-row {
-    background-color: #fafafa;
+    background-color: var(--color-bg-neutral-lighter);
     .rdg-cell {
       border: 0px;
-      font-weight: 600;
+      font-weight: var(--font-weight-semibold);
     }
   }
   .ellipsis-cell {
@@ -7459,6 +7394,34 @@ var DataGridContainer = styled40.div`
     text-align: right;
   }
 `;
+var HierarchyContainer = styled40.div`
+  padding-left: ${(props) => `calc(var(--spacing-gap-s) * ${props.level})`};
+  button {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: var(--spacing-gap-s);
+    padding: 0px;
+    border: 0px;
+    width: 100%;
+    height: var(--height-l);
+    background-color: var(--color-bg-neutral-lightest);
+    font-family: var(--typography-font-family);
+    font-size: var(--typography-label-m);
+    font-weight: var(--typography-label-regular);
+    color: var(--color-fg-neutral-dark);
+    text-align: left;
+    cursor: pointer;
+  }
+`;
+var ActionContainer = styled40.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--height-s);
+  width: 100%;
+`;
 var DxcDataGrid = ({
   columns,
   rows,
@@ -7480,8 +7443,8 @@ var DxcDataGrid = ({
   defaultPage = 1
 }) => {
   const [rowsToRender, setRowsToRender] = useState17(rows);
-  const colorsTheme = useContext18(HalstackContext);
   const [page, changePage] = useState17(defaultPage);
+  const [colHeight, setColHeight] = useState17(36);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -7499,7 +7462,7 @@ var DxcDataGrid = ({
     }
     setSortColumns(newSortColumns);
   };
-  const columnsToRender = useMemo11(() => {
+  const columnsToRender = useMemo10(() => {
     let expectedColumns = columns.map((column) => convertToRDGColumns(column, summaryRow));
     if (expandable) {
       expectedColumns = [
@@ -7516,7 +7479,7 @@ var DxcDataGrid = ({
             if (row.isExpandedChildContent) {
               return row.expandedChildContent || null;
             }
-            return /* @__PURE__ */ jsx48(ActionContainer, { id: "action", children: row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender) });
+            return /* @__PURE__ */ jsx49(ActionContainer, { id: "small_action", children: row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender) });
           }
         },
         ...expectedColumns
@@ -7529,9 +7492,9 @@ var DxcDataGrid = ({
           ...expectedColumns[0],
           renderCell({ row }) {
             if (row.childRows?.length) {
-              return /* @__PURE__ */ jsx48(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, children: renderHierarchyTrigger(rowsToRender, row, uniqueRowId, firstColumnKey, setRowsToRender) });
+              return /* @__PURE__ */ jsx49(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, children: renderHierarchyTrigger(rowsToRender, row, uniqueRowId, firstColumnKey, setRowsToRender) });
             }
-            return /* @__PURE__ */ jsx48(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, className: "ellipsis-cell", children: row[firstColumnKey] });
+            return /* @__PURE__ */ jsx49(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, className: "ellipsis-cell", children: row[firstColumnKey] });
           }
         };
       }
@@ -7546,11 +7509,11 @@ var DxcDataGrid = ({
           minWidth: 36,
           renderCell({ row }) {
             if (!row.isExpandedChildContent) {
-              return /* @__PURE__ */ jsx48(ActionContainer, { id: "action", children: renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows) });
+              return /* @__PURE__ */ jsx49(ActionContainer, { id: "small_action", children: renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows) });
             }
             return null;
           },
-          renderHeaderCell: () => /* @__PURE__ */ jsx48(ActionContainer, { id: "action", children: renderHeaderCheckbox(rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) })
+          renderHeaderCell: () => /* @__PURE__ */ jsx49(ActionContainer, { id: "small_action", children: renderHeaderCheckbox(rows, uniqueRowId, selectedRows, onSelectRows) })
         },
         ...expectedColumns
       ];
@@ -7559,6 +7522,10 @@ var DxcDataGrid = ({
   }, [selectable, expandable, columns, rowsToRender, onSelectRows, rows, summaryRow, uniqueRowId, selectedRows]);
   const [columnsOrder, setColumnsOrder] = useState17(() => columnsToRender.map((_, index) => index));
   const [sortColumns, setSortColumns] = useState17([]);
+  useEffect11(() => {
+    const rootStyles = getComputedStyle(document.documentElement);
+    if (rootStyles) setColHeight(parseFloat(rootStyles.getPropertyValue("--height-l")));
+  }, []);
   useEffect11(() => {
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
@@ -7579,7 +7546,7 @@ var DxcDataGrid = ({
     }
     setRowsToRender(finalRows);
   }, [rows]);
-  const reorderedColumns = useMemo11(
+  const reorderedColumns = useMemo10(
     () => (
       // Array ordered by columnsOrder
       columnsOrder.map((index) => columnsToRender[index])
@@ -7611,7 +7578,7 @@ var DxcDataGrid = ({
       onGridRowsChange(newRows);
     }
   };
-  const sortedRows = useMemo11(() => {
+  const sortedRows = useMemo10(() => {
     const sortFunctions = getCustomSortFn(columns);
     if (!onSort) {
       if (sortColumns.length > 0 && uniqueRowId) {
@@ -7640,19 +7607,19 @@ var DxcDataGrid = ({
     }
     return rowsToRender;
   }, [expandable, rowsToRender, sortColumns, uniqueRowId]);
-  const minItemsPerPageIndex = useMemo11(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = useMemo11(
+  const minItemsPerPageIndex = useMemo10(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
+  const maxItemsPerPageIndex = useMemo10(
     () => getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page),
     [itemsPerPage, minItemsPerPageIndex, page, rows]
   );
-  const filteredRows = useMemo11(() => {
+  const filteredRows = useMemo10(() => {
     if (onSort && sortColumns?.length > 0) {
       onSort?.(sortColumns?.[0]);
     }
     return !showPaginator || onPageChange ? sortedRows : getPaginatedNodes(sortedRows, uniqueRowId, minItemsPerPageIndex, maxItemsPerPageIndex + 1);
   }, [sortedRows, minItemsPerPageIndex, maxItemsPerPageIndex]);
-  return /* @__PURE__ */ jsx48(ThemeProvider5, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ jsxs32(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs33(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
+    /* @__PURE__ */ jsx49(
       DataGrid,
       {
         columns: reorderedColumns,
@@ -7663,15 +7630,15 @@ var DxcDataGrid = ({
         sortColumns,
         onSortColumnsChange: handleSortChange,
         rowKeyGetter: (row) => uniqueRowId ? rowKeyGetter(row, uniqueRowId) : "",
-        rowHeight: (row) => row.isExpandedChildContent && typeof row.expandedContentHeight === "number" && row.expandedContentHeight > 0 ? row.expandedContentHeight : colorsTheme.dataGrid?.dataRowHeight ?? 0,
+        rowHeight: (row) => row.isExpandedChildContent && typeof row.expandedContentHeight === "number" && row.expandedContentHeight > 0 ? row.expandedContentHeight : colHeight ?? 0,
         selectedRows,
         bottomSummaryRows: summaryRow ? [summaryRow] : void 0,
-        headerRowHeight: colorsTheme.dataGrid.headerRowHeight,
-        summaryRowHeight: colorsTheme.dataGrid.summaryRowHeight,
+        headerRowHeight: colHeight,
+        summaryRowHeight: colHeight,
         className: "fill-grid"
       }
     ),
-    showPaginator && (totalItems ?? rows.length) > itemsPerPage && /* @__PURE__ */ jsx48(
+    showPaginator && (totalItems ?? rows.length) > itemsPerPage && /* @__PURE__ */ jsx49(
       Paginator_default,
       {
         totalItems: totalItems ?? rows.length,
@@ -7683,7 +7650,7 @@ var DxcDataGrid = ({
         onPageChange: goToPage
       }
     )
-  ] }) });
+  ] });
 };
 DxcDataGrid.ActionsCell = DxcActionsCell;
 var DataGrid_default = DxcDataGrid;
@@ -7695,23 +7662,23 @@ import {
   useEffect as useEffect16,
   useId as useId11,
   useCallback as useCallback7,
-  useContext as useContext23,
+  useContext as useContext22,
   forwardRef as forwardRef7
 } from "react";
 import dayjs3 from "dayjs";
-import styled47, { ThemeProvider as ThemeProvider6 } from "styled-components";
+import styled47, { ThemeProvider as ThemeProvider4 } from "styled-components";
 import * as Popover4 from "@radix-ui/react-popover";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // src/date-input/DatePicker.tsx
-import { memo as memo8, useContext as useContext20, useState as useState20 } from "react";
+import { memo as memo8, useContext as useContext19, useState as useState20 } from "react";
 import dayjs2 from "dayjs";
 import styled43 from "styled-components";
 
 // src/date-input/Calendar.tsx
-import { useContext as useContext19, useState as useState18, useMemo as useMemo12, useEffect as useEffect12, useId as useId8, memo as memo6 } from "react";
+import { useContext as useContext18, useState as useState18, useMemo as useMemo11, useEffect as useEffect12, useId as useId8, memo as memo6 } from "react";
 import styled41 from "styled-components";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 var CalendarContainer = styled41.div`
   box-sizing: border-box;
   display: flex;
@@ -7824,8 +7791,8 @@ var Calendar = ({
   const [dateToFocus, setDateToFocus] = useState18(getDateToFocus(selectedDate, innerDate, today2));
   const [isFocusable, setIsFocusable] = useState18(false);
   const id = useId8();
-  const translatedLabels = useContext19(HalstackLanguageContext);
-  const dayCells = useMemo12(() => getDays(innerDate), [innerDate]);
+  const translatedLabels = useContext18(HalstackLanguageContext);
+  const dayCells = useMemo11(() => getDays(innerDate), [innerDate]);
   const onDateClickHandler = (date) => {
     const newDate = innerDate.set("month", date.month).set("date", date.day);
     onDaySelect(newDate);
@@ -7919,9 +7886,9 @@ var Calendar = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsxs33(CalendarContainer, { role: "grid", children: [
-    /* @__PURE__ */ jsx49(CalendarHeaderRow, { role: "row", children: translatedLabels.calendar.daysShort.map((weekDay) => /* @__PURE__ */ jsx49(WeekHeaderCell, { role: "columnheader", children: weekDay }, weekDay)) }),
-    /* @__PURE__ */ jsx49(MonthContainer, { onBlur: handleOnBlur, role: "rowgroup", children: divideDaysIntoWeeks(dayCells, translatedLabels.calendar.daysShort.length).map((week, rowIndex) => /* @__PURE__ */ jsx49(WeekContainer, { role: "row", children: week.map((date) => /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs34(CalendarContainer, { role: "grid", children: [
+    /* @__PURE__ */ jsx50(CalendarHeaderRow, { role: "row", children: translatedLabels.calendar.daysShort.map((weekDay) => /* @__PURE__ */ jsx50(WeekHeaderCell, { role: "columnheader", children: weekDay }, weekDay)) }),
+    /* @__PURE__ */ jsx50(MonthContainer, { onBlur: handleOnBlur, role: "rowgroup", children: divideDaysIntoWeeks(dayCells, translatedLabels.calendar.daysShort.length).map((week, rowIndex) => /* @__PURE__ */ jsx50(WeekContainer, { role: "row", children: week.map((date) => /* @__PURE__ */ jsx50(
       DayCellButton,
       {
         id: `${id}_day_${date.day}_month${date.month}`,
@@ -7946,7 +7913,7 @@ var Calendar_default = memo6(Calendar);
 import dayjs from "dayjs";
 import { useEffect as useEffect13, useId as useId9, useState as useState19, memo as memo7 } from "react";
 import styled42 from "styled-components";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var YearPickerContainer = styled42.div`
   box-sizing: border-box;
   display: flex;
@@ -8023,7 +7990,7 @@ var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
         break;
     }
   };
-  return /* @__PURE__ */ jsx50(YearPickerContainer, { role: "listbox", "aria-label": "Year Picker", children: yearList.map((year2) => /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(YearPickerContainer, { role: "listbox", "aria-label": "Year Picker", children: yearList.map((year2) => /* @__PURE__ */ jsx51(
     YearPickerButton,
     {
       "aria-label": year2.toString(),
@@ -8045,7 +8012,7 @@ var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
 var YearPicker_default = memo7(YearPicker);
 
 // src/date-input/DatePicker.tsx
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var DatePickerContainer = styled43.div`
   padding: var(--spacing-padding-m) var(--spacing-padding-xs) var(--spacing-padding-xs) var(--spacing-padding-xs);
   background-color: var(--color-bg-neutral-lightest);
@@ -8117,7 +8084,7 @@ var DatePicker = ({ date, onDateSelect, id }) => {
   const [innerDate, setInnerDate] = useState20(date?.isValid() ? date : dayjs2());
   const [content, setContent] = useState20("calendar");
   const selectedDate = date?.isValid() ? date : dayjs2(null);
-  const translatedLabels = useContext20(HalstackLanguageContext);
+  const translatedLabels = useContext19(HalstackLanguageContext);
   const handleDateSelect = (chosenDate) => {
     setInnerDate(chosenDate);
     onDateSelect(chosenDate);
@@ -8129,41 +8096,41 @@ var DatePicker = ({ date, onDateSelect, id }) => {
   const handleMonthChange = (chosenDate) => {
     setInnerDate(chosenDate);
   };
-  return /* @__PURE__ */ jsxs34(DatePickerContainer, { id, children: [
-    /* @__PURE__ */ jsxs34(PickerHeader, { children: [
-      /* @__PURE__ */ jsx51(Tooltip, { label: translatedLabels.calendar.previousMonthTitle, children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs35(DatePickerContainer, { id, children: [
+    /* @__PURE__ */ jsxs35(PickerHeader, { children: [
+      /* @__PURE__ */ jsx52(Tooltip, { label: translatedLabels.calendar.previousMonthTitle, children: /* @__PURE__ */ jsx52(
         HeaderButton,
         {
           "aria-label": translatedLabels.calendar.previousMonthTitle,
           onClick: () => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1)),
-          children: /* @__PURE__ */ jsx51(DxcIcon, { icon: "keyboard_arrow_left" })
+          children: /* @__PURE__ */ jsx52(DxcIcon, { icon: "keyboard_arrow_left" })
         }
       ) }),
-      /* @__PURE__ */ jsxs34(
+      /* @__PURE__ */ jsxs35(
         HeaderYearTrigger,
         {
           "aria-live": "polite",
           onClick: () => setContent((currentContent) => currentContent === "yearPicker" ? "calendar" : "yearPicker"),
           children: [
-            /* @__PURE__ */ jsxs34(HeaderYearTriggerLabel, { children: [
+            /* @__PURE__ */ jsxs35(HeaderYearTriggerLabel, { children: [
               translatedLabels.calendar.months[innerDate.get("month")],
               " ",
               innerDate.format("YYYY")
             ] }),
-            /* @__PURE__ */ jsx51(DxcIcon, { icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down" })
+            /* @__PURE__ */ jsx52(DxcIcon, { icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx51(Tooltip, { label: translatedLabels.calendar.nextMonthTitle, children: /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(Tooltip, { label: translatedLabels.calendar.nextMonthTitle, children: /* @__PURE__ */ jsx52(
         HeaderButton,
         {
           "aria-label": translatedLabels.calendar.nextMonthTitle,
           onClick: () => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1)),
-          children: /* @__PURE__ */ jsx51(DxcIcon, { icon: "keyboard_arrow_right" })
+          children: /* @__PURE__ */ jsx52(DxcIcon, { icon: "keyboard_arrow_right" })
         }
       ) })
     ] }),
-    content === "calendar" && /* @__PURE__ */ jsx51(
+    content === "calendar" && /* @__PURE__ */ jsx52(
       Calendar_default,
       {
         innerDate,
@@ -8173,7 +8140,7 @@ var DatePicker = ({ date, onDateSelect, id }) => {
         today
       }
     ),
-    content === "yearPicker" && /* @__PURE__ */ jsx51(YearPicker_default, { selectedDate, onYearSelect: handleOnYearSelect, today })
+    content === "yearPicker" && /* @__PURE__ */ jsx52(YearPicker_default, { selectedDate, onYearSelect: handleOnYearSelect, today })
   ] });
 };
 var DatePicker_default = memo8(DatePicker);
@@ -8182,7 +8149,7 @@ var DatePicker_default = memo8(DatePicker);
 import * as Popover3 from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef6,
-  useContext as useContext22,
+  useContext as useContext21,
   useEffect as useEffect15,
   useId as useId10,
   useRef as useRef12,
@@ -8195,11 +8162,11 @@ import { createContext as createContext8 } from "react";
 var NumberInputContext_default = createContext8(null);
 
 // src/text-input/Suggestions.tsx
-import { memo as memo10, useContext as useContext21, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { memo as memo10, useContext as useContext20, useEffect as useEffect14, useRef as useRef11 } from "react";
 import styled45 from "styled-components";
 
 // src/text-input/Suggestion.tsx
-import { memo as memo9, useMemo as useMemo13 } from "react";
+import { memo as memo9, useMemo as useMemo12 } from "react";
 import styled44 from "styled-components";
 
 // src/text-input/utils.ts
@@ -8244,7 +8211,7 @@ var transformSpecialChars = (str) => {
 };
 
 // src/text-input/Suggestion.tsx
-import { Fragment as Fragment11, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var SuggestionContainer = styled44.li`
   display: flex;
   flex-direction: column;
@@ -8268,11 +8235,11 @@ var StyledSuggestion = styled44.span`
   }
 `;
 var Suggestion = ({ highlighted, id, isLast, onClick, suggestion, value, visuallyFocused }) => {
-  const matchedSuggestion = useMemo13(() => {
+  const matchedSuggestion = useMemo12(() => {
     const regEx = new RegExp(transformSpecialChars(value), "i");
     return { matchedWords: suggestion.match(regEx), noMatchedWords: suggestion.replace(regEx, "") };
   }, [value, suggestion]);
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     SuggestionContainer,
     {
       "aria-selected": visuallyFocused ? true : void 0,
@@ -8283,11 +8250,11 @@ var Suggestion = ({ highlighted, id, isLast, onClick, suggestion, value, visuall
       role: "option",
       visuallyFocused,
       children: [
-        /* @__PURE__ */ jsx52(Flex_default, { alignItems: "center", grow: 1, children: /* @__PURE__ */ jsx52(StyledSuggestion, { children: highlighted ? /* @__PURE__ */ jsxs35(Fragment11, { children: [
-          /* @__PURE__ */ jsx52("span", { children: matchedSuggestion.matchedWords }),
+        /* @__PURE__ */ jsx53(Flex_default, { alignItems: "center", grow: 1, children: /* @__PURE__ */ jsx53(StyledSuggestion, { children: highlighted ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          /* @__PURE__ */ jsx53("span", { children: matchedSuggestion.matchedWords }),
           matchedSuggestion.noMatchedWords
         ] }) : suggestion }) }),
-        !isLast && /* @__PURE__ */ jsx52(DxcDivider, {})
+        !isLast && /* @__PURE__ */ jsx53(DxcDivider, {})
       ]
     }
   );
@@ -8295,7 +8262,7 @@ var Suggestion = ({ highlighted, id, isLast, onClick, suggestion, value, visuall
 var Suggestion_default = memo9(Suggestion);
 
 // src/text-input/Suggestions.tsx
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 var SuggestionsContainer = styled45.div`
   box-sizing: border-box;
   max-height: 304px;
@@ -8342,7 +8309,7 @@ var Suggestions = ({
   value,
   visualFocusIndex
 }) => {
-  const translatedLabels = useContext21(HalstackLanguageContext);
+  const translatedLabels = useContext20(HalstackLanguageContext);
   const listboxRef = useRef11(null);
   useEffect14(() => {
     const visualFocusedOptionEl = listboxRef?.current?.querySelectorAll("[role='option']")[visualFocusIndex];
@@ -8351,10 +8318,10 @@ var Suggestions = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ jsx53(SuggestionsContainer, { style: styles, children: isSearching ? /* @__PURE__ */ jsx53(SuggestionsSystemMessage, { "aria-live": "polite", children: translatedLabels.textInput.searchingMessage }) : searchHasErrors ? /* @__PURE__ */ jsxs36(SuggestionsErrorMessage, { "aria-live": "assertive", role: "alert", children: [
-    /* @__PURE__ */ jsx53(DxcIcon, { icon: "filled_error" }),
+  return /* @__PURE__ */ jsx54(SuggestionsContainer, { style: styles, children: isSearching ? /* @__PURE__ */ jsx54(SuggestionsSystemMessage, { "aria-live": "polite", children: translatedLabels.textInput.searchingMessage }) : searchHasErrors ? /* @__PURE__ */ jsxs37(SuggestionsErrorMessage, { "aria-live": "assertive", role: "alert", children: [
+    /* @__PURE__ */ jsx54(DxcIcon, { icon: "filled_error" }),
     translatedLabels.textInput.fetchingDataErrorMessage
-  ] }) : /* @__PURE__ */ jsx53(
+  ] }) : /* @__PURE__ */ jsx54(
     "ul",
     {
       "aria-label": "Suggestions",
@@ -8365,7 +8332,7 @@ var Suggestions = ({
       ref: listboxRef,
       role: "listbox",
       style: { margin: 0, padding: 0 },
-      children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx53(
+      children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx54(
         Suggestion_default,
         {
           highlighted: highlightedSuggestions,
@@ -8384,7 +8351,7 @@ var Suggestions = ({
 var Suggestions_default = memo10(Suggestions);
 
 // src/text-input/TextInput.tsx
-import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 var TextInputContainer = styled46.div`
   box-sizing: border-box;
   display: flex;
@@ -8436,7 +8403,7 @@ var Addon = styled46.span`
   ${({ type }) => `padding-${type === "prefix" ? "right" : "left"}: var(--spacing-padding-xs);`}
   pointer-events: none;
 `;
-var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx54(Fragment12, { children: condition ? wrapper(children) : children });
+var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx55(Fragment12, { children: condition ? wrapper(children) : children });
 var DxcTextInput = forwardRef6(
   ({
     action,
@@ -8468,8 +8435,8 @@ var DxcTextInput = forwardRef6(
     const inputId = `input-${useId10()}`;
     const autosuggestId = `suggestions-${inputId}`;
     const errorId = `error-${inputId}`;
-    const translatedLabels = useContext22(HalstackLanguageContext);
-    const numberInputContext = useContext22(NumberInputContext_default);
+    const translatedLabels = useContext21(HalstackLanguageContext);
+    const numberInputContext = useContext21(NumberInputContext_default);
     const inputRef = useRef12(null);
     const inputContainerRef = useRef12(null);
     const actionRef = useRef12(null);
@@ -8716,19 +8683,19 @@ var DxcTextInput = forwardRef6(
       }
       return void 0;
     }, [value, innerValue, suggestions, numberInputContext]);
-    return /* @__PURE__ */ jsxs37(TextInputContainer, { margin, ref, size, children: [
-      label && /* @__PURE__ */ jsxs37(Label_default, { disabled, hasMargin: !helperText, htmlFor: inputId, children: [
+    return /* @__PURE__ */ jsxs38(TextInputContainer, { margin, ref, size, children: [
+      label && /* @__PURE__ */ jsxs38(Label_default, { disabled, hasMargin: !helperText, htmlFor: inputId, children: [
         label,
         " ",
-        optional && /* @__PURE__ */ jsx54("span", { children: translatedLabels.formFields.optionalLabel })
+        optional && /* @__PURE__ */ jsx55("span", { children: translatedLabels.formFields.optionalLabel })
       ] }),
-      helperText && /* @__PURE__ */ jsx54(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ jsx54(
+      helperText && /* @__PURE__ */ jsx55(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ jsx55(
         AutosuggestWrapper,
         {
           condition: hasSuggestions(suggestions),
-          wrapper: (children) => /* @__PURE__ */ jsxs37(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
-            /* @__PURE__ */ jsx54(
+          wrapper: (children) => /* @__PURE__ */ jsxs38(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
+            /* @__PURE__ */ jsx55(
               Popover3.Trigger,
               {
                 "aria-controls": void 0,
@@ -8739,7 +8706,7 @@ var DxcTextInput = forwardRef6(
                 children
               }
             ),
-            /* @__PURE__ */ jsx54(Popover3.Portal, { children: /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx55(Popover3.Portal, { children: /* @__PURE__ */ jsx55(
               Popover3.Content,
               {
                 onCloseAutoFocus: (event) => {
@@ -8750,7 +8717,7 @@ var DxcTextInput = forwardRef6(
                 },
                 sideOffset: 4,
                 style: { zIndex: "2147483647" },
-                children: /* @__PURE__ */ jsx54(
+                children: /* @__PURE__ */ jsx55(
                   Suggestions_default,
                   {
                     highlightedSuggestions: typeof suggestions !== "function",
@@ -8770,7 +8737,7 @@ var DxcTextInput = forwardRef6(
               }
             ) })
           ] }),
-          children: /* @__PURE__ */ jsxs37(
+          children: /* @__PURE__ */ jsxs38(
             TextInput,
             {
               disabled,
@@ -8780,8 +8747,8 @@ var DxcTextInput = forwardRef6(
               readOnly,
               ref: inputContainerRef,
               children: [
-                prefix && /* @__PURE__ */ jsx54(Addon, { disabled, type: "prefix", children: prefix }),
-                /* @__PURE__ */ jsx54(
+                prefix && /* @__PURE__ */ jsx55(Addon, { disabled, type: "prefix", children: prefix }),
+                /* @__PURE__ */ jsx55(
                   Input,
                   {
                     "aria-activedescendant": hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 ? `suggestion-${visualFocusIndex}` : void 0,
@@ -8817,8 +8784,8 @@ var DxcTextInput = forwardRef6(
                     value: value ?? innerValue
                   }
                 ),
-                /* @__PURE__ */ jsxs37(Flex_default, { children: [
-                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ jsx54(
+                /* @__PURE__ */ jsxs38(Flex_default, { children: [
+                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ jsx55(
                     ActionIcon_default,
                     {
                       icon: "close",
@@ -8827,8 +8794,8 @@ var DxcTextInput = forwardRef6(
                       title: translatedLabels.textInput.clearFieldActionTitle
                     }
                   ),
-                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ jsxs37(Fragment12, { children: [
-                    /* @__PURE__ */ jsx54(
+                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ jsxs38(Fragment12, { children: [
+                    /* @__PURE__ */ jsx55(
                       ActionIcon_default,
                       {
                         disabled,
@@ -8839,7 +8806,7 @@ var DxcTextInput = forwardRef6(
                         title: translatedLabels.numberInput.decrementValueTitle
                       }
                     ),
-                    /* @__PURE__ */ jsx54(
+                    /* @__PURE__ */ jsx55(
                       ActionIcon_default,
                       {
                         disabled,
@@ -8851,7 +8818,7 @@ var DxcTextInput = forwardRef6(
                       }
                     )
                   ] }),
-                  action && /* @__PURE__ */ jsx54(
+                  action && /* @__PURE__ */ jsx55(
                     ActionIcon_default,
                     {
                       disabled,
@@ -8863,20 +8830,20 @@ var DxcTextInput = forwardRef6(
                     }
                   )
                 ] }),
-                suffix && /* @__PURE__ */ jsx54(Addon, { disabled, type: "suffix", children: suffix })
+                suffix && /* @__PURE__ */ jsx55(Addon, { disabled, type: "suffix", children: suffix })
               ]
             }
           )
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx54(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx55(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
 var TextInput_default = DxcTextInput;
 
 // src/date-input/DateInput.tsx
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 dayjs3.extend(customParseFormat);
 var SIDEOFFSET = 4;
 var sizes5 = {
@@ -8970,8 +8937,8 @@ var DxcDateInput = forwardRef7(
       innerValue || value ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value ?? innerValue, format).format("YY") < 68 ? 2e3 : 1900 : null
     );
     const [sideOffset, setSideOffset] = useState22(SIDEOFFSET);
-    const colorsTheme = useContext23(HalstackContext);
-    const translatedLabels = useContext23(HalstackLanguageContext);
+    const colorsTheme = useContext22(HalstackContext);
+    const translatedLabels = useContext22(HalstackLanguageContext);
     const dateRef = useRef13(null);
     const popoverContentRef = useRef13(null);
     const handleCalendarOnClick = (newDate) => {
@@ -9089,8 +9056,8 @@ var DxcDateInput = forwardRef7(
         }
       }
     }, [isOpen, disabled, calendarId]);
-    return /* @__PURE__ */ jsx55(ThemeProvider6, { theme: colorsTheme, children: /* @__PURE__ */ jsxs38(DateInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsx56(ThemeProvider4, { theme: colorsTheme, children: /* @__PURE__ */ jsxs39(DateInputContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsxs39(
         Label5,
         {
           htmlFor: dateRef.current?.getElementsByTagName("input")[0]?.id,
@@ -9099,13 +9066,13 @@ var DxcDateInput = forwardRef7(
           children: [
             label,
             " ",
-            optional && /* @__PURE__ */ jsx55(OptionalLabel, { disabled, children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ jsx56(OptionalLabel, { disabled, children: translatedLabels.formFields.optionalLabel })
           ]
         }
       ),
-      helperText && /* @__PURE__ */ jsx55(HelperText2, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs38(Popover4.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx55(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ jsx55(
+      helperText && /* @__PURE__ */ jsx56(HelperText2, { disabled, children: helperText }),
+      /* @__PURE__ */ jsxs39(Popover4.Root, { open: isOpen, children: [
+        /* @__PURE__ */ jsx56(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ jsx56(
           TextInput_default,
           {
             name,
@@ -9131,7 +9098,7 @@ var DxcDateInput = forwardRef7(
             ariaLabel
           }
         ) }),
-        /* @__PURE__ */ jsx55(Popover4.Portal, { children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56(Popover4.Portal, { children: /* @__PURE__ */ jsx56(
           StyledPopoverContent,
           {
             sideOffset,
@@ -9140,7 +9107,7 @@ var DxcDateInput = forwardRef7(
             onBlur: handleDatePickerOnBlur,
             onKeyDown: handleDatePickerEscKeydown,
             ref: popoverContentRef,
-            children: /* @__PURE__ */ jsx55(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            children: /* @__PURE__ */ jsx56(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
           }
         ) })
       ] })
@@ -9150,10 +9117,10 @@ var DxcDateInput = forwardRef7(
 var DateInput_default = DxcDateInput;
 
 // src/dialog/Dialog.tsx
-import { useContext as useContext24, useEffect as useEffect17 } from "react";
+import { useContext as useContext23, useEffect as useEffect17 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import styled48, { createGlobalStyle as createGlobalStyle2 } from "styled-components";
-import { Fragment as Fragment13, jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
 var BodyStyle2 = createGlobalStyle2`
   body {
     overflow: hidden;
@@ -9203,7 +9170,7 @@ var DxcDialog = ({
   overlay = true,
   tabIndex = 0
 }) => {
-  const translatedLabels = useContext24(HalstackLanguageContext);
+  const translatedLabels = useContext23(HalstackLanguageContext);
   useEffect17(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -9216,14 +9183,14 @@ var DxcDialog = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [onCloseClick]);
-  return /* @__PURE__ */ jsxs39(Fragment13, { children: [
-    /* @__PURE__ */ jsx56(BodyStyle2, {}),
+  return /* @__PURE__ */ jsxs40(Fragment13, { children: [
+    /* @__PURE__ */ jsx57(BodyStyle2, {}),
     createPortal2(
-      /* @__PURE__ */ jsxs39(DialogContainer, { children: [
-        overlay && /* @__PURE__ */ jsx56(Overlay3, { onClick: onBackgroundClick }),
-        /* @__PURE__ */ jsx56(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: /* @__PURE__ */ jsxs39(FocusLock_default, { children: [
+      /* @__PURE__ */ jsxs40(DialogContainer, { children: [
+        overlay && /* @__PURE__ */ jsx57(Overlay3, { onClick: onBackgroundClick }),
+        /* @__PURE__ */ jsx57(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: /* @__PURE__ */ jsxs40(FocusLock_default, { children: [
           children,
-          closable && /* @__PURE__ */ jsx56(CloseIconActionContainer, { children: /* @__PURE__ */ jsx56(
+          closable && /* @__PURE__ */ jsx57(CloseIconActionContainer, { children: /* @__PURE__ */ jsx57(
             ActionIcon_default,
             {
               icon: "close",
@@ -9241,13 +9208,13 @@ var DxcDialog = ({
 var Dialog_default = DxcDialog;
 
 // src/file-input/FileInput.tsx
-import { useCallback as useCallback8, useContext as useContext26, useEffect as useEffect18, useId as useId13, useState as useState24, forwardRef as forwardRef8 } from "react";
+import { useCallback as useCallback8, useContext as useContext25, useEffect as useEffect18, useId as useId13, useState as useState24, forwardRef as forwardRef8 } from "react";
 import styled50 from "styled-components";
 
 // src/file-input/FileItem.tsx
-import { memo as memo11, useContext as useContext25, useId as useId12, useState as useState23 } from "react";
+import { memo as memo11, useContext as useContext24, useId as useId12, useState as useState23 } from "react";
 import styled49 from "styled-components";
-import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
 var ListItem3 = styled49.li`
   list-style: none;
   display: flex;
@@ -9341,19 +9308,19 @@ var FileItem = ({
   onDelete,
   tabIndex
 }) => {
-  const translatedLabels = useContext25(HalstackLanguageContext);
+  const translatedLabels = useContext24(HalstackLanguageContext);
   const [hasTooltip, setHasTooltip] = useState23(false);
   const fileNameId = useId12();
   const handleOnMouseEnter = (event) => {
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
   };
-  return /* @__PURE__ */ jsxs40(ListItem3, { children: [
-    /* @__PURE__ */ jsxs40(MainContainer2, { error, singleFileMode, showPreview, children: [
-      showPreview && (type.includes("image") ? /* @__PURE__ */ jsx57(ImagePreview, { src: preview, alt: `Preview of ${fileName}` }) : /* @__PURE__ */ jsx57(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ jsx57(DxcIcon, { icon: preview }) })),
-      /* @__PURE__ */ jsxs40(FileItemContent, { children: [
-        /* @__PURE__ */ jsx57(FileName, { id: fileNameId, children: fileName }),
-        /* @__PURE__ */ jsx57(Flex_default, { children: /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs41(ListItem3, { children: [
+    /* @__PURE__ */ jsxs41(MainContainer2, { error, singleFileMode, showPreview, children: [
+      showPreview && (type.includes("image") ? /* @__PURE__ */ jsx58(ImagePreview, { src: preview, alt: `Preview of ${fileName}` }) : /* @__PURE__ */ jsx58(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ jsx58(DxcIcon, { icon: preview }) })),
+      /* @__PURE__ */ jsxs41(FileItemContent, { children: [
+        /* @__PURE__ */ jsx58(FileName, { id: fileNameId, children: fileName }),
+        /* @__PURE__ */ jsx58(Flex_default, { children: /* @__PURE__ */ jsx58(
           ActionIcon_default,
           {
             onClick: () => onDelete(fileName),
@@ -9364,9 +9331,9 @@ var FileItem = ({
         ) })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx57(TooltipWrapper, { condition: hasTooltip, label: error, children: /* @__PURE__ */ jsxs40(ErrorMessageContainer2, { role: "alert", "aria-live": "assertive", singleFileMode, children: [
-      /* @__PURE__ */ jsx57(ErrorIcon, { children: /* @__PURE__ */ jsx57(DxcIcon, { icon: "filled_error" }) }),
-      /* @__PURE__ */ jsx57(ErrorMessage2, { onMouseEnter: handleOnMouseEnter, children: error })
+    error && /* @__PURE__ */ jsx58(TooltipWrapper, { condition: hasTooltip, label: error, children: /* @__PURE__ */ jsxs41(ErrorMessageContainer2, { role: "alert", "aria-live": "assertive", singleFileMode, children: [
+      /* @__PURE__ */ jsx58(ErrorIcon, { children: /* @__PURE__ */ jsx58(DxcIcon, { icon: "filled_error" }) }),
+      /* @__PURE__ */ jsx58(ErrorMessage2, { onMouseEnter: handleOnMouseEnter, children: error })
     ] }) })
   ] });
 };
@@ -9394,7 +9361,7 @@ var isFileIncluded = (file, fileList) => {
 };
 
 // src/file-input/FileInput.tsx
-import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
 var FileInputContainer = styled50.div`
   display: flex;
   flex-direction: column;
@@ -9484,7 +9451,7 @@ var DxcFileInput = forwardRef8(
     const [isDragging, setIsDragging] = useState24(false);
     const [files, setFiles] = useState24([]);
     const fileInputId = `file-input-${useId13()}`;
-    const translatedLabels = useContext26(HalstackLanguageContext);
+    const translatedLabels = useContext25(HalstackLanguageContext);
     const checkFileSize = (file) => {
       if (minSize && file.size < minSize) return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
       else if (maxSize && file.size > maxSize) return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
@@ -9573,11 +9540,11 @@ var DxcFileInput = forwardRef8(
       };
       getFiles();
     }, [value]);
-    return /* @__PURE__ */ jsxs41(FileInputContainer, { margin, ref, children: [
-      /* @__PURE__ */ jsx58(Label_default, { htmlFor: fileInputId, disabled, children: label }),
-      /* @__PURE__ */ jsx58(HelperText_default, { disabled, children: helperText }),
-      mode === "file" ? /* @__PURE__ */ jsxs41(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
-        /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsxs42(FileInputContainer, { margin, ref, children: [
+      /* @__PURE__ */ jsx59(Label_default, { htmlFor: fileInputId, disabled, children: label }),
+      /* @__PURE__ */ jsx59(HelperText_default, { disabled, children: helperText }),
+      mode === "file" ? /* @__PURE__ */ jsxs42(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
+        /* @__PURE__ */ jsx59(
           ValueInput,
           {
             id: fileInputId,
@@ -9589,7 +9556,7 @@ var DxcFileInput = forwardRef8(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ jsx58(
+        /* @__PURE__ */ jsx59(
           Button_default,
           {
             mode: "secondary",
@@ -9600,7 +9567,7 @@ var DxcFileInput = forwardRef8(
             tabIndex
           }
         ),
-        files.length > 0 && /* @__PURE__ */ jsx58(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx58(
+        files.length > 0 && /* @__PURE__ */ jsx59(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx59(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -9614,8 +9581,8 @@ var DxcFileInput = forwardRef8(
           },
           `file-${index}`
         )) })
-      ] }) : /* @__PURE__ */ jsxs41(Container2, { children: [
-        /* @__PURE__ */ jsx58(
+      ] }) : /* @__PURE__ */ jsxs42(Container2, { children: [
+        /* @__PURE__ */ jsx59(
           ValueInput,
           {
             id: fileInputId,
@@ -9627,7 +9594,7 @@ var DxcFileInput = forwardRef8(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsxs42(
           DragDropArea,
           {
             isDragging,
@@ -9638,7 +9605,7 @@ var DxcFileInput = forwardRef8(
             onDragOver: handleDrag,
             onDragLeave: handleDragOut,
             children: [
-              /* @__PURE__ */ jsx58(
+              /* @__PURE__ */ jsx59(
                 Button_default,
                 {
                   mode: "secondary",
@@ -9648,11 +9615,11 @@ var DxcFileInput = forwardRef8(
                   size: { width: "fitContent", height: "medium" }
                 }
               ),
-              mode === "dropzone" ? /* @__PURE__ */ jsx58(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ jsx58(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
+              mode === "dropzone" ? /* @__PURE__ */ jsx59(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ jsx59(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
             ]
           }
         ),
-        files.length > 0 && /* @__PURE__ */ jsx58(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx58(
+        files.length > 0 && /* @__PURE__ */ jsx59(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx59(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -9674,7 +9641,7 @@ var FileInput_default = DxcFileInput;
 
 // src/grid/Grid.tsx
 import styled51 from "styled-components";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var Grid = styled51.div`
   display: grid;
   ${(props) => `
@@ -9701,7 +9668,7 @@ var GridItem = styled51.div`
     ${props.placeSelf ? typeof props.placeSelf === "string" ? `place-self: ${props.placeSelf};` : `align-self: ${props.placeSelf.alignSelf ?? ""}; justify-self: ${props.placeSelf.justifySelf ?? ""};` : ""}
   `}
 `;
-var DxcGrid = (props) => /* @__PURE__ */ jsx59(Grid, { ...props });
+var DxcGrid = (props) => /* @__PURE__ */ jsx60(Grid, { ...props });
 DxcGrid.Item = GridItem;
 var Grid_default = DxcGrid;
 
@@ -9737,7 +9704,7 @@ var getHeadingWeight = (weight) => {
 };
 
 // src/heading/Heading.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var HeadingContainer = styled52.div`
   margin: ${({ margin }) => margin && typeof margin !== "object" ? spaces[margin] : "0px"};
   margin-top: ${({ margin }) => margin && typeof margin === "object" && margin.top ? spaces[margin.top] : ""};
@@ -9753,12 +9720,12 @@ var Heading = styled52.h1`
   margin: 0;
 `;
 function DxcHeading({ as, level = 1, margin, text, weight = "default" }) {
-  return /* @__PURE__ */ jsx60(HeadingContainer, { margin, children: /* @__PURE__ */ jsx60(Heading, { as: as ?? `h${level}`, $level: level, $weight: weight, children: text }) });
+  return /* @__PURE__ */ jsx61(HeadingContainer, { margin, children: /* @__PURE__ */ jsx61(Heading, { as: as ?? `h${level}`, $level: level, $weight: weight, children: text }) });
 }
 
 // src/image/Image.tsx
 import styled53 from "styled-components";
-import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
 var Figure = styled53.figure`
   display: flex;
   flex-direction: column;
@@ -9773,9 +9740,9 @@ var CaptionContainer = styled53.figcaption`
   font-size: var(--typography-label-s);
   font-weight: var(--typography-label-regular);
 `;
-var CaptionWrapper = ({ caption, children }) => caption != null ? /* @__PURE__ */ jsxs42(Figure, { children: [
+var CaptionWrapper = ({ caption, children }) => caption != null ? /* @__PURE__ */ jsxs43(Figure, { children: [
   children,
-  /* @__PURE__ */ jsx61(CaptionContainer, { children: caption })
+  /* @__PURE__ */ jsx62(CaptionContainer, { children: caption })
 ] }) : children;
 function DxcImage({
   alt,
@@ -9791,7 +9758,7 @@ function DxcImage({
   srcSet,
   width
 }) {
-  return /* @__PURE__ */ jsx61(CaptionWrapper, { caption, children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(CaptionWrapper, { caption, children: /* @__PURE__ */ jsx62(
     "img",
     {
       alt,
@@ -9812,9 +9779,9 @@ function DxcImage({
 }
 
 // src/inset/Inset.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }) {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     DxcContainer,
     {
       padding: {
@@ -9831,7 +9798,7 @@ function DxcInset({ bottom, children, horizontal, left, right, space, top, verti
 // src/link/Link.tsx
 import { forwardRef as forwardRef9 } from "react";
 import styled54 from "styled-components";
-import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
 var Link3 = styled54.a`
   all: unset;
   display: inline-flex;
@@ -9894,7 +9861,7 @@ var DxcLink = forwardRef9(
     onClick,
     tabIndex = 0,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx63(
+  }, ref) => /* @__PURE__ */ jsx64(
     Link3,
     {
       as: onClick && !href ? "button" : "a",
@@ -9907,9 +9874,9 @@ var DxcLink = forwardRef9(
       margin,
       ref,
       ...otherProps,
-      children: /* @__PURE__ */ jsxs43(LinkContent, { iconPosition, inheritColor, children: [
+      children: /* @__PURE__ */ jsxs44(LinkContent, { iconPosition, inheritColor, children: [
         children,
-        icon && /* @__PURE__ */ jsx63(IconContainer6, { children: typeof icon === "string" ? /* @__PURE__ */ jsx63(DxcIcon, { icon }) : icon })
+        icon && /* @__PURE__ */ jsx64(IconContainer6, { children: typeof icon === "string" ? /* @__PURE__ */ jsx64(DxcIcon, { icon }) : icon })
       ] })
     }
   )
@@ -9917,11 +9884,11 @@ var DxcLink = forwardRef9(
 var Link_default = DxcLink;
 
 // src/nav-tabs/NavTabs.tsx
-import { Children as Children4, useMemo as useMemo14, useState as useState25 } from "react";
+import { Children as Children4, useMemo as useMemo13, useState as useState25 } from "react";
 import styled56 from "styled-components";
 
 // src/nav-tabs/Tab.tsx
-import { useEffect as useEffect19, forwardRef as forwardRef10, useContext as useContext27, useRef as useRef14, useImperativeHandle } from "react";
+import { useEffect as useEffect19, forwardRef as forwardRef10, useContext as useContext26, useRef as useRef14, useImperativeHandle } from "react";
 import styled55 from "styled-components";
 
 // src/nav-tabs/NavTabsContext.tsx
@@ -9929,7 +9896,7 @@ import { createContext as createContext9 } from "react";
 var NavTabsContext_default = createContext9(null);
 
 // src/nav-tabs/Tab.tsx
-import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
 var TabContainer = styled55.div`
   position: relative;
   display: flex;
@@ -9994,7 +9961,7 @@ var Underline = styled55.span`
 `;
 var Tab = forwardRef10(
   ({ href, active = false, icon, disabled = false, notificationNumber = false, children, ...otherProps }, ref) => {
-    const { iconPosition, tabIndex, focusedLabel } = useContext27(NavTabsContext_default) ?? {};
+    const { iconPosition, tabIndex, focusedLabel } = useContext26(NavTabsContext_default) ?? {};
     const tabRef = useRef14();
     const innerRef = useRef14(null);
     useImperativeHandle(ref, () => innerRef.current, []);
@@ -10014,8 +9981,8 @@ var Tab = forwardRef10(
           break;
       }
     };
-    return /* @__PURE__ */ jsxs44(TabContainer, { children: [
-      /* @__PURE__ */ jsx64(DxcInset, { space: "var(--spacing-padding-xs)", children: /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs45(TabContainer, { children: [
+      /* @__PURE__ */ jsx65(DxcInset, { space: "var(--spacing-padding-xs)", children: /* @__PURE__ */ jsxs45(
         TabLink,
         {
           href: !disabled ? href : void 0,
@@ -10035,10 +10002,10 @@ var Tab = forwardRef10(
           "aria-disabled": disabled,
           ...otherProps,
           children: [
-            icon && /* @__PURE__ */ jsx64(IconContainer7, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx64(DxcIcon, { icon }) : icon }),
-            /* @__PURE__ */ jsxs44(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-s)", children: [
-              /* @__PURE__ */ jsx64(Label6, { disabled, children }),
-              notificationNumber && !disabled && /* @__PURE__ */ jsx64(
+            icon && /* @__PURE__ */ jsx65(IconContainer7, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx65(DxcIcon, { icon }) : icon }),
+            /* @__PURE__ */ jsxs45(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-s)", children: [
+              /* @__PURE__ */ jsx65(Label6, { disabled, children }),
+              notificationNumber && !disabled && /* @__PURE__ */ jsx65(
                 Badge_default,
                 {
                   mode: "notification",
@@ -10050,7 +10017,7 @@ var Tab = forwardRef10(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx64(Underline, { active })
+      /* @__PURE__ */ jsx65(Underline, { active })
     ] });
   }
 );
@@ -10091,7 +10058,7 @@ var getNextTabIndex = (array, initialIndex) => {
 };
 
 // src/nav-tabs/NavTabs.tsx
-import { jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
 var NavTabsContainer = styled56.div`
   position: relative;
   display: flex;
@@ -10110,7 +10077,7 @@ var DxcNavTabs = ({ iconPosition = "left", tabIndex = 0, children }) => {
   const childArray = Children4.toArray(children).filter(
     (child) => typeof child === "object" && "props" in child
   );
-  const contextValue = useMemo14(
+  const contextValue = useMemo13(
     () => ({
       iconPosition,
       tabIndex,
@@ -10135,18 +10102,18 @@ var DxcNavTabs = ({ iconPosition = "left", tabIndex = 0, children }) => {
         break;
     }
   };
-  return /* @__PURE__ */ jsxs45(NavTabsContainer, { onKeyDown: handleOnKeyDown, role: "tablist", "aria-label": "Navigation tabs", children: [
-    /* @__PURE__ */ jsx65(Underline2, {}),
-    /* @__PURE__ */ jsx65(NavTabsContext_default.Provider, { value: contextValue, children })
+  return /* @__PURE__ */ jsxs46(NavTabsContainer, { onKeyDown: handleOnKeyDown, role: "tablist", "aria-label": "Navigation tabs", children: [
+    /* @__PURE__ */ jsx66(Underline2, {}),
+    /* @__PURE__ */ jsx66(NavTabsContext_default.Provider, { value: contextValue, children })
   ] });
 };
 DxcNavTabs.Tab = Tab_default;
 var NavTabs_default = DxcNavTabs;
 
 // src/number-input/NumberInput.tsx
-import { forwardRef as forwardRef11, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef15 } from "react";
+import { forwardRef as forwardRef11, useEffect as useEffect20, useMemo as useMemo14, useRef as useRef15 } from "react";
 import styled57 from "styled-components";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var NumberInputContainer = styled57.div`
   ${({ size }) => size === "fillParent" && "width: 100%;"}
 
@@ -10189,7 +10156,7 @@ var DxcNumberInput = forwardRef11(
     value
   }, ref) => {
     const numberInputRef = useRef15(null);
-    const contextValue = useMemo15(
+    const contextValue = useMemo14(
       () => ({
         maxNumber: max,
         minNumber: min,
@@ -10209,7 +10176,7 @@ var DxcNumberInput = forwardRef11(
         input?.removeEventListener("wheel", preventDefault);
       };
     }, []);
-    return /* @__PURE__ */ jsx66(NumberInputContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsx66(NumberInputContainer, { ref: numberInputRef, size, children: /* @__PURE__ */ jsx66(
+    return /* @__PURE__ */ jsx67(NumberInputContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsx67(NumberInputContainer, { ref: numberInputRef, size, children: /* @__PURE__ */ jsx67(
       TextInput_default,
       {
         label,
@@ -10239,9 +10206,9 @@ var DxcNumberInput = forwardRef11(
 var NumberInput_default = DxcNumberInput;
 
 // src/paragraph/Paragraph.tsx
-import { useContext as useContext28 } from "react";
-import styled58, { ThemeProvider as ThemeProvider8 } from "styled-components";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { useContext as useContext27 } from "react";
+import styled58, { ThemeProvider as ThemeProvider6 } from "styled-components";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Paragraph = styled58.p`
   display: ${(props) => props.theme.display};
   font-family: "Open Sans", sans-serif;
@@ -10258,14 +10225,14 @@ var Paragraph = styled58.p`
   margin: 0;
 `;
 function DxcParagraph({ children }) {
-  const colorsTheme = useContext28(HalstackContext);
-  return /* @__PURE__ */ jsx67(ThemeProvider8, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ jsx67(Paragraph, { children }) });
+  const colorsTheme = useContext27(HalstackContext);
+  return /* @__PURE__ */ jsx68(ThemeProvider6, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ jsx68(Paragraph, { children }) });
 }
 
 // src/password-input/PasswordInput.tsx
-import { forwardRef as forwardRef12, useContext as useContext29, useEffect as useEffect21, useRef as useRef16, useState as useState26 } from "react";
+import { forwardRef as forwardRef12, useContext as useContext28, useEffect as useEffect21, useRef as useRef16, useState as useState26 } from "react";
 import styled59 from "styled-components";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var setInputType = (type, element) => {
   element?.getElementsByTagName("input")[0]?.setAttribute("type", type);
 };
@@ -10300,7 +10267,7 @@ var DxcPasswordInput = forwardRef12(
   }, ref) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState26(false);
     const inputRef = useRef16(null);
-    const { passwordInput } = useContext29(HalstackLanguageContext);
+    const { passwordInput } = useContext28(HalstackLanguageContext);
     useEffect21(() => {
       (() => {
         if (isPasswordVisible) {
@@ -10316,7 +10283,7 @@ var DxcPasswordInput = forwardRef12(
         }
       })();
     }, [isPasswordVisible, passwordInput]);
-    return /* @__PURE__ */ jsx68(PasswordInput, { ref, size, children: /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx69(PasswordInput, { ref, size, children: /* @__PURE__ */ jsx69(
       TextInput_default,
       {
         label,
@@ -10370,7 +10337,7 @@ var auxTextStyles = css4`
 `;
 
 // src/progress-bar/ProgressBar.tsx
-import { jsx as jsx69, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
 var ProgressBarContainer = styled60.div`
   display: flex;
   flex-wrap: wrap;
@@ -10484,17 +10451,17 @@ var DxcProgressBar = ({
   useEffect22(() => {
     if (value != null) setInnerValue(value < 0 ? 0 : value > 100 ? 100 : value);
   }, [value]);
-  return /* @__PURE__ */ jsxs46(ProgressBarContainer, { overlay, children: [
-    overlay && /* @__PURE__ */ jsx69(Overlay4, {}),
-    /* @__PURE__ */ jsxs46(MainContainer3, { overlay, margin, children: [
-      /* @__PURE__ */ jsxs46(Flex_default, { justifyContent: "space-between", children: [
-        label && /* @__PURE__ */ jsx69(ProgressBarLabel, { id: labelId, overlay, children: label }),
-        innerValue != null && showValue && /* @__PURE__ */ jsxs46(ProgressBarProgress, { overlay, children: [
+  return /* @__PURE__ */ jsxs47(ProgressBarContainer, { overlay, children: [
+    overlay && /* @__PURE__ */ jsx70(Overlay4, {}),
+    /* @__PURE__ */ jsxs47(MainContainer3, { overlay, margin, children: [
+      /* @__PURE__ */ jsxs47(Flex_default, { justifyContent: "space-between", children: [
+        label && /* @__PURE__ */ jsx70(ProgressBarLabel, { id: labelId, overlay, children: label }),
+        innerValue != null && showValue && /* @__PURE__ */ jsxs47(ProgressBarProgress, { overlay, children: [
           innerValue,
           " %"
         ] })
       ] }),
-      /* @__PURE__ */ jsx69(
+      /* @__PURE__ */ jsx70(
         LinearProgress,
         {
           "aria-label": label ? void 0 : ariaLabel,
@@ -10505,7 +10472,7 @@ var DxcProgressBar = ({
           helperText,
           role: "progressbar",
           overlay,
-          children: /* @__PURE__ */ jsx69(
+          children: /* @__PURE__ */ jsx70(
             LinearProgressBar,
             {
               overlay,
@@ -10515,17 +10482,17 @@ var DxcProgressBar = ({
           )
         }
       ),
-      helperText && /* @__PURE__ */ jsx69(HelperText3, { overlay, children: helperText })
+      helperText && /* @__PURE__ */ jsx70(HelperText3, { overlay, children: helperText })
     ] })
   ] });
 };
 var ProgressBar_default = DxcProgressBar;
 
 // src/quick-nav/QuickNav.tsx
-import { useContext as useContext30 } from "react";
+import { useContext as useContext29 } from "react";
 import slugify from "slugify";
 import styled61 from "styled-components";
-import { jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs48 } from "react/jsx-runtime";
 var QuickNavContainer = styled61.div`
   display: flex;
   flex-direction: column;
@@ -10577,18 +10544,18 @@ var Link4 = styled61.a`
   }
 `;
 function DxcQuickNav({ links, title }) {
-  const translatedLabels = useContext30(HalstackLanguageContext);
-  return /* @__PURE__ */ jsxs47(QuickNavContainer, { children: [
-    /* @__PURE__ */ jsx70(DxcHeading, { level: 5, text: title ?? translatedLabels.quickNav.contentTitle }),
-    /* @__PURE__ */ jsx70(ListColumn, { children: links.map((link) => /* @__PURE__ */ jsxs47("li", { children: [
-      /* @__PURE__ */ jsx70(Link4, { href: `#${slugify(link.label, { lower: true })}`, children: /* @__PURE__ */ jsx70("span", { children: link.label }) }),
-      link.links?.length && /* @__PURE__ */ jsx70(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ jsx70("li", { children: /* @__PURE__ */ jsx70(
+  const translatedLabels = useContext29(HalstackLanguageContext);
+  return /* @__PURE__ */ jsxs48(QuickNavContainer, { children: [
+    /* @__PURE__ */ jsx71(DxcHeading, { level: 5, text: title ?? translatedLabels.quickNav.contentTitle }),
+    /* @__PURE__ */ jsx71(ListColumn, { children: links.map((link) => /* @__PURE__ */ jsxs48("li", { children: [
+      /* @__PURE__ */ jsx71(Link4, { href: `#${slugify(link.label, { lower: true })}`, children: /* @__PURE__ */ jsx71("span", { children: link.label }) }),
+      link.links?.length && /* @__PURE__ */ jsx71(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ jsx71("li", { children: /* @__PURE__ */ jsx71(
         Link4,
         {
           href: `#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
             lower: true
           })}`,
-          children: /* @__PURE__ */ jsx70("span", { children: sublink.label })
+          children: /* @__PURE__ */ jsx71("span", { children: sublink.label })
         }
       ) }, sublink.label)) })
     ] }, link.label)) })
@@ -10596,7 +10563,7 @@ function DxcQuickNav({ links, title }) {
 }
 
 // src/radio-group/RadioGroup.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback9, useContext as useContext31, useId as useId16, useMemo as useMemo16, useState as useState29 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback9, useContext as useContext30, useId as useId16, useMemo as useMemo15, useState as useState29 } from "react";
 import styled63 from "styled-components";
 
 // src/radio-group/RadioInput.tsx
@@ -10604,7 +10571,7 @@ import { memo as memo12, useEffect as useEffect23, useId as useId15, useRef as u
 import styled62 from "styled-components";
 
 // src/radio-group/utils.tsx
-import { jsx as jsx71, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs49 } from "react/jsx-runtime";
 function getRadioInputStyles(disabled, error, readOnly, status) {
   switch (true) {
     case disabled:
@@ -10618,15 +10585,15 @@ function getRadioInputStyles(disabled, error, readOnly, status) {
   }
 }
 var icons2 = {
-  checked: /* @__PURE__ */ jsxs48("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx71(
+  checked: /* @__PURE__ */ jsxs49("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx72(
       "path",
       {
         d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM5.00194 12C5.00194 15.8649 8.13508 18.9981 12 18.9981C15.8649 18.9981 18.9981 15.8649 18.9981 12C18.9981 8.13508 15.8649 5.00194 12 5.00194C8.13508 5.00194 5.00194 8.13508 5.00194 12Z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ jsx71(
+    /* @__PURE__ */ jsx72(
       "path",
       {
         d: "M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z",
@@ -10634,7 +10601,7 @@ var icons2 = {
       }
     )
   ] }),
-  unchecked: /* @__PURE__ */ jsx71("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx71(
+  unchecked: /* @__PURE__ */ jsx72("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx72(
     "path",
     {
       d: "M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM5.00194 12C5.00194 15.8649 8.13508 18.9981 12 18.9981C15.8649 18.9981 18.9981 15.8649 18.9981 12C18.9981 8.13508 15.8649 5.00194 12 5.00194C8.13508 5.00194 5.00194 8.13508 5.00194 12Z",
@@ -10644,7 +10611,7 @@ var icons2 = {
 };
 
 // src/radio-group/RadioInput.tsx
-import { jsx as jsx72, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
 var Label7 = styled62.span`
   color: ${({ disabled }) => disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)"};
   font-family: var(--typography-font-family);
@@ -10693,7 +10660,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
     onClick();
     document.activeElement !== ref.current && ref.current?.focus();
   };
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     RadioInputContainer,
     {
       disabled,
@@ -10701,7 +10668,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
       onClick: disabled ? void 0 : handleOnClick,
       readOnly,
       children: [
-        /* @__PURE__ */ jsx72(
+        /* @__PURE__ */ jsx73(
           RadioButton,
           {
             "aria-checked": checked,
@@ -10716,7 +10683,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
             children: checked ? icons2.checked : icons2.unchecked
           }
         ),
-        /* @__PURE__ */ jsx72(Label7, { disabled, id: radioLabelId, children: label })
+        /* @__PURE__ */ jsx73(Label7, { disabled, id: radioLabelId, children: label })
       ]
     }
   );
@@ -10724,7 +10691,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
 var RadioInput_default = memo12(RadioInput);
 
 // src/radio-group/RadioGroup.tsx
-import { jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
 var RadioGroupContainer = styled63.div`
   box-sizing: border-box;
   display: inline-flex;
@@ -10759,8 +10726,8 @@ var DxcRadioGroup = forwardRef13(
     const id = `radio-group-${useId16()}`;
     const labelId = `label-${id}`;
     const errorId = `error-${id}`;
-    const translatedLabels = useContext31(HalstackLanguageContext);
-    const innerOptions = useMemo16(
+    const translatedLabels = useContext30(HalstackLanguageContext);
+    const innerOptions = useMemo15(
       () => optional ? [
         ...options,
         {
@@ -10846,13 +10813,13 @@ var DxcRadioGroup = forwardRef13(
           break;
       }
     };
-    return /* @__PURE__ */ jsxs50(RadioGroupContainer, { ref, children: [
-      label && /* @__PURE__ */ jsxs50(Label_default, { disabled, hasMargin: !helperText, id: labelId, children: [
+    return /* @__PURE__ */ jsxs51(RadioGroupContainer, { ref, children: [
+      label && /* @__PURE__ */ jsxs51(Label_default, { disabled, hasMargin: !helperText, id: labelId, children: [
         label,
-        optional && /* @__PURE__ */ jsx73("span", { children: ` ${translatedLabels.formFields.optionalLabel}` })
+        optional && /* @__PURE__ */ jsx74("span", { children: ` ${translatedLabels.formFields.optionalLabel}` })
       ] }),
-      helperText && /* @__PURE__ */ jsx73(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ jsxs50(
+      helperText && /* @__PURE__ */ jsx74(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ jsxs51(
         RadioGroup,
         {
           "aria-disabled": disabled,
@@ -10869,8 +10836,8 @@ var DxcRadioGroup = forwardRef13(
           role: "radiogroup",
           stacking,
           children: [
-            /* @__PURE__ */ jsx73("input", { disabled, name, readOnly: true, type: "hidden", value: value ?? innerValue ?? "" }),
-            innerOptions.map((option, index) => /* @__PURE__ */ jsx73(
+            /* @__PURE__ */ jsx74("input", { disabled, name, readOnly: true, type: "hidden", value: value ?? innerValue ?? "" }),
+            innerOptions.map((option, index) => /* @__PURE__ */ jsx74(
               RadioInput_default,
               {
                 checked: (value ?? innerValue) === option.value,
@@ -10890,14 +10857,14 @@ var DxcRadioGroup = forwardRef13(
           ]
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx73(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx74(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
 var RadioGroup_default = DxcRadioGroup;
 
 // src/resultset-table/ResultsetTable.tsx
-import { useEffect as useEffect24, useMemo as useMemo17, useRef as useRef18, useState as useState30 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo16, useRef as useRef18, useState as useState30 } from "react";
 import styled64 from "styled-components";
 
 // src/resultset-table/utils.ts
@@ -10929,7 +10896,7 @@ var sortArray = (index, order, resultset) => resultset.slice().sort((element1, e
 });
 
 // src/resultset-table/ResultsetTable.tsx
-import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
 var ResultsetTableContainer = styled64.div`
   width: ${({ margin }) => calculateWidth10(margin)};
   margin: ${({ margin }) => margin && typeof margin !== "object" ? spaces[margin] : "0px"};
@@ -10967,17 +10934,17 @@ var DxcResultsetTable = ({
   const [sortColumnIndex, changeSortColumnIndex] = useState30(-1);
   const [sortOrder, changeSortOrder] = useState30("ascending");
   const prevRowCountRef = useRef18(rows.length);
-  const rowsWithIds = useMemo17(() => assignIdsToRows(rows), [rows]);
-  const minItemsPerPageIndex = useMemo17(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = useMemo17(
+  const rowsWithIds = useMemo16(() => assignIdsToRows(rows), [rows]);
+  const minItemsPerPageIndex = useMemo16(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
+  const maxItemsPerPageIndex = useMemo16(
     () => getMaxItemsPerPageIndex2(minItemsPerPageIndex, itemsPerPage, rows, page),
     [itemsPerPage, minItemsPerPageIndex, page, rows]
   );
-  const sortedResultset = useMemo17(
+  const sortedResultset = useMemo16(
     () => sortColumnIndex !== -1 ? sortArray(sortColumnIndex, sortOrder, rowsWithIds) : rowsWithIds,
     [sortColumnIndex, sortOrder, rowsWithIds]
   );
-  const filteredResultset = useMemo17(
+  const filteredResultset = useMemo16(
     () => sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1),
     [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]
   );
@@ -11005,13 +10972,13 @@ var DxcResultsetTable = ({
       prevRowCountRef.current = rows.length;
     }
   }, [hidePaginator, page, rows]);
-  return /* @__PURE__ */ jsxs51(ResultsetTableContainer, { margin, children: [
-    /* @__PURE__ */ jsxs51(Table_default, { mode, children: [
-      /* @__PURE__ */ jsx74("thead", { children: /* @__PURE__ */ jsx74("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsxs52(ResultsetTableContainer, { margin, children: [
+    /* @__PURE__ */ jsxs52(Table_default, { mode, children: [
+      /* @__PURE__ */ jsx75("thead", { children: /* @__PURE__ */ jsx75("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx75(
         "th",
         {
           "aria-sort": column.isSortable ? sortColumnIndex === index ? sortOrder : "none" : void 0,
-          children: /* @__PURE__ */ jsxs51(
+          children: /* @__PURE__ */ jsxs52(
             SortingHeader,
             {
               "aria-label": column.isSortable ? "Sort column" : void 0,
@@ -11025,8 +10992,8 @@ var DxcResultsetTable = ({
               role: column.isSortable ? "button" : void 0,
               tabIndex: column.isSortable ? tabIndex : -1,
               children: [
-                /* @__PURE__ */ jsx74("span", { children: column.displayValue }),
-                column.isSortable && /* @__PURE__ */ jsx74(
+                /* @__PURE__ */ jsx75("span", { children: column.displayValue }),
+                column.isSortable && /* @__PURE__ */ jsx75(
                   DxcIcon,
                   {
                     icon: sortColumnIndex === index ? sortOrder === "ascending" ? "arrow_upward" : "arrow_downward" : "unfold_more"
@@ -11038,9 +11005,9 @@ var DxcResultsetTable = ({
         },
         `tableHeader_${index}`
       )) }) }),
-      /* @__PURE__ */ jsx74("tbody", { children: filteredResultset.map((row) => /* @__PURE__ */ jsx74("tr", { children: row.cells.map((cellContent, cellIndex) => /* @__PURE__ */ jsx74("td", { children: cellContent.displayValue }, `resultSetTableCellContent_${cellIndex}`)) }, `resultSetTableCell_${row.id}`)) })
+      /* @__PURE__ */ jsx75("tbody", { children: filteredResultset.map((row) => /* @__PURE__ */ jsx75("tr", { children: row.cells.map((cellContent, cellIndex) => /* @__PURE__ */ jsx75("td", { children: cellContent.displayValue }, `resultSetTableCellContent_${cellIndex}`)) }, `resultSetTableCell_${row.id}`)) })
     ] }),
-    !hidePaginator && rows.length > itemsPerPage && /* @__PURE__ */ jsx74(
+    !hidePaginator && rows.length > itemsPerPage && /* @__PURE__ */ jsx75(
       Paginator_default,
       {
         currentPage: page,
@@ -11059,7 +11026,7 @@ DxcResultsetTable.ActionsCell = DxcActionsCell;
 var ResultsetTable_default = DxcResultsetTable;
 
 // src/slider/Slider.tsx
-import { forwardRef as forwardRef14, useId as useId17, useMemo as useMemo18, useState as useState31 } from "react";
+import { forwardRef as forwardRef14, useId as useId17, useMemo as useMemo17, useState as useState31 } from "react";
 import styled65, { css as css5 } from "styled-components";
 
 // src/slider/utils.ts
@@ -11094,7 +11061,7 @@ var roundUp = (target, step, min, max) => {
 };
 
 // src/slider/Slider.tsx
-import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
 var SliderContainer = styled65.div`
   display: flex;
   flex-direction: column;
@@ -11226,12 +11193,12 @@ var DxcSlider = forwardRef14(
     const labelId = `label-${useId17()}`;
     const [innerValue, setInnerValue] = useState31(defaultValue);
     const [inputValue, setInputValue] = useState31((value ?? defaultValue).toString());
-    const roundedUpValue = useMemo18(
+    const roundedUpValue = useMemo17(
       () => roundUp(value ?? innerValue, step, minValue, maxValue),
       [innerValue, maxValue, minValue, step, value]
     );
-    const minLabel = useMemo18(() => labelFormatCallback?.(minValue) ?? minValue, [labelFormatCallback, minValue]);
-    const maxLabel = useMemo18(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
+    const minLabel = useMemo17(() => labelFormatCallback?.(minValue) ?? minValue, [labelFormatCallback, minValue]);
+    const maxLabel = useMemo17(() => labelFormatCallback?.(maxValue) ?? maxValue, [labelFormatCallback, maxValue]);
     const changeValue = (newValue) => {
       if (showInput) setInputValue(newValue);
       const numberValue = Number(newValue);
@@ -11254,14 +11221,14 @@ var DxcSlider = forwardRef14(
       else if (textInputIntegerValue > maxValue) changeValue(maxValue.toString());
       else changeValue(roundUp(textInputIntegerValue, step, minValue, maxValue).toString());
     };
-    return /* @__PURE__ */ jsxs52(SliderContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsx75(Label_default, { id: labelId, disabled, children: label }),
-      helperText && /* @__PURE__ */ jsx75(HelperText_default, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs52(MainContainer4, { showInput, children: [
-        /* @__PURE__ */ jsxs52(LimitsValueGrid, { showLimitsValues, children: [
-          showLimitsValues && /* @__PURE__ */ jsx75(LimitLabel, { disabled, children: minLabel }),
-          /* @__PURE__ */ jsxs52(SliderInputContainer, { children: [
-            /* @__PURE__ */ jsx75(
+    return /* @__PURE__ */ jsxs53(SliderContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsx76(Label_default, { id: labelId, disabled, children: label }),
+      helperText && /* @__PURE__ */ jsx76(HelperText_default, { disabled, children: helperText }),
+      /* @__PURE__ */ jsxs53(MainContainer4, { showInput, children: [
+        /* @__PURE__ */ jsxs53(LimitsValueGrid, { showLimitsValues, children: [
+          showLimitsValues && /* @__PURE__ */ jsx76(LimitLabel, { disabled, children: minLabel }),
+          /* @__PURE__ */ jsxs53(SliderInputContainer, { children: [
+            /* @__PURE__ */ jsx76(
               SliderInput,
               {
                 "aria-label": label ? void 0 : ariaLabel,
@@ -11281,9 +11248,9 @@ var DxcSlider = forwardRef14(
                 value: roundedUpValue
               }
             ),
-            marks && /* @__PURE__ */ jsx75(TicksContainer, { children: Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => {
+            marks && /* @__PURE__ */ jsx76(TicksContainer, { children: Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => {
               const tick = minValue + index * step;
-              return /* @__PURE__ */ jsx75(
+              return /* @__PURE__ */ jsx76(
                 Tick,
                 {
                   currentTick: roundedUpValue === stepPrecision(tick, step),
@@ -11294,9 +11261,9 @@ var DxcSlider = forwardRef14(
               );
             }) })
           ] }),
-          showLimitsValues && /* @__PURE__ */ jsx75(LimitLabel, { disabled, children: maxLabel })
+          showLimitsValues && /* @__PURE__ */ jsx76(LimitLabel, { disabled, children: maxLabel })
         ] }),
-        showInput && /* @__PURE__ */ jsx75(
+        showInput && /* @__PURE__ */ jsx76(
           NumberInput_default,
           {
             disabled,
@@ -11316,9 +11283,9 @@ var DxcSlider = forwardRef14(
 var Slider_default = DxcSlider;
 
 // src/spinner/Spinner.tsx
-import { useId as useId18, useMemo as useMemo19, useState as useState32 } from "react";
+import { useId as useId18, useMemo as useMemo18, useState as useState32 } from "react";
 import styled66 from "styled-components";
-import { jsx as jsx76, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
 var SpinnerContainer = styled66.div`
   ${({ mode }) => mode === "overlay" && `
       position: fixed;
@@ -11459,15 +11426,15 @@ var DxcSpinner = ({
   value
 }) => {
   const labelId = useId18();
-  const determined = useMemo19(() => value != null && value >= 0 && value <= 100, [value]);
+  const determined = useMemo18(() => value != null && value >= 0 && value <= 100, [value]);
   const [hasTooltip, setHasTooltip] = useState32(false);
   const handleLabelOnMouseEnter = (event) => {
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
   };
-  return /* @__PURE__ */ jsx76(SpinnerContainer, { margin, mode, children: /* @__PURE__ */ jsxs53(MainContainer5, { mode, children: [
-    mode === "overlay" && /* @__PURE__ */ jsx76(Overlay5, {}),
-    /* @__PURE__ */ jsx76(SVGTotalTrack, { viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx77(SpinnerContainer, { margin, mode, children: /* @__PURE__ */ jsxs54(MainContainer5, { mode, children: [
+    mode === "overlay" && /* @__PURE__ */ jsx77(Overlay5, {}),
+    /* @__PURE__ */ jsx77(SVGTotalTrack, { viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ jsx77(
       TotalTrack,
       {
         cx: mode === "small" ? "8" : "70",
@@ -11476,7 +11443,7 @@ var DxcSpinner = ({
         r: mode === "small" ? "6" : "65"
       }
     ) }),
-    /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx77(
       Spinner,
       {
         "aria-label": !label || mode === "small" ? ariaLabel : void 0,
@@ -11485,7 +11452,7 @@ var DxcSpinner = ({
         "aria-valuemin": determined ? 0 : void 0,
         "aria-valuenow": determined && showValue ? value : void 0,
         role: determined ? "progressbar" : "status",
-        children: /* @__PURE__ */ jsx76(SVGSpinner, { determined, viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ jsx76(
+        children: /* @__PURE__ */ jsx77(SVGSpinner, { determined, viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ jsx77(
           CircleSpinner,
           {
             cx: mode === "small" ? "8" : "70",
@@ -11499,9 +11466,9 @@ var DxcSpinner = ({
         ) })
       }
     ),
-    mode !== "small" && /* @__PURE__ */ jsx76(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ jsxs53(Labels, { mode, children: [
-      label && /* @__PURE__ */ jsx76("span", { id: labelId, onMouseEnter: handleLabelOnMouseEnter, children: label }),
-      (value || value === 0) && showValue && /* @__PURE__ */ jsxs53("strong", { children: [
+    mode !== "small" && /* @__PURE__ */ jsx77(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ jsxs54(Labels, { mode, children: [
+      label && /* @__PURE__ */ jsx77("span", { id: labelId, onMouseEnter: handleLabelOnMouseEnter, children: label }),
+      (value || value === 0) && showValue && /* @__PURE__ */ jsxs54("strong", { children: [
         value,
         "%"
       ] })
@@ -11512,7 +11479,7 @@ var Spinner_default = DxcSpinner;
 
 // src/status-light/StatusLight.tsx
 import styled67 from "styled-components";
-import { jsx as jsx77, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
 var getModeColor = (mode) => {
   switch (mode) {
     case "default":
@@ -11569,16 +11536,16 @@ var Label8 = styled67.span`
   white-space: nowrap;
 `;
 function DxcStatusLight({ label, mode = "default", size = "medium" }) {
-  return /* @__PURE__ */ jsxs54(StatusLightContainer, { role: "status", size, children: [
-    /* @__PURE__ */ jsx77(Dot, { mode, size, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx77(Label8, { mode, size, children: label })
+  return /* @__PURE__ */ jsxs55(StatusLightContainer, { role: "status", size, children: [
+    /* @__PURE__ */ jsx78(Dot, { mode, size, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx78(Label8, { mode, size, children: label })
   ] });
 }
 
 // src/switch/Switch.tsx
-import { forwardRef as forwardRef15, useContext as useContext32, useState as useState33 } from "react";
+import { forwardRef as forwardRef15, useContext as useContext31, useState as useState33 } from "react";
 import styled68 from "styled-components";
-import { jsx as jsx78, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
 var sizes7 = {
   small: "60px",
   medium: "240px",
@@ -11672,7 +11639,7 @@ var DxcSwitch = forwardRef15(
     value
   }, ref) => {
     const [innerChecked, setInnerChecked] = useState33(defaultChecked);
-    const translatedLabels = useContext32(HalstackLanguageContext);
+    const translatedLabels = useContext31(HalstackLanguageContext);
     const handleOnChange = () => {
       if (checked == null) setInnerChecked((currentInnerChecked) => !currentInnerChecked);
       onChange?.(!(checked ?? innerChecked));
@@ -11689,7 +11656,7 @@ var DxcSwitch = forwardRef15(
           break;
       }
     };
-    return /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsxs56(
       SwitchContainer,
       {
         "aria-checked": checked ?? innerChecked,
@@ -11705,12 +11672,12 @@ var DxcSwitch = forwardRef15(
         size,
         tabIndex: disabled ? -1 : tabIndex,
         children: [
-          label && /* @__PURE__ */ jsxs55(LabelContainer3, { disabled, labelPosition, children: [
-            /* @__PURE__ */ jsx78(Label9, { children: label }),
-            optional && /* @__PURE__ */ jsx78(OptionalLabel2, { disabled, children: translatedLabels.formFields.optionalLabel })
+          label && /* @__PURE__ */ jsxs56(LabelContainer3, { disabled, labelPosition, children: [
+            /* @__PURE__ */ jsx79(Label9, { children: label }),
+            optional && /* @__PURE__ */ jsx79(OptionalLabel2, { disabled, children: translatedLabels.formFields.optionalLabel })
           ] }),
-          /* @__PURE__ */ jsx78(Switch, { checked: checked ?? innerChecked, disabled }),
-          /* @__PURE__ */ jsx78(
+          /* @__PURE__ */ jsx79(Switch, { checked: checked ?? innerChecked, disabled }),
+          /* @__PURE__ */ jsx79(
             "input",
             {
               "aria-hidden": true,
@@ -11735,9 +11702,9 @@ var Switch_default = DxcSwitch;
 import {
   Children as Children5,
   isValidElement as isValidElement2,
-  useContext as useContext35,
+  useContext as useContext34,
   useLayoutEffect as useLayoutEffect5,
-  useMemo as useMemo21,
+  useMemo as useMemo20,
   useRef as useRef21,
   useState as useState35
 } from "react";
@@ -11748,9 +11715,9 @@ import { createContext as createContext10 } from "react";
 var TabsContext_default = createContext10(null);
 
 // src/tabs/Tab.tsx
-import { forwardRef as forwardRef16, useContext as useContext33, useEffect as useEffect25, useRef as useRef19 } from "react";
+import { forwardRef as forwardRef16, useContext as useContext32, useEffect as useEffect25, useRef as useRef19 } from "react";
 import styled69 from "styled-components";
-import { jsx as jsx79, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs57 } from "react/jsx-runtime";
 var sharedTabStyles = `
   background-color: var(--color-bg-neutral-lightest);
   color: var(--color-fg-neutral-stronger);
@@ -11821,7 +11788,7 @@ var Underline3 = styled69.span`
   background-color: ${({ active }) => active ? "var(--border-color-primary-stronger)" : "var(--border-color-neutral-medium)"};
 `;
 var DxcTab = forwardRef16(
-  ({ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId }, ref) => {
+  ({ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId = label }, ref) => {
     const {
       activeTabId,
       focusedTabId,
@@ -11829,7 +11796,7 @@ var DxcTab = forwardRef16(
       isControlled,
       setActiveTabId,
       tabIndex = 0
-    } = useContext33(TabsContext_default) ?? {};
+    } = useContext32(TabsContext_default) ?? {};
     const tabRef = useRef19(null);
     const handleOnKeyDown = (event) => {
       switch (event.key) {
@@ -11846,9 +11813,9 @@ var DxcTab = forwardRef16(
       if (focusedTabId === tabId) tabRef?.current?.focus();
     }, [focusedTabId, tabId]);
     useEffect25(() => {
-      if (active) setActiveTabId?.(tabId);
+      if (active) setActiveTabId?.(tabId ?? "");
     }, [active, tabId, setActiveTabId]);
-    return /* @__PURE__ */ jsx79(Tooltip, { label: title, children: /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsx80(Tooltip, { label: title, children: /* @__PURE__ */ jsxs57(
       Tab2,
       {
         "aria-selected": activeTabId === tabId,
@@ -11856,7 +11823,9 @@ var DxcTab = forwardRef16(
         hasLabelAndIcon: Boolean(icon && label),
         iconPosition,
         onClick: () => {
-          if (!isControlled) setActiveTabId?.(tabId);
+          if (!isControlled) {
+            setActiveTabId?.(tabId ?? "");
+          }
           onClick?.();
         },
         onKeyDown: handleOnKeyDown,
@@ -11874,12 +11843,13 @@ var DxcTab = forwardRef16(
         role: "tab",
         tabIndex: activeTabId === label && !disabled ? tabIndex : -1,
         type: "button",
+        "aria-label": label ?? tabId ?? "tab",
         children: [
-          /* @__PURE__ */ jsxs56(LabelIconContainer, { iconPosition, children: [
-            icon && /* @__PURE__ */ jsx79(IconContainer8, { children: typeof icon === "string" ? /* @__PURE__ */ jsx79(DxcIcon, { icon }) : icon }),
-            /* @__PURE__ */ jsx79(Label10, { children: label })
+          /* @__PURE__ */ jsxs57(LabelIconContainer, { iconPosition, children: [
+            icon && /* @__PURE__ */ jsx80(IconContainer8, { children: typeof icon === "string" ? /* @__PURE__ */ jsx80(DxcIcon, { icon }) : icon }),
+            label && /* @__PURE__ */ jsx80(Label10, { children: label })
           ] }),
-          !disabled && notificationNumber && /* @__PURE__ */ jsx79(BadgeContainer2, { hasLabelAndIcon: Boolean(icon && label), iconPosition, children: /* @__PURE__ */ jsx79(
+          !disabled && notificationNumber && /* @__PURE__ */ jsx80(BadgeContainer2, { hasLabelAndIcon: Boolean(icon && label), iconPosition, children: /* @__PURE__ */ jsx80(
             Badge_default,
             {
               label: typeof notificationNumber === "number" ? notificationNumber : void 0,
@@ -11887,7 +11857,7 @@ var DxcTab = forwardRef16(
               size: "small"
             }
           ) }),
-          /* @__PURE__ */ jsx79(Underline3, { active: activeTabId === tabId })
+          /* @__PURE__ */ jsx80(Underline3, { active: activeTabId === tabId })
         ]
       }
     ) });
@@ -11896,15 +11866,15 @@ var DxcTab = forwardRef16(
 var Tab_default2 = DxcTab;
 
 // src/tabs/TabsLegacy.tsx
-import { useCallback as useCallback10, useContext as useContext34, useEffect as useEffect26, useMemo as useMemo20, useRef as useRef20, useState as useState34 } from "react";
-import styled71, { ThemeProvider as ThemeProvider9 } from "styled-components";
+import { useCallback as useCallback10, useContext as useContext33, useEffect as useEffect26, useMemo as useMemo19, useRef as useRef20, useState as useState34 } from "react";
+import styled71, { ThemeProvider as ThemeProvider7 } from "styled-components";
 
 // src/tabs/TabLegacy.tsx
 import { forwardRef as forwardRef17, memo as memo13 } from "react";
 import styled70 from "styled-components";
-import { jsx as jsx80, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs58 } from "react/jsx-runtime";
 var Tab3 = forwardRef17(
-  ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ jsxs57(
+  ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ jsxs58(
     TabContainer2,
     {
       role: "tab",
@@ -11925,7 +11895,7 @@ var Tab3 = forwardRef17(
         onMouseLeave();
       },
       children: [
-        /* @__PURE__ */ jsxs57(
+        /* @__PURE__ */ jsxs58(
           MainLabelContainer,
           {
             notificationNumber: tab.notificationNumber,
@@ -11933,12 +11903,12 @@ var Tab3 = forwardRef17(
             iconPosition,
             disabled: tab.isDisabled,
             children: [
-              tab.icon && /* @__PURE__ */ jsx80(TabIconContainer, { hasLabelAndIcon, iconPosition, children: typeof tab.icon === "string" ? /* @__PURE__ */ jsx80(DxcIcon, { icon: tab.icon }) : tab.icon }),
-              /* @__PURE__ */ jsx80(LabelContainer4, { disabled: tab.isDisabled, active, children: tab.label })
+              tab.icon && /* @__PURE__ */ jsx81(TabIconContainer, { hasLabelAndIcon, iconPosition, children: typeof tab.icon === "string" ? /* @__PURE__ */ jsx81(DxcIcon, { icon: tab.icon }) : tab.icon }),
+              /* @__PURE__ */ jsx81(LabelContainer4, { disabled: tab.isDisabled, active, children: tab.label })
             ]
           }
         ),
-        tab.notificationNumber && !tab.isDisabled && /* @__PURE__ */ jsx80(BadgeContainer3, { hasLabelAndIcon, iconPosition, children: /* @__PURE__ */ jsx80(
+        tab.notificationNumber && !tab.isDisabled && /* @__PURE__ */ jsx81(BadgeContainer3, { hasLabelAndIcon, iconPosition, children: /* @__PURE__ */ jsx81(
           Badge_default,
           {
             mode: "notification",
@@ -12050,7 +12020,7 @@ var TabIconContainer = styled70.div`
 var TabLegacy_default = memo13(Tab3);
 
 // src/tabs/TabsLegacy.tsx
-import { jsx as jsx81, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs59 } from "react/jsx-runtime";
 var useResize = (refTabList) => {
   const [viewWidth, setViewWidth] = useState34(0);
   const handleWindowSizeChange = useCallback10(() => {
@@ -12075,7 +12045,7 @@ var DxcTabs = ({
   iconPosition = "top",
   tabIndex = 0
 }) => {
-  const colorsTheme = useContext34(HalstackContext);
+  const colorsTheme = useContext33(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] = useState34(
@@ -12094,8 +12064,8 @@ var DxcTabs = ({
   const refTabs = useRef20([]);
   const refTabList = useRef20(null);
   const viewWidth = useResize(refTabList);
-  const translatedLabels = useContext34(HalstackLanguageContext);
-  const enabledIndicator = useMemo20(() => viewWidth < totalTabsWidth, [viewWidth]);
+  const translatedLabels = useContext33(HalstackLanguageContext);
+  const enabledIndicator = useMemo19(() => viewWidth < totalTabsWidth, [viewWidth]);
   useEffect26(() => {
     if (activeTabIndex != null || innerActiveTabIndex != null) {
       const sumWidth = refTabs.current?.reduce((count, obj) => count + obj.offsetWidth, 0);
@@ -12247,10 +12217,10 @@ var DxcTabs = ({
   };
   const isTabActive = (index) => activeTabIndex != null && activeTabIndex >= 0 ? activeTabIndex === index : innerActiveTabIndex === index;
   const isActiveIndicatorDisabled = firstFocus === -1 || tabs != null && activeTabIndex !== void 0 && activeTabIndex >= 0 && !!tabs[activeTabIndex]?.isDisabled;
-  return /* @__PURE__ */ jsx81(ThemeProvider9, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs58(TabsContainer, { margin, children: [
-    /* @__PURE__ */ jsx81(Underline4, {}),
-    /* @__PURE__ */ jsxs58(Tabs, { hasLabelAndIcon, iconPosition, children: [
-      /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(ThemeProvider7, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs59(TabsContainer, { margin, children: [
+    /* @__PURE__ */ jsx82(Underline4, {}),
+    /* @__PURE__ */ jsxs59(Tabs, { hasLabelAndIcon, iconPosition, children: [
+      /* @__PURE__ */ jsx82(
         ScrollIndicator,
         {
           onClick: scrollLeft,
@@ -12259,11 +12229,11 @@ var DxcTabs = ({
           "aria-label": translatedLabels.tabs.scrollLeft,
           tabIndex: scrollLeftEnabled ? tabIndex : -1,
           minHeightTabs,
-          children: /* @__PURE__ */ jsx81(DxcIcon, { icon: "keyboard_arrow_left" })
+          children: /* @__PURE__ */ jsx82(DxcIcon, { icon: "keyboard_arrow_left" })
         }
       ),
-      /* @__PURE__ */ jsx81(TabsContent, { children: /* @__PURE__ */ jsxs58(TabsContentScroll, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
-        /* @__PURE__ */ jsx81(TabList, { role: "tablist", onKeyDown: handleOnKeyDown, minHeightTabs, children: tabs?.map((tab, i) => /* @__PURE__ */ jsx81(
+      /* @__PURE__ */ jsx82(TabsContent, { children: /* @__PURE__ */ jsxs59(TabsContentScroll, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
+        /* @__PURE__ */ jsx82(TabList, { role: "tablist", onKeyDown: handleOnKeyDown, minHeightTabs, children: tabs?.map((tab, i) => /* @__PURE__ */ jsx82(
           TabLegacy_default,
           {
             tab,
@@ -12288,7 +12258,7 @@ var DxcTabs = ({
           },
           `tab-${i}`
         )) }),
-        /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82(
           ActiveIndicator,
           {
             tabWidth: activeIndicatorWidth,
@@ -12297,7 +12267,7 @@ var DxcTabs = ({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx81(
+      /* @__PURE__ */ jsx82(
         ScrollIndicator,
         {
           onClick: scrollRight,
@@ -12306,7 +12276,7 @@ var DxcTabs = ({
           "aria-label": translatedLabels.tabs.scrollRight,
           tabIndex: scrollRightEnabled ? tabIndex : -1,
           minHeightTabs,
-          children: /* @__PURE__ */ jsx81(DxcIcon, { icon: "keyboard_arrow_right" })
+          children: /* @__PURE__ */ jsx82(DxcIcon, { icon: "keyboard_arrow_right" })
         }
       )
     ] })
@@ -12432,7 +12402,7 @@ var getPreviousTabIndex2 = (array, initialIndex) => {
 };
 
 // src/tabs/Tabs.tsx
-import { Fragment as Fragment14, jsx as jsx82, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
 var TabsContainer2 = styled72.div`
   position: relative;
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -12500,7 +12470,7 @@ var DxcTabs2 = ({
   tabIndex = 0,
   tabs
 }) => {
-  const childrenArray = useMemo21(
+  const childrenArray = useMemo20(
     () => Children5.toArray(children),
     [children]
   );
@@ -12511,7 +12481,7 @@ var DxcTabs2 = ({
     const initialActiveTab = hasActiveChild ? childrenArray.find(
       (child) => isValidElement2(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     ) : childrenArray.find((child) => isValidElement2(child) && !child.props.disabled);
-    return isValidElement2(initialActiveTab) ? initialActiveTab.props.tabId : "";
+    return isValidElement2(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
   const [countClick, setCountClick] = useState35(0);
   const [innerFocusIndex, setInnerFocusIndex] = useState35(null);
@@ -12520,13 +12490,13 @@ var DxcTabs2 = ({
   const [translateScroll, setTranslateScroll] = useState35(0);
   const [totalTabsWidth, setTotalTabsWidth] = useState35(0);
   const refTabList = useRef21(null);
-  const translatedLabels = useContext35(HalstackLanguageContext);
+  const translatedLabels = useContext34(HalstackLanguageContext);
   const viewWidth = useWidth_default(refTabList.current);
-  const contextValue = useMemo21(() => {
+  const contextValue = useMemo20(() => {
     const focusedChild = innerFocusIndex != null ? childrenArray[innerFocusIndex] : null;
     return {
       activeTabId,
-      focusedTabId: isValidElement2(focusedChild) ? focusedChild.props.tabId : "",
+      focusedTabId: isValidElement2(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
       iconPosition,
       isControlled: childrenArray.some((child) => isValidElement2(child) && typeof child.props.active !== "undefined"),
       setActiveTabId,
@@ -12564,7 +12534,9 @@ var DxcTabs2 = ({
     setCountClick(moveX);
   };
   const handleOnKeyDown = (event) => {
-    const activeTab = childrenArray.findIndex((child) => child.props.tabId === activeTabId);
+    const activeTab = childrenArray.findIndex(
+      (child) => (child.props.label ?? child.props.tabId) === activeTabId
+    );
     switch (event.key) {
       case "Left":
       case "ArrowLeft":
@@ -12595,21 +12567,21 @@ var DxcTabs2 = ({
         return total;
       });
   }, []);
-  return children ? /* @__PURE__ */ jsxs59(Fragment14, { children: [
-    /* @__PURE__ */ jsxs59(TabsContainer2, { margin, children: [
-      /* @__PURE__ */ jsx82(Underline5, {}),
-      /* @__PURE__ */ jsxs59(Tabs2, { children: [
-        viewWidth < totalTabsWidth && /* @__PURE__ */ jsx82(
+  return children ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
+    /* @__PURE__ */ jsxs60(TabsContainer2, { margin, children: [
+      /* @__PURE__ */ jsx83(Underline5, {}),
+      /* @__PURE__ */ jsxs60(Tabs2, { children: [
+        viewWidth < totalTabsWidth && /* @__PURE__ */ jsx83(
           ScrollIndicatorButton,
           {
             "aria-label": translatedLabels.tabs.scrollLeft,
             disabled: !scrollLeftEnabled,
             onClick: scrollLeft,
             tabIndex: scrollLeftEnabled ? tabIndex : -1,
-            children: /* @__PURE__ */ jsx82(DxcIcon, { icon: "keyboard_arrow_left" })
+            children: /* @__PURE__ */ jsx83(DxcIcon, { icon: "keyboard_arrow_left" })
           }
         ),
-        /* @__PURE__ */ jsx82(TabsContent2, { children: /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83(TabsContent2, { children: /* @__PURE__ */ jsx83(
           ScrollableTabsList,
           {
             enabled: viewWidth < totalTabsWidth,
@@ -12618,17 +12590,17 @@ var DxcTabs2 = ({
             ref: refTabList,
             role: "tablist",
             translateScroll,
-            children: /* @__PURE__ */ jsx82(TabsContext_default.Provider, { value: contextValue, children })
+            children: /* @__PURE__ */ jsx83(TabsContext_default.Provider, { value: contextValue, children })
           }
         ) }),
-        viewWidth < totalTabsWidth && /* @__PURE__ */ jsx82(
+        viewWidth < totalTabsWidth && /* @__PURE__ */ jsx83(
           ScrollIndicatorButton,
           {
             "aria-label": translatedLabels.tabs.scrollRight,
             disabled: !scrollRightEnabled,
             onClick: scrollRight,
             tabIndex: scrollRightEnabled ? tabIndex : -1,
-            children: /* @__PURE__ */ jsx82(DxcIcon, { icon: "keyboard_arrow_right" })
+            children: /* @__PURE__ */ jsx83(DxcIcon, { icon: "keyboard_arrow_right" })
           }
         )
       ] })
@@ -12637,7 +12609,7 @@ var DxcTabs2 = ({
       children,
       (child) => isValidElement2(child) && child.props.tabId === activeTabId ? child.props.children : null
     )
-  ] }) : tabs != null && /* @__PURE__ */ jsx82(
+  ] }) : tabs != null && /* @__PURE__ */ jsx83(
     TabsLegacy_default,
     {
       activeTabIndex,
@@ -12655,9 +12627,9 @@ DxcTabs2.Tab = Tab_default2;
 var Tabs_default = DxcTabs2;
 
 // src/textarea/Textarea.tsx
-import { forwardRef as forwardRef18, useContext as useContext36, useEffect as useEffect27, useId as useId19, useRef as useRef22, useState as useState36 } from "react";
+import { forwardRef as forwardRef18, useContext as useContext35, useEffect as useEffect27, useId as useId19, useRef as useRef22, useState as useState36 } from "react";
 import styled73 from "styled-components";
-import { jsx as jsx83, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs61 } from "react/jsx-runtime";
 var sizes8 = {
   small: "240px",
   medium: "360px",
@@ -12723,7 +12695,7 @@ var DxcTextarea = forwardRef18(
     const [innerValue, setInnerValue] = useState36(defaultValue);
     const textareaId = `textarea-${useId19()}`;
     const errorId = `error-${textareaId}`;
-    const translatedLabels = useContext36(HalstackLanguageContext);
+    const translatedLabels = useContext35(HalstackLanguageContext);
     const textareaRef = useRef22(null);
     const prevValueRef = useRef22(null);
     const isLengthOutOfRange = (value2) => value2 !== "" && minLength && maxLength && (value2.length < minLength || value2.length > maxLength);
@@ -12778,14 +12750,14 @@ var DxcTextarea = forwardRef18(
         prevValueRef.current = value ?? innerValue;
       }
     }, [innerValue, rows, value, verticalGrow]);
-    return /* @__PURE__ */ jsxs60(TextareaContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs60(Label_default, { disabled, hasMargin: !helperText, htmlFor: textareaId, children: [
+    return /* @__PURE__ */ jsxs61(TextareaContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsxs61(Label_default, { disabled, hasMargin: !helperText, htmlFor: textareaId, children: [
         label,
         " ",
-        optional && /* @__PURE__ */ jsx83("span", { children: translatedLabels.formFields.optionalLabel })
+        optional && /* @__PURE__ */ jsx84("span", { children: translatedLabels.formFields.optionalLabel })
       ] }),
-      helperText && /* @__PURE__ */ jsx83(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ jsx83(
+      helperText && /* @__PURE__ */ jsx84(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ jsx84(
         Textarea,
         {
           "aria-errormessage": error ? errorId : void 0,
@@ -12810,19 +12782,19 @@ var DxcTextarea = forwardRef18(
           verticalGrow
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx83(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx84(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
 var Textarea_default = DxcTextarea;
 
 // src/toast/ToastsQueue.tsx
-import { useCallback as useCallback12, useEffect as useEffect29, useMemo as useMemo22, useState as useState38 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect29, useMemo as useMemo21, useState as useState38 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import styled75 from "styled-components";
 
 // src/toast/Toast.tsx
-import { memo as memo15, useContext as useContext37, useState as useState37 } from "react";
+import { memo as memo15, useContext as useContext36, useState as useState37 } from "react";
 import styled74, { keyframes } from "styled-components";
 
 // src/utils/useTimeout.ts
@@ -12887,7 +12859,7 @@ function generateUniqueToastId(toasts) {
 
 // src/toast/ToastIcon.tsx
 import { memo as memo14 } from "react";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var ToastIcon = memo14(
   ({
     icon,
@@ -12895,15 +12867,15 @@ var ToastIcon = memo14(
     loading,
     semantic
   }) => {
-    if (semantic === "default") return typeof icon === "string" ? /* @__PURE__ */ jsx84(DxcIcon, { icon }) : icon;
-    else if (semantic === "info" && loading) return /* @__PURE__ */ jsx84(Spinner_default, { inheritColor: true, mode: "small" });
-    else return !hideSemanticIcon && /* @__PURE__ */ jsx84(DxcIcon, { icon: getSemantic(semantic).icon });
+    if (semantic === "default") return typeof icon === "string" ? /* @__PURE__ */ jsx85(DxcIcon, { icon }) : icon;
+    else if (semantic === "info" && loading) return /* @__PURE__ */ jsx85(Spinner_default, { inheritColor: true, mode: "small" });
+    else return !hideSemanticIcon && /* @__PURE__ */ jsx85(DxcIcon, { icon: getSemantic(semantic).icon });
   }
 );
 var ToastIcon_default = ToastIcon;
 
 // src/toast/Toast.tsx
-import { jsx as jsx85, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
 var fadeInUp = keyframes`
   0% {
     transform: translateY(100%);
@@ -12976,7 +12948,7 @@ var DxcToast = ({
   semantic
 }) => {
   const [isClosing, setIsClosing] = useState37(false);
-  const translatedLabels = useContext37(HalstackLanguageContext);
+  const translatedLabels = useContext36(HalstackLanguageContext);
   const clearClosingAnimationTimer = useTimeout(
     () => {
       setIsClosing(true);
@@ -12989,13 +12961,13 @@ var DxcToast = ({
     },
     loading ? void 0 : duration
   );
-  return /* @__PURE__ */ jsxs61(Toast, { isClosing, role: "status", semantic, children: [
-    /* @__PURE__ */ jsxs61(ContentContainer2, { loading, semantic, children: [
-      /* @__PURE__ */ jsx85(ToastIcon_default, { hideSemanticIcon, icon, loading, semantic }),
-      /* @__PURE__ */ jsx85(Message2, { children: message })
+  return /* @__PURE__ */ jsxs62(Toast, { isClosing, role: "status", semantic, children: [
+    /* @__PURE__ */ jsxs62(ContentContainer2, { loading, semantic, children: [
+      /* @__PURE__ */ jsx86(ToastIcon_default, { hideSemanticIcon, icon, loading, semantic }),
+      /* @__PURE__ */ jsx86(Message2, { children: message })
     ] }),
-    /* @__PURE__ */ jsxs61(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-xs)", children: [
-      action && /* @__PURE__ */ jsx85(
+    /* @__PURE__ */ jsxs62(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-xs)", children: [
+      action && /* @__PURE__ */ jsx86(
         Button_default,
         {
           icon: action.icon,
@@ -13006,7 +12978,7 @@ var DxcToast = ({
           size: { height: "small" }
         }
       ),
-      /* @__PURE__ */ jsx85(
+      /* @__PURE__ */ jsx86(
         ActionIcon_default,
         {
           icon: "clear",
@@ -13033,7 +13005,7 @@ import { createContext as createContext11 } from "react";
 var ToastContext_default = createContext11(null);
 
 // src/toast/ToastsQueue.tsx
-import { jsx as jsx86, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs63 } from "react/jsx-runtime";
 var ToastsQueue = styled75.section`
   box-sizing: border-box;
   position: fixed;
@@ -13054,7 +13026,7 @@ var ToastsQueue = styled75.section`
 function DxcToastsQueue({ children, duration = 3e3 }) {
   const [toasts, setToasts] = useState38([]);
   const [isMounted, setIsMounted] = useState38(false);
-  const adjustedDuration = useMemo22(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
+  const adjustedDuration = useMemo21(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
   const remove = useCallback12((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
   }, []);
@@ -13069,9 +13041,9 @@ function DxcToastsQueue({ children, duration = 3e3 }) {
   useEffect29(() => {
     setIsMounted(true);
   }, []);
-  return /* @__PURE__ */ jsxs62(ToastContext_default.Provider, { value: add, children: [
+  return /* @__PURE__ */ jsxs63(ToastContext_default.Provider, { value: add, children: [
     isMounted && createPortal3(
-      /* @__PURE__ */ jsx86(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx87(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ jsx87(
         Toast_default,
         {
           duration: adjustedDuration,
@@ -13091,7 +13063,7 @@ function DxcToastsQueue({ children, duration = 3e3 }) {
 // src/toggle-group/ToggleGroup.tsx
 import { useState as useState39 } from "react";
 import styled76 from "styled-components";
-import { jsx as jsx87, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs64 } from "react/jsx-runtime";
 var ToggleGroup = styled76.div`
   display: flex;
   &[aria-orientation="vertical"] {
@@ -13171,9 +13143,9 @@ function DxcToggleGroup({
         break;
     }
   };
-  return /* @__PURE__ */ jsx87(ToggleGroup, { "aria-orientation": orientation, margin, role: "toolbar", children: options.map((option, i) => {
+  return /* @__PURE__ */ jsx88(ToggleGroup, { "aria-orientation": orientation, margin, role: "toolbar", children: options.map((option, i) => {
     const selected = !option.disabled && isToggleButtonSelected(multiple, option.value, value ?? selectedValue);
-    return /* @__PURE__ */ jsx87(Tooltip, { label: option.title, children: /* @__PURE__ */ jsxs63(
+    return /* @__PURE__ */ jsx88(Tooltip, { label: option.title, children: /* @__PURE__ */ jsxs64(
       ToggleButton,
       {
         "aria-label": option.title,
@@ -13189,8 +13161,8 @@ function DxcToggleGroup({
         selected,
         tabIndex: !option.disabled ? tabIndex : -1,
         children: [
-          option.icon && /* @__PURE__ */ jsx87(IconContainer9, { children: typeof option.icon === "string" ? /* @__PURE__ */ jsx87(DxcIcon, { icon: option.icon }) : option.icon }),
-          option.label && /* @__PURE__ */ jsx87("span", { children: option.label })
+          option.icon && /* @__PURE__ */ jsx88(IconContainer9, { children: typeof option.icon === "string" ? /* @__PURE__ */ jsx88(DxcIcon, { icon: option.icon }) : option.icon }),
+          option.label && /* @__PURE__ */ jsx88("span", { children: option.label })
         ]
       }
     ) }, `toggle-${i}-${option.label}`);
@@ -13202,16 +13174,16 @@ import { useState as useState40 } from "react";
 import styled77 from "styled-components";
 
 // src/wizard/Icons.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var icons3 = {
-  valid: /* @__PURE__ */ jsx88("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx88(
+  valid: /* @__PURE__ */ jsx89("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx89(
     "path",
     {
       d: "M9 0C7.21997 0 5.47991 0.527841 3.99987 1.51677C2.51983 2.50571 1.36628 3.91131 0.685088 5.55585C0.00389949 7.20038 -0.17433 9.00998 0.172937 10.7558C0.520203 12.5016 1.37737 14.1053 2.63604 15.364C3.89471 16.6226 5.49836 17.4798 7.24419 17.8271C8.99002 18.1743 10.7996 17.9961 12.4442 17.3149C14.0887 16.6337 15.4943 15.4802 16.4832 14.0001C17.4722 12.5201 18 10.78 18 9C17.9978 6.61373 17.0488 4.32584 15.3615 2.6385C13.6742 0.951152 11.3863 0.00222614 9 0ZM9 16.1995C7.57607 16.1995 6.18412 15.7773 5.00016 14.9862C3.81621 14.1951 2.89343 13.0707 2.34851 11.7551C1.8036 10.4396 1.66103 8.99201 1.93882 7.59544C2.21662 6.19887 2.9023 4.91604 3.90917 3.90917C4.91605 2.9023 6.19888 2.21661 7.59545 1.93882C8.99202 1.66102 10.4396 1.8036 11.7551 2.34851C13.0707 2.89343 14.1951 3.81621 14.9862 5.00016C15.7773 6.18411 16.1995 7.57607 16.1995 9C16.1976 10.9088 15.4385 12.739 14.0887 14.0887C12.739 15.4385 10.9088 16.1976 9 16.1995ZM13.1307 5.02189L7.19952 10.953L4.86935 8.63125L3.60337 9.89964L7.20673 13.503L14.4062 6.30348L13.1307 5.02189Z",
       fill: "currentColor"
     }
   ) }),
-  invalid: /* @__PURE__ */ jsx88("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx88(
+  invalid: /* @__PURE__ */ jsx89("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ jsx89(
     "path",
     {
       d: "M11.3328 5.4L9 7.7316L6.6696 5.4L5.4 6.6696L7.7316 9L5.4 11.3328L6.6696 12.6L9 10.2696L11.3328 12.6L12.6 11.3328L10.2696 9L12.6 6.6696L11.3328 5.4ZM9 2.88488e-06C7.21997 2.88488e-06 5.47991 0.527844 3.99987 1.51678C2.51983 2.50571 1.36628 3.91132 0.685088 5.55585C0.00389957 7.20038 -0.17433 9.00998 0.172936 10.7558C0.520203 12.5016 1.37737 14.1053 2.63604 15.364C3.89471 16.6226 5.49836 17.4798 7.24419 17.8271C8.99002 18.1743 10.7996 17.9961 12.4441 17.3149C14.0887 16.6337 15.4943 15.4802 16.4832 14.0001C17.4722 12.5201 18 10.78 18 9C18.0009 7.81784 17.7688 6.64709 17.3168 5.55473C16.8649 4.46237 16.202 3.46985 15.3661 2.63393C14.5302 1.79801 13.5376 1.13512 12.4453 0.683158C11.3529 0.231201 10.1822 -0.000943982 9 2.88488e-06ZM9 16.2C7.57598 16.2 6.18393 15.7777 4.9999 14.9866C3.81586 14.1954 2.89302 13.0709 2.34807 11.7553C1.80312 10.4397 1.66054 8.99201 1.93835 7.59535C2.21616 6.19869 2.9019 4.91577 3.90883 3.90883C4.91577 2.9019 6.19869 2.21616 7.59535 1.93835C8.99201 1.66053 10.4397 1.80312 11.7553 2.34807C13.0709 2.89302 14.1954 3.81586 14.9866 4.9999C15.7777 6.18393 16.2 7.57597 16.2 9C16.1971 10.9087 15.4377 12.7384 14.088 14.088C12.7384 15.4377 10.9087 16.1971 9 16.2Z",
@@ -13222,7 +13194,7 @@ var icons3 = {
 var Icons_default2 = icons3;
 
 // src/wizard/Wizard.tsx
-import { jsx as jsx89, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs65 } from "react/jsx-runtime";
 var Wizard = styled77.div`
   display: flex;
   flex-direction: ${({ mode }) => mode === "vertical" ? "column" : "row"};
@@ -13351,8 +13323,8 @@ function DxcWizard({
     setInnerCurrentStep(newValue);
     onStepClick?.(newValue);
   };
-  return /* @__PURE__ */ jsx89(Wizard, { margin, mode, role: "group", children: steps.map((step, i) => /* @__PURE__ */ jsxs64(StepContainer, { lastStep: i === steps.length - 1, mode, children: [
-    /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsx90(Wizard, { margin, mode, role: "group", children: steps.map((step, i) => /* @__PURE__ */ jsxs65(StepContainer, { lastStep: i === steps.length - 1, mode, children: [
+    /* @__PURE__ */ jsxs65(
       Step,
       {
         "aria-current": (currentStep ?? innerCurrent) === i ? "step" : false,
@@ -13364,34 +13336,34 @@ function DxcWizard({
         tabIndex,
         unvisited: i > (currentStep ?? innerCurrent),
         children: [
-          /* @__PURE__ */ jsxs64(StepIndicator, { hasValidityIcon: step.valid != null, children: [
-            /* @__PURE__ */ jsx89(
+          /* @__PURE__ */ jsxs65(StepIndicator, { hasValidityIcon: step.valid != null, children: [
+            /* @__PURE__ */ jsx90(
               IconContainer10,
               {
                 current: i === (currentStep ?? innerCurrent),
                 disabled: step.disabled,
                 visited: i < (currentStep ?? innerCurrent),
-                children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ jsx89(DxcIcon, { icon: step.icon }) : step.icon : /* @__PURE__ */ jsx89(Number3, { children: i + 1 })
+                children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ jsx90(DxcIcon, { icon: step.icon }) : step.icon : /* @__PURE__ */ jsx90(Number3, { children: i + 1 })
               }
             ),
-            step.valid != null && /* @__PURE__ */ jsx89(ValidityIconContainer, { disabled: step.disabled, valid: step.valid, children: step.valid ? Icons_default2.valid : Icons_default2.invalid })
+            step.valid != null && /* @__PURE__ */ jsx90(ValidityIconContainer, { disabled: step.disabled, valid: step.valid, children: step.valid ? Icons_default2.valid : Icons_default2.invalid })
           ] }),
-          (step.label || step.description) && /* @__PURE__ */ jsxs64(Flex_default, { direction: "column", alignItems: "flex-start", children: [
-            step.label && /* @__PURE__ */ jsx89(Label11, { children: step.label }),
-            step.description && /* @__PURE__ */ jsx89(Description, { children: step.description })
+          (step.label || step.description) && /* @__PURE__ */ jsxs65(Flex_default, { direction: "column", alignItems: "flex-start", children: [
+            step.label && /* @__PURE__ */ jsx90(Label11, { children: step.label }),
+            step.description && /* @__PURE__ */ jsx90(Description, { children: step.description })
           ] })
         ]
       }
     ),
-    i !== steps.length - 1 && /* @__PURE__ */ jsx89(DividerContainer, { mode, children: /* @__PURE__ */ jsx89(DxcDivider, { color: "darkGrey", orientation: mode }) })
+    i !== steps.length - 1 && /* @__PURE__ */ jsx90(DividerContainer, { mode, children: /* @__PURE__ */ jsx90(DxcDivider, { color: "darkGrey", orientation: mode }) })
   ] }, `step${i}`)) });
 }
 
 // src/toast/useToast.tsx
-import { useContext as useContext38, useMemo as useMemo23 } from "react";
+import { useContext as useContext37, useMemo as useMemo22 } from "react";
 function useToast() {
-  const add = useContext38(ToastContext_default);
-  const toast = useMemo23(
+  const add = useContext37(ToastContext_default);
+  const toast = useMemo22(
     () => ({
       default: (toast2) => add?.(toast2, "default"),
       success: (toast2) => add?.(toast2, "success"),