@dxc-technology/halstack-react 0.0.0-d004266 → 0.0.0-d016030

package/dist/index.mjs

@@ -583,15 +583,8 @@ var componentTokens = {
   dialog: {
     overlayColor: coreTokens_default.color_grey_800_a,
     backgroundColor: coreTokens_default.color_white,
-    closeIconSize: "24px",
-    closeIconTopPosition: "20px",
-    closeIconRightPosition: "20px",
     closeIconBackgroundColor: coreTokens_default.color_transparent,
-    closeIconBorderColor: coreTokens_default.border_none,
     closeIconColor: coreTokens_default.color_black,
-    closeIconBorderThickness: coreTokens_default.border_width_0,
-    closeIconBorderStyle: coreTokens_default.border_solid,
-    closeIconBorderRadius: "2px",
     boxShadowOffsetX: "0px",
     boxShadowOffsetY: "1px",
     boxShadowBlur: "3px",
@@ -726,15 +719,15 @@ var componentTokens = {
   },
   header: {
     backgroundColor: coreTokens_default.color_white,
-    hamburguerFocusColor: coreTokens_default.color_blue_600,
-    hamburguerFontFamily: coreTokens_default.type_sans,
-    hamburguerFontStyle: coreTokens_default.type_normal,
-    hamburguerFontColor: coreTokens_default.color_black,
-    hamburguerFontSize: "10px",
-    hamburguerFontWeight: coreTokens_default.type_semibold,
-    hamburguerTextTransform: coreTokens_default.type_uppercase,
-    hamburguerIconColor: coreTokens_default.color_black,
-    hamburguerHoverColor: coreTokens_default.color_grey_200,
+    hamburgerFocusColor: coreTokens_default.color_blue_600,
+    hamburgerFontFamily: coreTokens_default.type_sans,
+    hamburgerFontStyle: coreTokens_default.type_normal,
+    hamburgerFontColor: coreTokens_default.color_black,
+    hamburgerFontSize: "10px",
+    hamburgerFontWeight: coreTokens_default.type_semibold,
+    hamburgerTextTransform: coreTokens_default.type_uppercase,
+    hamburgerIconColor: coreTokens_default.color_black,
+    hamburgerHoverColor: coreTokens_default.color_grey_200,
     logo: "",
     logoResponsive: "",
     logoHeight: "40px",
@@ -1554,7 +1547,7 @@ var defaultTranslatedComponentLabels = {
   },
   header: {
     closeIcon: "Close menu",
-    hamburguerTitle: "Menu"
+    hamburgerTitle: "Menu"
   },
   numberInput: {
     valueGreaterThanOrEqualToErrorMessage: (value) => `Value must be greater than or equal to ${value}.`,
@@ -1732,9 +1725,9 @@ var parseTheme = (theme) => {
   headerTokens.backgroundColor = theme.header?.baseColor ?? headerTokens.backgroundColor;
   headerTokens.underlinedColor = theme.header?.accentColor ?? headerTokens.underlinedColor;
   headerTokens.menuBackgroundColor = theme.header?.menuBaseColor ?? headerTokens.menuBackgroundColor;
-  headerTokens.hamburguerFontColor = theme.header?.fontColor ?? headerTokens.hamburguerFontColor;
-  headerTokens.hamburguerIconColor = theme.header?.hamburguerColor ?? headerTokens.hamburguerIconColor;
-  headerTokens.hamburguerHoverColor = addLightness(90, theme.header?.hamburguerColor) ?? headerTokens.hamburguerHoverColor;
+  headerTokens.hamburgerFontColor = theme.header?.fontColor ?? headerTokens.hamburgerFontColor;
+  headerTokens.hamburgerIconColor = theme.header?.hamburgerColor ?? headerTokens.hamburgerIconColor;
+  headerTokens.hamburgerHoverColor = addLightness(90, theme.header?.hamburgerColor) ?? headerTokens.hamburgerHoverColor;
   headerTokens.logo = theme.header?.logo ?? headerTokens.logo;
   headerTokens.logoResponsive = theme.header?.logoResponsive ?? headerTokens.logoResponsive;
   headerTokens.contentColor = theme.header?.contentColor ?? headerTokens.contentColor;
@@ -1916,7 +1909,6 @@ var DxcIcon = ({ icon }) => /* @__PURE__ */ jsx2(
   IconContainer,
   {
     role: "img",
-    "aria-label": icon,
     filled: icon.startsWith("filled_"),
     icon: icon.startsWith("filled_") ? icon.replace(/filled_/g, "") : icon,
     "aria-hidden": "true"
@@ -1947,53 +1939,6 @@ var Icon_default = DxcIcon;
 
 // src/accordion/Accordion.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var DxcAccordion = ({
-  label = "",
-  defaultIsExpanded,
-  isExpanded,
-  icon,
-  assistiveText = "",
-  disabled = false,
-  onChange,
-  children,
-  margin,
-  tabIndex = 0
-}) => {
-  const id = useId();
-  const [innerIsExpanded, setInnerIsExpanded] = useState(defaultIsExpanded ?? false);
-  const colorsTheme = useContext(HalstackContext);
-  const handleAccordionState = () => {
-    if (isExpanded == null) {
-      setInnerIsExpanded((innerIsCurrentlyExpanded) => !innerIsCurrentlyExpanded);
-    }
-    onChange?.(isExpanded != null ? !isExpanded : !innerIsExpanded);
-  };
-  return /* @__PURE__ */ jsx3(ThemeProvider, { theme: colorsTheme.accordion, children: /* @__PURE__ */ jsxs(AccordionContainer, { isExpanded: isExpanded ?? innerIsExpanded, margin, children: [
-    /* @__PURE__ */ jsx3(AccordionHeader, { children: /* @__PURE__ */ jsxs(
-      AccordionTrigger,
-      {
-        id: `accordion-${id}`,
-        onClick: disabled ? void 0 : handleAccordionState,
-        disabled,
-        tabIndex: disabled ? -1 : tabIndex,
-        "aria-expanded": isExpanded ?? innerIsExpanded,
-        "aria-controls": `accordion-panel-${id}`,
-        isExpanded: isExpanded ?? innerIsExpanded,
-        children: [
-          /* @__PURE__ */ jsxs(AccordionInfo, { children: [
-            /* @__PURE__ */ jsxs(AccordionLabel, { disabled, children: [
-              icon && /* @__PURE__ */ jsx3(IconContainer2, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx3(Icon_default, { icon }) : icon }),
-              label
-            ] }),
-            assistiveText && /* @__PURE__ */ jsx3(AccordionAssistiveText, { disabled, children: assistiveText })
-          ] }),
-          /* @__PURE__ */ jsx3(CollapseIndicator, { disabled, children: /* @__PURE__ */ jsx3(Icon_default, { icon: isExpanded ?? innerIsExpanded ? "expand_less" : "expand_more" }) })
-        ]
-      }
-    ) }),
-    (isExpanded ?? innerIsExpanded) && /* @__PURE__ */ jsx3(AccordionPanel, { id: `accordion-panel-${id}`, role: "region", "aria-labelledby": `accordion-${id}`, children })
-  ] }) });
-};
 var calculateWidth = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
 var AccordionContainer = styled2.div`
   display: flex;
@@ -2092,6 +2037,53 @@ var AccordionPanel = styled2.div`
   border-bottom-left-radius: ${(props) => props.theme.borderRadius};
   border-bottom-right-radius: ${(props) => props.theme.borderRadius};
 `;
+var DxcAccordion = ({
+  label = "",
+  defaultIsExpanded = false,
+  isExpanded,
+  icon,
+  assistiveText = "",
+  disabled = false,
+  onChange,
+  children,
+  margin,
+  tabIndex = 0
+}) => {
+  const id = useId();
+  const [innerIsExpanded, setInnerIsExpanded] = useState(defaultIsExpanded);
+  const colorsTheme = useContext(HalstackContext);
+  const handleAccordionState = () => {
+    if (isExpanded == null) {
+      setInnerIsExpanded((innerIsCurrentlyExpanded) => !innerIsCurrentlyExpanded);
+    }
+    onChange?.(isExpanded != null ? !isExpanded : !innerIsExpanded);
+  };
+  return /* @__PURE__ */ jsx3(ThemeProvider, { theme: colorsTheme.accordion, children: /* @__PURE__ */ jsxs(AccordionContainer, { isExpanded: isExpanded ?? innerIsExpanded, margin, children: [
+    /* @__PURE__ */ jsx3(AccordionHeader, { children: /* @__PURE__ */ jsxs(
+      AccordionTrigger,
+      {
+        id: `accordion-${id}`,
+        onClick: disabled ? void 0 : handleAccordionState,
+        disabled,
+        tabIndex: disabled ? -1 : tabIndex,
+        "aria-expanded": isExpanded ?? innerIsExpanded,
+        "aria-controls": `accordion-panel-${id}`,
+        isExpanded: isExpanded ?? innerIsExpanded,
+        children: [
+          /* @__PURE__ */ jsxs(AccordionInfo, { children: [
+            /* @__PURE__ */ jsxs(AccordionLabel, { disabled, children: [
+              icon && /* @__PURE__ */ jsx3(IconContainer2, { disabled, children: typeof icon === "string" ? /* @__PURE__ */ jsx3(Icon_default, { icon }) : icon }),
+              label
+            ] }),
+            assistiveText && /* @__PURE__ */ jsx3(AccordionAssistiveText, { disabled, children: assistiveText })
+          ] }),
+          /* @__PURE__ */ jsx3(CollapseIndicator, { disabled, children: /* @__PURE__ */ jsx3(Icon_default, { icon: isExpanded ?? innerIsExpanded ? "expand_less" : "expand_more" }) })
+        ]
+      }
+    ) }),
+    (isExpanded ?? innerIsExpanded) && /* @__PURE__ */ jsx3(AccordionPanel, { id: `accordion-panel-${id}`, role: "region", "aria-labelledby": `accordion-${id}`, children })
+  ] }) });
+};
 var Accordion_default = DxcAccordion;
 
 // src/accordion-group/AccordionGroup.tsx
@@ -4124,7 +4116,7 @@ var DxcHeader = ({
     isResponsive && responsiveContent && /* @__PURE__ */ jsxs11(Flex_default, { grow: 1, children: [
       /* @__PURE__ */ jsx19(ChildContainer, { children: /* @__PURE__ */ jsxs11(HamburgerTrigger, { tabIndex, onClick: handleMenu, "aria-label": "Show options", children: [
         /* @__PURE__ */ jsx19(Icon_default, { icon: "menu" }),
-        translatedLabels.header.hamburguerTitle
+        translatedLabels.header.hamburgerTitle
       ] }) }),
       /* @__PURE__ */ jsxs11(ResponsiveMenu, { hasVisibility: isMenuVisible, children: [
         /* @__PURE__ */ jsxs11(Flex_default, { justifyContent: "space-between", alignItems: "center", children: [
@@ -4214,23 +4206,23 @@ var HamburgerTrigger = styled15.button`
   border-radius: 2px;
   background-color: transparent;
   :hover {
-    background-color: ${(props) => props.theme.hamburguerHoverColor};
+    background-color: ${(props) => props.theme.hamburgerHoverColor};
   }
   &:focus {
-    outline: ${(props) => props.theme.hamburguerFocusColor} auto 1px;
+    outline: ${(props) => props.theme.hamburgerFocusColor} auto 1px;
   }
   & > svg {
-    fill: ${(props) => props.theme.hamburguerIconColor};
+    fill: ${(props) => props.theme.hamburgerIconColor};
   }
   & > span {
     font-size: 24px;
   }
-  font-family: ${(props) => props.theme.hamburguerFontFamily};
-  font-style: ${(props) => props.theme.hamburguerFontStyle};
-  font-size: ${(props) => props.theme.hamburguerFontSize};
-  text-transform: ${(props) => props.theme.hamburguerTextTransform};
-  font-weight: ${(props) => props.theme.hamburguerFontWeight};
-  color: ${(props) => props.theme.hamburguerFontColor};
+  font-family: ${(props) => props.theme.hamburgerFontFamily};
+  font-style: ${(props) => props.theme.hamburgerFontStyle};
+  font-size: ${(props) => props.theme.hamburgerFontSize};
+  text-transform: ${(props) => props.theme.hamburgerTextTransform};
+  font-weight: ${(props) => props.theme.hamburgerFontWeight};
+  color: ${(props) => props.theme.hamburgerFontColor};
 `;
 var ResponsiveMenu = styled15.div`
   display: flex;
@@ -4275,7 +4267,7 @@ var CloseAction = styled15.button`
 
   :focus,
   :focus-visible {
-    outline: ${(props) => props.theme.hamburguerFocusColor} auto 1px;
+    outline: ${(props) => props.theme.hamburgerFocusColor} auto 1px;
   }
   font-size: 24px;
   svg {
@@ -4341,9 +4333,9 @@ var Bleed = ({ space, horizontal, vertical, top, right, bottom, left, children }
 var Bleed_default = Bleed;
 
 // src/sidenav/SidenavContext.tsx
-import { createContext as createContext5, useContext as useContext10 } from "react";
-var SidenavContext = createContext5(null);
-var GroupContext = createContext5(null);
+import { createContext as createContext4, useContext as useContext10 } from "react";
+var SidenavContext = createContext4(null);
+var GroupContext = createContext4(null);
 var SidenavContextProvider = SidenavContext.Provider;
 var GroupContextProvider = GroupContext.Provider;
 var useResponsiveSidenavVisibility = () => {
@@ -5143,8 +5135,8 @@ import { useContext as useContext13, useMemo as useMemo5 } from "react";
 import styled22 from "styled-components";
 
 // src/typography/TypographyContext.tsx
-import { createContext as createContext6 } from "react";
-var TypographyContext_default = createContext6({
+import { createContext as createContext5 } from "react";
+var TypographyContext_default = createContext5({
   as: "span",
   color: "#000000",
   display: "inline",
@@ -5375,7 +5367,8 @@ var DxcCheckbox = forwardRef4(
     onChange,
     margin,
     size = "fitContent",
-    tabIndex = 0
+    tabIndex = 0,
+    ariaLabel = "Checkbox"
   }, ref) => {
     const labelId = `label-checkbox-${useId4()}`;
     const [innerChecked, setInnerChecked] = useState12(defaultChecked);
@@ -5440,7 +5433,7 @@ var DxcCheckbox = forwardRef4(
               "aria-readonly": readOnly,
               "aria-required": !disabled && !optional,
               "aria-labelledby": label ? labelId : void 0,
-              "aria-label": label ? void 0 : "Checkbox",
+              "aria-label": label ? void 0 : ariaLabel,
               checked: checked ?? innerChecked,
               disabled,
               readOnly,
@@ -5843,8 +5836,8 @@ var Text2 = styled28.span`
 var ItemAction_default = ItemAction;
 
 // src/contextual-menu/ContextualMenuContext.tsx
-import { createContext as createContext7 } from "react";
-var ContextualMenuContext_default = createContext7(null);
+import { createContext as createContext6 } from "react";
+var ContextualMenuContext_default = createContext6(null);
 
 // src/contextual-menu/GroupItem.tsx
 import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -8447,8 +8440,8 @@ import {
 import styled43, { ThemeProvider as ThemeProvider18 } from "styled-components";
 
 // src/number-input/NumberInputContext.tsx
-import { createContext as createContext8 } from "react";
-var NumberInputContext_default = createContext8(null);
+import { createContext as createContext7 } from "react";
+var NumberInputContext_default = createContext7(null);
 
 // src/text-input/Suggestions.tsx
 import { memo as memo9, useContext as useContext28, useEffect as useEffect11, useRef as useRef10 } from "react";
@@ -8457,7 +8450,35 @@ import styled42 from "styled-components";
 // src/text-input/Suggestion.tsx
 import { memo as memo8, useMemo as useMemo11 } from "react";
 import styled41 from "styled-components";
-import { Fragment as Fragment11, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+
+// src/text-input/utils.ts
+var sizes4 = {
+  small: "240px",
+  medium: "360px",
+  large: "480px",
+  fillParent: "100%"
+};
+var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes4[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : size && sizes4[size];
+var makeCancelable = (promise) => {
+  let hasCanceled_ = false;
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+      (val) => hasCanceled_ ? reject(Error("Is canceled")) : resolve(val),
+      (promiseError) => hasCanceled_ ? reject(Error("Is canceled")) : reject(promiseError)
+    );
+  });
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled_ = true;
+    }
+  };
+};
+var hasSuggestions = (suggestions) => typeof suggestions === "function" || (suggestions ? suggestions.length > 0 : false);
+var isRequired = (value, optional) => value === "" && !optional;
+var isLengthIncorrect = (value, minLength, maxLength) => value != null && (minLength != null && value.length < minLength || maxLength != null && value.length > maxLength);
+var isNumberIncorrect = (value, minNumber, maxNumber) => minNumber != null && value < minNumber || maxNumber != null && value > maxNumber;
+var patternMismatch = (pattern, value) => pattern != null && !new RegExp(pattern).test(value);
 var transformSpecialChars = (str) => {
   const specialCharsRegex = /[\\*()[\]{}+?/]/;
   let value = str;
@@ -8470,6 +8491,32 @@ var transformSpecialChars = (str) => {
   }
   return value;
 };
+
+// src/text-input/Suggestion.tsx
+import { Fragment as Fragment11, jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+var SuggestionContainer = styled41.li`
+  display: flex;
+  padding: 0 0.5rem;
+  line-height: 1.715em;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 2px
+    ${(props) => props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent"};
+
+  &:hover {
+    background-color: ${(props) => props.theme.hoverListOptionBackgroundColor};
+  }
+  &:active {
+    background-color: ${(props) => props.theme.activeListOptionBackgroundColor};
+  }
+`;
+var StyledSuggestion = styled41.span`
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0.25rem 0.5rem 0.188rem 0.5rem;
+  ${(props) => props.isLast || props.visuallyFocused ? `border-bottom: 1px solid transparent` : `border-bottom: 1px solid ${props.theme.listOptionDividerColor}`};
+`;
 var Suggestion = ({
   id,
   value,
@@ -8500,33 +8547,51 @@ var Suggestion = ({
     }
   );
 };
-var SuggestionContainer = styled41.li`
-  display: flex;
-  padding: 0 0.5rem;
-  line-height: 1.715em;
-  cursor: pointer;
-  box-shadow: inset 0 0 0 2px
-    ${(props) => props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent"};
-
-  &:hover {
-    background-color: ${(props) => props.theme.hoverListOptionBackgroundColor};
-  }
-  &:active {
-    background-color: ${(props) => props.theme.activeListOptionBackgroundColor};
-  }
-`;
-var StyledSuggestion = styled41.span`
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0.25rem 0.5rem 0.188rem 0.5rem;
-  ${(props) => props.isLast || props.visuallyFocused ? `border-bottom: 1px solid transparent` : `border-bottom: 1px solid ${props.theme.listOptionDividerColor}`};
-`;
 var Suggestion_default = memo8(Suggestion);
 
 // src/text-input/Suggestions.tsx
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+var SuggestionsContainer = styled42.ul`
+  box-sizing: border-box;
+  max-height: 304px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0.25rem 0;
+  background-color: ${(props) => props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor};
+  border: 1px solid
+    ${(props) => props.error ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor};
+
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  color: ${(props) => props.theme.listOptionFontColor};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: ${(props) => props.theme.listOptionFontSize};
+  font-style: ${(props) => props.theme.listOptionFontStyle};
+  font-weight: ${(props) => props.theme.listOptionFontWeight};
+`;
+var SuggestionsSystemMessage = styled42.span`
+  display: flex;
+  padding: 0.25rem 1rem;
+  color: ${(props) => props.theme.systemMessageFontColor};
+  line-height: 1.715em;
+`;
+var SuggestionsErrorIcon = styled42.span`
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  margin-right: 0.5rem;
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+  color: ${(props) => props.theme.errorIconColor};
+`;
+var SuggestionsError = styled42.span`
+  display: flex;
+  padding: 0.25rem 1rem;
+  align-items: center;
+  line-height: 1.715em;
+  color: ${(props) => props.theme.errorListDialogFontColor};
+`;
 var Suggestions = ({
   id,
   value,
@@ -8582,79 +8647,133 @@ var Suggestions = ({
     }
   );
 };
-var SuggestionsContainer = styled42.ul`
-  box-sizing: border-box;
-  max-height: 304px;
-  overflow-y: auto;
-  margin: 0;
-  padding: 0.25rem 0;
-  background-color: ${(props) => props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor};
-  border: 1px solid
-    ${(props) => props.error ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor};
+var Suggestions_default = memo9(Suggestions);
 
-  border-radius: 0.25rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  color: ${(props) => props.theme.listOptionFontColor};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-size: ${(props) => props.theme.listOptionFontSize};
-  font-style: ${(props) => props.theme.listOptionFontStyle};
-  font-weight: ${(props) => props.theme.listOptionFontWeight};
-`;
-var SuggestionsSystemMessage = styled42.span`
+// src/text-input/TextInput.tsx
+import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+var TextInputContainer = styled43.div`
+  box-sizing: border-box;
   display: flex;
-  padding: 0.25rem 1rem;
-  color: ${(props) => props.theme.systemMessageFontColor};
-  line-height: 1.715em;
+  flex-direction: column;
+  width: ${(props) => calculateWidth9(props.margin, props.size)};
+  ${(props) => props.size !== "fillParent" && `min-width:${calculateWidth9(props.margin, props.size)}`};
+  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] : ""};
+  font-family: ${(props) => props.theme.fontFamily};
 `;
-var SuggestionsErrorIcon = styled42.span`
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  margin-right: 0.5rem;
+var Label4 = styled43.label`
+  color: ${(props) => props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor};
+  font-size: ${(props) => props.theme.labelFontSize};
+  font-style: ${(props) => props.theme.labelFontStyle};
+  font-weight: ${(props) => props.theme.labelFontWeight};
+  line-height: ${(props) => props.theme.labelLineHeight};
+  ${(props) => !props.hasHelperText && `margin-bottom: 0.25rem`}
+`;
+var OptionalLabel2 = styled43.span`
+  font-weight: ${(props) => props.theme.optionalLabelFontWeight};
+`;
+var HelperText2 = styled43.span`
+  color: ${(props) => props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor};
+  font-size: ${(props) => props.theme.helperTextFontSize};
+  font-style: ${(props) => props.theme.helperTextFontStyle};
+  font-weight: ${(props) => props.theme.helperTextFontWeight};
+  line-height: ${(props) => props.theme.helperTextLineHeight};
+  margin-bottom: 0.25rem;
+`;
+var InputContainer = styled43.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: calc(2.5rem - 2px);
+  padding: 0 0.5rem;
+
+  ${(props) => props.disabled && `background-color: ${props.theme.disabledContainerFillColor};`}
+  box-shadow: 0 0 0 2px transparent;
+  border-radius: 4px;
+  border: 1px solid
+    ${(props) => props.disabled ? props.theme.disabledBorderColor : props.readOnly ? props.theme.readOnlyBorderColor : props.theme.enabledBorderColor};
+  ${(props) => props.error && !props.disabled && `border-color: transparent;
+     box-shadow: 0 0 0 2px ${props.theme.errorBorderColor};
+  `}
+  ${(props) => !props.disabled ? `
+      &:hover {
+        border-color: ${props.error ? "transparent" : props.readOnly ? props.theme.hoverReadOnlyBorderColor : props.theme.hoverBorderColor};
+        ${props.error ? `box-shadow: 0 0 0 2px ${props.theme.hoverErrorBorderColor};` : ""}
+      }
+      &:focus-within {
+        border-color: transparent;
+        box-shadow: 0 0 0 2px ${props.theme.focusBorderColor};
+      }
+    ` : "cursor: not-allowed;"};
+`;
+var Input = styled43.input`
+  height: calc(2.5rem - 2px);
+  width: 100%;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${(props) => props.disabled ? props.theme.disabledValueFontColor : props.theme.valueFontColor};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-size: ${(props) => props.theme.valueFontSize};
+  font-style: ${(props) => props.theme.valueFontStyle};
+  font-weight: ${(props) => props.theme.valueFontWeight};
+  line-height: 1.5em;
+  ${(props) => props.disabled && `cursor: not-allowed;`}
+
+  ::placeholder {
+    color: ${(props) => props.disabled ? props.theme.disabledPlaceholderFontColor : props.theme.placeholderFontColor};
+  }
+`;
+var Prefix = styled43.span`
+  height: 1.5rem;
+  margin-left: 0.25rem;
+  padding-right: ${(props) => props.theme.prefixDividerPaddingRight};
+  ${(props) => {
+  const color = props.disabled ? props.theme.disabledPrefixColor : props.theme.prefixColor;
+  return `color: ${color}; border-right: ${props.theme.prefixDividerBorderWidth} ${props.theme.prefixDividerBorderStyle} ${color};`;
+}};
+  font-size: 1rem;
+  line-height: 1.5rem;
+  pointer-events: none;
+`;
+var Suffix = styled43.span`
+  height: 1.5rem;
+  margin: 0 0.25rem;
+  padding-left: ${(props) => props.theme.suffixDividerPaddingLeft};
+  ${(props) => {
+  const color = props.disabled ? props.theme.disabledSuffixColor : props.theme.suffixColor;
+  return `color: ${color}; border-left: ${props.theme.suffixDividerBorderWidth} ${props.theme.suffixDividerBorderStyle} ${color};`;
+}};
+  font-size: 1rem;
+  line-height: 1.5rem;
+  pointer-events: none;
+`;
+var ErrorIcon2 = styled43.span`
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  padding: 3px;
   height: 18px;
   width: 18px;
   font-size: 18px;
   color: ${(props) => props.theme.errorIconColor};
 `;
-var SuggestionsError = styled42.span`
-  display: flex;
-  padding: 0.25rem 1rem;
-  align-items: center;
-  line-height: 1.715em;
-  color: ${(props) => props.theme.errorListDialogFontColor};
+var ErrorMessageContainer = styled43.span`
+  min-height: 1.5em;
+  color: ${(props) => props.theme.errorMessageColor};
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  margin-top: 0.25rem;
 `;
-var Suggestions_default = memo9(Suggestions);
-
-// src/text-input/TextInput.tsx
-import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
-var sizes4 = {
-  small: "240px",
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
 var AutosuggestWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx51(Fragment12, { children: condition ? wrapper(children) : children });
-var calculateWidth9 = (margin, size) => size === "fillParent" ? `calc(${sizes4[size]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})` : size && sizes4[size];
-var makeCancelable = (promise) => {
-  let hasCanceled_ = false;
-  const wrappedPromise = new Promise((resolve, reject) => {
-    promise.then(
-      (val) => hasCanceled_ ? reject(Error("Is canceled")) : resolve(val),
-      (promiseError) => hasCanceled_ ? reject(Error("Is canceled")) : reject(promiseError)
-    );
-  });
-  return {
-    promise: wrappedPromise,
-    cancel() {
-      hasCanceled_ = true;
-    }
-  };
-};
-var hasSuggestions = (suggestions) => typeof suggestions === "function" || (suggestions ? suggestions.length > 0 : false);
-var isRequired = (value, optional) => value === "" && !optional;
-var isLengthIncorrect = (value, minLength, maxLength) => value != null && (minLength != null && value.length < minLength || maxLength != null && value.length > maxLength);
-var isNumberIncorrect = (value, minNumber, maxNumber) => minNumber != null && value < minNumber || maxNumber != null && value > maxNumber;
-var patternMismatch = (pattern, value) => pattern != null && !new RegExp(pattern).test(value);
 var DxcTextInput = forwardRef6(
   ({
     label,
@@ -8680,24 +8799,25 @@ var DxcTextInput = forwardRef6(
     autocomplete = "off",
     margin,
     size = "medium",
-    tabIndex = 0
+    tabIndex = 0,
+    ariaLabel = "Text input"
   }, ref) => {
     const inputId = `input-${useId10()}`;
     const autosuggestId = `suggestions-${inputId}`;
     const errorId = `error-${inputId}`;
+    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] = 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 inputRef = useRef11(null);
-    const inputContainerRef = useRef11(null);
-    const actionRef = useRef11(null);
     const width = useWidth_default(inputContainerRef.current);
-    const colorsTheme = useContext29(HalstackContext);
-    const translatedLabels = useContext29(HalstackLanguageContext);
-    const numberInputContext = useContext29(NumberInputContext_default);
     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 = () => {
       if (hasSuggestions(suggestions)) {
@@ -8821,7 +8941,7 @@ var DxcTextInput = forwardRef6(
             openSuggestions();
             if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
               changeVisualFocusIndex(
-                (visualFocusedSuggIndex) => visualFocusedSuggIndex < filteredSuggestions.length - 1 ? visualFocusedSuggIndex + 1 : visualFocusedSuggIndex === filteredSuggestions.length - 1 ? 0 : -1
+                (visualFocusedSuggestionIndex) => visualFocusedSuggestionIndex < filteredSuggestions.length - 1 ? visualFocusedSuggestionIndex + 1 : visualFocusedSuggestionIndex === filteredSuggestions.length - 1 ? 0 : -1
               );
             }
           }
@@ -8835,7 +8955,7 @@ var DxcTextInput = forwardRef6(
             openSuggestions();
             if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
               changeVisualFocusIndex(
-                (visualFocusedSuggIndex) => visualFocusedSuggIndex === 0 || visualFocusedSuggIndex === -1 ? filteredSuggestions.length > 0 ? filteredSuggestions.length - 1 : (suggestions?.length ?? 0) - 1 : visualFocusedSuggIndex - 1
+                (visualFocusedSuggestionIndex) => visualFocusedSuggestionIndex === 0 || visualFocusedSuggestionIndex === -1 ? filteredSuggestions.length > 0 ? filteredSuggestions.length - 1 : (suggestions?.length ?? 0) - 1 : visualFocusedSuggestionIndex - 1
               );
             }
           }
@@ -9040,7 +9160,8 @@ var DxcTextInput = forwardRef6(
                       "aria-activedescendant": hasSuggestions(suggestions) && isOpen && visualFocusIndex !== -1 ? `suggestion-${visualFocusIndex}` : void 0,
                       "aria-invalid": !!error,
                       "aria-errormessage": error ? errorId : void 0,
-                      "aria-required": !disabled && !optional
+                      "aria-required": !disabled && !optional,
+                      "aria-label": label ? void 0 : ariaLabel
                     }
                   ),
                   !disabled && error && /* @__PURE__ */ jsx51(ErrorIcon2, { "aria-hidden": "true", children: /* @__PURE__ */ jsx51(Icon_default, { icon: "filled_error" }) }),
@@ -9099,128 +9220,6 @@ var DxcTextInput = forwardRef6(
     ] }) });
   }
 );
