npm - @dxc-technology/halstack-react - Versions diffs - 15.1.3 → 15.2.1 - Mend

@dxc-technology/halstack-react 15.1.3 → 15.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.mjs CHANGED Viewed

@@ -6043,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: {
@@ -6073,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",
@@ -6086,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();
@@ -6137,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;
@@ -6145,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))),
@@ -6294,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));
+      }
     }
   });
 };
@@ -6326,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) => {
@@ -6347,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,
@@ -6381,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,
@@ -6397,7 +6653,7 @@ var ListOption = ({
       selected: isSelected,
       role: "option",
       "aria-selected": !multiple ? isSelected : void 0,
-      children: /* @__PURE__ */ jsxs25(
+      children: /* @__PURE__ */ jsxs26(
         StyledOption,
         {
           visualFocused,
@@ -6406,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" }) })
             ] })
           ]
         }
@@ -6418,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};`}
@@ -6432,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;
@@ -6441,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;
@@ -6452,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;
@@ -6460,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};
@@ -6563,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,
@@ -6577,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}`,
@@ -6605,7 +6861,7 @@ var Listbox = ({
       ] }) }, groupId);
     } else {
       globalIndex++;
-      return /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx41(
         ListOption_default,
         {
           id: `${id}-option-${globalIndex}`,
@@ -6637,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,
@@ -6653,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}`,
@@ -6675,7 +6931,7 @@ var Listbox = ({
     }
   );
 };
-var ListboxContainer = styled33.ul`
+var ListboxContainer = styled34.ul`
   box-sizing: border-box;
   max-height: 304px;
   overflow-y: auto;
@@ -6693,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;
@@ -6710,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;
@@ -6718,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,
@@ -6740,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]
     );
@@ -6946,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,
@@ -6959,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,
@@ -6989,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,
@@ -7001,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" },
@@ -7017,7 +7273,7 @@ var DxcSelect = forwardRef5(
                     "aria-hidden": "true"
                   }
                 ),
-                searchable && /* @__PURE__ */ jsx41(
+                searchable && /* @__PURE__ */ jsx42(
                   SearchInput,
                   {
                     value: searchValue,
@@ -7030,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) => {
@@ -7049,14 +7305,14 @@ 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,
@@ -7067,7 +7323,7 @@ var DxcSelect = forwardRef5(
             onCloseAutoFocus: (event) => {
               event.preventDefault();
             },
-            children: /* @__PURE__ */ jsx41(
+            children: /* @__PURE__ */ jsx42(
               Listbox_default,
               {
                 id: listboxId,
@@ -7086,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 })
     ] }) });
   }
 );
@@ -7097,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;
@@ -7110,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};
@@ -7119,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};
@@ -7130,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;
@@ -7158,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;
@@ -7167,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};
@@ -7179,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;
@@ -7204,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;
@@ -7224,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;
@@ -7242,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;
@@ -7253,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;
@@ -7268,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;
@@ -7294,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,
@@ -7309,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) => ({
@@ -7330,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",
@@ -7344,7 +7600,7 @@ var DxcPaginator = ({
         title: translatedLabels.paginator.firstResultsTitle
       }
     ),
-    onPageChange && /* @__PURE__ */ jsx42(
+    onPageChange && /* @__PURE__ */ jsx43(
       Button_default,
       {
         mode: "secondary",
@@ -7357,12 +7613,12 @@ var DxcPaginator = ({
         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) => ({
@@ -7377,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",
@@ -7391,7 +7647,7 @@ var DxcPaginator = ({
         title: "Next results"
       }
     ),
-    onPageChange && /* @__PURE__ */ jsx42(
+    onPageChange && /* @__PURE__ */ jsx43(
       Button_default,
       {
         mode: "secondary",
@@ -7406,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};
@@ -7424,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;
@@ -7459,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 = {
@@ -7520,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;
@@ -7535,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,
@@ -7550,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 ?? [],
@@ -7564,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] : ""};
@@ -7590,7 +7846,7 @@ var DxcTableContainer = styled36.div`
     border-radius: 6px;
   }
 `;
-var DxcTableContent = styled36.table`
+var DxcTableContent = styled37.table`
   border-collapse: collapse;
   width: 100%;
@@ -7641,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;
@@ -7650,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;
@@ -7669,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 {
@@ -7798,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);
@@ -7818,7 +8074,7 @@ var DxcDataGrid = ({
     }
     setSortColumns(newSortColumns);
   };
-  const columnsToRender = useMemo10(() => {
+  const columnsToRender = useMemo11(() => {
     let expectedColumns = columns.map((column) => convertToRDGColumns(column, summaryRow));
     if (expandable) {
       expectedColumns = [
@@ -7835,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] });
           }
         };
       }
@@ -7865,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])
@@ -7930,7 +8188,7 @@ var DxcDataGrid = ({
       onGridRowsChange(newRows);
     }
   };
-  const sortedRows = useMemo10(() => {
+  const sortedRows = useMemo11(() => {
     const sortFunctions = getCustomSortFn(columns);
     if (!onSort) {
       if (sortColumns.length > 0 && uniqueRowId) {
@@ -7959,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,
@@ -7990,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,
@@ -8009,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");
@@ -8072,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);
@@ -8170,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}`,
@@ -8191,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;
@@ -8203,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;
@@ -8265,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++) {
@@ -8277,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" });
@@ -8296,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(),
@@ -8315,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;
@@ -8326,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;
@@ -8369,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);
@@ -8387,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,
@@ -8431,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);
@@ -8447,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;
@@ -8455,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;
@@ -8485,7 +8743,7 @@ var HeaderButton = styled40.button`
     font-size: 24px;
   }
 `;
