@dxc-technology/halstack-react 15.1.2 → 15.2.1

package/dist/index.mjs

@@ -731,13 +731,13 @@ var componentTokens = {
     logoHeight: "40px",
     logoWidth: "auto",
     menuBackgroundColor: coreTokens_default.color_white,
-    menuZindex: "2000",
+    menuZindex: "210",
     menuTabletWidth: "60vw",
     menuMobileWidth: "100vw",
     minHeight: "64px",
     overlayColor: coreTokens_default.color_grey_800_a,
     overlayOpacity: "0.7",
-    overlayZindex: "1600",
+    overlayZindex: "200",
     paddingTop: coreTokens_default.spacing_0,
     paddingBottom: coreTokens_default.spacing_0,
     paddingRight: coreTokens_default.spacing_24,
@@ -1557,7 +1557,11 @@ var defaultTranslatedComponentLabels = {
     itemsPerPageText: "Items per page: ",
     minToMaxOfText: (minNumberOfItems, maxNumberOfItems, totalItems) => `${minNumberOfItems} to ${maxNumberOfItems} of ${totalItems}`,
     goToPageText: "Go to page:",
-    pageOfText: (pageNumber, totalPagesNumber) => `Page: ${pageNumber} of ${totalPagesNumber}`
+    pageOfText: (pageNumber, totalPagesNumber) => `Page: ${pageNumber} of ${totalPagesNumber}`,
+    firstResultsTitle: "First results",
+    previousResultsTitle: "Previous results",
+    nextResultsTitle: "Next results",
+    lastResultsTitle: "Last results"
   },
   passwordInput: {
     inputShowPasswordTitle: "Show password",
@@ -2369,7 +2373,7 @@ var TooltipTriggerContainer = styled6.div`
   display: inline-flex;
 `;
 var StyledTooltipContent = styled6(Content)`
-  z-index: 2147483647;
+  z-index: 600;
 
   animation-duration: 0.2s;
   animation-timing-function: ease-out;
@@ -3100,7 +3104,7 @@ var Modal = styled10.div`
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: 430;
 `;
 var Overlay = styled10.div`
   position: fixed;
@@ -3113,7 +3117,6 @@ var ModalAlertContainer = styled10.div`
   box-sizing: border-box;
   max-width: 80%;
   min-width: 696px;
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;
@@ -4052,7 +4055,7 @@ var DxcDropdown = ({
             visualFocusIndex,
             menuItemOnClick: handleMenuItemOnClick,
             onKeyDown: handleMenuOnKeyDown,
-            styles: { width, zIndex: "2147483647" },
+            styles: { width, zIndex: "310" },
             ref: menuRef
           }
         ) }) })
@@ -4797,7 +4800,7 @@ var HeaderContainer2 = styled19.div`
   top: 0;
   left: 0;
   right: 0;
-  z-index: 3;
+  z-index: 100;
 `;
 var VisibilityToggle = styled19.div`
   position: fixed;
@@ -4811,7 +4814,7 @@ var VisibilityToggle = styled19.div`
   width: 100%;
   background-color: #f2f2f2;
   user-select: none;
-  z-index: 2;
+  z-index: 1;
 `;
 var HamburgerTrigger2 = styled19.button`
   display: flex;
@@ -4852,7 +4855,7 @@ var SidenavContainer2 = styled19.div`
   top: 64px;
   display: flex;
   height: calc(100vh - 64px);
-  z-index: 1;
+  z-index: 110;
 
   @media (max-width: ${responsiveSizes.large}rem) {
     position: absolute;
@@ -6040,14 +6043,223 @@ function DxcContextualMenu({ items }) {
 }
 
 // src/data-grid/DataGrid.tsx
-import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo10, useState as useState17 } from "react";
+import { useContext as useContext25, useEffect as useEffect8, useMemo as useMemo11, useState as useState18 } from "react";
 import DataGrid from "react-data-grid";
-import styled37, { ThemeProvider as ThemeProvider17 } from "styled-components";
+import styled38, { ThemeProvider as ThemeProvider18 } from "styled-components";
 import "react-data-grid/lib/styles.css";
 
 // src/data-grid/utils.tsx
+import { useState as useState15 } from "react";
 import { textEditor } from "react-data-grid";
+
+// src/spinner/Spinner.tsx
+import { useContext as useContext20, useId as useId7, useMemo as useMemo9 } from "react";
+import styled32, { ThemeProvider as ThemeProvider14 } from "styled-components";
 import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+var DxcSpinner = ({
+  label,
+  value,
+  showValue = false,
+  mode = "large",
+  margin,
+  ariaLabel = "Spinner"
+}) => {
+  const labelId = useId7();
+  const colorsTheme = useContext20(HalstackContext);
+  const determinated = useMemo9(() => value != null && value >= 0 && value <= 100, [value]);
+  return /* @__PURE__ */ jsx38(ThemeProvider14, { theme: colorsTheme.spinner, children: /* @__PURE__ */ jsx38(DXCSpinner, { margin, mode, children: /* @__PURE__ */ jsxs24(SpinnerContainer, { mode, children: [
+    mode === "overlay" && /* @__PURE__ */ jsx38(BackOverlay, {}),
+    /* @__PURE__ */ jsx38(BackgroundSpinner, { children: mode === "small" ? /* @__PURE__ */ jsx38(SVGBackground, { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx38(CircleBackground, { cx: "8", cy: "8", r: "6", mode }) }) : /* @__PURE__ */ jsx38(SVGBackground, { viewBox: "0 0 140 140", children: /* @__PURE__ */ jsx38(CircleBackground, { cx: "70", cy: "70", r: "65", mode }) }) }),
+    /* @__PURE__ */ jsx38(
+      Spinner,
+      {
+        role: "progressbar",
+        "aria-valuenow": determinated && showValue ? value : void 0,
+        "aria-valuemin": determinated ? 0 : void 0,
+        "aria-valuemax": determinated ? 100 : void 0,
+        "aria-labelledby": label && mode !== "small" ? labelId : void 0,
+        "aria-label": !label ? ariaLabel : mode === "small" ? ariaLabel : void 0,
+        children: mode === "small" ? /* @__PURE__ */ jsx38(SVGSpinner, { viewBox: "0 0 16 16", determinated, children: /* @__PURE__ */ jsx38(CircleSpinner, { cx: "8", cy: "8", r: "6", mode, determinated, value }) }) : /* @__PURE__ */ jsx38(SVGSpinner, { viewBox: "0 0 140 140", determinated, children: /* @__PURE__ */ jsx38(CircleSpinner, { cx: "70", cy: "70", r: "65", mode, determinated, value }) })
+      }
+    ),
+    mode !== "small" && /* @__PURE__ */ jsxs24(LabelsContainer2, { children: [
+      label && /* @__PURE__ */ jsx38(SpinnerLabel, { id: labelId, mode, children: label }),
+      (value || value === 0) && showValue && /* @__PURE__ */ jsxs24(SpinnerProgress, { value, mode, showValue, children: [
+        value,
+        "%"
+      ] })
+    ] })
+  ] }) }) });
+};
+var determinateValue = (value, strokeDashArray) => {
+  let val = 0;
+  if (value != null && value >= 0 && value <= 100) {
+    val = strokeDashArray * (1 - value / 100);
+  }
+  return val;
+};
+var DXCSpinner = styled32.div`
+  height: ${(props) => props.mode === "overlay" ? "100vh" : ""};
+  width: ${(props) => props.mode === "overlay" ? "100vw" : ""};
+  display: ${(props) => props.mode === "overlay" ? "flex" : ""};
+  position: ${(props) => props.mode === "overlay" ? "fixed" : ""};
+  top: ${(props) => props.mode === "overlay" ? 0 : ""};
+  left: ${(props) => props.mode === "overlay" ? 0 : ""};
+  justify-content: ${(props) => props.mode === "overlay" ? "center" : ""};
+  align-items: ${(props) => props.mode === "overlay" ? "center" : ""};
+  z-index: ${(props) => props.mode === "overlay" ? 400 : ""};
+
+  margin: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px" : ""};
+  margin-top: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : "" : ""};
+  margin-right: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : "" : ""};
+  margin-bottom: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : "" : ""};
+  margin-left: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : "" : ""};
+`;
+var SpinnerContainer = styled32.div`
+  align-items: center;
+  display: flex;
+  height: ${(props) => props.mode === "small" ? "16px" : "140px"};
+  width: ${(props) => props.mode === "small" ? "16px" : "140px"};
+  justify-content: center;
+  position: relative;
+  background-color: transparent;
+
+  @keyframes spinner-svg {
+    0% {
+      transform: rotateZ(0deg);
+    }
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
+  @keyframes svg-circle-large {
+    0% {
+      stroke-dashoffset: 400;
+      transform: rotate(0);
+    }
+
+    50% {
+      stroke-dashoffset: 75;
+      transform: rotate(45deg);
+    }
+
+    100% {
+      stroke-dashoffset: 400;
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes svg-circle-small {
+    0% {
+      stroke-dashoffset: 35;
+      transform: rotate(0);
+    }
+
+    50% {
+      stroke-dashoffset: 8;
+      transform: rotate(45deg);
+    }
+
+    100% {
+      stroke-dashoffset: 35;
+      transform: rotate(360deg);
+    }
+  }
+`;
+var BackOverlay = styled32.div`
+  width: 100vw;
+  height: 100vh;
+  opacity: 1;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: ${(props) => `${props.theme.overlayBackgroundColor}`};
+  opacity: ${(props) => `${props.theme.overlayOpacity}`};
+`;
+var BackgroundSpinner = styled32.div`
+  height: inherit;
+  width: inherit;
+  position: absolute;
+`;
+var SVGBackground = styled32.svg`
+  height: inherit;
+  width: inherit;
+`;
+var CircleBackground = styled32.circle`
+  animation: none;
+  fill: transparent;
+  stroke: ${(props) => `${props.theme.totalCircleColor}`};
+  stroke-dasharray: ${(props) => props.mode !== "small" ? "409" : "38"};
+  stroke-linecap: initial;
+  stroke-width: ${(props) => props.mode !== "small" ? "8.5px" : "2px"};
+  transform-origin: 50% 50%;
+  vector-effect: non-scaling-stroke;
+`;
+var Spinner = styled32.div`
+  height: inherit;
+  width: inherit;
+  position: relative;
+`;
+var SVGSpinner = styled32.svg`
+  height: inherit;
+  width: inherit;
+  transform: rotate(-90deg);
+  top: 0;
+  left: 0;
+  transform-origin: center;
+  overflow: visible;
+  animation: ${(props) => !props.determinated ? "1.4s linear infinite both spinner-svg" : ""};
+`;
+var CircleSpinner = styled32.circle`
+  fill: transparent;
+  stroke-linecap: initial;
+  vector-effect: non-scaling-stroke;
+  animation: ${(props) => props.determinated ? "none" : props.mode !== "small" ? "1.4s ease-in-out infinite both svg-circle-large" : "1.4s ease-in-out infinite both svg-circle-small"};
+  stroke: ${(props) => props.mode === "overlay" ? props.theme.trackCircleColorOverlay : props.theme.trackCircleColor};
+  transform-origin: ${(props) => !props.determinated ? "50% 50%" : ""};
+  stroke-dasharray: ${(props) => props.mode !== "small" ? "409" : "38"};
+  stroke-width: ${(props) => props.mode !== "small" ? "8.5px" : "2px"};
+  stroke-dashoffset: ${(props) => props.determinated ? props.mode !== "small" ? determinateValue(props.value, 409) : determinateValue(props.value, 38) : ""};
+`;
+var LabelsContainer2 = styled32.div`
+  position: absolute;
+  margin: 0 auto;
+  width: 110px;
+  text-align: center;
+`;
+var SpinnerLabel = styled32.p`
+  margin: 0;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontFamily : props.theme.labelFontFamily};
+  font-weight: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontWeight : props.theme.labelFontWeight};
+  font-size: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontSize : props.theme.labelFontSize};
+  font-style: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontStyle : props.theme.labelFontStyle};
+  color: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.theme.labelFontColor};
+  text-align: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelTextAlign : props.theme.labelTextAlign};
+  letter-spacing: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelLetterSpacing : props.theme.labelLetterSpacing};
+`;
+var SpinnerProgress = styled32.p`
+  margin: 0;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: ${(props) => props.value && props.showValue === true && "block" || "none"};
+  font-family: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily};
+  font-weight: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontWeight : props.theme.progressValueFontWeight};
+  font-size: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontSize : props.theme.progressValueFontSize};
+  font-style: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontStyle : props.theme.progressValueFontStyle};
+  color: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.theme.progressValueFontColor};
+  text-align: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueTextAlign : props.theme.progressValueTextAlign};
+  letter-spacing: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueLetterSpacing : props.theme.progressValueLetterSpacing};
+`;
+var Spinner_default = DxcSpinner;
+
+// src/data-grid/utils.tsx
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var overwriteTheme = (theme) => {
   const newTheme = {
     checkbox: {
@@ -6070,11 +6282,27 @@ var convertToRDGColumns = (gridColumn, summaryRow) => ({
   editable: gridColumn.textEditable,
   headerCellClass: gridColumn.alignment ? `header-align-${gridColumn.alignment}` : `header-align-left`,
   renderEditCell: gridColumn.textEditable ? textEditor : void 0,
-  renderCell: ({ row }) => /* @__PURE__ */ jsx38("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: row[gridColumn.key] }),
-  renderSummaryCell: () => gridColumn.summaryKey ? /* @__PURE__ */ jsx38("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: summaryRow?.[gridColumn.summaryKey] }) : void 0
+  renderCell: ({ row }) => /* @__PURE__ */ jsx39("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: row[gridColumn.key] }),
+  renderSummaryCell: () => gridColumn.summaryKey ? /* @__PURE__ */ jsx39("div", { className: `ellipsis-cell ${gridColumn.alignment ? `align-${gridColumn.alignment}` : "align-left"}`, children: summaryRow?.[gridColumn.summaryKey] }) : void 0
 });
-var renderSortStatus = ({ sortDirection }) => /* @__PURE__ */ jsx38("div", { className: "sortIconContainer", children: sortDirection !== void 0 ? sortDirection === "ASC" ? /* @__PURE__ */ jsx38(Icon_default, { icon: "Keyboard_Arrow_Up" }) : /* @__PURE__ */ jsx38(Icon_default, { icon: "Keyboard_Arrow_Down" }) : /* @__PURE__ */ jsx38(Icon_default, { icon: "Expand_All" }) });
-var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @__PURE__ */ jsx38(
+var renderSortStatus = ({ sortDirection }) => /* @__PURE__ */ jsx39("div", { className: "sortIconContainer", children: sortDirection !== void 0 ? sortDirection === "ASC" ? /* @__PURE__ */ jsx39(Icon_default, { icon: "Keyboard_Arrow_Up" }) : /* @__PURE__ */ jsx39(Icon_default, { icon: "Keyboard_Arrow_Down" }) : /* @__PURE__ */ jsx39(Icon_default, { icon: "Expand_All" }) });
+var expandRow = (row, rows, uniqueRowId) => {
+  const rowIndex = rows.findIndex((r) => r === row);
+  addRow(rows, rowIndex + 1, {
+    isExpandedChildContent: true,
+    [uniqueRowId]: `${rowKeyGetter(row, uniqueRowId)}_expanded`,
+    expandedChildContent: row.expandedContent,
+    triggerRowKey: rowKeyGetter(row, uniqueRowId),
+    expandedContentHeight: row.expandedContentHeight
+  });
+};
+var collapseRow = (row, rows) => {
+  const rowIndex = rows.findIndex((r) => r === row);
+  const newRows = [...rows];
+  deleteRow(newRows, rowIndex + 1);
+  return newRows;
+};
+var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @__PURE__ */ jsx39(
   ActionIcon_default,
   {
     icon: row.contentIsExpanded ? "arrow_drop_down" : "arrow_right",
@@ -6083,50 +6311,63 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
     onClick: () => {
       row.contentIsExpanded = !row.contentIsExpanded;
       if (row.contentIsExpanded) {
-        const rowIndex = rows.findIndex((rowToRender) => row === rowToRender);
         setRowsToRender((currentRows) => {
-          const newRows = [...currentRows];
-          addRow(newRows, rowIndex + 1, {
-            isExpandedChildContent: row.contentIsExpanded,
-            [uniqueRowId]: `${rowKeyGetter(row, uniqueRowId)}_expanded`,
-            expandedChildContent: row.expandedContent,
-            triggerRowKey: rowKeyGetter(row, uniqueRowId),
-            expandedContentHeight: row.expandedContentHeight
-          });
-          return newRows;
+          const finalRows = [...currentRows];
+          expandRow(row, finalRows, uniqueRowId);
+          return finalRows;
         });
       } else {
-        const rowIndex = rows.findIndex((rowToRender) => row === rowToRender);
-        setRowsToRender((currentRows) => {
-          const newRows = [...currentRows];
-          deleteRow(newRows, rowIndex + 1);
-          return newRows;
-        });
+        setRowsToRender((currentRows) => collapseRow(row, [...currentRows]));
       }
     },
     disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
-var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ jsxs24(
-  "button",
-  {
-    type: "button",
-    disabled: !rows.some((row) => uniqueRowId in row),
-    onClick: () => {
-      let newRowsToRender = [...rows];
-      if (!triggerRow.visibleChildren) {
-        const rowIndex = rows.findIndex((rowToRender) => triggerRow === rowToRender);
-        triggerRow.childRows?.forEach((childRow, index) => {
-          childRow.rowLevel = triggerRow.rowLevel && typeof triggerRow.rowLevel === "number" ? triggerRow.rowLevel + 1 : 1;
-          childRow.parentKey = rowKeyGetter(triggerRow, uniqueRowId);
-          addRow(newRowsToRender, rowIndex + 1 + index, childRow);
+var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender, childrenTrigger) => {
+  const [loading, setLoading] = useState15(false);
+  const onClick = async () => {
+    if (loading) return;
+    if (!triggerRow.visibleChildren) {
+      if (childrenTrigger) {
+        setLoading(true);
+        triggerRow.loadingChildren = true;
+        try {
+          const dynamicChildren = await childrenTrigger(true, triggerRow);
+          triggerRow.childRows = dynamicChildren;
+          setRowsToRender((currentRows) => {
+            const newRowsToRender = [...currentRows];
+            if (newRowsToRender.some((row) => rowKeyGetter(row, uniqueRowId) === triggerRow[uniqueRowId])) {
+              const rowIndex = currentRows.findIndex((row) => triggerRow === row);
+              dynamicChildren.forEach((childRow, index) => {
+                childRow.rowLevel = triggerRow.rowLevel && typeof triggerRow.rowLevel === "number" ? triggerRow.rowLevel + 1 : 1;
+                childRow.parentKey = rowKeyGetter(triggerRow, uniqueRowId);
+                addRow(newRowsToRender, rowIndex + 1 + index, childRow);
+              });
+            }
+            return newRowsToRender;
+          });
+        } catch (error) {
+          console.error("Error loading children:", error);
+        } finally {
+          setLoading(false);
+        }
+      } else if (triggerRow.childRows) {
+        setRowsToRender((currentRows) => {
+          const newRowsToRender = [...currentRows];
+          const rowIndex = currentRows.findIndex((row) => triggerRow === row);
+          triggerRow.childRows?.forEach((childRow, index) => {
+            childRow.rowLevel = triggerRow.rowLevel && typeof triggerRow.rowLevel === "number" ? triggerRow.rowLevel + 1 : 1;
+            childRow.parentKey = rowKeyGetter(triggerRow, uniqueRowId);
+            addRow(newRowsToRender, rowIndex + 1 + index, childRow);
+          });
+          return newRowsToRender;
         });
-      } else {
-        const rowsToRemove = [
-          ...rows.filter(
-            (rowToRender) => rowToRender.parentKey && rowToRender.parentKey === rowKeyGetter(triggerRow, uniqueRowId)
-          )
-        ];
+      }
+    } else {
+      setRowsToRender((currentRows) => {
+        const rowsToRemove = rows.filter(
+          (rowToRender) => rowToRender.parentKey && rowToRender.parentKey === rowKeyGetter(triggerRow, uniqueRowId)
+        );
         const rowsToCheck = [...rowsToRemove];
         while (rowsToCheck.length > 0) {
           const currentRow = rowsToCheck.pop();
@@ -6134,7 +6375,7 @@ var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsT
           rowsToRemove.push(...childRows);
           rowsToCheck.push(...childRows);
         }
-        newRowsToRender = rows.filter(
+        const newRowsToRender = currentRows.filter(
           (row) => !rowsToRemove.map((rowToRemove) => {
             if (rowToRemove.visibleChildren) {
               rowToRemove.visibleChildren = false;
@@ -6142,39 +6383,40 @@ var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsT
             return rowKeyGetter(rowToRemove, uniqueRowId);
           }).includes(rowKeyGetter(row, uniqueRowId))
         );
-      }
-      triggerRow.visibleChildren = !triggerRow.visibleChildren;
-      setRowsToRender(newRowsToRender);
-    },
-    children: [
-      /* @__PURE__ */ jsx38(Icon_default, { icon: triggerRow.visibleChildren ? "Keyboard_Arrow_Down" : "Chevron_Right" }),
-      /* @__PURE__ */ jsx38("span", { className: "ellipsis-cell", children: triggerRow[columnKey] })
-    ]
-  }
-);
-var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /* @__PURE__ */ jsx38(
-  Checkbox_default,
-  {
-    checked: selectedRows.has(rowKeyGetter(row, uniqueRowId)),
-    onChange: (checked) => {
-      const selected = new Set(selectedRows);
-      if (checked) {
-        selected.add(rowKeyGetter(row, uniqueRowId));
-      } else {
-        selected.delete(rowKeyGetter(row, uniqueRowId));
-      }
-      if (row.childRows && Array.isArray(row.childRows)) {
-        getChildrenSelection(row.childRows, uniqueRowId, selected, checked);
-      }
-      if (row.parentKey) {
-        getParentSelectedState(rows, row.parentKey, uniqueRowId, selected, checked);
-      }
-      onSelectRows(selected);
-    },
-    disabled: !rows.some((row2) => uniqueRowId in row2)
+        return newRowsToRender;
+      });
+    }
+    triggerRow.visibleChildren = !triggerRow.visibleChildren;
+  };
+  return /* @__PURE__ */ jsxs25("button", { type: "button", disabled: !rows.some((row) => uniqueRowId in row), onClick, children: [
+    loading ? /* @__PURE__ */ jsx39(Spinner_default, { mode: "small" }) : /* @__PURE__ */ jsx39(Icon_default, { icon: triggerRow.visibleChildren ? "Keyboard_Arrow_Down" : "Chevron_Right" }),
+    /* @__PURE__ */ jsx39("span", { className: "ellipsis-cell", children: triggerRow[columnKey] })
+  ] });
+};
+var rowHasHierarchy = (row) => {
+  return Array.isArray(row.childRows) && row.childRows.length > 0 || typeof row.childrenTrigger === "function";
+};
+var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => {
+  const checked = selectedRows.has(rowKeyGetter(row, uniqueRowId));
+  if (row.loadingChildren && row.childRows) {
+    handleCheckboxUpdate(rows, row, uniqueRowId, selectedRows, checked, onSelectRows, true);
+    row.loadingChildren = false;
   }
-);
-var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) => /* @__PURE__ */ jsx38(HalstackProvider, { advancedTheme: overwriteTheme(colorsTheme), children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
+    Checkbox_default,
+    {
+      checked,
+      onChange: (checked2) => {
+        handleCheckboxUpdate(rows, row, uniqueRowId, selectedRows, checked2, onSelectRows);
+      },
+      disabled: (
+        // row.loadingChildren ||
+        !rows.some((row2) => uniqueRowId in row2)
+      )
+    }
+  );
+};
+var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) => /* @__PURE__ */ jsx39(HalstackProvider, { advancedTheme: overwriteTheme(colorsTheme), children: /* @__PURE__ */ jsx39(
   Checkbox_default,
   {
     checked: rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId))),
@@ -6291,15 +6533,17 @@ var rowFinderBasedOnId = (rowList, uniqueRowId, uniqueRowIdValue) => {
   }
   return void 0;
 };
-var getChildrenSelection = (rowList, uniqueRowId, selectedRows, checked) => {
+var getChildrenSelection = (rowList, uniqueRowId, selectedRows, checked, hierarchyValidation) => {
   rowList.forEach((row) => {
     if (row.childRows) {
-      getChildrenSelection(row.childRows, uniqueRowId, selectedRows, checked);
+      getChildrenSelection(row.childRows, uniqueRowId, selectedRows, checked, hierarchyValidation);
     }
     if (checked) {
       selectedRows.add(rowKeyGetter(row, uniqueRowId));
     } else {
-      selectedRows.delete(rowKeyGetter(row, uniqueRowId));
+      if (!hierarchyValidation) {
+        selectedRows.delete(rowKeyGetter(row, uniqueRowId));
+      }
     }
   });
 };
@@ -6323,6 +6567,21 @@ var getParentSelectedState = (rowList, parentKeyValue, uniqueRowId, selectedRows
     getParentSelectedState(rowList, parentRow.parentKey, uniqueRowId, selectedRows, checkedStateToMatch);
   }
 };
+var handleCheckboxUpdate = (rows, row, uniqueRowId, selectedRows, checked, onSelectRows, hierarchyValidation) => {
+  const selected = new Set(selectedRows);
+  if (checked) {
+    selected.add(rowKeyGetter(row, uniqueRowId));
+  } else if (!hierarchyValidation) {
+    selected.delete(rowKeyGetter(row, uniqueRowId));
+  }
+  if (row.childRows && Array.isArray(row.childRows)) {
+    getChildrenSelection(row.childRows, uniqueRowId, selected, checked, hierarchyValidation);
+  }
+  if (row.parentKey) {
+    getParentSelectedState(rows, row.parentKey, uniqueRowId, selected, checked);
+  }
+  onSelectRows?.(selected);
+};
 var getMinItemsPerPageIndex = (currentPageInternal, itemsPerPage, page) => currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
 var getMaxItemsPerPageIndex = (minItemsPerPageIndex, itemsPerPage, rows, page) => minItemsPerPageIndex + itemsPerPage > rows.length ? rows.length : itemsPerPage * page - 1;
 var getPaginatedNodes = (rows, uniqueRowId, start, end) => {
@@ -6344,30 +6603,30 @@ var getPaginatedNodes = (rows, uniqueRowId, start, end) => {
 };
 
 // src/paginator/Paginator.tsx
-import { useContext as useContext22 } from "react";
-import styled35, { ThemeProvider as ThemeProvider15 } from "styled-components";
+import { useContext as useContext23 } from "react";
+import styled36, { ThemeProvider as ThemeProvider16 } from "styled-components";
 
 // src/select/Select.tsx
 import * as Popover2 from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef5,
   useCallback as useCallback6,
-  useContext as useContext21,
-  useId as useId7,
-  useMemo as useMemo9,
+  useContext as useContext22,
+  useId as useId8,
+  useMemo as useMemo10,
   useRef as useRef9,
-  useState as useState16
+  useState as useState17
 } from "react";
-import styled34, { ThemeProvider as ThemeProvider14 } from "styled-components";
+import styled35, { ThemeProvider as ThemeProvider15 } from "styled-components";
 
 // src/select/Listbox.tsx
-import { useContext as useContext20, useLayoutEffect as useLayoutEffect4, useRef as useRef8 } from "react";
-import styled33 from "styled-components";
+import { useContext as useContext21, useLayoutEffect as useLayoutEffect4, useRef as useRef8 } from "react";
+import styled34 from "styled-components";
 
 // src/select/ListOption.tsx
-import styled32 from "styled-components";
-import { useState as useState15 } from "react";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import styled33 from "styled-components";
+import { useState as useState16 } from "react";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var ListOption = ({
   id,
   option,
@@ -6378,12 +6637,12 @@ var ListOption = ({
   isLastOption,
   isSelected
 }) => {
-  const [hasTooltip, setHasTooltip] = useState15(false);
+  const [hasTooltip, setHasTooltip] = useState16(false);
   const handleOnMouseEnter = (event) => {
     const text = event.currentTarget;
     setHasTooltip(text.scrollWidth > text.clientWidth);
   };
-  return /* @__PURE__ */ jsx39(TooltipWrapper, { condition: hasTooltip, label: option.label, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(TooltipWrapper, { condition: hasTooltip, label: option.label, children: /* @__PURE__ */ jsx40(
     OptionItem,
     {
       id,
@@ -6394,7 +6653,7 @@ var ListOption = ({
       selected: isSelected,
       role: "option",
       "aria-selected": !multiple ? isSelected : void 0,
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         StyledOption,
         {
           visualFocused,
@@ -6403,11 +6662,11 @@ var ListOption = ({
           grouped: isGroupedOption,
           multiple,
           children: [
-            multiple && /* @__PURE__ */ jsx39("div", { style: { display: "flex", pointerEvents: "none" }, children: /* @__PURE__ */ jsx39(Checkbox_default, { checked: isSelected, tabIndex: -1 }) }),
-            option.icon && /* @__PURE__ */ jsx39(OptionIcon, { grouped: isGroupedOption, multiple, children: typeof option.icon === "string" ? /* @__PURE__ */ jsx39(Icon_default, { icon: option.icon }) : option.icon }),
-            /* @__PURE__ */ jsxs25(OptionContent, { grouped: isGroupedOption, hasIcon: option.icon ? true : false, multiple, children: [
-              /* @__PURE__ */ jsx39(OptionLabel, { onMouseEnter: handleOnMouseEnter, children: option.label }),
-              !multiple && isSelected && /* @__PURE__ */ jsx39(OptionSelectedIndicator, { children: /* @__PURE__ */ jsx39(Icon_default, { icon: "done" }) })
+            multiple && /* @__PURE__ */ jsx40("div", { style: { display: "flex", pointerEvents: "none" }, children: /* @__PURE__ */ jsx40(Checkbox_default, { checked: isSelected, tabIndex: -1 }) }),
+            option.icon && /* @__PURE__ */ jsx40(OptionIcon, { grouped: isGroupedOption, multiple, children: typeof option.icon === "string" ? /* @__PURE__ */ jsx40(Icon_default, { icon: option.icon }) : option.icon }),
+            /* @__PURE__ */ jsxs26(OptionContent, { grouped: isGroupedOption, hasIcon: option.icon ? true : false, multiple, children: [
+              /* @__PURE__ */ jsx40(OptionLabel, { onMouseEnter: handleOnMouseEnter, children: option.label }),
+              !multiple && isSelected && /* @__PURE__ */ jsx40(OptionSelectedIndicator, { children: /* @__PURE__ */ jsx40(Icon_default, { icon: "done" }) })
             ] })
           ]
         }
@@ -6415,7 +6674,7 @@ var ListOption = ({
     }
   ) });
 };
-var OptionItem = styled32.li`
+var OptionItem = styled33.li`
   padding: 0 0.5rem;
   box-shadow: inset 0 0 0 2px transparent;
   ${(props) => props.visualFocused && `box-shadow: inset 0 0 0 2px ${props.theme.focusListOptionBorderColor};`}
@@ -6429,7 +6688,7 @@ var OptionItem = styled32.li`
     ${(props) => props.selected ? `background-color: ${props.theme.selectedActiveListOptionBackgroundColor};` : `background-color: ${props.theme.unselectedActiveListOptionBackgroundColor};`};
   }
 `;
-var StyledOption = styled32.span`
+var StyledOption = styled33.span`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -6438,7 +6697,7 @@ var StyledOption = styled32.span`
   ${(props) => props.grouped && props.multiple && `padding-left: 16px;`}
   ${(props) => props.last || props.visualFocused || props.selected ? `border-bottom: 1px solid transparent` : `border-bottom: 1px solid ${props.theme.listOptionDividerColor}`};
 `;
-var OptionIcon = styled32.span`
+var OptionIcon = styled33.span`
   margin-left: ${(props) => props.grouped && !props.multiple ? "16px" : "8px"};
   display: grid;
   place-items: center;
@@ -6449,7 +6708,7 @@ var OptionIcon = styled32.span`
     width: 24px;
   }
 `;
-var OptionContent = styled32.span`
+var OptionContent = styled33.span`
   margin-left: ${(props) => props.grouped && !props.multiple && !props.hasIcon ? "16px" : "8px"};
   display: flex;
   justify-content: space-between;
@@ -6457,12 +6716,12 @@ var OptionContent = styled32.span`
   width: 100%;
   overflow: hidden;
 `;
-var OptionLabel = styled32.span`
+var OptionLabel = styled33.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var OptionSelectedIndicator = styled32.span`
+var OptionSelectedIndicator = styled33.span`
   display: flex;
   align-items: center;
   color: ${(props) => props.theme.selectedListOptionIconColor};
@@ -6560,7 +6819,7 @@ var getSelectedOption = (value, options, multiple, optional, optionalItem) => {
 var getSelectedOptionLabel = (placeholder, selectedOption) => Array.isArray(selectedOption) ? selectedOption.length === 0 ? placeholder : selectedOption.map((option) => option.label).join(", ") : selectedOption.label ?? placeholder;
 
 // src/select/Listbox.tsx
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 var Listbox = ({
   id,
   currentValue,
@@ -6574,17 +6833,17 @@ var Listbox = ({
   handleOptionOnClick,
   styles
 }) => {
-  const translatedLabels = useContext20(HalstackLanguageContext);
+  const translatedLabels = useContext21(HalstackLanguageContext);
   const listboxRef = useRef8(null);
   let globalIndex = optional && !multiple ? 0 : -1;
   const mapOptionFunc = (option, mapIndex) => {
     const groupId = `${id}-group-${mapIndex}`;
     if ("options" in option) {
-      return option.options.length > 0 && /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsxs26("ul", { role: "listbox", "aria-labelledby": groupId, style: { padding: 0 }, children: [
-        /* @__PURE__ */ jsx40(GroupLabel, { role: "presentation", id: groupId, children: option.label }),
+      return option.options.length > 0 && /* @__PURE__ */ jsx41("li", { children: /* @__PURE__ */ jsxs27("ul", { role: "listbox", "aria-labelledby": groupId, style: { padding: 0 }, children: [
+        /* @__PURE__ */ jsx41(GroupLabel, { role: "presentation", id: groupId, children: option.label }),
         option.options.map((singleOption) => {
           globalIndex++;
-          return /* @__PURE__ */ jsx40(
+          return /* @__PURE__ */ jsx41(
             ListOption_default,
             {
               id: `${id}-option-${globalIndex}`,
@@ -6602,7 +6861,7 @@ var Listbox = ({
       ] }) }, groupId);
     } else {
       globalIndex++;
-      return /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx41(
         ListOption_default,
         {
           id: `${id}-option-${globalIndex}`,
@@ -6634,7 +6893,7 @@ var Listbox = ({
     });
   }, [visualFocusIndex]);
   const hasOptionGroups = options.some((option) => "options" in option && option.options.length > 0);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     ListboxContainer,
     {
       id,
@@ -6650,10 +6909,10 @@ var Listbox = ({
       role: hasOptionGroups ? "list" : "listbox",
       "aria-label": "List of options",
       children: [
-        searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /* @__PURE__ */ jsxs26(OptionsSystemMessage, { children: [
-          /* @__PURE__ */ jsx40(NoMatchesFoundIcon, { children: /* @__PURE__ */ jsx40(Icon_default, { icon: "search_off" }) }),
+        searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /* @__PURE__ */ jsxs27(OptionsSystemMessage, { children: [
+          /* @__PURE__ */ jsx41(NoMatchesFoundIcon, { children: /* @__PURE__ */ jsx41(Icon_default, { icon: "search_off" }) }),
           translatedLabels.select.noMatchesErrorMessage
-        ] }) : optional && !multiple && /* @__PURE__ */ jsx40(
+        ] }) : optional && !multiple && /* @__PURE__ */ jsx41(
           ListOption_default,
           {
             id: `${id}-option-${0}`,
@@ -6672,7 +6931,7 @@ var Listbox = ({
     }
   );
 };
-var ListboxContainer = styled33.ul`
+var ListboxContainer = styled34.ul`
   box-sizing: border-box;
   max-height: 304px;
   overflow-y: auto;
@@ -6690,14 +6949,14 @@ var ListboxContainer = styled33.ul`
   line-height: 24px;
   cursor: default;
 `;
-var OptionsSystemMessage = styled33.span`
+var OptionsSystemMessage = styled34.span`
   display: flex;
   padding: 4px 16px;
   color: ${(props) => props.theme.systemMessageFontColor};
   font-size: 0.875rem;
   line-height: 1.715em;
 `;
-var NoMatchesFoundIcon = styled33.span`
+var NoMatchesFoundIcon = styled34.span`
   display: flex;
   flex-wrap: wrap;
   align-content: center;
@@ -6707,7 +6966,7 @@ var NoMatchesFoundIcon = styled33.span`
   margin-right: 0.25rem;
   font-size: 16px;
 `;
-var GroupLabel = styled33.li`
+var GroupLabel = styled34.li`
   padding: 4px 16px;
   font-weight: ${(props) => props.theme.listGroupLabelFontWeight};
   line-height: 1.715em;
@@ -6715,7 +6974,7 @@ var GroupLabel = styled33.li`
 var Listbox_default = Listbox;
 
 // src/select/Select.tsx
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var DxcSelect = forwardRef5(
   ({
     label,
@@ -6737,27 +6996,27 @@ var DxcSelect = forwardRef5(
     tabIndex = 0,
     ariaLabel = "Select"
   }, ref) => {
-    const selectId = `select-${useId7()}`;
+    const selectId = `select-${useId8()}`;
     const selectLabelId = `label-${selectId}`;
     const errorId = `error-${selectId}`;
     const listboxId = `${selectId}-listbox`;
-    const [innerValue, setInnerValue] = useState16(defaultValue ?? (multiple ? [] : ""));
-    const [searchValue, setSearchValue] = useState16("");
-    const [visualFocusIndex, changeVisualFocusIndex] = useState16(-1);
-    const [isOpen, changeIsOpen] = useState16(false);
-    const [hasTooltip, setHasTooltip] = useState16(false);
+    const [innerValue, setInnerValue] = useState17(defaultValue ?? (multiple ? [] : ""));
+    const [searchValue, setSearchValue] = useState17("");
+    const [visualFocusIndex, changeVisualFocusIndex] = useState17(-1);
+    const [isOpen, changeIsOpen] = useState17(false);
+    const [hasTooltip, setHasTooltip] = useState17(false);
     const selectRef = useRef9(null);
     const selectSearchInputRef = useRef9(null);
     const width = useWidth_default(selectRef.current);
-    const colorsTheme = useContext21(HalstackContext);
-    const translatedLabels = useContext21(HalstackLanguageContext);
+    const colorsTheme = useContext22(HalstackContext);
+    const translatedLabels = useContext22(HalstackLanguageContext);
     const optionalItem = { label: placeholder, value: "" };
-    const filteredOptions = useMemo9(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
-    const lastOptionIndex = useMemo9(
+    const filteredOptions = useMemo10(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]);
+    const lastOptionIndex = useMemo10(
       () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple),
       [options, filteredOptions, searchable, optional, multiple]
     );
-    const { selectedOption, singleSelectionIndex } = useMemo9(
+    const { selectedOption, singleSelectionIndex } = useMemo10(
       () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem),
       [value, innerValue, options, multiple, optional, optionalItem]
     );
@@ -6943,8 +7202,8 @@ var DxcSelect = forwardRef5(
       const text = event.currentTarget;
       setHasTooltip(text.scrollWidth > text.clientWidth);
     };
-    return /* @__PURE__ */ jsx41(ThemeProvider14, { theme: colorsTheme.select, children: /* @__PURE__ */ jsxs27(SelectContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsx42(ThemeProvider15, { theme: colorsTheme.select, children: /* @__PURE__ */ jsxs28(SelectContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsxs28(
         Label3,
         {
           id: selectLabelId,
@@ -6956,13 +7215,13 @@ var DxcSelect = forwardRef5(
           children: [
             label,
             " ",
-            optional && /* @__PURE__ */ jsx41(OptionalLabel, { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ jsx42(OptionalLabel, { children: translatedLabels.formFields.optionalLabel })
           ]
         }
       ),
-      helperText && /* @__PURE__ */ jsx41(HelperText, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs27(Popover2.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx41(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs27(
+      helperText && /* @__PURE__ */ jsx42(HelperText, { disabled, children: helperText }),
+      /* @__PURE__ */ jsxs28(Popover2.Root, { open: isOpen, children: [
+        /* @__PURE__ */ jsx42(Popover2.Trigger, { asChild: true, type: void 0, children: /* @__PURE__ */ jsxs28(
           Select,
           {
             id: selectId,
@@ -6986,9 +7245,9 @@ var DxcSelect = forwardRef5(
             "aria-required": !disabled && !optional,
             "aria-label": label ? void 0 : ariaLabel,
             children: [
-              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ jsxs27(SelectionIndicator, { children: [
-                /* @__PURE__ */ jsx41(SelectionNumber, { disabled, children: selectedOption.length }),
-                /* @__PURE__ */ jsx41(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx41(
+              multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && /* @__PURE__ */ jsxs28(SelectionIndicator, { children: [
+                /* @__PURE__ */ jsx42(SelectionNumber, { disabled, children: selectedOption.length }),
+                /* @__PURE__ */ jsx42(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx42(
                   ClearOptionsAction,
                   {
                     disabled,
@@ -6998,12 +7257,12 @@ var DxcSelect = forwardRef5(
                     onClick: handleClearOptionsActionOnClick,
                     tabIndex: -1,
                     "aria-label": translatedLabels.select.actionClearSelectionTitle,
-                    children: /* @__PURE__ */ jsx41(Icon_default, { icon: "clear" })
+                    children: /* @__PURE__ */ jsx42(Icon_default, { icon: "clear" })
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsx41(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ jsxs27(SearchableValueContainer, { children: [
-                /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx42(TooltipWrapper, { condition: hasTooltip, label: getSelectedOptionLabel(placeholder, selectedOption), children: /* @__PURE__ */ jsxs28(SearchableValueContainer, { children: [
+                /* @__PURE__ */ jsx42(
                   "input",
                   {
                     style: { display: "none" },
@@ -7014,7 +7273,7 @@ var DxcSelect = forwardRef5(
                     "aria-hidden": "true"
                   }
                 ),
-                searchable && /* @__PURE__ */ jsx41(
+                searchable && /* @__PURE__ */ jsx42(
                   SearchInput,
                   {
                     value: searchValue,
@@ -7027,17 +7286,17 @@ var DxcSelect = forwardRef5(
                     "aria-labelledby": label ? selectLabelId : void 0
                   }
                 ),
-                (!searchable || searchValue === "") && /* @__PURE__ */ jsx41(
+                (!searchable || searchValue === "") && /* @__PURE__ */ jsx42(
                   SelectedOption,
                   {
                     disabled,
                     atBackground: (multiple ? (value ?? innerValue).length === 0 : !(value ?? innerValue)) || searchable && isOpen,
-                    children: /* @__PURE__ */ jsx41(SelectedOptionLabel, { onMouseEnter: handleOnMouseEnter, children: getSelectedOptionLabel(placeholder, selectedOption) })
+                    children: /* @__PURE__ */ jsx42(SelectedOptionLabel, { onMouseEnter: handleOnMouseEnter, children: getSelectedOptionLabel(placeholder, selectedOption) })
                   }
                 )
               ] }) }),
-              !disabled && error && /* @__PURE__ */ jsx41(ErrorIcon, { children: /* @__PURE__ */ jsx41(Icon_default, { icon: "filled_error" }) }),
-              searchable && searchValue.length > 0 && /* @__PURE__ */ jsx41(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx41(
+              !disabled && error && /* @__PURE__ */ jsx42(ErrorIcon, { children: /* @__PURE__ */ jsx42(Icon_default, { icon: "filled_error" }) }),
+              searchable && searchValue.length > 0 && /* @__PURE__ */ jsx42(Tooltip, { label: translatedLabels.select.actionClearSelectionTitle, children: /* @__PURE__ */ jsx42(
                 ClearSearchAction,
                 {
                   onMouseDown: (event) => {
@@ -7046,25 +7305,25 @@ var DxcSelect = forwardRef5(
                   onClick: handleClearSearchActionOnClick,
                   tabIndex: -1,
                   "aria-label": translatedLabels.select.actionClearSearchTitle,
-                  children: /* @__PURE__ */ jsx41(Icon_default, { icon: "clear" })
+                  children: /* @__PURE__ */ jsx42(Icon_default, { icon: "clear" })
                 }
               ) }),
-              /* @__PURE__ */ jsx41(CollapseIndicator2, { disabled, children: /* @__PURE__ */ jsx41(Icon_default, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" }) })
+              /* @__PURE__ */ jsx42(CollapseIndicator2, { disabled, children: /* @__PURE__ */ jsx42(Icon_default, { icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down" }) })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx41(Popover2.Portal, { children: /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(Popover2.Portal, { children: /* @__PURE__ */ jsx42(
           Popover2.Content,
           {
             sideOffset: 4,
-            style: { zIndex: "2147483647" },
+            style: { zIndex: "310" },
             onOpenAutoFocus: (event) => {
               event.preventDefault();
             },
             onCloseAutoFocus: (event) => {
               event.preventDefault();
             },
-            children: /* @__PURE__ */ jsx41(
+            children: /* @__PURE__ */ jsx42(
               Listbox_default,
               {
                 id: listboxId,
@@ -7083,7 +7342,7 @@ var DxcSelect = forwardRef5(
           }
         ) })
       ] }),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx41(Error2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx42(Error2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
     ] }) });
   }
 );
@@ -7094,7 +7353,7 @@ var sizes3 = {
   fillParent: "100%"
 };
 var calculateWidth6 = (margin, size) => size === "fillParent" ? `calc(${sizes3[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : size && sizes3[size];
-var SelectContainer = styled34.div`
+var SelectContainer = styled35.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -7107,7 +7366,7 @@ var SelectContainer = styled34.div`
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   font-family: ${(props) => props.theme.fontFamily};
 `;
-var Label3 = styled34.label`
+var Label3 = styled35.label`
   color: ${(props) => props.disabled ? props.theme.disabledColor : props.theme.labelFontColor};
   font-size: ${(props) => props.theme.labelFontSize};
   font-style: ${(props) => props.theme.labelFontStyle};
@@ -7116,10 +7375,10 @@ var Label3 = styled34.label`
   cursor: default;
   ${(props) => !props.helperText && `margin-bottom: 0.25rem`}
 `;
-var OptionalLabel = styled34.span`
+var OptionalLabel = styled35.span`
   font-weight: ${(props) => props.theme.optionalLabelFontWeight};
 `;
-var HelperText = styled34.span`
+var HelperText = styled35.span`
   color: ${(props) => props.disabled ? props.theme.disabledColor : props.theme.helperTextFontColor};
   font-size: ${(props) => props.theme.helperTextFontSize};
   font-style: ${(props) => props.theme.helperTextFontStyle};
@@ -7127,7 +7386,7 @@ var HelperText = styled34.span`
   line-height: ${(props) => props.theme.helperTextLineHeight};
   margin-bottom: 0.25rem;
 `;
-var Select = styled34.div`
+var Select = styled35.div`
   display: flex;
   position: relative;
   align-items: center;
@@ -7155,7 +7414,7 @@ var Select = styled34.div`
       }
     `};
 `;
-var SelectionIndicator = styled34.div`
+var SelectionIndicator = styled35.div`
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -7164,7 +7423,7 @@ var SelectionIndicator = styled34.div`
   border-radius: 2px;
   border: 1px solid ${(props) => props.theme.selectionIndicatorBorderColor};
 `;
-var SelectionNumber = styled34.span`
+var SelectionNumber = styled35.span`
   display: grid;
   place-items: center;
   border-right: 1px solid ${(props) => props.theme.selectionIndicatorBorderColor};
@@ -7176,7 +7435,7 @@ var SelectionNumber = styled34.span`
   font-weight: ${(props) => props.theme.selectionIndicatorFontWeight};
   ${(props) => props.disabled ? `cursor: not-allowed;` : `cursor: default;`}
 `;
-var ClearOptionsAction = styled34.button`
+var ClearOptionsAction = styled35.button`
   display: grid;
   place-items: center;
   border: none;
@@ -7201,11 +7460,11 @@ var ClearOptionsAction = styled34.button`
       }
     `}
 `;
-var SearchableValueContainer = styled34.div`
+var SearchableValueContainer = styled35.div`
   display: grid;
   width: 100%;
 `;
-var SelectedOption = styled34.span`
+var SelectedOption = styled35.span`
   grid-area: 1 / 1 / 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -7221,12 +7480,12 @@ var SelectedOption = styled34.span`
   font-style: ${(props) => props.theme.valueFontStyle};
   font-weight: ${(props) => props.theme.valueFontWeight};
 `;
-var SelectedOptionLabel = styled34.span`
+var SelectedOptionLabel = styled35.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
-var SearchInput = styled34.input`
+var SearchInput = styled35.input`
   grid-area: 1 / 1 / 1 / 1;
   height: calc(2.5rem - 2px);
   background: none;
@@ -7239,7 +7498,7 @@ var SearchInput = styled34.input`
   font-weight: ${(props) => props.theme.valueFontWeight};
   line-height: 1.5em;
 `;
-var ErrorIcon = styled34.span`
+var ErrorIcon = styled35.span`
   display: flex;
   flex-wrap: wrap;
   align-content: center;
@@ -7250,14 +7509,14 @@ var ErrorIcon = styled34.span`
   color: ${(props) => props.theme.errorIconColor};
   font-size: 1.25rem;
 `;
-var Error2 = styled34.span`
+var Error2 = styled35.span`
   min-height: 1.5em;
   color: ${(props) => props.theme.errorMessageColor};
   font-size: 0.75rem;
   line-height: 1.5em;
   margin-top: 0.25rem;
 `;
-var CollapseIndicator2 = styled34.span`
+var CollapseIndicator2 = styled35.span`
   display: grid;
   place-items: center;
   padding: 4px;
@@ -7265,7 +7524,7 @@ var CollapseIndicator2 = styled34.span`
   margin-left: 0.25rem;
   color: ${(props) => props.disabled ? props.theme.disabledColor : props.theme.collapseIndicatorColor};
 `;
-var ClearSearchAction = styled34.button`
+var ClearSearchAction = styled35.button`
   display: grid;
   place-items: center;
   min-height: 24px;
@@ -7291,7 +7550,7 @@ var ClearSearchAction = styled34.button`
 var Select_default = DxcSelect;
 
 // src/paginator/Paginator.tsx
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var DxcPaginator = ({
   currentPage = 1,
   itemsPerPage = 5,
@@ -7306,12 +7565,12 @@ var DxcPaginator = ({
   const currentPageInternal = currentPage === -1 ? totalPages : currentPage;
   const minItemsPerPage = currentPageInternal === 1 || currentPageInternal === 0 ? currentPageInternal : (currentPageInternal - 1) * itemsPerPage + 1;
   const maxItemsPerPage = minItemsPerPage - 1 + itemsPerPage > totalItems ? totalItems : minItemsPerPage - 1 + itemsPerPage;
-  const colorsTheme = useContext22(HalstackContext);
-  const translatedLabels = useContext22(HalstackLanguageContext);
-  return /* @__PURE__ */ jsx42(ThemeProvider15, { theme: colorsTheme.paginator, children: /* @__PURE__ */ jsx42(DxcPaginatorContainer, { children: /* @__PURE__ */ jsxs28(LabelsContainer2, { children: [
-    itemsPerPageOptions && /* @__PURE__ */ jsxs28(ItemsPageContainer, { children: [
-      /* @__PURE__ */ jsx42(ItemsLabel, { children: translatedLabels.paginator.itemsPerPageText }),
-      /* @__PURE__ */ jsx42(SelectContainer2, { children: /* @__PURE__ */ jsx42(
+  const colorsTheme = useContext23(HalstackContext);
+  const translatedLabels = useContext23(HalstackLanguageContext);
+  return /* @__PURE__ */ jsx43(ThemeProvider16, { theme: colorsTheme.paginator, children: /* @__PURE__ */ jsx43(DxcPaginatorContainer, { children: /* @__PURE__ */ jsxs29(LabelsContainer3, { children: [
+    itemsPerPageOptions && /* @__PURE__ */ jsxs29(ItemsPageContainer, { children: [
+      /* @__PURE__ */ jsx43(ItemsLabel, { children: translatedLabels.paginator.itemsPerPageText }),
+      /* @__PURE__ */ jsx43(SelectContainer2, { children: /* @__PURE__ */ jsx43(
         Select_default,
         {
           options: itemsPerPageOptions.map((num) => ({
@@ -7327,8 +7586,8 @@ var DxcPaginator = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx42(TotalItemsContainer, { children: translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems) }),
-    onPageChange && /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(TotalItemsContainer, { children: translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems) }),
+    onPageChange && /* @__PURE__ */ jsx43(
       Button_default,
       {
         mode: "secondary",
@@ -7338,10 +7597,10 @@ var DxcPaginator = ({
         onClick: () => {
           onPageChange(1);
         },
-        title: "First results"
+        title: translatedLabels.paginator.firstResultsTitle
       }
     ),
-    onPageChange && /* @__PURE__ */ jsx42(
+    onPageChange && /* @__PURE__ */ jsx43(
       Button_default,
       {
         mode: "secondary",
@@ -7351,15 +7610,15 @@ var DxcPaginator = ({
         onClick: () => {
           onPageChange(currentPage - 1);
         },
-        title: "Previous results"
+        title: translatedLabels.paginator.previousResultsTitle
       }
     ),
-    showGoToPage ? /* @__PURE__ */ jsxs28(PageToSelectContainer, { children: [
-      /* @__PURE__ */ jsxs28(GoToLabel, { children: [
+    showGoToPage ? /* @__PURE__ */ jsxs29(PageToSelectContainer, { children: [
+      /* @__PURE__ */ jsxs29(GoToLabel, { children: [
         translatedLabels.paginator.goToPageText,
         " "
       ] }),
-      /* @__PURE__ */ jsx42(SelectContainer2, { children: /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(SelectContainer2, { children: /* @__PURE__ */ jsx43(
         Select_default,
         {
           options: Array.from(Array(totalPages), (e, num) => ({
@@ -7374,8 +7633,8 @@ var DxcPaginator = ({
           tabIndex
         }
       ) })
-    ] }) : /* @__PURE__ */ jsx42("span", { children: translatedLabels.paginator.pageOfText(currentPageInternal, totalPages) }),
-    onPageChange && /* @__PURE__ */ jsx42(
+    ] }) : /* @__PURE__ */ jsx43("span", { children: translatedLabels.paginator.pageOfText(currentPageInternal, totalPages) }),
+    onPageChange && /* @__PURE__ */ jsx43(
       Button_default,
       {
         mode: "secondary",
@@ -7388,7 +7647,7 @@ var DxcPaginator = ({
         title: "Next results"
       }
     ),
-    onPageChange && /* @__PURE__ */ jsx42(
+    onPageChange && /* @__PURE__ */ jsx43(
       Button_default,
       {
         mode: "secondary",
@@ -7403,7 +7662,7 @@ var DxcPaginator = ({
     )
   ] }) }) });
 };
-var DxcPaginatorContainer = styled35.div`
+var DxcPaginatorContainer = styled36.div`
   display: flex;
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.fontSize};
@@ -7421,34 +7680,34 @@ var DxcPaginatorContainer = styled35.div`
     }
   }
 `;
-var SelectContainer2 = styled35.div`
+var SelectContainer2 = styled36.div`
   min-width: 5.25rem;
 `;
-var ItemsPageContainer = styled35.span`
+var ItemsPageContainer = styled36.span`
   display: flex;
   align-items: center;
   margin-right: ${(props) => props.theme.itemsPerPageSelectorMarginRight};
   margin-left: ${(props) => props.theme.itemsPerPageSelectorMarginLeft};
 `;
-var ItemsLabel = styled35.span`
+var ItemsLabel = styled36.span`
   margin-right: 0.5rem;
 `;
-var GoToLabel = styled35.span`
+var GoToLabel = styled36.span`
   margin-right: 0.5rem;
   margin-left: 0.5rem;
 `;
-var TotalItemsContainer = styled35.span`
+var TotalItemsContainer = styled36.span`
   margin-right: ${(props) => props.theme.totalItemsContainerMarginRight};
   margin-left: ${(props) => props.theme.totalItemsContainerMarginLeft};
 `;
-var LabelsContainer2 = styled35.div`
+var LabelsContainer3 = styled36.div`
   display: flex;
   gap: 0.5rem;
   width: 100%;
   justify-content: flex-end;
   align-items: center;
 `;
-var PageToSelectContainer = styled35.span`
+var PageToSelectContainer = styled36.span`
   display: flex;
   align-items: center;
   margin-right: 0.5rem;
@@ -7456,8 +7715,8 @@ var PageToSelectContainer = styled35.span`
 var Paginator_default = DxcPaginator;
 
 // src/table/Table.tsx
-import { useContext as useContext23 } from "react";
-import styled36, { ThemeProvider as ThemeProvider16 } from "styled-components";
+import { useContext as useContext24 } from "react";
+import styled37, { ThemeProvider as ThemeProvider17 } from "styled-components";
 
 // src/table/dropdownTheme.ts
 var dropdownTheme_default2 = {
@@ -7517,7 +7776,7 @@ var dropdownTheme_default2 = {
 };
 
 // src/table/Table.tsx
-import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var overwriteTheme2 = (theme) => {
   const newTheme = dropdownTheme_default2;
   newTheme.dropdown.buttonBackgroundColor = theme.table.actionBackgroundColor;
@@ -7532,10 +7791,10 @@ var DxcActionsCell = ({ actions }) => {
   const actionIcons = actions.filter((action) => !action.options);
   const actionDropdown = actions.find((action) => action.options);
   const maxNumberOfActions = actionDropdown ? 2 : 3;
-  const colorsTheme = useContext23(HalstackContext);
-  return /* @__PURE__ */ jsxs29(Flex_default, { gap: "0.5rem", alignItems: "center", children: [
+  const colorsTheme = useContext24(HalstackContext);
+  return /* @__PURE__ */ jsxs30(Flex_default, { gap: "0.5rem", alignItems: "center", children: [
     actionIcons.map(
-      (action, index) => index < maxNumberOfActions && /* @__PURE__ */ jsx43(
+      (action, index) => index < maxNumberOfActions && /* @__PURE__ */ jsx44(
         ActionIcon_default,
         {
           icon: action.icon,
@@ -7547,7 +7806,7 @@ var DxcActionsCell = ({ actions }) => {
         `action-${index}`
       )
     ),
-    actionDropdown && /* @__PURE__ */ jsx43(HalstackProvider, { advancedTheme: overwriteTheme2(colorsTheme), children: /* @__PURE__ */ jsx43(
+    actionDropdown && /* @__PURE__ */ jsx44(HalstackProvider, { advancedTheme: overwriteTheme2(colorsTheme), children: /* @__PURE__ */ jsx44(
       Dropdown_default,
       {
         options: actionDropdown.options ?? [],
@@ -7561,11 +7820,11 @@ var DxcActionsCell = ({ actions }) => {
   ] });
 };
 var DxcTable = ({ children, margin, mode = "default" }) => {
-  const colorsTheme = useContext23(HalstackContext);
-  return /* @__PURE__ */ jsx43(ThemeProvider16, { theme: colorsTheme.table, children: /* @__PURE__ */ jsx43(DxcTableContainer, { margin, children: /* @__PURE__ */ jsx43(DxcTableContent, { mode, children }) }) });
+  const colorsTheme = useContext24(HalstackContext);
+  return /* @__PURE__ */ jsx44(ThemeProvider17, { theme: colorsTheme.table, children: /* @__PURE__ */ jsx44(DxcTableContainer, { margin, children: /* @__PURE__ */ jsx44(DxcTableContent, { mode, children }) }) });
 };
 var calculateWidth7 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
-var DxcTableContainer = styled36.div`
+var DxcTableContainer = styled37.div`
   width: ${(props) => calculateWidth7(props.margin)};
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
   margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -7587,7 +7846,7 @@ var DxcTableContainer = styled36.div`
     border-radius: 6px;
   }
 `;
-var DxcTableContent = styled36.table`
+var DxcTableContent = styled37.table`
   border-collapse: collapse;
   width: 100%;
 
@@ -7638,8 +7897,8 @@ DxcTable.ActionsCell = DxcActionsCell;
 var Table_default = DxcTable;
 
 // src/data-grid/DataGrid.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
-var ActionContainer = styled37.div`
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+var ActionContainer = styled38.div`
   display: flex;
   height: 100%;
   align-items: center;
@@ -7647,7 +7906,7 @@ var ActionContainer = styled37.div`
   font-size: 14px;
   width: 100%;
 `;
-var HierarchyContainer = styled37.div`
+var HierarchyContainer = styled38.div`
   padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
   button {
     display: grid;
@@ -7666,7 +7925,7 @@ var HierarchyContainer = styled37.div`
     cursor: pointer;
   }
 `;
-var DataGridContainer = styled37.div`
+var DataGridContainer = styled38.div`
   width: 100%;
   height: ${(props) => props.paginatorRendered ? `calc(100% - 50px)` : `100%`};
   .rdg {
@@ -7795,9 +8054,9 @@ var DxcDataGrid = ({
   totalItems,
   defaultPage = 1
 }) => {
-  const [rowsToRender, setRowsToRender] = useState17(rows);
-  const colorsTheme = useContext24(HalstackContext);
-  const [page, changePage] = useState17(defaultPage);
+  const [rowsToRender, setRowsToRender] = useState18([...rows]);
+  const colorsTheme = useContext25(HalstackContext);
+  const [page, changePage] = useState18(defaultPage);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -7815,7 +8074,7 @@ var DxcDataGrid = ({
     }
     setSortColumns(newSortColumns);
   };
-  const columnsToRender = useMemo10(() => {
+  const columnsToRender = useMemo11(() => {
     let expectedColumns = columns.map((column) => convertToRDGColumns(column, summaryRow));
     if (expandable) {
       expectedColumns = [
@@ -7832,22 +8091,29 @@ var DxcDataGrid = ({
             if (row.isExpandedChildContent) {
               return row.expandedChildContent || null;
             }
-            return /* @__PURE__ */ jsx44(ActionContainer, { id: "action", children: row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender) });
+            return /* @__PURE__ */ jsx45(ActionContainer, { id: "action", children: row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender) });
           }
         },
         ...expectedColumns
       ];
     }
-    if (!expandable && rows.some((row) => Array.isArray(row.childRows) && row.childRows.length > 0) && uniqueRowId) {
+    if (!expandable && rows.some((row) => rowHasHierarchy(row)) && uniqueRowId) {
       const firstColumnKey = expectedColumns[0]?.key;
       if (firstColumnKey) {
         expectedColumns[0] = {
           ...expectedColumns[0],
           renderCell({ row }) {
-            if (row.childRows?.length) {
-              return /* @__PURE__ */ jsx44(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, children: renderHierarchyTrigger(rowsToRender, row, uniqueRowId, firstColumnKey, setRowsToRender) });
+            if (rowHasHierarchy(row)) {
+              return /* @__PURE__ */ jsx45(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, children: renderHierarchyTrigger(
+                rowsToRender,
+                row,
+                uniqueRowId,
+                firstColumnKey,
+                setRowsToRender,
+                row.childrenTrigger
+              ) });
             }
-            return /* @__PURE__ */ jsx44(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, className: "ellipsis-cell", children: row[firstColumnKey] });
+            return /* @__PURE__ */ jsx45(HierarchyContainer, { level: typeof row.rowLevel === "number" ? row.rowLevel : 0, className: "ellipsis-cell", children: row[firstColumnKey] });
           }
         };
       }
@@ -7862,40 +8128,35 @@ var DxcDataGrid = ({
           minWidth: 36,
           renderCell({ row }) {
             if (!row.isExpandedChildContent) {
-              return /* @__PURE__ */ jsx44(ActionContainer, { id: "action", children: renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows) });
+              return /* @__PURE__ */ jsx45(ActionContainer, { id: "action", children: renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows) });
             }
             return null;
           },
-          renderHeaderCell: () => /* @__PURE__ */ jsx44(ActionContainer, { id: "action", children: renderHeaderCheckbox(rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) })
+          renderHeaderCell: () => /* @__PURE__ */ jsx45(ActionContainer, { id: "action", children: renderHeaderCheckbox(rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) })
         },
         ...expectedColumns
       ];
     }
     return expectedColumns;
   }, [selectable, expandable, columns, rowsToRender, onSelectRows, rows, summaryRow, uniqueRowId, selectedRows]);
-  const [columnsOrder, setColumnsOrder] = useState17(() => columnsToRender.map((_, index) => index));
-  const [sortColumns, setSortColumns] = useState17([]);
+  const [columnsOrder, setColumnsOrder] = useState18(() => columnsToRender.map((_, index) => index));
+  const [sortColumns, setSortColumns] = useState18([]);
   useEffect8(() => {
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
   useEffect8(() => {
     const finalRows = [...rows];
     if (expandable) {
-      rows.forEach((row, index) => {
-        if (row.contentIsExpanded && !rows.some((row2) => row2[uniqueRowId] === `${rowKeyGetter(row2, uniqueRowId)}_expanded`)) {
-          addRow(finalRows, index + 1, {
-            isExpandedChildContent: row.contentIsExpanded,
-            [uniqueRowId]: `${rowKeyGetter(row, uniqueRowId)}_expanded`,
-            expandedChildContent: row.expandedContent,
-            triggerRowKey: rowKeyGetter(row, uniqueRowId),
-            expandedContentHeight: row.expandedContentHeight
-          });
-        }
+      finalRows.filter((row) => {
+        const rowId = rowKeyGetter(row, uniqueRowId);
+        return row.contentIsExpanded && !rows.some((r) => r[uniqueRowId] === `${rowId}_expanded`);
+      }).forEach((row) => {
+        expandRow(row, finalRows, uniqueRowId);
       });
     }
     setRowsToRender(finalRows);
   }, [rows]);
-  const reorderedColumns = useMemo10(
+  const reorderedColumns = useMemo11(
     () => (
       // Array ordered by columnsOrder
       columnsOrder.map((index) => columnsToRender[index])
@@ -7927,7 +8188,7 @@ var DxcDataGrid = ({
       onGridRowsChange(newRows);
     }
   };
-  const sortedRows = useMemo10(() => {
+  const sortedRows = useMemo11(() => {
     const sortFunctions = getCustomSortFn(columns);
     if (!onSort) {
       if (sortColumns.length > 0 && uniqueRowId) {
@@ -7956,19 +8217,19 @@ var DxcDataGrid = ({
     }
     return rowsToRender;
   }, [expandable, rowsToRender, sortColumns, uniqueRowId]);
-  const minItemsPerPageIndex = useMemo10(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = useMemo10(
+  const minItemsPerPageIndex = useMemo11(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
+  const maxItemsPerPageIndex = useMemo11(
     () => getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page),
     [itemsPerPage, minItemsPerPageIndex, page, rows]
   );
-  const filteredRows = useMemo10(() => {
+  const filteredRows = useMemo11(() => {
     if (onSort && sortColumns?.length > 0) {
       onSort?.(sortColumns?.[0]);
     }
     return !showPaginator || onPageChange ? sortedRows : getPaginatedNodes(sortedRows, uniqueRowId, minItemsPerPageIndex, maxItemsPerPageIndex + 1);
   }, [sortedRows, minItemsPerPageIndex, maxItemsPerPageIndex]);
-  return /* @__PURE__ */ jsx44(ThemeProvider17, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ jsxs30(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(ThemeProvider18, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ jsxs31(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
+    /* @__PURE__ */ jsx45(
       DataGrid,
       {
         columns: reorderedColumns,
@@ -7987,7 +8248,7 @@ var DxcDataGrid = ({
         className: "fill-grid"
       }
     ),
-    showPaginator && (totalItems ?? rows.length) > itemsPerPage && /* @__PURE__ */ jsx44(
+    showPaginator && (itemsPerPageOptions?.some((itemsPerPage2) => (totalItems ?? rows.length) > itemsPerPage2) || (totalItems ?? rows.length) > itemsPerPage) && /* @__PURE__ */ jsx45(
       Paginator_default,
       {
         totalItems: totalItems ?? rows.length,
@@ -8006,28 +8267,28 @@ var DataGrid_default = DxcDataGrid;
 
 // src/date-input/DateInput.tsx
 import {
-  useState as useState22,
+  useState as useState23,
   useRef as useRef12,
   useEffect as useEffect13,
-  useId as useId11,
+  useId as useId12,
   useCallback as useCallback7,
-  useContext as useContext29,
+  useContext as useContext30,
   forwardRef as forwardRef7
 } from "react";
 import dayjs3 from "dayjs";
-import styled44, { ThemeProvider as ThemeProvider19 } from "styled-components";
+import styled45, { ThemeProvider as ThemeProvider20 } from "styled-components";
 import * as Popover4 from "@radix-ui/react-popover";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // src/date-input/DatePicker.tsx
-import { memo as memo7, useContext as useContext26, useState as useState20 } from "react";
+import { memo as memo7, useContext as useContext27, useState as useState21 } from "react";
 import dayjs2 from "dayjs";
-import styled40 from "styled-components";
+import styled41 from "styled-components";
 
 // src/date-input/Calendar.tsx
-import { useContext as useContext25, useState as useState18, useMemo as useMemo11, useEffect as useEffect9, useId as useId8, memo as memo5 } from "react";
-import styled38 from "styled-components";
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useContext as useContext26, useState as useState19, useMemo as useMemo12, useEffect as useEffect9, useId as useId9, memo as memo5 } from "react";
+import styled39 from "styled-components";
+import { jsx as jsx46, jsxs as jsxs32 } from "react/jsx-runtime";
 var getDays = (innerDate) => {
   const monthDayCells = [];
   const lastMonthNumberOfDays = innerDate.set("month", innerDate.get("month") - 1).endOf("month");
@@ -8069,11 +8330,11 @@ var Calendar = ({
   onDaySelect,
   today: today2
 }) => {
-  const [dateToFocus, setDateToFocus] = useState18(getDateToFocus(selectedDate, innerDate, today2));
-  const [isFocusable, setIsFocusable] = useState18(false);
-  const id = useId8();
-  const translatedLabels = useContext25(HalstackLanguageContext);
-  const dayCells = useMemo11(() => getDays(innerDate), [innerDate]);
+  const [dateToFocus, setDateToFocus] = useState19(getDateToFocus(selectedDate, innerDate, today2));
+  const [isFocusable, setIsFocusable] = useState19(false);
+  const id = useId9();
+  const translatedLabels = useContext26(HalstackLanguageContext);
+  const dayCells = useMemo12(() => getDays(innerDate), [innerDate]);
   const onDateClickHandler = (date) => {
     const newDate = innerDate.set("month", date.month).set("date", date.day);
     onDaySelect(newDate);
@@ -8167,9 +8428,9 @@ var Calendar = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsxs31(CalendarContainer, { role: "grid", children: [
-    /* @__PURE__ */ jsx45(CalendarHeaderRow, { role: "row", children: translatedLabels.calendar.daysShort.map((weekDay) => /* @__PURE__ */ jsx45(WeekHeaderCell, { role: "columnheader", children: weekDay }, weekDay)) }),
-    /* @__PURE__ */ jsx45(MonthContainer, { onBlur: handleOnBlur, role: "rowgroup", children: divideDaysIntoWeeks(dayCells, translatedLabels.calendar.daysShort.length).map((week, rowIndex) => /* @__PURE__ */ jsx45(WeekContainer, { role: "row", children: week.map((date) => /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs32(CalendarContainer, { role: "grid", children: [
+    /* @__PURE__ */ jsx46(CalendarHeaderRow, { role: "row", children: translatedLabels.calendar.daysShort.map((weekDay) => /* @__PURE__ */ jsx46(WeekHeaderCell, { role: "columnheader", children: weekDay }, weekDay)) }),
+    /* @__PURE__ */ jsx46(MonthContainer, { onBlur: handleOnBlur, role: "rowgroup", children: divideDaysIntoWeeks(dayCells, translatedLabels.calendar.daysShort.length).map((week, rowIndex) => /* @__PURE__ */ jsx46(WeekContainer, { role: "row", children: week.map((date) => /* @__PURE__ */ jsx46(
       DayCellButton,
       {
         id: `${id}_day_${date.day}_month${date.month}`,
@@ -8188,7 +8449,7 @@ var Calendar = ({
     )) }, `${id}_week_${rowIndex}`)) })
   ] });
 };
-var CalendarContainer = styled38.div`
+var CalendarContainer = styled39.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -8200,34 +8461,34 @@ var CalendarContainer = styled38.div`
   color: ${(props) => props.theme.dateInput.pickerFontColor};
   font-weight: ${(props) => props.theme.dateInput.pickerFontWeight};
 `;
-var CalendarHeaderRow = styled38.div`
+var CalendarHeaderRow = styled39.div`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
 `;
-var WeekHeaderCell = styled38.span`
+var WeekHeaderCell = styled39.span`
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
 `;
-var MonthContainer = styled38.div`
+var MonthContainer = styled39.div`
   box-sizing: border-box;
   display: flex;
   gap: 4px;
   flex-direction: column;
   justify-content: space-between;
 `;
-var WeekContainer = styled38.div`
+var WeekContainer = styled39.div`
   box-sizing: border-box;
   display: flex;
   gap: 4px;
   justify-content: space-between;
 `;
-var DayCellButton = styled38.button`
+var DayCellButton = styled39.button`
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -8262,9 +8523,9 @@ var Calendar_default = memo5(Calendar);
 
 // src/date-input/YearPicker.tsx
 import dayjs from "dayjs";
-import { useEffect as useEffect10, useId as useId9, useState as useState19, memo as memo6 } from "react";
-import styled39 from "styled-components";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useId as useId10, useState as useState20, memo as memo6 } from "react";
+import styled40 from "styled-components";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var getYearsArray = () => {
   const yearList2 = [];
   for (let i = 1899; i <= 2100; i++) {
@@ -8274,8 +8535,8 @@ var getYearsArray = () => {
 };
 var yearList = getYearsArray();
 var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
-  const id = useId9();
-  const [yearToFocus, setYearToFocus] = useState19(selectedDate ? selectedDate.get("year") : dayjs().get("year"));
+  const id = useId10();
+  const [yearToFocus, setYearToFocus] = useState20(selectedDate ? selectedDate.get("year") : dayjs().get("year"));
   useEffect10(() => {
     const yearToFocusEl = document.getElementById(`${id}_year_${yearToFocus}`);
     yearToFocusEl?.scrollIntoView?.({ block: "nearest", inline: "start" });
@@ -8293,7 +8554,7 @@ var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
         break;
     }
   };
-  return /* @__PURE__ */ jsx46(YearPickerContainer, { role: "listbox", "aria-label": "Year Picker", children: yearList.map((year2) => /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(YearPickerContainer, { role: "listbox", "aria-label": "Year Picker", children: yearList.map((year2) => /* @__PURE__ */ jsx47(
     YearPickerButton,
     {
       "aria-label": year2.toString(),
@@ -8312,7 +8573,7 @@ var YearPicker = ({ onYearSelect, selectedDate, today: today2 }) => {
     year2
   )) });
 };
-var YearPickerContainer = styled39.div`
+var YearPickerContainer = styled40.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -8323,7 +8584,7 @@ var YearPickerContainer = styled39.div`
   height: 312px;
   padding: 2px 8px 8px 8px;
 `;
-var YearPickerButton = styled39.button`
+var YearPickerButton = styled40.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8366,13 +8627,13 @@ var YearPickerButton = styled39.button`
 var YearPicker_default = memo6(YearPicker);
 
 // src/date-input/DatePicker.tsx
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var today = dayjs2();
 var DatePicker = ({ date, onDateSelect, id }) => {
-  const [innerDate, setInnerDate] = useState20(date?.isValid() ? date : dayjs2());
-  const [content, setContent] = useState20("calendar");
+  const [innerDate, setInnerDate] = useState21(date?.isValid() ? date : dayjs2());
+  const [content, setContent] = useState21("calendar");
   const selectedDate = date?.isValid() ? date : dayjs2(null);
-  const translatedLabels = useContext26(HalstackLanguageContext);
+  const translatedLabels = useContext27(HalstackLanguageContext);
   const handleDateSelect = (chosenDate) => {
     setInnerDate(chosenDate);
     onDateSelect(chosenDate);
@@ -8384,41 +8645,41 @@ var DatePicker = ({ date, onDateSelect, id }) => {
   const handleMonthChange = (chosenDate) => {
     setInnerDate(chosenDate);
   };
-  return /* @__PURE__ */ jsxs32(DatePickerContainer, { id, children: [
-    /* @__PURE__ */ jsxs32(PickerHeader, { children: [
-      /* @__PURE__ */ jsx47(Tooltip, { label: translatedLabels.calendar.previousMonthTitle, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs33(DatePickerContainer, { id, children: [
+    /* @__PURE__ */ jsxs33(PickerHeader, { children: [
+      /* @__PURE__ */ jsx48(Tooltip, { label: translatedLabels.calendar.previousMonthTitle, children: /* @__PURE__ */ jsx48(
         HeaderButton,
         {
           "aria-label": translatedLabels.calendar.previousMonthTitle,
           onClick: () => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1)),
-          children: /* @__PURE__ */ jsx47(Icon_default, { icon: "keyboard_arrow_left" })
+          children: /* @__PURE__ */ jsx48(Icon_default, { icon: "keyboard_arrow_left" })
         }
       ) }),
-      /* @__PURE__ */ jsxs32(
+      /* @__PURE__ */ jsxs33(
         HeaderYearTrigger,
         {
           "aria-live": "polite",
           onClick: () => setContent((currentContent) => currentContent === "yearPicker" ? "calendar" : "yearPicker"),
           children: [
-            /* @__PURE__ */ jsxs32(HeaderYearTriggerLabel, { children: [
+            /* @__PURE__ */ jsxs33(HeaderYearTriggerLabel, { children: [
               translatedLabels.calendar.months[innerDate.get("month")],
               " ",
               innerDate.format("YYYY")
             ] }),
-            /* @__PURE__ */ jsx47(Icon_default, { icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down" })
+            /* @__PURE__ */ jsx48(Icon_default, { icon: content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx47(Tooltip, { label: translatedLabels.calendar.nextMonthTitle, children: /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx48(Tooltip, { label: translatedLabels.calendar.nextMonthTitle, children: /* @__PURE__ */ jsx48(
         HeaderButton,
         {
           "aria-label": translatedLabels.calendar.nextMonthTitle,
           onClick: () => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1)),
-          children: /* @__PURE__ */ jsx47(Icon_default, { icon: "keyboard_arrow_right" })
+          children: /* @__PURE__ */ jsx48(Icon_default, { icon: "keyboard_arrow_right" })
         }
       ) })
     ] }),
-    content === "calendar" && /* @__PURE__ */ jsx47(
+    content === "calendar" && /* @__PURE__ */ jsx48(
       Calendar_default,
       {
         innerDate,
@@ -8428,10 +8689,10 @@ var DatePicker = ({ date, onDateSelect, id }) => {
         today
       }
     ),
-    content === "yearPicker" && /* @__PURE__ */ jsx47(YearPicker_default, { selectedDate, onYearSelect: handleOnYearSelect, today })
+    content === "yearPicker" && /* @__PURE__ */ jsx48(YearPicker_default, { selectedDate, onYearSelect: handleOnYearSelect, today })
   ] });
 };
-var DatePickerContainer = styled40.div`
+var DatePickerContainer = styled41.div`
   padding-top: 16px;
   background-color: ${(props) => props.theme.dateInput.pickerBackgroundColor};
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
@@ -8444,7 +8705,7 @@ var DatePickerContainer = styled40.div`
   color: ${(props) => props.theme.dateInput.pickerFontColor};
   font-weight: ${(props) => props.theme.dateInput.pickerFontWeight};
 `;
-var PickerHeader = styled40.div`
+var PickerHeader = styled41.div`
   box-sizing: border-box;
   display: flex;
   gap: 8px;
@@ -8452,7 +8713,7 @@ var PickerHeader = styled40.div`
   justify-content: space-between;
   padding: 0px 16px;
 `;
-var HeaderButton = styled40.button`
+var HeaderButton = styled41.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8482,7 +8743,7 @@ var HeaderButton = styled40.button`
     font-size: 24px;
   }
 `;
-var HeaderYearTrigger = styled40(HeaderButton)`
+var HeaderYearTrigger = styled41(HeaderButton)`
   gap: 8px;
   height: 40px;
   width: 172px;
@@ -8491,7 +8752,7 @@ var HeaderYearTrigger = styled40(HeaderButton)`
     font-size: 24px;
   }
 `;
-var HeaderYearTriggerLabel = styled40.span`
+var HeaderYearTriggerLabel = styled41.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8504,25 +8765,25 @@ var DatePicker_default = memo7(DatePicker);
 import * as Popover3 from "@radix-ui/react-popover";
 import {
   forwardRef as forwardRef6,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect12,
-  useId as useId10,
+  useId as useId11,
   useRef as useRef11,
-  useState as useState21
+  useState as useState22
 } from "react";
-import styled43, { ThemeProvider as ThemeProvider18 } from "styled-components";
+import styled44, { ThemeProvider as ThemeProvider19 } from "styled-components";
 
 // src/number-input/NumberInputContext.tsx
 import { createContext as createContext7 } from "react";
 var NumberInputContext_default = createContext7(null);
 
 // src/text-input/Suggestions.tsx
-import { memo as memo9, useContext as useContext27, useEffect as useEffect11, useRef as useRef10 } from "react";
-import styled42 from "styled-components";
+import { memo as memo9, useContext as useContext28, useEffect as useEffect11, useRef as useRef10 } from "react";
+import styled43 from "styled-components";
 
 // src/text-input/Suggestion.tsx
-import { memo as memo8, useMemo as useMemo12 } from "react";
-import styled41 from "styled-components";
+import { memo as memo8, useMemo as useMemo13 } from "react";
+import styled42 from "styled-components";
 
 // src/text-input/utils.ts
 var sizes4 = {
@@ -8566,8 +8827,8 @@ var transformSpecialChars = (str) => {
 };
 
 // src/text-input/Suggestion.tsx
-import { Fragment as Fragment11, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
-var SuggestionContainer = styled41.li`
+import { Fragment as Fragment11, jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+var SuggestionContainer = styled42.li`
   display: flex;
   padding: 0 0.5rem;
   line-height: 1.715em;
@@ -8582,7 +8843,7 @@ var SuggestionContainer = styled41.li`
     background-color: ${(props) => props.theme.activeListOptionBackgroundColor};
   }
 `;
-var StyledSuggestion = styled41.span`
+var StyledSuggestion = styled42.span`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8599,11 +8860,11 @@ var Suggestion = ({
   visuallyFocused,
   highlighted
 }) => {
-  const matchedSuggestion = useMemo12(() => {
+  const matchedSuggestion = useMemo13(() => {
     const regEx = new RegExp(transformSpecialChars(value), "i");
     return { matchedWords: suggestion.match(regEx), noMatchedWords: suggestion.replace(regEx, "") };
   }, [value, suggestion]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     SuggestionContainer,
     {
       id,
@@ -8613,8 +8874,8 @@ var Suggestion = ({
       visuallyFocused,
       role: "option",
       "aria-selected": visuallyFocused ? true : void 0,
-      children: /* @__PURE__ */ jsx48(StyledSuggestion, { isLast, visuallyFocused, children: highlighted ? /* @__PURE__ */ jsxs33(Fragment11, { children: [
-        /* @__PURE__ */ jsx48("strong", { children: matchedSuggestion.matchedWords }),
+      children: /* @__PURE__ */ jsx49(StyledSuggestion, { isLast, visuallyFocused, children: highlighted ? /* @__PURE__ */ jsxs34(Fragment11, { children: [
+        /* @__PURE__ */ jsx49("strong", { children: matchedSuggestion.matchedWords }),
         matchedSuggestion.noMatchedWords
       ] }) : suggestion })
     }
@@ -8623,8 +8884,8 @@ var Suggestion = ({
 var Suggestion_default = memo8(Suggestion);
 
 // src/text-input/Suggestions.tsx
-import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
-var SuggestionsContainer = styled42.ul`
+import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+var SuggestionsContainer = styled43.ul`
   box-sizing: border-box;
   max-height: 304px;
   overflow-y: auto;
@@ -8642,13 +8903,13 @@ var SuggestionsContainer = styled42.ul`
   font-style: ${(props) => props.theme.listOptionFontStyle};
   font-weight: ${(props) => props.theme.listOptionFontWeight};
 `;
-var SuggestionsSystemMessage = styled42.span`
+var SuggestionsSystemMessage = styled43.span`
   display: flex;
   padding: 0.25rem 1rem;
   color: ${(props) => props.theme.systemMessageFontColor};
   line-height: 1.715em;
 `;
-var SuggestionsErrorIcon = styled42.span`
+var SuggestionsErrorIcon = styled43.span`
   display: flex;
   flex-wrap: wrap;
   align-content: center;
@@ -8658,7 +8919,7 @@ var SuggestionsErrorIcon = styled42.span`
   font-size: 18px;
   color: ${(props) => props.theme.errorIconColor};
 `;
-var SuggestionsError = styled42.span`
+var SuggestionsError = styled43.span`
   display: flex;
   padding: 0.25rem 1rem;
   align-items: center;
@@ -8676,7 +8937,7 @@ var Suggestions = ({
   suggestionOnClick,
   styles
 }) => {
-  const translatedLabels = useContext27(HalstackLanguageContext);
+  const translatedLabels = useContext28(HalstackLanguageContext);
   const listboxRef = useRef10(null);
   useEffect11(() => {
     const visualFocusedOptionEl = listboxRef?.current?.querySelectorAll("[role='option']")[visualFocusIndex];
@@ -8685,7 +8946,7 @@ var Suggestions = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     SuggestionsContainer,
     {
       id,
@@ -8698,7 +8959,7 @@ var Suggestions = ({
       style: styles,
       "aria-label": "Suggestions",
       children: [
-        !isSearching && !searchHasErrors && suggestions.length > 0 && suggestions.map((suggestion, index) => /* @__PURE__ */ jsx49(
+        !isSearching && !searchHasErrors && suggestions.length > 0 && suggestions.map((suggestion, index) => /* @__PURE__ */ jsx50(
           Suggestion_default,
           {
             id: `${id}-suggestion-${index}`,
@@ -8711,9 +8972,9 @@ var Suggestions = ({
           },
           `${id}-suggestion-${index}`
         )),
-        isSearching && /* @__PURE__ */ jsx49(SuggestionsSystemMessage, { role: "option", children: translatedLabels.textInput.searchingMessage }),
-        searchHasErrors && /* @__PURE__ */ jsx49("span", { role: "option", children: /* @__PURE__ */ jsxs34(SuggestionsError, { role: "alert", "aria-live": "assertive", children: [
-          /* @__PURE__ */ jsx49(SuggestionsErrorIcon, { children: /* @__PURE__ */ jsx49(Icon_default, { icon: "filled_error" }) }),
+        isSearching && /* @__PURE__ */ jsx50(SuggestionsSystemMessage, { role: "option", children: translatedLabels.textInput.searchingMessage }),
+        searchHasErrors && /* @__PURE__ */ jsx50("span", { role: "option", children: /* @__PURE__ */ jsxs35(SuggestionsError, { role: "alert", "aria-live": "assertive", children: [
+          /* @__PURE__ */ jsx50(SuggestionsErrorIcon, { children: /* @__PURE__ */ jsx50(Icon_default, { icon: "filled_error" }) }),
           translatedLabels.textInput.fetchingDataErrorMessage
         ] }) })
       ]
@@ -8723,8 +8984,8 @@ var Suggestions = ({
 var Suggestions_default = memo9(Suggestions);
 
 // src/text-input/TextInput.tsx
-import { Fragment as Fragment12, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
-var TextInputContainer = styled43.div`
+import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+var TextInputContainer = styled44.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -8737,7 +8998,7 @@ var TextInputContainer = styled43.div`
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   font-family: ${(props) => props.theme.fontFamily};
 `;
-var Label4 = styled43.label`
+var Label4 = styled44.label`
   color: ${(props) => props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor};
   font-size: ${(props) => props.theme.labelFontSize};
   font-style: ${(props) => props.theme.labelFontStyle};
@@ -8745,10 +9006,10 @@ var Label4 = styled43.label`
   line-height: ${(props) => props.theme.labelLineHeight};
   ${(props) => !props.hasHelperText && `margin-bottom: 0.25rem`}
 `;
-var OptionalLabel2 = styled43.span`
+var OptionalLabel2 = styled44.span`
   font-weight: ${(props) => props.theme.optionalLabelFontWeight};
 `;
-var HelperText2 = styled43.span`
+var HelperText2 = styled44.span`
   color: ${(props) => props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor};
   font-size: ${(props) => props.theme.helperTextFontSize};
   font-style: ${(props) => props.theme.helperTextFontStyle};
@@ -8756,7 +9017,7 @@ var HelperText2 = styled43.span`
   line-height: ${(props) => props.theme.helperTextLineHeight};
   margin-bottom: 0.25rem;
 `;
-var InputContainer = styled43.div`
+var InputContainer = styled44.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -8782,7 +9043,7 @@ var InputContainer = styled43.div`
       }
     ` : "cursor: not-allowed;"};
 `;
-var Input = styled43.input`
+var Input = styled44.input`
   height: calc(2.5rem - 2px);
   width: 100%;
   background: none;
@@ -8799,12 +9060,13 @@ var Input = styled43.input`
   font-weight: ${(props) => props.theme.valueFontWeight};
   line-height: 1.5em;
   ${(props) => props.disabled && `cursor: not-allowed;`}
+  ${({ alignment }) => `text-align: ${alignment}`};
 
   ::placeholder {
     color: ${(props) => props.disabled ? props.theme.disabledPlaceholderFontColor : props.theme.placeholderFontColor};
   }
 `;
-var Prefix = styled43.span`
+var Prefix = styled44.span`
   height: 1.5rem;
   margin-left: 0.25rem;
   padding-right: ${(props) => props.theme.prefixDividerPaddingRight};
@@ -8816,7 +9078,7 @@ var Prefix = styled43.span`
   line-height: 1.5rem;
   pointer-events: none;
 `;
-var Suffix = styled43.span`
+var Suffix = styled44.span`
   height: 1.5rem;
   margin: 0 0.25rem;
   padding-left: ${(props) => props.theme.suffixDividerPaddingLeft};
@@ -8828,7 +9090,7 @@ var Suffix = styled43.span`
   line-height: 1.5rem;
   pointer-events: none;
 `;
-var ErrorIcon2 = styled43.span`
+var ErrorIcon2 = styled44.span`
   display: flex;
   flex-wrap: wrap;
   align-content: center;
@@ -8838,7 +9100,7 @@ var ErrorIcon2 = styled43.span`
   font-size: 18px;
   color: ${(props) => props.theme.errorIconColor};
 `;
-var ErrorMessageContainer = styled43.span`
+var ErrorMessageContainer = styled44.span`
   min-height: 1.5em;
   color: ${(props) => props.theme.errorMessageColor};
   font-size: 0.75rem;
@@ -8846,9 +9108,10 @@ var ErrorMessageContainer = styled43.span`
   line-height: 1.5em;
   margin-top: 0.25rem;
 `;
-var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx50(Fragment12, { children: condition ? wrapper(children) : children });
+var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx51(Fragment12, { children: condition ? wrapper(children) : children });
 var DxcTextInput = forwardRef6(
   ({
+    alignment = "left",
     label,
     name = "",
     defaultValue = "",
@@ -8875,21 +9138,21 @@ var DxcTextInput = forwardRef6(
     tabIndex = 0,
     ariaLabel = "Text input"
   }, ref) => {
-    const inputId = `input-${useId10()}`;
+    const inputId = `input-${useId11()}`;
     const autosuggestId = `suggestions-${inputId}`;
     const errorId = `error-${inputId}`;
-    const colorsTheme = useContext28(HalstackContext);
-    const translatedLabels = useContext28(HalstackLanguageContext);
-    const numberInputContext = useContext28(NumberInputContext_default);
+    const colorsTheme = useContext29(HalstackContext);
+    const translatedLabels = useContext29(HalstackLanguageContext);
+    const numberInputContext = useContext29(NumberInputContext_default);
     const inputRef = useRef11(null);
     const inputContainerRef = useRef11(null);
     const actionRef = useRef11(null);
-    const [innerValue, setInnerValue] = useState21(defaultValue);
-    const [isOpen, changeIsOpen] = useState21(false);
-    const [isSearching, changeIsSearching] = useState21(false);
-    const [isAutosuggestError, changeIsAutosuggestError] = useState21(false);
-    const [filteredSuggestions, changeFilteredSuggestions] = useState21([]);
-    const [visualFocusIndex, changeVisualFocusIndex] = useState21(-1);
+    const [innerValue, setInnerValue] = useState22(defaultValue);
+    const [isOpen, changeIsOpen] = useState22(false);
+    const [isSearching, changeIsSearching] = useState22(false);
+    const [isAutosuggestError, changeIsAutosuggestError] = useState22(false);
+    const [filteredSuggestions, changeFilteredSuggestions] = useState22([]);
+    const [visualFocusIndex, changeVisualFocusIndex] = useState22(-1);
     const width = useWidth_default(inputContainerRef.current);
     const getNumberErrorMessage = (checkedValue) => numberInputContext?.minNumber != null && checkedValue < numberInputContext?.minNumber ? translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage?.(numberInputContext.minNumber) : numberInputContext?.maxNumber != null && checkedValue > numberInputContext?.maxNumber ? translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage?.(numberInputContext.maxNumber) : void 0;
     const openSuggestions = () => {
@@ -9135,19 +9398,19 @@ var DxcTextInput = forwardRef6(
       }
       return void 0;
     }, [value, innerValue, suggestions, numberInputContext]);
-    return /* @__PURE__ */ jsx50(ThemeProvider18, { theme: colorsTheme.textInput, children: /* @__PURE__ */ jsxs35(TextInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs35(Label4, { htmlFor: inputId, disabled, hasHelperText: !!helperText, children: [
+    return /* @__PURE__ */ jsx51(ThemeProvider19, { theme: colorsTheme.textInput, children: /* @__PURE__ */ jsxs36(TextInputContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsxs36(Label4, { htmlFor: inputId, disabled, hasHelperText: !!helperText, children: [
         label,
         " ",
-        optional && /* @__PURE__ */ jsx50(OptionalLabel2, { children: translatedLabels.formFields.optionalLabel })
+        optional && /* @__PURE__ */ jsx51(OptionalLabel2, { children: translatedLabels.formFields.optionalLabel })
       ] }),
-      helperText && /* @__PURE__ */ jsx50(HelperText2, { disabled, children: helperText }),
-      /* @__PURE__ */ jsx50(
+      helperText && /* @__PURE__ */ jsx51(HelperText2, { disabled, children: helperText }),
+      /* @__PURE__ */ jsx51(
         AutosuggestWrapper,
         {
           condition: hasSuggestions(suggestions),
-          wrapper: (children) => /* @__PURE__ */ jsxs35(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
-            /* @__PURE__ */ jsx50(
+          wrapper: (children) => /* @__PURE__ */ jsxs36(Popover3.Root, { open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError), children: [
+            /* @__PURE__ */ jsx51(
               Popover3.Trigger,
               {
                 asChild: true,
@@ -9158,18 +9421,18 @@ var DxcTextInput = forwardRef6(
                 children
               }
             ),
-            /* @__PURE__ */ jsx50(Popover3.Portal, { children: /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(Popover3.Portal, { children: /* @__PURE__ */ jsx51(
               Popover3.Content,
               {
                 sideOffset: 5,
-                style: { zIndex: "2147483647" },
+                style: { zIndex: "320" },
                 onOpenAutoFocus: (event) => {
                   event.preventDefault();
                 },
                 onCloseAutoFocus: (event) => {
                   event.preventDefault();
                 },
-                children: /* @__PURE__ */ jsx50(
+                children: /* @__PURE__ */ jsx51(
                   Suggestions_default,
                   {
                     id: autosuggestId,
@@ -9189,7 +9452,7 @@ var DxcTextInput = forwardRef6(
               }
             ) })
           ] }),
-          children: /* @__PURE__ */ jsxs35(
+          children: /* @__PURE__ */ jsxs36(
             InputContainer,
             {
               error: !!error,
@@ -9199,11 +9462,12 @@ var DxcTextInput = forwardRef6(
               onMouseDown: handleInputContainerOnMouseDown,
               ref: inputContainerRef,
               children: [
-                prefix && /* @__PURE__ */ jsx50(Prefix, { disabled, children: prefix }),
-                /* @__PURE__ */ jsxs35(Flex_default, { gap: "0.25rem", alignItems: "center", grow: 1, children: [
-                  /* @__PURE__ */ jsx50(
+                prefix && /* @__PURE__ */ jsx51(Prefix, { disabled, children: prefix }),
+                /* @__PURE__ */ jsxs36(Flex_default, { gap: "0.25rem", alignItems: "center", grow: 1, children: [
+                  /* @__PURE__ */ jsx51(
                     Input,
                     {
+                      alignment,
                       id: inputId,
                       name,
                       value: value ?? innerValue,
@@ -9237,8 +9501,8 @@ var DxcTextInput = forwardRef6(
                       "aria-label": label ? void 0 : ariaLabel
                     }
                   ),
-                  !disabled && error && /* @__PURE__ */ jsx50(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx50(Icon_default, { icon: "filled_error" }) }),
-                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ jsx50(
+                  !disabled && error && /* @__PURE__ */ jsx51(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Icon_default, { icon: "filled_error" }) }),
+                  !disabled && !readOnly && clearable && (value ?? innerValue).length > 0 && /* @__PURE__ */ jsx51(
                     ActionIcon_default,
                     {
                       onClick: handleClearActionOnClick,
@@ -9247,8 +9511,8 @@ var DxcTextInput = forwardRef6(
                       title: translatedLabels.textInput.clearFieldActionTitle
                     }
                   ),
-                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ jsxs35(Fragment12, { children: [
-                    /* @__PURE__ */ jsx50(
+                  numberInputContext?.typeNumber === "number" && numberInputContext?.showControls && /* @__PURE__ */ jsxs36(Fragment12, { children: [
+                    /* @__PURE__ */ jsx51(
                       ActionIcon_default,
                       {
                         onClick: !readOnly ? handleDecrementActionOnClick : void 0,
@@ -9259,7 +9523,7 @@ var DxcTextInput = forwardRef6(
                         disabled
                       }
                     ),
-                    /* @__PURE__ */ jsx50(
+                    /* @__PURE__ */ jsx51(
                       ActionIcon_default,
                       {
                         onClick: !readOnly ? handleIncrementActionOnClick : void 0,
@@ -9271,7 +9535,7 @@ var DxcTextInput = forwardRef6(
                       }
                     )
                   ] }),
-                  action && /* @__PURE__ */ jsx50(
+                  action && /* @__PURE__ */ jsx51(
                     ActionIcon_default,
                     {
                       onClick: !readOnly ? action.onClick : void 0,
@@ -9283,20 +9547,20 @@ var DxcTextInput = forwardRef6(
                     }
                   )
                 ] }),
-                suffix && /* @__PURE__ */ jsx50(Suffix, { disabled, children: suffix })
+                suffix && /* @__PURE__ */ jsx51(Suffix, { disabled, children: suffix })
               ]
             }
           )
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx50(ErrorMessageContainer, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx51(ErrorMessageContainer, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
     ] }) });
   }
 );
 var TextInput_default = DxcTextInput;
 
 // src/date-input/DateInput.tsx
-import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
 dayjs3.extend(customParseFormat);
 var SIDEOFFSET = 4;
 var getValueForPicker = (value, format) => dayjs3(value, format.toUpperCase(), true);
@@ -9340,16 +9604,16 @@ var DxcDateInput = forwardRef7(
     tabIndex,
     ariaLabel = "Date input"
   }, ref) => {
-    const [innerValue, setInnerValue] = useState22(defaultValue);
-    const [isOpen, setIsOpen] = useState22(false);
-    const calendarId = `date-picker-${useId11()}`;
-    const [dayjsDate, setDayjsDate] = useState22(getValueForPicker(value ?? defaultValue ?? "", format));
-    const [lastValidYear, setLastValidYear] = useState22(
+    const [innerValue, setInnerValue] = useState23(defaultValue);
+    const [isOpen, setIsOpen] = useState23(false);
+    const calendarId = `date-picker-${useId12()}`;
+    const [dayjsDate, setDayjsDate] = useState23(getValueForPicker(value ?? defaultValue ?? "", format));
+    const [lastValidYear, setLastValidYear] = useState23(
       innerValue || value ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value ?? innerValue, format).format("YY") < 68 ? 2e3 : 1900 : null
     );
-    const [sideOffset, setSideOffset] = useState22(SIDEOFFSET);
-    const colorsTheme = useContext29(HalstackContext);
-    const translatedLabels = useContext29(HalstackLanguageContext);
+    const [sideOffset, setSideOffset] = useState23(SIDEOFFSET);
+    const colorsTheme = useContext30(HalstackContext);
+    const translatedLabels = useContext30(HalstackLanguageContext);
     const dateRef = useRef12(null);
     const popoverContentRef = useRef12(null);
     const handleCalendarOnClick = (newDate) => {
@@ -9467,8 +9731,8 @@ var DxcDateInput = forwardRef7(
         }
       }
     }, [isOpen, disabled, calendarId]);
-    return /* @__PURE__ */ jsx51(ThemeProvider19, { theme: colorsTheme, children: /* @__PURE__ */ jsxs36(DateInputContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsx52(ThemeProvider20, { theme: colorsTheme, children: /* @__PURE__ */ jsxs37(DateInputContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsxs37(
         Label5,
         {
           htmlFor: dateRef.current?.getElementsByTagName("input")[0]?.id,
@@ -9477,13 +9741,13 @@ var DxcDateInput = forwardRef7(
           children: [
             label,
             " ",
-            optional && /* @__PURE__ */ jsx51(OptionalLabel3, { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ jsx52(OptionalLabel3, { children: translatedLabels.formFields.optionalLabel })
           ]
         }
       ),
-      helperText && /* @__PURE__ */ jsx51(HelperText3, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs36(Popover4.Root, { open: isOpen, children: [
-        /* @__PURE__ */ jsx51(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ jsx51(
+      helperText && /* @__PURE__ */ jsx52(HelperText3, { disabled, children: helperText }),
+      /* @__PURE__ */ jsxs37(Popover4.Root, { open: isOpen, children: [
+        /* @__PURE__ */ jsx52(Popover4.Trigger, { asChild: true, "aria-controls": void 0, children: /* @__PURE__ */ jsx52(
           TextInput_default,
           {
             name,
@@ -9509,7 +9773,7 @@ var DxcDateInput = forwardRef7(
             ariaLabel
           }
         ) }),
-        /* @__PURE__ */ jsx51(Popover4.Portal, { children: /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(Popover4.Portal, { children: /* @__PURE__ */ jsx52(
           StyledPopoverContent,
           {
             sideOffset,
@@ -9518,7 +9782,7 @@ var DxcDateInput = forwardRef7(
             onBlur: handleDatePickerOnBlur,
             onKeyDown: handleDatePickerEscKeydown,
             ref: popoverContentRef,
-            children: /* @__PURE__ */ jsx51(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
+            children: /* @__PURE__ */ jsx52(DatePicker_default, { id: calendarId, onDateSelect: handleCalendarOnClick, date: dayjsDate })
           }
         ) })
       ] })
@@ -9532,7 +9796,7 @@ var sizes5 = {
   fillParent: "100%"
 };
 var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes5[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : size && sizes5[size];
-var DateInputContainer = styled44.div`
+var DateInputContainer = styled45.div`
   ${(props) => props.size === "fillParent" && "width: 100%;"}
   display: flex;
   flex-direction: column;
@@ -9545,7 +9809,7 @@ var DateInputContainer = styled44.div`
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   font-family: ${(props) => props.theme.textInput.fontFamily};
 `;
-var Label5 = styled44.label`
+var Label5 = styled45.label`
   color: ${(props) => props.disabled ? props.theme.textInput.disabledLabelFontColor : props.theme.textInput.labelFontColor};
   font-size: ${(props) => props.theme.textInput.labelFontSize};
   font-style: ${(props) => props.theme.textInput.labelFontStyle};
@@ -9553,10 +9817,10 @@ var Label5 = styled44.label`
   line-height: ${(props) => props.theme.textInput.labelLineHeight};
   ${(props) => !props.hasHelperText && `margin-bottom: 0.25rem`}
 `;
-var OptionalLabel3 = styled44.span`
+var OptionalLabel3 = styled45.span`
   font-weight: ${(props) => props.theme.textInput.optionalLabelFontWeight};
 `;
-var HelperText3 = styled44.span`
+var HelperText3 = styled45.span`
   color: ${(props) => props.disabled ? props.theme.textInput.disabledHelperTextFontColor : props.theme.textInput.helperTextFontColor};
   font-size: ${(props) => props.theme.textInput.helperTextFontSize};
   font-style: ${(props) => props.theme.textInput.helperTextFontStyle};
@@ -9564,8 +9828,8 @@ var HelperText3 = styled44.span`
   line-height: ${(props) => props.theme.textInput.helperTextLineHeight};
   margin-bottom: 0.25rem;
 `;
-var StyledPopoverContent = styled44(Popover4.Content)`
-  z-index: 2147483647;
+var StyledPopoverContent = styled45(Popover4.Content)`
+  z-index: 300;
   &:focus-visible {
     outline: none;
   }
@@ -9573,31 +9837,31 @@ var StyledPopoverContent = styled44(Popover4.Content)`
 var DateInput_default = DxcDateInput;
 
 // src/dialog/Dialog.tsx
-import { useContext as useContext30, useEffect as useEffect14 } from "react";
+import { useContext as useContext31, useEffect as useEffect14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import styled45, { createGlobalStyle as createGlobalStyle2, ThemeProvider as ThemeProvider20 } from "styled-components";
-import { jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
+import styled46, { createGlobalStyle as createGlobalStyle2, ThemeProvider as ThemeProvider21 } from "styled-components";
+import { Fragment as Fragment13, jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
 var BodyStyle2 = createGlobalStyle2`
   body {
     overflow: hidden;
   }
 `;
-var DialogContainer = styled45.div`
+var DialogContainer = styled46.div`
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  z-index: 2147483647;
+  z-index: 420;
 `;
-var Overlay3 = styled45.div`
+var Overlay3 = styled46.div`
   position: fixed;
   inset: 0;
   height: 100%;
   background-color: ${(props) => props.theme.overlayColor};
 `;
-var Dialog = styled45.div`
+var Dialog = styled46.div`
   position: relative;
   box-sizing: border-box;
   max-width: 80%;
@@ -9606,14 +9870,13 @@ var Dialog = styled45.div`
   background-color: ${(props) => props.theme.backgroundColor};
   ${(props) => props.closable && "min-height: 72px;"}
   box-shadow: ${(props) => `${props.theme.boxShadowOffsetX} ${props.theme.boxShadowOffsetY} ${props.theme.boxShadowBlur} ${props.theme.boxShadowColor}`};
-  z-index: 2147483647;
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     max-width: 92%;
     min-width: 92%;
   }
 `;
-var CloseIconActionContainer = styled45.div`
+var CloseIconActionContainer = styled46.div`
   position: absolute;
   top: 24px;
   right: 24px;
@@ -9624,10 +9887,11 @@ var DxcDialog = ({
   onBackgroundClick,
   onCloseClick,
   overlay = true,
-  tabIndex = 0
+  tabIndex = 0,
+  disableFocusLock = false
 }) => {
-  const colorsTheme = useContext30(HalstackContext);
-  const translatedLabels = useContext30(HalstackLanguageContext);
+  const colorsTheme = useContext31(HalstackContext);
+  const translatedLabels = useContext31(HalstackLanguageContext);
   useEffect14(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -9640,31 +9904,33 @@ var DxcDialog = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [onCloseClick]);
-  return /* @__PURE__ */ jsxs37(ThemeProvider20, { theme: colorsTheme.dialog, children: [
-    /* @__PURE__ */ jsx52(BodyStyle2, {}),
+  return /* @__PURE__ */ jsxs38(ThemeProvider21, { theme: colorsTheme.dialog, children: [
+    /* @__PURE__ */ jsx53(BodyStyle2, {}),
     createPortal2(
-      /* @__PURE__ */ jsxs37(DialogContainer, { children: [
-        overlay && /* @__PURE__ */ jsx52(Overlay3, { onClick: onBackgroundClick }),
-        /* @__PURE__ */ jsx52(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: /* @__PURE__ */ jsxs37(FocusLock_default, { children: [
+      /* @__PURE__ */ jsxs38(DialogContainer, { children: [
+        overlay && /* @__PURE__ */ jsx53(Overlay3, { onClick: onBackgroundClick }),
+        /* @__PURE__ */ jsx53(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: !disableFocusLock ? /* @__PURE__ */ jsxs38(FocusLock_default, { children: [
           children,
-          closable && /* @__PURE__ */ jsx52(
-            ThemeProvider20,
+          closable && /* @__PURE__ */ jsx53(CloseIconActionContainer, { children: /* @__PURE__ */ jsx53(
+            ActionIcon_default,
             {
-              theme: {
-                actionBackgroundColor: colorsTheme.dialog.closeIconBackgroundColor,
-                actionIconColor: colorsTheme.dialog.closeIconColor
-              },
-              children: /* @__PURE__ */ jsx52(CloseIconActionContainer, { children: /* @__PURE__ */ jsx52(
-                ActionIcon_default,
-                {
-                  icon: "close",
-                  onClick: onCloseClick,
-                  tabIndex,
-                  title: translatedLabels.dialog.closeIconAriaLabel
-                }
-              ) })
+              icon: "close",
+              onClick: onCloseClick,
+              tabIndex,
+              title: translatedLabels.dialog.closeIconAriaLabel
             }
-          )
+          ) })
+        ] }) : /* @__PURE__ */ jsxs38(Fragment13, { children: [
+          children,
+          closable && /* @__PURE__ */ jsx53(CloseIconActionContainer, { children: /* @__PURE__ */ jsx53(
+            ActionIcon_default,
+            {
+              icon: "close",
+              onClick: onCloseClick,
+              tabIndex,
+              title: translatedLabels.dialog.closeIconAriaLabel
+            }
+          ) })
         ] }) })
       ] }),
       document.body
@@ -9674,14 +9940,14 @@ var DxcDialog = ({
 var Dialog_default = DxcDialog;
 
 // src/file-input/FileInput.tsx
-import { useCallback as useCallback8, useContext as useContext32, useEffect as useEffect15, useId as useId13, useState as useState23, forwardRef as forwardRef8 } from "react";
-import styled47, { ThemeProvider as ThemeProvider21 } from "styled-components";
+import { useCallback as useCallback8, useContext as useContext33, useEffect as useEffect15, useId as useId14, useState as useState24, forwardRef as forwardRef8 } from "react";
+import styled48, { ThemeProvider as ThemeProvider22 } from "styled-components";
 
 // src/file-input/FileItem.tsx
-import { memo as memo10, useContext as useContext31, useId as useId12 } from "react";
-import styled46 from "styled-components";
-import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
-var MainContainer3 = styled46.div`
+import { memo as memo10, useContext as useContext32, useId as useId13 } from "react";
+import styled47 from "styled-components";
+import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
+var MainContainer3 = styled47.div`
   box-sizing: border-box;
   display: flex;
   justify-content: center;
@@ -9694,13 +9960,13 @@ var MainContainer3 = styled46.div`
   border-style: ${(props) => props.theme.fileItemBorderStyle};
   border-radius: ${(props) => props.theme.fileItemBorderRadius};
 `;
-var ImagePreview = styled46.img`
+var ImagePreview = styled47.img`
   width: 48px;
   height: 48px;
   border-radius: 2px;
   object-fit: contain;
 `;
-var IconPreview = styled46.span`
+var IconPreview = styled47.span`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -9717,14 +9983,14 @@ var IconPreview = styled46.span`
     width: 18px;
   }
 `;
-var FileItemContent = styled46.div`
+var FileItemContent = styled47.div`
   flex-grow: 1;
   display: grid;
   grid-template-columns: auto min-content;
   grid-template-rows: min-content auto;
   column-gap: 0.25rem;
 `;
-var FileName = styled46.span`
+var FileName = styled47.span`
   align-self: center;
   color: ${(props) => props.theme.fileNameFontColor};
   font-family: ${(props) => props.theme.fileItemFontFamily};
@@ -9735,7 +10001,7 @@ var FileName = styled46.span`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var ErrorIcon3 = styled46.span`
+var ErrorIcon3 = styled47.span`
   display: flex;
   flex-wrap: wrap;
   align-content: center;
@@ -9745,7 +10011,7 @@ var ErrorIcon3 = styled46.span`
   font-size: 18px;
   color: #d0011b;
 `;
-var ErrorMessage = styled46.span`
+var ErrorMessage = styled47.span`
   color: ${(props) => props.theme.errorMessageFontColor};
   font-family: ${(props) => props.theme.errorMessageFontFamily};
   font-size: ${(props) => props.theme.errorMessageFontSize};
@@ -9762,15 +10028,15 @@ var FileItem = ({
   onDelete,
   tabIndex
 }) => {
-  const translatedLabels = useContext31(HalstackLanguageContext);
-  const fileNameId = useId12();
-  return /* @__PURE__ */ jsxs38(MainContainer3, { error, role: "listitem", singleFileMode, showPreview, children: [
-    showPreview && (type.includes("image") ? /* @__PURE__ */ jsx53(ImagePreview, { src: preview, alt: fileName }) : /* @__PURE__ */ jsx53(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ jsx53(Icon_default, { icon: preview }) })),
-    /* @__PURE__ */ jsxs38(FileItemContent, { children: [
-      /* @__PURE__ */ jsx53(FileName, { id: fileNameId, children: fileName }),
-      /* @__PURE__ */ jsxs38(Flex_default, { gap: "0.25rem", children: [
-        error && /* @__PURE__ */ jsx53(ErrorIcon3, { children: /* @__PURE__ */ jsx53(Icon_default, { icon: "filled_error" }) }),
-        /* @__PURE__ */ jsx53(
+  const translatedLabels = useContext32(HalstackLanguageContext);
+  const fileNameId = useId13();
+  return /* @__PURE__ */ jsxs39(MainContainer3, { error, role: "listitem", singleFileMode, showPreview, children: [
+    showPreview && (type.includes("image") ? /* @__PURE__ */ jsx54(ImagePreview, { src: preview, alt: fileName }) : /* @__PURE__ */ jsx54(IconPreview, { "aria-labelledby": fileNameId, error, role: "img", children: /* @__PURE__ */ jsx54(Icon_default, { icon: preview }) })),
+    /* @__PURE__ */ jsxs39(FileItemContent, { children: [
+      /* @__PURE__ */ jsx54(FileName, { id: fileNameId, children: fileName }),
+      /* @__PURE__ */ jsxs39(Flex_default, { gap: "0.25rem", children: [
+        error && /* @__PURE__ */ jsx54(ErrorIcon3, { children: /* @__PURE__ */ jsx54(Icon_default, { icon: "filled_error" }) }),
+        /* @__PURE__ */ jsx54(
           ActionIcon_default,
           {
             onClick: () => onDelete(fileName),
@@ -9780,7 +10046,7 @@ var FileItem = ({
           }
         )
       ] }),
-      error && !singleFileMode && /* @__PURE__ */ jsx53(ErrorMessage, { role: "alert", "aria-live": "assertive", children: error })
+      error && !singleFileMode && /* @__PURE__ */ jsx54(ErrorMessage, { role: "alert", "aria-live": "assertive", children: error })
     ] })
   ] });
 };
@@ -9791,13 +10057,7 @@ var getFilePreview = async (file) => {
   if (file.type.includes("video")) return "filled_movie";
   else if (file.type.includes("audio")) return "music_video";
   else if (file.type.includes("image")) {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = (e) => {
-        resolve(e.target?.result);
-      };
-    });
+    return Promise.resolve(URL.createObjectURL(file));
   } else return "draft";
 };
 var isFileIncluded = (file, fileList) => {
@@ -9808,8 +10068,8 @@ var isFileIncluded = (file, fileList) => {
 };
 
 // src/file-input/FileInput.tsx
-import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
-var FileInputContainer = styled47.div`
+import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
+var FileInputContainer = styled48.div`
   display: flex;
   flex-direction: column;
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -9819,40 +10079,40 @@ var FileInputContainer = styled47.div`
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   width: fit-content;
 `;
-var Label6 = styled47.label`
+var Label6 = styled48.label`
   color: ${(props) => props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor};
   font-family: ${(props) => props.theme.labelFontFamily};
   font-size: ${(props) => props.theme.labelFontSize};
   font-weight: ${(props) => props.theme.labelFontWeight};
   line-height: ${(props) => props.theme.labelLineHeight};
 `;
-var HelperText4 = styled47.span`
+var HelperText4 = styled48.span`
   color: ${(props) => props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor};
   font-family: ${(props) => props.theme.helperTextFontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};
   font-weight: ${(props) => props.theme.helperTextFontWeight};
   line-height: ${(props) => props.theme.helperTextLineHeight};
 `;
-var FileContainer = styled47.div`
+var FileContainer = styled48.div`
   display: flex;
   ${(props) => props.singleFileMode ? "flex-direction: row; column-gap: 0.25rem;" : "flex-direction: column; row-gap: 0.25rem;"}
   margin-top: 0.25rem;
 `;
-var ValueInput2 = styled47.input`
+var ValueInput2 = styled48.input`
   display: none;
 `;
-var FileItemListContainer = styled47.div`
+var FileItemListContainer = styled48.div`
   display: flex;
   flex-direction: column;
   row-gap: 0.25rem;
 `;
-var Container2 = styled47.div`
+var Container2 = styled48.div`
   display: flex;
   flex-direction: column;
   row-gap: 0.25rem;
   margin-top: 0.25rem;
 `;
-var DragDropArea = styled47.div`
+var DragDropArea = styled48.div`
   box-sizing: border-box;
   display: flex;
   ${(props) => props.mode === "filedrop" ? "flex-direction: row; column-gap: 0.75rem; height: 48px;" : "justify-content: center; flex-direction: column; row-gap: 0.5rem; height: 160px;"}
@@ -9872,7 +10132,7 @@ var DragDropArea = styled47.div`
     `}
   cursor: ${(props) => props.disabled && "not-allowed"};
 `;
-var DropzoneLabel = styled47.div`
+var DropzoneLabel = styled48.div`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -9884,7 +10144,7 @@ var DropzoneLabel = styled47.div`
   font-size: ${(props) => props.theme.dropLabelFontSize};
   font-weight: ${(props) => props.theme.dropLabelFontWeight};
 `;
-var FiledropLabel = styled47.span`
+var FiledropLabel = styled48.span`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -9893,7 +10153,7 @@ var FiledropLabel = styled47.span`
   font-size: ${(props) => props.theme.dropLabelFontSize};
   font-weight: ${(props) => props.theme.dropLabelFontWeight};
 `;
-var ErrorMessage2 = styled47.div`
+var ErrorMessage2 = styled48.div`
   color: ${(props) => props.theme.errorMessageFontColor};
   font-family: ${(props) => props.theme.errorMessageFontFamily};
   font-size: ${(props) => props.theme.errorMessageFontSize};
@@ -9919,11 +10179,11 @@ var DxcFileInput = forwardRef8(
     margin,
     tabIndex = 0
   }, ref) => {
-    const [isDragging, setIsDragging] = useState23(false);
-    const [files, setFiles] = useState23([]);
-    const fileInputId = `file-input-${useId13()}`;
-    const colorsTheme = useContext32(HalstackContext);
-    const translatedLabels = useContext32(HalstackLanguageContext);
+    const [isDragging, setIsDragging] = useState24(false);
+    const [files, setFiles] = useState24([]);
+    const fileInputId = `file-input-${useId14()}`;
+    const colorsTheme = useContext33(HalstackContext);
+    const translatedLabels = useContext33(HalstackLanguageContext);
     const checkFileSize = (file) => {
       if (minSize && file.size < minSize) return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
       else if (maxSize && file.size > maxSize) return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
@@ -10012,11 +10272,11 @@ var DxcFileInput = forwardRef8(
       };
       getFiles();
     }, [value]);
-    return /* @__PURE__ */ jsx54(ThemeProvider21, { theme: colorsTheme.fileInput, children: /* @__PURE__ */ jsxs39(FileInputContainer, { margin, ref, children: [
-      /* @__PURE__ */ jsx54(Label6, { htmlFor: fileInputId, disabled, children: label }),
-      /* @__PURE__ */ jsx54(HelperText4, { disabled, children: helperText }),
-      mode === "file" ? /* @__PURE__ */ jsxs39(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
-        /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(ThemeProvider22, { theme: colorsTheme.fileInput, children: /* @__PURE__ */ jsxs40(FileInputContainer, { margin, ref, children: [
+      /* @__PURE__ */ jsx55(Label6, { htmlFor: fileInputId, disabled, children: label }),
+      /* @__PURE__ */ jsx55(HelperText4, { disabled, children: helperText }),
+      mode === "file" ? /* @__PURE__ */ jsxs40(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
+        /* @__PURE__ */ jsx55(
           ValueInput2,
           {
             id: fileInputId,
@@ -10028,7 +10288,7 @@ var DxcFileInput = forwardRef8(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(
           Button_default,
           {
             mode: "secondary",
@@ -10039,7 +10299,7 @@ var DxcFileInput = forwardRef8(
             tabIndex
           }
         ),
-        files.length > 0 && /* @__PURE__ */ jsx54(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx54(
+        files.length > 0 && /* @__PURE__ */ jsx55(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx55(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -10053,8 +10313,8 @@ var DxcFileInput = forwardRef8(
           },
           `file-${index}`
         )) })
-      ] }) : /* @__PURE__ */ jsxs39(Container2, { children: [
-        /* @__PURE__ */ jsx54(
+      ] }) : /* @__PURE__ */ jsxs40(Container2, { children: [
+        /* @__PURE__ */ jsx55(
           ValueInput2,
           {
             id: fileInputId,
@@ -10066,7 +10326,7 @@ var DxcFileInput = forwardRef8(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs40(
           DragDropArea,
           {
             isDragging,
@@ -10077,7 +10337,7 @@ var DxcFileInput = forwardRef8(
             onDragOver: handleDrag,
             onDragLeave: handleDragOut,
             children: [
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx55(
                 Button_default,
                 {
                   mode: "secondary",
@@ -10087,11 +10347,11 @@ var DxcFileInput = forwardRef8(
                   size: { width: "fitContent" }
                 }
               ),
-              mode === "dropzone" ? /* @__PURE__ */ jsx54(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ jsx54(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
+              mode === "dropzone" ? /* @__PURE__ */ jsx55(DropzoneLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) }) : /* @__PURE__ */ jsx55(FiledropLabel, { disabled, children: dropAreaLabel ?? (multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) })
             ]
           }
         ),
-        files.length > 0 && /* @__PURE__ */ jsx54(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx54(
+        files.length > 0 && /* @__PURE__ */ jsx55(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx55(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -10106,16 +10366,16 @@ var DxcFileInput = forwardRef8(
           `file-${index}`
         )) })
       ] }),
-      mode === "file" && !multiple && files.length === 1 && files[0]?.error && /* @__PURE__ */ jsx54(ErrorMessage2, { children: files[0].error })
+      mode === "file" && !multiple && files.length === 1 && files[0]?.error && /* @__PURE__ */ jsx55(ErrorMessage2, { children: files[0].error })
     ] }) });
   }
 );
 var FileInput_default = DxcFileInput;
 
 // src/grid/Grid.tsx
-import styled48 from "styled-components";
-import { jsx as jsx55 } from "react/jsx-runtime";
-var Grid = styled48.div`
+import styled49 from "styled-components";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var Grid = styled49.div`
   display: grid;
   ${(props) => `
     ${props.templateColumns ? `grid-template-columns: ${props.templateColumns.join(" ")};` : ""}
@@ -10133,7 +10393,7 @@ var Grid = styled48.div`
     ${props.placeSelf ? typeof props.placeSelf === "string" ? `place-self: ${props.placeSelf};` : `align-self: ${props.placeSelf.alignSelf ?? ""}; justify-self: ${props.placeSelf.justifySelf ?? ""};` : ""}
   `}
 `;
-var GridItem = styled48.div`
+var GridItem = styled49.div`
   ${(props) => `
     ${props.areaName ? `grid-area: ${props.areaName};` : ""}
     ${props.column ? `grid-column: ${typeof props.column === "string" || typeof props.column === "number" ? props.column : `${props.column.start} / ${props.column.end};`};` : ""}
@@ -10141,29 +10401,29 @@ var GridItem = styled48.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__ */ jsx55(Grid, { ...props });
+var DxcGrid = (props) => /* @__PURE__ */ jsx56(Grid, { ...props });
 DxcGrid.Item = GridItem;
 var Grid_default = DxcGrid;
 
 // src/heading/Heading.tsx
-import styled49, { ThemeProvider as ThemeProvider22 } from "styled-components";
-import { useContext as useContext33 } from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import styled50, { ThemeProvider as ThemeProvider23 } from "styled-components";
+import { useContext as useContext34 } from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var DxcHeading = ({ level = 1, text = "", as, weight, margin }) => {
-  const colorsTheme = useContext33(HalstackContext);
+  const colorsTheme = useContext34(HalstackContext);
   const checkValidAs = () => {
     if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as;
   };
-  return /* @__PURE__ */ jsx56(ThemeProvider22, { theme: colorsTheme.heading, children: /* @__PURE__ */ jsx56(HeadingContainer, { margin, children: level === 1 ? /* @__PURE__ */ jsx56(HeadingLevel1, { as: checkValidAs(), weight, children: text }) : level === 2 ? /* @__PURE__ */ jsx56(HeadingLevel2, { as: checkValidAs(), weight, children: text }) : level === 3 ? /* @__PURE__ */ jsx56(HeadingLevel3, { as: checkValidAs(), weight, children: text }) : level === 4 ? /* @__PURE__ */ jsx56(HeadingLevel4, { as: checkValidAs(), weight, children: text }) : /* @__PURE__ */ jsx56(HeadingLevel5, { as: checkValidAs(), weight, children: text }) }) });
+  return /* @__PURE__ */ jsx57(ThemeProvider23, { theme: colorsTheme.heading, children: /* @__PURE__ */ jsx57(HeadingContainer, { margin, children: level === 1 ? /* @__PURE__ */ jsx57(HeadingLevel1, { as: checkValidAs(), weight, children: text }) : level === 2 ? /* @__PURE__ */ jsx57(HeadingLevel2, { as: checkValidAs(), weight, children: text }) : level === 3 ? /* @__PURE__ */ jsx57(HeadingLevel3, { as: checkValidAs(), weight, children: text }) : level === 4 ? /* @__PURE__ */ jsx57(HeadingLevel4, { as: checkValidAs(), weight, children: text }) : /* @__PURE__ */ jsx57(HeadingLevel5, { as: checkValidAs(), weight, children: text }) }) });
 };
-var HeadingContainer = styled49.div`
+var HeadingContainer = styled50.div`
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
   margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
   margin-right: ${(props) => props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""};
   margin-bottom: ${(props) => props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
 `;
-var HeadingLevel1 = styled49.h1`
+var HeadingLevel1 = styled50.h1`
   font-family: ${(props) => props.theme.level1FontFamily};
   font-style: ${(props) => props.theme.level1FontStyle};
   font-size: ${(props) => props.theme.level1FontSize};
@@ -10173,7 +10433,7 @@ var HeadingLevel1 = styled49.h1`
   color: ${(props) => props.theme.level1FontColor};
   margin: 0;
 `;
-var HeadingLevel2 = styled49.h2`
+var HeadingLevel2 = styled50.h2`
   font-family: ${(props) => props.theme.level2FontFamily};
   font-style: ${(props) => props.theme.level2FontStyle};
   font-size: ${(props) => props.theme.level2FontSize};
@@ -10183,7 +10443,7 @@ var HeadingLevel2 = styled49.h2`
   color: ${(props) => props.theme.level2FontColor};
   margin: 0;
 `;
-var HeadingLevel3 = styled49.h3`
+var HeadingLevel3 = styled50.h3`
   font-family: ${(props) => props.theme.level3FontFamily};
   font-style: ${(props) => props.theme.level3FontStyle};
   font-size: ${(props) => props.theme.level3FontSize};
@@ -10193,7 +10453,7 @@ var HeadingLevel3 = styled49.h3`
   color: ${(props) => props.theme.level3FontColor};
   margin: 0;
 `;
-var HeadingLevel4 = styled49.h4`
+var HeadingLevel4 = styled50.h4`
   font-family: ${(props) => props.theme.level4FontFamily};
   font-style: ${(props) => props.theme.level4FontStyle};
   font-size: ${(props) => props.theme.level4FontSize};
@@ -10203,7 +10463,7 @@ var HeadingLevel4 = styled49.h4`
   color: ${(props) => props.theme.level4FontColor};
   margin: 0;
 `;
-var HeadingLevel5 = styled49.h5`
+var HeadingLevel5 = styled50.h5`
   font-family: ${(props) => props.theme.level5FontFamily};
   font-style: ${(props) => props.theme.level5FontStyle};
   font-size: ${(props) => props.theme.level5FontSize};
@@ -10216,10 +10476,10 @@ var HeadingLevel5 = styled49.h5`
 var Heading_default = DxcHeading;
 
 // src/image/Image.tsx
-import styled50, { ThemeProvider as ThemeProvider23 } from "styled-components";
-import { useContext as useContext34 } from "react";
-import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
-var Figure = styled50.figure`
+import styled51, { ThemeProvider as ThemeProvider24 } from "styled-components";
+import { useContext as useContext35 } from "react";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+var Figure = styled51.figure`
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -10227,7 +10487,7 @@ var Figure = styled50.figure`
   margin: 0;
   padding: 0;
 `;
-var CaptionContainer = styled50.figcaption`
+var CaptionContainer = styled51.figcaption`
   color: ${(props) => props.theme.captionFontColor};
   font-family: ${(props) => props.theme.captionFontFamily};
   font-size: ${(props) => props.theme.captionFontSize};
@@ -10235,9 +10495,9 @@ var CaptionContainer = styled50.figcaption`
   font-weight: ${(props) => props.theme.captionFontWeight};
   line-height: ${(props) => props.theme.captionLineHeight};
 `;
-var CaptionWrapper = ({ caption, children }) => caption != null ? /* @__PURE__ */ jsxs40(Figure, { children: [
+var CaptionWrapper = ({ caption, children }) => caption != null ? /* @__PURE__ */ jsxs41(Figure, { children: [
   children,
-  /* @__PURE__ */ jsx57(CaptionContainer, { children: caption })
+  /* @__PURE__ */ jsx58(CaptionContainer, { children: caption })
 ] }) : children;
 function DxcImage({
   alt,
@@ -10253,8 +10513,8 @@ function DxcImage({
   onLoad,
   onError
 }) {
-  const colorsTheme = useContext34(HalstackContext);
-  return /* @__PURE__ */ jsx57(ThemeProvider23, { theme: colorsTheme.image, children: /* @__PURE__ */ jsx57(CaptionWrapper, { caption, children: /* @__PURE__ */ jsx57(
+  const colorsTheme = useContext35(HalstackContext);
+  return /* @__PURE__ */ jsx58(ThemeProvider24, { theme: colorsTheme.image, children: /* @__PURE__ */ jsx58(CaptionWrapper, { caption, children: /* @__PURE__ */ jsx58(
     "img",
     {
       alt,
@@ -10275,16 +10535,16 @@ function DxcImage({
 }
 
 // src/inset/Inset.tsx
-import styled51 from "styled-components";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import styled52 from "styled-components";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var getSpacingValue2 = (spacingName) => spacingName ?? "0rem";
-var StyledInset = styled51.div`
+var StyledInset = styled52.div`
   ${({ space, horizontal, vertical, top, right, bottom, left }) => `
   padding: ${getSpacingValue2(top || vertical || space)} ${getSpacingValue2(right || horizontal || space)}
     ${getSpacingValue2(bottom || vertical || space)} ${getSpacingValue2(left || horizontal || space)};
 `}
 `;
-var Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }) => /* @__PURE__ */ jsx58(
+var Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }) => /* @__PURE__ */ jsx59(
   StyledInset,
   {
     space,
@@ -10300,10 +10560,10 @@ var Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Inset_default = Inset;
 
 // src/link/Link.tsx
-import { forwardRef as forwardRef9, useContext as useContext35 } from "react";
-import styled52, { ThemeProvider as ThemeProvider24 } from "styled-components";
-import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
-var StyledLink = styled52.a`
+import { forwardRef as forwardRef9, useContext as useContext36 } from "react";
+import styled53, { ThemeProvider as ThemeProvider25 } from "styled-components";
+import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+var StyledLink = styled53.a`
   all: unset;
   display: inline-flex;
   align-items: baseline;
@@ -10340,7 +10600,7 @@ var StyledLink = styled52.a`
     ${(props) => props.disabled && "outline: none"}
   }
 `;
-var LinkContainer = styled52.span`
+var LinkContainer = styled53.span`
   ${(props) => `border-bottom: ${props.theme.underlineThickness} ${props.theme.underlineStyle} transparent;`}
   display: inline-flex;
   align-items: center;
@@ -10357,7 +10617,7 @@ var LinkContainer = styled52.span`
                   border-bottom-color: ${props.theme.activeUnderlineColor} !important;`}
   }
 `;
-var LinkIconContainer = styled52.div`
+var LinkIconContainer = styled53.div`
   display: flex;
   font-size: ${(props) => props.theme.iconSize};
   svg {
@@ -10379,8 +10639,8 @@ var DxcLink = forwardRef9(
     children,
     ...otherProps
   }, ref) => {
-    const colorsTheme = useContext35(HalstackContext);
-    return /* @__PURE__ */ jsx59(ThemeProvider24, { theme: colorsTheme.link, children: /* @__PURE__ */ jsx59(
+    const colorsTheme = useContext36(HalstackContext);
+    return /* @__PURE__ */ jsx60(ThemeProvider25, { theme: colorsTheme.link, children: /* @__PURE__ */ jsx60(
       StyledLink,
       {
         as: onClick && !href ? "button" : "a",
@@ -10393,9 +10653,9 @@ var DxcLink = forwardRef9(
         margin,
         ref,
         ...otherProps,
-        children: /* @__PURE__ */ jsxs41(LinkContainer, { iconPosition, inheritColor, children: [
+        children: /* @__PURE__ */ jsxs42(LinkContainer, { iconPosition, inheritColor, children: [
           children,
-          icon && /* @__PURE__ */ jsx59(LinkIconContainer, { children: typeof icon === "string" ? /* @__PURE__ */ jsx59(Icon_default, { icon }) : icon })
+          icon && /* @__PURE__ */ jsx60(LinkIconContainer, { children: typeof icon === "string" ? /* @__PURE__ */ jsx60(Icon_default, { icon }) : icon })
         ] })
       }
     ) });
@@ -10404,23 +10664,32 @@ var DxcLink = forwardRef9(
 var Link_default = DxcLink;
 
 // src/nav-tabs/NavTabs.tsx
-import { Children as Children4, useContext as useContext37, useEffect as useEffect17, useMemo as useMemo13, useRef as useRef14, useState as useState24 } from "react";
-import styled54, { ThemeProvider as ThemeProvider25 } from "styled-components";
+import { Children as Children4, useContext as useContext38, useEffect as useEffect17, useMemo as useMemo14, useRef as useRef14, useState as useState25 } from "react";
+import styled55, { ThemeProvider as ThemeProvider26 } from "styled-components";
 
 // src/nav-tabs/Tab.tsx
-import { useEffect as useEffect16, forwardRef as forwardRef10, useContext as useContext36, useRef as useRef13, useImperativeHandle } from "react";
-import styled53 from "styled-components";
+import { useEffect as useEffect16, forwardRef as forwardRef10, useContext as useContext37, useRef as useRef13, useImperativeHandle } from "react";
+import styled54 from "styled-components";
 
 // src/nav-tabs/NavTabsContext.tsx
 import { createContext as createContext8 } from "react";
 var NavTabsContext_default = createContext8(null);
 
 // src/nav-tabs/Tab.tsx
-import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 var DxcTab = forwardRef10(
-  ({ href, active = false, icon, disabled = false, notificationNumber = false, children, ...otherProps }, ref) => {
+  ({
+    href,
+    active = false,
+    icon,
+    disabled = false,
+    onClick,
+    notificationNumber = false,
+    children,
+    ...otherProps
+  }, ref) => {
     const tabRef = useRef13();
-    const { iconPosition, tabIndex, focusedLabel } = useContext36(NavTabsContext_default) ?? {};
+    const { iconPosition, tabIndex, focusedLabel } = useContext37(NavTabsContext_default) ?? {};
     const innerRef = useRef13(null);
     useImperativeHandle(ref, () => innerRef.current, []);
     useEffect16(() => {
@@ -10439,13 +10708,17 @@ var DxcTab = forwardRef10(
           break;
       }
     };
-    return /* @__PURE__ */ jsx60(TabContainer, { active, children: /* @__PURE__ */ jsxs42(
+    return /* @__PURE__ */ jsx61(TabContainer, { active, children: /* @__PURE__ */ jsxs43(
       Tab,
       {
-        href: !disabled ? href : void 0,
+        "aria-disabled": disabled,
+        "aria-selected": active,
         disabled,
         active,
+        href: !disabled ? href : void 0,
         iconPosition,
+        onClick,
+        onKeyDown: handleOnKeyDown,
         hasIcon: icon != null,
         ref: (anchorRef) => {
           tabRef.current = anchorRef;
@@ -10457,17 +10730,14 @@ var DxcTab = forwardRef10(
             }
           }
         },
-        onKeyDown: handleOnKeyDown,
         tabIndex: active ? tabIndex : -1,
         role: "tab",
-        "aria-selected": active,
-        "aria-disabled": disabled,
         ...otherProps,
         children: [
-          icon && /* @__PURE__ */ jsx60(TabIconContainer, { iconPosition, active, disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx60(Icon_default, { icon }) : icon }),
-          /* @__PURE__ */ jsxs42(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
-            /* @__PURE__ */ jsx60(Label7, { active, disabled, children }),
-            notificationNumber && !disabled && /* @__PURE__ */ jsx60(
+          icon && /* @__PURE__ */ jsx61(TabIconContainer, { iconPosition, active, disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx61(Icon_default, { icon }) : icon }),
+          /* @__PURE__ */ jsxs43(Flex_default, { alignItems: "center", gap: "0.5rem", children: [
+            /* @__PURE__ */ jsx61(Label7, { active, disabled, children }),
+            notificationNumber && !disabled && /* @__PURE__ */ jsx61(
               Badge_default,
               {
                 mode: "notification",
@@ -10481,12 +10751,12 @@ var DxcTab = forwardRef10(
     ) });
   }
 );
-var TabContainer = styled53.div`
+var TabContainer = styled54.div`
   align-items: stretch;
   border-bottom: 2px solid ${(props) => props.active ? props.theme.selectedUnderlineColor : "transparent"};
   padding: 0.5rem;
 `;
-var Tab = styled53.a`
+var Tab = styled54.a`
   box-sizing: border-box;
   display: flex;
   flex-direction: ${(props) => props.hasIcon && props.iconPosition === "top" ? "column" : "row"};
@@ -10516,7 +10786,7 @@ var Tab = styled53.a`
       }
   `}
 `;
-var Label7 = styled53.span`
+var Label7 = styled54.span`
   display: inline;
   color: ${(props) => props.disabled ? props.theme.disabledFontColor : props.active ? props.theme.selectedFontColor : props.theme.unselectedFontColor};
   font-family: ${(props) => props.theme.fontFamily};
@@ -10531,7 +10801,7 @@ var Label7 = styled53.span`
   white-space: normal;
   margin: 0;
 `;
-var TabIconContainer = styled53.div`
+var TabIconContainer = styled54.div`
   display: flex;
   font-size: 24px;
   color: ${(props) => props.active ? props.theme.selectedIconColor : props.disabled ? props.theme.disabledIconColor : props.theme.unselectedIconColor};
@@ -10543,7 +10813,7 @@ var TabIconContainer = styled53.div`
 var Tab_default = DxcTab;
 
 // src/nav-tabs/NavTabs.tsx
-import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
 var getPropInChild = (child, propName) => {
   if (child && typeof child === "object" && "props" in child) {
     const childWithProps = child;
@@ -10581,17 +10851,17 @@ var getNextTabIndex = (array, initialIndex) => {
   return index;
 };
 var DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }) => {
-  const [innerFocusIndex, setInnerFocusIndex] = useState24(null);
-  const [underlineWidth, setUnderlineWidth] = useState24(null);
+  const [innerFocusIndex, setInnerFocusIndex] = useState25(null);
+  const [underlineWidth, setUnderlineWidth] = useState25(null);
   const refNavTabList = useRef14(null);
-  const colorsTheme = useContext37(HalstackContext);
+  const colorsTheme = useContext38(HalstackContext);
   const childArray = Children4.toArray(children).filter(
     (child) => typeof child === "object" && "props" in child
   );
   useEffect17(() => {
     setUnderlineWidth(refNavTabList?.current?.scrollWidth ?? null);
   }, [children]);
-  const contextValue = useMemo13(
+  const contextValue = useMemo14(
     () => ({
       iconPosition,
       tabIndex,
@@ -10616,12 +10886,12 @@ var DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }) => {
         break;
     }
   };
-  return /* @__PURE__ */ jsx61(ThemeProvider25, { theme: colorsTheme.navTabs, children: /* @__PURE__ */ jsxs43(NavTabsContainer, { onKeyDown: handleOnKeyDown, ref: refNavTabList, role: "tablist", "aria-label": "Navigation tabs", children: [
-    /* @__PURE__ */ jsx61(NavTabsContext_default.Provider, { value: contextValue, children }),
-    /* @__PURE__ */ jsx61(Underline, { underlineWidth: underlineWidth ?? 0 })
+  return /* @__PURE__ */ jsx62(ThemeProvider26, { theme: colorsTheme.navTabs, children: /* @__PURE__ */ jsxs44(NavTabsContainer, { onKeyDown: handleOnKeyDown, ref: refNavTabList, role: "tablist", "aria-label": "Navigation tabs", children: [
+    /* @__PURE__ */ jsx62(NavTabsContext_default.Provider, { value: contextValue, children }),
+    /* @__PURE__ */ jsx62(Underline, { underlineWidth: underlineWidth ?? 0 })
   ] }) });
 };
-var Underline = styled54.div`
+var Underline = styled55.div`
   position: absolute;
   bottom: 0;
   left: 0;
@@ -10631,7 +10901,7 @@ var Underline = styled54.div`
   width: ${(props) => props.underlineWidth}px;
 `;
 DxcNavTabs.Tab = Tab_default;
-var NavTabsContainer = styled54.div`
+var NavTabsContainer = styled55.div`
   display: flex;
   position: relative;
   overflow: auto;
@@ -10640,9 +10910,9 @@ var NavTabsContainer = styled54.div`
 var NavTabs_default = DxcNavTabs;
 
 // src/number-input/NumberInput.tsx
-import { forwardRef as forwardRef11, useEffect as useEffect18, useMemo as useMemo14, useRef as useRef15 } from "react";
-import styled55 from "styled-components";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11, useEffect as useEffect18, useMemo as useMemo15, useRef as useRef15 } from "react";
+import styled56 from "styled-components";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var DxcNumberInput = forwardRef11(
   ({
     label,
@@ -10670,7 +10940,7 @@ var DxcNumberInput = forwardRef11(
     showControls = true
   }, ref) => {
     const numberInputRef = useRef15(null);
-    const contextValue = useMemo14(
+    const contextValue = useMemo15(
       () => ({
         maxNumber: max,
         minNumber: min,
@@ -10690,7 +10960,7 @@ var DxcNumberInput = forwardRef11(
         input?.removeEventListener("wheel", preventDefault);
       };
     }, []);
-    return /* @__PURE__ */ jsx62(NumberInputContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsx62(NumberInputContainer, { ref: numberInputRef, size, children: /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(NumberInputContext_default.Provider, { value: contextValue, children: /* @__PURE__ */ jsx63(NumberInputContainer, { ref: numberInputRef, size, children: /* @__PURE__ */ jsx63(
       TextInput_default,
       {
         label,
@@ -10717,7 +10987,7 @@ var DxcNumberInput = forwardRef11(
     ) }) });
   }
 );
-var NumberInputContainer = styled55.div`
+var NumberInputContainer = styled56.div`
   ${(props) => props.size === "fillParent" && "width: 100%;"}
   // Chrome, Safari, Edge, Opera
   input::-webkit-outer-spin-button,
@@ -10734,10 +11004,10 @@ var NumberInputContainer = styled55.div`
 var NumberInput_default = DxcNumberInput;
 
 // src/paragraph/Paragraph.tsx
-import { useContext as useContext38 } from "react";
-import styled56, { ThemeProvider as ThemeProvider26 } from "styled-components";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Paragraph = styled56.p`
+import { useContext as useContext39 } from "react";
+import styled57, { ThemeProvider as ThemeProvider27 } from "styled-components";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var Paragraph = styled57.p`
   display: ${(props) => props.theme.display};
   font-family: "Open Sans", sans-serif;
   font-size: ${(props) => props.theme.fontSize};
@@ -10753,14 +11023,14 @@ var Paragraph = styled56.p`
   margin: 0;
 `;
 function DxcParagraph({ children }) {
-  const colorsTheme = useContext38(HalstackContext);
-  return /* @__PURE__ */ jsx63(ThemeProvider26, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ jsx63(Paragraph, { children }) });
+  const colorsTheme = useContext39(HalstackContext);
+  return /* @__PURE__ */ jsx64(ThemeProvider27, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ jsx64(Paragraph, { children }) });
 }
 
 // src/password-input/PasswordInput.tsx
-import { forwardRef as forwardRef12, useContext as useContext39, useEffect as useEffect19, useRef as useRef16, useState as useState25 } from "react";
-import styled57 from "styled-components";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { forwardRef as forwardRef12, useContext as useContext40, useEffect as useEffect19, useRef as useRef16, useState as useState26 } from "react";
+import styled58 from "styled-components";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var setInputType = (type, element) => {
   element?.getElementsByTagName("input")[0]?.setAttribute("type", type);
 };
@@ -10787,9 +11057,9 @@ var DxcPasswordInput = forwardRef12(
     tabIndex = 0,
     ariaLabel = "Password input"
   }, ref) => {
-    const [isPasswordVisible, setIsPasswordVisible] = useState25(false);
+    const [isPasswordVisible, setIsPasswordVisible] = useState26(false);
     const inputRef = useRef16(null);
-    const { passwordInput } = useContext39(HalstackLanguageContext);
+    const { passwordInput } = useContext40(HalstackLanguageContext);
     useEffect19(() => {
       (() => {
         if (isPasswordVisible) {
@@ -10805,7 +11075,7 @@ var DxcPasswordInput = forwardRef12(
         }
       })();
     }, [isPasswordVisible, passwordInput]);
-    return /* @__PURE__ */ jsx64(PasswordInput, { ref, role: "group", size, children: /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(PasswordInput, { ref, role: "group", size, children: /* @__PURE__ */ jsx65(
       TextInput_default,
       {
         label,
@@ -10836,7 +11106,7 @@ var DxcPasswordInput = forwardRef12(
     ) });
   }
 );
-var PasswordInput = styled57.div`
+var PasswordInput = styled58.div`
   ${(props) => props.size === "fillParent" && "width: 100%;"}
   & ::-ms-reveal {
     display: none;
@@ -10845,10 +11115,10 @@ var PasswordInput = styled57.div`
 var PasswordInput_default = DxcPasswordInput;
 
 // src/progress-bar/ProgressBar.tsx
-import { useContext as useContext40, useEffect as useEffect20, useId as useId14, useState as useState26 } from "react";
-import styled58, { ThemeProvider as ThemeProvider27 } from "styled-components";
-import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
-var Overlay4 = styled58.div`
+import { useContext as useContext41, useEffect as useEffect20, useId as useId15, useState as useState27 } from "react";
+import styled59, { ThemeProvider as ThemeProvider28 } from "styled-components";
+import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
+var Overlay4 = styled59.div`
   ${({ overlay, theme }) => overlay ? `background-color: ${theme.overlayColor};
       width: 100%;
       justify-content: center;
@@ -10860,13 +11130,13 @@ var Overlay4 = styled58.div`
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 1300;` : `background-color: transparent;`}
+      z-index: 410;` : `background-color: transparent;`}
   display: flex;
   flex-wrap: wrap;
   min-width: 100px;
   width: 100%;
 `;
-var MainContainer4 = styled58.div`
+var MainContainer4 = styled59.div`
   width: ${(props) => props.overlay ? "80%" : "100%"};
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
   margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -10876,9 +11146,9 @@ var MainContainer4 = styled58.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  z-index: ${(props) => props.overlay ? "100" : "0"};
+  z-index: ${(props) => props.overlay ? "1" : "0"};
 `;
-var ProgressBarLabel = styled58.div`
+var ProgressBarLabel = styled59.div`
   font-family: ${(props) => props.theme.labelFontFamily};
   font-style: ${(props) => props.theme.labelFontStyle};
   font-size: ${(props) => props.theme.labelFontSize};
@@ -10890,7 +11160,7 @@ var ProgressBarLabel = styled58.div`
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
-var ProgressBarProgress = styled58.div`
+var ProgressBarProgress = styled59.div`
   flex-shrink: 0;
   color: ${(props) => props.overlay ? props.theme.overlayFontColor : props.theme.valueFontColor};
   font-family: ${(props) => props.theme.valueFontFamily};
@@ -10899,7 +11169,7 @@ var ProgressBarProgress = styled58.div`
   font-weight: ${(props) => props.theme.valueFontWeight};
   text-transform: ${(props) => props.theme.valueFontTextTransform};
 `;
-var HelperText5 = styled58.span`
+var HelperText5 = styled59.span`
   color: ${(props) => props.overlay ? props.theme.overlayFontColor : props.theme.helperTextFontColor};
   font-family: ${(props) => props.theme.helperTextFontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};
@@ -10907,14 +11177,14 @@ var HelperText5 = styled58.span`
   font-weight: ${(props) => props.theme.helperTextFontWeight};
   line-height: 1.5em;
 `;
-var LinearProgress = styled58.div`
+var LinearProgress = styled59.div`
   position: relative;
   border-radius: ${(props) => props.theme.borderRadius};
   height: ${(props) => props.theme.thickness};
   background-color: ${(props) => props.theme.totalLineColor};
   overflow: hidden;
 `;
-var LinearProgressBar = styled58.span`
+var LinearProgressBar = styled59.span`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -10965,21 +11235,21 @@ var DxcProgressBar = ({
   margin,
   ariaLabel = "Progress bar"
 }) => {
-  const colorsTheme = useContext40(HalstackContext);
-  const labelId = `label-${useId14()}`;
-  const [innerValue, setInnerValue] = useState26();
+  const colorsTheme = useContext41(HalstackContext);
+  const labelId = `label-${useId15()}`;
+  const [innerValue, setInnerValue] = useState27();
   useEffect20(() => {
     if (value != null) setInnerValue(value < 0 ? 0 : value > 100 ? 100 : value);
   }, [value]);
-  return /* @__PURE__ */ jsx65(ThemeProvider27, { theme: colorsTheme.progressBar, children: /* @__PURE__ */ jsx65(Overlay4, { overlay, children: /* @__PURE__ */ jsxs44(MainContainer4, { overlay, margin, children: [
-    /* @__PURE__ */ jsxs44(Flex_default, { justifyContent: "space-between", gap: "0.5rem", children: [
-      label && /* @__PURE__ */ jsx65(ProgressBarLabel, { id: labelId, overlay, children: label }),
-      innerValue != null && showValue && /* @__PURE__ */ jsxs44(ProgressBarProgress, { overlay, children: [
+  return /* @__PURE__ */ jsx66(ThemeProvider28, { theme: colorsTheme.progressBar, children: /* @__PURE__ */ jsx66(Overlay4, { overlay, children: /* @__PURE__ */ jsxs45(MainContainer4, { overlay, margin, children: [
+    /* @__PURE__ */ jsxs45(Flex_default, { justifyContent: "space-between", gap: "0.5rem", children: [
+      label && /* @__PURE__ */ jsx66(ProgressBarLabel, { id: labelId, overlay, children: label }),
+      innerValue != null && showValue && /* @__PURE__ */ jsxs45(ProgressBarProgress, { overlay, children: [
         innerValue,
         " %"
       ] })
     ] }),
-    /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx66(
       LinearProgress,
       {
         role: "progressbar",
@@ -10989,27 +11259,27 @@ var DxcProgressBar = ({
         "aria-valuenow": innerValue,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        children: /* @__PURE__ */ jsx65(LinearProgressBar, { variant: innerValue == null ? "indeterminate" : "determinate", value: innerValue })
+        children: /* @__PURE__ */ jsx66(LinearProgressBar, { variant: innerValue == null ? "indeterminate" : "determinate", value: innerValue })
       }
     ),
-    helperText && /* @__PURE__ */ jsx65(HelperText5, { overlay, children: helperText })
+    helperText && /* @__PURE__ */ jsx66(HelperText5, { overlay, children: helperText })
   ] }) }) });
 };
 var ProgressBar_default = DxcProgressBar;
 
 // src/quick-nav/QuickNav.tsx
-import { useContext as useContext41 } from "react";
+import { useContext as useContext42 } from "react";
 import slugify from "slugify";
-import styled59, { ThemeProvider as ThemeProvider28 } from "styled-components";
-import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
+import styled60, { ThemeProvider as ThemeProvider29 } from "styled-components";
+import { jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
 var DxcQuickNav = ({ title, links }) => {
-  const translatedLabels = useContext41(HalstackLanguageContext);
-  const colorsTheme = useContext41(HalstackContext);
-  return /* @__PURE__ */ jsx66(ThemeProvider28, { theme: colorsTheme.quickNav, children: /* @__PURE__ */ jsx66(QuickNavContainer, { children: /* @__PURE__ */ jsxs45(Flex_default, { direction: "column", gap: "0.5rem", children: [
-    /* @__PURE__ */ jsx66(Heading_default, { level: 4, text: title || translatedLabels.quickNav.contentTitle }),
-    /* @__PURE__ */ jsx66(ListColumn, { children: links.map((link) => /* @__PURE__ */ jsx66("li", { children: /* @__PURE__ */ jsx66(Inset_default, { space: "0.25rem", children: /* @__PURE__ */ jsxs45(DxcTypography, { children: [
-      /* @__PURE__ */ jsx66(Link3, { href: `#${slugify(link.label, { lower: true })}`, children: link.label }),
-      /* @__PURE__ */ jsx66(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ jsx66("li", { children: /* @__PURE__ */ jsx66(Inset_default, { horizontal: "0.5rem", children: /* @__PURE__ */ jsx66(DxcTypography, { children: /* @__PURE__ */ jsx66(
+  const translatedLabels = useContext42(HalstackLanguageContext);
+  const colorsTheme = useContext42(HalstackContext);
+  return /* @__PURE__ */ jsx67(ThemeProvider29, { theme: colorsTheme.quickNav, children: /* @__PURE__ */ jsx67(QuickNavContainer, { children: /* @__PURE__ */ jsxs46(Flex_default, { direction: "column", gap: "0.5rem", children: [
+    /* @__PURE__ */ jsx67(Heading_default, { level: 4, text: title || translatedLabels.quickNav.contentTitle }),
+    /* @__PURE__ */ jsx67(ListColumn, { children: links.map((link) => /* @__PURE__ */ jsx67("li", { children: /* @__PURE__ */ jsx67(Inset_default, { space: "0.25rem", children: /* @__PURE__ */ jsxs46(DxcTypography, { children: [
+      /* @__PURE__ */ jsx67(Link3, { href: `#${slugify(link.label, { lower: true })}`, children: link.label }),
+      /* @__PURE__ */ jsx67(ListSecondColumn, { children: link.links?.map((sublink) => /* @__PURE__ */ jsx67("li", { children: /* @__PURE__ */ jsx67(Inset_default, { horizontal: "0.5rem", children: /* @__PURE__ */ jsx67(DxcTypography, { children: /* @__PURE__ */ jsx67(
         Link3,
         {
           href: `#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
@@ -11021,14 +11291,14 @@ var DxcQuickNav = ({ title, links }) => {
     ] }) }) }, link.label)) })
   ] }) }) });
 };
-var QuickNavContainer = styled59.div`
+var QuickNavContainer = styled60.div`
   padding-top: ${(props) => props.theme.paddingTop};
   padding-bottom: ${(props) => props.theme.paddingBottom};
   padding-left: ${(props) => props.theme.paddingLeft};
   padding-right: ${(props) => props.theme.paddingRight};
   border-left: 2px solid ${(props) => props.theme.dividerBorderColor};
 `;
-var ListColumn = styled59.ul`
+var ListColumn = styled60.ul`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -11036,14 +11306,14 @@ var ListColumn = styled59.ul`
   padding: 0;
   list-style-type: none;
 `;
-var ListSecondColumn = styled59.ul`
+var ListSecondColumn = styled60.ul`
   display: flex;
   flex-direction: column;
   margin: 0;
   padding: 0;
   list-style-type: none;
 `;
-var Link3 = styled59.a`
+var Link3 = styled60.a`
   text-decoration: none;
   font-size: ${(props) => props.theme.fontSize};
   font-family: ${(props) => props.theme.fontFamily};
@@ -11070,13 +11340,13 @@ var Link3 = styled59.a`
 var QuickNav_default = DxcQuickNav;
 
 // src/radio-group/RadioGroup.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback10, useContext as useContext43, useId as useId16, useMemo as useMemo15, useState as useState28 } from "react";
-import styled61, { ThemeProvider as ThemeProvider30 } from "styled-components";
+import { forwardRef as forwardRef13, useCallback as useCallback10, useContext as useContext44, useId as useId17, useMemo as useMemo16, useState as useState29 } from "react";
+import styled62, { ThemeProvider as ThemeProvider31 } from "styled-components";
 
 // src/radio-group/Radio.tsx
-import { memo as memo11, useContext as useContext42, useEffect as useEffect21, useId as useId15, useRef as useRef17, useState as useState27 } from "react";
-import styled60, { ThemeProvider as ThemeProvider29 } from "styled-components";
-import { jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
+import { memo as memo11, useContext as useContext43, useEffect as useEffect21, useId as useId16, useRef as useRef17, useState as useState28 } from "react";
+import styled61, { ThemeProvider as ThemeProvider30 } from "styled-components";
+import { jsx as jsx68, jsxs as jsxs47 } from "react/jsx-runtime";
 var DxcRadio = ({
   label,
   checked,
@@ -11087,14 +11357,14 @@ var DxcRadio = ({
   readOnly,
   tabIndex
 }) => {
-  const radioLabelId = `radio-${useId15()}`;
+  const radioLabelId = `radio-${useId16()}`;
   const ref = useRef17(null);
-  const colorsTheme = useContext42(HalstackContext);
+  const colorsTheme = useContext43(HalstackContext);
   const handleOnClick = () => {
     onClick();
     document.activeElement !== ref.current && ref.current?.focus();
   };
-  const [firstUpdate, setFirstUpdate] = useState27(true);
+  const [firstUpdate, setFirstUpdate] = useState28(true);
   useEffect21(() => {
     if (firstUpdate) {
       setFirstUpdate(false);
@@ -11102,7 +11372,7 @@ var DxcRadio = ({
     }
     focused && ref.current?.focus();
   }, [focused]);
-  return /* @__PURE__ */ jsx67(ThemeProvider29, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsx67(Flex_default, { children: /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsx68(ThemeProvider30, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsx68(Flex_default, { children: /* @__PURE__ */ jsxs47(
     RadioContainer,
     {
       error,
@@ -11110,7 +11380,7 @@ var DxcRadio = ({
       readOnly,
       onClick: disabled ? void 0 : handleOnClick,
       children: [
-        /* @__PURE__ */ jsx67(RadioInputContainer, { children: /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68(RadioInputContainer, { children: /* @__PURE__ */ jsx68(
           RadioInput,
           {
             error,
@@ -11122,10 +11392,10 @@ var DxcRadio = ({
             "aria-labelledby": radioLabelId,
             tabIndex: disabled ? -1 : focused ? tabIndex : -1,
             ref,
-            children: checked && /* @__PURE__ */ jsx67(Dot, { disabled, readOnly, error })
+            children: checked && /* @__PURE__ */ jsx68(Dot, { disabled, readOnly, error })
           }
         ) }),
-        /* @__PURE__ */ jsx67(Label8, { id: radioLabelId, disabled, children: label })
+        /* @__PURE__ */ jsx68(Label8, { id: radioLabelId, disabled, children: label })
       ]
     }
   ) }) });
@@ -11140,14 +11410,14 @@ var getRadioInputStateColor = (props, state) => {
       return props.error ? props.theme.activeErrorRadioInputColor : props.readOnly ? props.theme.activeReadOnlyRadioInputColor : props.theme.activeRadioInputColor;
   }
 };
-var RadioInputContainer = styled60.span`
+var RadioInputContainer = styled61.span`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 24px;
   width: 24px;
 `;
-var RadioInput = styled60.span`
+var RadioInput = styled61.span`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -11163,13 +11433,13 @@ var RadioInput = styled60.span`
   }
   ${(props) => props.disabled && "pointer-events: none;"}
 `;
-var Dot = styled60.span`
+var Dot = styled61.span`
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background-color: ${(props) => getRadioInputStateColor(props, "enabled")};
 `;
-var Label8 = styled60.span`
+var Label8 = styled61.span`
   margin-left: ${(props) => props.theme.radioInputLabelMargin};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.radioInputLabelFontSize};
@@ -11178,7 +11448,7 @@ var Label8 = styled60.span`
   line-height: ${(props) => props.theme.radioInputLabelLineHeight};
   ${(props) => props.disabled ? `color: ${props.theme.disabledRadioInputLabelFontColor};` : `color: ${props.theme.radioInputLabelFontColor}`}
 `;
-var RadioContainer = styled60.span`
+var RadioContainer = styled61.span`
   display: inline-flex;
   align-items: center;
   cursor: ${(props) => props.disabled ? "not-allowed" : props.readOnly ? "default" : "pointer"};
@@ -11203,7 +11473,7 @@ var RadioContainer = styled60.span`
 var Radio_default = memo11(DxcRadio);
 
 // src/radio-group/RadioGroup.tsx
-import { jsx as jsx68, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs48 } from "react/jsx-runtime";
 var getInitialFocusIndex = (innerOptions, value) => {
   const initialSelectedOptionIndex = innerOptions.findIndex((option) => option.value === value);
   return initialSelectedOptionIndex !== -1 ? initialSelectedOptionIndex : 0;
@@ -11227,14 +11497,14 @@ var DxcRadioGroup = forwardRef13(
     tabIndex = 0,
     ariaLabel = "Radio group"
   }, ref) => {
-    const radioGroupId = `radio-group-${useId16()}`;
+    const radioGroupId = `radio-group-${useId17()}`;
     const radioGroupLabelId = `label-${radioGroupId}`;
     const errorId = `error-${radioGroupId}`;
-    const [innerValue, setInnerValue] = useState28(defaultValue);
-    const [firstTimeFocus, setFirstTimeFocus] = useState28(true);
-    const colorsTheme = useContext43(HalstackContext);
-    const translatedLabels = useContext43(HalstackLanguageContext);
-    const innerOptions = useMemo15(
+    const [innerValue, setInnerValue] = useState29(defaultValue);
+    const [firstTimeFocus, setFirstTimeFocus] = useState29(true);
+    const colorsTheme = useContext44(HalstackContext);
+    const translatedLabels = useContext44(HalstackLanguageContext);
+    const innerOptions = useMemo16(
       () => optional ? [
         ...options,
         {
@@ -11245,7 +11515,7 @@ var DxcRadioGroup = forwardRef13(
       ] : options,
       [optional, options, optionalItemLabel, translatedLabels]
     );
-    const [currentFocusIndex, setCurrentFocusIndex] = useState28(getInitialFocusIndex(innerOptions, value ?? innerValue));
+    const [currentFocusIndex, setCurrentFocusIndex] = useState29(getInitialFocusIndex(innerOptions, value ?? innerValue));
     const handleOnChange = useCallback10(
       (newValue) => {
         const currentValue = value ?? innerValue;
@@ -11329,13 +11599,13 @@ var DxcRadioGroup = forwardRef13(
           break;
       }
     };
-    return /* @__PURE__ */ jsx68(ThemeProvider30, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsxs47(RadioGroupContainer, { ref, children: [
-      label && /* @__PURE__ */ jsxs47(Label9, { id: radioGroupLabelId, helperText, disabled, children: [
+    return /* @__PURE__ */ jsx69(ThemeProvider31, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsxs48(RadioGroupContainer, { ref, children: [
+      label && /* @__PURE__ */ jsxs48(Label9, { id: radioGroupLabelId, helperText, disabled, children: [
         label,
-        optional && /* @__PURE__ */ jsx68(OptionalLabel4, { children: ` ${translatedLabels.formFields.optionalLabel}` })
+        optional && /* @__PURE__ */ jsx69(OptionalLabel4, { children: ` ${translatedLabels.formFields.optionalLabel}` })
       ] }),
-      helperText && /* @__PURE__ */ jsx68(HelperText6, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs47(
+      helperText && /* @__PURE__ */ jsx69(HelperText6, { disabled, children: helperText }),
+      /* @__PURE__ */ jsxs48(
         RadioGroup,
         {
           onBlur: handleOnBlur,
@@ -11352,8 +11622,8 @@ var DxcRadioGroup = forwardRef13(
           "aria-orientation": stacking === "column" ? "vertical" : "horizontal",
           "aria-label": label ? void 0 : ariaLabel,
           children: [
-            /* @__PURE__ */ jsx68(ValueInput3, { name, disabled, value: value ?? innerValue ?? "", readOnly: true }),
-            innerOptions.map((option, index) => /* @__PURE__ */ jsx68(
+            /* @__PURE__ */ jsx69(ValueInput3, { name, disabled, value: value ?? innerValue ?? "", readOnly: true }),
+            innerOptions.map((option, index) => /* @__PURE__ */ jsx69(
               Radio_default,
               {
                 label: option.label ?? "",
@@ -11373,16 +11643,16 @@ var DxcRadioGroup = forwardRef13(
           ]
         }
       ),
-      !disabled && typeof error === "string" && /* @__PURE__ */ jsx68(ErrorMessageContainer2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
+      !disabled && typeof error === "string" && /* @__PURE__ */ jsx69(ErrorMessageContainer2, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
     ] }) });
   }
 );
-var RadioGroupContainer = styled61.div`
+var RadioGroupContainer = styled62.div`
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
 `;
-var Label9 = styled61.span`
+var Label9 = styled62.span`
   color: ${(props) => props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.labelFontSize};
@@ -11391,10 +11661,10 @@ var Label9 = styled61.span`
   line-height: ${(props) => props.theme.labelLineHeight};
   ${(props) => !props.helperText && `margin-bottom: ${props.theme.groupLabelMargin}`}
 `;
-var OptionalLabel4 = styled61.span`
+var OptionalLabel4 = styled62.span`
   font-weight: ${(props) => props.theme.optionalLabelFontWeight};
 `;
-var HelperText6 = styled61.span`
+var HelperText6 = styled62.span`
   color: ${(props) => props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};
@@ -11403,17 +11673,17 @@ var HelperText6 = styled61.span`
   line-height: ${(props) => props.theme.helperTextLineHeight};
   margin-bottom: ${(props) => props.theme.groupLabelMargin};
 `;
-var RadioGroup = styled61.div`
+var RadioGroup = styled62.div`
   display: flex;
   flex-wrap: wrap;
   flex-direction: ${(props) => props.stacking};
   row-gap: ${(props) => props.theme.groupVerticalGutter};
   column-gap: ${(props) => props.theme.groupHorizontalGutter};
 `;
-var ValueInput3 = styled61.input`
+var ValueInput3 = styled62.input`
   display: none;
 `;
-var ErrorMessageContainer2 = styled61.span`
+var ErrorMessageContainer2 = styled62.span`
   min-height: 1.5em;
   color: ${(props) => props.theme.errorMessageColor};
   font-family: ${(props) => props.theme.fontFamily};
@@ -11425,29 +11695,20 @@ var ErrorMessageContainer2 = styled61.span`
 var RadioGroup_default = DxcRadioGroup;
 
 // src/resultset-table/ResultsetTable.tsx
-import { useContext as useContext44, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef18, useState as useState29 } from "react";
-import styled62, { ThemeProvider as ThemeProvider31 } from "styled-components";
+import { useContext as useContext45, useEffect as useEffect22, useMemo as useMemo17, useRef as useRef18, useState as useState30 } from "react";
+import styled63, { ThemeProvider as ThemeProvider32 } from "styled-components";
 
 // src/resultset-table/Icons.tsx
-import { jsx as jsx69, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var icons = {
-  arrowUp: /* @__PURE__ */ jsxs48("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx69("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx69("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })
-  ] }),
-  arrowDown: /* @__PURE__ */ jsxs48("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx69("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    /* @__PURE__ */ jsx69("path", { d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" })
-  ] }),
-  bothArrows: /* @__PURE__ */ jsxs48("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx69("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ jsx69("path", { d: "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" })
-  ] })
+  arrowUp: /* @__PURE__ */ jsx70(Icon_default, { icon: "arrow_upward" }),
+  arrowDown: /* @__PURE__ */ jsx70(Icon_default, { icon: "arrow_downward" }),
+  bothArrows: /* @__PURE__ */ jsx70(Icon_default, { icon: "unfold_more" })
 };
 var Icons_default2 = icons;
 
 // src/resultset-table/ResultsetTable.tsx
-import { jsx as jsx70, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs49 } from "react/jsx-runtime";
 var normalizeSortValue = (sortValue) => typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
 var isDateType = (value) => value instanceof Date;
 var sortArray = (index, order, resultset) => resultset.slice().sort((element1, element2) => {
@@ -11490,22 +11751,22 @@ var DxcResultsetTable = ({
   tabIndex = 0,
   mode = "default"
 }) => {
-  const colorsTheme = useContext44(HalstackContext);
-  const [page, changePage] = useState29(1);
-  const [sortColumnIndex, changeSortColumnIndex] = useState29(-1);
-  const [sortOrder, changeSortOrder] = useState29("ascending");
+  const colorsTheme = useContext45(HalstackContext);
+  const [page, changePage] = useState30(1);
+  const [sortColumnIndex, changeSortColumnIndex] = useState30(-1);
+  const [sortOrder, changeSortOrder] = useState30("ascending");
   const prevRowCountRef = useRef18(rows.length);
-  const rowsWithIds = useMemo16(() => assignIdsToRows(rows), [rows]);
-  const minItemsPerPageIndex = useMemo16(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
-  const maxItemsPerPageIndex = useMemo16(
+  const rowsWithIds = useMemo17(() => assignIdsToRows(rows), [rows]);
+  const minItemsPerPageIndex = useMemo17(() => getMinItemsPerPageIndex2(page, itemsPerPage, page), [itemsPerPage, page]);
+  const maxItemsPerPageIndex = useMemo17(
     () => getMaxItemsPerPageIndex2(minItemsPerPageIndex, itemsPerPage, rows, page),
     [itemsPerPage, minItemsPerPageIndex, page, rows]
   );
-  const sortedResultset = useMemo16(
+  const sortedResultset = useMemo17(
     () => sortColumnIndex !== -1 ? sortArray(sortColumnIndex, sortOrder, rowsWithIds) : rowsWithIds,
     [sortColumnIndex, sortOrder, rowsWithIds]
   );
-  const filteredResultset = useMemo16(
+  const filteredResultset = useMemo17(
     () => sortedResultset && sortedResultset.slice(minItemsPerPageIndex, maxItemsPerPageIndex + 1),
     [sortedResultset, minItemsPerPageIndex, maxItemsPerPageIndex]
   );
@@ -11535,9 +11796,9 @@ var DxcResultsetTable = ({
       prevRowCountRef.current = rows.length;
     }
   }, [rows.length]);
-  return /* @__PURE__ */ jsx70(ThemeProvider31, { theme: colorsTheme.table, children: /* @__PURE__ */ jsxs49(DxcResultsetTableContainer, { margin, children: [
+  return /* @__PURE__ */ jsx71(ThemeProvider32, { theme: colorsTheme.table, children: /* @__PURE__ */ jsxs49(DxcResultsetTableContainer, { margin, children: [
     /* @__PURE__ */ jsxs49(Table_default, { mode, children: [
-      /* @__PURE__ */ jsx70("thead", { children: /* @__PURE__ */ jsx70("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx70(
+      /* @__PURE__ */ jsx71("thead", { children: /* @__PURE__ */ jsx71("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx71(
         "th",
         {
           "aria-sort": column.isSortable ? sortColumnIndex === index ? sortOrder : "none" : void 0,
@@ -11555,17 +11816,17 @@ var DxcResultsetTable = ({
               mode,
               "aria-label": column.isSortable ? "Sort column" : void 0,
               children: [
-                /* @__PURE__ */ jsx70("span", { children: column.displayValue }),
-                column.isSortable && /* @__PURE__ */ jsx70(SortIcon, { children: sortColumnIndex === index ? sortOrder === "ascending" ? Icons_default2.arrowUp : Icons_default2.arrowDown : Icons_default2.bothArrows })
+                column.displayValue,
+                column.isSortable && /* @__PURE__ */ jsx71(SortIcon, { children: sortColumnIndex === index ? sortOrder === "ascending" ? Icons_default2.arrowUp : Icons_default2.arrowDown : Icons_default2.bothArrows })
               ]
             }
           )
         },
         `tableHeader_${index}`
       )) }) }),
-      /* @__PURE__ */ jsx70("tbody", { children: filteredResultset.map((row) => /* @__PURE__ */ jsx70("tr", { children: row.cells.map((cellContent, cellIndex) => /* @__PURE__ */ jsx70("td", { children: cellContent.displayValue }, `resultSetTableCellContent_${cellIndex}`)) }, `resultSetTableCell_${row.id}`)) })
+      /* @__PURE__ */ jsx71("tbody", { children: filteredResultset.map((row) => /* @__PURE__ */ jsx71("tr", { children: row.cells.map((cellContent, cellIndex) => /* @__PURE__ */ jsx71("td", { children: cellContent.displayValue }, `resultSetTableCellContent_${cellIndex}`)) }, `resultSetTableCell_${row.id}`)) })
     ] }),
-    !hidePaginator && /* @__PURE__ */ jsx70(
+    !hidePaginator && (itemsPerPageOptions?.some((itemsPerPage2) => rows.length > itemsPerPage2) || rows.length > itemsPerPage) && /* @__PURE__ */ jsx71(
       Paginator_default,
       {
         totalItems: rows.length,
@@ -11581,7 +11842,7 @@ var DxcResultsetTable = ({
   ] }) });
 };
 var calculateWidth10 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
-var DxcResultsetTableContainer = styled62.div`
+var DxcResultsetTableContainer = styled63.div`
   width: ${(props) => calculateWidth10(props.margin)};
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
   margin-top: ${(props) => props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -11589,12 +11850,12 @@ var DxcResultsetTableContainer = styled62.div`
   margin-bottom: ${(props) => props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
 `;
-var HeaderContainer3 = styled62.span`
+var HeaderContainer3 = styled63.span`
   display: flex;
   align-items: center;
   justify-content: ${(props) => props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start"};
   gap: ${coreTokens_default.spacing_8};
-  width: fit-content;
+  width: auto;
   border: 1px solid transparent;
   border-radius: 2px;
   cursor: ${(props) => props.isSortable ? "pointer" : "default"};
@@ -11603,7 +11864,7 @@ var HeaderContainer3 = styled62.span`
       outline: #0095ff solid 2px;
     }`}
 `;
-var SortIcon = styled62.span`
+var SortIcon = styled63.span`
   display: flex;
   height: 14px;
   width: 14px;
@@ -11618,9 +11879,9 @@ DxcResultsetTable.ActionsCell = DxcActionsCell;
 var ResultsetTable_default = DxcResultsetTable;
 
 // src/slider/Slider.tsx
-import { forwardRef as forwardRef14, useContext as useContext45, useId as useId17, useMemo as useMemo17, useState as useState30 } from "react";
-import styled63, { ThemeProvider as ThemeProvider32 } from "styled-components";
-import { jsx as jsx71, jsxs as jsxs50 } from "react/jsx-runtime";
+import { forwardRef as forwardRef14, useContext as useContext46, useId as useId18, useMemo as useMemo18, useState as useState31 } from "react";
+import styled64, { ThemeProvider as ThemeProvider33 } from "styled-components";
+import { jsx as jsx72, jsxs as jsxs50 } from "react/jsx-runtime";
 var sizes6 = {
   medium: "360px",
   large: "480px",
@@ -11633,7 +11894,7 @@ var getChromeStyles = () => `
 var getFirefoxStyles = () => `
   width: calc(100% - 16px);
   margin-right: 3px;`;
-var Container3 = styled63.div`
+var Container3 = styled64.div`
   display: flex;
   flex-direction: column;
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -11643,7 +11904,7 @@ var Container3 = styled63.div`
   margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
   width: ${(props) => calculateWidth11(props.margin, props.size)};
 `;
-var Label10 = styled63.label`
+var Label10 = styled64.label`
   color: ${(props) => props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.labelFontSize};
@@ -11651,7 +11912,7 @@ var Label10 = styled63.label`
   font-weight: ${(props) => props.theme.labelFontWeight};
   line-height: ${(props) => props.theme.labelLineHeight};
 `;
-var HelperText7 = styled63.span`
+var HelperText7 = styled64.span`
   color: ${(props) => props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};
@@ -11659,7 +11920,7 @@ var HelperText7 = styled63.span`
   font-weight: ${(props) => props.theme.helperTextFontWeight};
   line-height: ${(props) => props.theme.helperTextLineHeight};
 `;
-var SliderInput = styled63.input`
+var SliderInput = styled64.input`
   width: 100%;
   min-width: 240px;
   height: ${(props) => props.theme.trackLineThickness};
@@ -11737,12 +11998,12 @@ var SliderInput = styled63.input`
     }
   }
 `;
-var SliderContainer = styled63.div`
+var SliderContainer = styled64.div`
   display: flex;
   height: 48px;
   align-items: center;
 `;
-var LimitLabelContainer = styled63.span`
+var LimitLabelContainer = styled64.span`
   color: ${(props) => props.disabled ? props.theme.disabledLimitValuesFontColor : props.theme.limitValuesFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.limitValuesFontSize};
@@ -11751,13 +12012,13 @@ var LimitLabelContainer = styled63.span`
   letter-spacing: ${(props) => props.theme.limitValuesFontLetterSpacing};
   white-space: nowrap;
 `;
-var MinLabelContainer = styled63(LimitLabelContainer)`
+var MinLabelContainer = styled64(LimitLabelContainer)`
   margin-right: ${(props) => props.theme.floorLabelMarginRight};
 `;
-var MaxLabelContainer = styled63(LimitLabelContainer)`
+var MaxLabelContainer = styled64(LimitLabelContainer)`
   margin-left: ${(props) => props.step === 1 ? props.theme.ceilLabelMarginLeft : "1.25rem"};
 `;
-var SliderInputContainer = styled63.div`
+var SliderInputContainer = styled64.div`
   position: relative;
   width: 100%;
   height: 24px;
@@ -11768,7 +12029,7 @@ var SliderInputContainer = styled63.div`
   padding-top: 1px;
   z-index: 0;
 `;
-var MarksContainer = styled63.div`
+var MarksContainer = styled64.div`
   ${(props) => props.isFirefox ? getFirefoxStyles() : getChromeStyles()}
   position: absolute;
   pointer-events: none;
@@ -11776,7 +12037,7 @@ var MarksContainer = styled63.div`
   display: flex;
   align-items: center;
 `;
-var TickMark = styled63.span`
+var TickMark = styled64.span`
   position: absolute;
   background: ${(props) => props.disabled ? props.theme.disabledTickBackgroundColor : props.theme.tickBackgroundColor};
   height: ${(props) => props.theme.tickHeight};
@@ -11785,7 +12046,7 @@ var TickMark = styled63.span`
   left: ${(props) => `calc(${props.stepPosition} * 100%)`};
   z-index: ${(props) => props.stepValue != null && `${props.stepPosition <= props.stepValue ? "-1" : "0"}`};
 `;
-var TextInputContainer2 = styled63.div`
+var TextInputContainer2 = styled64.div`
   margin-left: ${(props) => props.theme.inputMarginLeft};
   max-width: 70px;
 `;
@@ -11810,27 +12071,27 @@ var DxcSlider = forwardRef14(
     size = "fillParent",
     ariaLabel = "Slider"
   }, ref) => {
-    const labelId = `label-${useId17()}`;
-    const [innerValue, setInnerValue] = useState30(defaultValue ?? 0);
-    const [dragging, setDragging] = useState30(false);
-    const colorsTheme = useContext45(HalstackContext);
+    const labelId = `label-${useId18()}`;
+    const [innerValue, setInnerValue] = useState31(defaultValue ?? 0);
+    const [dragging, setDragging] = useState31(false);
+    const colorsTheme = useContext46(HalstackContext);
     const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
-    const minLabel = useMemo17(
+    const minLabel = useMemo18(
       () => labelFormatCallback ? labelFormatCallback(minValue) : minValue,
       [labelFormatCallback, minValue]
     );
-    const maxLabel = useMemo17(
+    const maxLabel = useMemo18(
       () => labelFormatCallback ? labelFormatCallback(maxValue) : maxValue,
       [labelFormatCallback, maxValue]
     );
-    const tickMarks = useMemo17(() => {
+    const tickMarks = useMemo18(() => {
       const numberOfMarks = Math.floor(maxValue / step - minValue / step);
       const range = maxValue - minValue;
       const ticks = [];
       if (marks) {
         for (let index = 0; index <= numberOfMarks; index++) {
           ticks.push(
-            /* @__PURE__ */ jsx71(
+            /* @__PURE__ */ jsx72(
               TickMark,
               {
                 disabled,
@@ -11869,13 +12130,13 @@ var DxcSlider = forwardRef14(
         onChange?.(intValue > maxValue ? maxValue : intValue);
       }
     };
-    return /* @__PURE__ */ jsx71(ThemeProvider32, { theme: colorsTheme.slider, children: /* @__PURE__ */ jsxs50(Container3, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsx71(Label10, { id: labelId, disabled, children: label }),
-      /* @__PURE__ */ jsx71(HelperText7, { disabled, children: helperText }),
+    return /* @__PURE__ */ jsx72(ThemeProvider33, { theme: colorsTheme.slider, children: /* @__PURE__ */ jsxs50(Container3, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsx72(Label10, { id: labelId, disabled, children: label }),
+      /* @__PURE__ */ jsx72(HelperText7, { disabled, children: helperText }),
       /* @__PURE__ */ jsxs50(SliderContainer, { children: [
-        showLimitsValues && /* @__PURE__ */ jsx71(MinLabelContainer, { disabled, children: minLabel }),
+        showLimitsValues && /* @__PURE__ */ jsx72(MinLabelContainer, { disabled, children: minLabel }),
         /* @__PURE__ */ jsxs50(SliderInputContainer, { children: [
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx72(
             SliderInput,
             {
               role: "slider",
@@ -11896,10 +12157,10 @@ var DxcSlider = forwardRef14(
               onMouseDown: handleSliderDragging
             }
           ),
-          marks && /* @__PURE__ */ jsx71(MarksContainer, { isFirefox, children: tickMarks })
+          marks && /* @__PURE__ */ jsx72(MarksContainer, { isFirefox, children: tickMarks })
         ] }),
-        showLimitsValues && /* @__PURE__ */ jsx71(MaxLabelContainer, { disabled, step, children: maxLabel }),
-        showInput && /* @__PURE__ */ jsx71(TextInputContainer2, { children: /* @__PURE__ */ jsx71(
+        showLimitsValues && /* @__PURE__ */ jsx72(MaxLabelContainer, { disabled, step, children: maxLabel }),
+        showInput && /* @__PURE__ */ jsx72(TextInputContainer2, { children: /* @__PURE__ */ jsx72(
           TextInput_default,
           {
             name,
@@ -11915,217 +12176,11 @@ var DxcSlider = forwardRef14(
 );
 var Slider_default = DxcSlider;
 
-// src/spinner/Spinner.tsx
-import { useContext as useContext46, useId as useId18, useMemo as useMemo18 } from "react";
-import styled64, { ThemeProvider as ThemeProvider33 } from "styled-components";
-import { jsx as jsx72, jsxs as jsxs51 } from "react/jsx-runtime";
-var DxcSpinner = ({
-  label,
-  value,
-  showValue = false,
-  mode = "large",
-  margin,
-  ariaLabel = "Spinner"
-}) => {
-  const labelId = useId18();
-  const colorsTheme = useContext46(HalstackContext);
-  const determinated = useMemo18(() => value != null && value >= 0 && value <= 100, [value]);
-  return /* @__PURE__ */ jsx72(ThemeProvider33, { theme: colorsTheme.spinner, children: /* @__PURE__ */ jsx72(DXCSpinner, { margin, mode, children: /* @__PURE__ */ jsxs51(SpinnerContainer, { mode, children: [
-    mode === "overlay" && /* @__PURE__ */ jsx72(BackOverlay, {}),
-    /* @__PURE__ */ jsx72(BackgroundSpinner, { children: mode === "small" ? /* @__PURE__ */ jsx72(SVGBackground, { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx72(CircleBackground, { cx: "8", cy: "8", r: "6", mode }) }) : /* @__PURE__ */ jsx72(SVGBackground, { viewBox: "0 0 140 140", children: /* @__PURE__ */ jsx72(CircleBackground, { cx: "70", cy: "70", r: "65", mode }) }) }),
-    /* @__PURE__ */ jsx72(
-      Spinner,
-      {
-        role: "progressbar",
-        "aria-valuenow": determinated && showValue ? value : void 0,
-        "aria-valuemin": determinated ? 0 : void 0,
-        "aria-valuemax": determinated ? 100 : void 0,
-        "aria-labelledby": label && mode !== "small" ? labelId : void 0,
-        "aria-label": !label ? ariaLabel : mode === "small" ? ariaLabel : void 0,
-        children: mode === "small" ? /* @__PURE__ */ jsx72(SVGSpinner, { viewBox: "0 0 16 16", determinated, children: /* @__PURE__ */ jsx72(CircleSpinner, { cx: "8", cy: "8", r: "6", mode, determinated, value }) }) : /* @__PURE__ */ jsx72(SVGSpinner, { viewBox: "0 0 140 140", determinated, children: /* @__PURE__ */ jsx72(CircleSpinner, { cx: "70", cy: "70", r: "65", mode, determinated, value }) })
-      }
-    ),
-    mode !== "small" && /* @__PURE__ */ jsxs51(LabelsContainer3, { children: [
-      label && /* @__PURE__ */ jsx72(SpinnerLabel, { id: labelId, mode, children: label }),
-      (value || value === 0) && showValue && /* @__PURE__ */ jsxs51(SpinnerProgress, { value, mode, showValue, children: [
-        value,
-        "%"
-      ] })
-    ] })
-  ] }) }) });
-};
-var determinateValue = (value, strokeDashArray) => {
-  let val = 0;
-  if (value != null && value >= 0 && value <= 100) {
-    val = strokeDashArray * (1 - value / 100);
-  }
-  return val;
-};
-var DXCSpinner = styled64.div`
-  height: ${(props) => props.mode === "overlay" ? "100vh" : ""};
-  width: ${(props) => props.mode === "overlay" ? "100vw" : ""};
-  display: ${(props) => props.mode === "overlay" ? "flex" : ""};
-  position: ${(props) => props.mode === "overlay" ? "fixed" : ""};
-  top: ${(props) => props.mode === "overlay" ? 0 : ""};
-  left: ${(props) => props.mode === "overlay" ? 0 : ""};
-  justify-content: ${(props) => props.mode === "overlay" ? "center" : ""};
-  align-items: ${(props) => props.mode === "overlay" ? "center" : ""};
-  z-index: ${(props) => props.mode === "overlay" ? 1300 : ""};
-
-  margin: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px" : ""};
-  margin-top: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : "" : ""};
-  margin-right: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : "" : ""};
-  margin-bottom: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : "" : ""};
-  margin-left: ${(props) => props.mode !== "overlay" ? props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : "" : ""};
-`;
-var SpinnerContainer = styled64.div`
-  align-items: center;
-  display: flex;
-  height: ${(props) => props.mode === "small" ? "16px" : "140px"};
-  width: ${(props) => props.mode === "small" ? "16px" : "140px"};
-  justify-content: center;
-  position: relative;
-  background-color: transparent;
-
-  @keyframes spinner-svg {
-    0% {
-      transform: rotateZ(0deg);
-    }
-    100% {
-      transform: rotateZ(360deg);
-    }
-  }
-  @keyframes svg-circle-large {
-    0% {
-      stroke-dashoffset: 400;
-      transform: rotate(0);
-    }
-
-    50% {
-      stroke-dashoffset: 75;
-      transform: rotate(45deg);
-    }
-
-    100% {
-      stroke-dashoffset: 400;
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes svg-circle-small {
-    0% {
-      stroke-dashoffset: 35;
-      transform: rotate(0);
-    }
-
-    50% {
-      stroke-dashoffset: 8;
-      transform: rotate(45deg);
-    }
-
-    100% {
-      stroke-dashoffset: 35;
-      transform: rotate(360deg);
-    }
-  }
-`;
-var BackOverlay = styled64.div`
-  width: 100vw;
-  height: 100vh;
-  opacity: 1;
-  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: ${(props) => `${props.theme.overlayBackgroundColor}`};
-  opacity: ${(props) => `${props.theme.overlayOpacity}`};
-`;
-var BackgroundSpinner = styled64.div`
-  height: inherit;
-  width: inherit;
-  position: absolute;
-`;
-var SVGBackground = styled64.svg`
-  height: inherit;
-  width: inherit;
-`;
-var CircleBackground = styled64.circle`
-  animation: none;
-  fill: transparent;
-  stroke: ${(props) => `${props.theme.totalCircleColor}`};
-  stroke-dasharray: ${(props) => props.mode !== "small" ? "409" : "38"};
-  stroke-linecap: initial;
-  stroke-width: ${(props) => props.mode !== "small" ? "8.5px" : "2px"};
-  transform-origin: 50% 50%;
-  vector-effect: non-scaling-stroke;
-`;
-var Spinner = styled64.div`
-  height: inherit;
-  width: inherit;
-  position: relative;
-`;
-var SVGSpinner = styled64.svg`
-  height: inherit;
-  width: inherit;
-  transform: rotate(-90deg);
-  top: 0;
-  left: 0;
-  transform-origin: center;
-  overflow: visible;
-  animation: ${(props) => !props.determinated ? "1.4s linear infinite both spinner-svg" : ""};
-`;
-var CircleSpinner = styled64.circle`
-  fill: transparent;
-  stroke-linecap: initial;
-  vector-effect: non-scaling-stroke;
-  animation: ${(props) => props.determinated ? "none" : props.mode !== "small" ? "1.4s ease-in-out infinite both svg-circle-large" : "1.4s ease-in-out infinite both svg-circle-small"};
-  stroke: ${(props) => props.mode === "overlay" ? props.theme.trackCircleColorOverlay : props.theme.trackCircleColor};
-  transform-origin: ${(props) => !props.determinated ? "50% 50%" : ""};
-  stroke-dasharray: ${(props) => props.mode !== "small" ? "409" : "38"};
-  stroke-width: ${(props) => props.mode !== "small" ? "8.5px" : "2px"};
-  stroke-dashoffset: ${(props) => props.determinated ? props.mode !== "small" ? determinateValue(props.value, 409) : determinateValue(props.value, 38) : ""};
-`;
-var LabelsContainer3 = styled64.div`
-  position: absolute;
-  margin: 0 auto;
-  width: 110px;
-  text-align: center;
-`;
-var SpinnerLabel = styled64.p`
-  margin: 0;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontFamily : props.theme.labelFontFamily};
-  font-weight: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontWeight : props.theme.labelFontWeight};
-  font-size: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontSize : props.theme.labelFontSize};
-  font-style: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontStyle : props.theme.labelFontStyle};
-  color: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.theme.labelFontColor};
-  text-align: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelTextAlign : props.theme.labelTextAlign};
-  letter-spacing: ${(props) => props.mode === "overlay" ? props.theme.overlayLabelLetterSpacing : props.theme.labelLetterSpacing};
-`;
-var SpinnerProgress = styled64.p`
-  margin: 0;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: ${(props) => props.value && props.showValue === true && "block" || "none"};
-  font-family: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily};
-  font-weight: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontWeight : props.theme.progressValueFontWeight};
-  font-size: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontSize : props.theme.progressValueFontSize};
-  font-style: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontStyle : props.theme.progressValueFontStyle};
-  color: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.theme.progressValueFontColor};
-  text-align: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueTextAlign : props.theme.progressValueTextAlign};
-  letter-spacing: ${(props) => props.mode === "overlay" ? props.theme.overlayProgressValueLetterSpacing : props.theme.progressValueLetterSpacing};
-`;
-var Spinner_default = DxcSpinner;
-
 // src/status-light/StatusLight.tsx
 import styled65 from "styled-components";
-import { jsx as jsx73, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs51 } from "react/jsx-runtime";
 var DxcStatusLight = ({ mode = "default", label, size = "medium" }) => {
-  return /* @__PURE__ */ jsxs52(StatusLightContainer, { size, "aria-label": `${mode}: ${label}`, role: "status", children: [
+  return /* @__PURE__ */ jsxs51(StatusLightContainer, { size, "aria-label": `${mode}: ${label}`, role: "status", children: [
     /* @__PURE__ */ jsx73(StatusDot, { mode, size, "aria-hidden": "true" }),
     /* @__PURE__ */ jsx73(StatusLabel, { mode, size, children: label })
   ] });
@@ -12155,9 +12210,9 @@ var StatusLabel = styled65.span`
 var StatusLight_default = DxcStatusLight;
 
 // src/switch/Switch.tsx
-import { forwardRef as forwardRef15, useContext as useContext47, useId as useId19, useRef as useRef19, useState as useState31 } from "react";
+import { forwardRef as forwardRef15, useContext as useContext47, useId as useId19, useRef as useRef19, useState as useState32 } from "react";
 import styled66, { ThemeProvider as ThemeProvider34 } from "styled-components";
-import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx74, jsxs as jsxs52 } from "react/jsx-runtime";
 var DxcSwitch = forwardRef15(
   ({
     defaultChecked = false,
@@ -12176,7 +12231,7 @@ var DxcSwitch = forwardRef15(
   }, ref) => {
     const switchId = `switch-${useId19()}`;
     const labelId = `label-${switchId}`;
-    const [innerChecked, setInnerChecked] = useState31(defaultChecked);
+    const [innerChecked, setInnerChecked] = useState32(defaultChecked);
     const colorsTheme = useContext47(HalstackContext);
     const translatedLabels = useContext47(HalstackLanguageContext);
     const refTrack = useRef19(null);
@@ -12199,7 +12254,7 @@ var DxcSwitch = forwardRef15(
       }
       onChange?.(checked ? !checked : !innerChecked);
     };
-    return /* @__PURE__ */ jsx74(ThemeProvider34, { theme: colorsTheme.switch, children: /* @__PURE__ */ jsxs53(
+    return /* @__PURE__ */ jsx74(ThemeProvider34, { theme: colorsTheme.switch, children: /* @__PURE__ */ jsxs52(
       SwitchContainer,
       {
         margin,
@@ -12209,10 +12264,10 @@ var DxcSwitch = forwardRef15(
         onClick: !disabled ? handlerSwitchChange : void 0,
         ref,
         children: [
-          labelPosition === "before" && label && /* @__PURE__ */ jsxs53(LabelContainer4, { id: labelId, labelPosition, disabled, label, children: [
+          labelPosition === "before" && label && /* @__PURE__ */ jsxs52(LabelContainer4, { id: labelId, labelPosition, disabled, label, children: [
             label,
             " ",
-            optional && /* @__PURE__ */ jsx74(Fragment13, { children: translatedLabels.formFields.optionalLabel })
+            optional && /* @__PURE__ */ jsx74(Fragment14, { children: translatedLabels.formFields.optionalLabel })
           ] }),
           /* @__PURE__ */ jsx74(
             ValueInput4,
@@ -12239,8 +12294,8 @@ var DxcSwitch = forwardRef15(
               ref: refTrack
             }
           ) }),
-          labelPosition === "after" && label && /* @__PURE__ */ jsxs53(LabelContainer4, { id: labelId, labelPosition, disabled, label, children: [
-            optional && /* @__PURE__ */ jsx74(Fragment13, { children: translatedLabels.formFields.optionalLabel }),
+          labelPosition === "after" && label && /* @__PURE__ */ jsxs52(LabelContainer4, { id: labelId, labelPosition, disabled, label, children: [
+            optional && /* @__PURE__ */ jsx74(Fragment14, { children: translatedLabels.formFields.optionalLabel }),
             " ",
             label
           ] })
@@ -12405,7 +12460,7 @@ import {
   useEffect as useEffect25,
   useMemo as useMemo20,
   useRef as useRef22,
-  useState as useState33
+  useState as useState34
 } from "react";
 import styled70, { ThemeProvider as ThemeProvider36 } from "styled-components";
 
@@ -12416,7 +12471,7 @@ var TabsContext_default = createContext9(null);
 // src/tabs/Tab.tsx
 import { forwardRef as forwardRef16, useContext as useContext48, useEffect as useEffect23, useRef as useRef20 } from "react";
 import styled67 from "styled-components";
-import { jsx as jsx75, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
 var DxcTab2 = forwardRef16(
   ({
     icon,
@@ -12470,7 +12525,7 @@ var DxcTab2 = forwardRef16(
           break;
       }
     };
-    return /* @__PURE__ */ jsx75(Tooltip, { label: title, children: /* @__PURE__ */ jsxs54(
+    return /* @__PURE__ */ jsx75(Tooltip, { label: title, children: /* @__PURE__ */ jsxs53(
       TabContainer2,
       {
         role: "tab",
@@ -12502,7 +12557,7 @@ var DxcTab2 = forwardRef16(
         onMouseEnter: () => onHover(),
         onKeyDown: handleOnKeyDown,
         children: [
-          /* @__PURE__ */ jsxs54(
+          /* @__PURE__ */ jsxs53(
             MainLabelContainer,
             {
               notificationNumber,
@@ -12630,15 +12685,15 @@ var TabIconContainer2 = styled67.div`
 var Tab_default2 = DxcTab2;
 
 // src/tabs/TabsLegacy.tsx
-import { useCallback as useCallback11, useContext as useContext49, useEffect as useEffect24, useMemo as useMemo19, useRef as useRef21, useState as useState32 } from "react";
+import { useCallback as useCallback11, useContext as useContext49, useEffect as useEffect24, useMemo as useMemo19, useRef as useRef21, useState as useState33 } from "react";
 import styled69, { ThemeProvider as ThemeProvider35 } from "styled-components";
 
 // src/tabs/TabLegacy.tsx
 import { forwardRef as forwardRef17, memo as memo12 } from "react";
 import styled68 from "styled-components";
-import { jsx as jsx76, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 var Tab2 = forwardRef17(
-  ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ jsxs55(
+  ({ active, tab, tabIndex, hasLabelAndIcon, iconPosition, onClick, onMouseEnter, onMouseLeave }, ref) => /* @__PURE__ */ jsxs54(
     TabContainer3,
     {
       role: "tab",
@@ -12659,7 +12714,7 @@ var Tab2 = forwardRef17(
         onMouseLeave();
       },
       children: [
-        /* @__PURE__ */ jsxs55(
+        /* @__PURE__ */ jsxs54(
           MainLabelContainer2,
           {
             notificationNumber: tab.notificationNumber,
@@ -12784,9 +12839,9 @@ var TabIconContainer3 = styled68.div`
 var TabLegacy_default = memo12(Tab2);
 
 // src/tabs/TabsLegacy.tsx
-import { jsx as jsx77, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs55 } from "react/jsx-runtime";
 var useResize = (refTabList) => {
-  const [viewWidth, setViewWidth] = useState32(0);
+  const [viewWidth, setViewWidth] = useState33(0);
   const handleWindowSizeChange = useCallback11(() => {
     setViewWidth(refTabList.current?.offsetWidth ?? 0);
   }, [refTabList]);
@@ -12812,19 +12867,19 @@ var DxcTabs = ({
   const colorsTheme = useContext49(HalstackContext);
   const hasLabelAndIcon = tabs != null && tabs.filter((tab) => tab.label && tab.icon).length > 0;
   const firstFocus = tabs != null ? tabs.findIndex((tab) => !tab.isDisabled) : null;
-  const [innerActiveTabIndex, setInnerActiveTabIndex] = useState32(
+  const [innerActiveTabIndex, setInnerActiveTabIndex] = useState33(
     tabs != null && defaultActiveTabIndex && !tabs[defaultActiveTabIndex]?.isDisabled ? defaultActiveTabIndex : firstFocus
   );
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState32(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState32(0);
-  const [translateScroll, setTranslateScroll] = useState32(0);
-  const [scrollRightEnabled, setScrollRightEnabled] = useState32(true);
-  const [scrollLeftEnabled, setScrollLeftEnabled] = useState32(false);
-  const [countClick, setCountClick] = useState32(0);
-  const [totalTabsWidth, setTotalTabsWidth] = useState32(0);
-  const [currentFocusIndex, setCurrentFocusIndex] = useState32(activeTabIndex ?? innerActiveTabIndex);
-  const [temporalFocusIndex, setTemporalFocusIndex] = useState32(activeTabIndex ?? innerActiveTabIndex);
-  const [minHeightTabs, setMinHeightTabs] = useState32(0);
+  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState33(0);
+  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState33(0);
+  const [translateScroll, setTranslateScroll] = useState33(0);
+  const [scrollRightEnabled, setScrollRightEnabled] = useState33(true);
+  const [scrollLeftEnabled, setScrollLeftEnabled] = useState33(false);
+  const [countClick, setCountClick] = useState33(0);
+  const [totalTabsWidth, setTotalTabsWidth] = useState33(0);
+  const [currentFocusIndex, setCurrentFocusIndex] = useState33(activeTabIndex ?? innerActiveTabIndex);
+  const [temporalFocusIndex, setTemporalFocusIndex] = useState33(activeTabIndex ?? innerActiveTabIndex);
+  const [minHeightTabs, setMinHeightTabs] = useState33(0);
   const refTabs = useRef21([]);
   const refTabList = useRef21(null);
   const viewWidth = useResize(refTabList);
@@ -12981,9 +13036,9 @@ 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__ */ jsx77(ThemeProvider35, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs56(TabsContainer, { margin, children: [
+  return /* @__PURE__ */ jsx77(ThemeProvider35, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs55(TabsContainer, { margin, children: [
     /* @__PURE__ */ jsx77(Underline2, {}),
-    /* @__PURE__ */ jsxs56(Tabs, { hasLabelAndIcon, iconPosition, children: [
+    /* @__PURE__ */ jsxs55(Tabs, { hasLabelAndIcon, iconPosition, children: [
       /* @__PURE__ */ jsx77(
         ScrollIndicator,
         {
@@ -12996,7 +13051,7 @@ var DxcTabs = ({
           children: /* @__PURE__ */ jsx77(Icon_default, { icon: "keyboard_arrow_left" })
         }
       ),
-      /* @__PURE__ */ jsx77(TabsContent, { children: /* @__PURE__ */ jsxs56(TabsContentScroll, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
+      /* @__PURE__ */ jsx77(TabsContent, { children: /* @__PURE__ */ jsxs55(TabsContentScroll, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
         /* @__PURE__ */ jsx77(TabList, { role: "tablist", onKeyDown: handleOnKeyDown, minHeightTabs, children: tabs?.map((tab, i) => /* @__PURE__ */ jsx77(
           TabLegacy_default,
           {
@@ -13150,9 +13205,9 @@ var TabsContentScroll = styled69.div`
 var TabsLegacy_default = DxcTabs;
 
 // src/tabs/Tabs.tsx
-import { Fragment as Fragment14, jsx as jsx78, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 var useResize2 = (refTabList) => {
-  const [viewWidth, setViewWidth] = useState33(0);
+  const [viewWidth, setViewWidth] = useState34(0);
   const handleWindowSizeChange = useCallback12(() => {
     setViewWidth(refTabList?.current?.offsetWidth ?? 0);
   }, [refTabList]);
@@ -13198,7 +13253,7 @@ var DxcTabs2 = ({
     () => childrenArray.some((child) => isValidElement2(child) && child.props.icon && child.props.label),
     [childrenArray]
   );
-  const [activeTab, setActiveTab] = useState33(() => {
+  const [activeTab, setActiveTab] = useState34(() => {
     const hasActiveChild = childrenArray.some(
       (child) => isValidElement2(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     );
@@ -13207,16 +13262,17 @@ var DxcTabs2 = ({
     ) : childrenArray.find((child) => isValidElement2(child) && !child.props.disabled);
     return isValidElement2(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
-  const [innerFocusIndex, setInnerFocusIndex] = useState33(null);
-  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState33(0);
-  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState33(0);
-  const [countClick, setCountClick] = useState33(0);
-  const [totalTabsWidth, setTotalTabsWidth] = useState33(0);
-  const [translateScroll, setTranslateScroll] = useState33(0);
-  const [scrollRightEnabled, setScrollRightEnabled] = useState33(true);
-  const [scrollLeftEnabled, setScrollLeftEnabled] = useState33(false);
-  const [minHeightTabs, setMinHeightTabs] = useState33(0);
+  const [innerFocusIndex, setInnerFocusIndex] = useState34(null);
+  const [activeIndicatorWidth, setActiveIndicatorWidth] = useState34(0);
+  const [activeIndicatorLeft, setActiveIndicatorLeft] = useState34(0);
+  const [countClick, setCountClick] = useState34(0);
+  const [totalTabsWidth, setTotalTabsWidth] = useState34(0);
+  const [translateScroll, setTranslateScroll] = useState34(0);
+  const [scrollRightEnabled, setScrollRightEnabled] = useState34(true);
+  const [scrollLeftEnabled, setScrollLeftEnabled] = useState34(false);
+  const [minHeightTabs, setMinHeightTabs] = useState34(0);
   const refTabList = useRef22(null);
+  const refTabListContainer = useRef22(null);
   const colorsTheme = useContext50(HalstackContext);
   const viewWidth = useResize2(refTabList);
   const translatedLabels = useContext50(HalstackLanguageContext);
@@ -13241,51 +13297,46 @@ var DxcTabs2 = ({
       setActiveIndicatorLeft
     };
   }, [iconPosition, tabIndex, innerFocusIndex, activeTab, childrenArray, hasLabelAndIcon]);
+  const scrollLimitCheck = () => {
+    const container = refTabListContainer.current;
+    if (container) {
+      const currentScroll = container.scrollLeft;
+      const scrollingLength = container.scrollWidth - container.offsetWidth;
+      const startingScroll = currentScroll <= 1;
+      const endScroll = currentScroll >= scrollingLength - 1;
+      setScrollLeftEnabled(!startingScroll);
+      setScrollRightEnabled(!endScroll);
+    }
+  };
   const scrollLeft = () => {
-    const scrollWidth = (refTabList?.current?.offsetHeight ?? 0) * 0.75;
-    let moveX = 0;
-    if (countClick <= scrollWidth) {
-      moveX = 0;
-      setScrollLeftEnabled(false);
-      setScrollRightEnabled(true);
-    } else {
-      moveX = countClick - scrollWidth;
-      setScrollRightEnabled(true);
-      setScrollLeftEnabled(true);
+    if (refTabListContainer.current) {
+      refTabListContainer.current.scrollLeft -= 100;
+      scrollLimitCheck();
     }
-    setTranslateScroll(-moveX);
-    setCountClick(moveX);
   };
   const scrollRight = () => {
-    const offsetHeight = refTabList?.current?.offsetHeight ?? 0;
-    const scrollWidth = offsetHeight * 0.75;
-    let moveX = 0;
-    if (countClick + scrollWidth + offsetHeight >= totalTabsWidth) {
-      moveX = totalTabsWidth - offsetHeight;
-      setScrollRightEnabled(false);
-      setScrollLeftEnabled(true);
-    } else {
-      moveX = countClick + scrollWidth;
-      setScrollLeftEnabled(true);
-      setScrollRightEnabled(true);
+    if (refTabListContainer.current) {
+      refTabListContainer.current.scrollLeft += 100;
+      scrollLimitCheck();
     }
-    setTranslateScroll(-moveX);
-    setCountClick(moveX);
   };
   const handleOnKeyDown = (event) => {
     const active = childrenArray.findIndex(
       (child) => child.props.label ?? child.props.tabId === activeTab
     );
+    let index;
     switch (event.key) {
       case "Left":
       case "ArrowLeft":
         event.preventDefault();
-        setInnerFocusIndex(getPreviousTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex));
+        index = getPreviousTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex);
+        setInnerFocusIndex(index);
         break;
       case "Right":
       case "ArrowRight":
         event.preventDefault();
-        setInnerFocusIndex(getNextTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex));
+        index = getNextTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex);
+        setInnerFocusIndex(index);
         break;
       case "Tab":
         if (active !== innerFocusIndex) {
@@ -13295,11 +13346,28 @@ var DxcTabs2 = ({
       default:
         break;
     }
+    setTimeout(() => {
+      scrollLimitCheck();
+    }, 0);
   };
-  return children ? /* @__PURE__ */ jsxs57(Fragment14, { children: [
-    /* @__PURE__ */ jsx78(ThemeProvider36, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs57(TabsContainer2, { margin, children: [
+  useEffect25(() => {
+    if (refTabList.current)
+      setTotalTabsWidth(() => {
+        let total = 0;
+        refTabList.current?.querySelectorAll('[role="tab"]').forEach((tab, index) => {
+          if (tab.ariaSelected === "true" && viewWidth && viewWidth < totalTabsWidth) {
+            setInnerFocusIndex(index);
+          }
+          total += tab.offsetWidth;
+        });
+        return total;
+      });
+    scrollLimitCheck();
+  }, [viewWidth, totalTabsWidth]);
+  return children ? /* @__PURE__ */ jsxs56(Fragment15, { children: [
+    /* @__PURE__ */ jsx78(ThemeProvider36, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs56(TabsContainer2, { margin, children: [
       /* @__PURE__ */ jsx78(Underline3, {}),
-      /* @__PURE__ */ jsxs57(Tabs2, { hasLabelAndIcon, iconPosition, children: [
+      /* @__PURE__ */ jsxs56(Tabs2, { hasLabelAndIcon, iconPosition, children: [
         /* @__PURE__ */ jsx78(
           ScrollIndicator2,
           {
@@ -13312,7 +13380,7 @@ var DxcTabs2 = ({
             children: /* @__PURE__ */ jsx78(Icon_default, { icon: "keyboard_arrow_left" })
           }
         ),
-        /* @__PURE__ */ jsx78(TabsContent2, { children: /* @__PURE__ */ jsxs57(TabsContentScroll2, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
+        /* @__PURE__ */ jsx78(TabsContent2, { ref: refTabListContainer, children: /* @__PURE__ */ jsxs56(TabsContentScroll2, { translateScroll, ref: refTabList, enabled: enabledIndicator, children: [
           /* @__PURE__ */ jsx78(TabList2, { role: "tablist", onKeyDown: handleOnKeyDown, minHeightTabs, children: /* @__PURE__ */ jsx78(TabsContext_default.Provider, { value: contextValue, children }) }),
           /* @__PURE__ */ jsx78(
             ActiveIndicator2,
@@ -13464,10 +13532,10 @@ DxcTabs2.Tab = Tab_default2;
 var Tabs_default = DxcTabs2;
 
 // src/tag/Tag.tsx
-import { useContext as useContext51, useState as useState34 } from "react";
+import { useContext as useContext51, useState as useState35 } from "react";
 import styled71, { ThemeProvider as ThemeProvider37 } from "styled-components";
-import { Fragment as Fragment15, jsx as jsx79, jsxs as jsxs58 } from "react/jsx-runtime";
-var TagWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx79(Fragment15, { children: condition ? wrapper(children) : children });
+import { Fragment as Fragment16, jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+var TagWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx79(Fragment16, { children: condition ? wrapper(children) : children });
 var DxcTag = ({
   icon,
   label = "",
@@ -13481,7 +13549,7 @@ var DxcTag = ({
   tabIndex = 0
 }) => {
   const colorsTheme = useContext51(HalstackContext);
-  const [isHovered, changeIsHovered] = useState34(false);
+  const [isHovered, changeIsHovered] = useState35(false);
   return /* @__PURE__ */ jsx79(ThemeProvider37, { theme: colorsTheme.tag, children: /* @__PURE__ */ jsx79(
     StyledDxcTag,
     {
@@ -13498,8 +13566,8 @@ var DxcTag = ({
         TagWrapper,
         {
           condition: !!onClick || !!linkHref,
-          wrapper: (children) => onClick ? /* @__PURE__ */ jsx79(StyledButton, { tabIndex, children }) : linkHref ? /* @__PURE__ */ jsx79(StyledLink2, { tabIndex, href: linkHref, target: newWindow ? "_blank" : "_self", children }) : /* @__PURE__ */ jsx79(Fragment15, {}),
-          children: /* @__PURE__ */ jsxs58(TagContent, { children: [
+          wrapper: (children) => onClick ? /* @__PURE__ */ jsx79(StyledButton, { tabIndex, children }) : linkHref ? /* @__PURE__ */ jsx79(StyledLink2, { tabIndex, href: linkHref, target: newWindow ? "_blank" : "_self", children }) : /* @__PURE__ */ jsx79(Fragment16, {}),
+          children: /* @__PURE__ */ jsxs57(TagContent, { children: [
             labelPosition === "before" && size !== "small" && label && /* @__PURE__ */ jsx79(TagLabel, { children: label }),
             icon && /* @__PURE__ */ jsx79(IconContainer6, { iconBgColor, children: typeof icon === "string" ? /* @__PURE__ */ jsx79(Icon_default, { icon }) : icon }),
             labelPosition === "after" && size !== "small" && label && /* @__PURE__ */ jsx79(TagLabel, { children: label })
@@ -13592,9 +13660,9 @@ var TagLabel = styled71.div`
 var Tag_default = DxcTag;
 
 // src/textarea/Textarea.tsx
-import { forwardRef as forwardRef18, useContext as useContext52, useEffect as useEffect26, useId as useId20, useRef as useRef23, useState as useState35 } from "react";
+import { forwardRef as forwardRef18, useContext as useContext52, useEffect as useEffect26, useId as useId20, useRef as useRef23, useState as useState36 } from "react";
 import styled72, { ThemeProvider as ThemeProvider38 } from "styled-components";
-import { jsx as jsx80, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
 var patternMatch = (pattern, value) => new RegExp(pattern).test(value);
 var DxcTextarea = forwardRef18(
   ({
@@ -13621,7 +13689,7 @@ var DxcTextarea = forwardRef18(
     tabIndex = 0,
     ariaLabel = "Text area"
   }, ref) => {
-    const [innerValue, setInnerValue] = useState35(defaultValue);
+    const [innerValue, setInnerValue] = useState36(defaultValue);
     const textareaId = `textarea-${useId20()}`;
     const colorsTheme = useContext52(HalstackContext);
     const translatedLabels = useContext52(HalstackLanguageContext);
@@ -13687,8 +13755,8 @@ var DxcTextarea = forwardRef18(
         prevValueRef.current = value ?? innerValue;
       }
     }, [verticalGrow, value, innerValue, rows]);
-    return /* @__PURE__ */ jsx80(ThemeProvider38, { theme: colorsTheme.textarea, children: /* @__PURE__ */ jsxs59(TextareaContainer, { margin, size, ref, children: [
-      label && /* @__PURE__ */ jsxs59(Label12, { htmlFor: textareaId, disabled, helperText, children: [
+    return /* @__PURE__ */ jsx80(ThemeProvider38, { theme: colorsTheme.textarea, children: /* @__PURE__ */ jsxs58(TextareaContainer, { margin, size, ref, children: [
+      label && /* @__PURE__ */ jsxs58(Label12, { htmlFor: textareaId, disabled, helperText, children: [
         label,
         " ",
         optional && /* @__PURE__ */ jsx80(OptionalLabel5, { children: translatedLabels.formFields.optionalLabel })
@@ -13820,12 +13888,12 @@ var ErrorMessageContainer3 = styled72.span`
 var Textarea_default = DxcTextarea;
 
 // src/toast/ToastsQueue.tsx
-import { useCallback as useCallback14, useEffect as useEffect28, useMemo as useMemo21, useState as useState37 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect28, useMemo as useMemo21, useState as useState38 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import styled74 from "styled-components";
 
 // src/toast/Toast.tsx
-import { memo as memo13, useContext as useContext53, useState as useState36 } from "react";
+import { memo as memo13, useContext as useContext53, useState as useState37 } from "react";
 import styled73, { keyframes } from "styled-components";
 
 // src/utils/useTimeout.tsx
@@ -13850,7 +13918,7 @@ function useTimeout(callback, delay) {
 }
 
 // src/toast/Toast.tsx
-import { jsx as jsx81, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
 var fadeInUp = keyframes`
   0% {
     transform: translateY(100%);
@@ -13964,7 +14032,7 @@ var DxcToast = ({
   onClear,
   semantic
 }) => {
-  const [isClosing, setIsClosing] = useState36(false);
+  const [isClosing, setIsClosing] = useState37(false);
   const translatedLabels = useContext53(HalstackLanguageContext);
   const clearClosingAnimationTimer = useTimeout(
     () => {
@@ -13978,12 +14046,12 @@ var DxcToast = ({
     },
     loading ? void 0 : duration
   );
-  return /* @__PURE__ */ jsxs60(Toast, { semantic, isClosing, role: "status", children: [
-    /* @__PURE__ */ jsxs60(ContentContainer2, { loading, semantic, children: [
+  return /* @__PURE__ */ jsxs59(Toast, { semantic, isClosing, role: "status", children: [
+    /* @__PURE__ */ jsxs59(ContentContainer2, { loading, semantic, children: [
       /* @__PURE__ */ jsx81(ToastIcon, { hideSemanticIcon, icon, loading, semantic }),
       /* @__PURE__ */ jsx81(Message2, { children: message })
     ] }),
-    /* @__PURE__ */ jsxs60(Flex_default, { alignItems: "center", gap: "0.25rem", children: [
+    /* @__PURE__ */ jsxs59(Flex_default, { alignItems: "center", gap: "0.25rem", children: [
       action && /* @__PURE__ */ jsx81(
         Button_default,
         {
@@ -14022,13 +14090,13 @@ import { createContext as createContext10 } from "react";
 var ToastContext_default = createContext10(null);
 
 // src/toast/ToastsQueue.tsx
-import { jsx as jsx82, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs60 } from "react/jsx-runtime";
 var ToastsQueue = styled74.section`
   box-sizing: border-box;
   position: fixed;
   bottom: 0;
   right: 0;
-  z-index: 2147483647;
+  z-index: 500;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -14050,8 +14118,8 @@ var generateUniqueToastId = (toasts) => {
   return id;
 };
 var DxcToastsQueue = ({ children, duration = 3e3 }) => {
-  const [toasts, setToasts] = useState37([]);
-  const [isMounted, setIsMounted] = useState37(false);
+  const [toasts, setToasts] = useState38([]);
+  const [isMounted, setIsMounted] = useState38(false);
   const adjustedDuration = useMemo21(() => duration > 5e3 ? 5e3 : duration < 3e3 ? 3e3 : duration, [duration]);
   const remove = useCallback14((id) => {
     setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
@@ -14067,7 +14135,7 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
   useEffect28(() => {
     setIsMounted(true);
   }, []);
-  return /* @__PURE__ */ jsxs61(ToastContext_default.Provider, { value: add, children: [
+  return /* @__PURE__ */ jsxs60(ToastContext_default.Provider, { value: add, children: [
     isMounted && createPortal3(
       /* @__PURE__ */ jsx82(ToastsQueue, { children: toasts.map((t) => /* @__PURE__ */ jsx82(
         Toast_default,
@@ -14088,9 +14156,9 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
 var ToastsQueue_default = DxcToastsQueue;
 
 // src/toggle-group/ToggleGroup.tsx
-import { useContext as useContext54, useId as useId21, useState as useState38 } from "react";
+import { useContext as useContext54, useId as useId21, useState as useState39 } from "react";
 import styled75, { ThemeProvider as ThemeProvider39 } from "styled-components";
-import { jsx as jsx83, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
 var DxcToggleGroup = ({
   label,
   helperText,
@@ -14104,7 +14172,7 @@ var DxcToggleGroup = ({
   tabIndex = 0
 }) => {
   const toggleGroupLabelId = `label-toggle-group-${useId21()}`;
-  const [selectedValue, setSelectedValue] = useState38(defaultValue ?? (multiple ? [] : -1));
+  const [selectedValue, setSelectedValue] = useState39(defaultValue ?? (multiple ? [] : -1));
   const colorsTheme = useContext54(HalstackContext);
   const handleToggleChange = (selectedOption) => {
     let newSelectedOptions = [];
@@ -14143,7 +14211,7 @@ var DxcToggleGroup = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx83(ThemeProvider39, { theme: colorsTheme.toggleGroup, children: /* @__PURE__ */ jsxs62(ToggleGroup, { margin, children: [
+  return /* @__PURE__ */ jsx83(ThemeProvider39, { theme: colorsTheme.toggleGroup, children: /* @__PURE__ */ jsxs61(ToggleGroup, { margin, children: [
     /* @__PURE__ */ jsx83(Label13, { id: toggleGroupLabelId, disabled, children: label }),
     /* @__PURE__ */ jsx83(HelperText9, { disabled, children: helperText }),
     /* @__PURE__ */ jsx83(OptionsContainer, { "aria-labelledby": toggleGroupLabelId, children: options.map((option, i) => /* @__PURE__ */ jsx83(Tooltip, { label: option.title, children: /* @__PURE__ */ jsx83(
@@ -14162,7 +14230,7 @@ var DxcToggleGroup = ({
         hasIcon: option.icon,
         optionLabel: option.label ?? "",
         selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
-        children: /* @__PURE__ */ jsxs62(Flex_default, { alignItems: "center", children: [
+        children: /* @__PURE__ */ jsxs61(Flex_default, { alignItems: "center", children: [
           option.icon && /* @__PURE__ */ jsx83(IconContainer7, { optionLabel: option.label ?? "", children: typeof option.icon === "string" ? /* @__PURE__ */ jsx83(Icon_default, { icon: option.icon }) : option.icon }),
           option.label && /* @__PURE__ */ jsx83(LabelContainer6, { children: option.label })
         ] })
@@ -14257,13 +14325,13 @@ var IconContainer7 = styled75.div`
 var ToggleGroup_default = DxcToggleGroup;
 
 // src/wizard/Wizard.tsx
-import { useContext as useContext55, useMemo as useMemo22, useState as useState39 } from "react";
+import { useContext as useContext55, useMemo as useMemo22, useState as useState40 } from "react";
 import styled76, { ThemeProvider as ThemeProvider40 } from "styled-components";
 
 // src/wizard/Icons.tsx
-import { jsx as jsx84, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 var icons2 = {
-  valid: /* @__PURE__ */ jsxs63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
+  valid: /* @__PURE__ */ jsxs62("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
     /* @__PURE__ */ jsx84("path", { "data-name": "Path 2946", d: "M0,0H18V18H0Z", fill: "none" }),
     /* @__PURE__ */ jsx84(
       "path",
@@ -14285,7 +14353,7 @@ var icons2 = {
       }
     )
   ] }),
-  invalid: /* @__PURE__ */ jsxs63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
+  invalid: /* @__PURE__ */ jsxs62("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
     /* @__PURE__ */ jsx84("path", { "data-name": "Path 2943", d: "M0,0H18V18H0Z", fill: "none" }),
     /* @__PURE__ */ jsx84(
       "path",
@@ -14310,7 +14378,7 @@ var icons2 = {
 var Icons_default3 = icons2;
 
 // src/wizard/Wizard.tsx
-import { jsx as jsx85, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs63 } from "react/jsx-runtime";
 var StepsContainer = styled76.div`
   display: flex;
   flex-direction: ${(props) => props.mode === "vertical" ? "column" : "row"};
@@ -14432,14 +14500,14 @@ var DxcWizard = ({
   tabIndex = 0
 }) => {
   const colorsTheme = useContext55(HalstackContext);
-  const [innerCurrent, setInnerCurrentStep] = useState39(defaultCurrentStep);
+  const [innerCurrent, setInnerCurrentStep] = useState40(defaultCurrentStep);
   const renderedCurrent = useMemo22(() => currentStep ?? innerCurrent, [currentStep, innerCurrent]);
   const handleStepClick = (newValue) => {
     setInnerCurrentStep(newValue);
     onStepClick?.(newValue);
   };
-  return /* @__PURE__ */ jsx85(ThemeProvider40, { theme: colorsTheme.wizard, children: /* @__PURE__ */ jsx85(StepsContainer, { mode, margin, role: "group", children: steps.map((step, i) => /* @__PURE__ */ jsxs64(StepContainer, { mode, lastStep: i === steps.length - 1, children: [
-    /* @__PURE__ */ jsxs64(
+  return /* @__PURE__ */ jsx85(ThemeProvider40, { theme: colorsTheme.wizard, children: /* @__PURE__ */ jsx85(StepsContainer, { mode, margin, role: "group", children: steps.map((step, i) => /* @__PURE__ */ jsxs63(StepContainer, { mode, lastStep: i === steps.length - 1, children: [
+    /* @__PURE__ */ jsxs63(
       Step,
       {
         onClick: () => {
@@ -14452,11 +14520,11 @@ var DxcWizard = ({
         "aria-current": renderedCurrent === i ? "step" : "false",
         tabIndex,
         children: [
-          /* @__PURE__ */ jsxs64(StepHeader, { validityIcon: step.valid != null, children: [
+          /* @__PURE__ */ jsxs63(StepHeader, { validityIcon: step.valid != null, children: [
             /* @__PURE__ */ jsx85(IconContainer8, { current: i === renderedCurrent, visited: i < renderedCurrent, disabled: step.disabled, children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ jsx85(Icon_default, { icon: step.icon }) : step.icon : /* @__PURE__ */ jsx85(Number3, { children: i + 1 }) }),
             step.valid != null && /* @__PURE__ */ jsx85(ValidityIconContainer, { children: step.valid ? Icons_default3.valid : Icons_default3.invalid })
           ] }),
-          (step.label || step.description) && /* @__PURE__ */ jsxs64("div", { children: [
+          (step.label || step.description) && /* @__PURE__ */ jsxs63("div", { children: [
             step.label && /* @__PURE__ */ jsx85(Label14, { current: i === renderedCurrent, disabled: step.disabled, visited: i <= innerCurrent, children: step.label }),
             step.description && /* @__PURE__ */ jsx85(Description, { current: i === renderedCurrent, disabled: step.disabled, visited: i <= innerCurrent, children: step.description })
           ] })