-var TextInputContainer = styled43.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: ${(props) => calculateWidth9(props.margin, props.size)};
-  ${(props) => props.size !== "fillParent" && `min-width:${calculateWidth9(props.margin, props.size)}`};
-  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] : ""};
-  font-family: ${(props) => props.theme.fontFamily};
-`;
-var Label4 = styled43.label`
-  color: ${(props) => props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor};
-  font-size: ${(props) => props.theme.labelFontSize};
-  font-style: ${(props) => props.theme.labelFontStyle};
-  font-weight: ${(props) => props.theme.labelFontWeight};
-  line-height: ${(props) => props.theme.labelLineHeight};
-  ${(props) => !props.hasHelperText && `margin-bottom: 0.25rem`}
-`;
-var OptionalLabel2 = styled43.span`
-  font-weight: ${(props) => props.theme.optionalLabelFontWeight};
-`;
-var HelperText2 = styled43.span`
-  color: ${(props) => props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor};
-  font-size: ${(props) => props.theme.helperTextFontSize};
-  font-style: ${(props) => props.theme.helperTextFontStyle};
-  font-weight: ${(props) => props.theme.helperTextFontWeight};
-  line-height: ${(props) => props.theme.helperTextLineHeight};
-  margin-bottom: 0.25rem;
-`;
-var InputContainer = styled43.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: calc(2.5rem - 2px);
-  padding: 0 0.5rem;
-
-  ${(props) => props.disabled && `background-color: ${props.theme.disabledContainerFillColor};`}
-  box-shadow: 0 0 0 2px transparent;
-  border-radius: 4px;
-  border: 1px solid
-    ${(props) => props.disabled ? props.theme.disabledBorderColor : props.readOnly ? props.theme.readOnlyBorderColor : props.theme.enabledBorderColor};
-  ${(props) => props.error && !props.disabled && `border-color: transparent;
-     box-shadow: 0 0 0 2px ${props.theme.errorBorderColor};
-  `}
-  ${(props) => !props.disabled ? `
-      &:hover {
-        border-color: ${props.error ? "transparent" : props.readOnly ? props.theme.hoverReadOnlyBorderColor : props.theme.hoverBorderColor};
-        ${props.error ? `box-shadow: 0 0 0 2px ${props.theme.hoverErrorBorderColor};` : ""}
-      }
-      &:focus-within {
-        border-color: transparent;
-        box-shadow: 0 0 0 2px ${props.theme.focusBorderColor};
-      }
-    ` : "cursor: not-allowed;"};
-`;
-var Input = styled43.input`
-  height: calc(2.5rem - 2px);
-  width: 100%;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: ${(props) => props.disabled ? props.theme.disabledValueFontColor : props.theme.valueFontColor};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-size: ${(props) => props.theme.valueFontSize};
-  font-style: ${(props) => props.theme.valueFontStyle};
-  font-weight: ${(props) => props.theme.valueFontWeight};
-  line-height: 1.5em;
-  ${(props) => props.disabled && `cursor: not-allowed;`}
-
-  ::placeholder {
-    color: ${(props) => props.disabled ? props.theme.disabledPlaceholderFontColor : props.theme.placeholderFontColor};
-  }
-`;
-var Prefix = styled43.span`
-  height: 1.5rem;
-  margin-left: 0.25rem;
-  padding-right: ${(props) => props.theme.prefixDividerPaddingRight};
-  ${(props) => {
-  const color = props.disabled ? props.theme.disabledPrefixColor : props.theme.prefixColor;
-  return `color: ${color}; border-right: ${props.theme.prefixDividerBorderWidth} ${props.theme.prefixDividerBorderStyle} ${color};`;
-}};
-  font-size: 1rem;
-  line-height: 1.5rem;
-  pointer-events: none;
-`;
-var Suffix = styled43.span`
-  height: 1.5rem;
-  margin: 0 0.25rem;
-  padding-left: ${(props) => props.theme.suffixDividerPaddingLeft};
-  ${(props) => {
-  const color = props.disabled ? props.theme.disabledSuffixColor : props.theme.suffixColor;
-  return `color: ${color}; border-left: ${props.theme.suffixDividerBorderWidth} ${props.theme.suffixDividerBorderStyle} ${color};`;
-}};
-  font-size: 1rem;
-  line-height: 1.5rem;
-  pointer-events: none;
-`;
-var ErrorIcon2 = styled43.span`
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  padding: 3px;
-  height: 18px;
-  width: 18px;
-  font-size: 18px;
-  color: ${(props) => props.theme.errorIconColor};
-`;
-var ErrorMessageContainer = styled43.span`
-  min-height: 1.5em;
-  color: ${(props) => props.theme.errorMessageColor};
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 1.5em;
-  margin-top: 0.25rem;
-`;
 var TextInput_default = DxcTextInput;
 
 // src/date-input/DateInput.tsx