-var HeaderYearTrigger = styled40(HeaderButton)`
+var HeaderYearTrigger = styled41(HeaderButton)`
   gap: 8px;
   height: 40px;
   width: 172px;
@@ -8494,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;
@@ -8507,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 = {
@@ -8569,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;
@@ -8585,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;
@@ -8602,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,
@@ -8616,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 })
     }
@@ -8626,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;
@@ -8645,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;
@@ -8661,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;
@@ -8679,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];
@@ -8688,7 +8946,7 @@ var Suggestions = ({
       inline: "start"
     });
   }, [visualFocusIndex]);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     SuggestionsContainer,
     {
       id,
@@ -8701,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}`,
@@ -8714,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
         ] }) })
       ]
@@ -8726,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;
@@ -8740,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};
@@ -8748,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};
@@ -8759,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;
@@ -8785,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;
@@ -8802,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};
@@ -8819,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};
@@ -8831,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;
@@ -8841,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;
@@ -8849,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 = "",
@@ -8878,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 = () => {
@@ -9138,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,
@@ -9161,7 +9421,7 @@ var DxcTextInput = forwardRef6(
                 children
               }
             ),
-            /* @__PURE__ */ jsx50(Popover3.Portal, { children: /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx51(Popover3.Portal, { children: /* @__PURE__ */ jsx51(
               Popover3.Content,
               {
                 sideOffset: 5,
@@ -9172,7 +9432,7 @@ var DxcTextInput = forwardRef6(
                 onCloseAutoFocus: (event) => {
                   event.preventDefault();
                 },
-                children: /* @__PURE__ */ jsx50(
+                children: /* @__PURE__ */ jsx51(
                   Suggestions_default,
                   {
                     id: autosuggestId,
@@ -9192,7 +9452,7 @@ var DxcTextInput = forwardRef6(
               }
             ) })
           ] }),
-          children: /* @__PURE__ */ jsxs35(
+          children: /* @__PURE__ */ jsxs36(
             InputContainer,
             {
               error: !!error,
@@ -9202,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,
@@ -9240,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,
@@ -9250,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,
@@ -9262,7 +9523,7 @@ var DxcTextInput = forwardRef6(
                         disabled
                       }
                     ),
-                    /* @__PURE__ */ jsx50(
+                    /* @__PURE__ */ jsx51(
                       ActionIcon_default,
                       {
                         onClick: !readOnly ? handleIncrementActionOnClick : void 0,
@@ -9274,7 +9535,7 @@ var DxcTextInput = forwardRef6(
                       }
                     )
                   ] }),
-                  action && /* @__PURE__ */ jsx50(
+                  action && /* @__PURE__ */ jsx51(
                     ActionIcon_default,
                     {
                       onClick: !readOnly ? action.onClick : void 0,
@@ -9286,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);
@@ -9343,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) => {
@@ -9470,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,
@@ -9480,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,
@@ -9512,7 +9773,7 @@ var DxcDateInput = forwardRef7(
             ariaLabel
           }
         ) }),
-        /* @__PURE__ */ jsx51(Popover4.Portal, { children: /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(Popover4.Portal, { children: /* @__PURE__ */ jsx52(
           StyledPopoverContent,
           {
             sideOffset,
@@ -9521,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 })
           }
         ) })
       ] })
@@ -9535,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;
@@ -9548,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};
@@ -9556,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};
@@ -9567,7 +9828,7 @@ var HelperText3 = styled44.span`
   line-height: ${(props) => props.theme.textInput.helperTextLineHeight};
   margin-bottom: 0.25rem;
 `;
-var StyledPopoverContent = styled44(Popover4.Content)`
+var StyledPopoverContent = styled45(Popover4.Content)`
   z-index: 300;
   &:focus-visible {
     outline: none;
@@ -9576,16 +9837,16 @@ 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;
@@ -9594,13 +9855,13 @@ var DialogContainer = styled45.div`
   height: 100%;
   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%;
