kiban-design-system 1.1.4-hotfix.0 → 1.1.6-hotfix.0

package/dist/index.js

@@ -926,12 +926,12 @@ const ActionList = ({ header, items, sections }) => {
                                     ]
                                         .filter(Boolean)
                                         .join(' ');
-                                    return (jsxs("li", Object.assign({ className: classesItem, onClick: () => item.onClick && item.onClick() }, { children: [item.icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: item.icon }, void 0) }), void 0)), item.content] }), j));
+                                    return (jsxs("li", Object.assign({ "aria-label": item.ariaLabel, className: classesItem, onClick: () => item.onClick && item.onClick() }, { children: [item.icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: item.icon }, void 0) }), void 0)), item.content] }), j));
                                 }) }), void 0)] }), i));
-                })), items && !sections && (jsx("ul", Object.assign({ className: 'Action-list__items-container' }, { children: items === null || items === void 0 ? void 0 : items.map((item, j) => (jsxs("li", Object.assign({ className: `Action-list__item ${item.isActive && 'Action-list__item-active'}`, onClick: () => item.onClick && item.onClick() }, { children: [item.icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: item.icon }, void 0) }), void 0)), item.content] }), j))) }), void 0))] }), void 0));
+                })), items && !sections && (jsx("ul", Object.assign({ className: 'Action-list__items-container' }, { children: items === null || items === void 0 ? void 0 : items.map((item, j) => (jsxs("li", Object.assign({ "aria-label": item.ariaLabel, className: `Action-list__item ${item.isActive && 'Action-list__item-active'}`, onClick: () => item.onClick && item.onClick() }, { children: [item.icon && (jsx("span", Object.assign({ className: 'Action-list__item-icon' }, { children: jsx(Icon, { name: item.icon }, void 0) }), void 0)), item.content] }), j))) }), void 0))] }), void 0));
 };
 