@@ -9265,7 +9264,8 @@ var DxcDateInput = forwardRef7(
     autocomplete,
     margin,
     size,
-    tabIndex
+    tabIndex,
+    ariaLabel = "Date input"
   }, ref) => {
     const [innerValue, setInnerValue] = useState23(defaultValue);
     const [isOpen, setIsOpen] = useState23(false);
@@ -9432,7 +9432,8 @@ var DxcDateInput = forwardRef7(
             autocomplete,
             size,
             tabIndex,
-            ref: dateRef
+            ref: dateRef,
+            ariaLabel
           }
         ) }),
         /* @__PURE__ */ jsx52(Popover4.Portal, { children: /* @__PURE__ */ jsx52(
@@ -9539,44 +9540,17 @@ var Dialog = styled45.div`
     min-width: 92%;
   }
 `;
-var CloseIconAction = styled45.button`
-  all: unset;
+var CloseIconActionContainer = styled45.div`
   position: absolute;
   top: 24px;
   right: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(props) => props.theme.closeIconBackgroundColor};
-  box-shadow: 0 0 0 2px transparent;
-  color: ${(props) => props.theme.closeIconColor};
-  border-radius: ${(props) => props.theme.closeIconBorderRadius};
-  border-width: ${(props) => props.theme.closeIconBorderThickness};
-  border-style: ${(props) => props.theme.closeIconBorderStyle};
-  border-color: ${(props) => props.theme.closeIconBorderColor};
-  cursor: pointer;
-  z-index: 1;
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px #0095ff;
-  }
-  &:hover {
-    background-color: #f2f2f2;
-  }
-  &:active {
-    background-color: #cccccc;
-  }
-  span {
-    font-size: ${(props) => props.theme.closeIconSize};
-  }
 `;
 var DxcDialog = ({
+  children,
   closable = true,
+  onBackgroundClick,
   onCloseClick,
-  children,
   overlay = true,
-  onBackgroundClick,
   tabIndex = 0
 }) => {
   const colorsTheme = useContext31(HalstackContext);
@@ -9594,28 +9568,28 @@ var DxcDialog = ({
     };
   }, [onCloseClick]);
   return /* @__PURE__ */ jsxs37(ThemeProvider20, { theme: colorsTheme.dialog, children: [
-    /* @__PURE__ */ jsx53(BodyStyle2, {}),
-    createPortal2(
-      /* @__PURE__ */ jsxs37(DialogContainer, { children: [
-        overlay && /* @__PURE__ */ jsx53(
-          Overlay3,
-          {
-            onClick: () => {
-              onBackgroundClick?.();
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx53(Dialog, { role: "dialog", "aria-modal": overlay, closable, "aria-label": "Dialog", children: /* @__PURE__ */ jsxs37(FocusLock_default, { children: [
+    /* @__PURE__ */ jsx53(BodyStyle2, {}),
+    createPortal2(
+      /* @__PURE__ */ jsxs37(DialogContainer, { children: [
+        overlay && /* @__PURE__ */ jsx53(Overlay3, { onClick: onBackgroundClick }),
+        /* @__PURE__ */ jsx53(Dialog, { "aria-label": "Dialog", "aria-modal": overlay, closable, role: "dialog", children: /* @__PURE__ */ jsxs37(FocusLock_default, { children: [
           children,
           closable && /* @__PURE__ */ jsx53(
-            CloseIconAction,
+            ThemeProvider20,
             {
-              onClick: () => {
-                onCloseClick?.();
+              theme: {
+                actionBackgroundColor: colorsTheme.dialog.closeIconBackgroundColor,
+                actionIconColor: colorsTheme.dialog.closeIconColor
               },
-              "aria-label": translatedLabels.dialog.closeIconAriaLabel,
-              tabIndex,
-              children: /* @__PURE__ */ jsx53(Icon_default, { icon: "close" })
+              children: /* @__PURE__ */ jsx53(CloseIconActionContainer, { children: /* @__PURE__ */ jsx53(
+                ActionIcon_default,
+                {
+                  icon: "close",
+                  onClick: onCloseClick,
+                  tabIndex,
+                  title: translatedLabels.dialog.closeIconAriaLabel
+                }
+              ) })
             }
           )
         ] }) })
@@ -9627,46 +9601,13 @@ var DxcDialog = ({
 var Dialog_default = DxcDialog;
 
 // src/file-input/FileInput.tsx
-import { useCallback as useCallback8, useContext as useContext33, useEffect as useEffect15, useId as useId12, useState as useState24, forwardRef as forwardRef8 } from "react";
-import styled47, { ThemeProvider as ThemeProvider22 } from "styled-components";
+import { useCallback as useCallback8, useContext as useContext33, useEffect as useEffect15, useId as useId13, useState as useState24, forwardRef as forwardRef8 } from "react";
+import styled47, { ThemeProvider as ThemeProvider21 } from "styled-components";
 
 // src/file-input/FileItem.tsx
-import { memo as memo10, useContext as useContext32 } from "react";
-import styled46, { ThemeProvider as ThemeProvider21 } from "styled-components";
+import { memo as memo10, useContext as useContext32, useId as useId12 } from "react";
+import styled46 from "styled-components";
 import { jsx as jsx54, jsxs as jsxs38 } from "react/jsx-runtime";
-var FileItem = ({
-  fileName = "",
-  error = "",
-  singleFileMode,
-  showPreview,
-  preview,
-  type,
-  onDelete,
-  tabIndex
-}) => {
-  const colorsTheme = useContext32(HalstackContext);
-  const translatedLabels = useContext32(HalstackLanguageContext);
-  const getIconAriaLabel = () => type.includes("video") ? "video" : type.includes("audio") ? "audio" : "file";
-  return /* @__PURE__ */ jsx54(ThemeProvider21, { theme: colorsTheme.fileInput, children: /* @__PURE__ */ jsxs38(MainContainer3, { error, singleFileMode, showPreview, children: [
-    showPreview && (type.includes("image") ? /* @__PURE__ */ jsx54(ImagePreview, { src: preview, alt: fileName }) : /* @__PURE__ */ jsx54(IconPreview, { error, role: "document", "aria-label": getIconAriaLabel(), children: /* @__PURE__ */ jsx54(Icon_default, { icon: preview }) })),
-    /* @__PURE__ */ jsxs38(FileItemContent, { children: [
-      /* @__PURE__ */ jsx54(FileName, { children: fileName }),
-      /* @__PURE__ */ jsxs38(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),
-            icon: "close",
-            tabIndex,
-            title: translatedLabels.fileInput.deleteFileActionTitle
-          }
-        )
-      ] }),
-      error && !singleFileMode && /* @__PURE__ */ jsx54(ErrorMessage, { role: "alert", "aria-live": "assertive", children: error })
-    ] })
-  ] }) });
-};
 var MainContainer3 = styled46.div`
   box-sizing: border-box;
   display: flex;
@@ -9738,10 +9679,41 @@ var ErrorMessage = styled46.span`
   font-weight: ${(props) => props.theme.errorMessageFontWeight};
   line-height: ${(props) => props.theme.errorMessageLineHeight};
 `;
+var FileItem = ({
+  fileName = "",
+  error = "",
+  singleFileMode,
+  showPreview,
+  preview,
+  type,
+  onDelete,
+  tabIndex
+}) => {
+  const translatedLabels = useContext32(HalstackLanguageContext);
+  const fileNameId = useId12();
+  return /* @__PURE__ */ jsxs38(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__ */ jsxs38(FileItemContent, { children: [
+      /* @__PURE__ */ jsx54(FileName, { id: fileNameId, children: fileName }),
+      /* @__PURE__ */ jsxs38(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),
+            icon: "close",
+            tabIndex,
+            title: translatedLabels.fileInput.deleteFileActionTitle
+          }
+        )
+      ] }),
+      error && !singleFileMode && /* @__PURE__ */ jsx54(ErrorMessage, { role: "alert", "aria-live": "assertive", children: error })
+    ] })
+  ] });
+};
 var FileItem_default = memo10(FileItem);
 
