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

package/dist/index.js

@@ -4069,114 +4069,33 @@ var Dropdown_default = DxcDropdown;
 
 // src/header/Header.tsx
 var import_react19 = require("react");
+
+// src/header/Icons.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var Dropdown = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(HeaderDropdown, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dropdown_default, { ...props }) });
-var getLogoElement = (themeInput, logoLabel) => {
-  if (!themeInput) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "73", height: "40", viewBox: "0 0 73 40", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("title", { children: "DXC Logo" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { transform: "translate(0)", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "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__ */ (0, import_jsx_runtime20.jsx)(
-          "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__ */ (0, import_jsx_runtime20.jsx)(LogoImg2, { alt: logoLabel, src: themeInput });
-  else return themeInput;
-};
-var Content3 = ({ isResponsive, responsiveContent, handleMenu, content }) => isResponsive ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuContent, { children: responsiveContent?.(handleMenu) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ContentContainer, { children: content });
-var DxcHeader = ({
-  underlined = false,
-  content,
-  responsiveContent,
-  onClick,
-  margin,
-  tabIndex = 0
-}) => {
-  const [isResponsive, setIsResponsive] = (0, import_react18.useState)(false);
-  const [isMenuVisible, setIsMenuVisible] = (0, import_react18.useState)(false);
-  const colorsTheme = (0, import_react19.useContext)(HalstackContext);
-  const translatedLabels = (0, import_react19.useContext)(HalstackLanguageContext);
-  const ref = (0, import_react18.useRef)(null);
-  const handleMenu = () => {
-    if (isResponsive && !isMenuVisible) {
-      setIsMenuVisible(!isMenuVisible);
-    } else {
-      setIsMenuVisible(!isMenuVisible);
-    }
-  };
-  const headerLogo = (0, import_react18.useMemo)(
-    () => getLogoElement(colorsTheme.header.logo, translatedLabels.formFields.logoAlternativeText),
-    [colorsTheme, translatedLabels]
-  );
-  const headerResponsiveLogo = (0, import_react18.useMemo)(
-    () => getLogoElement(colorsTheme.header.logoResponsive, translatedLabels.formFields.logoAlternativeText),
-    [colorsTheme, translatedLabels]
-  );
-  (0, import_react18.useEffect)(() => {
-    const handleResize = () => {
-      setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  (0, import_react18.useEffect)(() => {
-    if (!isResponsive) {
-      setIsMenuVisible(false);
-    }
-  }, [isResponsive]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_styled_components17.ThemeProvider, { theme: colorsTheme.header, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(HeaderContainer, { underlined, margin, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LogoAnchor, { tabIndex: onClick ? tabIndex : -1, interactive: !!onClick, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LogoContainer2, { children: headerLogo }) }),
-    isResponsive && responsiveContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex_default, { grow: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChildContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DxcIcon, { icon: "menu" }),
-        translatedLabels.header.hamburgerTitle
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ResponsiveLogoContainer, { children: headerResponsiveLogo }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tooltip, { label: translatedLabels.header.closeIcon, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CloseAction, { tabIndex, onClick: handleMenu, "aria-label": translatedLabels.header.closeIcon, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DxcIcon, { icon: "close" }) }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          Content3,
-          {
-            isResponsive,
-            responsiveContent,
-            handleMenu,
-            content
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Overlay2, { onClick: handleMenu, hasVisibility: isMenuVisible })
-    ] }),
-    !isResponsive && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      Content3,
+var dxcLogo2 = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "73", height: "40", viewBox: "0 0 73 40", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("title", { children: "DXC Logo" }),
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { transform: "translate(0)", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "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__ */ (0, import_jsx_runtime20.jsx)(
+      "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
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var HeaderDropdown = import_styled_components17.default.div`
   display: flex;
   button {
@@ -4187,28 +4106,28 @@ var HeaderDropdown = import_styled_components17.default.div`
   }
 `;
 var HeaderContainer = import_styled_components17.default.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 = import_styled_components17.default.a`
   ${(props) => props.interactive ? "cursor: pointer" : "cursor: default; outline:none;"};
 `;
 var LogoImg2 = import_styled_components17.default.img`
-  max-height: ${(props) => props.theme.logoHeight};
-  width: ${(props) => props.theme.logoWidth};
+  max-height: var(--height-xl);
+  width: auto;
 `;
 var LogoContainer2 = import_styled_components17.default.div`
-  max-height: ${(props) => props.theme.logoHeight};
-  width: ${(props) => props.theme.logoWidth};
+  max-height: var(--height-xl);
   vertical-align: middle;
+  width: auto;
 `;
 var ChildContainer = import_styled_components17.default.div`
   display: flex;
@@ -4223,94 +4142,74 @@ var ContentContainer = import_styled_components17.default.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 = import_styled_components17.default.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 = import_styled_components17.default.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 = import_styled_components17.default.div`
-  max-height: ${(props) => props.theme.logoHeight};
-  width: ${(props) => props.theme.logoWidth};
+  max-height: var(--height-xl);
+  width: auto;
   display: flex;
 `;
-var CloseAction = import_styled_components17.default.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 = import_styled_components17.default.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 = import_styled_components17.default.div`
   position: fixed;
@@ -4318,18 +4217,112 @@ var Overlay2 = import_styled_components17.default.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__ */ (0, import_jsx_runtime21.jsx)(HeaderDropdown, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dropdown_default, { ...props }) });
+var getLogoElement = (logo) => {
+  if (logo) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LogoImg2, { alt: logo.title, src: logo.src, title: logo.title });
+  } else {
+    return dxcLogo2;
+  }
+};
+var Content3 = ({ isResponsive, responsiveContent, handleMenu, content }) => isResponsive ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MenuContent, { children: responsiveContent?.(handleMenu) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContentContainer, { children: content });
+var DxcHeader = ({
+  underlined = false,
+  content,
+  responsiveContent,
+  logo,
+  margin,
+  onClick,
+  tabIndex = 0
+}) => {
+  const [isResponsive, setIsResponsive] = (0, import_react18.useState)(false);
+  const [isMenuVisible, setIsMenuVisible] = (0, import_react18.useState)(false);
+  const translatedLabels = (0, import_react19.useContext)(HalstackLanguageContext);
+  const ref = (0, import_react18.useRef)(null);
+  const handleMenu = () => {
+    if (isResponsive && !isMenuVisible) {
+      setIsMenuVisible(!isMenuVisible);
+    } else {
+      setIsMenuVisible(!isMenuVisible);
+    }
+  };
+  const headerLogo = getLogoElement(logo);
+  (0, import_react18.useEffect)(() => {
+    const handleResize = () => {
+      setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  (0, import_react18.useEffect)(() => {
+    if (!isResponsive) {
+      setIsMenuVisible(false);
+    }
+  }, [isResponsive]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(HeaderContainer, { underlined, margin, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      LogoAnchor,
+      {
+        href: logo?.href,
+        tabIndex: onClick ? tabIndex : -1,
+        interactive: !!onClick || !!logo?.href,
+        onClick,
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LogoContainer2, { children: headerLogo })
+      }
+    ),
+    isResponsive && responsiveContent && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex_default, { grow: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChildContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DxcIcon, { icon: "menu" }),
+        translatedLabels.header.hamburgerTitle
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ResponsiveLogoContainer, { children: headerLogo }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ActionIcon_default,
+            {
+              icon: "close",
+              onClick: handleMenu,
+              tabIndex,
+              title: translatedLabels.header.closeIcon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Content3,
+          {
+            isResponsive,
+            responsiveContent,
+            handleMenu,
+            content
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Overlay2, { onClick: handleMenu, hasVisibility: isMenuVisible })
+    ] }),
+    !isResponsive && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      Content3,
+      {
+        isResponsive,
+        responsiveContent,
+        handleMenu,
+        content
+      }
+    )
+  ] });
+};
+DxcHeader.Dropdown = Dropdown;
 var Header_default = DxcHeader;
 
 // src/sidenav/Sidenav.tsx
@@ -4337,10 +4330,10 @@ var import_react21 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 
 // src/bleed/Bleed.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var getNegativeValue = (value) => value ? `calc(${value} * -1)` : null;
 function DxcBleed({ space, horizontal, vertical, top, right, bottom, left, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     DxcContainer,
     {
       margin: {
@@ -4366,39 +4359,39 @@ var useResponsiveSidenavVisibility = () => {
 };
 
 // src/sidenav/Sidenav.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var DxcSidenav = ({ title, children }) => {
   const colorsTheme = (0, import_react21.useContext)(HalstackContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_styled_components18.ThemeProvider, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidenavContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_styled_components18.ThemeProvider, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidenavContainer, { children: [
     title,
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Flex_default, { direction: "column", gap: "1rem", children })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Flex_default, { direction: "column", gap: "1rem", children })
   ] }) });
 };
-var Title2 = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidenavTitle, { children }) });
-var Section = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Flex_default, { direction: "column", children }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Divider, {})
+var Title2 = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidenavTitle, { children }) });
+var Section = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcBleed, { horizontal: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Flex_default, { direction: "column", children }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider, {})
 ] });
 var Group = ({ title, collapsable = false, icon, children }) => {
   const [collapsed, setCollapsed] = (0, import_react21.useState)(false);
   const [isSelected, changeIsSelected] = (0, import_react21.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GroupContextProvider, { value: changeIsSelected, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidenavGroup, { children: [
-    collapsable && title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GroupContextProvider, { value: changeIsSelected, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidenavGroup, { children: [
+    collapsable && title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       SidenavGroupTitleButton,
       {
         "aria-expanded": !collapsed,
         onClick: () => setCollapsed(!collapsed),
         selectedGroup: collapsed && isSelected,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcIcon, { icon }) : icon,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcIcon, { icon }) : icon,
             title
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcIcon, { icon: collapsed ? "expand_more" : "expand_less" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcIcon, { icon: collapsed ? "expand_more" : "expand_less" })
         ]
       }
-    ) : title && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidenavGroupTitle, { children: [
-      typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcIcon, { icon }) : icon,
+    ) : title && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidenavGroupTitle, { children: [
+      typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcIcon, { icon }) : icon,
       title
     ] }),
     !collapsed && children
@@ -4415,7 +4408,7 @@ var Link = (0, import_react21.forwardRef)(
     (0, import_react21.useEffect)(() => {
       changeIsGroupSelected?.((isGroupSelected2) => !isGroupSelected2 ? selected : isGroupSelected2);
     }, [selected, changeIsGroupSelected]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       SidenavLink,
       {
         selected,
@@ -4426,11 +4419,11 @@ var Link = (0, import_react21.forwardRef)(
         onClick: handleClick,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcIcon, { icon }) : icon,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcIcon, { icon }) : icon,
             children
           ] }),
-          newWindow && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DxcIcon, { icon: "open_in_new" })
+          newWindow && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DxcIcon, { icon: "open_in_new" })
         ]
       }
     );
@@ -4589,9 +4582,9 @@ var Sidenav_default = DxcSidenav;
 var import_react22 = require("react");
 
 // src/layout/Icons.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var layoutIcons = {
-  facebookLogo: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  facebookLogo: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "svg",
     {
       version: "1.1",
@@ -4601,7 +4594,7 @@ var layoutIcons = {
       height: "438.536px",
       viewBox: "0 0 438.536 438.536",
       fill: "#FFFFFF",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "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"
@@ -4609,9 +4602,9 @@ var layoutIcons = {
       ) })
     }
   ),
-  xLogo: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("svg", { width: "256", height: "256", viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("rect", { width: "256", height: "256", rx: "40", fill: "white" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  xLogo: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { width: "256", height: "256", viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { width: "256", height: "256", rx: "40", fill: "white" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "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",
@@ -4619,7 +4612,7 @@ var layoutIcons = {
       }
     )
   ] }),
-  linkedinLogo: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  linkedinLogo: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "svg",
     {
       version: "1.1",
@@ -4629,7 +4622,7 @@ var layoutIcons = {
       height: "438.536px",
       viewBox: "0 0 438.536 438.536",
       fill: "#FFFFFF",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "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"
@@ -4688,7 +4681,7 @@ var useResponsive = (breakpoint) => {
 };
 
 // src/layout/ApplicationLayout.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var ApplicationLayoutContainer = import_styled_components19.default.div`
   position: absolute;
   top: 64px;
@@ -4780,7 +4773,7 @@ var MainContentContainer = import_styled_components19.default.main`
   flex: 1;
   background-color: #fff;
 `;
-var Main = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children });
+var Main = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children });
 var DxcApplicationLayout = ({
   visibilityToggleLabel = "",
   header,
@@ -4800,24 +4793,24 @@ var DxcApplicationLayout = ({
       setIsSidenavVisibleResponsive(false);
     }
   }, [isResponsive]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ApplicationLayoutContainer, { hasSidenav: !!sidenav, isSidenavVisible: isSidenavVisibleResponsive, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(HeaderContainer2, { children: header ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Header_default, { underlined: true }) }),
-    sidenav && isResponsive && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VisibilityToggle, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip, { label: translatedLabels.applicationLayout.visibilityToggleTitle, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ApplicationLayoutContainer, { hasSidenav: !!sidenav, isSidenavVisible: isSidenavVisibleResponsive, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(HeaderContainer2, { children: header ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header_default, { underlined: true }) }),
+    sidenav && isResponsive && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VisibilityToggle, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Tooltip, { label: translatedLabels.applicationLayout.visibilityToggleTitle, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       HamburgerTrigger2,
       {
         onClick: handleSidenavVisibility,
         "aria-label": visibilityToggleLabel ? void 0 : translatedLabels.applicationLayout.visibilityToggleTitle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DxcIcon, { icon: "Menu" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DxcIcon, { icon: "Menu" }),
           visibilityToggleLabel
         ]
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(BodyContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SidenavContextProvider, { value: setIsSidenavVisibleResponsive, children: sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SidenavContainer2, { children: sidenav }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(MainContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MainContentContainer, { children: findChildType(children, Main) }),
-        footer ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(BodyContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SidenavContextProvider, { value: setIsSidenavVisibleResponsive, children: sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SidenavContainer2, { children: sidenav }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(MainContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MainContentContainer, { children: findChildType(children, Main) }),
+        footer ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Footer_default,
           {
             copyright: `\xA9 DXC Technology ${year}. All rights reserved.`,
@@ -4838,7 +4831,7 @@ var ApplicationLayout_default = DxcApplicationLayout;
 
 // src/badge/Badge.tsx
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var contextualColorMap = {
   grey: {
     background: "var(--color-bg-neutral-light)",
@@ -4953,7 +4946,7 @@ var DxcBadge = ({
   icon,
   notificationLimit = 99,
   size = "medium"
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
   BadgeContainer,
   {
     label,
@@ -4962,8 +4955,8 @@ var DxcBadge = ({
     size,
     "aria-label": title,
     children: [
-      mode === "contextual" && icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconContainer4, { size, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DxcIcon, { icon }) : icon }),
-      label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { size, children: typeof label === "number" ? label > notificationLimit ? `+${notificationLimit}` : label : label })
+      mode === "contextual" && icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconContainer4, { size, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DxcIcon, { icon }) : icon }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Label, { size, children: typeof label === "number" ? label > notificationLimit ? `+${notificationLimit}` : label : label })
     ]
   }
 ) });
@@ -4976,7 +4969,7 @@ var import_styled_components22 = __toESM(require("styled-components"));
 // src/breadcrumbs/Item.tsx
 var import_react24 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ListItem = import_styled_components21.default.li`
   display: flex;
   align-items: center;
@@ -5027,12 +5020,12 @@ var Item = ({ isCurrentPage = false, href, label, onClick }) => {
     if (optionElement?.title === "" && labelContainer.scrollWidth > labelContainer.clientWidth)
       optionElement.title = label;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListItem, { "aria-current": isCurrentPage ? "page" : void 0, isCurrentPage, children: isCurrentPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CurrentPage, { ref: currentItemRef, onMouseEnter: handleOnMouseEnter, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Link2, { href, onClick: handleOnClick, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { children: label }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListItem, { "aria-current": isCurrentPage ? "page" : void 0, isCurrentPage, children: isCurrentPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CurrentPage, { ref: currentItemRef, onMouseEnter: handleOnMouseEnter, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Link2, { href, onClick: handleOnClick, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { children: label }) }) });
 };
 var Item_default = Item;
 
 // src/breadcrumbs/Breadcrumbs.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var OrderedList = import_styled_components22.default.ol`
   display: flex;
   align-items: center;
@@ -5069,21 +5062,21 @@ var DxcBreadcrumbs = ({
     },
     [items]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(OrderedList, { children: items && items.length > Math.max(itemsBeforeCollapse, 2) ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    showRoot && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Item_default, { href: items[0]?.href, label: items[0]?.label ?? "" }, 0),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Flex_default, { alignItems: "center", as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OrderedList, { children: items && items.length > Math.max(itemsBeforeCollapse, 2) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    showRoot && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Item_default, { href: items[0]?.href, label: items[0]?.label ?? "" }, 0),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Flex_default, { alignItems: "center", as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Dropdown_default,
       {
         caretHidden: true,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DxcIcon, { icon: "more_horiz" }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(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__ */ (0, import_jsx_runtime27.jsx)(Item_default, { isCurrentPage: true, label: items[items.length - 1]?.label ?? "" }, 2)
-  ] }) : items.map((item, index, { length }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Item_default, { isCurrentPage: true, label: items[items.length - 1]?.label ?? "" }, 2)
+  ] }) : items.map((item, index, { length }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Item_default,
     {
       href: item.href,
@@ -5123,7 +5116,7 @@ var TypographyContext_default = (0, import_react26.createContext)({
 });
 
 // src/typography/Typography.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Typography = import_styled_components23.default.span`
   margin: 0px;
   display: ${({ display }) => display};
@@ -5149,96 +5142,94 @@ function DxcTypography({ children, ...props }) {
     }),
     [componentContext, props]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TypographyContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { ...contextValue, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TypographyContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { ...contextValue, children }) });
 }
 
 // src/bulleted-list/BulletedList.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var BulletedListItem = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children });
-var DxcBulletedList = ({ children, type = "disc", icon = "" }) => {
-  const colorsTheme = (0, import_react28.useContext)(HalstackContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_styled_components24.ThemeProvider, { theme: colorsTheme.bulletedList, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ListContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Flex_default, { direction: "column", as: type === "number" ? "ol" : "ul", gap: "0.125rem", children: import_react28.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ListItem2, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(GeneralContent, { children: [
-    type === "number" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Number2, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: [
-      index + 1,
-      "."
-    ] }) }) : type === "square" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Square, {}) }) : type === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Circle, {}) }) : type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DxcIcon, { icon }) : icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Disc, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: child })
-  ] }) })) }) }) });
-};
-DxcBulletedList.Item = BulletedListItem;
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var ListContainer = import_styled_components24.default.div`
   ul,
   ol {
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 `;
 var Bullet = import_styled_components24.default.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 = import_styled_components24.default.div`
+  align-items: center;
   display: grid;
+  gap: var(--spacing-gap-s);
   grid-template-columns: auto 1fr;
-  align-items: center;
 `;
 var Icon = import_styled_components24.default.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 = import_styled_components24.default.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 = import_styled_components24.default.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 = import_styled_components24.default.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 = import_styled_components24.default.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 = import_styled_components24.default.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__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children });