-const MAIN_CLASS$s = 'Alert';
+const MAIN_CLASS$t = 'Alert';
 /**
  * Alert
  *
@@ -946,12 +946,12 @@ const MAIN_CLASS$s = 'Alert';
  */
 const Alert = ({ icon, appearance = 'info', content, onDismiss, id, }) => {
     const className = [
-        MAIN_CLASS$s,
-        appearance && `${MAIN_CLASS$s}--${appearance}`,
+        MAIN_CLASS$t,
+        appearance && `${MAIN_CLASS$t}--${appearance}`,
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxs("div", Object.assign({ className: className }, { children: [jsxs("div", Object.assign({ className: `${MAIN_CLASS$s}__content` }, { children: [icon && (jsx("div", Object.assign({ className: `${MAIN_CLASS$s}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), jsx("span", { children: content }, void 0)] }), void 0), onDismiss ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$s}__close`, onClick: () => onDismiss(id) }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) : null] }), void 0));
+    return (jsxs("div", Object.assign({ className: className }, { children: [jsxs("div", Object.assign({ className: `${MAIN_CLASS$t}__content` }, { children: [icon && (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), jsx("span", { children: content }, void 0)] }), void 0), onDismiss ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__close`, onClick: () => onDismiss(id) }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) : null] }), void 0));
 };
 
 const AlertContext = createContext({
@@ -1155,7 +1155,7 @@ const AlphaSpinner = ({ icon, size }) => {
 };
 
 const COMPONENT_NAME$w = 'AlphaButton';
-const AlphaButton = ({ children, icon, spinnerIcon, iconPosition = 'left', id, isDanger, isDisabled, isFullWidth, isLink, isLoading, isPrimary, isSubmit, isTertiary, size = 'medium', textAlign = 'center', isRounded, theme: themeProp, onClick, onFocus, onBlur, onKeyPress, onKeyUp, onKeyDown, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, }) => {
+const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'left', id, isDanger, isDisabled, isFullWidth, isLink, isLoading, isPrimary, isSubmit, isTertiary, size = 'medium', textAlign = 'center', isRounded, theme: themeProp, onClick, onFocus, onBlur, onKeyPress, onKeyUp, onKeyDown, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, }) => {
     const { theme } = useTheme();
     const THEME_CLASS = `${theme}`;
     const isIconOnly = !children && icon;
@@ -1164,6 +1164,7 @@ const AlphaButton = ({ children, icon, spinnerIcon, iconPosition = 'left', id, i
         id,
         type: isSubmit ? 'submit' : 'button',
         disabled: isDisabled,
+        'aria-label': ariaLabel,
         onClick,
         onFocus,
         onBlur,
@@ -1209,7 +1210,7 @@ const AlphaChip = ({ children, hasError, removeButtonIcon, isDisabled, theme, on
     return (jsxs("div", Object.assign({ className: className }, { children: [childrenMarkup, closeButtonMarkup] }), void 0));
 };
 
-const MAIN_CLASS$r = 'column';
+const MAIN_CLASS$s = 'column';
 /** Grid.Item is used for set size of element in the Grid
  * @example
  * <Grid>
@@ -1227,7 +1228,7 @@ const MAIN_CLASS$r = 'column';
  */
 const GridItem = ({ children, size, sizeFullHD, sizeWidescreen, sizeDesktop, sizeTablet, sizeMobile, }) => {
     const className = [
-        MAIN_CLASS$r,
+        MAIN_CLASS$s,
         size && typeof size === 'string' && `${size}`,
         size && typeof size !== 'string' && `is-${size}`,
         sizeFullHD && `${sizeFullHD}`,
@@ -1241,7 +1242,7 @@ const GridItem = ({ children, size, sizeFullHD, sizeWidescreen, sizeDesktop, siz
     return jsx("div", Object.assign({ className: className }, { children: children }), void 0);
 };
 
-const MAIN_CLASS$q = 'columns';
+const MAIN_CLASS$r = 'columns';
 /** The grid system is used to arrange elements on a screen, usually by columns.
  * @example
  * <Grid>
@@ -1253,7 +1254,7 @@ const MAIN_CLASS$q = 'columns';
  * @param {boolean} isMultiline - Flag for wrap items in row
  */
 const Grid = ({ children, isMultiline }) => {
-    const className = [MAIN_CLASS$q, isMultiline && 'is-multiline']
+    const className = [MAIN_CLASS$r, isMultiline && 'is-multiline']
         .filter(Boolean)
         .join(' ');
     return jsx("div", Object.assign({ className: className }, { children: children }), void 0);
@@ -1302,7 +1303,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const MAIN_CLASS$p = 'Button';
+const MAIN_CLASS$q = 'Button';
 /**
  * Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.
  * Transparent buttons, are used into dark backgrounds. Their purpose is to use mainly as a
@@ -1331,23 +1332,23 @@ const Button = (_a) => {
     const THEME_CLASS = `Button--${theme}`;
     /** Check if every prop has been passed and asign the class name to the className const */
     const className = [
-        MAIN_CLASS$p,
+        MAIN_CLASS$q,
         THEME_CLASS,
         appearance && `${THEME_CLASS}--is-${appearance}`,
-        isDanger && `${MAIN_CLASS$p}--is-danger`,
-        isBorderLess && `${MAIN_CLASS$p}--is-borderless`,
-        isFullWidth && `${MAIN_CLASS$p}--is-full-width`,
-        icon && `${MAIN_CLASS$p}--has-icon`,
-        iconPosition && !isLoading && `${MAIN_CLASS$p}--icon-${iconPosition}`,
-        contentAlign && `${MAIN_CLASS$p}--content-${contentAlign}`,
-        size && `${MAIN_CLASS$p}--is-${size}`,
+        isDanger && `${MAIN_CLASS$q}--is-danger`,
+        isBorderLess && `${MAIN_CLASS$q}--is-borderless`,
+        isFullWidth && `${MAIN_CLASS$q}--is-full-width`,
+        icon && `${MAIN_CLASS$q}--has-icon`,
+        iconPosition && !isLoading && `${MAIN_CLASS$q}--icon-${iconPosition}`,
+        contentAlign && `${MAIN_CLASS$q}--content-${contentAlign}`,
+        size && `${MAIN_CLASS$q}--is-${size}`,
     ]
         .filter(Boolean)
         .join(' ');
     return (jsxs("button", Object.assign({ className: className, onClick: rest.disabled || isLoading ? () => { } : onClick, onBlur: onBlur, onFocus: onFocus }, rest, { children: [jsxs("div", Object.assign({ className: ` Button__children ${isLoading && 'Button__children--is-loading'}` }, { children: [icon && iconPosition === 'left' && jsx(Icon, { name: icon }, void 0), children && children, icon && iconPosition === 'right' && jsx(Icon, { name: icon }, void 0)] }), void 0), isLoading && (jsx("div", Object.assign({ className: 'Button__loader' }, { children: jsx(Icon, { name: 'Loader' }, void 0) }), void 0))] }), void 0));
 };
 
-const MAIN_CLASS$o = 'PageActions';
+const MAIN_CLASS$p = 'PageActions';
 /**
  * PageActions component is used to display the buttons
  * which are going to control wizards, forms, modals, pages
@@ -1364,41 +1365,42 @@ const PageActions = ({ primaryAction, position = 'space-between', secondaryActio
     const extraIndex = secondaryActions && primaryAction
         ? secondaryActions.length + primaryIndex + 1
         : 1;
-    const renderButton = (buttonProps, index, buttonAppearance = 'secondary') => {
-        return (jsx(Button, Object.assign({ onClick: buttonProps.onClick, icon: buttonProps.icon, iconPosition: buttonProps.iconPosition, disabled: buttonProps.disabled, appearance: buttonAppearance, isLoading: buttonProps.isLoading }, { children: buttonProps.children }), `pageAction-${index}`));
+    const renderButton = (buttonProps, index, buttonAppearance = 'secondary', ariaLabel) => {
+        return (jsx(Button, Object.assign({ "aria-label": ariaLabel, onClick: buttonProps.onClick, icon: buttonProps.icon, iconPosition: buttonProps.iconPosition, disabled: buttonProps.disabled, appearance: buttonAppearance, isLoading: buttonProps.isLoading }, { children: buttonProps.children }), `pageAction-${index}`));
     };
     const className = [
-        MAIN_CLASS$o,
-        `${MAIN_CLASS$o}__container`,
-        position && `${MAIN_CLASS$o}--position-${position}`,
-        isReverse && `${MAIN_CLASS$o}--is-reverse`,
-        extraAction && `${MAIN_CLASS$o}--has-extra-action`,
+        MAIN_CLASS$p,
+        `${MAIN_CLASS$p}__container`,
+        position && `${MAIN_CLASS$p}--position-${position}`,
+        isReverse && `${MAIN_CLASS$p}--is-reverse`,
+        extraAction && `${MAIN_CLASS$p}--has-extra-action`,
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxs("div", Object.assign({ className: className }, { children: [extraAction && (jsx("div", Object.assign({ className: 'PageActions__ActionsContainer PageActions__ExtraActionContainer' }, { children: renderButton(extraAction, extraIndex, extraAction.appearance) }), void 0)), jsxs("div", Object.assign({ className: 'PageActions__ActionsContainer PageActions__MainActionsContainer' }, { children: [secondaryActions &&
-                        secondaryActions.map((buttonProps, index) => renderButton(buttonProps, index, buttonProps.appearance)), primaryAction && renderButton(primaryAction, primaryIndex, 'primary')] }), void 0)] }), void 0));
+    return (jsxs("div", Object.assign({ className: className }, { children: [extraAction && (jsx("div", Object.assign({ className: 'PageActions__ActionsContainer PageActions__ExtraActionContainer' }, { children: renderButton(extraAction, extraIndex, extraAction.appearance, extraAction.ariaLabel) }), void 0)), jsxs("div", Object.assign({ className: 'PageActions__ActionsContainer PageActions__MainActionsContainer' }, { children: [secondaryActions &&
+                        secondaryActions.map((buttonProps, index) => renderButton(buttonProps, index, buttonProps.appearance, buttonProps.ariaLabel)), primaryAction &&
+                        renderButton(primaryAction, primaryIndex, 'primary', primaryAction.ariaLabel)] }), void 0)] }), void 0));
 };
 
-const MAIN_CLASS$n = 'Tabs__Tab';
-const Tab = ({ content, isSelected, onClick, isFitted }) => {
-    const className = cssClassName(MAIN_CLASS$n, isSelected && 'isSelected', isFitted && 'isFitted');
-    return (jsx("button", Object.assign({ className: className, onClick: onClick }, { children: content }), void 0));
+const MAIN_CLASS$o = 'Tabs__Tab';
+const Tab = ({ ariaLabel, content, isSelected, onClick, isFitted, }) => {
+    const className = cssClassName(MAIN_CLASS$o, isSelected && 'isSelected', isFitted && 'isFitted');
+    return (jsx("button", Object.assign({ "aria-label": ariaLabel, className: className, onClick: onClick }, { children: content }), void 0));
 };
 
-const MAIN_CLASS$m = 'Tabs__TabsWrapper';
+const MAIN_CLASS$n = 'Tabs__TabsWrapper';
 const TabsWrapper = ({ onSelect, selected, tabs, areFitted, }) => {
     const handleOnSelectTab = (index) => {
         if (onSelect)
             onSelect(index);
     };
-    const renderTab = (tab, index) => (jsx(Tab, { content: tab.content, isSelected: selected === index, onClick: () => handleOnSelectTab(index), isFitted: areFitted }, tab.id));
-    return jsx("div", Object.assign({ className: MAIN_CLASS$m }, { children: tabs.map(renderTab) }), void 0);
+    const renderTab = (tab, index) => (jsx(Tab, { ariaLabel: tab.ariaLabel, content: tab.content, isSelected: selected === index, onClick: () => handleOnSelectTab(index), isFitted: areFitted }, tab.id));
+    return jsx("div", Object.assign({ className: MAIN_CLASS$n }, { children: tabs.map(renderTab) }), void 0);
 };
 
-const MAIN_CLASS$l = 'Tabs__Panel';
+const MAIN_CLASS$m = 'Tabs__Panel';
 const Panel$1 = ({ id, children, isHidden }) => {
-    const className = [MAIN_CLASS$l, isHidden && `${MAIN_CLASS$l}--is-hidden`]
+    const className = [MAIN_CLASS$m, isHidden && `${MAIN_CLASS$m}--is-hidden`]
         .filter(Boolean)
         .join(' ');
     return (jsx("div", Object.assign({ className: className, id: id }, { children: children }), void 0));
@@ -1728,9 +1730,10 @@ function getRows(isMultiline) {
  * @param {number} InputTextProps.max - For a max value input.
  * @param {number} InputTextProps.min - For a min value input.
  * @param {boolean} InputTextProps.isFocused - For active focus whit a boolean.
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} The component.
  */
-const InputText = ({ action, helperText, isHelperMode = false, isErrorMode = false, icon, label, secondaryAction, prefix, suffix, tooltip, disabled = false, placeholder, type = 'text', readOnly = false, id, name, className, value, maxLength, minLength, max, min, isFocused = false, onChange, onBlur, onFocus, onKeyDown, isRequired, isMultiline, autoComplete, inputMode, tooltipLabel, }) => {
+const InputText = ({ action, ariaLabel, helperText, isHelperMode = false, isErrorMode = false, icon, label, secondaryAction, prefix, suffix, tooltip, disabled = false, placeholder, type = 'text', readOnly = false, id, name, className, value, maxLength, minLength, max, min, isFocused = false, onChange, onBlur, onFocus, onKeyDown, isRequired, isMultiline, autoComplete, inputMode, tooltipLabel, }) => {
     const inputRef = useRef(null);
     const textAreaRef = useRef(null);
     const inputContainerRef = useRef(null);
@@ -1789,6 +1792,7 @@ const InputText = ({ action, helperText, isHelperMode = false, isErrorMode = fal
             .filter(Boolean)
             .join(' ');
         const input = createElement(InputComponent, {
+            'aria-label': ariaLabel,
             className: clasessInput,
             ref: isMultiline ? textAreaRef : inputRef,
             placeholder,
@@ -1846,6 +1850,7 @@ const InputText = ({ action, helperText, isHelperMode = false, isErrorMode = fal
  * @param {string[]} OptionListProps.selected -  Preselected data to
  * highlight in the render of the list items
  * @param {string[]} OptionListProps.parentId - ParentId to focus when select with keys
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Returns the component
  */
 const OptionList = ({ sections, items, className, isMultiple = false, onChange, selected, parentId = '', onEscKeyDown, }) => {
@@ -1926,7 +1931,7 @@ const OptionList = ({ sections, items, className, isMultiple = false, onChange,
                                     ]
                                         .filter(Boolean)
                                         .join(' ');
-                                    return (jsx("li", Object.assign({ id: `${i}-${j}`, className: classesItem, onClick: () => handleSelectItem(label) }, { children: label === null || label === void 0 ? void 0 : label.label }), j));
+                                    return (jsx("li", Object.assign({ "aria-label": `${label.ariaLabel}-select`, id: `${i}-${j}`, className: classesItem, onClick: () => handleSelectItem(label) }, { children: label === null || label === void 0 ? void 0 : label.label }), j));
                                 }) }), void 0)] }), i));
                 })), !sections && items && (jsx("div", Object.assign({ className: 'select-list' }, { children: jsx("ul", Object.assign({ className: 'select-list__list' }, { children: items.map((label, j) => {
                         const isCursor = cursor === j ? 'is-cursor' : '';
@@ -1937,12 +1942,12 @@ const OptionList = ({ sections, items, className, isMultiple = false, onChange,
                         ]
                             .filter(Boolean)
                             .join(' ');
-                        return (jsx("li", Object.assign({ id: `${0}-${j}`, className: classesItem, onClick: () => handleSelectItem(label) }, { children: label === null || label === void 0 ? void 0 : label.label }), j));
+                        return (jsx("li", Object.assign({ "aria-label": `${label.ariaLabel}-select`, id: `${0}-${j}`, className: classesItem, onClick: () => handleSelectItem(label) }, { children: label === null || label === void 0 ? void 0 : label.label }), j));
                     }) }), void 0) }), void 0))] }), void 0));
 };
 
-const MAIN_CLASS$k = 'Tag'; // Component main class name
-const TAG_TEXT = `${MAIN_CLASS$k}__text`; // Text container class name
+const MAIN_CLASS$l = 'Tag'; // Component main class name
+const TAG_TEXT = `${MAIN_CLASS$l}__text`; // Text container class name
 /**
  * Tag represents a set of interactive, supplied keywords that help label,
  * organize and categorize content. Tags can be added or removed from an object by users.
@@ -1955,24 +1960,25 @@ const TAG_TEXT = `${MAIN_CLASS$k}__text`; // Text container class name
  * @param {boolean} ButtonProps.disabled - Disables the tag
  * @param {Function} ButtonProps.onClick - Callback when tag is clicked. Renders without remove button.
  * @param {Function} ButtonProps.onRemove - Callback when remove button is clicked.
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} The component.
  */
-const Tag = ({ children, isDisabled, onClick, onRemove, isDanger, }) => {
+const Tag = ({ ariaLabel, children, isDisabled, onClick, onRemove, isDanger, }) => {
     const { theme } = useTheme();
     /** Check if every prop has been passed and asign the class name to the className const */
     const classNames = [
-        MAIN_CLASS$k,
-        `${MAIN_CLASS$k}--${theme}`,
-        onClick && `${MAIN_CLASS$k}--is-clickable`,
-        isDisabled && `${MAIN_CLASS$k}--is-disabled`,
-        isDanger && `${MAIN_CLASS$k}--is-danger`,
+        MAIN_CLASS$l,
+        `${MAIN_CLASS$l}--${theme}`,
+        onClick && `${MAIN_CLASS$l}--is-clickable`,
+        isDisabled && `${MAIN_CLASS$l}--is-disabled`,
+        isDanger && `${MAIN_CLASS$l}--is-danger`,
     ]
         .filter(Boolean)
         .join(' ');
     if (onClick) {
         return (jsx("button", Object.assign({ className: classNames, onClick: onClick, disabled: isDisabled, type: 'button' }, { children: children }), void 0));
     }
-    const removeButton = onRemove && (jsx("button", Object.assign({ type: 'button', className: `${MAIN_CLASS$k}__Remove-Button`, onClick: onRemove, disabled: isDisabled, tabIndex: -1 }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0));
+    const removeButton = onRemove && (jsx("button", Object.assign({ "aria-label": ariaLabel, type: 'button', className: `${MAIN_CLASS$l}__Remove-Button`, onClick: onRemove, disabled: isDisabled, tabIndex: -1 }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0));
     const tagContent = jsx("span", Object.assign({ className: TAG_TEXT }, { children: children }), void 0);
     return (jsxs("span", Object.assign({ className: classNames }, { children: [tagContent, removeButton] }), void 0));
 };
@@ -2238,13 +2244,56 @@ const useTheme = () => {
  * time the search engine is typed
  * @param {boolean}  SelectProps.isReadOnly  - Disables popover operation
  * @default 'false'
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Element Select
  */
-const Select = ({ items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, onSearchChange, search, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, }) => {
+const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, selected, onChange, searchPlaceholder, searchLabel, helperText, isHelperMode, isDisabled = false, tooltip, isDanger, isReadOnly = false, id, emptyState, onBlur, isRequired, tooltipLabel, action, showSearch = true, }) => {
     const [isActivePopover, setIsActive] = useState(false);
     const selectActivatorRef = useRef(null);
     const [parentCoord, setParentCoords] = useState();
+    const [search, setSearch] = useState('');
+    const [sectionsFiltered, setSectionsFiltered] = useState(sections);
+    const [itemsFiltered, setItemsFiltered] = useState(items);
     const { theme } = useTheme();
+    const handleOnSearch = (value) => {
+        setSearch(value || '');
+        if (value) {
+            if (sections) {
+                const newSections = [];
+                sections.forEach((section) => {
+                    const { items: itemsSection } = section;
+                    if (!itemsSection)
+                        newSections.push(section);
+                    else {
+                        const newItems = itemsSection.filter((item) => item.label
+                            .toLocaleLowerCase()
+                            .includes(search.toLocaleLowerCase()));
+                        newSections.push(Object.assign(Object.assign({}, section), { items: newItems }));
+                    }
+                });
+                setSectionsFiltered(newSections);
+            }
+            if (items) {
+                const newItems = items.filter((item) => item.label
+                    .toLocaleLowerCase()
+                    .includes(search.toLocaleLowerCase()));
+                setItemsFiltered(newItems);
+            }
+        }
+        else {
+            setSectionsFiltered(sections);
+            setItemsFiltered(items);
+        }
+    };
+    let totalItems = 0;
+    if (sections) {
+        sections.forEach((section) => {
+            if (section.items)
+                totalItems += section.items.length;
+        });
+    }
+    if (items)
+        totalItems = items.length;
     const handleClickSelectReadOnlyOutside = (event) => {
         if (selectActivatorRef.current &&
             !selectActivatorRef.current.contains(event.target)) {
@@ -2259,6 +2308,12 @@ const Select = ({ items, sections, isMultiple, placeholder, label, selected, onC
             };
         }
     }, [isActivePopover]);
+    useEffect(() => {
+        setSectionsFiltered(sections);
+    }, [sections]);
+    useEffect(() => {
+        setItemsFiltered(items);
+    }, [items]);
     const handleOpenPopover = () => setIsActive(!isActivePopover);
     const removeTag = (event, value) => {
         event.stopPropagation();
@@ -2350,9 +2405,10 @@ const Select = ({ items, sections, isMultiple, placeholder, label, selected, onC
     }, [action]);
     const actionIconProp = action && action.icon ? { icon: action.icon, outlined: true } : undefined;
     const actionMarkup = action ? (jsxs(Fragment, { children: [(items === null || items === void 0 ? void 0 : items.length) ? jsx(Divider, {}, void 0) : null, jsx(AlphaButton, Object.assign({ isLink: true, isTertiary: true, onClick: handleActionClick, icon: actionIconProp, iconPosition: action.iconPosition, theme: (theme === null || theme === void 0 ? void 0 : theme.toLowerCase()) || undefined }, { children: action.content }), void 0)] }, void 0)) : null;
-    const renderInput = () => (jsx("div", Object.assign({ id: id }, { children: jsxs(Popover$1, Object.assign({ isActive: isReadOnly ? false : isActivePopover, activator: jsxs("div", Object.assign({ tabIndex: 0, className: clasessSelect, id: `select-${id}`, onKeyDown: onKeyDown, onClick: handleClickSelect, onBlur: onBlur }, { children: [selected && selected.length > 0 && (jsx("div", Object.assign({ className: 'Select__selected' }, { children: isMultiple
+    const searchMarkup = totalItems > 10 && showSearch ? (jsx("div", Object.assign({ className: 'Select__search' }, { children: jsx(InputText, { placeholder: searchPlaceholder, icon: 'Search', value: search, label: searchLabel, onChange: handleOnSearch }, void 0) }), void 0)) : null;
+    const renderInput = () => (jsx("div", Object.assign({ id: id }, { children: jsxs(Popover$1, Object.assign({ isActive: isReadOnly ? false : isActivePopover, activator: jsxs("div", Object.assign({ "aria-label": ariaLabel, tabIndex: 0, className: clasessSelect, id: `select-${id}`, onKeyDown: onKeyDown, onClick: handleClickSelect, onBlur: onBlur }, { children: [selected && selected.length > 0 && (jsx("div", Object.assign({ className: 'Select__selected' }, { children: isMultiple
                             ? selected === null || selected === void 0 ? void 0 : selected.map((option, index) => (jsx("div", Object.assign({ className: 'Select__tag-container' }, { children: jsx(Tag, Object.assign({ onRemove: (evt) => removeTag(evt, option), isDisabled: isDisabled, isDanger: isDanger }, { children: getLabelOption(option) }), void 0) }), `Select-tag--${index}`)))
-                            : selected === null || selected === void 0 ? void 0 : selected.map((option, index) => (jsx("span", { children: getLabelOption(option) }, `option-${index}`))) }), void 0)), (!selected || selected.length <= 0) && placeholder && (jsx("div", Object.assign({ className: 'Select__placeholder' }, { children: placeholder }), void 0)), jsx("div", Object.assign({ className: 'Select__icon', onClick: handleOnClickIcon }, { children: jsx(Icon, { name: isActivePopover && !isReadOnly ? 'ChevronUp' : 'ChevronDown' }, void 0) }), void 0)] }), void 0), isFullWidth: true, onClose: () => setIsActive(false) }, { children: [searchPlaceholder && (jsx("div", Object.assign({ className: 'Select__search' }, { children: jsx(InputText, { placeholder: searchPlaceholder, icon: 'Search', value: search, label: searchLabel, onChange: (value) => onSearchChange && onSearchChange(value) }, void 0) }), void 0)), emptyState && (jsx(Popover$1.Pane, { children: jsx("div", Object.assign({ className: 'emptyState__container' }, { children: emptyState }), void 0) }, void 0)), !emptyState && (jsxs(Popover$1.Pane, { children: [jsx(OptionList, { sections: sections, items: items, isMultiple: isMultiple, onChange: (value) => {
+                            : selected === null || selected === void 0 ? void 0 : selected.map((option, index) => (jsx("span", { children: getLabelOption(option) }, `option-${index}`))) }), void 0)), (!selected || selected.length <= 0) && placeholder && (jsx("div", Object.assign({ className: 'Select__placeholder' }, { children: placeholder }), void 0)), jsx("div", Object.assign({ className: 'Select__icon', onClick: handleOnClickIcon }, { children: jsx(Icon, { name: isActivePopover && !isReadOnly ? 'ChevronUp' : 'ChevronDown' }, void 0) }), void 0)] }), void 0), isFullWidth: true, onClose: () => setIsActive(false) }, { children: [searchMarkup, emptyState && (jsx(Popover$1.Pane, { children: jsx("div", Object.assign({ className: 'emptyState__container' }, { children: emptyState }), void 0) }, void 0)), !emptyState && (jsxs(Popover$1.Pane, { children: [jsx(OptionList, { sections: sectionsFiltered, items: itemsFiltered, isMultiple: isMultiple, onChange: (value) => {
                                 if (!isMultiple) {
                                     handleOpenPopover();
                                 }
@@ -9635,7 +9691,7 @@ function formatDate(date, toISO) {
 }
 
 const COMPONENT_NAME$q = 'DateInput';
-const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
+const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
     const [isPopoverActive, setIsPopoverActive] = useState(false);
     const [{ month, year }, setDate] = useState({
         month: new Date().getMonth(),
@@ -9767,7 +9823,7 @@ const AlphaInputDate = ({ disabled, label, onChange, value, isRequired, placehol
         }
     }, [selectedDate]);
     const datePickerMarkup = (jsx(DatePicker, { weekStartsOn: 1, month: month, year: year, onMonthChange: handleMonthChange, onChange: handleDateChange, selected: selectedDate || undefined, months: months, weekDays: weekdays }, void 0));
-    const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__InputWrapper`, onClick: () => setIsPopoverActive(true), ref: inputRef }, { children: jsx(AlphaTooltip, Object.assign({ persistence: true, isActive: isErrorTooltipActive, content: errorMessage, appearance: 'error' }, { children: jsx(InputText, { disabled: disabled, label: label, onChange: handleInputChange, value: inputValue, maxLength: 10, placeholder: placeholder, onBlur: handleInputBlur, icon: 'Calendar', isRequired: isRequired }, void 0) }), void 0) }), void 0));
+    const inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__InputWrapper`, onClick: () => setIsPopoverActive(true), ref: inputRef }, { children: jsx(AlphaTooltip, Object.assign({ persistence: true, isActive: isErrorTooltipActive, content: errorMessage, appearance: 'error' }, { children: jsx(InputText, { ariaLabel: ariaLabel, disabled: disabled, label: label, onChange: handleInputChange, value: inputValue, maxLength: 10, placeholder: placeholder, onBlur: handleInputBlur, icon: 'Calendar', isRequired: isRequired }, void 0) }), void 0) }), void 0));
     const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: isPopoverActive, isFullWidth: true, onClose: () => setIsPopoverActive(false) }, { children: datePickerMarkup }), void 0));
     return jsx("div", Object.assign({ className: className }, { children: popoverMarkup }), void 0);
 };
@@ -9797,11 +9853,11 @@ const FilterField$1 = ({ id, label, onChange, placeholder, type = 'STRING', filt
             return undefined;
         return (filterValue || '');
     }, [filterValue]);
-    const fieldMarkup = (jsx("div", Object.assign({ className: 'FieldFilterWrapper' }, { children: jsx(FieldComponent, { label: label, onChange: handleChange, placeholder: placeholder, value: valueField, selected: filterValue, items: options, months: months || [], weekdays: weekdays || [], type: 'text' }, void 0) }), void 0));
+    const fieldMarkup = (jsx("div", Object.assign({ className: 'FieldFilterWrapper' }, { children: jsx(FieldComponent, { label: label, onChange: handleChange, placeholder: placeholder, value: valueField, selected: filterValue, items: options, months: months || [], weekdays: weekdays || [], type: 'text', isDisabled: type === 'CATALOG' && (options === undefined || (options === null || options === void 0 ? void 0 : options.length) === 0) }, void 0) }), void 0));
     return jsx(Fragment, { children: fieldMarkup }, void 0);
 };
 
-const MAIN_CLASS$j = 'AlphaFilterControl';
+const MAIN_CLASS$k = 'AlphaFilterControl';
 const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title, values, }) => {
     const [selectedTab, setSelectedTab] = useState(0);
     const [fieldsSearch, setFieldsSearch] = useState([]);
@@ -9811,7 +9867,7 @@ const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title,
         id: section.id,
         panelID: `panel-${section.id}`,
     }));
-    const headerMarkup = (jsx("div", Object.assign({ className: `${MAIN_CLASS$j}__HeaderWrapper` }, { children: jsx("span", { children: title }, void 0) }), void 0));
+    const headerMarkup = (jsx("div", Object.assign({ className: `${MAIN_CLASS$k}__HeaderWrapper` }, { children: jsx("span", { children: title }, void 0) }), void 0));
     const handleOnChange = (newValue, id) => {
         const updateFilterValues = structuredClone(filterValues);
         updateFilterValues[id] = newValue;
@@ -9852,9 +9908,9 @@ const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title,
     useEffect(() => {
         setFilterValues(values);
     }, [values]);
-    const bodyMarkup = useMemo(() => (jsx("div", Object.assign({ className: `${MAIN_CLASS$j}__BodyWrapper` }, { children: jsx(Tabs, Object.assign({ selected: selectedTab, tabs: tabsConfig, onSelect: handleOnChangeTab }, { children: formMarkup }), void 0) }), void 0)), [tabsConfig, selectedTab, fieldsSearch]);
-    const actionsMarkup = (jsx("div", Object.assign({ className: `${MAIN_CLASS$j}__ActionWrapper` }, { children: jsx(PageActions, { position: 'flex-end', primaryAction: Object.assign(Object.assign({}, primaryAction), { onClick: handleOnApply }), secondaryActions: secondaryActions }, void 0) }), void 0));
-    return (jsxs("div", Object.assign({ className: `${MAIN_CLASS$j}` }, { children: [headerMarkup, bodyMarkup, actionsMarkup] }), void 0));
+    const bodyMarkup = useMemo(() => (jsx("div", Object.assign({ className: `${MAIN_CLASS$k}__BodyWrapper` }, { children: jsx(Tabs, Object.assign({ selected: selectedTab, tabs: tabsConfig, onSelect: handleOnChangeTab }, { children: formMarkup }), void 0) }), void 0)), [tabsConfig, selectedTab, fieldsSearch]);
+    const actionsMarkup = (jsx("div", Object.assign({ className: `${MAIN_CLASS$k}__ActionWrapper` }, { children: jsx(PageActions, { position: 'flex-end', primaryAction: Object.assign(Object.assign({}, primaryAction), { onClick: handleOnApply }), secondaryActions: secondaryActions }, void 0) }), void 0));
+    return (jsxs("div", Object.assign({ className: `${MAIN_CLASS$k}` }, { children: [headerMarkup, bodyMarkup, actionsMarkup] }), void 0));
 };
 
 const COMPONENT_NAME$p = 'AlphaInlineError';
@@ -10013,7 +10069,7 @@ const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick,
  */
 const AnnotatedSection = ({ title, description, children, }) => (jsxs("div", Object.assign({ className: 'AnnotatedSection' }, { children: [title && (jsxs("div", Object.assign({ className: 'AnnotatedSection__header' }, { children: [jsx("div", Object.assign({ className: 'AnnotatedSection__title' }, { children: title }), void 0), jsx("div", Object.assign({ className: 'AnnotatedSection__description' }, { children: description }), void 0)] }), void 0)), jsx("div", Object.assign({ className: 'AnnotatedSection__children' }, { children: children }), void 0)] }), void 0));
 
-const MAIN_CLASS$i = 'avatar';
+const MAIN_CLASS$j = 'avatar';
 /**
  * Avatar is a graphic representation that is associated with a user for identification.
  *
@@ -10031,11 +10087,11 @@ const MAIN_CLASS$i = 'avatar';
 const Avatar = ({ icon, initials = '', isRounded = true, size = 'large', source = '', appearance = 'default', }) => {
     const { theme } = useTheme();
     const className = [
-        MAIN_CLASS$i,
+        MAIN_CLASS$j,
         theme && `is-${theme}`,
-        appearance && `${MAIN_CLASS$i}--is-${appearance}`,
-        size && `${MAIN_CLASS$i}--${size}`,
-        isRounded && `${MAIN_CLASS$i}--rounded`,
+        appearance && `${MAIN_CLASS$j}--is-${appearance}`,
+        size && `${MAIN_CLASS$j}--${size}`,
+        isRounded && `${MAIN_CLASS$j}--rounded`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -10066,7 +10122,7 @@ const Avatar = ({ icon, initials = '', isRounded = true, size = 'large', source
  */
 const Badge = ({ children, status = 'default' }) => (jsx("div", Object.assign({ className: `Badge Badge--is-${status}` }, { children: children }), void 0));
 
-const MAIN_CLASS$h = 'Banner';
+const MAIN_CLASS$i = 'Banner';
 /**
  * Banner are used primarily show something informatión in a small container blue.
  *
@@ -10084,8 +10140,8 @@ const MAIN_CLASS$h = 'Banner';
 const Banner = ({ children, hasShadow = true, icon, appearance, headerTitle, }) => {
     const { theme } = useTheme();
     const classes = [
-        MAIN_CLASS$h,
-        `${MAIN_CLASS$h}--${theme}`,
+        MAIN_CLASS$i,
+        `${MAIN_CLASS$i}--${theme}`,
         hasShadow && 'Banner--has-shadow',
         appearance && `Banner--${appearance}`,
         appearance === 'info' && `Banner--${appearance}-${theme}`,
@@ -16152,7 +16208,7 @@ const CalendarPicker = ({ handleChangeDate, minYear = 5, maxYear = 5, date = `${
                                 }) }), void 0)] }), void 0))] }), void 0) }, void 0));
 };
 