-// src/file-input/FileInput.tsx
-import { jsx as jsx55, jsxs as jsxs39 } from "react/jsx-runtime";
+// src/file-input/utils.ts
 var getFilePreview = async (file) => {
   if (file.type.includes("video")) return "filled_movie";
   else if (file.type.includes("audio")) return "music_video";
@@ -9761,6 +9733,101 @@ var isFileIncluded = (file, fileList) => {
     ({ name, size, type, lastModified, webkitRelativePath }) => name === file.file.name && size === file.file.size && type === file.file.type && lastModified === file.file.lastModified && webkitRelativePath === file.file.webkitRelativePath
   );
 };
+
+// src/file-input/FileInput.tsx
+import { jsx as jsx55, jsxs as jsxs39 } from "react/jsx-runtime";
+var FileInputContainer = styled47.div`
+  display: flex;
+  flex-direction: column;
+  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] : ""};
+  width: fit-content;
+`;
+var Label6 = styled47.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`
+  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`
+  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`
+  display: none;
+`;
+var FileItemListContainer = styled47.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.25rem;
+`;
+var Container2 = styled47.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.25rem;
+  margin-top: 0.25rem;
+`;
+var DragDropArea = styled47.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;"}
+  align-items: center;
+  width: 320px;
+  padding: ${(props) => props.mode === "filedrop" ? `calc(4px - ${props.theme.dropBorderThickness}) 1rem calc(4px - ${props.theme.dropBorderThickness}) calc(4px - ${props.theme.dropBorderThickness})` : "1rem"};
+  overflow: hidden;
+  box-shadow: 0 0 0 2px transparent;
+  border-radius: ${(props) => props.theme.dropBorderRadius};
+  border-width: ${(props) => props.theme.dropBorderThickness};
+  border-style: ${(props) => props.theme.dropBorderStyle};
+  border-color: ${(props) => props.disabled ? props.theme.disabledDropBorderColor : props.theme.dropBorderColor};
+  ${(props) => props.isDragging && `
+      background-color: ${props.theme.dragoverDropBackgroundColor};
+      border-color: transparent;
+      box-shadow: 0 0 0 2px ${props.theme.focusDropBorderColor};
+    `}
+  cursor: ${(props) => props.disabled && "not-allowed"};
+`;
+var DropzoneLabel = styled47.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  text-align: center;
+  color: ${(props) => props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor};
+  font-family: ${(props) => props.theme.dropLabelFontFamily};
+  font-size: ${(props) => props.theme.dropLabelFontSize};
+  font-weight: ${(props) => props.theme.dropLabelFontWeight};
+`;
+var FiledropLabel = styled47.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: ${(props) => props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor};
+  font-family: ${(props) => props.theme.dropLabelFontFamily};
+  font-size: ${(props) => props.theme.dropLabelFontSize};
+  font-weight: ${(props) => props.theme.dropLabelFontWeight};
+`;
+var ErrorMessage2 = styled47.div`
+  color: ${(props) => props.theme.errorMessageFontColor};
+  font-family: ${(props) => props.theme.errorMessageFontFamily};
+  font-size: ${(props) => props.theme.errorMessageFontSize};
+  font-weight: ${(props) => props.theme.errorMessageFontWeight};
+  line-height: ${(props) => props.theme.errorMessageLineHeight};
+  margin-top: 0.25rem;
+`;
 var DxcFileInput = forwardRef8(
   ({
     mode = "file",
@@ -9781,7 +9848,7 @@ var DxcFileInput = forwardRef8(
   }, ref) => {
     const [isDragging, setIsDragging] = useState24(false);
     const [files, setFiles] = useState24([]);
-    const fileInputId = `file-input-${useId12()}`;
+    const fileInputId = `file-input-${useId13()}`;
     const colorsTheme = useContext33(HalstackContext);
     const translatedLabels = useContext33(HalstackLanguageContext);
     const checkFileSize = (file) => {
@@ -9872,7 +9939,7 @@ var DxcFileInput = forwardRef8(
       };
       getFiles();
     }, [value]);
-    return /* @__PURE__ */ jsx55(ThemeProvider22, { theme: colorsTheme.fileInput, children: /* @__PURE__ */ jsxs39(FileInputContainer, { margin, ref, children: [
+    return /* @__PURE__ */ jsx55(ThemeProvider21, { theme: colorsTheme.fileInput, children: /* @__PURE__ */ jsxs39(FileInputContainer, { margin, ref, children: [
       /* @__PURE__ */ jsx55(Label6, { htmlFor: fileInputId, disabled, children: label }),
       /* @__PURE__ */ jsx55(HelperText4, { disabled, children: helperText }),
       mode === "file" ? /* @__PURE__ */ jsxs39(FileContainer, { singleFileMode: !multiple && files.length === 1, children: [
@@ -9899,7 +9966,7 @@ var DxcFileInput = forwardRef8(
             tabIndex
           }
         ),
-        files.length > 0 && /* @__PURE__ */ jsx55(FileItemListContainer, { children: files.map((file, index) => /* @__PURE__ */ jsx55(
+        files.length > 0 && /* @__PURE__ */ jsx55(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx55(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -9951,7 +10018,7 @@ var DxcFileInput = forwardRef8(
             ]
           }
         ),
-        files.length > 0 && /* @__PURE__ */ jsx55(FileItemListContainer, { children: files.map((file, index) => /* @__PURE__ */ jsx55(
+        files.length > 0 && /* @__PURE__ */ jsx55(FileItemListContainer, { role: "list", children: files.map((file, index) => /* @__PURE__ */ jsx55(
           FileItem_default,
           {
             fileName: file.file.name,
@@ -9970,98 +10037,6 @@ var DxcFileInput = forwardRef8(
     ] }) });
   }
 );
-var FileInputContainer = styled47.div`
-  display: flex;
-  flex-direction: column;
-  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] : ""};
-  width: fit-content;
-`;
-var Label6 = styled47.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`
-  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`
-  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`
-  display: none;
-`;
-var FileItemListContainer = styled47.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.25rem;
-`;
-var Container2 = styled47.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.25rem;
-  margin-top: 0.25rem;
-`;
-var DragDropArea = styled47.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;"}
-  align-items: center;
-  width: 320px;
-  padding: ${(props) => props.mode === "filedrop" ? `calc(4px - ${props.theme.dropBorderThickness}) 1rem calc(4px - ${props.theme.dropBorderThickness}) calc(4px - ${props.theme.dropBorderThickness})` : "1rem"};
-  overflow: hidden;
-  box-shadow: 0 0 0 2px transparent;
-  border-radius: ${(props) => props.theme.dropBorderRadius};
-  border-width: ${(props) => props.theme.dropBorderThickness};
-  border-style: ${(props) => props.theme.dropBorderStyle};
-  border-color: ${(props) => props.disabled ? props.theme.disabledDropBorderColor : props.theme.dropBorderColor};
-  ${(props) => props.isDragging && `
-      background-color: ${props.theme.dragoverDropBackgroundColor};
-      border-color: transparent;
-      box-shadow: 0 0 0 2px ${props.theme.focusDropBorderColor};
-    `}
-  cursor: ${(props) => props.disabled && "not-allowed"};
-`;
-var DropzoneLabel = styled47.div`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 3;
-  text-align: center;
-  color: ${(props) => props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor};
-  font-family: ${(props) => props.theme.dropLabelFontFamily};
-  font-size: ${(props) => props.theme.dropLabelFontSize};
-  font-weight: ${(props) => props.theme.dropLabelFontWeight};
-`;
-var FiledropLabel = styled47.span`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: ${(props) => props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor};
-  font-family: ${(props) => props.theme.dropLabelFontFamily};
-  font-size: ${(props) => props.theme.dropLabelFontSize};
-  font-weight: ${(props) => props.theme.dropLabelFontWeight};
-`;
-var ErrorMessage2 = styled47.div`
-  color: ${(props) => props.theme.errorMessageFontColor};
-  font-family: ${(props) => props.theme.errorMessageFontFamily};
-  font-size: ${(props) => props.theme.errorMessageFontSize};
-  font-weight: ${(props) => props.theme.errorMessageFontWeight};
-  line-height: ${(props) => props.theme.errorMessageLineHeight};
-  margin-top: 0.25rem;
-`;
 var FileInput_default = DxcFileInput;
 
 // src/grid/Grid.tsx
@@ -10098,7 +10073,7 @@ DxcGrid.Item = GridItem;
 var Grid_default = DxcGrid;
 
 // src/heading/Heading.tsx