+var DxcBulletedList = ({ children, type = "disc", icon = "" }) => {
+  const colorsTheme = (0, import_react28.useContext)(HalstackContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_styled_components24.ThemeProvider, { theme: colorsTheme.bulletedList, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ListContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Flex_default, { direction: "column", as: type === "number" ? "ol" : "ul", gap: "0.125rem", children: import_react28.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ListItem2, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(GeneralContent, { children: [
+    type === "number" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Number2, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: [
+      index + 1,
+      "."
+    ] }) }) : type === "square" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Square, {}) }) : type === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Circle, {}) }) : type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DxcIcon, { icon }) : icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Bullet, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Disc, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DxcTypography, { color: colorsTheme.bulletedList.fontColor, children: child })
+  ] }) })) }) }) });
+};
+DxcBulletedList.Item = BulletedListItem;
 var BulletedList_default = DxcBulletedList;
 
 // src/card/Card.tsx
 var import_react29 = require("react");
 var import_styled_components25 = __toESM(require("styled-components"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Card = import_styled_components25.default.div`
   display: flex;
   cursor: ${({ hasAction }) => hasAction ? "pointer" : "unset"};
@@ -5302,7 +5293,7 @@ var DxcCard = ({
   children
 }) => {
   const [isHovered, changeIsHovered] = (0, import_react29.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Card,
     {
       hasAction: !!(onClick || linkHref),
@@ -5314,9 +5305,9 @@ var DxcCard = ({
       as: linkHref && "a",
       href: linkHref,
       shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CardContainer, { hasAction: onClick || linkHref ? true : false, imagePosition: imageSrc ? imagePosition : "none", children: [
-        imageSrc && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ImageContainer, { imageBgColor, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TagImage, { imagePadding, imageCover, src: imageSrc, alt: "Card image" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardContent, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(CardContainer, { hasAction: onClick || linkHref ? true : false, imagePosition: imageSrc ? imagePosition : "none", children: [
+        imageSrc && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ImageContainer, { imageBgColor, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TagImage, { imagePadding, imageCover, src: imageSrc, alt: "Card image" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CardContent, { children })
       ] })
     }
   );
@@ -5328,7 +5319,7 @@ var import_react31 = require("react");
 var import_styled_components26 = __toESM(require("styled-components"));
 
 // src/checkbox/utils.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var sizes2 = {
   small: "120px",
   medium: "240px",
@@ -5347,21 +5338,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__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  checked: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "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__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  partial: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "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__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  unchecked: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "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",
@@ -5375,7 +5366,7 @@ var import_react30 = require("react");
 var CheckboxContext_default = (0, import_react30.createContext)(null);
 
 // src/checkbox/Checkbox.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Label2 = import_styled_components26.default.span`
   color: ${({ disabled }) => disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)"};
   font-family: var(--typography-font-family);
@@ -5459,7 +5450,7 @@ var DxcCheckbox = (0, import_react31.forwardRef)(
           break;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       CheckboxContainer,
       {
         disabled,
@@ -5470,12 +5461,12 @@ var DxcCheckbox = (0, import_react31.forwardRef)(
         ref,
         size,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Label2, { "aria-label": label, disabled, id: labelId, children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Label2, { "aria-label": label, disabled, id: labelId, children: [
             label,
             " ",
-            optional && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             Checkbox,
             {
               "aria-checked": checked ?? innerChecked,
@@ -5493,7 +5484,7 @@ var DxcCheckbox = (0, import_react31.forwardRef)(
               children: partial ? icons.partial : checked ?? innerChecked ? icons.checked : icons.unchecked
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "input",
             {
               checked: checked ?? innerChecked,
@@ -5514,7 +5505,7 @@ var Checkbox_default = DxcCheckbox;
 
 // src/chip/Chip.tsx
 var import_styled_components27 = __toESM(require("styled-components"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var calculateWidth5 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 var Chip = import_styled_components27.default.div`
   box-sizing: border-box;
@@ -5561,8 +5552,8 @@ var DxcChip = ({
   disabled,
   margin,
   tabIndex = 0
-}) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Chip, { disabled, margin, children: [
-  prefixIcon && (typeof onClickPrefix === "function" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Chip, { disabled, margin, children: [
+  prefixIcon && (typeof onClickPrefix === "function" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     ActionIcon_default,
     {
       disabled,
@@ -5571,9 +5562,9 @@ var DxcChip = ({
       tabIndex,
       title: "Prefix Action"
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconContainer5, { disabled, children: typeof prefixIcon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DxcIcon, { icon: prefixIcon }) : prefixIcon })),
-  label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LabelContainer2, { disabled, children: label }),
-  suffixIcon && (typeof onClickSuffix === "function" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconContainer5, { disabled, children: typeof prefixIcon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DxcIcon, { icon: prefixIcon }) : prefixIcon })),
+  label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LabelContainer2, { disabled, children: label }),
+  suffixIcon && (typeof onClickSuffix === "function" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     ActionIcon_default,
     {
       disabled,
@@ -5582,7 +5573,7 @@ var DxcChip = ({
       tabIndex,
       title: "Suffix Action"
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconContainer5, { disabled, children: typeof suffixIcon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DxcIcon, { icon: suffixIcon }) : suffixIcon }))
+  ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconContainer5, { disabled, children: typeof suffixIcon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DxcIcon, { icon: suffixIcon }) : suffixIcon }))
 ] });
 var Chip_default = DxcChip;
 
@@ -5598,7 +5589,7 @@ var import_react34 = require("react");
 
 // src/contextual-menu/SubMenu.tsx
 var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var SubMenuContainer = import_styled_components28.default.ul`
   margin: 0;
   padding: 0;
@@ -5607,13 +5598,13 @@ var SubMenuContainer = import_styled_components28.default.ul`
   list-style: none;
 `;
 function SubMenu({ children, id }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SubMenuContainer, { id, role: "menu", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SubMenuContainer, { id, role: "menu", children });
 }
 
 // src/contextual-menu/ItemAction.tsx
 var import_react32 = require("react");
 var import_styled_components29 = __toESM(require("styled-components"));
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Action = import_styled_components29.default.button`
   box-sizing: content-box;
   border: none;
@@ -5667,11 +5658,11 @@ var Text2 = import_styled_components29.default.span`
 var ItemAction_default = (0, import_react32.memo)(function ItemAction({ badge, collapseIcon, depthLevel, icon, label, ...props }) {
   const [hasTooltip, setHasTooltip] = (0, import_react32.useState)(false);
   const modifiedBadge = badge && (0, import_react32.cloneElement)(badge, { size: "small" });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Action, { depthLevel, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Label3, { children: [
-      collapseIcon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { children: collapseIcon }),
-      icon && depthLevel === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DxcIcon, { icon }) : icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Action, { depthLevel, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Label3, { children: [
+      collapseIcon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon2, { children: collapseIcon }),
+      icon && depthLevel === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon2, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DxcIcon, { icon }) : icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Text2,
         {
           selected: props.selected,
@@ -5710,20 +5701,20 @@ var isGroupSelected = (items, selectedItemId) => items.some((item) => {
 });
 
 // src/contextual-menu/GroupItem.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function GroupItem({ items, ...props }) {
   const groupMenuId = `group-menu-${(0, import_react34.useId)()}`;
   const { selectedItemId } = (0, import_react34.useContext)(ContextualMenuContext_default) ?? {};
   const groupSelected = (0, import_react34.useMemo)(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
   const [isOpen, setIsOpen] = (0, import_react34.useState)(groupSelected && selectedItemId === -1);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       ItemAction_default,
       {
         "aria-controls": isOpen ? groupMenuId : void 0,
         "aria-expanded": isOpen ? true : void 0,
         "aria-pressed": groupSelected && !isOpen,
-        collapseIcon: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DxcIcon, { icon: "filled_expand_less" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DxcIcon, { icon: "filled_expand_more" }),
+        collapseIcon: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DxcIcon, { icon: "filled_expand_less" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DxcIcon, { icon: "filled_expand_more" }),
         onClick: () => {
           setIsOpen((isCurrentlyOpen) => !isCurrentlyOpen);
         },
@@ -5731,13 +5722,13 @@ function GroupItem({ items, ...props }) {
         ...props
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SubMenu, { id: groupMenuId, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MenuItem, { item, depthLevel: props.depthLevel + 1 }, `${item.label}-${index}`)) })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SubMenu, { id: groupMenuId, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MenuItem, { item, depthLevel: props.depthLevel + 1 }, `${item.label}-${index}`)) })
   ] });
 }
 
 // src/contextual-menu/SingleItem.tsx
 var import_react35 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function SingleItem({ id, onSelect, selectedByDefault = false, ...props }) {
   const { selectedItemId, setSelectedItemId } = (0, import_react35.useContext)(ContextualMenuContext_default) ?? {};
   const handleClick = () => {
@@ -5749,7 +5740,7 @@ function SingleItem({ id, onSelect, selectedByDefault = false, ...props }) {
       setSelectedItemId?.(id);
     }
   }, [selectedItemId, selectedByDefault, id]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     ItemAction_default,
     {
       "aria-pressed": selectedItemId === -1 ? selectedByDefault : selectedItemId === id,
@@ -5761,19 +5752,19 @@ function SingleItem({ id, onSelect, selectedByDefault = false, ...props }) {
 }
 
 // src/contextual-menu/MenuItem.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var MenuItemContainer = import_styled_components30.default.li`
   display: grid;
   gap: var(--spacing-gap-xs);
 `;
 function MenuItem({ item, depthLevel = 0 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MenuItemContainer, { role: "menuitem", children: "items" in item ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(GroupItem, { ...item, depthLevel }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SingleItem, { ...item, depthLevel }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MenuItemContainer, { role: "menuitem", children: "items" in item ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GroupItem, { ...item, depthLevel }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SingleItem, { ...item, depthLevel }) });
 }
 
 // src/contextual-menu/Section.tsx
 var import_styled_components31 = __toESM(require("styled-components"));
 var import_react36 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SectionContainer = import_styled_components31.default.section`
   display: grid;
   gap: var(--spacing-gap-xs);
@@ -5788,15 +5779,15 @@ var Title3 = import_styled_components31.default.h2`
 `;
 function Section2({ index, length, section }) {
   const id = `section-${(0, import_react36.useId)()}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(SectionContainer, { "aria-label": section.title ?? id, "aria-labelledby": id, children: [
-    section.title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Title3, { id, children: section.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SubMenu, { children: section.items.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MenuItem, { item }, `${item.label}-${index2}`)) }),
-    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DxcInset, { top: "var(--spacing-padding-xxs)", bottom: "var(--spacing-padding-xxs)", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DxcDivider, { color: "lightGrey" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(SectionContainer, { "aria-label": section.title ?? id, "aria-labelledby": id, children: [
+    section.title && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Title3, { id, children: section.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SubMenu, { children: section.items.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MenuItem, { item }, `${item.label}-${index2}`)) }),
+    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DxcInset, { top: "var(--spacing-padding-xxs)", bottom: "var(--spacing-padding-xxs)", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DxcDivider, { color: "lightGrey" }) })
   ] });
 }
 
 // src/contextual-menu/ContextualMenu.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ContextualMenu = import_styled_components32.default.div`
   box-sizing: border-box;
   margin: 0;
@@ -5828,7 +5819,7 @@ function DxcContextualMenu({ items }) {
       setFirstUpdate(false);
     }
   }, [firstUpdate, selectedItemId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ContextualMenu, { ref: contextualMenuRef, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ContextualMenuContext_default.Provider, { value: contextValue, children: itemsWithId[0] && isSection(itemsWithId[0]) ? itemsWithId.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Section2, { section: item, index, length: itemsWithId.length }, `section-${index}`)) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SubMenu, { children: itemsWithId.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MenuItem, { item }, `${item.label}-${index}`)) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ContextualMenu, { ref: contextualMenuRef, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ContextualMenuContext_default.Provider, { value: contextValue, children: itemsWithId[0] && isSection(itemsWithId[0]) ? itemsWithId.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Section2, { section: item, index, length: itemsWithId.length }, `section-${index}`)) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SubMenu, { children: itemsWithId.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MenuItem, { item }, `${item.label}-${index}`)) }) }) });
 }
 
 // src/data-grid/DataGrid.tsx
@@ -5839,20 +5830,7 @@ var import_styles = require("react-data-grid/lib/styles.css");
 
 // src/data-grid/utils.tsx
 var import_react_data_grid = require("react-data-grid");
-var import_jsx_runtime41 = require("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;
-};
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var convertToRDGColumns = (gridColumn, summaryRow) => ({
   key: gridColumn.key,
   name: gridColumn.label,
@@ -5862,11 +5840,11 @@ var convertToRDGColumns = (gridColumn, summaryRow) => ({
   editable: gridColumn.textEditable,
   headerCellClass: gridColumn.alignment ? `header-align-${gridColumn.alignment}` : `header-align-left`,
   renderEditCell: gridColumn.textEditable ? import_react_data_grid.textEditor : void 0,
-  renderCell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: row[gridColumn.key] }),
-  renderSummaryCell: () => gridColumn.summaryKey ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: summaryRow?.[gridColumn.summaryKey] }) : void 0
+  renderCell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: row[gridColumn.key] }),
+  renderSummaryCell: () => gridColumn.summaryKey ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: summaryRow?.[gridColumn.summaryKey] }) : void 0
 });