-const MAIN_CLASS$g = 'Media';
+const MAIN_CLASS$h = 'Media';
 /**
  * Media component are used primarily for show a little box whit a icon inside.
  *
@@ -16168,19 +16224,19 @@ const Media = ({ appearance = 'default', icon, size = 'medium', themeAppearance,
     const { theme } = useTheme();
     /** Check if every prop has been passed and asign the class name to the className const */
     const className = [
-        MAIN_CLASS$g,
-        `${MAIN_CLASS$g}--${themeAppearance ? themeAppearance : theme}`,
-        appearance && `${MAIN_CLASS$g}--is-${appearance}`,
+        MAIN_CLASS$h,
+        `${MAIN_CLASS$h}--${themeAppearance ? themeAppearance : theme}`,
+        appearance && `${MAIN_CLASS$h}--is-${appearance}`,
         appearance &&
-            `${MAIN_CLASS$g}--is-${appearance}--${themeAppearance ? themeAppearance : theme}`,
-        size && `${MAIN_CLASS$g}--is-${size}`,
+            `${MAIN_CLASS$h}--is-${appearance}--${themeAppearance ? themeAppearance : theme}`,
+        size && `${MAIN_CLASS$h}--is-${size}`,
     ]
         .filter(Boolean)
         .join(' ');
     return jsx("div", Object.assign({ className: className }, { children: icon && jsx(Icon, { name: icon }, void 0) }), void 0);
 };
 
-const MAIN_CLASS$f = 'Thumbnail';
+const MAIN_CLASS$g = 'Thumbnail';
 /** Thumbnail is used to provides a miniaturized version of image
  *
  * @param {ThumbnailProps} ThumbnailProps - ThumbnailProps
@@ -16197,18 +16253,18 @@ const MAIN_CLASS$f = 'Thumbnail';
  */
 const Thumbnail = ({ alt, fit = 'contain', hasShadow = true, isTransparent = false, size = 'tiny', source, icon, }) => {
     const className = [
-        MAIN_CLASS$f,
-        size && `${MAIN_CLASS$f}--is-${size}`,
-        isTransparent && `${MAIN_CLASS$f}--is-transparent`,
-        fit && `${MAIN_CLASS$f}--image-${fit}`,
-        hasShadow && `${MAIN_CLASS$f}--has-shadow`,
+        MAIN_CLASS$g,
+        size && `${MAIN_CLASS$g}--is-${size}`,
+        isTransparent && `${MAIN_CLASS$g}--is-transparent`,
+        fit && `${MAIN_CLASS$g}--image-${fit}`,
+        hasShadow && `${MAIN_CLASS$g}--has-shadow`,
     ]
         .filter(Boolean)
         .join(' ');
     return (jsxs("div", Object.assign({ className: className }, { children: [source !== '' && jsx("img", { alt: alt, src: source }, void 0), source === '' && icon && jsx(Icon, { name: icon }, void 0)] }), void 0));
 };
 
-const MAIN_CLASS$e = 'Card';
+const MAIN_CLASS$f = 'Card';
 /**
  * Card component are used primarily for show  a little information, sometimes with image.
  *
@@ -16233,13 +16289,13 @@ const MAIN_CLASS$e = 'Card';
  */
 const Card = ({ addon, children, description, image, isBorderLess = false, isDisabled, isSelected, media, mediaAppearance = 'info', mediaSize = 'large', onClick, size = 'medium', source, title, icon, }) => {
     const className = [
-        MAIN_CLASS$e,
-        isBorderLess && `${MAIN_CLASS$e}--is-border-less`,
-        isDisabled && `${MAIN_CLASS$e}--is-disabled`,
-        isSelected && `${MAIN_CLASS$e}--is-selected`,
-        size && `${MAIN_CLASS$e}--is-${size}`,
-        image && `${MAIN_CLASS$e}--with-image`,
-        onClick && !isDisabled && `${MAIN_CLASS$e}--is-clickable`,
+        MAIN_CLASS$f,
+        isBorderLess && `${MAIN_CLASS$f}--is-border-less`,
+        isDisabled && `${MAIN_CLASS$f}--is-disabled`,
+        isSelected && `${MAIN_CLASS$f}--is-selected`,
+        size && `${MAIN_CLASS$f}--is-${size}`,
+        image && `${MAIN_CLASS$f}--with-image`,
+        onClick && !isDisabled && `${MAIN_CLASS$f}--is-clickable`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -16309,7 +16365,7 @@ const RadioButton = (_a) => {
     return (jsxs("label", Object.assign({ className: `Radio-button__component-container Radio-button__label${theme ? ` Radio-button__component-container--is-${theme}` : ''} ${className}` }, { children: [jsx("span", Object.assign({ className: `Radio-button__container Radio-button__container  ${isActive ? 'Radio-button__container--checked' : ''} ${isDisabled && 'Radio-button__container--disabled'}` }, { children: jsx("input", Object.assign({ disabled: isDisabled, type: 'radio', onChange: (event) => onChange && onChange(event), value: value, id: id, name: name, checked: isChecked }, rest), void 0) }), void 0), jsxs("span", { children: [label, isRequired && jsx("span", Object.assign({ className: 'Radio-button--required' }, { children: "*" }), void 0)] }, void 0)] }), void 0));
 };
 
-const MAIN_CLASS$d = 'ChoiceList';
+const MAIN_CLASS$e = 'ChoiceList';
 /**
  * Allow user to select one or multiple options from a list. Make sure all options
  * are an either/or choice.
@@ -16323,10 +16379,11 @@ const MAIN_CLASS$d = 'ChoiceList';
  * @param {Function} ChoiceListProps.onChange - Callback when the selected choices change
  * @param {string} ChoiceListProps.title - Label for list of choices
  * @param {string} ChoiceListProps.allowSelectAll - Let user select all choices when is multiple choice list
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Returns the component
  */
-const ChoiceList = ({ choices, name, selected, allowMultiple, allowSelectAll, isDisabled, onChange, title, }) => {
-    const className = [MAIN_CLASS$d].filter(Boolean).join(' ');
+const ChoiceList = ({ ariaLabel, choices, name, selected, allowMultiple, allowSelectAll, isDisabled, onChange, title, }) => {
+    const className = [MAIN_CLASS$e].filter(Boolean).join(' ');
     const ControlComponent = allowMultiple ? Checkbox : RadioButton;
     const titleMarkup = title ? jsx("legend", { children: title }, void 0) : null;
     const choicesMarkup = choices.map((choice) => {
@@ -16336,7 +16393,7 @@ const ChoiceList = ({ choices, name, selected, allowMultiple, allowSelectAll, is
                 onChange(updateSelection(choice, e.currentTarget.checked, selected, allowMultiple), name);
             }
         };
-        return (jsx("li", Object.assign({ className: `${MAIN_CLASS$d}__ListItem` }, { children: jsx(ControlComponent, { name: name, value: value, label: label, isDisabled: choiceDisabled || isDisabled, disabled: choiceDisabled || isDisabled, isChecked: isChoiceSelected(choice, selected), checked: isChoiceSelected(choice, selected), onChange: handleChange }, void 0) }), value));
+        return (jsx("li", Object.assign({ className: `${MAIN_CLASS$e}__ListItem` }, { children: jsx(ControlComponent, { "aria-label": ariaLabel, name: name, value: value, label: label, isDisabled: choiceDisabled || isDisabled, disabled: choiceDisabled || isDisabled, isChecked: isChoiceSelected(choice, selected), checked: isChoiceSelected(choice, selected), onChange: handleChange }, void 0) }), value));
     });
     const handleChangeOnSelectAll = (e) => {
         let selected = [];
@@ -16350,7 +16407,7 @@ const ChoiceList = ({ choices, name, selected, allowMultiple, allowSelectAll, is
             onChange(selected, name);
     };
     const checkboxSelectAllMarkup = allowMultiple && allowSelectAll ? (jsx(Checkbox, { value: 'ALL', isDisabled: isDisabled, isChecked: selected.length === choices.length, onChange: handleChangeOnSelectAll }, void 0)) : null;
-    return (jsxs("fieldset", Object.assign({ className: className }, { children: [titleMarkup || checkboxSelectAllMarkup ? (jsxs("div", Object.assign({ className: `${MAIN_CLASS$d}__TitleContainer` }, { children: [checkboxSelectAllMarkup, titleMarkup] }), void 0)) : null, jsx("ul", Object.assign({ className: `${MAIN_CLASS$d}__List` }, { children: choicesMarkup }), void 0)] }), void 0));
+    return (jsxs("fieldset", Object.assign({ className: className }, { children: [titleMarkup || checkboxSelectAllMarkup ? (jsxs("div", Object.assign({ className: `${MAIN_CLASS$e}__TitleContainer` }, { children: [checkboxSelectAllMarkup, titleMarkup] }), void 0)) : null, jsx("ul", Object.assign({ className: `${MAIN_CLASS$e}__List` }, { children: choicesMarkup }), void 0)] }), void 0));
 };
 const isChoiceSelected = ({ value }, selected) => selected.indexOf(value) > -1;
 const updateSelection = ({ value }, checked, selected, allowMultiple = false) => {
@@ -16371,26 +16428,27 @@ const updateSelection = ({ value }, checked, selected, allowMultiple = false) =>
  * @param {function} CollapsibleProps.onClick - Component opening function
  * @param {string} CollapsibleProps.buttonText - Text to display on the button
  * @param {string} CollapsibleProps.title - Component Title
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} The component.
  */
-const Collapsible = ({ iconMedia, mediaAppearance = 'default', children, isOpen = false, onClick, buttonText, title, }) => (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: `Collapsible ${isOpen ? 'Collapsible--is-open' : ''}`, onClick: onClick }, { children: [jsxs("div", Object.assign({ className: 'Collapsible__media-container' }, { children: [jsx(Media, { appearance: mediaAppearance, icon: iconMedia }, void 0), jsx("div", Object.assign({ className: 'Collapsible__title' }, { children: title }), void 0)] }), void 0), buttonText && (jsx(Button, Object.assign({ icon: isOpen ? 'ChevronUp' : 'ChevronDown', iconPosition: 'right', appearance: 'transparent' }, { children: buttonText }), void 0))] }), void 0), isOpen && jsx("div", Object.assign({ className: 'Collapsible__children' }, { children: children }), void 0)] }, void 0));
+const Collapsible = ({ ariaLabel, iconMedia, mediaAppearance = 'default', children, isOpen = false, onClick, buttonText, title, }) => (jsxs(Fragment, { children: [jsxs("div", Object.assign({ "aria-label": ariaLabel, className: `Collapsible ${isOpen ? 'Collapsible--is-open' : ''}`, onClick: onClick }, { children: [jsxs("div", Object.assign({ className: 'Collapsible__media-container' }, { children: [jsx(Media, { appearance: mediaAppearance, icon: iconMedia }, void 0), jsx("div", Object.assign({ className: 'Collapsible__title' }, { children: title }), void 0)] }), void 0), buttonText && (jsx(Button, Object.assign({ "aria-label": `button-${ariaLabel}`, icon: isOpen ? 'ChevronUp' : 'ChevronDown', iconPosition: 'right', appearance: 'transparent' }, { children: buttonText }), void 0))] }), void 0), isOpen && jsx("div", Object.assign({ className: 'Collapsible__children' }, { children: children }), void 0)] }, void 0));
 