-import styled49, { ThemeProvider as ThemeProvider23 } from "styled-components";
+import styled49, { ThemeProvider as ThemeProvider22 } 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 }) => {
@@ -10106,7 +10081,7 @@ var DxcHeading = ({ level = 1, text = "", as, weight, margin }) => {
   const checkValidAs = () => {
     if (as === "h1" || as === "h2" || as === "h3" || as === "h4" || as === "h5") return as;
   };
-  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 }) }) });
+  return /* @__PURE__ */ jsx57(ThemeProvider22, { 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`
   margin: ${(props) => props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px"};
@@ -10168,7 +10143,7 @@ var HeadingLevel5 = styled49.h5`
 var Heading_default = DxcHeading;
 
 // src/image/Image.tsx
-import styled50, { ThemeProvider as ThemeProvider24 } from "styled-components";
+import styled50, { ThemeProvider as ThemeProvider23 } from "styled-components";
 import { useContext as useContext35 } from "react";
 import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 var Figure = styled50.figure`
@@ -10206,7 +10181,7 @@ function DxcImage({
   onError
 }) {
   const colorsTheme = useContext35(HalstackContext);
-  return /* @__PURE__ */ jsx58(ThemeProvider24, { theme: colorsTheme.image, children: /* @__PURE__ */ jsx58(CaptionWrapper, { caption, children: /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx58(ThemeProvider23, { theme: colorsTheme.image, children: /* @__PURE__ */ jsx58(CaptionWrapper, { caption, children: /* @__PURE__ */ jsx58(
     "img",
     {
       alt,
@@ -10253,7 +10228,7 @@ var Inset_default = Inset;
 
 // src/link/Link.tsx
 import { forwardRef as forwardRef9, useContext as useContext36 } from "react";
-import styled52, { ThemeProvider as ThemeProvider25 } from "styled-components";
+import styled52, { ThemeProvider as ThemeProvider24 } from "styled-components";
 import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
 var StyledLink = styled52.a`
   all: unset;
@@ -10332,7 +10307,7 @@ var DxcLink = forwardRef9(
     ...otherProps
   }, ref) => {
     const colorsTheme = useContext36(HalstackContext);
-    return /* @__PURE__ */ jsx60(ThemeProvider25, { theme: colorsTheme.link, children: /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx60(ThemeProvider24, { theme: colorsTheme.link, children: /* @__PURE__ */ jsx60(
       StyledLink,
       {
         as: onClick && !href ? "button" : "a",
@@ -10357,15 +10332,15 @@ var Link_default = DxcLink;
 
 // src/nav-tabs/NavTabs.tsx
 import { Children as Children4, useContext as useContext38, useEffect as useEffect17, useMemo as useMemo12, useRef as useRef14, useState as useState25 } from "react";
-import styled54, { ThemeProvider as ThemeProvider26 } from "styled-components";
+import styled54, { ThemeProvider as ThemeProvider25 } from "styled-components";
 
 // src/nav-tabs/Tab.tsx
 import { useEffect as useEffect16, forwardRef as forwardRef10, useContext as useContext37, useRef as useRef13, useImperativeHandle } from "react";
 import styled53 from "styled-components";
 
 // src/nav-tabs/NavTabsContext.tsx
-import { createContext as createContext9 } from "react";
-var NavTabsContext_default = createContext9(null);
+import { createContext as createContext8 } from "react";
+var NavTabsContext_default = createContext8(null);
 
 // src/nav-tabs/Tab.tsx
 import { jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -10568,7 +10543,7 @@ var DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }) => {
         break;
     }
   };
-  return /* @__PURE__ */ jsx62(ThemeProvider26, { theme: colorsTheme.navTabs, children: /* @__PURE__ */ jsxs43(NavTabsContainer, { onKeyDown: handleOnKeyDown, ref: refNavTabList, role: "tablist", "aria-label": "Navigation tabs", children: [
+  return /* @__PURE__ */ jsx62(ThemeProvider25, { theme: colorsTheme.navTabs, children: /* @__PURE__ */ jsxs43(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 })
   ] }) });
@@ -10617,7 +10592,8 @@ var DxcNumberInput = forwardRef11(
     autocomplete,
     margin,
     size,
-    tabIndex
+    tabIndex,
+    ariaLabel = "Number input"
   }, ref) => {
     const numberInputRef = useRef15(null);
     const contextValue = useMemo13(
@@ -10660,7 +10636,8 @@ var DxcNumberInput = forwardRef11(
         margin,
         size,
         tabIndex,
-        ref
+        ref,
+        ariaLabel
       }
     ) }) });
   }
@@ -10683,7 +10660,7 @@ var NumberInput_default = DxcNumberInput;
 
 // src/paragraph/Paragraph.tsx
 import { useContext as useContext39 } from "react";
-import styled56, { ThemeProvider as ThemeProvider27 } from "styled-components";
+import styled56, { ThemeProvider as ThemeProvider26 } from "styled-components";
 import { jsx as jsx64 } from "react/jsx-runtime";
 var Paragraph = styled56.p`
   display: ${(props) => props.theme.display};
@@ -10702,7 +10679,7 @@ var Paragraph = styled56.p`
 `;
 function DxcParagraph({ children }) {
   const colorsTheme = useContext39(HalstackContext);
-  return /* @__PURE__ */ jsx64(ThemeProvider27, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ jsx64(Paragraph, { children }) });
+  return /* @__PURE__ */ jsx64(ThemeProvider26, { theme: colorsTheme.paragraph, children: /* @__PURE__ */ jsx64(Paragraph, { children }) });
 }
 
 // src/password-input/PasswordInput.tsx
@@ -10712,10 +10689,9 @@ import { jsx as jsx65 } from "react/jsx-runtime";
 var setInputType = (type, element) => {
   element?.getElementsByTagName("input")[0]?.setAttribute("type", type);
 };
-var setAriaAttributes = (ariaExpanded, ariaLabel, element) => {
+var setAriaAttributes = (ariaExpanded, element) => {
   const buttonElement = element?.getElementsByTagName("button")[0];
   buttonElement?.setAttribute("aria-expanded", ariaExpanded);
-  buttonElement?.setAttribute("aria-label", ariaLabel);
 };
 var DxcPasswordInput = forwardRef12(
   ({
@@ -10733,7 +10709,8 @@ var DxcPasswordInput = forwardRef12(
     autocomplete = "off",
     margin,
     size = "medium",
-    tabIndex = 0
+    tabIndex = 0,
+    ariaLabel = "Password input"
   }, ref) => {
     const [isPasswordVisible, setIsPasswordVisible] = useState26(false);
     const inputRef = useRef16(null);
@@ -10743,12 +10720,12 @@ var DxcPasswordInput = forwardRef12(
         if (isPasswordVisible) {
           setInputType("text", inputRef.current);
           if (passwordInput.inputHidePasswordTitle) {
-            setAriaAttributes("true", passwordInput.inputHidePasswordTitle, inputRef.current);
+            setAriaAttributes("true", inputRef.current);
           }
         } else {
           setInputType("password", inputRef.current);
           if (passwordInput.inputShowPasswordTitle) {
-            setAriaAttributes("false", passwordInput.inputShowPasswordTitle, inputRef.current);
+            setAriaAttributes("false", inputRef.current);
           }
         }
       })();
@@ -10778,7 +10755,8 @@ var DxcPasswordInput = forwardRef12(
         maxLength,
         autocomplete,
         ref: inputRef,
-        tabIndex
+        tabIndex,
+        ariaLabel
       }
     ) });
   }
@@ -10792,55 +10770,10 @@ var PasswordInput = styled57.div`
 var PasswordInput_default = DxcPasswordInput;
 
 // src/progress-bar/ProgressBar.tsx
-import { useContext as useContext41, useEffect as useEffect20, useState as useState27 } from "react";
-import styled58, { ThemeProvider as ThemeProvider28 } from "styled-components";
+import { useContext as useContext41, useEffect as useEffect20, useId as useId14, useState as useState27 } from "react";
+import styled58, { ThemeProvider as ThemeProvider27 } from "styled-components";
 import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
-var DxcProgressBar = ({
-  label = "",
-  helperText = "",
-  overlay = false,
-  value,
-  showValue = false,
-  margin
-}) => {
-  const colorsTheme = useContext41(HalstackContext);
-  const [valueProgressBar, setValueProgressBar] = useState27(0);
-  useEffect20(() => {
-    setValueProgressBar(
-      value === null || value === void 0 || value < 0 ? 0 : value >= 0 && value <= 100 ? value : 100
-    );
-  }, [value]);
-  return /* @__PURE__ */ jsx66(ThemeProvider28, { theme: colorsTheme.progressBar, children: /* @__PURE__ */ jsx66(BackgroundProgressBar, { overlay, children: /* @__PURE__ */ jsxs44(ProgressBarContainer, { overlay, margin, children: [
-    /* @__PURE__ */ jsxs44(InfoProgressBar, { children: [
-      /* @__PURE__ */ jsx66(ProgressBarLabel, { overlay, children: label }),
-      /* @__PURE__ */ jsxs44(ProgressBarProgress, { overlay, showValue, value: valueProgressBar, children: [
-        valueProgressBar,
-        " %"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx66(
-      LinearProgress,
-      {
-        role: "progressbar",
-        helperText,
-        "aria-valuenow": showValue ? valueProgressBar : void 0,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100,
-        "aria-label": label || "Progress Bar",
-        children: /* @__PURE__ */ jsx66(
-          LinearProgressBar,
-          {
-            variant: value === null || value === void 0 ? "indeterminate" : "determinate",
-            container: "first",
-            value: valueProgressBar
-          }
-        )
-      }
-    ),
-    helperText && /* @__PURE__ */ jsx66(HelperText5, { overlay, children: helperText })
-  ] }) }) });
-};
-var BackgroundProgressBar = styled58.div`
+var Overlay4 = styled58.div`
   ${({ overlay, theme }) => overlay ? `background-color: ${theme.overlayColor};
       width: 100%;
       justify-content: center;
@@ -10852,30 +10785,23 @@ var BackgroundProgressBar = styled58.div`
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 1300;` : `background-color: "transparent";`}
+      z-index: 1300;` : `background-color: transparent;`}
   display: flex;
   flex-wrap: wrap;
   min-width: 100px;
   width: 100%;
 `;
-var ProgressBarContainer = styled58.div`
-  z-index: ${(props) => props.overlay === true && "100" || "0"};
-  width: ${(props) => props.overlay === true ? "80%" : "100%"};
+var MainContainer4 = styled58.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] : ""};
   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 InfoProgressBar = styled58.div`
   display: flex;
-  flex-direction: row;
-  width: 685px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-bottom: 8px;
-  align-items: baseline;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 0.5rem;
+  z-index: ${(props) => props.overlay ? "100" : "0"};
 `;
 var ProgressBarLabel = styled58.div`
   font-family: ${(props) => props.theme.labelFontFamily};
@@ -10883,24 +10809,23 @@ var ProgressBarLabel = styled58.div`
   font-size: ${(props) => props.theme.labelFontSize};
   font-weight: ${(props) => props.theme.labelFontWeight};
   text-transform: ${(props) => props.theme.labelFontTextTransform};
-  color: ${(props) => props.overlay === true ? props.theme.overlayFontColor : props.theme.labelFontColor};
+  color: ${(props) => props.overlay ? props.theme.overlayFontColor : props.theme.labelFontColor};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
 var ProgressBarProgress = styled58.div`
+  flex-shrink: 0;
+  color: ${(props) => props.overlay ? props.theme.overlayFontColor : props.theme.valueFontColor};
   font-family: ${(props) => props.theme.valueFontFamily};
   font-style: ${(props) => props.theme.valueFontStyle};
   font-size: ${(props) => props.theme.valueFontSize};
   font-weight: ${(props) => props.theme.valueFontWeight};
   text-transform: ${(props) => props.theme.valueFontTextTransform};
-  color: ${(props) => props.overlay === true ? props.theme.overlayFontColor : props.theme.valueFontColor};
-  display: ${(props) => props.value !== void 0 && props.value !== null && props.showValue === true && "block" || "none"};
-  flex-shrink: 0;
 `;
 var HelperText5 = styled58.span`
-  color: ${(props) => props.overlay === true ? props.theme.overlayFontColor : props.theme.helperTextFontColor};
+  color: ${(props) => props.overlay ? props.theme.overlayFontColor : props.theme.helperTextFontColor};
   font-family: ${(props) => props.theme.helperTextFontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};
   font-style: ${(props) => props.theme.helperTextFontStyle};
@@ -10908,25 +10833,23 @@ var HelperText5 = styled58.span`
   line-height: 1.5em;
 `;
 var LinearProgress = styled58.div`
+  position: relative;
+  border-radius: ${(props) => props.theme.borderRadius};
   height: ${(props) => props.theme.thickness};
   background-color: ${(props) => props.theme.totalLineColor};
-  border-radius: ${(props) => props.theme.borderRadius};
-  margin-bottom: ${(props) => props.helperText !== "" && "8px"};
   overflow: hidden;
-  position: relative;
 `;
 var LinearProgressBar = styled58.span`
-  background-color: ${(props) => props.theme.trackLineColor};
-  transform: ${(props) => `translateX(-${props.variant === "determinate" ? 100 - (props.value ?? 0) : 0}%)`};
+  position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
   bottom: 0;
-  position: absolute;
+  left: 0;
+  width: ${(props) => props.variant === "indeterminate" ? "auto" : "100%"};
+  transform: ${(props) => `translateX(-${props.variant === "determinate" ? 100 - (props.value ?? 0) : 0}%)`};
   transition: ${(props) => props.variant === "determinate" ? "transform .4s linear" : "transform 0.2s linear"};
   transform-origin: left;
-  ${(props) => props.variant === "indeterminate" && "width: auto;"};
-  ${(props) => props.variant === "indeterminate" ? props.container === "first" ? "animation: keyframes-indeterminate-first 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;" : "animation: keyframes-indeterminate-second 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;" : ""};
+  background-color: ${(props) => props.theme.trackLineColor};
+  ${(props) => props.variant === "indeterminate" ? "animation: keyframes-indeterminate-first 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;" : ""};
 
   @keyframes keyframes-indeterminate-first {
     0% {
@@ -10958,17 +10881,55 @@ var LinearProgressBar = styled58.span`
     }
   }
 `;
+var DxcProgressBar = ({
+  label,
+  helperText,
+  overlay,
+  value,
+  showValue,
+  margin
+}) => {
+  const colorsTheme = useContext41(HalstackContext);
+  const labelId = `label-${useId14()}`;
+  const [innerValue, setInnerValue] = useState27();
+  useEffect20(() => {
+    if (value != null) setInnerValue(value < 0 ? 0 : value > 100 ? 100 : value);
+  }, [value]);
+  return /* @__PURE__ */ jsx66(ThemeProvider27, { theme: colorsTheme.progressBar, children: /* @__PURE__ */ jsx66(Overlay4, { overlay, children: /* @__PURE__ */ jsxs44(MainContainer4, { overlay, margin, children: [
+    /* @__PURE__ */ jsxs44(Flex_default, { justifyContent: "space-between", gap: "0.5rem", children: [
+      label && /* @__PURE__ */ jsx66(ProgressBarLabel, { id: labelId, overlay, children: label }),
+      innerValue != null && showValue && /* @__PURE__ */ jsxs44(ProgressBarProgress, { overlay, children: [
+        innerValue,
+        " %"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx66(
+      LinearProgress,
+      {
+        role: "progressbar",
+        helperText,
+        "aria-label": "Progress bar",
+        "aria-labelledby": labelId,
+        "aria-valuenow": innerValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /* @__PURE__ */ jsx66(LinearProgressBar, { variant: innerValue == null ? "indeterminate" : "determinate", value: innerValue })
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx66(HelperText5, { overlay, children: helperText })
+  ] }) }) });
+};
 var ProgressBar_default = DxcProgressBar;
 
 // src/quick-nav/QuickNav.tsx
 import { useContext as useContext42 } from "react";
 import slugify from "slugify";
-import styled59, { ThemeProvider as ThemeProvider29 } from "styled-components";
+import styled59, { ThemeProvider as ThemeProvider28 } from "styled-components";
 import { jsx as jsx67, jsxs as jsxs45 } from "react/jsx-runtime";
 var DxcQuickNav = ({ title, links }) => {
   const translatedLabels = useContext42(HalstackLanguageContext);
   const colorsTheme = useContext42(HalstackContext);
-  return /* @__PURE__ */ jsx67(ThemeProvider29, { theme: colorsTheme.quickNav, children: /* @__PURE__ */ jsx67(QuickNavContainer, { children: /* @__PURE__ */ jsxs45(Flex_default, { direction: "column", gap: "0.5rem", children: [
+  return /* @__PURE__ */ jsx67(ThemeProvider28, { theme: colorsTheme.quickNav, children: /* @__PURE__ */ jsx67(QuickNavContainer, { children: /* @__PURE__ */ jsxs45(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__ */ jsxs45(DxcTypography, { children: [
       /* @__PURE__ */ jsx67(Link3, { href: `#${slugify(link.label, { lower: true })}`, children: link.label }),
@@ -11033,12 +10994,12 @@ var Link3 = styled59.a`
 var QuickNav_default = DxcQuickNav;
 
 // src/radio-group/RadioGroup.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback10, useContext as useContext44, useId as useId14, useMemo as useMemo14, useState as useState29 } from "react";
-import styled61, { ThemeProvider as ThemeProvider31 } from "styled-components";
+import { forwardRef as forwardRef13, useCallback as useCallback10, useContext as useContext44, useId as useId16, useMemo as useMemo14, useState as useState29 } from "react";
+import styled61, { ThemeProvider as ThemeProvider30 } from "styled-components";
 
 // src/radio-group/Radio.tsx
-import { memo as memo11, useContext as useContext43, useEffect as useEffect21, useId as useId13, useRef as useRef17, useState as useState28 } from "react";
-import styled60, { ThemeProvider as ThemeProvider30 } from "styled-components";
+import { memo as memo11, useContext as useContext43, useEffect as useEffect21, useId as useId15, useRef as useRef17, useState as useState28 } from "react";
+import styled60, { ThemeProvider as ThemeProvider29 } from "styled-components";
 import { jsx as jsx68, jsxs as jsxs46 } from "react/jsx-runtime";
 var DxcRadio = ({
   label,
@@ -11050,7 +11011,7 @@ var DxcRadio = ({
   readOnly,
   tabIndex
 }) => {
-  const radioLabelId = `radio-${useId13()}`;
+  const radioLabelId = `radio-${useId15()}`;
   const ref = useRef17(null);
   const colorsTheme = useContext43(HalstackContext);
   const handleOnClick = () => {
@@ -11065,7 +11026,7 @@ var DxcRadio = ({
     }
     focused && ref.current?.focus();
   }, [focused]);
-  return /* @__PURE__ */ jsx68(ThemeProvider30, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsx68(Flex_default, { children: /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsx68(ThemeProvider29, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsx68(Flex_default, { children: /* @__PURE__ */ jsxs46(
     RadioContainer,
     {
       error,
@@ -11189,7 +11150,7 @@ var DxcRadioGroup = forwardRef13(
     error,
     tabIndex = 0
   }, ref) => {
-    const radioGroupId = `radio-group-${useId14()}`;
+    const radioGroupId = `radio-group-${useId16()}`;
     const radioGroupLabelId = `label-${radioGroupId}`;
     const errorId = `error-${radioGroupId}`;
     const [innerValue, setInnerValue] = useState29(defaultValue);
@@ -11291,7 +11252,7 @@ var DxcRadioGroup = forwardRef13(
           break;
       }
     };
-    return /* @__PURE__ */ jsx69(ThemeProvider31, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsxs47(RadioGroupContainer, { ref, children: [
+    return /* @__PURE__ */ jsx69(ThemeProvider30, { theme: colorsTheme.radioGroup, children: /* @__PURE__ */ jsxs47(RadioGroupContainer, { ref, children: [
       label && /* @__PURE__ */ jsxs47(Label9, { id: radioGroupLabelId, helperText, disabled, children: [
         label,
         optional && /* @__PURE__ */ jsx69(OptionalLabel4, { children: ` ${translatedLabels.formFields.optionalLabel}` })
@@ -11387,7 +11348,7 @@ var RadioGroup_default = DxcRadioGroup;
 
 // src/resultset-table/ResultsetTable.tsx
 import { useContext as useContext45, useEffect as useEffect22, useMemo as useMemo15, useRef as useRef18, useState as useState30 } from "react";
-import styled62, { ThemeProvider as ThemeProvider32 } from "styled-components";
+import styled62, { ThemeProvider as ThemeProvider31 } from "styled-components";
 
 // src/resultset-table/Icons.tsx
 import { jsx as jsx70, jsxs as jsxs48 } from "react/jsx-runtime";
@@ -11496,7 +11457,7 @@ var DxcResultsetTable = ({
       prevRowCountRef.current = rows.length;
     }
   }, [rows.length]);
-  return /* @__PURE__ */ jsx71(ThemeProvider32, { theme: colorsTheme.table, children: /* @__PURE__ */ jsxs49(DxcResultsetTableContainer, { margin, children: [
+  return /* @__PURE__ */ jsx71(ThemeProvider31, { theme: colorsTheme.table, children: /* @__PURE__ */ jsxs49(DxcResultsetTableContainer, { margin, children: [
     /* @__PURE__ */ jsxs49(Table_default, { mode, children: [
       /* @__PURE__ */ jsx71("thead", { children: /* @__PURE__ */ jsx71("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx71(
         "th",
@@ -11518,196 +11479,70 @@ var DxcResultsetTable = ({
               children: [
                 /* @__PURE__ */ jsx71("span", { children: column.displayValue }),
                 column.isSortable && /* @__PURE__ */ jsx71(SortIcon, { children: sortColumnIndex === index ? sortOrder === "ascending" ? Icons_default2.arrowUp : Icons_default2.arrowDown : Icons_default2.bothArrows })
-              ]
-            }
-          )
-        },
-        `tableHeader_${index}`
-      )) }) }),
-      /* @__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__ */ jsx71(
-      Paginator_default,
-      {
-        totalItems: rows.length,
-        itemsPerPage,
-        itemsPerPageOptions,
-        itemsPerPageFunction,
-        currentPage: page,
-        showGoToPage,
-        onPageChange: goToPage,
-        tabIndex
-      }
-    )
-  ] }) });
-};
-var calculateWidth11 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
-var DxcResultsetTableContainer = styled62.div`
-  width: ${(props) => calculateWidth11(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] : ""};
-  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 HeaderContainer3 = styled62.span`
-  display: flex;
-  align-items: center;
-  justify-content: ${(props) => props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start"};
-  gap: ${coreTokens_default.spacing_8};
-  width: fit-content;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  cursor: ${(props) => props.isSortable ? "pointer" : "default"};
-
-  ${(props) => props.isSortable && `&:focus {
-      outline: #0095ff solid 2px;
-    }`}
-`;
-var SortIcon = styled62.span`
-  display: flex;
-  height: 14px;
-  width: 14px;
-  color: ${(props) => props.theme.sortIconColor};
-
-  svg {
-    height: 100%;
-    width: 100%;
-  }
-`;
-DxcResultsetTable.ActionsCell = DxcActionsCell;
-var ResultsetTable_default = DxcResultsetTable;
-
-// src/slider/Slider.tsx
-import { forwardRef as forwardRef14, useContext as useContext46, useId as useId15, useMemo as useMemo16, useState as useState31 } from "react";
-import styled63, { ThemeProvider as ThemeProvider33 } from "styled-components";
-import { jsx as jsx72, jsxs as jsxs50 } from "react/jsx-runtime";
-var DxcSlider = forwardRef14(
-  ({
-    label = "",
-    name = "",
-    defaultValue,
-    value,
-    helperText = "",
-    minValue = 0,
-    maxValue = 100,
-    step = 1,
-    showLimitsValues = false,
-    showInput = false,
-    disabled = false,
-    marks = false,
-    onChange,
-    onDragEnd,
-    labelFormatCallback,
-    margin,
-    size = "fillParent"
-  }, ref) => {
-    const labelId = `label-${useId15()}`;
-    const [innerValue, setInnerValue] = useState31(defaultValue ?? 0);
-    const [dragging, setDragging] = useState31(false);
-    const colorsTheme = useContext46(HalstackContext);
-    const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
-    const minLabel = useMemo16(
-      () => labelFormatCallback ? labelFormatCallback(minValue) : minValue,
-      [labelFormatCallback, minValue]
-    );
-    const maxLabel = useMemo16(
-      () => labelFormatCallback ? labelFormatCallback(maxValue) : maxValue,
-      [labelFormatCallback, maxValue]
-    );
-    const tickMarks = useMemo16(() => {
-      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__ */ jsx72(
-              TickMark,
-              {
-                disabled,
-                stepPosition: step * index / range,
-                stepValue: (value ?? innerValue) / maxValue
-              },
-              `tickmark-${index}-${labelId}`
-            )
-          );
-        }
-        return ticks;
-      }
-      return null;
-    }, [minValue, maxValue, step, value, innerValue]);
-    const handleSliderChange = (event) => {
-      const intValue = parseInt(event.target.value, 10);
-      if (intValue !== value || intValue !== innerValue) {
-        setInnerValue(intValue);
-      }
-      onChange?.(intValue);
-    };
-    const handleSliderDragging = () => {
-      setDragging(true);
-    };
-    const handleSliderOnChangeCommitted = (event) => {
-      const intValue = parseInt(event.target.value, 10);
-      if (dragging) {
-        setDragging(false);
-        onDragEnd?.(intValue);
-      }
-    };
-    const handlerInputChange = (event) => {
-      const intValue = parseInt(event.value, 10);
-      if (value == null) {
-        if (!Number.isNaN(intValue)) {
-          setInnerValue(intValue > maxValue ? maxValue : intValue);
-        }
-      }
-      if (!Number.isNaN(intValue)) {
-        onChange?.(intValue > maxValue ? maxValue : intValue);
-      }
-    };
-    return /* @__PURE__ */ jsx72(ThemeProvider33, { theme: colorsTheme.slider, children: /* @__PURE__ */ jsxs50(Container3, { margin, size, ref, children: [
-      /* @__PURE__ */ jsx72(Label10, { id: labelId, disabled, children: label }),
-      /* @__PURE__ */ jsx72(HelperText7, { disabled, children: helperText }),
-      /* @__PURE__ */ jsxs50(SliderContainer, { children: [
-        showLimitsValues && /* @__PURE__ */ jsx72(MinLabelContainer, { disabled, children: minLabel }),
-        /* @__PURE__ */ jsxs50(SliderInputContainer, { children: [
-          /* @__PURE__ */ jsx72(
-            SliderInput,
-            {
-              role: "slider",
-              type: "range",
-              value: value != null && value >= 0 ? value : innerValue,
-              min: minValue,
-              max: maxValue,
-              step,
-              disabled,
-              "aria-labelledby": labelId,
-              "aria-orientation": "horizontal",
-              "aria-valuemax": maxValue,
-              "aria-valuemin": minValue,
-              "aria-valuenow": value != null && value >= 0 ? value : innerValue,
-              onChange: handleSliderChange,
-              onMouseUp: handleSliderOnChangeCommitted,
-              onMouseDown: handleSliderDragging
-            }
-          ),
-          marks && /* @__PURE__ */ jsx72(MarksContainer, { isFirefox, children: tickMarks })
-        ] }),
-        showLimitsValues && /* @__PURE__ */ jsx72(MaxLabelContainer, { disabled, step, children: maxLabel }),
-        showInput && /* @__PURE__ */ jsx72(StyledTextInput, { children: /* @__PURE__ */ jsx72(
-          TextInput_default,
-          {
-            name,
-            value: value != null && value >= 0 ? value.toString() : innerValue.toString(),
-            disabled,
-            onChange: handlerInputChange,
-            size: "fillParent"
-          }
-        ) })
-      ] })
-    ] }) });
+              ]
+            }
+          )
+        },
+        `tableHeader_${index}`
+      )) }) }),
+      /* @__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__ */ jsx71(
+      Paginator_default,
+      {
+        totalItems: rows.length,
+        itemsPerPage,
+        itemsPerPageOptions,
+        itemsPerPageFunction,
+        currentPage: page,
+        showGoToPage,
+        onPageChange: goToPage,
+        tabIndex
+      }
+    )
+  ] }) });
+};
+var calculateWidth11 = (margin) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
+var DxcResultsetTableContainer = styled62.div`
+  width: ${(props) => calculateWidth11(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] : ""};
+  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 HeaderContainer3 = styled62.span`
+  display: flex;
+  align-items: center;
+  justify-content: ${(props) => props.theme.headerTextAlign === "center" ? "center" : props.theme.headerTextAlign === "right" ? "flex-end" : "flex-start"};
+  gap: ${coreTokens_default.spacing_8};
+  width: fit-content;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: ${(props) => props.isSortable ? "pointer" : "default"};
+
+  ${(props) => props.isSortable && `&:focus {
+      outline: #0095ff solid 2px;
+    }`}
+`;
+var SortIcon = styled62.span`
+  display: flex;
+  height: 14px;
+  width: 14px;
+  color: ${(props) => props.theme.sortIconColor};
+
+  svg {
+    height: 100%;
+    width: 100%;
   }
-);
+`;
+DxcResultsetTable.ActionsCell = DxcActionsCell;
+var ResultsetTable_default = DxcResultsetTable;
+
+// src/slider/Slider.tsx
+import { forwardRef as forwardRef14, useContext as useContext46, useId as useId17, useMemo as useMemo16, useState as useState31 } from "react";
+import styled63, { ThemeProvider as ThemeProvider32 } from "styled-components";
+import { jsx as jsx72, jsxs as jsxs50 } from "react/jsx-runtime";
 var sizes6 = {
   medium: "360px",
   large: "480px",
@@ -11717,7 +11552,7 @@ var calculateWidth12 = (margin, size) => size === "fillParent" ? `calc(${sizes6[
 var getChromeStyles = () => `
   width: 100%;
   margin-right: 4px;`;
-var getFireFoxStyles = () => `
+var getFirefoxStyles = () => `
   width: calc(100% - 16px);
   margin-right: 3px;`;
 var Container3 = styled63.div`
@@ -11831,7 +11666,6 @@ var SliderContainer = styled63.div`
 `;
 var LimitLabelContainer = styled63.span`
   color: ${(props) => props.disabled ? props.theme.disabledLimitValuesFontColor : props.theme.limitValuesFontColor};
-
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.limitValuesFontSize};
   font-style: ${(props) => props.theme.limitValuesFontStyle};
@@ -11857,7 +11691,7 @@ var SliderInputContainer = styled63.div`
   z-index: 0;
 `;
 var MarksContainer = styled63.div`
-  ${(props) => props.isFirefox ? getFireFoxStyles() : getChromeStyles()}
+  ${(props) => props.isFirefox ? getFirefoxStyles() : getChromeStyles()}
   position: absolute;
   pointer-events: none;
   height: 100%;
@@ -11873,21 +11707,143 @@ var TickMark = styled63.span`
   left: ${(props) => `calc(${props.stepPosition} * 100%)`};
   z-index: ${(props) => props.stepValue != null && `${props.stepPosition <= props.stepValue ? "-1" : "0"}`};
 `;
-var StyledTextInput = styled63.div`
+var TextInputContainer2 = styled63.div`
   margin-left: ${(props) => props.theme.inputMarginLeft};
   max-width: 70px;
 `;
+var DxcSlider = forwardRef14(
+  ({
+    label = "",
+    name = "",
+    defaultValue,
+    value,
+    helperText = "",
+    minValue = 0,
+    maxValue = 100,
+    step = 1,
+    showLimitsValues = false,
+    showInput = false,
+    disabled = false,
+    marks = false,
+    onChange,
+    onDragEnd,
+    labelFormatCallback,
+    margin,
+    size = "fillParent"
+  }, ref) => {
+    const labelId = `label-${useId17()}`;
+    const [innerValue, setInnerValue] = useState31(defaultValue ?? 0);
+    const [dragging, setDragging] = useState31(false);
+    const colorsTheme = useContext46(HalstackContext);
+    const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
+    const minLabel = useMemo16(
+      () => labelFormatCallback ? labelFormatCallback(minValue) : minValue,
+      [labelFormatCallback, minValue]
+    );
+    const maxLabel = useMemo16(
+      () => labelFormatCallback ? labelFormatCallback(maxValue) : maxValue,
+      [labelFormatCallback, maxValue]
+    );
+    const tickMarks = useMemo16(() => {
+      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__ */ jsx72(
+              TickMark,
+              {
+                disabled,
+                stepPosition: step * index / range,
+                stepValue: (value ?? innerValue) / maxValue
+              },
+              `tickmark-${index}`
+            )
+          );
+        }
+        return ticks;
+      }
+      return null;
+    }, [minValue, maxValue, step, value, innerValue]);
+    const handleSliderChange = (event) => {
+      const intValue = parseInt(event.target.value, 10);
+      if (intValue !== value || intValue !== innerValue) {
+        setInnerValue(intValue);
+      }
+      onChange?.(intValue);
+    };
+    const handleSliderDragging = () => {
+      setDragging(true);
+    };
+    const handleSliderOnChangeCommitted = (event) => {
+      const intValue = parseInt(event.target.value, 10);
+      if (dragging) {
+        setDragging(false);
+        onDragEnd?.(intValue);
+      }
+    };
+    const handlerInputChange = (event) => {
+      const intValue = parseInt(event.value, 10);
+      if (!Number.isNaN(intValue)) {
+        if (value == null) setInnerValue(intValue > maxValue ? maxValue : intValue);
+        onChange?.(intValue > maxValue ? maxValue : intValue);
+      }
+    };
+    return /* @__PURE__ */ jsx72(ThemeProvider32, { theme: colorsTheme.slider, children: /* @__PURE__ */ jsxs50(Container3, { margin, size, ref, children: [
+      /* @__PURE__ */ jsx72(Label10, { id: labelId, disabled, children: label }),
+      /* @__PURE__ */ jsx72(HelperText7, { disabled, children: helperText }),
+      /* @__PURE__ */ jsxs50(SliderContainer, { children: [
+        showLimitsValues && /* @__PURE__ */ jsx72(MinLabelContainer, { disabled, children: minLabel }),
+        /* @__PURE__ */ jsxs50(SliderInputContainer, { children: [
+          /* @__PURE__ */ jsx72(
+            SliderInput,
+            {
+              role: "slider",
+              type: "range",
+              value: value != null && value >= 0 ? value : innerValue,
+              min: minValue,
+              max: maxValue,
+              step,
+              disabled,
+              "aria-labelledby": labelId,
+              "aria-orientation": "horizontal",
+              "aria-valuemax": maxValue,
+              "aria-valuemin": minValue,
+              "aria-valuenow": value != null && value >= 0 ? value : innerValue,
+              onChange: handleSliderChange,
+              onMouseUp: handleSliderOnChangeCommitted,
+              onMouseDown: handleSliderDragging
+            }
+          ),
+          marks && /* @__PURE__ */ jsx72(MarksContainer, { isFirefox, children: tickMarks })
+        ] }),
+        showLimitsValues && /* @__PURE__ */ jsx72(MaxLabelContainer, { disabled, step, children: maxLabel }),
+        showInput && /* @__PURE__ */ jsx72(TextInputContainer2, { children: /* @__PURE__ */ jsx72(
+          TextInput_default,
+          {
+            name,
+            value: value != null && value >= 0 ? value.toString() : innerValue.toString(),
+            disabled,
+            onChange: handlerInputChange,
+            size: "fillParent"
+          }
+        ) })
+      ] })
+    ] }) });
+  }
+);
 var Slider_default = DxcSlider;
 
 // src/spinner/Spinner.tsx
-import { useContext as useContext47, useId as useId16, useMemo as useMemo17 } from "react";
-import styled64, { ThemeProvider as ThemeProvider34 } from "styled-components";
+import { useContext as useContext47, useId as useId18, useMemo as useMemo17 } from "react";
+import styled64, { ThemeProvider as ThemeProvider33 } from "styled-components";
 import { jsx as jsx73, jsxs as jsxs51 } from "react/jsx-runtime";
 var DxcSpinner = ({ label, value, showValue = false, mode = "large", margin }) => {
-  const labelId = useId16();
+  const labelId = useId18();
   const colorsTheme = useContext47(HalstackContext);
   const determinated = useMemo17(() => value != null && value >= 0 && value <= 100, [value]);
-  return /* @__PURE__ */ jsx73(ThemeProvider34, { theme: colorsTheme.spinner, children: /* @__PURE__ */ jsx73(DXCSpinner, { margin, mode, children: /* @__PURE__ */ jsxs51(SpinnerContainer, { mode, children: [
+  return /* @__PURE__ */ jsx73(ThemeProvider33, { theme: colorsTheme.spinner, children: /* @__PURE__ */ jsx73(DXCSpinner, { margin, mode, children: /* @__PURE__ */ jsxs51(SpinnerContainer, { mode, children: [
     mode === "overlay" && /* @__PURE__ */ jsx73(BackOverlay, {}),
     /* @__PURE__ */ jsx73(BackgroundSpinner, { children: mode === "small" ? /* @__PURE__ */ jsx73(SVGBackground, { viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx73(CircleBackground, { cx: "8", cy: "8", r: "6", mode }) }) : /* @__PURE__ */ jsx73(SVGBackground, { viewBox: "0 0 140 140", children: /* @__PURE__ */ jsx73(CircleBackground, { cx: "70", cy: "70", r: "65", mode }) }) }),
     /* @__PURE__ */ jsx73(
@@ -12112,12 +12068,12 @@ var StatusLabel = styled65.span`
 var StatusLight_default = DxcStatusLight;
 
 // src/switch/Switch.tsx
-import { forwardRef as forwardRef15, useContext as useContext48, useId as useId17, useRef as useRef19, useState as useState32 } from "react";
-import styled66, { ThemeProvider as ThemeProvider35 } from "styled-components";
+import { forwardRef as forwardRef15, useContext as useContext48, 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 jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
 var DxcSwitch = forwardRef15(
   ({
-    defaultChecked,
+    defaultChecked = false,
     checked,
     value,
     label = "",
@@ -12130,9 +12086,9 @@ var DxcSwitch = forwardRef15(
     size = "fitContent",
     tabIndex = 0
   }, ref) => {
-    const switchId = `switch-${useId17()}`;
+    const switchId = `switch-${useId19()}`;
     const labelId = `label-${switchId}`;
-    const [innerChecked, setInnerChecked] = useState32(defaultChecked ?? false);
+    const [innerChecked, setInnerChecked] = useState32(defaultChecked);
     const colorsTheme = useContext48(HalstackContext);
     const translatedLabels = useContext48(HalstackLanguageContext);
     const refTrack = useRef19(null);
@@ -12155,7 +12111,7 @@ var DxcSwitch = forwardRef15(
       }
       onChange?.(checked ? !checked : !innerChecked);
     };
-    return /* @__PURE__ */ jsx75(ThemeProvider35, { theme: colorsTheme.switch, children: /* @__PURE__ */ jsxs53(
+    return /* @__PURE__ */ jsx75(ThemeProvider34, { theme: colorsTheme.switch, children: /* @__PURE__ */ jsxs53(
       SwitchContainer,
       {
         margin,
@@ -12362,11 +12318,11 @@ import {
   useRef as useRef22,
   useState as useState34
 } from "react";
-import styled70, { ThemeProvider as ThemeProvider37 } from "styled-components";
+import styled70, { ThemeProvider as ThemeProvider36 } from "styled-components";
 
 // src/tabs/TabsContext.tsx
-import { createContext as createContext10 } from "react";
-var TabsContext_default = createContext10(null);
+import { createContext as createContext9 } from "react";
+var TabsContext_default = createContext9(null);
 
 // src/tabs/Tab.tsx
 import { forwardRef as forwardRef16, useContext as useContext49, useEffect as useEffect23, useRef as useRef20 } from "react";
@@ -12583,7 +12539,7 @@ var Tab_default2 = DxcTab2;
 
 // src/tabs/TabsLegacy.tsx
 import { useCallback as useCallback11, useContext as useContext50, useEffect as useEffect24, useMemo as useMemo18, useRef as useRef21, useState as useState33 } from "react";
-import styled69, { ThemeProvider as ThemeProvider36 } from "styled-components";
+import styled69, { ThemeProvider as ThemeProvider35 } from "styled-components";
 
 // src/tabs/TabLegacy.tsx
 import { forwardRef as forwardRef17, memo as memo12 } from "react";
@@ -12933,7 +12889,7 @@ 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__ */ jsx78(ThemeProvider36, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs56(TabsContainer, { margin, children: [
+  return /* @__PURE__ */ jsx78(ThemeProvider35, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs56(TabsContainer, { margin, children: [
     /* @__PURE__ */ jsx78(Underline2, {}),
     /* @__PURE__ */ jsxs56(Tabs, { hasLabelAndIcon, iconPosition, children: [
       /* @__PURE__ */ jsx78(
@@ -13247,7 +13203,7 @@ var DxcTabs2 = ({
     }
   };
   return children ? /* @__PURE__ */ jsxs57(Fragment14, { children: [
-    /* @__PURE__ */ jsx79(ThemeProvider37, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs57(TabsContainer2, { margin, children: [
+    /* @__PURE__ */ jsx79(ThemeProvider36, { theme: colorsTheme.tabs, children: /* @__PURE__ */ jsxs57(TabsContainer2, { margin, children: [
       /* @__PURE__ */ jsx79(Underline3, {}),
       /* @__PURE__ */ jsxs57(Tabs2, { hasLabelAndIcon, iconPosition, children: [
         /* @__PURE__ */ jsx79(
@@ -13415,7 +13371,7 @@ var Tabs_default = DxcTabs2;
 
 // src/tag/Tag.tsx
 import { useContext as useContext52, useState as useState35 } from "react";
-import styled71, { ThemeProvider as ThemeProvider38 } from "styled-components";
+import styled71, { ThemeProvider as ThemeProvider37 } from "styled-components";
 import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs58 } from "react/jsx-runtime";
 var TagWrapper = ({ condition, wrapper, children }) => /* @__PURE__ */ jsx80(Fragment15, { children: condition ? wrapper(children) : children });
 var DxcTag = ({
@@ -13432,7 +13388,7 @@ var DxcTag = ({
 }) => {
   const colorsTheme = useContext52(HalstackContext);
   const [isHovered, changeIsHovered] = useState35(false);
-  return /* @__PURE__ */ jsx80(ThemeProvider38, { theme: colorsTheme.tag, children: /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx80(ThemeProvider37, { theme: colorsTheme.tag, children: /* @__PURE__ */ jsx80(
     StyledDxcTag,
     {
       margin,
@@ -13542,8 +13498,8 @@ var TagLabel = styled71.div`
 var Tag_default = DxcTag;
 
 // src/textarea/Textarea.tsx
-import { forwardRef as forwardRef18, useContext as useContext53, useEffect as useEffect26, useId as useId18, useRef as useRef23, useState as useState36 } from "react";
-import styled72, { ThemeProvider as ThemeProvider39 } from "styled-components";
+import { forwardRef as forwardRef18, useContext as useContext53, 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 jsx81, jsxs as jsxs59 } from "react/jsx-runtime";
 var patternMatch = (pattern, value) => new RegExp(pattern).test(value);
 var DxcTextarea = forwardRef18(
@@ -13568,10 +13524,11 @@ var DxcTextarea = forwardRef18(
     autocomplete = "off",
     margin,
     size = "medium",
-    tabIndex = 0
+    tabIndex = 0,
+    ariaLabel = "Text area"
   }, ref) => {
     const [innerValue, setInnerValue] = useState36(defaultValue);
-    const textareaId = `textarea-${useId18()}`;
+    const textareaId = `textarea-${useId20()}`;
     const colorsTheme = useContext53(HalstackContext);
     const translatedLabels = useContext53(HalstackLanguageContext);
     const textareaRef = useRef23(null);
@@ -13636,7 +13593,7 @@ var DxcTextarea = forwardRef18(
         prevValueRef.current = value ?? innerValue;
       }
     }, [verticalGrow, value, innerValue, rows]);
-    return /* @__PURE__ */ jsx81(ThemeProvider39, { theme: colorsTheme.textarea, children: /* @__PURE__ */ jsxs59(TextareaContainer, { margin, size, ref, children: [
+    return /* @__PURE__ */ jsx81(ThemeProvider38, { theme: colorsTheme.textarea, children: /* @__PURE__ */ jsxs59(TextareaContainer, { margin, size, ref, children: [
       label && /* @__PURE__ */ jsxs59(Label12, { htmlFor: textareaId, disabled, helperText, children: [
         label,
         " ",
@@ -13664,7 +13621,8 @@ var DxcTextarea = forwardRef18(
           tabIndex,
           "aria-invalid": !!error,
           "aria-errormessage": error ? errorId : void 0,
-          "aria-required": !disabled && !optional
+          "aria-required": !disabled && !optional,
+          "aria-label": label ? void 0 : ariaLabel
         }
       ),
       !disabled && typeof error === "string" && /* @__PURE__ */ jsx81(ErrorMessageContainer3, { id: errorId, role: "alert", "aria-live": error ? "assertive" : "off", children: error })
@@ -13729,7 +13687,7 @@ var Textarea = styled72.textarea`
   if (props.disabled) return props.theme.disabledBorderColor;
   else if (props.error) return "transparent";
   else if (props.readOnly) return props.theme.readOnlyBorderColor;
-  else props.theme.enabledBorderColor;
+  else return props.theme.enabledBorderColor;
 }};
 
   ${(props) => props.error && !props.disabled && `box-shadow: 0 0 0 2px ${props.theme.errorBorderColor};
@@ -13966,8 +13924,8 @@ var DxcToast = ({
 var Toast_default = memo13(DxcToast);
 
 // src/toast/ToastContext.tsx
-import { createContext as createContext11 } from "react";
-var ToastContext_default = createContext11(null);
+import { createContext as createContext10 } from "react";
+var ToastContext_default = createContext10(null);
 
 // src/toast/ToastsQueue.tsx
 import { jsx as jsx83, jsxs as jsxs61 } from "react/jsx-runtime";
@@ -14036,8 +13994,8 @@ var DxcToastsQueue = ({ children, duration = 3e3 }) => {
 var ToastsQueue_default = DxcToastsQueue;
 
 // src/toggle-group/ToggleGroup.tsx
-import { useContext as useContext55, useId as useId19, useState as useState39 } from "react";
-import styled75, { ThemeProvider as ThemeProvider40 } from "styled-components";
+import { useContext as useContext55, useId as useId21, useState as useState39 } from "react";
+import styled75, { ThemeProvider as ThemeProvider39 } from "styled-components";
 import { jsx as jsx84, jsxs as jsxs62 } from "react/jsx-runtime";
 var DxcToggleGroup = ({
   label,
@@ -14051,7 +14009,7 @@ var DxcToggleGroup = ({
   multiple = false,
   tabIndex = 0
 }) => {
-  const toggleGroupLabelId = `label-toggle-group-${useId19()}`;
+  const toggleGroupLabelId = `label-toggle-group-${useId21()}`;
   const [selectedValue, setSelectedValue] = useState39(defaultValue ?? (multiple ? [] : -1));
   const colorsTheme = useContext55(HalstackContext);
   const handleToggleChange = (selectedOption) => {
@@ -14091,7 +14049,7 @@ var DxcToggleGroup = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx84(ThemeProvider40, { theme: colorsTheme.toggleGroup, children: /* @__PURE__ */ jsxs62(ToggleGroup, { margin, children: [
+  return /* @__PURE__ */ jsx84(ThemeProvider39, { theme: colorsTheme.toggleGroup, children: /* @__PURE__ */ jsxs62(ToggleGroup, { margin, children: [
     /* @__PURE__ */ jsx84(Label13, { id: toggleGroupLabelId, disabled, children: label }),
     /* @__PURE__ */ jsx84(HelperText9, { disabled, children: helperText }),
     /* @__PURE__ */ jsx84(OptionsContainer, { "aria-labelledby": toggleGroupLabelId, children: options.map((option, i) => /* @__PURE__ */ jsx84(Tooltip, { label: option.title, children: /* @__PURE__ */ jsx84(
@@ -14205,11 +14163,13 @@ var IconContainer7 = styled75.div`
 var ToggleGroup_default = DxcToggleGroup;
 
 // src/wizard/Wizard.tsx
-import { useContext as useContext56, useState as useState40 } from "react";
-import styled76, { ThemeProvider as ThemeProvider41 } from "styled-components";
+import { useContext as useContext56, useMemo as useMemo21, useState as useState40 } from "react";
+import styled76, { ThemeProvider as ThemeProvider40 } from "styled-components";
+
+// src/wizard/Icons.tsx
 import { jsx as jsx85, jsxs as jsxs63 } from "react/jsx-runtime";
 var icons2 = {
-  validIcon: /* @__PURE__ */ jsxs63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
+  valid: /* @__PURE__ */ jsxs63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
     /* @__PURE__ */ jsx85("path", { "data-name": "Path 2946", d: "M0,0H18V18H0Z", fill: "none" }),
     /* @__PURE__ */ jsx85(
       "path",
@@ -14231,7 +14191,7 @@ var icons2 = {
       }
     )
   ] }),
-  invalidIcon: /* @__PURE__ */ jsxs63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
+  invalid: /* @__PURE__ */ jsxs63("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: [
     /* @__PURE__ */ jsx85("path", { "data-name": "Path 2943", d: "M0,0H18V18H0Z", fill: "none" }),
     /* @__PURE__ */ jsx85(
       "path",
@@ -14253,50 +14213,10 @@ var icons2 = {
     )
   ] })
 };
-var DxcWizard = ({
-  mode = "horizontal",
-  defaultCurrentStep,
-  currentStep,
-  onStepClick,
-  steps,
-  margin,
-  tabIndex = 0
-}) => {
-  const [innerCurrent, setInnerCurrentStep] = useState40(currentStep ?? defaultCurrentStep ?? 0);
-  const renderedCurrent = currentStep ?? innerCurrent;
-  const colorsTheme = useContext56(HalstackContext);
-  const handleStepClick = (newValue) => {
-    setInnerCurrentStep(newValue);
-    onStepClick?.(newValue);
-  };
-  return /* @__PURE__ */ jsx85(ThemeProvider41, { 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: () => {
-          handleStepClick(i);
-        },
-        disabled: step.disabled,
-        mode,
-        first: i === 0,
-        last: i === steps.length - 1,
-        "aria-current": renderedCurrent === i ? "step" : "false",
-        tabIndex,
-        children: [
-          /* @__PURE__ */ jsxs63(StepHeader, { validityIcon: step.valid !== void 0, 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 !== void 0 && (step.valid ? /* @__PURE__ */ jsx85(ValidityIconContainer, { children: icons2.validIcon }) : /* @__PURE__ */ jsx85(ValidityIconContainer, { children: icons2.invalidIcon }))
-          ] }),
-          (step.label || step.description) && /* @__PURE__ */ jsxs63(InfoContainer, { 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 })
-          ] })
-        ]
-      }
-    ),
-    i === steps.length - 1 ? "" : /* @__PURE__ */ jsx85(StepSeparator, { mode })
-  ] }, `step${i}`)) }) });
-};
+var Icons_default3 = icons2;
+
+// src/wizard/Wizard.tsx
+import { jsx as jsx86, jsxs as jsxs64 } from "react/jsx-runtime";
 var StepsContainer = styled76.div`
   display: flex;
   flex-direction: ${(props) => props.mode === "vertical" ? "column" : "row"};
@@ -14320,6 +14240,7 @@ var Step = styled76.button`
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  gap: 0.75rem;
   border: none;
   border-radius: 0.25rem;
   background: inherit;
@@ -14378,9 +14299,6 @@ var ValidityIconContainer = styled76.div`
   top: 22.5px;
   left: 22.5px;
 `;
-var InfoContainer = styled76.div`
-  margin-left: 12px;
-`;
 var Label14 = styled76.p`
   text-align: ${(props) => props.theme.labelTextAlign};
   font-family: ${(props) => props.theme.labelFontFamily};
@@ -14410,13 +14328,57 @@ var StepSeparator = styled76.div`
   opacity: 1;
   flex-grow: 1;
 `;
+var DxcWizard = ({
+  mode = "horizontal",
+  defaultCurrentStep = 0,
+  currentStep,
+  onStepClick,
+  steps,
+  margin,
+  tabIndex = 0
+}) => {
+  const colorsTheme = useContext56(HalstackContext);
+  const [innerCurrent, setInnerCurrentStep] = useState40(defaultCurrentStep);
+  const renderedCurrent = useMemo21(() => currentStep ?? innerCurrent, [currentStep, innerCurrent]);
+  const handleStepClick = (newValue) => {
+    setInnerCurrentStep(newValue);
+    onStepClick?.(newValue);
+  };
+  return /* @__PURE__ */ jsx86(ThemeProvider40, { theme: colorsTheme.wizard, children: /* @__PURE__ */ jsx86(StepsContainer, { mode, margin, role: "group", children: steps.map((step, i) => /* @__PURE__ */ jsxs64(StepContainer, { mode, lastStep: i === steps.length - 1, children: [
+    /* @__PURE__ */ jsxs64(
+      Step,
+      {
+        onClick: () => {
+          handleStepClick(i);
+        },
+        disabled: step.disabled,
+        mode,
+        first: i === 0,
+        last: i === steps.length - 1,
+        "aria-current": renderedCurrent === i ? "step" : "false",
+        tabIndex,
+        children: [
+          /* @__PURE__ */ jsxs64(StepHeader, { validityIcon: step.valid != null, children: [
+            /* @__PURE__ */ jsx86(IconContainer8, { current: i === renderedCurrent, visited: i < renderedCurrent, disabled: step.disabled, children: step.icon ? typeof step.icon === "string" ? /* @__PURE__ */ jsx86(Icon_default, { icon: step.icon }) : step.icon : /* @__PURE__ */ jsx86(Number3, { children: i + 1 }) }),
+            step.valid != null && /* @__PURE__ */ jsx86(ValidityIconContainer, { children: step.valid ? Icons_default3.valid : Icons_default3.invalid })
+          ] }),
+          (step.label || step.description) && /* @__PURE__ */ jsxs64("div", { children: [
+            step.label && /* @__PURE__ */ jsx86(Label14, { current: i === renderedCurrent, disabled: step.disabled, visited: i <= innerCurrent, children: step.label }),
+            step.description && /* @__PURE__ */ jsx86(Description, { current: i === renderedCurrent, disabled: step.disabled, visited: i <= innerCurrent, children: step.description })
+          ] })
+        ]
+      }
+    ),
+    i === steps.length - 1 ? "" : /* @__PURE__ */ jsx86(StepSeparator, { mode })
+  ] }, `step${i}`)) }) });
+};
 var Wizard_default = DxcWizard;
 
 // src/toast/useToast.tsx
-import { useContext as useContext57, useMemo as useMemo21 } from "react";
+import { useContext as useContext57, useMemo as useMemo22 } from "react";
 var useToast = () => {
   const add = useContext57(ToastContext_default);
-  const toast = useMemo21(
+  const toast = useMemo22(
     () => ({
       default: (toast2) => add?.(toast2, "default"),
       success: (toast2) => add?.(toast2, "success"),