@@ -9615,7 +9876,7 @@ var Dialog = styled45.div`
     min-width: 92%;
   }
 `;
-var CloseIconActionContainer = styled45.div`
+var CloseIconActionContainer = styled46.div`
   position: absolute;
   top: 24px;
   right: 24px;
@@ -9626,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") {
@@ -9642,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
@@ -9676,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;
@@ -9696,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;
@@ -9719,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};
@@ -9737,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;
@@ -9747,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};
@@ -9764,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),
@@ -9782,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 })
     ] })
   ] });
 };
@@ -9793,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) => {
@@ -9810,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"};
@@ -9821,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;"}
@@ -9874,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;
@@ -9886,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;
@@ -9895,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};
@@ -9921,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;
@@ -10014,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,
@@ -10030,7 +10288,7 @@ var DxcFileInput = forwardRef8(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(
           Button_default,
           {
             mode: "secondary",
@@ -10041,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,
@@ -10055,8 +10313,8 @@ var DxcFileInput = forwardRef8(
           },
           `file-${index}`
         )) })
-      ] }) : /* @__PURE__ */ jsxs39(Container2, { children: [
-        /* @__PURE__ */ jsx54(
+      ] }) : /* @__PURE__ */ jsxs40(Container2, { children: [
+        /* @__PURE__ */ jsx55(
           ValueInput2,
           {
             id: fileInputId,
@@ -10068,7 +10326,7 @@ var DxcFileInput = forwardRef8(
             readOnly: true
           }
         ),
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs40(
           DragDropArea,
           {
             isDragging,
@@ -10079,7 +10337,7 @@ var DxcFileInput = forwardRef8(
             onDragOver: handleDrag,
             onDragLeave: handleDragOut,
             children: [
-              /* @__PURE__ */ jsx54(
+              /* @__PURE__ */ jsx55(
                 Button_default,
                 {
                   mode: "secondary",
@@ -10089,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,
@@ -10108,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(" ")};` : ""}
@@ -10135,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};`};` : ""}
@@ -10143,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};
@@ -10175,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};
@@ -10185,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};
@@ -10195,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};
@@ -10205,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};
@@ -10218,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;
@@ -10229,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};
@@ -10237,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,
@@ -10255,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,
@@ -10277,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,
@@ -10302,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;
@@ -10342,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;
@@ -10359,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 {
@@ -10381,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",
@@ -10395,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 })
         ] })
       }
     ) });
@@ -10406,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(() => {
@@ -10441,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;
@@ -10459,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",
@@ -10483,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"};
@@ -10518,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};
@@ -10533,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};
@@ -10545,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;
@@ -10583,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,
@@ -10618,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;
@@ -10633,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;
@@ -10642,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,
@@ -10672,7 +10940,7 @@ var DxcNumberInput = forwardRef11(
     showControls = true
   }, ref) => {
     const numberInputRef = useRef15(null);
-    const contextValue = useMemo14(
+    const contextValue = useMemo15(
       () => ({
         maxNumber: max,
         minNumber: min,
@@ -10692,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,
@@ -10719,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,
@@ -10736,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};
@@ -10755,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);
 };
@@ -10789,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) {
@@ -10807,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,
@@ -10838,7 +11106,7 @@ var DxcPasswordInput = forwardRef12(
     ) });
   }
 );
-var PasswordInput = styled57.div`
+var PasswordInput = styled58.div`
   ${(props) => props.size === "fillParent" && "width: 100%;"}
   & ::-ms-reveal {
     display: none;
@@ -10847,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;
@@ -10868,7 +11136,7 @@ var Overlay4 = styled58.div`
   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] : ""};
@@ -10880,7 +11148,7 @@ var MainContainer4 = styled58.div`
   gap: 0.5rem;
   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};
@@ -10892,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};
@@ -10901,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};
@@ -10909,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;
@@ -10967,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",
@@ -10991,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, {
@@ -11023,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;
@@ -11038,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};
@@ -11072,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,
@@ -11089,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);
@@ -11104,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,
@@ -11112,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,
@@ -11124,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 })
       ]
     }
   ) }) });
@@ -11142,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;
@@ -11165,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};
@@ -11180,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"};
@@ -11205,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;
@@ -11229,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,
         {
@@ -11247,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;
@@ -11331,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,
@@ -11354,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 ?? "",
@@ -11375,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};
@@ -11393,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};
@@ -11405,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};
@@ -11427,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) => {
@@ -11492,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]
   );
@@ -11537,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,
@@ -11558,16 +11817,16 @@ var DxcResultsetTable = ({
               "aria-label": column.isSortable ? "Sort column" : void 0,
               children: [
                 column.displayValue,
-                column.isSortable && /* @__PURE__ */ jsx70(SortIcon, { children: sortColumnIndex === index ? sortOrder === "ascending" ? Icons_default2.arrowUp : Icons_default2.arrowDown : Icons_default2.bothArrows })
+                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,
@@ -11583,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] : ""};
@@ -11591,7 +11850,7 @@ 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"};
@@ -11605,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;
@@ -11620,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",
@@ -11635,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"};
@@ -11645,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};
@@ -11653,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};
@@ -11661,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};
@@ -11739,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};
@@ -11753,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;
@@ -11770,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;
@@ -11778,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};
@@ -11787,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;
 `;
@@ -11812,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,
@@ -11871,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",
@@ -11898,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,
@@ -11917,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" ? 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 = 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 })
   ] });
@@ -12157,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,
@@ -12178,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);
@@ -12201,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,
@@ -12211,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,
@@ -12241,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
           ] })
@@ -12407,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";
@@ -12418,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,
@@ -12472,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",
@@ -12504,7 +12557,7 @@ var DxcTab2 = forwardRef16(
         onMouseEnter: () => onHover(),
         onKeyDown: handleOnKeyDown,
         children: [
-          /* @__PURE__ */ jsxs54(
+          /* @__PURE__ */ jsxs53(
             MainLabelContainer,
             {
               notificationNumber,
@@ -12632,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",
@@ -12661,7 +12714,7 @@ var Tab2 = forwardRef17(
         onMouseLeave();
       },
       children: [
-        /* @__PURE__ */ jsxs55(
+        /* @__PURE__ */ jsxs54(
           MainLabelContainer2,
           {
             notificationNumber: tab.notificationNumber,
@@ -12786,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]);
@@ -12814,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);
@@ -12983,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,
         {
@@ -12998,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,
           {
@@ -13152,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]);
@@ -13200,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
     );
@@ -13209,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);
@@ -13243,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) {
@@ -13297,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,
           {
@@ -13314,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,
@@ -13466,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 = "",
@@ -13483,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,
     {
@@ -13500,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 })
@@ -13594,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(
   ({
@@ -13623,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);
@@ -13689,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 })
@@ -13822,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
@@ -13852,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%);
@@ -13966,7 +14032,7 @@ var DxcToast = ({
   onClear,
   semantic
 }) => {
-  const [isClosing, setIsClosing] = useState36(false);
+  const [isClosing, setIsClosing] = useState37(false);
   const translatedLabels = useContext53(HalstackLanguageContext);
   const clearClosingAnimationTimer = useTimeout(
     () => {
@@ -13980,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,
         {
@@ -14024,7 +14090,7 @@ 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;
@@ -14052,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));
@@ -14069,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,
@@ -14090,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,
@@ -14106,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 = [];
@@ -14145,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(
@@ -14164,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 })
         ] })
@@ -14259,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",
@@ -14287,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",
@@ -14312,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"};
@@ -14434,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: () => {
@@ -14454,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 })
           ] })