-var renderSortStatus = ({ sortDirection }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "sortIconContainer", children: sortDirection !== void 0 ? sortDirection === "ASC" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DxcIcon, { icon: "Keyboard_Arrow_Up" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DxcIcon, { icon: "Keyboard_Arrow_Down" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DxcIcon, { icon: "Expand_All" }) });
-var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var renderSortStatus = ({ sortDirection }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "sortIconContainer", children: sortDirection !== void 0 ? sortDirection === "ASC" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DxcIcon, { icon: "Keyboard_Arrow_Up" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DxcIcon, { icon: "Keyboard_Arrow_Down" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DxcIcon, { icon: "Expand_All" }) });
+var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   ActionIcon_default,
   {
     icon: row.contentIsExpanded ? "arrow_drop_down" : "arrow_right",
@@ -5899,7 +5877,7 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
     disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
-var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
   "button",
   {
     type: "button",
@@ -5939,12 +5917,12 @@ var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsT
       setRowsToRender(newRowsToRender);
     },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DxcIcon, { icon: triggerRow.visibleChildren ? "Keyboard_Arrow_Down" : "Chevron_Right" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ellipsis-cell", children: triggerRow[columnKey] })
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DxcIcon, { icon: triggerRow.visibleChildren ? "Keyboard_Arrow_Down" : "Chevron_Right" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ellipsis-cell", children: triggerRow[columnKey] })
     ]
   }
 );