-const MAIN_CLASS$c = 'Connector';
+const MAIN_CLASS$d = 'Connector';
 const Connector = ({ alt, icon, id, isActive = false, image, meta, name, onClick, theme = 'CLOUD', }) => {
     const classes = [
-        `${MAIN_CLASS$c}`,
-        theme && `${MAIN_CLASS$c}--is-${theme}`,
-        isActive && `${MAIN_CLASS$c}--is-active`,
+        `${MAIN_CLASS$d}`,
+        theme && `${MAIN_CLASS$d}--is-${theme}`,
+        isActive && `${MAIN_CLASS$d}--is-active`,
     ]
         .filter(Boolean)
         .join(' ');
     const handleOnClick = () => {
         onClick && onClick(id);
     };
-    return (jsx("div", Object.assign({ className: classes, onClick: handleOnClick }, { children: jsxs("div", Object.assign({ className: `${MAIN_CLASS$c}__container` }, { children: [!image && icon && (jsx("div", Object.assign({ className: `${MAIN_CLASS$c}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), image && (jsx("div", Object.assign({ className: `${MAIN_CLASS$c}__image` }, { children: jsx("img", { alt: alt, src: image }, void 0) }), void 0)), name && jsx("span", Object.assign({ className: `${MAIN_CLASS$c}__name` }, { children: name }), void 0), meta && jsx("div", Object.assign({ className: `${MAIN_CLASS$c}__meta` }, { children: meta }), void 0)] }), void 0) }), void 0));
+    return (jsx("div", Object.assign({ className: classes, onClick: handleOnClick }, { children: jsxs("div", Object.assign({ className: `${MAIN_CLASS$d}__container` }, { children: [!image && icon && (jsx("div", Object.assign({ className: `${MAIN_CLASS$d}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), image && (jsx("div", Object.assign({ className: `${MAIN_CLASS$d}__image` }, { children: jsx("img", { alt: alt, src: image }, void 0) }), void 0)), name && jsx("span", Object.assign({ className: `${MAIN_CLASS$d}__name` }, { children: name }), void 0), meta && jsx("div", Object.assign({ className: `${MAIN_CLASS$d}__meta` }, { children: meta }), void 0)] }), void 0) }), void 0));
 };
 
-const MAIN_CLASS$b = 'Container';
+const MAIN_CLASS$c = 'Container';
 /**
  *
  * @param {ContainerProps}  ContainerProps - ContainerProps
@@ -16399,13 +16457,13 @@ const MAIN_CLASS$b = 'Container';
  * @returns {symbol} - Element Container
  */
 const Container = ({ children, hasShadow = true }) => {
-    const className = [MAIN_CLASS$b, hasShadow && `${MAIN_CLASS$b}--has-shadow`]
+    const className = [MAIN_CLASS$c, hasShadow && `${MAIN_CLASS$c}--has-shadow`]
         .filter(Boolean)
         .join(' ');
     return jsx("div", Object.assign({ className: className }, { children: children }), void 0);
 };
 
-const MAIN_CLASS$a = 'Cover';
+const MAIN_CLASS$b = 'Cover';
 /**
  *
  * @param {CoverProps}  CoverProps - CoverProps
@@ -16416,9 +16474,9 @@ const MAIN_CLASS$a = 'Cover';
  */
 const Cover = ({ children, position = 'center', source, hasShadow = false, }) => {
     const className = [
-        MAIN_CLASS$a,
-        position && `${MAIN_CLASS$a}--${position}`,
-        hasShadow && `${MAIN_CLASS$a}--has-shadow`,
+        MAIN_CLASS$b,
+        position && `${MAIN_CLASS$b}--${position}`,
+        hasShadow && `${MAIN_CLASS$b}--has-shadow`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -16690,7 +16748,7 @@ const YearField = ({ onChange, value, min, max, onBlur, onFocus, onKeyDown, onKe
     return jsx("div", Object.assign({ className: className }, { children: inputMarkup }), void 0);
 };
 
-const MAIN_CLASS$9 = 'Icon-button';
+const MAIN_CLASS$a = 'Icon-button';
 /**
  * Icon Button are used primarily for actions, this component only contain a icon.
  *
@@ -16710,12 +16768,12 @@ const IconButton = (_a) => {
     const { theme } = useTheme();
     /** Check if every prop has been passed and asign the class name to the className const */
     const className = [
-        MAIN_CLASS$9,
-        appearance && `${MAIN_CLASS$9}--is-${appearance}`,
+        MAIN_CLASS$a,
+        appearance && `${MAIN_CLASS$a}--is-${appearance}`,
         theme && `is-${theme}`,
-        size && `${MAIN_CLASS$9}--is-${size}`,
-        isRound && `${MAIN_CLASS$9}--is-round`,
-        isDisabled && `${MAIN_CLASS$9}--is-disabled`,
+        size && `${MAIN_CLASS$a}--is-${size}`,
+        isRound && `${MAIN_CLASS$a}--is-round`,
+        isDisabled && `${MAIN_CLASS$a}--is-disabled`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -16784,19 +16842,19 @@ const TrashIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24',
             d: 'M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0), jsx("path", { d: 'M10 11V17', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0), jsx("path", { d: 'M14 11V17', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, void 0)] }), void 0));
 
 const COMPONENT_NAME$b = 'DeletableSection';
-const DeletableSection = ({ children, onDelete, iconDeletable, isDeletable, }) => {
+const DeletableSection = ({ ariaLabel, children, onDelete, iconDeletable, isDeletable, }) => {
     const { theme } = useTheme();
     const THEME_CLASS = `${theme}`;
     const className = cssClassName(COMPONENT_NAME$b);
     const classNameButton = cssClassName(`${COMPONENT_NAME$b}__DeleteButtonWrapper`, THEME_CLASS);
     const icon = iconDeletable || TrashIcon;
-    const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ className: `${COMPONENT_NAME$b}__DeleteButton`, onClick: onDelete }, { children: jsx(AlphaIcon, { source: icon, outlined: true }, void 0) }), void 0) }), void 0)) : null;
+    const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ "aria-label": ariaLabel ? `${ariaLabel}-removeForm` : ariaLabel, className: `${COMPONENT_NAME$b}__DeleteButton`, onClick: onDelete }, { children: jsx(AlphaIcon, { source: icon, outlined: true }, void 0) }), void 0) }), void 0)) : null;
     const contentMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$b}__ContentWrapper` }, { children: children }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [deleteButtonMarkup, contentMarkup] }), void 0));
 };
 
 const COMPONENT_NAME$a = 'AlphaInputTag';
-const InputTag$1 = ({ id, inputTextPlaceholder, inputTextValue, isRequired, label, onChange, onInputTextChange, addedTags = [], triggerKeys = ['Enter'], onBlur, onFocus, isDisabled, hasError, tagRemoveIcon, helpText, }) => {
+const InputTag$1 = ({ ariaLabel, id, inputTextPlaceholder, inputTextValue, isRequired, label, onChange, onInputTextChange, addedTags = [], triggerKeys = ['Enter'], onBlur, onFocus, isDisabled, hasError, tagRemoveIcon, helpText, }) => {
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
     const handleInputFocus = () => {
@@ -16848,7 +16906,7 @@ const InputTag$1 = ({ id, inputTextPlaceholder, inputTextValue, isRequired, labe
         }
     };
     const tagsMarkup = addedTags.map(renderTag);
-    const inputMarkup = (jsxs("div", Object.assign({ className: inputWrapperClassName, onClick: handleInputWrapperClick }, { children: [tagsMarkup, jsx("input", { ref: inputRef, id: id, value: inputTextValue, placeholder: inputTextPlaceholder, onChange: handleInputChange, required: isRequired, onFocus: handleInputFocus, onBlur: handleInputBlur, disabled: isDisabled, onKeyDown: handleInputKeyDown }, void 0)] }), void 0));
+    const inputMarkup = (jsxs("div", Object.assign({ className: inputWrapperClassName, onClick: handleInputWrapperClick }, { children: [tagsMarkup, jsx("input", { "aria-label": ariaLabel, ref: inputRef, id: id, value: inputTextValue, placeholder: inputTextPlaceholder, onChange: handleInputChange, required: isRequired, onFocus: handleInputFocus, onBlur: handleInputBlur, disabled: isDisabled, onKeyDown: handleInputKeyDown }, void 0)] }), void 0));
     const labelledFieldMarkup = (jsx(AlphaLabelledField, Object.assign({ id: id, label: label, isRequired: isRequired, error: hasError, helpText: helpText }, { children: inputMarkup }), void 0));
     return jsx("div", Object.assign({ className: className }, { children: labelledFieldMarkup }), void 0);
 };
@@ -23573,8 +23631,9 @@ var pako = {
  * @param {void} FileProps.onDelete - Function to return data
  * @param {string} FileProps.size - Size to show in input
  * @returns {symbol} - Element FileItem
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  */
-const FileItem = ({ name, addon, onDelete, size = 0 }) => (jsxs("div", Object.assign({ className: 'File' }, { children: [jsxs("div", Object.assign({ className: 'File__content__left' }, { children: [jsx(Icon, { name: 'Paperclip' }, void 0), jsx("p", Object.assign({ className: ' File__content__nameFile' }, { children: name }), void 0)] }), void 0), jsxs("div", Object.assign({ className: 'File__content__right' }, { children: [jsxs("button", Object.assign({ className: 'ButtonDeleteFile', onClick: onDelete }, { children: [jsx(Fragment, { children: addon }, void 0), jsx(Icon, { name: 'Close' }, void 0)] }), void 0), jsxs("p", Object.assign({ className: 'File__content__fileSize' }, { children: [(size / 1048576).toFixed(4), " M"] }), void 0)] }), void 0)] }), void 0));
+const FileItem = ({ ariaLabel, name, addon, onDelete, size = 0, }) => (jsxs("div", Object.assign({ className: 'File' }, { children: [jsxs("div", Object.assign({ className: 'File__content__left' }, { children: [jsx(Icon, { name: 'Paperclip' }, void 0), jsx("p", Object.assign({ className: ' File__content__nameFile' }, { children: name }), void 0)] }), void 0), jsxs("div", Object.assign({ className: 'File__content__right' }, { children: [jsxs("button", Object.assign({ "aria-label": `${ariaLabel}-delete`, className: 'ButtonDeleteFile', onClick: onDelete }, { children: [jsx(Fragment, { children: addon }, void 0), jsx(Icon, { name: 'Close' }, void 0)] }), void 0), jsxs("p", Object.assign({ className: 'File__content__fileSize' }, { children: [(size / 1048576).toFixed(4), " M"] }), void 0)] }), void 0)] }), void 0));
 
 /**
  * FileDrop is a component to upload files in any project
@@ -23602,9 +23661,10 @@ const FileItem = ({ name, addon, onDelete, size = 0 }) => (jsxs("div", Object.as
  * @param {string} Filedrop.label - To show label inside input
  * @param {string} Filedrop.labelButton - Text to show inside button
  * @param {boolean} Filedrop.isMultipleFiles - To active functionality to upload multiple files
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} The component.
  */
-const Filedrop = ({ arrayFiles = [], isEncodeBase64 = false, extensionsFiles, isGzip = false, onChange, onDelete, onCreateBase64, isEnableDragAndDrop = false, isReadOnly = false, label, labelButton, isMultipleFiles = false, isShowButton = true, }) => {
+const Filedrop = ({ arrayFiles = [], ariaLabel, isEncodeBase64 = false, extensionsFiles, isGzip = false, onChange, onDelete, onCreateBase64, isEnableDragAndDrop = false, isReadOnly = false, label, labelButton, isMultipleFiles = false, isShowButton = true, }) => {
     const refInputFile = useRef(null);
     // eslint-disable-next-line jsdoc/require-jsdoc
     function readFileAsDataURL(file) {
@@ -23715,7 +23775,7 @@ const Filedrop = ({ arrayFiles = [], isEncodeBase64 = false, extensionsFiles, is
         .filter(Boolean)
         .join(' ');
     return (jsxs("div", Object.assign({ className: 'Filedrop' }, { children: [arrayFiles &&
-                arrayFiles.map((file, i) => (jsx(FileItem, { name: file.name, size: file.size, onDelete: () => handleButtonDeleteFile(i) }, i))), !(arrayFiles && arrayFiles.length > 0) && (jsxs("div", Object.assign({ className: activeClassName, tabIndex: 0, onDrop: (e) => isEnableDragAndDrop && !isReadOnly ? dropHandler(e) : null, onDragOver: (e) => isEnableDragAndDrop && !isReadOnly ? dragOverHandler(e) : null }, { children: [jsx("div", Object.assign({ className: 'Filedrop__container' }, { children: jsxs("label", Object.assign({ className: 'Filedrop__container__label' }, { children: [jsx("div", Object.assign({ className: 'Filedrop__container__icon' }, { children: jsx(Icon, { name: 'Upload' }, void 0) }), void 0), label] }), void 0) }), void 0), jsx("div", Object.assign({ className: 'Filedrop__container__button' }, { children: isShowButton && (jsx(Button, Object.assign({ disabled: isReadOnly, onClick: uploadFile, appearance: 'secondary', id: 'buttonfiledrop' }, { children: labelButton }), void 0)) }), void 0), jsx("input", { className: 'Filedrop__fileItem', type: 'file', multiple: isMultipleFiles, ref: refInputFile, onChange: getFilesToUpload, accept: extensionsFiles === null || extensionsFiles === void 0 ? void 0 : extensionsFiles.join(', ') }, void 0)] }), void 0))] }), void 0));
+                arrayFiles.map((file, i) => (jsx(FileItem, { ariaLabel: ariaLabel, name: file.name, size: file.size, onDelete: () => handleButtonDeleteFile(i) }, i))), !(arrayFiles && arrayFiles.length > 0) && (jsxs("div", Object.assign({ className: activeClassName, tabIndex: 0, onDrop: (e) => isEnableDragAndDrop && !isReadOnly ? dropHandler(e) : null, onDragOver: (e) => isEnableDragAndDrop && !isReadOnly ? dragOverHandler(e) : null }, { children: [jsx("div", Object.assign({ className: 'Filedrop__container' }, { children: jsxs("label", Object.assign({ className: 'Filedrop__container__label' }, { children: [jsx("div", Object.assign({ className: 'Filedrop__container__icon' }, { children: jsx(Icon, { name: 'Upload' }, void 0) }), void 0), label] }), void 0) }), void 0), jsx("div", Object.assign({ className: 'Filedrop__container__button' }, { children: isShowButton && (jsx(Button, Object.assign({ "aria-label": `${ariaLabel}-uploadFiles`, disabled: isReadOnly, onClick: uploadFile, appearance: 'secondary', id: 'buttonfiledrop' }, { children: labelButton }), void 0)) }), void 0), jsx("input", { "aria-label": `fileDrop-${ariaLabel}`, className: 'Filedrop__fileItem', type: 'file', multiple: isMultipleFiles, ref: refInputFile, onChange: getFilesToUpload, accept: extensionsFiles === null || extensionsFiles === void 0 ? void 0 : extensionsFiles.join(', ') }, void 0)] }), void 0))] }), void 0));
 };
 Filedrop.FileItem = FileItem;
 
@@ -24237,7 +24297,7 @@ var es$1 = {
 	zw: zw
 };
 
-const InputPhoneNumber = ({ helperText, isHelperMode = false, isErrorMode = false, label, tooltip, disabled = false, placeholder, id, name, value, isFocused = false, onChange, onBlur, onFocus, defaultCountry = 'mx', language = 'es', preferredCountries = [], isRequired, tooltipLabel, }) => {
+const InputPhoneNumber = ({ ariaLabel, helperText, isHelperMode = false, isErrorMode = false, label, tooltip, disabled = false, placeholder, id, name, value, isFocused = false, onChange, onBlur, onFocus, defaultCountry = 'mx', language = 'es', preferredCountries = [], isRequired, tooltipLabel, }) => {
     const inputContainerRef = useRef(null);
     const [isFocusActive, setIsFocusActive] = useState(false);
     const [parentCoord, setParentCoords] = useState();
@@ -24286,10 +24346,10 @@ const InputPhoneNumber = ({ helperText, isHelperMode = false, isErrorMode = fals
         .filter(Boolean)
         .join(' ');
     const renderInput = () => {
-        return (jsx(PhoneInput, { containerClass: clasessContainer, country: defaultCountry, disabled: disabled, localization: language === 'en' ? {} : es$1, inputProps: {
-                name,
-                id,
-            }, onFocus: handleOnFocus, onBlur: handleOnBlur, onChange: handleOnChange, inputClass: clasessInput, placeholder: placeholder, preferredCountries: preferredCountries, value: value }, void 0));
+        return (jsx("div", Object.assign({ "aria-label": ariaLabel }, { children: jsx(PhoneInput, { containerClass: clasessContainer, country: defaultCountry, disabled: disabled, localization: language === 'en' ? {} : es$1, inputProps: {
+                    name,
+                    id,
+                }, onFocus: handleOnFocus, onBlur: handleOnBlur, onChange: handleOnChange, inputClass: clasessInput, placeholder: placeholder, preferredCountries: preferredCountries, value: value }, void 0) }), void 0));
     };
     const renderWithTooltip = () => (jsx(Tooltip, Object.assign({ isActive: isHelperMode || isErrorMode, position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position, text: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) || '', id: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.id) || '', toggleType: isErrorMode ? 'error' : 'primary' }, { children: renderInput() }), void 0));
     const tooltipLabelMarkup = useMemo(() => tooltipLabel ? (jsx(AlphaTooltip, Object.assign({ content: tooltipLabel.content, theme: tooltipLabel.theme, width: 'default', parentTooltip: parentCoord }, { children: jsx("span", Object.assign({ className: 'InputPhoneNumber__container__TooltipLabelContainer' }, { children: jsx(Icon, { name: tooltipLabel.icon || 'Info' }, void 0) }), void 0) }), void 0)) : null, [tooltipLabel, parentCoord]);
@@ -24313,11 +24373,12 @@ const InputPhoneNumber = ({ helperText, isHelperMode = false, isErrorMode = fals
  * @param {void} ToggleProps.onChange - Action to trigger when the Toggle changes state, returns the value of the Toggle
  * @param {string} ToggleProps.value - Toggle value
  * @param {object} ToggleProps.rest - Rest of props to be passed to the Toggle
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Returns the component
  */
-const Toggle = ({ isActive, isDisabled = false, label, onChange, color = 'mixed', id, value, name, }) => {
+const Toggle = ({ ariaLabel, isActive, isDisabled = false, label, onChange, color = 'mixed', id, value, name, }) => {
     const { theme } = useTheme();
-    return (jsxs("label", Object.assign({ className: `Toggle__content Toggle--${theme}` }, { children: [jsxs("div", Object.assign({ className: `Toggle__switch` }, { children: [jsx("input", { type: 'checkbox', onChange: (event) => {
+    return (jsxs("label", Object.assign({ className: `Toggle__content Toggle--${theme}` }, { children: [jsxs("div", Object.assign({ className: `Toggle__switch` }, { children: [jsx("input", { "aria-label": ariaLabel, type: 'checkbox', onChange: (event) => {
                             onChange &&
                                 onChange((isActive = event.target.checked), (id = id || ''));
                         }, value: value, name: name, checked: isActive, disabled: isDisabled }, void 0), jsx("span", { className: `Toggle__body Toggle__${color}` }, void 0)] }), void 0), jsx("span", Object.assign({ className: `Toggle__label ${isDisabled && 'Toggle__label-disabled'}` }, { children: label }), void 0)] }), void 0));
@@ -24342,7 +24403,7 @@ const XIcon = () => (jsx("svg", Object.assign({ width: '8', height: '8', viewBox
 
 const InfoIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: [jsx("path", { d: 'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' }, void 0), jsx("path", { d: 'M12 16V12' }, void 0), jsx("path", { d: 'M12 8H12.01' }, void 0)] }), void 0));
 
-const FormField = ({ hasError, label, labelInputFile, labelUploadButton, onChange, placeholder, type = 'text', value, iconHelperText, isRequired, defaultValue, files = [], extensionFiles, errorTooltipPosition, onRemoveFile, isReadOnly, addedTags = [], helpText, action, isDisabled, isMultiLine, maxLength, options, tagRemoveIcon, onBlur, weekdays, months, minLength, }) => {
+const FormField = ({ ariaLabel, hasError, label, labelInputFile, labelUploadButton, onChange, placeholder, type = 'text', value, iconHelperText, isRequired, defaultValue, files = [], extensionFiles, errorTooltipPosition, onRemoveFile, isReadOnly, addedTags = [], helpText, action, isDisabled, isMultiLine, maxLength, options, tagRemoveIcon, onBlur, weekdays, months, minLength, }) => {
     const FieldComponent = FORM_FIELDS[type];
     const [inputTagValue, setInputTagValue] = useState('');
     const handleInputTagValueChange = (newValue) => {
@@ -24399,7 +24460,7 @@ const FormField = ({ hasError, label, labelInputFile, labelUploadButton, onChang
     /* eslint-enable indent */
     const typeField = type === 'text' || type === 'number' ? type : undefined;
     const selected = type === 'select' && typeof value === 'string' ? [value] : value;
-    const fieldMarkup = (jsx("div", Object.assign({ className: cssClassName('FieldWrapper', isReadOnly && 'isReadOnly') }, { children: jsx(FieldComponent, { label: fieldLabel, 
+    const fieldMarkup = (jsx("div", Object.assign({ className: cssClassName('FieldWrapper', isReadOnly && 'isReadOnly') }, { children: jsx(FieldComponent, { "aria-label": ariaLabel, ariaLabel: ariaLabel, label: fieldLabel, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onChange: handleChange, placeholder: placeholder, value: fieldValue || defaultValue, isRequired: isRequired, isErrorMode: Boolean(hasError), arrayFiles: files, labelButton: labelUploadButton, extensionsFiles: extensionFiles, onDelete: onRemoveFile, readOnly: isReadOnly, isReadOnly: isReadOnly, addedTags: addedTags, inputTextPlaceholder: placeholder, inputTextValue: inputTagValue, onInputTextChange: handleInputTagValueChange, triggerKeys: [','], helpText: helpTextObj, helperText: helpText, color: 'primary', tagRemoveIcon: {
                 icon: tagRemoveIcon || XIcon,
@@ -24408,7 +24469,7 @@ const FormField = ({ hasError, label, labelInputFile, labelUploadButton, onChang
     return type === 'date' ? fieldMarkup : fullFieldMarkup;
 };
 
-function Form({ data, fields, fieldsSection, iconHelperText, onChange, fieldWrapperElement = jsx(Fragment$1, {}, void 0), tagRemoveIcon, extraPropsField, }) {
+function Form({ ariaLabel, data, fields, fieldsSection, iconHelperText, onChange, fieldWrapperElement = jsx(Fragment$1, {}, void 0), tagRemoveIcon, extraPropsField, }) {
     const handleChange = (name, newValue) => {
         if (data) {
             let nData = structuredClone(data);
@@ -24486,7 +24547,7 @@ function Form({ data, fields, fieldsSection, iconHelperText, onChange, fieldWrap
         // }
         if (type === 'date' && validation)
             hasError = validation;
-        const fieldMarkup = type ? (jsx(FormField, { label: label, type: type, placeholder: placeholder, iconHelperText: iconHelperText, isRequired: isRequired, onChange: (value) => handleChange(name, value), value: fieldValue, hasError: hasError, helpText: helpText, minLength: minLength, maxLength: maxLength, tagRemoveIcon: tagRemoveIcon, options: options, onBlur: onBlur, months: months, weekdays: weekdays, isDisabled: isDisabledField, isReadOnly: isReadOnlyField }, void 0)) : null;
+        const fieldMarkup = type ? (jsx(FormField, { ariaLabel: ariaLabel ? `${ariaLabel}-${name}` : ariaLabel, label: label, type: type, placeholder: placeholder, iconHelperText: iconHelperText, isRequired: isRequired, onChange: (value) => handleChange(name, value), value: fieldValue, hasError: hasError, helpText: helpText, minLength: minLength, maxLength: maxLength, tagRemoveIcon: tagRemoveIcon, options: options, onBlur: onBlur, months: months, weekdays: weekdays, isDisabled: isDisabledField, isReadOnly: isReadOnlyField }, void 0)) : null;
         if (typeof fieldWrapperElement !== 'string') {
             return cloneElement(fieldWrapperElement, Object.assign(Object.assign({}, fieldWrapperElement.props), { key: index }), fieldMarkup);
         }
@@ -24508,17 +24569,17 @@ function Form({ data, fields, fieldsSection, iconHelperText, onChange, fieldWrap
     return jsx(Fragment, { children: formMarkup }, void 0);
 }
 
-const SectionForm = ({ data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, }) => {
+const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, iconHelperText, onChange, onDelete, tagRemoveIcon, isDeletable, extraPropsField, }) => {
     // eslint-disable-next-line
     // @ts-ignore
     const wrapperMarkup = jsx(Grid.Item, { size: 3 }, void 0);
-    const formMarkup = (jsx(Form, { data: data, fields: fields, fieldsSection: fieldsSection, iconHelperText: iconHelperText, onChange: onChange, fieldWrapperElement: wrapperMarkup, tagRemoveIcon: tagRemoveIcon, extraPropsField: extraPropsField }, void 0));
+    const formMarkup = (jsx(Form, { ariaLabel: ariaLabel, data: data, fields: fields, fieldsSection: fieldsSection, iconHelperText: iconHelperText, onChange: onChange, fieldWrapperElement: wrapperMarkup, tagRemoveIcon: tagRemoveIcon, extraPropsField: extraPropsField }, void 0));
     const gridMarkup = jsx(Grid, Object.assign({ isMultiline: true }, { children: formMarkup }), void 0);
-    return (jsx(DeletableSection, Object.assign({ onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
+    return (jsx(DeletableSection, Object.assign({ ariaLabel: ariaLabel, onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
 };
 
 const COMPONENT_NAME$9 = 'DynamicForm';
-const DynamicForm = ({ dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
+const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
     const { theme } = useTheme();
     const handleChange = (contact, id) => {
         if (onChange) {
@@ -24543,11 +24604,11 @@ const DynamicForm = ({ dataFormArray = [], fields, fieldsSection, iconDeletable,
         const extraProps = extraPropsFieldsArray && index < extraPropsFieldsArray.length
             ? extraPropsFieldsArray[index]
             : undefined;
-        return (jsx(SectionForm, { data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps }, `DynamicForm-${form.id}-${index}}`));
+        return (jsx(SectionForm, { ariaLabel: ariaLabel, data: form, fields: fields, fieldsSection: fieldsSection, iconDeletable: iconDeletable, iconHelperText: iconHelperText, onChange: (formData) => handleChange(formData, form.id || ''), onDelete: () => handleDelete(form.id || ''), tagRemoveIcon: tagRemoveIcon, isDeletable: isDeletable, extraPropsField: extraProps }, `DynamicForm-${form.id}-${index}}`));
     };
     const contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$9}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
     const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, void 0);
-    const addContactButtonMarkup = onAddForm && (jsx(AlphaButton, Object.assign({ isTertiary: true, onClick: onAddForm.onClick }, { children: onAddForm.label }), void 0));
+    const addContactButtonMarkup = onAddForm && (jsx(AlphaButton, Object.assign({ ariaLabel: ariaLabel ? `${ariaLabel}--addNewForm` : ariaLabel, isTertiary: true, onClick: onAddForm.onClick }, { children: onAddForm.label }), void 0));
     const THEME_CLASS = `${theme}`;
     const className = cssClassName(COMPONENT_NAME$9, THEME_CLASS);
     return (jsxs("div", Object.assign({ className: className }, { children: [dividerMarkup, contactsMarkup, addContactButtonMarkup] }), void 0));
@@ -24586,20 +24647,21 @@ const EmptyState = ({ children, image, primaryAction, secondaryAction, tertiaryA
  * @param {FileDownloaderProps} FileDownloaderProps - FileDownloader Props.
  * @param {ReactNostringde} FileDownloaderProps.title - text to show inside element.
  * @param {Function} FileDownloaderProps.isDisabled - to show styles disabled.
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} The component.
  */
-const MAIN_CLASS$8 = 'FileDownloader';
-const FileDownloader = ({ title = 'Download', isDisabled, onDownload, }) => {
+const MAIN_CLASS$9 = 'FileDownloader';
+const FileDownloader = ({ ariaLabel, title = 'Download', isDisabled, onDownload, }) => {
     const className = [
-        MAIN_CLASS$8,
-        isDisabled && `${MAIN_CLASS$8}--is-disabled`,
+        MAIN_CLASS$9,
+        isDisabled && `${MAIN_CLASS$9}--is-disabled`,
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxs("div", Object.assign({ className: className }, { children: [title, jsx("button", Object.assign({ onClick: isDisabled ? undefined : onDownload }, { children: jsx(Icon, { name: 'Download' }, void 0) }), void 0)] }), void 0));
+    return (jsxs("div", Object.assign({ className: className }, { children: [title, jsx("button", Object.assign({ "aria-label": ariaLabel, onClick: isDisabled ? undefined : onDownload }, { children: jsx(Icon, { name: 'Download' }, void 0) }), void 0)] }), void 0));
 };
 
-const MAIN_CLASS$7 = 'Label';
+const MAIN_CLASS$8 = 'Label';
 /**
  * Label component shows a Label inside a rounded border
  *
@@ -24613,8 +24675,8 @@ const Label = ({ color = 'primary', intensity = 500, children, }) => {
     const { theme } = useTheme();
     /** Check if every prop has been passed and asign the class name to the className const */
     const className = [
-        MAIN_CLASS$7,
-        color && intensity && `${MAIN_CLASS$7}--is-${color}-${intensity}`,
+        MAIN_CLASS$8,
+        color && intensity && `${MAIN_CLASS$8}--is-${color}-${intensity}`,
         theme && `is-${color} is--${theme}-${intensity}`,
     ]
         .filter(Boolean)
@@ -28019,7 +28081,7 @@ const FilterControl = ({ filters, filtersNested, sorts, appliedFilters = null, a
  */
 const Item$1 = ({ children }) => (jsx("div", Object.assign({ className: 'FormLayout__item' }, { children: children }), void 0));
 
-const MAIN_CLASS$6 = 'FormLayout__items';
+const MAIN_CLASS$7 = 'FormLayout__items';
 /**
  *
  * @param {GroupProps} GroupProps - GroupProps
@@ -28034,9 +28096,9 @@ const Group = ({ children, condensed }) => {
         return jsx(Item$1, { children: child }, index);
     });
     const className = [
-        MAIN_CLASS$6,
-        !condensed && `${MAIN_CLASS$6}--grouped`,
-        condensed && `${MAIN_CLASS$6}--condensed`,
+        MAIN_CLASS$7,
+        !condensed && `${MAIN_CLASS$7}--grouped`,
+        condensed && `${MAIN_CLASS$7}--condensed`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -28214,7 +28276,7 @@ const Header$1 = ({ leftContent, rightContent, actions, userMenu, logo, extraAct
                                         : renderAction(item, i)), userMenu && (jsx(UserMenu, { onClick: userMenu.onClick, userName: userMenu.userName || '', picture: userMenu.picture, isOpen: userMenu.isOpen, items: userMenu.items, initials: userMenu.initials, onClose: userMenu.onClose }, void 0))] }), void 0)] }), void 0)] }), void 0), label && (jsx("div", Object.assign({ className: 'Header__label-container' }, { children: jsx(HeaderLabel, { label: label.label }, void 0) }), void 0))] }, void 0));
 };
 
-const MAIN_CLASS$5 = 'IndexList';
+const MAIN_CLASS$6 = 'IndexList';
 /**
  * IndexList component is used to list a Index array to display as list
  *
@@ -28225,11 +28287,11 @@ const MAIN_CLASS$5 = 'IndexList';
  */
 const IndexList = ({ activeValue, indexes, onSelectIndex }) => {
     const { theme } = useTheme();
-    const className = [MAIN_CLASS$5, theme && `${MAIN_CLASS$5}--is-${theme}`]
+    const className = [MAIN_CLASS$6, theme && `${MAIN_CLASS$6}--is-${theme}`]
         .filter(Boolean)
         .join(' ');
     return (jsx("ul", Object.assign({ className: className }, { children: indexes &&
-            indexes.map((indexObj) => (jsx("li", Object.assign({ className: `IndexList__label ${indexObj.value === activeValue
+            indexes.map((indexObj) => (jsx("li", Object.assign({ "aria-label": indexObj.ariaLabel, className: `IndexList__label ${indexObj.value === activeValue
                     ? `IndexList__label--is-active is--${theme}`
                     : ''}
             ${indexObj.isDisabled ? 'IndexList__label--is-disabled' : ''}`, onClick: () => onSelectIndex && indexObj.isDisabled === false
@@ -28251,8 +28313,9 @@ const IndexList = ({ activeValue, indexes, onSelectIndex }) => {
  * @param {Function} InlineEditProps.onEdit - Function to execute when click Edit
  * @param {Function} InlineEditProps.onSave - Function to execut when click Save
  * @param {Function} InlineEditProps.onInputChange - Function to execut when input changes
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  */
-const InlineEdit = ({ editIcon = 'Edit3', isDisable = false, onChange, onEdit, onSave, saveIcon = 'Check', size = 'small', state = 'display', value = '', }) => (jsx("div", Object.assign({ className: `InlineEdit InlineEdit--is-${size}` }, { children: state === 'display' ? (jsxs(Fragment, { children: [jsx("label", { children: value }, void 0), jsx(IconButton, { onClick: () => (onEdit ? onEdit() : null), icon: editIcon, size: size, appearance: 'tertiary', isDisabled: isDisable, disabled: isDisable }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: 'InlineEdit__input' }, { children: jsx(InputText, { isFocused: true, value: value, readOnly: false, onChange: (value) => onChange(value), onBlur: () => (onSave ? onSave() : null) }, void 0) }), void 0), jsx(IconButton, { onClick: () => (onSave ? onSave() : null), icon: saveIcon, size: size, appearance: 'tertiary', isDisabled: isDisable, disabled: isDisable }, void 0)] }, void 0)) }), void 0));
+const InlineEdit = ({ ariaLabel, editIcon = 'Edit3', isDisable = false, onChange, onEdit, onSave, saveIcon = 'Check', size = 'small', state = 'display', value = '', }) => (jsx("div", Object.assign({ className: `InlineEdit InlineEdit--is-${size}` }, { children: state === 'display' ? (jsxs(Fragment, { children: [jsx("label", { children: value }, void 0), jsx(IconButton, { "aria-label": `${ariaLabel}-edit`, onClick: () => (onEdit ? onEdit() : null), icon: editIcon, size: size, appearance: 'tertiary', isDisabled: isDisable, disabled: isDisable }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: 'InlineEdit__input' }, { children: jsx(InputText, { ariaLabel: `inlineInput-${ariaLabel}`, isFocused: true, value: value, readOnly: false, onChange: (value) => onChange(value), onBlur: () => (onSave ? onSave() : null) }, void 0) }), void 0), jsx(IconButton, { "aria-label": `${ariaLabel}-save`, onClick: () => (onSave ? onSave() : null), icon: saveIcon, size: size, appearance: 'tertiary', isDisabled: isDisable, disabled: isDisable }, void 0)] }, void 0)) }), void 0));
 
 /**
  * InputTag component is used to display as a tag any word
@@ -28279,8 +28342,9 @@ const InlineEdit = ({ editIcon = 'Edit3', isDisable = false, onChange, onEdit, o
  * @param {TagPropsInputTag[]} PageActionsProps.tags - Array of string to preload tags
  * @param {Tooltip} PageActionsProps.tooltip - Array of objects to preload tags
  * @param {keyToAddTag[]} PageActionsProps.triggerKeys - Array of string to set keys to add tag
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  */
-const InputTag = ({ helperText, isDisabled = false, isDanger = false, isFocused = false, isHelperMode = false, isReadOnly = false, label, onAddTag, onBlur, onChange, onDeleteTag, onFocus, placeholder, tags = [], tooltip, triggerKeys = [' ', ','], value, isRequired, tooltipLabel, }) => {
+const InputTag = ({ ariaLabel, helperText, isDisabled = false, isDanger = false, isFocused = false, isHelperMode = false, isReadOnly = false, label, onAddTag, onBlur, onChange, onDeleteTag, onFocus, placeholder, tags = [], tooltip, triggerKeys = [' ', ','], value, isRequired, tooltipLabel, }) => {
     const [isBoxHover, setIsBoxHover] = useState(false);
     const hiddenSpan = useRef(null);
     const inputTagFocus = useRef(null);
@@ -28344,7 +28408,7 @@ const InputTag = ({ helperText, isDisabled = false, isDanger = false, isFocused
         .filter(Boolean)
         .join(' ');
     const renderInput = () => (jsx("div", Object.assign({ className: 'InputTag__body' }, { children: jsxs("div", Object.assign({ className: boxClassName, onClick: focusInputTag, onMouseEnter: () => setIsBoxHover(!isFocused), onMouseLeave: () => setIsBoxHover(false), onBlur: handleOnBlur, tabIndex: -1 }, { children: [tags &&
-                    tags.map((tag, index) => (jsx(Tag, Object.assign({ onRemove: () => handleDeleteTag(tag.value), isDisabled: isDisabled, isDanger: tag.state === 'error' }, { children: tag.content }), `tag-${index}`))), jsx("span", Object.assign({ className: 'InputTag__hiddenValue', ref: hiddenSpan }, { children: value }), void 0), jsx("input", { className: `InputTag__input--is-hidden
+                    tags.map((tag, index) => (jsx(Tag, Object.assign({ onRemove: () => handleDeleteTag(tag.value), isDisabled: isDisabled, isDanger: tag.state === 'error' }, { children: tag.content }), `tag-${index}`))), jsx("span", Object.assign({ className: 'InputTag__hiddenValue', ref: hiddenSpan }, { children: value }), void 0), jsx("input", { "aria-label": ariaLabel, className: `InputTag__input--is-hidden
             ${isHelperMode ? 'InputTag__input--is-help' : ''}`, ref: inputTagFocus, type: 'text', placeholder: placeholder, onChange: handleInputChange, value: value, onKeyDown: handleKeyDown, disabled: isDisabled, readOnly: isReadOnly }, void 0)] }), void 0) }), void 0));
     const renderWithTooltip = () => (jsx(Tooltip, Object.assign({ isActive: isHelperMode || isDanger, position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position, text: tooltip && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) ? tooltip === null || tooltip === void 0 ? void 0 : tooltip.text : '', id: tooltip && (tooltip === null || tooltip === void 0 ? void 0 : tooltip.id) ? tooltip === null || tooltip === void 0 ? void 0 : tooltip.id : '', toggleType: isDanger ? 'error' : 'primary' }, { children: renderInput() }), void 0));
     const tooltipLabelMarkup = useMemo(() => tooltipLabel ? (jsx(AlphaTooltip, Object.assign({ content: tooltipLabel.content, theme: tooltipLabel.theme, width: 'default', parentTooltip: parentCoord }, { children: jsx("span", Object.assign({ className: 'InputTag__container__TooltipLabelContainer' }, { children: jsx(Icon, { name: tooltipLabel.icon || 'Info' }, void 0) }), void 0) }), void 0)) : null, [tooltipLabel, parentCoord]);
@@ -28566,7 +28630,7 @@ const JsonViewer = ({ downloadFunction, downloadBtnIcon = 'Paperclip', downloadB
 const ListInfo = ({ items }) => (jsx("div", Object.assign({ className: 'ListInfo' }, { children: items &&
         items.map((item, index) => (jsxs("div", Object.assign({ className: 'ListInfo__item' }, { children: [jsxs("div", Object.assign({ className: 'ListInfo__item__title-container' }, { children: [item.icon && jsx(Icon, { name: item.icon }, void 0), jsx("label", { children: item === null || item === void 0 ? void 0 : item.title }, void 0)] }), void 0), jsx("div", Object.assign({ className: 'ListInfo__item__content-container' }, { children: item === null || item === void 0 ? void 0 : item.content }), void 0)] }), index))) }), void 0));
 
-const MAIN_CLASS$4 = 'loader';
+const MAIN_CLASS$5 = 'loader';
 /**
  * Loader is mainly used to display a loading status.
  *
@@ -28581,18 +28645,18 @@ const MAIN_CLASS$4 = 'loader';
 const Loader = ({ icon, color = 'primary', size = 'medium' }) => {
     const { theme } = useTheme();
     const className = [
-        MAIN_CLASS$4,
-        `${MAIN_CLASS$4}--${theme}`,
-        color && `${MAIN_CLASS$4}--${color}`,
+        MAIN_CLASS$5,
+        `${MAIN_CLASS$5}--${theme}`,
+        color && `${MAIN_CLASS$5}--${color}`,
         theme && `is--${theme}`,
-        size && `${MAIN_CLASS$4}--${size}`,
+        size && `${MAIN_CLASS$5}--${size}`,
     ]
         .filter(Boolean)
         .join(' ');
     const classNameSvg = [
-        MAIN_CLASS$4,
-        `${MAIN_CLASS$4}__svg`,
-        color && `${MAIN_CLASS$4}__svg--${color}`,
+        MAIN_CLASS$5,
+        `${MAIN_CLASS$5}__svg`,
+        color && `${MAIN_CLASS$5}__svg--${color}`,
     ]
         .filter(Boolean)
         .join(' ');
@@ -28609,11 +28673,12 @@ const Loader = ({ icon, color = 'primary', size = 'medium' }) => {
  * @param {Object} ModalProps.extraAction - Object to create extra button in footer
  */
 const Footer = ({ position = 'flex-end', primaryAction, secondaryActions, extraAction, hideFooter = false, }) => {
-    const getButton = (actionBtn, btnAppearance) => {
-        return (jsx(Button, Object.assign({ onClick: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.onClick, appearance: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDanger) ? 'danger' : btnAppearance, disabled: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDisabled }, { children: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text }), void 0));
+    const getButton = (actionBtn, btnAppearance, ariaLabel) => {
+        return (jsx(Button, Object.assign({ "aria-label": ariaLabel, onClick: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.onClick, appearance: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDanger) ? 'danger' : btnAppearance, disabled: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDisabled }, { children: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text }), void 0));
     };
     return (jsx(Fragment, { children: hideFooter === false && (jsxs("div", Object.assign({ className: `Modal__footer ${extraAction ? 'Modal__footer--is-space-between' : ''}` }, { children: [extraAction && jsx("div", { children: getButton(extraAction, 'secondary') }, void 0), jsxs("div", Object.assign({ className: `Modal__footer__button Modal__footer--is-${extraAction ? 'flex-end' : position}` }, { children: [secondaryActions &&
-                            secondaryActions.map((btn, index) => (jsx("div", { children: getButton(btn, btn.appearance || 'secondary') }, `secondarBtn-${index}`))), primaryAction && getButton(primaryAction, 'primary')] }), void 0)] }), void 0)) }, void 0));
+                            secondaryActions.map((btn, index) => (jsx("div", { children: getButton(btn, btn.appearance || 'secondary', btn.ariaLabel) }, `secondarBtn-${index}`))), primaryAction &&
+                            getButton(primaryAction, 'primary', primaryAction.ariaLabel)] }), void 0)] }), void 0)) }, void 0));
 };
 
 /**
@@ -28624,8 +28689,8 @@ const Footer = ({ position = 'flex-end', primaryAction, secondaryActions, extraA
  * @param {string} ModalHeaderProps.media - Icon name to create a media component to display in header
  * @param {Function} ModalHeaderProps.onClose - Function to exeute when clic close icon modal
  */
-const ModalHeader = ({ title, media, onClose, hideHeader = false, mediaTheme, }) => {
-    return (jsx(Fragment, { children: hideHeader === false && (jsxs("div", Object.assign({ className: 'Modal__header' }, { children: [jsxs("div", Object.assign({ className: 'Modal__header__title' }, { children: [media && (jsx(Media, { icon: media, size: 'large', appearance: 'info', themeAppearance: mediaTheme }, void 0)), title] }), void 0), jsx("div", Object.assign({ className: 'Modal__header__close' }, { children: onClose && (jsx("button", Object.assign({ onClick: onClose }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) }), void 0)] }), void 0)) }, void 0));
+const ModalHeader = ({ ariaLabel, title, media, onClose, hideHeader = false, mediaTheme, }) => {
+    return (jsx(Fragment, { children: hideHeader === false && (jsxs("div", Object.assign({ className: 'Modal__header' }, { children: [jsxs("div", Object.assign({ className: 'Modal__header__title' }, { children: [media && (jsx(Media, { icon: media, size: 'large', appearance: 'info', themeAppearance: mediaTheme }, void 0)), title] }), void 0), jsx("div", Object.assign({ className: 'Modal__header__close' }, { children: onClose && (jsx("button", Object.assign({ "aria-label": `${ariaLabel}--close`, onClick: onClose }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) }), void 0)] }), void 0)) }, void 0));
 };
 
 /**
@@ -28666,7 +28731,14 @@ const Content = ({ children, hasPane = false, height }) => (jsx("div", Object.as
  * @param {string} ModalProps.title - Title to display in modal header
  * @param {boolean} ModalProps.hasPane - Validate if it has Pane
  */
-const Modal = ({ children, isOpen, media, onClose, position, primaryAction, secondaryActions, extraAction, hideFooter = false, hideHeader = false, size = 'medium', title, hasPane = false, id, mediaTheme, height, }) => {
+const Modal = ({ ariaLabel, children, isOpen, media, onClose, position, primaryAction, secondaryActions, extraAction, hideFooter = false, hideHeader = false, size = 'medium', title, hasPane = false, id, mediaTheme, height, }) => {
+    const handleOnKeyUp = (event) => {
+        if (isOpen && event.key == 'Escape' && onClose)
+            onClose();
+    };
+    useEffect(() => {
+        document.addEventListener('keyup', handleOnKeyUp);
+    });
     useEffect(() => {
         if (isOpen)
             document.body.style.overflow = 'hidden';
@@ -28674,7 +28746,7 @@ const Modal = ({ children, isOpen, media, onClose, position, primaryAction, seco
             document.body.removeAttribute('style');
     }, [isOpen]);
     return (jsx(Fragment, { children: isOpen &&
-            createPortal(jsx("div", Object.assign({ className: 'Modal__portal-container' }, { children: jsxs("div", Object.assign({ id: id, className: `Modal__container Modal__container--is-${size}` }, { children: [hideHeader === false && (jsx(Modal.Header, { title: title, media: media, onClose: onClose, mediaTheme: mediaTheme }, void 0)), jsx(Modal.Content, Object.assign({ hasPane: hasPane, height: height }, { children: children }), void 0), hideFooter === false && (jsx(Modal.Footer, { primaryAction: primaryAction, secondaryActions: secondaryActions, extraAction: extraAction, position: position }, void 0))] }), void 0) }), void 0), document.getElementsByTagName('body')[0]) }, void 0));
+            createPortal(jsx("div", Object.assign({ className: 'Modal__portal-container' }, { children: jsxs("div", Object.assign({ id: id, className: `Modal__container Modal__container--is-${size}` }, { children: [hideHeader === false && (jsx(Modal.Header, { ariaLabel: ariaLabel, title: title, media: media, onClose: onClose, mediaTheme: mediaTheme }, void 0)), jsx(Modal.Content, Object.assign({ hasPane: hasPane, height: height }, { children: children }), void 0), hideFooter === false && (jsx(Modal.Footer, { primaryAction: primaryAction, secondaryActions: secondaryActions, extraAction: extraAction, position: position }, void 0))] }), void 0) }), void 0), document.getElementsByTagName('body')[0]) }, void 0));
 };
 Modal.Header = ModalHeader;
 Modal.Pane = Pane;
@@ -28691,7 +28763,7 @@ Modal.Footer = Footer;
  * @param {boolean} NipProps.nipLength - Nip length
  * @returns {symbol} - Returns the component
  */
-const Nip = ({ onChange, isDisabled = false, nip = ['', '', '', ''], nipLength, }) => {
+const Nip = ({ ariaLabel, onChange, isDisabled = false, nip = ['', '', '', ''], nipLength, }) => {
     const { theme } = useTheme();
     const refsInputs = nipLength
         ? Array.from({ length: 10 }, () => useRef(null))
@@ -28736,7 +28808,7 @@ const Nip = ({ onChange, isDisabled = false, nip = ['', '', '', ''], nipLength,
     const renderInputs = useCallback(() => {
         const items = [];
         const itemsToMap = Array.from({ length: arrayLenght }, (_, i) => i + 1);
-        itemsToMap.map((_, index) => items.push(jsx("input", { className: `input-validation--${theme}`, maxLength: 1, id: `nip-${index}`, value: nip[index], onChange: (e) => handleNipChange(e.target.value, index), onPaste: handlePaste, onKeyUp: (e) => handleKeyUp(e, index), type: 'text', ref: refsInputs[index], disabled: isDisabled }, index)));
+        itemsToMap.map((_, index) => items.push(jsx("input", { "aria-label": `${ariaLabel}-${index}`, className: `input-validation--${theme}`, maxLength: 1, id: `nip-${index}`, value: nip[index], onChange: (e) => handleNipChange(e.target.value, index), onPaste: handlePaste, onKeyUp: (e) => handleKeyUp(e, index), type: 'text', ref: refsInputs[index], disabled: isDisabled }, index)));
         return items;
     }, [nip]);
     return jsx("div", Object.assign({ className: 'Nip__card' }, { children: renderInputs() }), void 0);
@@ -28773,10 +28845,10 @@ const Header = ({ breadcrumb, className, hasDivider, primaryAction, secondaryAct
         .filter(Boolean)
         .join(' ');
     const titleIsString = typeof title === 'string';
-    return (jsxs("div", Object.assign({ className: headerClassName }, { children: [breadcrumb && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__ExtraActionsContainer` }, { children: breadcrumb && (jsx(Button, Object.assign({ appearance: 'secondary', onClick: breadcrumb.onClick, icon: 'ChevronLeft' }, { children: breadcrumb.text }), void 0)) }), void 0)), thumbnail && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__ThumbnailContainer` }, { children: jsx(Thumbnail, { alt: thumbnail.alt, source: thumbnail.source, icon: thumbnail.icon, fit: thumbnail.fit, isTransparent: thumbnail.isTransparent, hasShadow: thumbnail.hasShadow, size: 'huge' }, void 0) }), void 0)), jsxs("div", Object.assign({ className: `${BASE_CLASS$1}__HeaderDataContainer` }, { children: [((title !== null && title !== undefined) ||
+    return (jsxs("div", Object.assign({ className: headerClassName }, { children: [breadcrumb && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__ExtraActionsContainer` }, { children: breadcrumb && (jsx(Button, Object.assign({ "aria-label": breadcrumb.ariaLabel, appearance: 'secondary', onClick: breadcrumb.onClick, icon: 'ChevronLeft' }, { children: breadcrumb.text }), void 0)) }), void 0)), thumbnail && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__ThumbnailContainer` }, { children: jsx(Thumbnail, { alt: thumbnail.alt, source: thumbnail.source, icon: thumbnail.icon, fit: thumbnail.fit, isTransparent: thumbnail.isTransparent, hasShadow: thumbnail.hasShadow, size: 'huge' }, void 0) }), void 0)), jsxs("div", Object.assign({ className: `${BASE_CLASS$1}__HeaderDataContainer` }, { children: [((title !== null && title !== undefined) ||
                         primaryAction ||
                         (secondaryActions && secondaryActions.length)) && (jsxs("div", Object.assign({ className: `${BASE_CLASS$1}__TitleActionsContainer` }, { children: [title && titleIsString && (jsx(Title, Object.assign({ appearence: 'subheading', size: 'large', element: 'h1' }, { children: title }), void 0)), title && !titleIsString && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__TitleNode` }, { children: title }), void 0)), jsxs("div", Object.assign({ className: `${BASE_CLASS$1}__ActionsContainer` }, { children: [addon && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__ActionsContainer__AddonContainer` }, { children: addon }), void 0)), secondaryActions &&
-                                        secondaryActions.map((action, i) => (jsx(Button, Object.assign({ appearance: action.isDanger ? 'danger' : 'secondary', disabled: action.isDisabled, onClick: action.onClick }, { children: action.text }), `Header-Secondary-Actions-${i}`))), primaryAction && (jsx(Button, Object.assign({ appearance: primaryAction.appearance
+                                        secondaryActions.map((action, i) => (jsx(Button, Object.assign({ "aria-label": action.ariaLabel, appearance: action.isDanger ? 'danger' : 'secondary', disabled: action.isDisabled, onClick: action.onClick }, { children: action.text }), `Header-Secondary-Actions-${i}`))), primaryAction && (jsx(Button, Object.assign({ "aria-label": primaryAction.ariaLabel, appearance: primaryAction.appearance
                                             ? primaryAction.appearance
                                             : 'primary', isDanger: primaryAction.isDanger, disabled: primaryAction.isDisabled, onClick: primaryAction.onClick }, primaryAction, { children: primaryAction.text }), void 0))] }), void 0)] }), void 0)), titleMetaData && (jsx("div", Object.assign({ className: `${BASE_CLASS$1}__TitleMetaDataContainer` }, { children: titleMetaData }), void 0))] }), void 0)] }), void 0));
 };
@@ -28835,8 +28907,9 @@ Page.Header = Header;
  * @param {Function} PaginationProps.onNext - Acction to execute when click on next button
  * @param {hasPrevious} PaginationProps.hasPrevious - Flag to disable previous button
  * @param {hasNext} PaginationProps.hasNext - Flag to disable next button
+ * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  */
-const Pagination = ({ previousButtonContent, nextButtonContent, onPrevious, onNext, hasPrevious = false, hasNext = false, }) => (jsxs("div", Object.assign({ className: 'Pagination__container' }, { children: [jsx("div", Object.assign({ className: 'Pagination__previous-button' }, { children: hasPrevious && (jsxs("button", Object.assign({ className: 'Pagination__button', onClick: onPrevious }, { children: [jsx(Icon, { name: 'ChevronLeft' }, void 0), previousButtonContent] }), void 0)) }), void 0), jsx("div", Object.assign({ className: 'Pagination__next-button' }, { children: hasNext && (jsxs("button", Object.assign({ className: 'Pagination__button', onClick: onNext }, { children: [nextButtonContent, jsx(Icon, { name: 'ChevronRight' }, void 0)] }), void 0)) }), void 0)] }), void 0));
+const Pagination = ({ ariaLabel, previousButtonContent, nextButtonContent, onPrevious, onNext, hasPrevious = false, hasNext = false, }) => (jsxs("div", Object.assign({ className: 'Pagination__container' }, { children: [jsx("div", Object.assign({ className: 'Pagination__previous-button' }, { children: hasPrevious && (jsxs("button", Object.assign({ "aria-label": `${ariaLabel}-prev`, className: 'Pagination__button', onClick: onPrevious }, { children: [jsx(Icon, { name: 'ChevronLeft' }, void 0), previousButtonContent] }), void 0)) }), void 0), jsx("div", Object.assign({ className: 'Pagination__next-button' }, { children: hasNext && (jsxs("button", Object.assign({ "aria-label": `${ariaLabel}-next`, className: 'Pagination__button', onClick: onNext }, { children: [nextButtonContent, jsx(Icon, { name: 'ChevronRight' }, void 0)] }), void 0)) }), void 0)] }), void 0));
 
 /**
  * PanelFooter component is used as footer in Panel component
@@ -28849,7 +28922,7 @@ const Pagination = ({ previousButtonContent, nextButtonContent, onPrevious, onNe
  */
 const PanelFooter = ({ positionButtons = 'flex-end', primaryAction, secondaryActions, extraAction, }) => {
     const getButton = (actionBtn, btnAppearance) => {
-        return (jsx(Button, Object.assign({ onClick: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.onClick, appearance: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDanger) ? 'danger' : btnAppearance, disabled: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDisabled }, { children: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text }), void 0));
+        return (jsx(Button, Object.assign({ "aria-label": primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.ariaLabel, onClick: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.onClick, appearance: (actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDanger) ? 'danger' : btnAppearance, disabled: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.isDisabled }, { children: actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text }), void 0));
     };
     return (jsxs("div", Object.assign({ className: `Panel__footer ${extraAction ? 'Panel__footer--is-space-between' : ''}` }, { children: [extraAction && jsx("div", { children: getButton(extraAction, 'secondary') }, void 0), jsxs("div", Object.assign({ className: `Panel__footer__button Panel__footer--is-${extraAction ? 'flex-end' : positionButtons}` }, { children: [secondaryActions &&
                         secondaryActions.map((btn, index) => (jsx("div", { children: getButton(btn, btn.appearance || 'secondary') }, `secondarBtn-${index}`))), primaryAction && getButton(primaryAction, 'primary')] }), void 0)] }), void 0));
@@ -28868,25 +28941,27 @@ const PanelFooter = ({ positionButtons = 'flex-end', primaryAction, secondaryAct
  * @param {ThemeType} PanelHeaderProps.theme - Theme to display in Connector component
  */
 const PanelHeader = ({ alt = '', icon, image, title, onClose, headerExtraActions, theme = 'CLOUD', }) => {
-    return (jsxs("div", Object.assign({ className: 'Panel__header' }, { children: [jsxs("div", Object.assign({ className: 'Panel__header__title' }, { children: [(image || icon) && (jsx(Connector, { id: `Panel--${title}`, alt: alt, icon: icon, image: image, theme: theme }, void 0)), title] }), void 0), headerExtraActions && (jsx("div", Object.assign({ className: 'Panel__header__extra-actions' }, { children: headerExtraActions.map((action) => (jsx(IconButton, { appearance: 'secondary', icon: action.iconName, onClick: action.onClick }, void 0))) }), void 0)), jsx("div", Object.assign({ className: 'Panel__header__close' }, { children: onClose && (jsx("button", Object.assign({ onClick: onClose }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) }), void 0)] }), void 0));
+    return (jsxs("div", Object.assign({ className: 'Panel__header' }, { children: [jsxs("div", Object.assign({ className: 'Panel__header__title' }, { children: [(image || icon) && (jsx(Connector, { id: `Panel--${title}`, alt: alt, icon: icon, image: image, theme: theme }, void 0)), title] }), void 0), headerExtraActions && (jsx("div", Object.assign({ className: 'Panel__header__extra-actions' }, { children: headerExtraActions.map((action) => (jsx(IconButton, { "aria-label": action.ariaLabel, appearance: 'secondary', icon: action.iconName, onClick: action.onClick }, void 0))) }), void 0)), jsx("div", Object.assign({ className: 'Panel__header__close' }, { children: onClose && (jsx("button", Object.assign({ "aria-label": 'panel-close', onClick: onClose }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) }), void 0)] }), void 0));
 };
 
-const MAIN_CLASS$3 = 'Panel';
+const MAIN_CLASS$4 = 'Panel';
 const Panel = ({ children, position, height, isOpen, id, alt = '', icon, image, title, onClose, headerExtraActions, theme = 'CLOUD', positionButtons = 'flex-end', primaryAction, secondaryActions, extraAction, }) => {
-    const className = [
-        `${MAIN_CLASS$3}__container`,
-        position && `${MAIN_CLASS$3}__container--is-${position}`,
-    ]
-        .filter(Boolean)
-        .join(' ');
+    const className = cssClassName(`${MAIN_CLASS$4}__container`, position && `is-${position}`);
     const maxHeightStyle = { height: height };
+    const handleOnKeyUp = (event) => {
+        if (isOpen && event.key == 'Escape' && onClose)
+            onClose();
+    };
+    useEffect(() => {
+        document.addEventListener('keyup', handleOnKeyUp);
+    });
     return (jsx(Fragment, { children: isOpen &&
-            createPortal(jsxs("div", Object.assign({ id: id, className: className, style: maxHeightStyle }, { children: [jsx(PanelHeader, { alt: alt, icon: icon, image: image, title: title, onClose: onClose, theme: theme, headerExtraActions: headerExtraActions }, void 0), jsx("div", Object.assign({ className: `${MAIN_CLASS$3}__body` }, { children: children }), void 0), jsx(PanelFooter, { positionButtons: positionButtons, primaryAction: primaryAction, secondaryActions: secondaryActions, extraAction: extraAction }, void 0)] }), void 0), document.querySelector('body')) }, void 0));
+            createPortal(jsxs("div", Object.assign({ id: id, className: className, style: maxHeightStyle }, { children: [jsx(PanelHeader, { alt: alt, icon: icon, image: image, title: title, onClose: onClose, theme: theme, headerExtraActions: headerExtraActions }, void 0), jsx("div", Object.assign({ className: `${MAIN_CLASS$4}__body` }, { children: children }), void 0), jsx(PanelFooter, { positionButtons: positionButtons, primaryAction: primaryAction, secondaryActions: secondaryActions, extraAction: extraAction }, void 0)] }), void 0), document.querySelector('body')) }, void 0));
 };
 Panel.Header = PanelHeader;
 Panel.Footer = PanelFooter;
 
-const MAIN_CLASS$2 = 'Progress__item';
+const MAIN_CLASS$3 = 'Progress__item';
 /**
  * Component for showing ProgressBar.
  *
@@ -28900,8 +28975,8 @@ const Progress = ({ steps }) => {
     const { theme } = useTheme();
     return (jsx("div", Object.assign({ className: 'Progress' }, { children: steps === null || steps === void 0 ? void 0 : steps.map((step, i) => {
             const className = [
-                MAIN_CLASS$2,
-                (step === null || step === void 0 ? void 0 : step.status) && `${MAIN_CLASS$2}--is-${step === null || step === void 0 ? void 0 : step.status}`,
+                MAIN_CLASS$3,
+                (step === null || step === void 0 ? void 0 : step.status) && `${MAIN_CLASS$3}--is-${step === null || step === void 0 ? void 0 : step.status}`,
             ]
                 .filter(Boolean)
                 .join(' ');
@@ -29916,7 +29991,7 @@ const Section = ({ items, title, empty }) => {
  */
 const SideMenu = ({ children, secondaryActions }) => (jsx(BrowserRouter, { children: jsxs("div", Object.assign({ className: 'SideMenu' }, { children: [jsx("div", Object.assign({ className: 'SideMenu__body-container' }, { children: children }), void 0), jsx("div", Object.assign({ className: 'SideMenu__elements-footer' }, { children: secondaryActions &&
                     secondaryActions.length > 0 &&
-                    secondaryActions.map((item, i) => item.icon && (jsx(IconButton, { icon: item === null || item === void 0 ? void 0 : item.icon, onClick: item.onClick, isRound: true, appearance: 'secondary', size: 'medium' }, i))) }), void 0)] }), void 0) }, void 0));
+                    secondaryActions.map((item, i) => item.icon && (jsx(IconButton, { "aria-label": item.ariaLabel, icon: item === null || item === void 0 ? void 0 : item.icon, onClick: item.onClick, isRound: true, appearance: 'secondary', size: 'medium' }, i))) }), void 0)] }), void 0) }, void 0));
 SideMenu.Section = Section;
 
 /**
@@ -29993,7 +30068,7 @@ const Spinner = ({ isOpen = false, appearance = 'info', themeAppearance, }) => {
  */
 const Item = ({ children }) => (jsx("div", Object.assign({ className: 'Stack__item' }, { children: children }), void 0));
 
-const MAIN_CLASS$1 = 'Stack';
+const MAIN_CLASS$2 = 'Stack';
 /**
  *
  * @param {StackProps}  StackProps - StackProps
@@ -30002,7 +30077,7 @@ const MAIN_CLASS$1 = 'Stack';
  * @returns {symbol} - Element Cover
  */
 const Stack = ({ children, orientation }) => {
-    const className = [MAIN_CLASS$1, orientation && `${MAIN_CLASS$1}--${orientation}`]
+    const className = [MAIN_CLASS$2, orientation && `${MAIN_CLASS$2}--${orientation}`]
         .filter(Boolean)
         .join(' ');
     const renderItems = (child, index) => (jsx(Item, { children: child }, index));
@@ -30067,7 +30142,7 @@ const Table = ({ headings, headingsTypes, children, id, onSelectAllRows, areAllR
             onSelectAllRows(!areAllRowsSelected);
         }
     };
-    const checkboxSelectAllRowsMarkup = onSelectAllRows ? (jsx("th", { children: jsx(Checkbox, { onChange: handleOnChangeAllSelected, isChecked: areAllRowsSelected, value: 'all', id: 'allSelected' }, void 0) }, void 0)) : null;
+    const checkboxSelectAllRowsMarkup = onSelectAllRows ? (jsx("th", { children: jsx(Checkbox, { "aria-label": 'selectAllItems', onChange: handleOnChangeAllSelected, isChecked: areAllRowsSelected, value: 'all', id: 'allSelected' }, void 0) }, void 0)) : null;
     return (jsxs("table", Object.assign({ className: 'Table', id: id }, { children: [jsx("thead", { children: jsxs("tr", { children: [checkboxSelectAllRowsMarkup, headings === null || headings === void 0 ? void 0 : headings.map((head, i) => (jsx("th", Object.assign({ className: headingsTypes && headingsTypes[i] === 'numeric'
                                 ? 'Table__text-right'
                                 : '' }, { children: head }), i)))] }, void 0) }, void 0), jsx("tbody", Object.assign({ id: 'tbody' }, { children: children }), void 0)] }), void 0));
@@ -30088,10 +30163,10 @@ Table.Cell = Cell;
  */
 const ThreadItem = ({ mediaAppearance, mediaIcon, title, metaData, children, }) => (jsxs("div", Object.assign({ className: 'ThreadItem' }, { children: [jsxs("div", Object.assign({ className: 'ThreadItem__elements' }, { children: [jsx(Media, { icon: mediaIcon, appearance: mediaAppearance, size: 'medium' }, void 0), jsxs("div", Object.assign({ className: 'ThreadItem__information' }, { children: [jsx("span", Object.assign({ className: 'ThreadItem__information-title' }, { children: title }), void 0), jsx("span", Object.assign({ className: 'ThreadItem__information-metaData' }, { children: metaData }), void 0)] }), void 0)] }), void 0), jsx("div", Object.assign({ className: 'ThreadItem__children' }, { children: children }), void 0)] }), void 0));
 
-const MAIN_CLASS = 'Tile';
+const MAIN_CLASS$1 = 'Tile';
 const Tile = ({ isSelected, media, onClick, title, value, subtitle = '', mediaSize = 'large', rightMedia, tags, }) => {
     const { theme } = useTheme();
-    const classes = cssClassName(`${MAIN_CLASS}__Container`, theme && `is--${theme}`, isSelected && 'is-selected');
+    const classes = cssClassName(`${MAIN_CLASS$1}__Container`, theme && `is--${theme}`, isSelected && 'is-selected');
     const handleOnClick = () => {
         if (onClick && value)
             onClick(value);
@@ -30324,7 +30399,7 @@ const FilterField = ({ label, isRequired = false, field, onRemove, name, }) => {
 };
 
 const COMPONENT_NAME$1 = 'Filters';
-const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters, onCleanFilters, onAddFilter, addFilterButtonIcon, addFilterButtonLabel, clearButtonLabel, searchButtonLabel, extraActions, selectedFilters = [], }) => {
+const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appliedFilters, onCleanFilters, onAddFilter, addFilterButtonIcon, addFilterButtonLabel, clearButtonLabel, searchButtonLabel, extraActions, selectedFilters = [], }) => {
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const mainContainerRef = useRef(null);
     const handleSelectFilter = (selected) => {
@@ -30336,7 +30411,7 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
         }
     };
     const isAddFilterButtonDisabled = filters.length === selectedFilters.length;
-    const addFilterButtonMarkup = (jsx(AlphaButton, Object.assign({ isTertiary: true, onClick: () => setIsPopoverOpen(true), isDisabled: isAddFilterButtonDisabled, icon: addFilterButtonIcon }, { children: addFilterButtonLabel }), void 0));
+    const addFilterButtonMarkup = (jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-addFilter`, isTertiary: true, onClick: () => setIsPopoverOpen(true), isDisabled: isAddFilterButtonDisabled, icon: addFilterButtonIcon }, { children: addFilterButtonLabel }), void 0));
     const optionListItems = filters
         .filter((filter) => !selectedFilters.includes(filter.key))
         .map((filter) => ({
@@ -30348,7 +30423,7 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
         ? extraActions.map((extraAction, index) => (createElement(AlphaButton, Object.assign({}, extraAction, { key: `extra-action-${index}` }), extraAction.label)))
         : null;
     const secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SecondaryActionsWrapper` }, { children: availableFiltersPopoverMarkup }), void 0));
-    const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__MainActionsWrapper` }, { children: [extraActionsMarkup, jsx(AlphaButton, Object.assign({ onClick: onCleanFilters, isDisabled: !appliedFilters.length && !selectedFilters.length }, { children: clearButtonLabel }), void 0), jsx(AlphaButton, Object.assign({ isDisabled: !appliedFilters.length && !selectedFilters.length, isPrimary: true, onClick: onApplyFilters }, { children: searchButtonLabel }), void 0)] }), void 0));
+    const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__MainActionsWrapper` }, { children: [extraActionsMarkup, jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-cleanFilters`, onClick: onCleanFilters, isDisabled: !appliedFilters.length && !selectedFilters.length }, { children: clearButtonLabel }), void 0), jsx(AlphaButton, Object.assign({ ariaLabel: `${ariaLabel}-searchFilters`, isDisabled: !appliedFilters.length && !selectedFilters.length, isPrimary: true, onClick: onApplyFilters }, { children: searchButtonLabel }), void 0)] }), void 0));
     const handleRemoveFilter = (filter) => {
         onRemoveFilter === null || onRemoveFilter === void 0 ? void 0 : onRemoveFilter(filter);
     };
