@dxc-technology/halstack-react 0.0.0-9559292 → 0.0.0-955a751

package/dist/index.mjs

@@ -1368,7 +1368,7 @@ var defaultTranslatedComponentLabels = {
     logoAlternativeText: "Logo"
   },
   applicationLayout: {
-    visibilityToggleTitle: "Toggle visibility sidenav"
+    visibilityToggleTitle: "Toggle sidenav visibility"
   },
   alert: {
     infoTitleText: "information",
@@ -7787,7 +7787,7 @@ var Chip_default = DxcChip;
 
 // src/layout/ApplicationLayout.tsx
 import { Children, useCallback as useCallback6, useEffect as useEffect10, useRef as useRef12, useState as useState18 } from "react";
-import styled41 from "styled-components";
+import styled42 from "styled-components";
 
 // src/footer/Footer.tsx
 import { useMemo as useMemo9 } from "react";
@@ -8146,15 +8146,126 @@ var Footer_default = DxcFooter;
 
 // src/header/Header.tsx
 import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo10, useRef as useRef11, useState as useState16 } from "react";
-import styled38, { ThemeProvider as ThemeProvider25 } from "styled-components";
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
-var Dropdown = (props) => /* @__PURE__ */ jsx41(HeaderDropdown, { children: /* @__PURE__ */ jsx41(Dropdown_default, { ...props }) });
+import styled39, { ThemeProvider as ThemeProvider25 } from "styled-components";
+
+// src/tooltip/Tooltip.tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import styled38 from "styled-components";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+var triangleIcon = /* @__PURE__ */ jsx41(
+  "svg",
+  {
+    width: "12",
+    height: "6",
+    viewBox: "0 0 12 6",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "none",
+    display: "block",
+    children: /* @__PURE__ */ jsx41(
+      "path",
+      {
+        d: "M0.351562 0L5.30131 4.94975C5.69184 5.34027 6.325 5.34027 6.71552 4.94975L11.6653 0H6.00842H0.351562Z",
+        fill: coreTokens_default.color_grey_800
+      }
+    )
+  }
+);
+var DxcTooltip = ({ position = "bottom", label, children }) => label ? /* @__PURE__ */ jsx41(Tooltip.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs33(Tooltip.Root, { children: [
+  /* @__PURE__ */ jsx41(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx41(TooltipTriggerContainer, { children }) }),
+  /* @__PURE__ */ jsx41(Tooltip.Portal, { children: /* @__PURE__ */ jsxs33(StyledTooltipContent, { side: position, sideOffset: 8, children: [
+    /* @__PURE__ */ jsx41(TooltipContainer, { children: label }),
+    /* @__PURE__ */ jsx41(Tooltip.Arrow, { asChild: true, "aria-hidden": true, children: triangleIcon })
+  ] }) })
+] }) }) : /* @__PURE__ */ jsx41(Fragment6, { children });
+var TooltipTriggerContainer = styled38.div`
+  display: inline-flex;
+  position: relative;
+`;
+var StyledTooltipContent = styled38(Tooltip.Content)`
+  z-index: 2147483647;
+
+  animation-duration: 0.2s;
+  animation-timing-function: ease-out;
+
+  /* Additional optimization to prevent blurry text in certain browsers */
+  -webkit-font-smoothing: antialiased;
+  transform: translateZ(0) scale(1, 1);
+
+  &[data-side="top"] {
+    animation-name: slideUp;
+  }
+  &[data-side="bottom"] {
+    animation-name: slideDown;
+  }
+  &[data-side="left"] {
+    animation-name: slideLeft;
+  }
+  &[data-side="right"] {
+    animation-name: slideRight;
+  }
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes slideLeft {
+    from {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes slideRight {
+    from {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+`;
+var TooltipContainer = styled38.div`
+  box-sizing: border-box;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: ${coreTokens_default.type_scale_01};
+  font-family: ${coreTokens_default.type_sans};
+  max-width: 242px;
+  color: ${coreTokens_default.color_white};
+  background-color: ${coreTokens_default.color_grey_800};
+  border-color: ${coreTokens_default.color_grey_800};
+`;
+var Tooltip_default = DxcTooltip;
+
+// src/header/Header.tsx
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+var Dropdown = (props) => /* @__PURE__ */ jsx42(HeaderDropdown, { children: /* @__PURE__ */ jsx42(Dropdown_default, { ...props }) });
 var getLogoElement = (themeInput, logoLabel) => {
   if (!themeInput)
-    return /* @__PURE__ */ jsxs33("svg", { xmlns: "http://www.w3.org/2000/svg", width: "73", height: "40", viewBox: "0 0 73 40", children: [
-      /* @__PURE__ */ jsx41("title", { children: "DXC Logo" }),
-      /* @__PURE__ */ jsx41("g", { transform: "translate(0)", children: /* @__PURE__ */ jsxs33("g", { children: [
-        /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsxs34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "73", height: "40", viewBox: "0 0 73 40", children: [
+      /* @__PURE__ */ jsx42("title", { children: "DXC Logo" }),
+      /* @__PURE__ */ jsx42("g", { transform: "translate(0)", children: /* @__PURE__ */ jsxs34("g", { children: [
+        /* @__PURE__ */ jsx42(
           "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",
@@ -8162,7 +8273,7 @@ var getLogoElement = (themeInput, logoLabel) => {
             fill: "#010101"
           }
         ),
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           "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",
@@ -8172,11 +8283,11 @@ var getLogoElement = (themeInput, logoLabel) => {
         )
       ] }) })
     ] });
-  else if (typeof themeInput === "string") return /* @__PURE__ */ jsx41(LogoImg2, { alt: logoLabel, src: themeInput });
+  else if (typeof themeInput === "string") return /* @__PURE__ */ jsx42(LogoImg2, { alt: logoLabel, src: themeInput });
   else return themeInput;
 };
-var Content4 = ({ isResponsive, responsiveContent, handleMenu, content }) => {
-  return isResponsive ? /* @__PURE__ */ jsx41(MenuContent, { children: responsiveContent(handleMenu) }) : /* @__PURE__ */ jsx41(ContentContainer, { children: content });
+var Content5 = ({ isResponsive, responsiveContent, handleMenu, content }) => {
+  return isResponsive ? /* @__PURE__ */ jsx42(MenuContent, { children: responsiveContent(handleMenu) }) : /* @__PURE__ */ jsx42(ContentContainer, { children: content });
 };
 var DxcHeader = ({
   underlined = false,
@@ -8217,29 +8328,20 @@ var DxcHeader = ({
   useEffect8(() => {
     !isResponsive && setIsMenuVisible(false);
   }, [isResponsive]);
-  return /* @__PURE__ */ jsx41(ThemeProvider25, { theme: colorsTheme.header, children: /* @__PURE__ */ jsxs33(HeaderContainer2, { underlined, margin, ref, children: [
-    /* @__PURE__ */ jsx41(LogoAnchor, { tabIndex: onClick ? tabIndex : -1, interactuable: onClick ? true : false, onClick, children: /* @__PURE__ */ jsx41(LogoContainer2, { children: headerLogo }) }),
-    isResponsive && responsiveContent && /* @__PURE__ */ jsxs33(Flex_default, { grow: 1, children: [
-      /* @__PURE__ */ jsx41(ChildContainer, { children: /* @__PURE__ */ jsxs33(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
-        /* @__PURE__ */ jsx41(Icon_default, { icon: "menu" }),
+  return /* @__PURE__ */ jsx42(ThemeProvider25, { theme: colorsTheme.header, children: /* @__PURE__ */ jsxs34(HeaderContainer2, { underlined, margin, ref, children: [
+    /* @__PURE__ */ jsx42(LogoAnchor, { tabIndex: onClick ? tabIndex : -1, interactuable: onClick ? true : false, onClick, children: /* @__PURE__ */ jsx42(LogoContainer2, { children: headerLogo }) }),
+    isResponsive && responsiveContent && /* @__PURE__ */ jsxs34(Flex_default, { grow: 1, children: [
+      /* @__PURE__ */ jsx42(ChildContainer, { children: /* @__PURE__ */ jsxs34(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
+        /* @__PURE__ */ jsx42(Icon_default, { icon: "menu" }),
         translatedLabels.header.hamburguerTitle
       ] }) }),
-      /* @__PURE__ */ jsxs33(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
-        /* @__PURE__ */ jsxs33(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ jsx41(ResponsiveLogoContainer, { children: headerResponsiveLogo }),
-          /* @__PURE__ */ jsx41(
-            CloseAction,
-            {
-              tabIndex,
-              onClick: handleMenu,
-              "aria-label": translatedLabels.header.closeIcon,
-              title: translatedLabels.header.closeIcon,
-              children: /* @__PURE__ */ jsx41(Icon_default, { icon: "close" })
-            }
-          )
+      /* @__PURE__ */ jsxs34(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
+        /* @__PURE__ */ jsxs34(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ jsx42(ResponsiveLogoContainer, { children: headerResponsiveLogo }),
+          /* @__PURE__ */ jsx42(Tooltip_default, { label: translatedLabels.header.closeIcon, children: /* @__PURE__ */ jsx42(CloseAction, { tabIndex, onClick: handleMenu, "aria-label": translatedLabels.header.closeIcon, children: /* @__PURE__ */ jsx42(Icon_default, { icon: "close" }) }) })
         ] }),
-        /* @__PURE__ */ jsx41(
-          Content4,
+        /* @__PURE__ */ jsx42(
+          Content5,
           {
             isResponsive,
             responsiveContent,
@@ -8248,10 +8350,10 @@ var DxcHeader = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx41(Overlay2, { onClick: handleMenu, hasVisibility: isMenuVisible })
+      /* @__PURE__ */ jsx42(Overlay2, { onClick: handleMenu, hasVisibility: isMenuVisible })
     ] }),
-    !isResponsive && /* @__PURE__ */ jsx41(
-      Content4,
+    !isResponsive && /* @__PURE__ */ jsx42(
+      Content5,
       {
         isResponsive,
         responsiveContent,
@@ -8262,7 +8364,7 @@ var DxcHeader = ({
   ] }) });
 };
 DxcHeader.Dropdown = Dropdown;
-var HeaderDropdown = styled38.div`
+var HeaderDropdown = styled39.div`
   display: flex;
   button {
     background-color: transparent;
@@ -8271,7 +8373,7 @@ var HeaderDropdown = styled38.div`
     }
   }
 `;
-var HeaderContainer2 = styled38.header`
+var HeaderContainer2 = styled39.header`
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -8283,26 +8385,26 @@ var HeaderContainer2 = styled38.header`
   background-color: ${(props) => props.theme.backgroundColor};
   border-bottom: ${(props) => props.underlined && `${props.theme.underlinedThickness} ${props.theme.underlinedStyle} ${props.theme.underlinedColor}`};
 `;
-var LogoAnchor = styled38.a`
+var LogoAnchor = styled39.a`
   ${(props) => props.interactuable ? "cursor: pointer" : "cursor: default; outline:none;"};
 `;
-var LogoImg2 = styled38.img`
+var LogoImg2 = styled39.img`
   max-height: ${(props) => props.theme.logoHeight};
   width: ${(props) => props.theme.logoWidth};
 `;
-var LogoContainer2 = styled38.div`
+var LogoContainer2 = styled39.div`
   max-height: ${(props) => props.theme.logoHeight};
   width: ${(props) => props.theme.logoWidth};
   vertical-align: middle;
 `;
-var ChildContainer = styled38.div`
+var ChildContainer = styled39.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
   width: calc(100% - 186px);
 `;
-var ContentContainer = styled38.div`
+var ContentContainer = styled39.div`
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -8310,7 +8412,7 @@ var ContentContainer = styled38.div`
   width: calc(100% - 186px);
   color: ${(props) => props.theme.contentColor};
 `;
-var HamburgerTrigger = styled38.button`
+var HamburgerTrigger = styled39.button`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -8339,7 +8441,7 @@ var HamburgerTrigger = styled38.button`
   font-weight: ${(props) => props.theme.hamburguerFontWeight};
   color: ${(props) => props.theme.hamburguerFontColor};
 `;
-var ResponsiveMenu = styled38.div`
+var ResponsiveMenu = styled39.div`
   display: flex;
   flex-direction: column;
   background-color: ${(props) => props.theme.menuBackgroundColor};
@@ -8365,12 +8467,12 @@ var ResponsiveMenu = styled38.div`
   transition-timing-function: ease-in-out;
   box-sizing: border-box;
 `;
-var ResponsiveLogoContainer = styled38.div`
+var ResponsiveLogoContainer = styled39.div`
   max-height: ${(props) => props.theme.logoHeight};
   width: ${(props) => props.theme.logoWidth};
   display: flex;
 `;
-var CloseAction = styled38.button`
+var CloseAction = styled39.button`
   display: flex;
   justify-content: center;
   align-content: center;
@@ -8390,14 +8492,14 @@ var CloseAction = styled38.button`
     width: 24px;
   }
 `;
-var MenuContent = styled38.div`
+var MenuContent = styled39.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height: 100%;
   color: ${(props) => props.theme.contentColor};
 `;
-var Overlay2 = styled38.div`
+var Overlay2 = styled39.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -8419,11 +8521,11 @@ var Header_default = DxcHeader;
 
 // src/sidenav/Sidenav.tsx
 import { createContext as createContext5, forwardRef as forwardRef10, useContext as useContext6, useEffect as useEffect9, useState as useState17 } from "react";
-import styled40, { ThemeProvider as ThemeProvider26 } from "styled-components";
+import styled41, { ThemeProvider as ThemeProvider26 } from "styled-components";
 
 // src/bleed/Bleed.tsx
-import styled39 from "styled-components";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import styled40 from "styled-components";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Bleed({
   space,
   horizontal,
@@ -8434,7 +8536,7 @@ function Bleed({
   left,
   children
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     StyledBleed,
     {
       space,
@@ -8451,7 +8553,7 @@ function Bleed({
 function getSpacingValue(spacingName) {
   return spacingName ? spacingName : "0rem";
 }
-var StyledBleed = styled39.div`
+var StyledBleed = styled40.div`
   ${({ space, horizontal, vertical, top, right, bottom, left }) => `
     margin: -${getSpacingValue(top || vertical || space)} -${getSpacingValue(
   right || horizontal || space
@@ -8469,40 +8571,40 @@ var useResponsiveSidenavVisibility = () => {
 };
 
 // src/sidenav/Sidenav.tsx
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var DxcSidenav = ({ title, children }) => {
   const colorsTheme = useTheme_default();
-  return /* @__PURE__ */ jsx43(ThemeProvider26, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ jsxs34(SidenavContainer, { children: [
+  return /* @__PURE__ */ jsx44(ThemeProvider26, { theme: colorsTheme.sidenav, children: /* @__PURE__ */ jsxs35(SidenavContainer, { children: [
     title,
-    /* @__PURE__ */ jsx43(Flex_default, { direction: "column", gap: "1rem", children })
+    /* @__PURE__ */ jsx44(Flex_default, { direction: "column", gap: "1rem", children })
   ] }) });
 };
-var Title = ({ children }) => /* @__PURE__ */ jsx43(Bleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx43(SidenavTitle, { children }) });
-var Section = ({ children }) => /* @__PURE__ */ jsxs34(Fragment6, { children: [
-  /* @__PURE__ */ jsx43(Bleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx43(Flex_default, { direction: "column", children }) }),
-  /* @__PURE__ */ jsx43(Divider, {})
+var Title = ({ children }) => /* @__PURE__ */ jsx44(Bleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx44(SidenavTitle, { children }) });
+var Section = ({ children }) => /* @__PURE__ */ jsxs35(Fragment7, { children: [
+  /* @__PURE__ */ jsx44(Bleed, { horizontal: "1rem", children: /* @__PURE__ */ jsx44(Flex_default, { direction: "column", children }) }),
+  /* @__PURE__ */ jsx44(Divider, {})
 ] });
 var GroupContext = createContext5(null);
 var Group = ({ title, collapsable = false, icon, children }) => {
   const [collapsed, setCollapsed] = useState17(false);
   const [isSelected, changeIsSelected] = useState17(false);
-  return /* @__PURE__ */ jsx43(GroupContext.Provider, { value: changeIsSelected, children: /* @__PURE__ */ jsxs34(SidenavGroup, { children: [
-    collapsable && title ? /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsx44(GroupContext.Provider, { value: changeIsSelected, children: /* @__PURE__ */ jsxs35(SidenavGroup, { children: [
+    collapsable && title ? /* @__PURE__ */ jsxs35(
       SidenavGroupTitleButton,
       {
         "aria-expanded": !collapsed,
         onClick: () => setCollapsed(!collapsed),
         selectedGroup: collapsed && isSelected,
         children: [
-          /* @__PURE__ */ jsxs34(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            typeof icon === "string" ? /* @__PURE__ */ jsx43(Icon_default, { icon }) : icon,
+          /* @__PURE__ */ jsxs35(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            typeof icon === "string" ? /* @__PURE__ */ jsx44(Icon_default, { icon }) : icon,
             title
           ] }),
-          /* @__PURE__ */ jsx43(Icon_default, { icon: collapsed ? "expand_more" : "expand_less" })
+          /* @__PURE__ */ jsx44(Icon_default, { icon: collapsed ? "expand_more" : "expand_less" })
         ]
       }
-    ) : title && /* @__PURE__ */ jsxs34(SidenavGroupTitle, { children: [
-      typeof icon === "string" ? /* @__PURE__ */ jsx43(Icon_default, { icon }) : icon,
+    ) : title && /* @__PURE__ */ jsxs35(SidenavGroupTitle, { children: [
+      typeof icon === "string" ? /* @__PURE__ */ jsx44(Icon_default, { icon }) : icon,
       title
     ] }),
     !collapsed && children
@@ -8519,7 +8621,7 @@ var Link = forwardRef10(
     useEffect9(() => {
       changeIsGroupSelected?.((isGroupSelected2) => !isGroupSelected2 ? selected : isGroupSelected2);
     }, [selected, changeIsGroupSelected]);
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       SidenavLink,
       {
         selected,
@@ -8530,17 +8632,17 @@ var Link = forwardRef10(
         onClick: handleClick,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsxs34(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            typeof icon === "string" ? /* @__PURE__ */ jsx43(Icon_default, { icon }) : icon,
+          /* @__PURE__ */ jsxs35(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            typeof icon === "string" ? /* @__PURE__ */ jsx44(Icon_default, { icon }) : icon,
             children
           ] }),
-          newWindow && /* @__PURE__ */ jsx43(Icon_default, { icon: "open_in_new" })
+          newWindow && /* @__PURE__ */ jsx44(Icon_default, { icon: "open_in_new" })
         ]
       }
     );
   }
 );
-var SidenavContainer = styled40.div`
+var SidenavContainer = styled41.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -8565,7 +8667,7 @@ var SidenavContainer = styled40.div`
     border-radius: 3px;
   }
 `;
-var SidenavTitle = styled40.div`
+var SidenavTitle = styled41.div`
   display: flex;
   align-items: center;
   padding: 0.5rem 1.2rem;
@@ -8577,7 +8679,7 @@ var SidenavTitle = styled40.div`
   letter-spacing: ${(props) => props.theme.titleFontLetterSpacing};
   text-transform: ${(props) => props.theme.titleFontTextTransform};
 `;
-var Divider = styled40.div`
+var Divider = styled41.div`
   width: 100%;
   height: 1px;
   background-color: ${coreTokens_default.color_grey_400};
@@ -8586,12 +8688,12 @@ var Divider = styled40.div`
     display: none;
   }
 `;
-var SidenavGroup = styled40.div`
+var SidenavGroup = styled41.div`
   a {
     padding: 0.5rem 1.2rem 0.5rem 2.25rem;
   }
 `;
-var SidenavGroupTitle = styled40.span`
+var SidenavGroupTitle = styled41.span`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -8609,7 +8711,7 @@ var SidenavGroupTitle = styled40.span`
     width: 16px;
   }
 `;
-var SidenavGroupTitleButton = styled40.button`
+var SidenavGroupTitleButton = styled41.button`
   all: unset;
   box-sizing: border-box;
   display: flex;
@@ -8644,7 +8746,7 @@ var SidenavGroupTitleButton = styled40.button`
     width: 16px;
   }
 `;
-var SidenavLink = styled40.a`
+var SidenavLink = styled41.a`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8690,9 +8792,9 @@ DxcSidenav.Title = Title;
 var Sidenav_default = DxcSidenav;
 
 // src/layout/Icons.tsx
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 var layoutIcons = {
-  facebookLogo: /* @__PURE__ */ jsx44(
+  facebookLogo: /* @__PURE__ */ jsx45(
     "svg",
     {
       version: "1.1",
@@ -8702,7 +8804,7 @@ var layoutIcons = {
       height: "438.536px",
       viewBox: "0 0 438.536 438.536",
       fill: "#FFFFFF",
-      children: /* @__PURE__ */ jsx44("g", { children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx45("g", { children: /* @__PURE__ */ jsx45(
         "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"
@@ -8710,9 +8812,9 @@ var layoutIcons = {
       ) })
     }
   ),
-  xLogo: /* @__PURE__ */ jsxs35("svg", { width: "256", height: "256", viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx44("rect", { width: "256", height: "256", rx: "40", fill: "white" }),
-    /* @__PURE__ */ jsx44(
+  xLogo: /* @__PURE__ */ jsxs36("svg", { width: "256", height: "256", viewBox: "0 0 256 256", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx45("rect", { width: "256", height: "256", rx: "40", fill: "white" }),
+    /* @__PURE__ */ jsx45(
       "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",
@@ -8720,7 +8822,7 @@ var layoutIcons = {
       }
     )
   ] }),
-  linkedinLogo: /* @__PURE__ */ jsx44(
+  linkedinLogo: /* @__PURE__ */ jsx45(
     "svg",
     {
       version: "1.1",
@@ -8730,7 +8832,7 @@ var layoutIcons = {
       height: "438.536px",
       viewBox: "0 0 438.536 438.536",
       fill: "#FFFFFF",
-      children: /* @__PURE__ */ jsx44("g", { children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx45("g", { children: /* @__PURE__ */ jsx45(
         "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"
@@ -8742,11 +8844,11 @@ var layoutIcons = {
 var Icons_default2 = layoutIcons;
 
 // src/layout/ApplicationLayout.tsx
-import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var year = (/* @__PURE__ */ new Date()).getFullYear();
-var Main = ({ children }) => /* @__PURE__ */ jsx45(Fragment7, { children });
-var defaultHeader = () => /* @__PURE__ */ jsx45(Header_default, { underlined: true });
-var defaultFooter = () => /* @__PURE__ */ jsx45(
+var Main = ({ children }) => /* @__PURE__ */ jsx46(Fragment8, { children });
+var defaultHeader = () => /* @__PURE__ */ jsx46(Header_default, { underlined: true });
+var defaultFooter = () => /* @__PURE__ */ jsx46(
   Footer_default,
   {
     copyright: `\xA9 DXC Technology ${year}\u200B\u200B\u200B\u200B. All rights reserved.`,
@@ -8815,30 +8917,29 @@ var DxcApplicationLayout = ({
   useEffect10(() => {
     !isResponsive && setIsSidenavVisibleResponsive(false);
   }, [isResponsive]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     ApplicationLayoutContainer,
     {
       hasSidenav: sidenav ? true : false,
       isSidenavVisible: isSidenavVisibleResponsive,
       ref,
       children: [
-        /* @__PURE__ */ jsx45(HeaderContainer3, { children: headerContent }),
-        sidenav && isResponsive && /* @__PURE__ */ jsx45(VisibilityToggle, { children: /* @__PURE__ */ jsxs36(
+        /* @__PURE__ */ jsx46(HeaderContainer3, { children: headerContent }),
+        sidenav && isResponsive && /* @__PURE__ */ jsx46(VisibilityToggle, { children: /* @__PURE__ */ jsx46(Tooltip_default, { label: translatedLabels.applicationLayout.visibilityToggleTitle, children: /* @__PURE__ */ jsxs37(
           HamburgerTrigger2,
           {
             onClick: handleSidenavVisibility,
             "aria-label": visibilityToggleLabel ? void 0 : translatedLabels.applicationLayout.visibilityToggleTitle,
-            title: translatedLabels.applicationLayout.visibilityToggleTitle,
             children: [
-              /* @__PURE__ */ jsx45(Icon_default, { icon: "Menu" }),
+              /* @__PURE__ */ jsx46(Icon_default, { icon: "Menu" }),
               visibilityToggleLabel
             ]
           }
-        ) }),
-        /* @__PURE__ */ jsxs36(BodyContainer, { children: [
-          /* @__PURE__ */ jsx45(SidenavContextProvider, { value: setIsSidenavVisibleResponsive, children: sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /* @__PURE__ */ jsx45(SidenavContainer2, { children: sidenav }) }),
-          /* @__PURE__ */ jsxs36(MainContainer2, { children: [
-            /* @__PURE__ */ jsx45(MainContentContainer, { children: main }),
+        ) }) }),
+        /* @__PURE__ */ jsxs37(BodyContainer, { children: [
+          /* @__PURE__ */ jsx46(SidenavContextProvider, { value: setIsSidenavVisibleResponsive, children: sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /* @__PURE__ */ jsx46(SidenavContainer2, { children: sidenav }) }),
+          /* @__PURE__ */ jsxs37(MainContainer2, { children: [
+            /* @__PURE__ */ jsx46(MainContentContainer, { children: main }),
             footerContent
           ] })
         ] })
@@ -8846,7 +8947,7 @@ var DxcApplicationLayout = ({
     }
   );
 };
-var ApplicationLayoutContainer = styled41.div`
+var ApplicationLayoutContainer = styled42.div`
   position: absolute;
   top: 64px;
   bottom: 0;
@@ -8860,14 +8961,14 @@ var ApplicationLayoutContainer = styled41.div`
     ${(props) => props.isSidenavVisible && "overflow: hidden;"}
   }
 `;
-var HeaderContainer3 = styled41.div`
+var HeaderContainer3 = styled42.div`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 3;
 `;
-var VisibilityToggle = styled41.div`
+var VisibilityToggle = styled42.div`
   position: fixed;
   top: 64px;
   left: 0;
@@ -8881,7 +8982,7 @@ var VisibilityToggle = styled41.div`
   user-select: none;
   z-index: 2;
 `;
-var HamburgerTrigger2 = styled41.button`
+var HamburgerTrigger2 = styled42.button`
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -8910,12 +9011,12 @@ var HamburgerTrigger2 = styled41.button`
     font-size: 20px;
   }
 `;
-var BodyContainer = styled41.div`
+var BodyContainer = styled42.div`
   display: flex;
   flex-direction: row;
   flex: 1;
 `;
-var SidenavContainer2 = styled41.div`
+var SidenavContainer2 = styled42.div`
   position: sticky;
   top: 64px;
   display: flex;
@@ -8928,12 +9029,12 @@ var SidenavContainer2 = styled41.div`
     height: 100%;
   }
 `;
-var MainContainer2 = styled41.div`
+var MainContainer2 = styled42.div`
   display: flex;
   flex-direction: column;
   width: 100%;
 `;
-var MainContentContainer = styled41.main`
+var MainContentContainer = styled42.main`
   flex: 1;
   background-color: #fff;
 `;
@@ -8947,117 +9048,6 @@ var ApplicationLayout_default = DxcApplicationLayout;
 // src/toggle-group/ToggleGroup.tsx
 import { useId as useId9, useState as useState19 } from "react";
 import styled43, { ThemeProvider as ThemeProvider27 } from "styled-components";
-
-// src/tooltip/Tooltip.tsx
-import * as Tooltip from "@radix-ui/react-tooltip";
-import styled42 from "styled-components";
-import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
-var triangleIcon = /* @__PURE__ */ jsx46(
-  "svg",
-  {
-    width: "12",
-    height: "6",
-    viewBox: "0 0 12 6",
-    xmlns: "http://www.w3.org/2000/svg",
-    preserveAspectRatio: "none",
-    display: "block",
-    children: /* @__PURE__ */ jsx46(
-      "path",
-      {
-        d: "M0.351562 0L5.30131 4.94975C5.69184 5.34027 6.325 5.34027 6.71552 4.94975L11.6653 0H6.00842H0.351562Z",
-        fill: coreTokens_default.color_grey_800
-      }
-    )
-  }
-);
-var DxcTooltip = ({ position = "bottom", label, children }) => label ? /* @__PURE__ */ jsx46(Tooltip.Provider, { delayDuration: 300, children: /* @__PURE__ */ jsxs37(Tooltip.Root, { children: [
-  /* @__PURE__ */ jsx46(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx46(TooltipTriggerContainer, { children }) }),
-  /* @__PURE__ */ jsx46(Tooltip.Portal, { children: /* @__PURE__ */ jsxs37(StyledTooltipContent, { side: position, sideOffset: 8, children: [
-    /* @__PURE__ */ jsx46(TooltipContainer, { children: label }),
-    /* @__PURE__ */ jsx46(Tooltip.Arrow, { asChild: true, "aria-hidden": true, children: triangleIcon })
-  ] }) })
-] }) }) : /* @__PURE__ */ jsx46(Fragment8, { children });
-var TooltipTriggerContainer = styled42.div`
-  display: inline-flex;
-  position: relative;
-`;
-var StyledTooltipContent = styled42(Tooltip.Content)`
-  z-index: 2147483647;
-
-  animation-duration: 0.2s;
-  animation-timing-function: ease-out;
-
-  /* Additional optimization to prevent blurry text in certain browsers */
-  -webkit-font-smoothing: antialiased;
-  transform: translateZ(0) scale(1, 1);
-
-  &[data-side="top"] {
-    animation-name: slideUp;
-  }
-  &[data-side="bottom"] {
-    animation-name: slideDown;
-  }
-  &[data-side="left"] {
-    animation-name: slideLeft;
-  }
-  &[data-side="right"] {
-    animation-name: slideRight;
-  }
-  @keyframes slideDown {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  @keyframes slideUp {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  @keyframes slideLeft {
-    from {
-      opacity: 0;
-      transform: translateX(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-  @keyframes slideRight {
-    from {
-      opacity: 0;
-      transform: translateX(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-`;
-var TooltipContainer = styled42.div`
-  box-sizing: border-box;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: ${coreTokens_default.type_scale_01};
-  font-family: ${coreTokens_default.type_sans};
-  max-width: 242px;
-  color: ${coreTokens_default.color_white};
-  background-color: ${coreTokens_default.color_grey_800};
-  border-color: ${coreTokens_default.color_grey_800};
-`;
-var Tooltip_default = DxcTooltip;
-
-// src/toggle-group/ToggleGroup.tsx
 import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 var DxcToggleGroup = ({
   label,