-var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   Checkbox_default,
   {
     checked: selectedRows.has(rowKeyGetter(row, uniqueRowId)),
@@ -5966,7 +5944,7 @@ var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /*
     disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
-var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HalstackProvider, { advancedTheme: overwriteTheme(colorsTheme), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   Checkbox_default,
   {
     checked: rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId))),
@@ -5991,7 +5969,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 : "";
@@ -6151,7 +6129,7 @@ var import_styled_components34 = __toESM(require("styled-components"));
 // src/select/ListOption.tsx
 var import_styled_components33 = __toESM(require("styled-components"));
 var import_react38 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var OptionItem = import_styled_components33.default.li`
   padding: var(--spacing-padding-none) var(--spacing-padding-xs);
   cursor: pointer;
@@ -6222,7 +6200,7 @@ var ListOption = ({
   (0, import_react38.useEffect)(() => {
     if (checkboxRef.current) checkboxRef.current.style.pointerEvents = "none";
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipWrapper, { condition: hasTooltip, label: option.label, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipWrapper, { condition: hasTooltip, label: option.label, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     OptionItem,
     {
       "aria-selected": !multiple ? isSelected : void 0,
@@ -6234,12 +6212,12 @@ var ListOption = ({
       role: "option",
       selected: isSelected,
       visualFocused,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(StyledOption, { grouped: isGroupedOption, last: isLastOption, selected: isSelected, visualFocused, children: [
-        multiple && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Checkbox_default, { checked: isSelected, tabIndex: -1, ref: checkboxRef }),
-        option.icon && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OptionIcon, { children: typeof option.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DxcIcon, { icon: option.icon }) : option.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(OptionContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OptionLabel, { isSelectAllOption, onMouseEnter: handleOnMouseEnter, children: option.label }),
-          !multiple && isSelected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DxcIcon, { icon: "done" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(StyledOption, { grouped: isGroupedOption, last: isLastOption, selected: isSelected, visualFocused, children: [
+        multiple && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Checkbox_default, { checked: isSelected, tabIndex: -1, ref: checkboxRef }),
+        option.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(OptionIcon, { children: typeof option.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DxcIcon, { icon: option.icon }) : option.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(OptionContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(OptionLabel, { isSelectAllOption, onMouseEnter: handleOnMouseEnter, children: option.label }),
+          !multiple && isSelected && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DxcIcon, { icon: "done" })
         ] })
       ] })
     }
@@ -6340,7 +6318,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
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var ListboxContainer = import_styled_components34.default.div`
   box-sizing: border-box;
   max-height: 304px;
@@ -6402,7 +6380,7 @@ var Listbox = ({
     if (multiple && enableSelectAll) {
       const groupSelectionType = getGroupSelectionType(option.options, currentValue);
       globalMappingIndex++;
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckboxContext_default.Provider, { value: { partial: groupSelectionType === "indeterminate" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckboxContext_default.Provider, { value: { partial: groupSelectionType === "indeterminate" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ListOption_default,
         {
           id: groupId,
@@ -6420,17 +6398,17 @@ var Listbox = ({
         groupId
       ) });
     } else
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(GroupLabel, { id: groupId, role: "presentation", children: option.label });
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(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__ */ (0, import_jsx_runtime43.jsxs)("ul", { "aria-labelledby": groupId, role: "group", style: { padding: 0, margin: 0 }, children: [
+      return option.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("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__ */ (0, import_jsx_runtime43.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             ListOption_default,
             {
               id: optionId,
@@ -6449,7 +6427,7 @@ var Listbox = ({
     } else {
       globalMappingIndex++;
       const optionId = `${id}-option-${globalMappingIndex}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ListOption_default,
         {
           id: optionId,
@@ -6466,12 +6444,12 @@ var Listbox = ({
   };
   const getFirstItem = () => {
     if (searchable && (options.length === 0 || !groupsHaveOptions(options)))
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(OptionsSystemMessage, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DxcIcon, { icon: "search_off" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(OptionsSystemMessage, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DxcIcon, { icon: "search_off" }),
         translatedLabels.select.noMatchesErrorMessage
       ] });
     else if (optional && !multiple)
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ListOption_default,
         {
           id: `${id}-option-${0}`,
@@ -6485,7 +6463,7 @@ var Listbox = ({
         `${id}-option-${optionalItem.value}`
       );
     else if (multiple && enableSelectAll) {
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckboxContext_default.Provider, { value: { partial: selectionType === "indeterminate" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CheckboxContext_default.Provider, { value: { partial: selectionType === "indeterminate" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ListOption_default,
         {
           id: `${id}-option-${0}`,
@@ -6520,7 +6498,7 @@ var Listbox = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     ListboxContainer,
     {
       "aria-labelledby": ariaLabelledBy,
@@ -6546,7 +6524,7 @@ var Listbox_default = Listbox;
 
 // src/styles/forms/ErrorMessage.tsx
 var import_styled_components35 = __toESM(require("styled-components"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var ErrorMessageContainer = import_styled_components35.default.div`
   display: flex;
   align-items: center;
@@ -6561,8 +6539,8 @@ var ErrorMessageContainer = import_styled_components35.default.div`
     font-size: var(--height-xxs);
   }
 `;
-var ErrorMessage = ({ error, id }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ErrorMessageContainer, { "aria-live": error ? "assertive" : "off", id, role: "alert", children: [
-  error && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DxcIcon, { icon: "filled_error" }),
+var ErrorMessage = ({ error, id }) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ErrorMessageContainer, { "aria-live": error ? "assertive" : "off", id, role: "alert", children: [
+  error && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DxcIcon, { icon: "filled_error" }),
   error
 ] });
 var ErrorMessage_default = ErrorMessage;
@@ -6618,7 +6596,7 @@ var inputStylesByState = (disabled, error, readOnly) => import_styled_components
 `;
 
 // src/select/Select.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var SelectContainer = import_styled_components39.default.div`
   box-sizing: border-box;
   display: flex;
@@ -6981,8 +6959,8 @@ var DxcSelect = (0, import_react40.forwardRef)(
       },
       [handleOptionOnClick, innerValue, value]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(SelectContainer, { margin, ref, size, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(SelectContainer, { margin, ref, size, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         Label_default,
         {
           disabled,
@@ -6994,13 +6972,13 @@ var DxcSelect = (0, import_react40.forwardRef)(
           children: [
             label,
             " ",
-            optional && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
           ]
         }
       ),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover2.Root, { open: isOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Popover2.Root, { open: isOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           Select,
           {
             "aria-activedescendant": visualFocusIndex >= 0 ? `option-${visualFocusIndex}` : void 0,
@@ -7024,9 +7002,9 @@ var DxcSelect = (0, import_react40.forwardRef)(
             role: "combobox",
             tabIndex: disabled ? -1 : tabIndex,
             children: [
-              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(SelectionIndicator, { disabled, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectionNumber, { disabled, children: selectedOption.length }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(SelectionIndicator, { disabled, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectionNumber, { disabled, children: selectedOption.length }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   ClearOptionsAction,
                   {
                     "aria-label": translatedLabels.select.actionClearSelectionTitle,
@@ -7036,12 +7014,12 @@ var DxcSelect = (0, import_react40.forwardRef)(
                       event.preventDefault();
                     },
                     tabIndex: -1,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DxcIcon, { icon: "clear" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DxcIcon, { icon: "clear" })
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(SearchableValueContainer, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(SearchableValueContainer, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   "input",
                   {
                     disabled,
@@ -7050,7 +7028,7 @@ var DxcSelect = (0, import_react40.forwardRef)(
                     value: multiple ? (Array.isArray(value) ? value : Array.isArray(innerValue) ? innerValue : []).join(",") : value ?? innerValue
                   }
                 ),
-                searchable && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                searchable && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   SearchInput,
                   {
                     "aria-labelledby": label ? labelId : void 0,
@@ -7063,7 +7041,7 @@ var DxcSelect = (0, import_react40.forwardRef)(
                     value: searchValue
                   }
                 ),
-                (!searchable || searchValue === "") && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                (!searchable || searchValue === "") && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   SelectedOption,
                   {
                     atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
@@ -7073,8 +7051,8 @@ var DxcSelect = (0, import_react40.forwardRef)(
                   }
                 )
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Flex_default, { alignItems: "center", children: [
-                searchable && searchValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex_default, { alignItems: "center", children: [
+                searchable && searchValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   ActionIcon_default,
                   {
                     icon: "clear",
@@ -7083,12 +7061,12 @@ var DxcSelect = (0, import_react40.forwardRef)(
                     title: translatedLabels.select.actionClearSearchTitle
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DxcIcon, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" })
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DxcIcon, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" })
               ] })
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           Popover2.Content,
           {
             onCloseAutoFocus: (event) => {
@@ -7099,7 +7077,7 @@ var DxcSelect = (0, import_react40.forwardRef)(
             },
             sideOffset: 4,
             style: { zIndex: "2147483647" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               Listbox_default,
               {
                 ariaLabelledBy: labelId,
@@ -7123,14 +7101,14 @@ var DxcSelect = (0, import_react40.forwardRef)(
           }
         ) })
       ] }),
-      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
 var Select_default = DxcSelect;
 
 // src/paginator/Paginator.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DxcPaginator = ({
   currentPage = 1,
   itemsPerPage = 5,
@@ -7187,10 +7165,10 @@ var DxcPaginator = ({
     align-items: center;
     gap: var(--spacing-gap-s);
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(DxcPaginatorContainer, { children: [
-    itemsPerPageOptions && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ItemsPerPageContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: translatedLabels.paginator.itemsPerPageText }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(DxcPaginatorContainer, { children: [
+    itemsPerPageOptions && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ItemsPerPageContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: translatedLabels.paginator.itemsPerPageText }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Select_default,
         {
           options: itemsPerPageOptions.map((num) => ({
@@ -7206,10 +7184,10 @@ var DxcPaginator = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TotalItemsContainer, { children: translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(GoToPageContainer, { children: [
-      onPageChange && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ButtonsContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TotalItemsContainer, { children: translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems) }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(GoToPageContainer, { children: [
+      onPageChange && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ButtonsContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Button_default,
           {
             mode: "secondary",
@@ -7223,7 +7201,7 @@ var DxcPaginator = ({
             size: { height: "medium" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Button_default,
           {
             mode: "secondary",
@@ -7238,12 +7216,12 @@ var DxcPaginator = ({
           }
         )
       ] }),
-      showGoToPage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(PageToSelectContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
+      showGoToPage ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PageToSelectContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
           translatedLabels.paginator.goToPageText,
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SelectContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SelectContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Select_default,
           {
             options: Array.from(Array(totalPages), (e, num) => ({
@@ -7258,9 +7236,9 @@ var DxcPaginator = ({
             tabIndex
           }
         ) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: translatedLabels.paginator.pageOfText(currentPageInternal, totalPages) }),
-      onPageChange && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ButtonsContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: translatedLabels.paginator.pageOfText(currentPageInternal, totalPages) }),
+      onPageChange && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ButtonsContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Button_default,
           {
             mode: "secondary",
@@ -7274,7 +7252,7 @@ var DxcPaginator = ({
             size: { height: "medium" }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           Button_default,
           {
             mode: "secondary",
@@ -7297,7 +7275,7 @@ var Paginator_default = DxcPaginator;
 // src/table/Table.tsx
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_react42 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var calculateWidth7 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 var TableContainer = import_styled_components41.default.div`
   width: ${({ margin }) => calculateWidth7(margin)};
@@ -7368,9 +7346,9 @@ var ActionsContainer = import_styled_components41.default.div`
 var DxcActionsCell = ({ actions }) => {
   const actionIcons = (0, import_react42.useMemo)(() => actions.filter((action) => !action.options), [actions]);
   const dropdownAction = (0, import_react42.useMemo)(() => actions.find((action) => action.options), [actions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ActionsContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ActionsContainer, { children: [
     actionIcons.map(
-      (action, index) => index < (dropdownAction ? 2 : 3) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      (action, index) => index < (dropdownAction ? 2 : 3) && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         ActionIcon_default,
         {
           icon: action.icon,
@@ -7382,7 +7360,7 @@ var DxcActionsCell = ({ actions }) => {
         `action-${index}`
       )
     ),
-    dropdownAction && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    dropdownAction && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       Dropdown_default,
       {
         caretHidden: true,
@@ -7396,99 +7374,56 @@ var DxcActionsCell = ({ actions }) => {
     )
   ] });
 };
-var DxcTable = ({ children, margin, mode = "default" }) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableContainer, { margin, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Table, { mode, children }) });
+var DxcTable = ({ children, margin, mode = "default" }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableContainer, { margin, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Table, { mode, children }) });
 DxcTable.ActionsCell = DxcActionsCell;
 var Table_default = DxcTable;
 
 // src/data-grid/DataGrid.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var ActionContainer = import_styled_components42.default.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  width: 100%;
-`;
-var HierarchyContainer = import_styled_components42.default.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;
-  }
-`;
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DataGridContainer = import_styled_components42.default.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;
@@ -7501,10 +7436,10 @@ var DataGridContainer = import_styled_components42.default.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 {
@@ -7538,6 +7473,34 @@ var DataGridContainer = import_styled_components42.default.div`
     text-align: right;
   }
 `;
+var HierarchyContainer = import_styled_components42.default.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 = import_styled_components42.default.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--height-s);
+  width: 100%;
+`;
 var DxcDataGrid = ({
   columns,
   rows,
@@ -7559,8 +7522,8 @@ var DxcDataGrid = ({
   defaultPage = 1
 }) => {
   const [rowsToRender, setRowsToRender] = (0, import_react43.useState)(rows);
-  const colorsTheme = (0, import_react43.useContext)(HalstackContext);
   const [page, changePage] = (0, import_react43.useState)(defaultPage);
+  const [colHeight, setColHeight] = (0, import_react43.useState)(36);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -7595,7 +7558,7 @@ var DxcDataGrid = ({
             if (row.isExpandedChildContent) {
               return row.expandedChildContent || null;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActionContainer, { id: "action", children: row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender) });
+            return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActionContainer, { id: "small_action", children: row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender) });
           }
         },
         ...expectedColumns
@@ -7608,9 +7571,9 @@ var DxcDataGrid = ({
           ...expectedColumns[0],
           renderCell({ row }) {
             if (row.childRows?.length) {
-              return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, children: renderHierarchyTrigger(rowsToRender, row, uniqueRowId, firstColumnKey, setRowsToRender) });
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, children: renderHierarchyTrigger(rowsToRender, row, uniqueRowId, firstColumnKey, setRowsToRender) });
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, className: "ellipsis-cell", children: row[firstColumnKey] });
+            return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, className: "ellipsis-cell", children: row[firstColumnKey] });
           }
         };
       }
@@ -7625,11 +7588,11 @@ var DxcDataGrid = ({
           minWidth: 36,
           renderCell({ row }) {
             if (!row.isExpandedChildContent) {
-              return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActionContainer, { id: "action", children: renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows) });
+              return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActionContainer, { id: "small_action", children: renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows) });
             }
             return null;
           },
-          renderHeaderCell: () => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActionContainer, { id: "action", children: renderHeaderCheckbox(rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) })
+          renderHeaderCell: () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActionContainer, { id: "small_action", children: renderHeaderCheckbox(rows, uniqueRowId, selectedRows, onSelectRows) })
         },
         ...expectedColumns
       ];
@@ -7638,6 +7601,10 @@ var DxcDataGrid = ({
   }, [selectable, expandable, columns, rowsToRender, onSelectRows, rows, summaryRow, uniqueRowId, selectedRows]);
   const [columnsOrder, setColumnsOrder] = (0, import_react43.useState)(() => columnsToRender.map((_, index) => index));
   const [sortColumns, setSortColumns] = (0, import_react43.useState)([]);
+  (0, import_react43.useEffect)(() => {
+    const rootStyles = getComputedStyle(document.documentElement);
+    if (rootStyles) setColHeight(parseFloat(rootStyles.getPropertyValue("--height-l")));
+  }, []);
   (0, import_react43.useEffect)(() => {
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
@@ -7730,8 +7697,8 @@ var DxcDataGrid = ({
     }
     return !showPaginator || onPageChange ? sortedRows : getPaginatedNodes(sortedRows, uniqueRowId, minItemsPerPageIndex, maxItemsPerPageIndex + 1);
   }, [sortedRows, minItemsPerPageIndex, maxItemsPerPageIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_styled_components42.ThemeProvider, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       import_react_data_grid2.default,
       {
         columns: reorderedColumns,
@@ -7742,15 +7709,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__ */ (0, import_jsx_runtime48.jsx)(
+    showPaginator && (totalItems ?? rows.length) > itemsPerPage && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Paginator_default,
       {
         totalItems: totalItems ?? rows.length,
@@ -7762,7 +7729,7 @@ var DxcDataGrid = ({
         onPageChange: goToPage
       }
     )
-  ] }) });
+  ] });
 };
 DxcDataGrid.ActionsCell = DxcActionsCell;
 var DataGrid_default = DxcDataGrid;
@@ -7782,7 +7749,7 @@ var import_styled_components45 = __toESM(require("styled-components"));
 // src/date-input/Calendar.tsx
 var import_react44 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var CalendarContainer = import_styled_components43.default.div`
   box-sizing: border-box;
   display: flex;
@@ -7990,9 +7957,9 @@ var Calendar = ({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(CalendarContainer, { role: "grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CalendarHeaderRow, { role: "row", children: translatedLabels.calendar.daysShort.map((weekDay) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WeekHeaderCell, { role: "columnheader", children: weekDay }, weekDay)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MonthContainer, { onBlur: handleOnBlur, role: "rowgroup", children: divideDaysIntoWeeks(dayCells, translatedLabels.calendar.daysShort.length).map((week, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WeekContainer, { role: "row", children: week.map((date) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(CalendarContainer, { role: "grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CalendarHeaderRow, { role: "row", children: translatedLabels.calendar.daysShort.map((weekDay) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(WeekHeaderCell, { role: "columnheader", children: weekDay }, weekDay)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MonthContainer, { onBlur: handleOnBlur, role: "rowgroup", children: divideDaysIntoWeeks(dayCells, translatedLabels.calendar.daysShort.length).map((week, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(WeekContainer, { role: "row", children: week.map((date) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       DayCellButton,
       {
         id: `${id}_day_${date.day}_month${date.month}`,
@@ -8017,7 +7984,7 @@ var Calendar_default = (0, import_react44.memo)(Calendar);
 var import_dayjs = __toESM(require("dayjs"));
 var import_react45 = require("react");
 var import_styled_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var YearPickerContainer = import_styled_components44.default.div`
   box-sizing: border-box;
   display: flex;
@@ -8094,7 +8061,7 @@ var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(YearPickerContainer, { role: "listbox", "aria-label": "Year Picker", children: yearList.map((year2) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(YearPickerContainer, { role: "listbox", "aria-label": "Year Picker", children: yearList.map((year2) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     YearPickerButton,
     {
       "aria-label": year2.toString(),
@@ -8116,7 +8083,7 @@ var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
 var YearPicker_default = (0, import_react45.memo)(YearPicker);
 
 // src/date-input/DatePicker.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var DatePickerContainer = import_styled_components45.default.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);
@@ -8200,41 +8167,41 @@ var DatePicker = ({ date, onDateSelect, id }) => {
   const handleMonthChange = (chosenDate) => {
     setInnerDate(chosenDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DatePickerContainer, { id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(PickerHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Tooltip, { label: translatedLabels.calendar.previousMonthTitle, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(DatePickerContainer, { id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PickerHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Tooltip, { label: translatedLabels.calendar.previousMonthTitle, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         HeaderButton,
         {
           "aria-label": translatedLabels.calendar.previousMonthTitle,
           onClick: () => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DxcIcon, { icon: "keyboard_arrow_left" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DxcIcon, { icon: "keyboard_arrow_left" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         HeaderYearTrigger,
         {
           "aria-live": "polite",
           onClick: () => setContent((currentContent) => currentContent === "yearPicker" ? "calendar" : "yearPicker"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(HeaderYearTriggerLabel, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(HeaderYearTriggerLabel, { children: [
               translatedLabels.calendar.months[innerDate.get("month")],
               " ",
               innerDate.format("YYYY")
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DxcIcon, { icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DxcIcon, { icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Tooltip, { label: translatedLabels.calendar.nextMonthTitle, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Tooltip, { label: translatedLabels.calendar.nextMonthTitle, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         HeaderButton,
         {
           "aria-label": translatedLabels.calendar.nextMonthTitle,
           onClick: () => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DxcIcon, { icon: "keyboard_arrow_right" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DxcIcon, { icon: "keyboard_arrow_right" })
         }
       ) })
     ] }),
-    content === "calendar" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    content === "calendar" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       Calendar_default,
       {
         innerDate,
@@ -8244,7 +8211,7 @@ var DatePicker = ({ date, onDateSelect, id }) => {
         today
       }
     ),
-    content === "yearPicker" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(YearPicker_default, { selectedDate, onYearSelect: handleOnYearSelect, today })
+    content === "yearPicker" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(YearPicker_default, { selectedDate, onYearSelect: handleOnYearSelect, today })
   ] });
 };
 var DatePicker_default = (0, import_react46.memo)(DatePicker);
@@ -8308,7 +8275,7 @@ var transformSpecialChars = (str) => {
 };
 
 // src/text-input/Suggestion.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var SuggestionContainer = import_styled_components46.default.li`
   display: flex;
   flex-direction: column;
@@ -8336,7 +8303,7 @@ var Suggestion = ({ highlighted, id, isLast, onClick, suggestion, value, visuall
     const regEx = new RegExp(transformSpecialChars(value), "i");
     return { matchedWords: suggestion.match(regEx), noMatchedWords: suggestion.replace(regEx, "") };
   }, [value, suggestion]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     SuggestionContainer,
     {
       "aria-selected": visuallyFocused ? true : void 0,
@@ -8347,11 +8314,11 @@ var Suggestion = ({ highlighted, id, isLast, onClick, suggestion, value, visuall
       role: "option",
       visuallyFocused,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Flex_default, { alignItems: "center", grow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StyledSuggestion, { children: highlighted ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: matchedSuggestion.matchedWords }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Flex_default, { alignItems: "center", grow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StyledSuggestion, { children: highlighted ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: matchedSuggestion.matchedWords }),
           matchedSuggestion.noMatchedWords
         ] }) : suggestion }) }),
-        !isLast && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DxcDivider, {})
+        !isLast && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DxcDivider, {})
       ]
     }
   );
@@ -8359,7 +8326,7 @@ var Suggestion = ({ highlighted, id, isLast, onClick, suggestion, value, visuall
 var Suggestion_default = (0, import_react48.memo)(Suggestion);
 
 // src/text-input/Suggestions.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var SuggestionsContainer = import_styled_components47.default.div`
   box-sizing: border-box;
   max-height: 304px;
@@ -8415,10 +8382,10 @@ var Suggestions = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SuggestionsContainer, { style: styles, children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SuggestionsSystemMessage, { "aria-live": "polite", children: translatedLabels.textInput.searchingMessage }) : searchHasErrors ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(SuggestionsErrorMessage, { "aria-live": "assertive", role: "alert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DxcIcon, { icon: "filled_error" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SuggestionsContainer, { style: styles, children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SuggestionsSystemMessage, { "aria-live": "polite", children: translatedLabels.textInput.searchingMessage }) : searchHasErrors ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(SuggestionsErrorMessage, { "aria-live": "assertive", role: "alert", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DxcIcon, { icon: "filled_error" }),
     translatedLabels.textInput.fetchingDataErrorMessage
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "ul",
     {
       "aria-label": "Suggestions",
@@ -8429,7 +8396,7 @@ var Suggestions = ({
       ref: listboxRef,
       role: "listbox",
       style: { margin: 0, padding: 0 },
-      children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Suggestion_default,
         {
           highlighted: highlightedSuggestions,
@@ -8448,7 +8415,7 @@ var Suggestions = ({
 var Suggestions_default = (0, import_react49.memo)(Suggestions);
 
 // src/text-input/TextInput.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var TextInputContainer = import_styled_components48.default.div`
   box-sizing: border-box;
   display: flex;
@@ -8500,7 +8467,7 @@ var Addon = import_styled_components48.default.span`
   ${({ type }) => `padding-${type === "prefix" ? "right" : "left"}: var(--spacing-padding-xs);`}
   pointer-events: none;
 `;
-var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: condition ? wrapper(children) : children });
+var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: condition ? wrapper(children) : children });
 var DxcTextInput = (0, import_react50.forwardRef)(
   ({
     action,
@@ -8780,19 +8747,19 @@ var DxcTextInput = (0, import_react50.forwardRef)(
       }
       return void 0;
     }, [value, innerValue, suggestions, numberInputContext]);
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(TextInputContainer, { margin, ref, size, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Label_default, { disabled, hasMargin: !helperText, htmlFor: inputId, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(TextInputContainer, { margin, ref, size, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Label_default, { disabled, hasMargin: !helperText, htmlFor: inputId, children: [
         label,
         " ",
-        optional && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
+        optional && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
       ] }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         AutosuggestWrapper,
         {
           condition: hasSuggestions(suggestions),
-          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               Popover3.Trigger,
               {
                 "aria-controls": void 0,
@@ -8803,7 +8770,7 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                 children
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               Popover3.Content,
               {
                 onCloseAutoFocus: (event) => {
@@ -8814,7 +8781,7 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                 },
                 sideOffset: 4,
                 style: { zIndex: "2147483647" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   Suggestions_default,
                   {
                     highlightedSuggestions: typeof suggestions !== "function",
@@ -8834,7 +8801,7 @@ var DxcTextInput = (0, import_react50.forwardRef)(
               }
             ) })
           ] }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
             TextInput,
             {
               disabled,
@@ -8844,8 +8811,8 @@ var DxcTextInput = (0, import_react50.forwardRef)(
               readOnly,
               ref: inputContainerRef,
               children: [
-                prefix && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Addon, { disabled, type: "prefix", children: prefix }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                prefix && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Addon, { disabled, type: "prefix", children: prefix }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   Input,
                   {
                     "aria-activedescendant": hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 ? `suggestion-${visualFocusIndex}` : void 0,
@@ -8881,8 +8848,8 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                     value: value ?? innerValue
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex_default, { children: [
-                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex_default, { children: [
+                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     ActionIcon_default,
                     {
                       icon: "close",
@@ -8891,8 +8858,8 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                       title: translatedLabels.textInput.clearFieldActionTitle
                     }
                   ),
-                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       ActionIcon_default,
                       {
                         disabled,
@@ -8903,7 +8870,7 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                         title: translatedLabels.numberInput.decrementValueTitle
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                       ActionIcon_default,
                       {
                         disabled,
@@ -8915,7 +8882,7 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                       }
                     )
                   ] }),
-                  action && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+                  action && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     ActionIcon_default,
                     {
                       disabled,
@@ -8927,20 +8894,20 @@ var DxcTextInput = (0, import_react50.forwardRef)(
                     }
                   )
                 ] }),
-                suffix && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Addon, { disabled, type: "suffix", children: suffix })
+                suffix && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Addon, { disabled, type: "suffix", children: suffix })
               ]
             }
           )
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
 var TextInput_default = DxcTextInput;
 
 // src/date-input/DateInput.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 import_dayjs3.default.extend(import_customParseFormat.default);
 var SIDEOFFSET = 4;
 var sizes5 = {
@@ -9153,8 +9120,8 @@ var DxcDateInput = (0, import_react51.forwardRef)(
         }
       }
     }, [isOpen, disabled, calendarId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_styled_components49.ThemeProvider, { theme: colorsTheme, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DateInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_styled_components49.ThemeProvider, { theme: colorsTheme, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DateInputContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         Label5,
         {
           htmlFor: dateRef.current?.getElementsByTagName("input")[0]?.id,
@@ -9163,13 +9130,13 @@ var DxcDateInput = (0, import_react51.forwardRef)(
           children: [
             label,
             " ",
-            optional && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OptionalLabel, { disabled, children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OptionalLabel, { disabled, children: translatedLabels.formFields.optionalLabel })
           ]
         }
       ),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HelperText2, { disabled, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Popover4.Root, { open: isOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(HelperText2, { disabled, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Popover4.Root, { open: isOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           TextInput_default,
           {
             name,
@@ -9195,7 +9162,7 @@ var DxcDateInput = (0, import_react51.forwardRef)(
             ariaLabel
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Popover4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Popover4.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           StyledPopoverContent,
           {
             sideOffset,
@@ -9204,7 +9171,7 @@ var DxcDateInput = (0, import_react51.forwardRef)(
             onBlur: handleDatePickerOnBlur,
             onKeyDown: handleDatePickerEscKeydown,
             ref: popoverContentRef,
-            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
           }
         ) })
       ] })
@@ -9217,7 +9184,7 @@ var DateInput_default = DxcDateInput;
 var import_react52 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var BodyStyle2 = import_styled_components50.createGlobalStyle`
   body {
     overflow: hidden;
@@ -9280,14 +9247,14 @@ var DxcDialog = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [onCloseClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BodyStyle2, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BodyStyle2, {}),
     (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(DialogContainer, { children: [
-        overlay && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Overlay3, { onClick: onBackgroundClick }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(FocusLock_default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(DialogContainer, { children: [
+        overlay && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Overlay3, { onClick: onBackgroundClick }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FocusLock_default, { children: [
           children,
-          closable && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CloseIconActionContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          closable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CloseIconActionContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             ActionIcon_default,
             {
               icon: "close",
@@ -9311,7 +9278,7 @@ var import_styled_components52 = __toESM(require("styled-components"));
 // src/file-input/FileItem.tsx
 var import_react53 = require("react");
 var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ListItem3 = import_styled_components51.default.li`
   list-style: none;
   display: flex;
@@ -9412,12 +9379,12 @@ var FileItem = ({
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(ListItem3, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(MainContainer2, { error, singleFileMode, showPreview, children: [
-      showPreview && (type.includes("image") ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ImagePreview, { src: preview, alt: `Preview of ${fileName}` }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DxcIcon, { icon: preview }) })),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(FileItemContent, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FileName, { id: fileNameId, children: fileName }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Flex_default, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(ListItem3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(MainContainer2, { error, singleFileMode, showPreview, children: [
+      showPreview && (type.includes("image") ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ImagePreview, { src: preview, alt: `Preview of ${fileName}` }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DxcIcon, { icon: preview }) })),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FileItemContent, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FileName, { id: fileNameId, children: fileName }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Flex_default, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           ActionIcon_default,
           {
             onClick: () => onDelete(fileName),
@@ -9428,9 +9395,9 @@ var FileItem = ({
         ) })
       ] })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipWrapper, { condition: hasTooltip, label: error, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(ErrorMessageContainer2, { role: "alert", "aria-live": "assertive", singleFileMode, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DxcIcon, { icon: "filled_error" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorMessage2, { onMouseEnter: handleOnMouseEnter, children: error })
+    error && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TooltipWrapper, { condition: hasTooltip, label: error, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(ErrorMessageContainer2, { role: "alert", "aria-live": "assertive", singleFileMode, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DxcIcon, { icon: "filled_error" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorMessage2, { onMouseEnter: handleOnMouseEnter, children: error })
     ] }) })
   ] });
 };
@@ -9458,7 +9425,7 @@ var isFileIncluded = (file, fileList) => {
 };
 
 // src/file-input/FileInput.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var FileInputContainer = import_styled_components52.default.div`
   display: flex;
   flex-direction: column;
@@ -9637,11 +9604,11 @@ var DxcFileInput = (0, import_react54.forwardRef)(
       };
       getFiles();
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FileInputContainer, { margin, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label_default, { htmlFor: fileInputId, disabled, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(HelperText_default, { disabled, children: helperText }),
-      mode === "file" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(FileInputContainer, { margin, ref, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Label_default, { htmlFor: fileInputId, disabled, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(HelperText_default, { disabled, children: helperText }),
+      mode === "file" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           ValueInput,
           {
             id: fileInputId,
@@ -9653,7 +9620,7 @@ var DxcFileInput = (0, import_react54.forwardRef)(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           Button_default,
           {
             mode: "secondary",
@@ -9664,7 +9631,7 @@ var DxcFileInput = (0, import_react54.forwardRef)(
             tabIndex
           }
         ),
-        files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -9678,8 +9645,8 @@ var DxcFileInput = (0, import_react54.forwardRef)(
           },
           `file-${index}`
         )) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Container2, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Container2, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           ValueInput,
           {
             id: fileInputId,
@@ -9691,7 +9658,7 @@ var DxcFileInput = (0, import_react54.forwardRef)(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
           DragDropArea,
           {
             isDragging,
@@ -9702,7 +9669,7 @@ var DxcFileInput = (0, import_react54.forwardRef)(
             onDragOver: handleDrag,
             onDragLeave: handleDragOut,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                 Button_default,
                 {
                   mode: "secondary",
@@ -9712,11 +9679,11 @@ var DxcFileInput = (0, import_react54.forwardRef)(
                   size: { width: "fitContent", height: "medium" }
                 }
               ),
-              mode === "dropzone" ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
+              mode === "dropzone" ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
             ]
           }
         ),
-        files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+        files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -9738,7 +9705,7 @@ var FileInput_default = DxcFileInput;
 
 // src/grid/Grid.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Grid = import_styled_components53.default.div`
   display: grid;
   ${(props) => `
@@ -9765,7 +9732,7 @@ var GridItem = import_styled_components53.default.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__ */ (0, import_jsx_runtime59.jsx)(Grid, { ...props });
+var DxcGrid = (props) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Grid, { ...props });
 DxcGrid.Item = GridItem;
 var Grid_default = DxcGrid;
 
@@ -9801,7 +9768,7 @@ var getHeadingWeight = (weight) => {
 };
 
 // src/heading/Heading.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var HeadingContainer = import_styled_components54.default.div`
   margin: ${({ margin }) => margin && typeof margin !== "object" ? spaces[margin] : "0px"};
   margin-top: ${({ margin }) => margin && typeof margin === "object" && margin.top ? spaces[margin.top] : ""};
@@ -9817,12 +9784,12 @@ var Heading = import_styled_components54.default.h1`
   margin: 0;
 `;
 function DxcHeading({ as, level = 1, margin, text, weight = "default" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(HeadingContainer, { margin, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Heading, { as: as ?? `h${level}`, $level: level, $weight: weight, children: text }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(HeadingContainer, { margin, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Heading, { as: as ?? `h${level}`, $level: level, $weight: weight, children: text }) });
 }
 
 // src/image/Image.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var Figure = import_styled_components55.default.figure`
   display: flex;
   flex-direction: column;
@@ -9837,9 +9804,9 @@ var CaptionContainer = import_styled_components55.default.figcaption`
   font-size: var(--typography-label-s);
   font-weight: var(--typography-label-regular);
 `;
-var CaptionWrapper = ({ caption, children }) => caption != null ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Figure, { children: [
+var CaptionWrapper = ({ caption, children }) => caption != null ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Figure, { children: [
   children,
-  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CaptionContainer, { children: caption })
+  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CaptionContainer, { children: caption })
 ] }) : children;
 function DxcImage({
   alt,
@@ -9855,7 +9822,7 @@ function DxcImage({
   srcSet,
   width
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CaptionWrapper, { caption, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CaptionWrapper, { caption, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "img",
     {
       alt,
@@ -9876,9 +9843,9 @@ function DxcImage({
 }
 
 // src/inset/Inset.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     DxcContainer,
     {
       padding: {
@@ -9895,7 +9862,7 @@ function DxcInset({ bottom, children, horizontal, left, right, space, top, verti
 // src/link/Link.tsx
 var import_react55 = require("react");
 var import_styled_components56 = __toESM(require("styled-components"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Link3 = import_styled_components56.default.a`
   all: unset;
   display: inline-flex;
@@ -9958,7 +9925,7 @@ var DxcLink = (0, import_react55.forwardRef)(
     onClick,
     tabIndex = 0,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Link3,
     {
       as: onClick && !href ? "button" : "a",
@@ -9971,9 +9938,9 @@ var DxcLink = (0, import_react55.forwardRef)(
       margin,
       ref,
       ...otherProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(LinkContent, { iconPosition, inheritColor, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(LinkContent, { iconPosition, inheritColor, children: [
         children,
-        icon && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconContainer6, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DxcIcon, { icon }) : icon })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IconContainer6, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DxcIcon, { icon }) : icon })
       ] })
     }
   )
@@ -9993,7 +9960,7 @@ var import_react56 = require("react");
 var NavTabsContext_default = (0, import_react56.createContext)(null);
 
 // src/nav-tabs/Tab.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var TabContainer = import_styled_components57.default.div`
   position: relative;
   display: flex;
@@ -10078,8 +10045,8 @@ var Tab = (0, import_react57.forwardRef)(
           break;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(TabContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DxcInset, { space: "var(--spacing-padding-xs)", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(TabContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DxcInset, { space: "var(--spacing-padding-xs)", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
         TabLink,
         {
           href: !disabled ? href : void 0,
@@ -10099,10 +10066,10 @@ var Tab = (0, import_react57.forwardRef)(
           "aria-disabled": disabled,
           ...otherProps,
           children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IconContainer7, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DxcIcon, { icon }) : icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-s)", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Label6, { disabled, children }),
-              notificationNumber && !disabled && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            icon && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(IconContainer7, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DxcIcon, { icon }) : icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-s)", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Label6, { disabled, children }),
+              notificationNumber && !disabled && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 Badge_default,
                 {
                   mode: "notification",
@@ -10114,7 +10081,7 @@ var Tab = (0, import_react57.forwardRef)(
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Underline, { active })
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Underline, { active })
     ] });
   }
 );
@@ -10155,7 +10122,7 @@ var getNextTabIndex = (array, initialIndex) => {
 };
 
 // src/nav-tabs/NavTabs.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var NavTabsContainer = import_styled_components58.default.div`
   position: relative;
   display: flex;
@@ -10199,9 +10166,9 @@ var DxcNavTabs = ({ iconPosition = "left", tabIndex = 0, children }) => {
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(NavTabsContainer, { onKeyDown: handleOnKeyDown, role: "tablist", "aria-label": "Navigation tabs", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Underline2, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NavTabsContext_default.Provider, { value: contextValue, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(NavTabsContainer, { onKeyDown: handleOnKeyDown, role: "tablist", "aria-label": "Navigation tabs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Underline2, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NavTabsContext_default.Provider, { value: contextValue, children })
   ] });
 };
 DxcNavTabs.Tab = Tab_default;
@@ -10210,7 +10177,7 @@ var NavTabs_default = DxcNavTabs;
 // src/number-input/NumberInput.tsx
 var import_react59 = require("react");
 var import_styled_components59 = __toESM(require("styled-components"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var NumberInputContainer = import_styled_components59.default.div`
   ${({ size }) => size === "fillParent" && "width: 100%;"}
 
@@ -10273,7 +10240,7 @@ var DxcNumberInput = (0, import_react59.forwardRef)(
         input?.removeEventListener("wheel", preventDefault);
       };
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NumberInputContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NumberInputContainer, { ref: numberInputRef, size, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(NumberInputContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(NumberInputContainer, { ref: numberInputRef, size, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       TextInput_default,
       {
         label,
@@ -10305,7 +10272,7 @@ var NumberInput_default = DxcNumberInput;
 // src/paragraph/Paragraph.tsx
 var import_react60 = require("react");
 var import_styled_components60 = __toESM(require("styled-components"));
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var Paragraph = import_styled_components60.default.p`
   display: ${(props) => props.theme.display};
   font-family: "Open Sans", sans-serif;
@@ -10323,13 +10290,13 @@ var Paragraph = import_styled_components60.default.p`
 `;
 function DxcParagraph({ children }) {
   const colorsTheme = (0, import_react60.useContext)(HalstackContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_styled_components60.ThemeProvider, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Paragraph, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_styled_components60.ThemeProvider, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Paragraph, { children }) });
 }
 
 // src/password-input/PasswordInput.tsx
 var import_react61 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var setInputType = (type, element) => {
   element?.getElementsByTagName("input")[0]?.setAttribute("type", type);
 };
@@ -10380,7 +10347,7 @@ var DxcPasswordInput = (0, import_react61.forwardRef)(
         }
       })();
     }, [isPasswordVisible, passwordInput]);
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PasswordInput, { ref, size, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PasswordInput, { ref, size, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       TextInput_default,
       {
         label,
@@ -10434,7 +10401,7 @@ var auxTextStyles = import_styled_components62.css`
 `;
 
 // src/progress-bar/ProgressBar.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var ProgressBarContainer = import_styled_components63.default.div`
   display: flex;
   flex-wrap: wrap;
@@ -10548,17 +10515,17 @@ var DxcProgressBar = ({
   (0, import_react62.useEffect)(() => {
     if (value != null) setInnerValue(value < 0 ? 0 : value > 100 ? 100 : value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(ProgressBarContainer, { overlay, children: [
-    overlay && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Overlay4, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(MainContainer3, { overlay, margin, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Flex_default, { justifyContent: "space-between", children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ProgressBarLabel, { id: labelId, overlay, children: label }),
-        innerValue != null && showValue && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(ProgressBarProgress, { overlay, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ProgressBarContainer, { overlay, children: [
+    overlay && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Overlay4, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(MainContainer3, { overlay, margin, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Flex_default, { justifyContent: "space-between", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ProgressBarLabel, { id: labelId, overlay, children: label }),
+        innerValue != null && showValue && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ProgressBarProgress, { overlay, children: [
           innerValue,
           " %"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         LinearProgress,
         {
           "aria-label": label ? void 0 : ariaLabel,
@@ -10569,7 +10536,7 @@ var DxcProgressBar = ({
           helperText,
           role: "progressbar",
           overlay,
-          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             LinearProgressBar,
             {
               overlay,
@@ -10579,7 +10546,7 @@ var DxcProgressBar = ({
           )
         }
       ),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(HelperText3, { overlay, children: helperText })
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(HelperText3, { overlay, children: helperText })
     ] })
   ] });
 };
@@ -10589,7 +10556,7 @@ var ProgressBar_default = DxcProgressBar;
 var import_react63 = require("react");
 var import_slugify = __toESM(require("slugify"));
 var import_styled_components64 = __toESM(require("styled-components"));
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var QuickNavContainer = import_styled_components64.default.div`
   display: flex;
   flex-direction: column;
@@ -10642,17 +10609,17 @@ var Link4 = import_styled_components64.default.a`
 `;
 function DxcQuickNav({ links, title }) {
   const translatedLabels = (0, import_react63.useContext)(HalstackLanguageContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(QuickNavContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DxcHeading, { level: 5, text: title ?? translatedLabels.quickNav.contentTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ListColumn, { children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("li", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Link4, { href: `#${(0, import_slugify.default)(link.label, { lower: true })}`, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: link.label }) }),
-      link.links?.length && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(QuickNavContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DxcHeading, { level: 5, text: title ?? translatedLabels.quickNav.contentTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ListColumn, { children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Link4, { href: `#${(0, import_slugify.default)(link.label, { lower: true })}`, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: link.label }) }),
+      link.links?.length && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         Link4,
         {
           href: `#${(0, import_slugify.default)(link?.label, { lower: true })}-${(0, import_slugify.default)(sublink?.label, {
             lower: true
           })}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: sublink.label })
+          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { children: sublink.label })
         }
       ) }, sublink.label)) })
     ] }, link.label)) })
@@ -10668,7 +10635,7 @@ var import_react64 = require("react");
 var import_styled_components65 = __toESM(require("styled-components"));
 
 // src/radio-group/utils.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function getRadioInputStyles(disabled, error, readOnly, status) {
   switch (true) {
     case disabled:
@@ -10682,15 +10649,15 @@ function getRadioInputStyles(disabled, error, readOnly, status) {
   }
 }
 var icons2 = {
-  checked: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  checked: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "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__ */ (0, import_jsx_runtime71.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "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",
@@ -10698,7 +10665,7 @@ var icons2 = {
       }
     )
   ] }),
-  unchecked: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  unchecked: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "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",
@@ -10708,7 +10675,7 @@ var icons2 = {
 };
 
 // src/radio-group/RadioInput.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var Label7 = import_styled_components65.default.span`
   color: ${({ disabled }) => disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)"};
   font-family: var(--typography-font-family);
@@ -10757,7 +10724,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
     onClick();
     document.activeElement !== ref.current && ref.current?.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     RadioInputContainer,
     {
       disabled,
@@ -10765,7 +10732,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
       onClick: disabled ? void 0 : handleOnClick,
       readOnly,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           RadioButton,
           {
             "aria-checked": checked,
@@ -10780,7 +10747,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
             children: checked ? icons2.checked : icons2.unchecked
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Label7, { disabled, id: radioLabelId, children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Label7, { disabled, id: radioLabelId, children: label })
       ]
     }
   );
@@ -10788,7 +10755,7 @@ var RadioInput = ({ checked, disabled, error, focused, label, onClick, readOnly,
 var RadioInput_default = (0, import_react64.memo)(RadioInput);
 
 // src/radio-group/RadioGroup.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var RadioGroupContainer = import_styled_components66.default.div`
   box-sizing: border-box;
   display: inline-flex;
@@ -10910,13 +10877,13 @@ var DxcRadioGroup = (0, import_react65.forwardRef)(
           break;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(RadioGroupContainer, { ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Label_default, { disabled, hasMargin: !helperText, id: labelId, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(RadioGroupContainer, { ref, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Label_default, { disabled, hasMargin: !helperText, id: labelId, children: [
         label,
-        optional && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { children: ` ${translatedLabels.formFields.optionalLabel}` })
+        optional && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: ` ${translatedLabels.formFields.optionalLabel}` })
       ] }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
         RadioGroup,
         {
           "aria-disabled": disabled,
@@ -10933,8 +10900,8 @@ var DxcRadioGroup = (0, import_react65.forwardRef)(
           role: "radiogroup",
           stacking,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("input", { disabled, name, readOnly: true, type: "hidden", value: value ?? innerValue ?? "" }),
-            innerOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("input", { disabled, name, readOnly: true, type: "hidden", value: value ?? innerValue ?? "" }),
+            innerOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
               RadioInput_default,
               {
                 checked: (value ?? innerValue) === option.value,
@@ -10954,7 +10921,7 @@ var DxcRadioGroup = (0, import_react65.forwardRef)(
           ]
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
@@ -10993,7 +10960,7 @@ var sortArray = (index, order, resultset) => resultset.slice().sort((element1, e
 });
 
 // src/resultset-table/ResultsetTable.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var ResultsetTableContainer = import_styled_components67.default.div`
   width: ${({ margin }) => calculateWidth10(margin)};
   margin: ${({ margin }) => margin && typeof margin !== "object" ? spaces[margin] : "0px"};
@@ -11069,13 +11036,13 @@ var DxcResultsetTable = ({
       prevRowCountRef.current = rows.length;
     }
   }, [hidePaginator, page, rows]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(ResultsetTableContainer, { margin, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Table_default, { mode, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("tr", { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(ResultsetTableContainer, { margin, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Table_default, { mode, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("tr", { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         "th",
         {
           "aria-sort": column.isSortable ? sortColumnIndex === index ? sortOrder : "none" : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
             SortingHeader,
             {
               "aria-label": column.isSortable ? "Sort column" : void 0,
@@ -11089,8 +11056,8 @@ var DxcResultsetTable = ({
               role: column.isSortable ? "button" : void 0,
               tabIndex: column.isSortable ? tabIndex : -1,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: column.displayValue }),
-                column.isSortable && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { children: column.displayValue }),
+                column.isSortable && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   DxcIcon,
                   {
                     icon: sortColumnIndex === index ? sortOrder === "ascending" ? "arrow_upward" : "arrow_downward" : "unfold_more"
@@ -11102,9 +11069,9 @@ var DxcResultsetTable = ({
         },
         `tableHeader_${index}`
       )) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("tbody", { children: filteredResultset.map((row) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("tr", { children: row.cells.map((cellContent, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("td", { children: cellContent.displayValue }, `resultSetTableCellContent_${cellIndex}`)) }, `resultSetTableCell_${row.id}`)) })
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("tbody", { children: filteredResultset.map((row) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("tr", { children: row.cells.map((cellContent, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("td", { children: cellContent.displayValue }, `resultSetTableCellContent_${cellIndex}`)) }, `resultSetTableCell_${row.id}`)) })
     ] }),
-    !hidePaginator && rows.length > itemsPerPage && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    !hidePaginator && rows.length > itemsPerPage && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       Paginator_default,
       {
         currentPage: page,
@@ -11158,7 +11125,7 @@ var roundUp = (target, step, min, max) => {
 };
 
 // src/slider/Slider.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var SliderContainer = import_styled_components68.default.div`
   display: flex;
   flex-direction: column;
@@ -11318,14 +11285,14 @@ var DxcSlider = (0, import_react67.forwardRef)(
       else if (textInputIntegerValue > maxValue) changeValue(maxValue.toString());
       else changeValue(roundUp(textInputIntegerValue, step, minValue, maxValue).toString());
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(SliderContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Label_default, { id: labelId, disabled, children: label }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(HelperText_default, { disabled, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(MainContainer4, { showInput, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(LimitsValueGrid, { showLimitsValues, children: [
-          showLimitsValues && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(LimitLabel, { disabled, children: minLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(SliderInputContainer, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(SliderContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Label_default, { id: labelId, disabled, children: label }),
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(HelperText_default, { disabled, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(MainContainer4, { showInput, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(LimitsValueGrid, { showLimitsValues, children: [
+          showLimitsValues && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(LimitLabel, { disabled, children: minLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(SliderInputContainer, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
               SliderInput,
               {
                 "aria-label": label ? void 0 : ariaLabel,
@@ -11345,9 +11312,9 @@ var DxcSlider = (0, import_react67.forwardRef)(
                 value: roundedUpValue
               }
             ),
-            marks && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TicksContainer, { children: Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => {
+            marks && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TicksContainer, { children: Array.from({ length: Math.floor((maxValue - minValue) / step) + 1 }, (_, index) => {
               const tick = minValue + index * step;
-              return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                 Tick,
                 {
                   currentTick: roundedUpValue === stepPrecision(tick, step),
@@ -11358,9 +11325,9 @@ var DxcSlider = (0, import_react67.forwardRef)(
               );
             }) })
           ] }),
-          showLimitsValues && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(LimitLabel, { disabled, children: maxLabel })
+          showLimitsValues && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(LimitLabel, { disabled, children: maxLabel })
         ] }),
-        showInput && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        showInput && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           NumberInput_default,
           {
             disabled,
@@ -11382,7 +11349,7 @@ var Slider_default = DxcSlider;
 // src/spinner/Spinner.tsx
 var import_react68 = require("react");
 var import_styled_components69 = __toESM(require("styled-components"));
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var SpinnerContainer = import_styled_components69.default.div`
   ${({ mode }) => mode === "overlay" && `
       position: fixed;
@@ -11529,9 +11496,9 @@ var DxcSpinner = ({
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SpinnerContainer, { margin, mode, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(MainContainer5, { mode, children: [
-    mode === "overlay" && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Overlay5, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SVGTotalTrack, { viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(SpinnerContainer, { margin, mode, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(MainContainer5, { mode, children: [
+    mode === "overlay" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Overlay5, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(SVGTotalTrack, { viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       TotalTrack,
       {
         cx: mode === "small" ? "8" : "70",
@@ -11540,7 +11507,7 @@ var DxcSpinner = ({
         r: mode === "small" ? "6" : "65"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       Spinner,
       {
         "aria-label": !label || mode === "small" ? ariaLabel : void 0,
@@ -11549,7 +11516,7 @@ var DxcSpinner = ({
         "aria-valuemin": determined ? 0 : void 0,
         "aria-valuenow": determined && showValue ? value : void 0,
         role: determined ? "progressbar" : "status",
-        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SVGSpinner, { determined, viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(SVGSpinner, { determined, viewBox: mode === "small" ? "0 0 16 16" : "0 0 140 140", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           CircleSpinner,
           {
             cx: mode === "small" ? "8" : "70",
@@ -11563,9 +11530,9 @@ var DxcSpinner = ({
         ) })
       }
     ),
-    mode !== "small" && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Labels, { mode, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { id: labelId, onMouseEnter: handleLabelOnMouseEnter, children: label }),
-      (value || value === 0) && showValue && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("strong", { children: [
+    mode !== "small" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(TooltipWrapper, { condition: hasTooltip, label, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(Labels, { mode, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { id: labelId, onMouseEnter: handleLabelOnMouseEnter, children: label }),
+      (value || value === 0) && showValue && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("strong", { children: [
         value,
         "%"
       ] })
@@ -11576,7 +11543,7 @@ var Spinner_default = DxcSpinner;
 
 // src/status-light/StatusLight.tsx
 var import_styled_components70 = __toESM(require("styled-components"));
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var getModeColor = (mode) => {
   switch (mode) {
     case "default":
@@ -11633,16 +11600,16 @@ var Label8 = import_styled_components70.default.span`
   white-space: nowrap;
 `;
 function DxcStatusLight({ label, mode = "default", size = "medium" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(StatusLightContainer, { role: "status", size, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Dot, { mode, size, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Label8, { mode, size, children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(StatusLightContainer, { role: "status", size, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Dot, { mode, size, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Label8, { mode, size, children: label })
   ] });
 }
 
 // src/switch/Switch.tsx
 var import_react69 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var sizes7 = {
   small: "60px",
   medium: "240px",
@@ -11753,7 +11720,7 @@ var DxcSwitch = (0, import_react69.forwardRef)(
           break;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       SwitchContainer,
       {
         "aria-checked": checked ?? innerChecked,
@@ -11769,12 +11736,12 @@ var DxcSwitch = (0, import_react69.forwardRef)(
         size,
         tabIndex: disabled ? -1 : tabIndex,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(LabelContainer3, { disabled, labelPosition, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Label9, { children: label }),
-            optional && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(OptionalLabel2, { disabled, children: translatedLabels.formFields.optionalLabel })
+          label && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(LabelContainer3, { disabled, labelPosition, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Label9, { children: label }),
+            optional && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(OptionalLabel2, { disabled, children: translatedLabels.formFields.optionalLabel })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Switch, { checked: checked ?? innerChecked, disabled }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Switch, { checked: checked ?? innerChecked, disabled }),
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             "input",
             {
               "aria-hidden": true,
@@ -11806,7 +11773,7 @@ var TabsContext_default = (0, import_react70.createContext)(null);
 // src/tabs/Tab.tsx
 var import_react71 = require("react");
 var import_styled_components72 = __toESM(require("styled-components"));
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var sharedTabStyles = `
   background-color: var(--color-bg-neutral-lightest);
   color: var(--color-fg-neutral-stronger);
@@ -11877,7 +11844,7 @@ var Underline3 = import_styled_components72.default.span`
   background-color: ${({ active }) => active ? "var(--border-color-primary-stronger)" : "var(--border-color-neutral-medium)"};
 `;
 var DxcTab = (0, import_react71.forwardRef)(
-  ({ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId }, ref) => {
+  ({ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId = label }, ref) => {
     const {
       activeTabId,
       focusedTabId,
@@ -11902,9 +11869,9 @@ var DxcTab = (0, import_react71.forwardRef)(
       if (focusedTabId === tabId) tabRef?.current?.focus();
     }, [focusedTabId, tabId]);
     (0, import_react71.useEffect)(() => {
-      if (active) setActiveTabId?.(tabId);
+      if (active) setActiveTabId?.(tabId ?? "");
     }, [active, tabId, setActiveTabId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Tooltip, { label: title, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
       Tab2,
       {
         "aria-selected": activeTabId === tabId,
@@ -11912,7 +11879,9 @@ var DxcTab = (0, import_react71.forwardRef)(
         hasLabelAndIcon: Boolean(icon && label),
         iconPosition,
         onClick: () => {
-          if (!isControlled) setActiveTabId?.(tabId);
+          if (!isControlled) {
+            setActiveTabId?.(tabId ?? "");
+          }
           onClick?.();
         },
         onKeyDown: handleOnKeyDown,
@@ -11930,12 +11899,13 @@ var DxcTab = (0, import_react71.forwardRef)(
         role: "tab",
         tabIndex: activeTabId === label && !disabled ? tabIndex : -1,
         type: "button",
+        "aria-label": label ?? tabId ?? "tab",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(LabelIconContainer, { iconPosition, children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconContainer8, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DxcIcon, { icon }) : icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Label10, { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(LabelIconContainer, { iconPosition, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(IconContainer8, { children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DxcIcon, { icon }) : icon }),
+            label && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Label10, { children: label })
           ] }),
-          !disabled && notificationNumber && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(BadgeContainer2, { hasLabelAndIcon: Boolean(icon && label), iconPosition, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          !disabled && notificationNumber && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(BadgeContainer2, { hasLabelAndIcon: Boolean(icon && label), iconPosition, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             Badge_default,
             {
               label: typeof notificationNumber === "number" ? notificationNumber : void 0,
@@ -11943,7 +11913,7 @@ var DxcTab = (0, import_react71.forwardRef)(
               size: "small"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Underline3, { active: activeTabId === tabId })
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Underline3, { active: activeTabId === tabId })
         ]
       }
     ) });
@@ -11958,9 +11928,9 @@ var import_styled_components74 = __toESM(require("styled-components"));
 // src/tabs/TabLegacy.tsx
 var import_react72 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var Tab3 = (0, import_react72.forwardRef)(
-  ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
     TabContainer2,
     {
       role: "tab",
@@ -11981,7 +11951,7 @@ var Tab3 = (0, import_react72.forwardRef)(
         onMouseLeave();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
           MainLabelContainer,
           {
             notificationNumber: tab.notificationNumber,
@@ -11989,12 +11959,12 @@ var Tab3 = (0, import_react72.forwardRef)(
             iconPosition,
             disabled: tab.isDisabled,
             children: [
-              tab.icon && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TabIconContainer, { hasLabelAndIcon, iconPosition, children: typeof tab.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DxcIcon, { icon: tab.icon }) : tab.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(LabelContainer4, { disabled: tab.isDisabled, active, children: tab.label })
+              tab.icon && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TabIconContainer, { hasLabelAndIcon, iconPosition, children: typeof tab.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DxcIcon, { icon: tab.icon }) : tab.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LabelContainer4, { disabled: tab.isDisabled, active, children: tab.label })
             ]
           }
         ),
-        tab.notificationNumber && !tab.isDisabled && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(BadgeContainer3, { hasLabelAndIcon, iconPosition, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        tab.notificationNumber && !tab.isDisabled && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(BadgeContainer3, { hasLabelAndIcon, iconPosition, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           Badge_default,
           {
             mode: "notification",
@@ -12106,7 +12076,7 @@ var TabIconContainer = import_styled_components73.default.div`
 var TabLegacy_default = (0, import_react72.memo)(Tab3);
 
 // src/tabs/TabsLegacy.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var useResize = (refTabList) => {
   const [viewWidth, setViewWidth] = (0, import_react73.useState)(0);
   const handleWindowSizeChange = (0, import_react73.useCallback)(() => {
@@ -12303,10 +12273,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__ */ (0, import_jsx_runtime81.jsx)(import_styled_components74.ThemeProvider, { theme: colorsTheme.tabs, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(TabsContainer, { margin, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Underline4, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Tabs, { hasLabelAndIcon, iconPosition, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_styled_components74.ThemeProvider, { theme: colorsTheme.tabs, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(TabsContainer, { margin, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Underline4, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Tabs, { hasLabelAndIcon, iconPosition, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         ScrollIndicator,
         {
           onClick: scrollLeft,
@@ -12315,11 +12285,11 @@ var DxcTabs = ({
           "aria-label": translatedLabels.tabs.scrollLeft,
           tabIndex: scrollLeftEnabled ? tabIndex : -1,
           minHeightTabs,
-          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DxcIcon, { icon: "keyboard_arrow_left" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DxcIcon, { icon: "keyboard_arrow_left" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TabsContent, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(TabsContentScroll, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TabList, { role: "tablist", onKeyDown: handleOnKeyDown, minHeightTabs, children: tabs?.map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TabsContent, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(TabsContentScroll, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TabList, { role: "tablist", onKeyDown: handleOnKeyDown, minHeightTabs, children: tabs?.map((tab, i) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           TabLegacy_default,
           {
             tab,
@@ -12344,7 +12314,7 @@ var DxcTabs = ({
           },
           `tab-${i}`
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           ActiveIndicator,
           {
             tabWidth: activeIndicatorWidth,
@@ -12353,7 +12323,7 @@ var DxcTabs = ({
           }
         )
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         ScrollIndicator,
         {
           onClick: scrollRight,
@@ -12362,7 +12332,7 @@ var DxcTabs = ({
           "aria-label": translatedLabels.tabs.scrollRight,
           tabIndex: scrollRightEnabled ? tabIndex : -1,
           minHeightTabs,
-          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DxcIcon, { icon: "keyboard_arrow_right" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DxcIcon, { icon: "keyboard_arrow_right" })
         }
       )
     ] })
@@ -12488,7 +12458,7 @@ var getPreviousTabIndex2 = (array, initialIndex) => {
 };
 
 // src/tabs/Tabs.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var TabsContainer2 = import_styled_components75.default.div`
   position: relative;
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -12567,7 +12537,7 @@ var DxcTabs2 = ({
     const initialActiveTab = hasActiveChild ? childrenArray.find(
       (child) => (0, import_react74.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     ) : childrenArray.find((child) => (0, import_react74.isValidElement)(child) && !child.props.disabled);
-    return (0, import_react74.isValidElement)(initialActiveTab) ? initialActiveTab.props.tabId : "";
+    return (0, import_react74.isValidElement)(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
   const [countClick, setCountClick] = (0, import_react74.useState)(0);
   const [innerFocusIndex, setInnerFocusIndex] = (0, import_react74.useState)(null);
@@ -12582,7 +12552,7 @@ var DxcTabs2 = ({
     const focusedChild = innerFocusIndex != null ? childrenArray[innerFocusIndex] : null;
     return {
       activeTabId,
-      focusedTabId: (0, import_react74.isValidElement)(focusedChild) ? focusedChild.props.tabId : "",
+      focusedTabId: (0, import_react74.isValidElement)(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
       iconPosition,
       isControlled: childrenArray.some((child) => (0, import_react74.isValidElement)(child) && typeof child.props.active !== "undefined"),
       setActiveTabId,
@@ -12620,7 +12590,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":
@@ -12651,21 +12623,21 @@ var DxcTabs2 = ({
         return total;
       });
   }, []);
-  return children ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(TabsContainer2, { margin, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Underline5, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Tabs2, { children: [
-        viewWidth < totalTabsWidth && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return children ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(TabsContainer2, { margin, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Underline5, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Tabs2, { children: [
+        viewWidth < totalTabsWidth && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           ScrollIndicatorButton,
           {
             "aria-label": translatedLabels.tabs.scrollLeft,
             disabled: !scrollLeftEnabled,
             onClick: scrollLeft,
             tabIndex: scrollLeftEnabled ? tabIndex : -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DxcIcon, { icon: "keyboard_arrow_left" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DxcIcon, { icon: "keyboard_arrow_left" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TabsContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TabsContent2, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           ScrollableTabsList,
           {
             enabled: viewWidth < totalTabsWidth,
@@ -12674,17 +12646,17 @@ var DxcTabs2 = ({
             ref: refTabList,
             role: "tablist",
             translateScroll,
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TabsContext_default.Provider, { value: contextValue, children })
+            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TabsContext_default.Provider, { value: contextValue, children })
           }
         ) }),
-        viewWidth < totalTabsWidth && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        viewWidth < totalTabsWidth && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           ScrollIndicatorButton,
           {
             "aria-label": translatedLabels.tabs.scrollRight,
             disabled: !scrollRightEnabled,
             onClick: scrollRight,
             tabIndex: scrollRightEnabled ? tabIndex : -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(DxcIcon, { icon: "keyboard_arrow_right" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(DxcIcon, { icon: "keyboard_arrow_right" })
           }
         )
       ] })
@@ -12693,7 +12665,7 @@ var DxcTabs2 = ({
       children,
       (child) => (0, import_react74.isValidElement)(child) && child.props.tabId === activeTabId ? child.props.children : null
     )
-  ] }) : tabs != null && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  ] }) : tabs != null && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     TabsLegacy_default,
     {
       activeTabIndex,
@@ -12713,7 +12685,7 @@ var Tabs_default = DxcTabs2;
 // src/textarea/Textarea.tsx
 var import_react75 = require("react");
 var import_styled_components76 = __toESM(require("styled-components"));
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var sizes8 = {
   small: "240px",
   medium: "360px",
@@ -12834,14 +12806,14 @@ var DxcTextarea = (0, import_react75.forwardRef)(
         prevValueRef.current = value ?? innerValue;
       }
     }, [innerValue, rows, value, verticalGrow]);
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(TextareaContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Label_default, { disabled, hasMargin: !helperText, htmlFor: textareaId, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(TextareaContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Label_default, { disabled, hasMargin: !helperText, htmlFor: textareaId, children: [
         label,
         " ",
-        optional && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
+        optional && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: translatedLabels.formFields.optionalLabel })
       ] }),
-      helperText && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      helperText && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(HelperText_default, { disabled, hasMargin: true, children: helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         Textarea,
         {
           "aria-errormessage": error ? errorId : void 0,
@@ -12866,7 +12838,7 @@ var DxcTextarea = (0, import_react75.forwardRef)(
           verticalGrow
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ErrorMessage_default, { error, id: errorId })
+      !disabled && typeof error === "string" && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ErrorMessage_default, { error, id: errorId })
     ] });
   }
 );
@@ -12943,7 +12915,7 @@ function generateUniqueToastId(toasts) {
 
 // src/toast/ToastIcon.tsx
 var import_react77 = require("react");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var ToastIcon = (0, import_react77.memo)(
   ({
     icon,
@@ -12951,15 +12923,15 @@ var ToastIcon = (0, import_react77.memo)(
     loading,
     semantic
   }) => {
-    if (semantic === "default") return typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DxcIcon, { icon }) : icon;
-    else if (semantic === "info" && loading) return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Spinner_default, { inheritColor: true, mode: "small" });
-    else return !hideSemanticIcon && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(DxcIcon, { icon: getSemantic(semantic).icon });
+    if (semantic === "default") return typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DxcIcon, { icon }) : icon;
+    else if (semantic === "info" && loading) return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Spinner_default, { inheritColor: true, mode: "small" });
+    else return !hideSemanticIcon && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(DxcIcon, { icon: getSemantic(semantic).icon });
   }
 );
 var ToastIcon_default = ToastIcon;
 
 // src/toast/Toast.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var fadeInUp = import_styled_components77.keyframes`
   0% {
     transform: translateY(100%);
@@ -13045,13 +13017,13 @@ var DxcToast = ({
     },
     loading ? void 0 : duration
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Toast, { isClosing, role: "status", semantic, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(ContentContainer2, { loading, semantic, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ToastIcon_default, { hideSemanticIcon, icon, loading, semantic }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Message2, { children: message })
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Toast, { isClosing, role: "status", semantic, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(ContentContainer2, { loading, semantic, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ToastIcon_default, { hideSemanticIcon, icon, loading, semantic }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Message2, { children: message })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-xs)", children: [
-      action && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Flex_default, { alignItems: "center", gap: "var(--spacing-gap-xs)", children: [
+      action && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         Button_default,
         {
           icon: action.icon,
@@ -13062,7 +13034,7 @@ var DxcToast = ({
           size: { height: "small" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         ActionIcon_default,
         {
           icon: "clear",
@@ -13089,7 +13061,7 @@ var import_react79 = require("react");
 var ToastContext_default = (0, import_react79.createContext)(null);
 
 // src/toast/ToastsQueue.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var ToastsQueue = import_styled_components78.default.section`
   box-sizing: border-box;
   position: fixed;
@@ -13125,9 +13097,9 @@ function DxcToastsQueue({ children, duration = 3e3 }) {
   (0, import_react80.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(ToastContext_default.Provider, { value: add, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(ToastContext_default.Provider, { value: add, children: [
     isMounted && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         Toast_default,
         {
           duration: adjustedDuration,
@@ -13147,7 +13119,7 @@ function DxcToastsQueue({ children, duration = 3e3 }) {
 // src/toggle-group/ToggleGroup.tsx
 var import_react81 = require("react");
 var import_styled_components79 = __toESM(require("styled-components"));
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var ToggleGroup = import_styled_components79.default.div`
   display: flex;
   &[aria-orientation="vertical"] {
@@ -13227,9 +13199,9 @@ function DxcToggleGroup({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ToggleGroup, { "aria-orientation": orientation, margin, role: "toolbar", children: options.map((option, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ToggleGroup, { "aria-orientation": orientation, margin, role: "toolbar", children: options.map((option, i) => {
     const selected = !option.disabled && isToggleButtonSelected(multiple, option.value, value ?? selectedValue);
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Tooltip, { label: option.title, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Tooltip, { label: option.title, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       ToggleButton,
       {
         "aria-label": option.title,
@@ -13245,8 +13217,8 @@ function DxcToggleGroup({
         selected,
         tabIndex: !option.disabled ? tabIndex : -1,
         children: [
-          option.icon && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(IconContainer9, { children: typeof option.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DxcIcon, { icon: option.icon }) : option.icon }),
-          option.label && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: option.label })
+          option.icon && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(IconContainer9, { children: typeof option.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DxcIcon, { icon: option.icon }) : option.icon }),
+          option.label && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: option.label })
         ]
       }
     ) }, `toggle-${i}-${option.label}`);
@@ -13258,16 +13230,16 @@ var import_react82 = require("react");
 var import_styled_components80 = __toESM(require("styled-components"));
 
 // src/wizard/Icons.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var icons3 = {
-  valid: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  valid: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "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__ */ (0, import_jsx_runtime88.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  invalid: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "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",
@@ -13278,7 +13250,7 @@ var icons3 = {
 var Icons_default2 = icons3;
 
 // src/wizard/Wizard.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var Wizard = import_styled_components80.default.div`
   display: flex;
   flex-direction: ${({ mode }) => mode === "vertical" ? "column" : "row"};
@@ -13407,8 +13379,8 @@ function DxcWizard({
     setInnerCurrentStep(newValue);
     onStepClick?.(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Wizard, { margin, mode, role: "group", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(StepContainer, { lastStep: i === steps.length - 1, mode, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Wizard, { margin, mode, role: "group", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(StepContainer, { lastStep: i === steps.length - 1, mode, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
       Step,
       {
         "aria-current": (currentStep ?? innerCurrent) === i ? "step" : false,
@@ -13420,26 +13392,26 @@ function DxcWizard({
         tabIndex,
         unvisited: i > (currentStep ?? innerCurrent),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(StepIndicator, { hasValidityIcon: step.valid != null, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(StepIndicator, { hasValidityIcon: step.valid != null, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               IconContainer10,
               {
                 current: i === (currentStep ?? innerCurrent),
                 disabled: step.disabled,
                 visited: i < (currentStep ?? innerCurrent),
-                children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DxcIcon, { icon: step.icon }) : step.icon : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Number3, { children: i + 1 })
+                children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(DxcIcon, { icon: step.icon }) : step.icon : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Number3, { children: i + 1 })
               }
             ),
-            step.valid != null && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ValidityIconContainer, { disabled: step.disabled, valid: step.valid, children: step.valid ? Icons_default2.valid : Icons_default2.invalid })
+            step.valid != null && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ValidityIconContainer, { disabled: step.disabled, valid: step.valid, children: step.valid ? Icons_default2.valid : Icons_default2.invalid })
           ] }),
-          (step.label || step.description) && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Flex_default, { direction: "column", alignItems: "flex-start", children: [
-            step.label && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Label11, { children: step.label }),
-            step.description && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Description, { children: step.description })
+          (step.label || step.description) && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Flex_default, { direction: "column", alignItems: "flex-start", children: [
+            step.label && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Label11, { children: step.label }),
+            step.description && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Description, { children: step.description })
           ] })
         ]
       }
     ),
-    i !== steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DividerContainer, { mode, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(DxcDivider, { color: "darkGrey", orientation: mode }) })
+    i !== steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(DividerContainer, { mode, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(DxcDivider, { color: "darkGrey", orientation: mode }) })
   ] }, `step${i}`)) });
 }