@@ -30367,11 +30442,43 @@ const Filters = ({ filters = [], onApplyFilters, onRemoveFilter, appliedFilters,
 };
 
 const COMPONENT_NAME = 'Link';
-const Link = ({ children, className: classNameProp, component, to, }) => {
+const Link = ({ children, className: classNameProp, component, to, target, }) => {
     const Component = component;
     const className = cssClassName(COMPONENT_NAME, classNameProp);
-    return (jsx(Component, Object.assign({ className: className, to: to }, { children: children }), void 0));
+    return (jsx(Component, Object.assign({ className: className, to: to, target: target }, { children: children }), void 0));
+};
+
+const MAIN_CLASS = 'AlphaGraphicCard';
+const AlphaGraphicCard = ({ data }) => {
+    const renderGraphic = (dataGraphic, index) => {
+        const { label, percent } = dataGraphic;
+        return (jsxs("div", Object.assign({ className: `${MAIN_CLASS}__GraphicContainerWrapper` }, { children: [jsx("div", { className: `${MAIN_CLASS}__Graphic`, style: { width: `${percent}%` } }, void 0), jsx("span", Object.assign({ className: `${MAIN_CLASS}__GraphicLabel` }, { children: label }), void 0)] }), `graphic-item-${index}`));
+    };
+    const renderTotal = (dataGraphic, index, hidePercent) => {
+        const { percent, total } = dataGraphic;
+        return (jsxs("div", Object.assign({ className: `${MAIN_CLASS}__TotalContainer` }, { children: [!hidePercent ? (jsxs(Fragment, { children: [jsxs("span", { children: [percent, "%"] }, void 0), jsx("span", { className: `${MAIN_CLASS}__TotalDivider` }, void 0)] }, void 0)) : null, jsx("span", { children: total }, void 0)] }), `total-graphic-item-${index}`));
+    };
+    const renderContent = (dataCard) => {
+        const { title, dataGraphics, variant, hidePercent } = dataCard;
+        const classesGraphicWrapper = cssClassName(`${MAIN_CLASS}__GraphicWrapper`, variant || 'primary');
+        const classesTotalWrapper = cssClassName(`${MAIN_CLASS}__TotalWrapper`, variant || 'primary');
+        return (jsxs("div", Object.assign({ className: `${MAIN_CLASS}__DataContainer` }, { children: [jsx("div", Object.assign({ className: `${MAIN_CLASS}__TitleContainer` }, { children: title }), void 0), jsxs("div", Object.assign({ className: `${MAIN_CLASS}__GraphicTotalWrapper` }, { children: [jsx("div", Object.assign({ className: classesGraphicWrapper }, { children: dataGraphics.map(renderGraphic) }), void 0), jsx("div", Object.assign({ className: classesTotalWrapper }, { children: dataGraphics.map((item, index) => renderTotal(item, index, hidePercent)) }), void 0)] }), void 0)] }), void 0));
+    };
+    const renderContainer = (item, index, allItems) => {
+        const totalItems = allItems.length - 1;
+        const isFirst = index === 0;
+        const isLast = index === totalItems;
+        const isStartRow = isFirst || index % 4 === 0;
+        const isEndRow = !isFirst && (index + 1) % 4 === 0;
+        const isMiddle = !isFirst && !isStartRow && !isEndRow;
+        const isOnlyRow = allItems.length <= 3;
+        const haveItemTop = index > 3;
+        const haveItemBottom = index + 4 <= totalItems;
+        const classesContainer = cssClassName(`${MAIN_CLASS}__Container`, isFirst && 'isFirst', isLast && 'isLast', isStartRow && 'isStartRow', isEndRow && 'isEndRow', isMiddle && 'isMiddle', isOnlyRow && 'isOnlyRow', haveItemTop && 'haveItemTop', (isEndRow || isStartRow) && !haveItemBottom && 'haveNotItemBottom');
+        return (jsx("div", Object.assign({ className: classesContainer }, { children: renderContent(item) }), `graphic-card-${index}`));
+    };
+    return jsx("div", Object.assign({ className: MAIN_CLASS }, { children: data.map(renderContainer) }), void 0);
 };
 
-export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
 //# sourceMappingURL=index.js.map