kiban-design-system 1.1.5-hotfix.0 → 1.1.7-hotfix.0

package/dist/index.js

@@ -1032,6 +1032,19 @@ const isComponentTypeOf = (childComponent, parentComponent) => {
     return Components.some((Component) => typeof type !== 'string' && type === Component);
 };
 
+function formatFileSize(bytes) {
+    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    let unitIndex = 0;
+    let size = bytes;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex += 1;
+    }
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+}
+// eslint-disable-next-line
+// code end
+
 const cssClassName = (mainClass, ...classes) => {
     const filteredClasses = classes
         .filter(Boolean)
@@ -1061,10 +1074,10 @@ const PendingIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24'
 
 const WarningIcon = () => (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: 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z' }, void 0), jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }, void 0), jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' }, void 0)] }), void 0));
 
-const COMPONENT_NAME$A = 'AlphaAttributeInput';
+const COMPONENT_NAME$B = 'AlphaAttributeInput';
 const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
     const [isFocused, setIsFocused] = useState(false);
-    const className = cssClassName(COMPONENT_NAME$A, isFocused && 'isFocused');
+    const className = cssClassName(COMPONENT_NAME$B, isFocused && 'isFocused');
     const handleBlur = (callback) => {
         setIsFocused(false);
         if (callback) {
@@ -1083,25 +1096,25 @@ const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
                 item.onChange(event.target.value);
             }
         };
-        const itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$A}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
-        const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__Divider` }, { children: divider }), void 0)) : null;
-        return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$A}__Item` }, { children: [itemLabelMarkup, jsx("input", { type: item.type, value: item.value, onChange: handleChange, onBlur: () => handleBlur(item.onBlur), onFocus: () => handleFocus(item.onFocus), placeholder: item.placeholder, min: item.min, max: item.max, minLength: item.minLength, maxLength: item.maxLength }, void 0)] }), index), dividerMarkup] }, index));
+        const itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$B}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
+        const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__Divider` }, { children: divider }), void 0)) : null;
+        return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$B}__Item` }, { children: [itemLabelMarkup, jsx("input", { type: item.type, value: item.value, onChange: handleChange, onBlur: () => handleBlur(item.onBlur), onFocus: () => handleFocus(item.onFocus), placeholder: item.placeholder, min: item.min, max: item.max, minLength: item.minLength, maxLength: item.maxLength }, void 0)] }), index), dividerMarkup] }, index));
     };
-    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$A}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
-    const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__ItemsWrapper` }, { children: items.map(renderItem) }), void 0));
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$B}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$B}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
+    const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$B}__ItemsWrapper` }, { children: items.map(renderItem) }), void 0));
     return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, itemsMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$z = 'AlphaBadge';
+const COMPONENT_NAME$A = 'AlphaBadge';
 const AlphaBadge = ({ theme: themeProp, children, isSuccess, isWarning, isDanger, isPrimary, }) => {
     const { theme } = useTheme();
     const THEME_CLASS = `${theme}`;
-    const className = cssClassName(COMPONENT_NAME$z, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isSuccess && 'isSuccess', isWarning && 'isWarning', themeProp && `${themeProp.toUpperCase()}`);
-    const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$z}__TextWrapper` }, { children: children }), void 0));
+    const className = cssClassName(COMPONENT_NAME$A, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isSuccess && 'isSuccess', isWarning && 'isWarning', themeProp && `${themeProp.toUpperCase()}`);
+    const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$A}__TextWrapper` }, { children: children }), void 0));
     return jsx("span", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
 };
 
-const COMPONENT_NAME$y = 'AlphaIcon';
+const COMPONENT_NAME$z = 'AlphaIcon';
 const ICON_COLOR_VARIANTS = [
     'danger',
     'darkGray',
@@ -1128,9 +1141,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
     if (color && !ICON_COLOR_VARIANTS.includes(color)) {
         console.warn(`The color ${color} is not supported for the AlphaIcon component when hasBackdrop is true.`);
     }
-    const className = cssClassName(COMPONENT_NAME$y, color && `is-${color}`, filled && 'isFilled', outlined && 'isOutlined', size && `is-${size}`, hasBackdrop && 'hasBackdrop', source && `source-${sourceType}`);
+    const className = cssClassName(COMPONENT_NAME$z, color && `is-${color}`, filled && 'isFilled', outlined && 'isOutlined', size && `is-${size}`, hasBackdrop && 'hasBackdrop', source && `source-${sourceType}`);
     const Source = source;
-    const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$y}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
+    const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$z}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
     const content = {
         function: jsx(Source, {}, void 0),
         string: StringSource,
@@ -1138,9 +1151,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
     return jsx("span", Object.assign({ className: className }, { children: content[sourceType] }), void 0);
 };
 
-const COMPONENT_NAME$x = 'AlphaSpinner';
+const COMPONENT_NAME$y = 'AlphaSpinner';
 const AlphaSpinner = ({ icon, size }) => {
-    const className = cssClassName(COMPONENT_NAME$x);
+    const className = cssClassName(COMPONENT_NAME$y);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -1150,16 +1163,16 @@ const AlphaSpinner = ({ icon, size }) => {
             iconSource = icon.icon;
         }
     }
-    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$y}__IconWrapper` }, { children: iconSource }), void 0)) : null;
     return jsx("div", Object.assign({ className: className }, { children: iconMarkup }), void 0);
 };
 
-const COMPONENT_NAME$w = 'AlphaButton';
+const COMPONENT_NAME$x = 'AlphaButton';
 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;
-    const className = cssClassName(COMPONENT_NAME$w, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isTertiary && 'isTertiary', isFullWidth && 'isFullWidth', isLink && 'isLink', isDisabled && 'isDisabled', isLoading && 'isLoading', size && `is-${size}`, textAlign && `has-text-${textAlign}`, icon && `has-icon-${iconPosition}`, isIconOnly && 'onlyIcon', isIconOnly && isRounded && 'isRounded', themeProp && `${themeProp.toUpperCase()}`);
+    const className = cssClassName(COMPONENT_NAME$x, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isTertiary && 'isTertiary', isFullWidth && 'isFullWidth', isLink && 'isLink', isDisabled && 'isDisabled', isLoading && 'isLoading', size && `is-${size}`, textAlign && `has-text-${textAlign}`, icon && `has-icon-${iconPosition}`, isIconOnly && 'onlyIcon', isIconOnly && isRounded && 'isRounded', themeProp && `${themeProp.toUpperCase()}`);
     const buttonProps = {
         id,
         type: isSubmit ? 'submit' : 'button',
@@ -1176,7 +1189,7 @@ const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'l
         onTouchStart,
         onTouchEnd,
     };
-    const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__TextWrapper` }, { children: children }), void 0)) : null;
+    const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__TextWrapper` }, { children: children }), void 0)) : null;
     let iconSource;
     let spinnerIconSource;
     if (icon) {
@@ -1195,18 +1208,18 @@ const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'l
             spinnerIconSource = spinnerIcon.icon;
         }
     }
-    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__IconWrapper` }, { children: iconSource }), void 0)) : null;
-    const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__SpinnerWrapper` }, { children: spinnerIconSource }), void 0));
+    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__SpinnerWrapper` }, { children: spinnerIconSource }), void 0));
     return (jsxs("button", Object.assign({ className: className }, buttonProps, { children: [spinnerMarkup, iconMarkup, childrenMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$v = 'AlphaChip';
+const COMPONENT_NAME$w = 'AlphaChip';
 const AlphaChip = ({ children, hasError, removeButtonIcon, isDisabled, theme, onRemove, }) => {
     const { theme: currentTheme } = useTheme();
     const THEME_CLASS = `${currentTheme}`;
-    const className = cssClassName(COMPONENT_NAME$v, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
-    const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__TextWrapper` }, { children: children }), void 0)) : null;
-    const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__CloseButtonWrapper` }, { children: jsx(AlphaButton, { onClick: onRemove, icon: removeButtonIcon }, void 0) }), void 0));
+    const className = cssClassName(COMPONENT_NAME$w, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
+    const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$w}__TextWrapper` }, { children: children }), void 0)) : null;
+    const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$w}__CloseButtonWrapper` }, { children: jsx(AlphaButton, { onClick: onRemove, icon: removeButtonIcon }, void 0) }), void 0));
     return (jsxs("div", Object.assign({ className: className }, { children: [childrenMarkup, closeButtonMarkup] }), void 0));
 };
 
@@ -1406,10 +1419,10 @@ const Panel$1 = ({ id, children, isHidden }) => {
     return (jsx("div", Object.assign({ className: className, id: id }, { children: children }), void 0));
 };
 
-const COMPONENT_NAME$u = 'Tabs';
+const COMPONENT_NAME$v = 'Tabs';
 const Tabs = ({ onSelect, selected, tabs, children, className, areFitted, }) => {
     const { theme } = useTheme();
-    const classNames = cssClassName(COMPONENT_NAME$u, `is${themeClassConverter(theme)}`);
+    const classNames = cssClassName(COMPONENT_NAME$v, `is${themeClassConverter(theme)}`);
     const panelMarkup = children
         ? tabs.map((tab, index) => selected === index ? (jsx(Panel$1, Object.assign({ id: tab.panelID || `${tab.id}-panel` }, { children: children }), tab.id)) : (jsx(Panel$1, { id: tab.panelID || `${tab.id}-panel`, isHidden: true }, tab.id)))
         : null;
@@ -1567,10 +1580,10 @@ const getPosition = (activator, tooltip, alignment) => {
     };
 };
 
-const COMPONENT_NAME$t = 'Alpha__TooltipOverlay';
+const COMPONENT_NAME$u = 'Alpha__TooltipOverlay';
 const Overlay = ({ children, activator, active, zIndexOverride, position = 'bottom', appearance = 'default', width, parentTooltip, theme, onClick, }) => {
     const tooltipRef = useRef(null);
-    const overlayClassName = cssClassName(COMPONENT_NAME$t, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
+    const overlayClassName = cssClassName(COMPONENT_NAME$u, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
     const [positionStyles, setPositionStyles] = useState({
         '--tooltip-overlay-top': 0,
         '--tooltip-overlay-left': 0,
@@ -1606,7 +1619,7 @@ const Overlay = ({ children, activator, active, zIndexOverride, position = 'bott
     return markup;
 };
 
-const COMPONENT_NAME$s = 'AlphaTooltip';
+const COMPONENT_NAME$t = 'AlphaTooltip';
 const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive: isActiveProp = false, onClose, onOpen, position, width, parentTooltip, zIndexOverride, appearance, persistence, theme, }) => {
     const [activatorNode, setActivatorNode] = useState(null);
     const [isActive, setIsActive] = useState(isActiveProp);
@@ -1614,7 +1627,7 @@ const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive:
     const isMouseOver = useRef(false);
     const activatorContainer = useRef(null);
     const WrapperComponent = activatorWrapper;
-    const className = cssClassName(COMPONENT_NAME$s);
+    const className = cssClassName(COMPONENT_NAME$t);
     const handleOpen = useCallback(() => {
         if (!isActivePersistence) {
             setIsActive(true);
@@ -2193,10 +2206,10 @@ const Popover$1 = ({ activator, children, isActive, onClose, isFullWidth = false
 };
 Popover$1.Pane = Pane$1;
 
-const COMPONENT_NAME$r = 'Divider';
+const COMPONENT_NAME$s = 'Divider';
 const Divider = ({ alignment = 'left', label }) => {
-    const className = cssClassName(COMPONENT_NAME$r, alignment, !label && 'no-label');
-    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$r}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$r}__Label` }, { children: label }), void 0) }), void 0)) : null;
+    const className = cssClassName(COMPONENT_NAME$s, alignment, !label && 'no-label');
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$s}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$s}__Label` }, { children: label }), void 0) }), void 0)) : null;
     return jsx("div", Object.assign({ className: className }, { children: labelMarkup }), void 0);
 };
 
@@ -2247,11 +2260,53 @@ const useTheme = () => {
  * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  * @returns {symbol} - Element Select
  */
-const Select = ({ ariaLabel, 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)) {
@@ -2266,6 +2321,12 @@ const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, se
             };
         }
     }, [isActivePopover]);
+    useEffect(() => {
+        setSectionsFiltered(sections);
+    }, [sections]);
+    useEffect(() => {
+        setItemsFiltered(items);
+    }, [items]);
     const handleOpenPopover = () => setIsActive(!isActivePopover);
     const removeTag = (event, value) => {
         event.stopPropagation();
@@ -2357,9 +2418,10 @@ const Select = ({ ariaLabel, items, sections, isMultiple, placeholder, label, se
     }, [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 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();
                                 }
@@ -9641,7 +9703,7 @@ function formatDate(date, toISO) {
     return DateTime.fromJSDate(date).toFormat('dd/MM/yyyy');
 }
 
-const COMPONENT_NAME$q = 'DateInput';
+const COMPONENT_NAME$r = 'DateInput';
 const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
     const [isPopoverActive, setIsPopoverActive] = useState(false);
     const [{ month, year }, setDate] = useState({
@@ -9652,7 +9714,7 @@ const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequire
     const [isErrorTooltipActive, setIsErrorTooltipActive] = useState(false);
     const [selectedDate, setSelectedDate] = useState();
     const inputRef = useRef(null);
-    const className = cssClassName(COMPONENT_NAME$q);
+    const className = cssClassName(COMPONENT_NAME$r);
     const handleMonthChange = (monthValue, yearValue) => {
         setDate({ month: monthValue, year: yearValue });
     };
@@ -9774,7 +9836,7 @@ const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequire
         }
     }, [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, { 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 inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$r}__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);
 };
@@ -9864,9 +9926,9 @@ const AlphaFilterControl = ({ primaryAction, secondaryActions, sections, title,
     return (jsxs("div", Object.assign({ className: `${MAIN_CLASS$k}` }, { children: [headerMarkup, bodyMarkup, actionsMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$p = 'AlphaInlineError';
+const COMPONENT_NAME$q = 'AlphaInlineError';
 const AlphaInlineError = ({ icon, children }) => {
-    const className = cssClassName(COMPONENT_NAME$p);
+    const className = cssClassName(COMPONENT_NAME$q);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -9876,23 +9938,23 @@ const AlphaInlineError = ({ icon, children }) => {
             iconSource = icon.icon;
         }
     }
-    const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__IconWrapper` }, { children: iconSource }), void 0)) : null;
-    const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__MessageWrapper` }, { children: children }), void 0)) : null;
+    const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$q}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$q}__MessageWrapper` }, { children: children }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$o = 'AlphaLabel';
-const className$1 = cssClassName(COMPONENT_NAME$o);
+const COMPONENT_NAME$p = 'AlphaLabel';
+const className$1 = cssClassName(COMPONENT_NAME$p);
 const AlphaLabel = ({ children, isRequired, action, id }) => {
-    const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$o}__RequiredSign` }, { children: "*" }), void 0)) : null;
+    const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__RequiredSign` }, { children: "*" }), void 0)) : null;
     const labelMarkup = (jsxs("label", Object.assign({ htmlFor: id }, { children: [children, requiredSignMarkup] }), void 0));
-    const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, isDanger: action.isDanger, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isLink: true, onClick: action.onClick, isDisabled: action.isDisabled }, { children: action.content }), void 0) }), void 0)) : null;
+    const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, isDanger: action.isDanger, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isLink: true, onClick: action.onClick, isDisabled: action.isDisabled }, { children: action.content }), void 0) }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className$1 }, { children: [labelMarkup, actionMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$n = 'AlphaLabelledField__HelpText';
+const COMPONENT_NAME$o = 'AlphaLabelledField__HelpText';
 const HelpText = ({ message, icon }) => {
-    const className = cssClassName(COMPONENT_NAME$n);
+    const className = cssClassName(COMPONENT_NAME$o);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -9902,24 +9964,24 @@ const HelpText = ({ message, icon }) => {
             iconSource = icon.icon;
         }
     }
-    const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__IconWrapper` }, { children: iconSource }), void 0)) : null;
-    const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__MessageWrapper` }, { children: message }), void 0)) : null;
+    const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$o}__MessageWrapper` }, { children: message }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$m = 'AlphaLabelledField';
+const COMPONENT_NAME$n = 'AlphaLabelledField';
 const AlphaLabelledField = ({ label, children, action, error, helpText, id, isRequired, }) => {
-    const className = cssClassName(COMPONENT_NAME$m);
-    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ action: action, id: id, isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
-    const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__ErrorWrapper` }, { children: jsx(AlphaInlineError, Object.assign({ icon: error.icon }, { children: error.message }), void 0) }), void 0)) : null;
+    const className = cssClassName(COMPONENT_NAME$n);
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ action: action, id: id, isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
+    const errorMarkup = error ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__ErrorWrapper` }, { children: jsx(AlphaInlineError, Object.assign({ icon: error.icon }, { children: error.message }), void 0) }), void 0)) : null;
     const helpTextMarkup = helpText ? (jsx(HelpText, { message: helpText.message, icon: helpText.icon }, void 0)) : null;
-    const contentMarkup = errorMarkup ? (jsx(AlphaTooltip, Object.assign({ persistence: true, content: errorMarkup, isActive: Boolean(errorMarkup), appearance: 'error' }, { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$m}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
+    const contentMarkup = errorMarkup ? (jsx(AlphaTooltip, Object.assign({ persistence: true, content: errorMarkup, isActive: Boolean(errorMarkup), appearance: 'error' }, { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$n}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
     return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, contentMarkup, helpTextMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$l = 'AlphaInputText';
+const COMPONENT_NAME$m = 'AlphaInputText';
 const AlphaInputText = ({ isDisabled, label }) => {
-    const className = cssClassName(COMPONENT_NAME$l, isDisabled && 'isDisabled');
+    const className = cssClassName(COMPONENT_NAME$m, isDisabled && 'isDisabled');
     return (jsx(AlphaLabelledField, Object.assign({ label: label }, { children: jsx("div", { className: className }, void 0) }), void 0));
 };
 
@@ -9927,14 +9989,14 @@ const StepDefault = {
     status: 'incomplete',
 };
 
-const COMPONENT_NAME$k = 'AlphaStepper__Step';
+const COMPONENT_NAME$l = 'AlphaStepper__Step';
 const Step = ({ iconMarkup, label, isComplete, isInactive, isSuccess, isLastStepComplete, isLastStepInactive, }) => {
     const { theme } = useTheme();
-    const itemClassName = cssClassName(`${COMPONENT_NAME$k}__Item`, isComplete && `is-${theme}-light-after`, isInactive && 'is-inactive-light-after', isSuccess && 'is-success-light-after', isSuccess && 'is-success-light-before', isLastStepComplete && `is-${theme}-light-before`, isLastStepInactive && 'is-inactive-light-before');
-    return (jsxs("div", Object.assign({ className: COMPONENT_NAME$k }, { children: [jsx("div", Object.assign({ className: itemClassName }, { children: iconMarkup }), void 0), jsx("div", Object.assign({ className: `${COMPONENT_NAME$k}__Label` }, { children: label }), void 0)] }), void 0));
+    const itemClassName = cssClassName(`${COMPONENT_NAME$l}__Item`, isComplete && `is-${theme}-light-after`, isInactive && 'is-inactive-light-after', isSuccess && 'is-success-light-after', isSuccess && 'is-success-light-before', isLastStepComplete && `is-${theme}-light-before`, isLastStepInactive && 'is-inactive-light-before');
+    return (jsxs("div", Object.assign({ className: COMPONENT_NAME$l }, { children: [jsx("div", Object.assign({ className: itemClassName }, { children: iconMarkup }), void 0), jsx("div", Object.assign({ className: `${COMPONENT_NAME$l}__Label` }, { children: label }), void 0)] }), void 0));
 };
 
-const COMPONENT_NAME$j = 'AlphaStepper';
+const COMPONENT_NAME$k = 'AlphaStepper';
 const getSourceIcon = (icon) => {
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -9949,7 +10011,7 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
     const { theme } = useTheme();
     const renderStep = (step = Object.assign({}, StepDefault), index) => {
         const lastStepStatus = steps[index - 1] ? steps[index - 1].status : '';
-        const iconClassName = cssClassName(`${COMPONENT_NAME$j}__IconWrapper`, (step.status === 'complete' || step.status === 'active') && `is-${theme}`, step.status !== 'complete' && `is-inactive`, step.hasError && errorIcon && 'is-danger', isSuccess && `is-success`);
+        const iconClassName = cssClassName(`${COMPONENT_NAME$k}__IconWrapper`, (step.status === 'complete' || step.status === 'active') && `is-${theme}`, step.status !== 'complete' && `is-inactive`, step.hasError && errorIcon && 'is-danger', isSuccess && `is-success`);
         let iconSource = getSourceIcon(incompleteIcon);
         if (step.hasError && errorIcon)
             iconSource = getSourceIcon(errorIcon);
@@ -9960,16 +10022,16 @@ const AlphaStepper = ({ isSuccess, steps = [], completeIcon, incompleteIcon, err
         const isInactive = step.status === 'incomplete' || step.status === 'active';
         const isLastStepComplete = lastStepStatus === 'complete';
         const isLastStepInactive = lastStepStatus === 'incomplete' || lastStepStatus === 'active';
-        return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$j}-${index}`));
+        return (jsx(Step, { iconMarkup: iconMarkup, label: step.label, isComplete: isComplete, isInactive: isInactive, isSuccess: isSuccess, isLastStepComplete: isLastStepComplete, isLastStepInactive: isLastStepInactive }, `${COMPONENT_NAME$k}-${index}`));
     };
     const stepsMarkup = steps ? steps.map(renderStep) : null;
-    return jsx("div", Object.assign({ className: `${COMPONENT_NAME$j}__Container` }, { children: stepsMarkup }), void 0);
+    return jsx("div", Object.assign({ className: `${COMPONENT_NAME$k}__Container` }, { children: stepsMarkup }), void 0);
 };
 
-const COMPONENT_NAME$i = 'AlphaTag';
+const COMPONENT_NAME$j = 'AlphaTag';
 const AlphaTag = ({ color, children }) => {
-    const className = cssClassName(COMPONENT_NAME$i, color && `is-${color.color}-${color.intensity}`);
-    const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$i}__TextWrapper` }, { children: children }), void 0));
+    const className = cssClassName(COMPONENT_NAME$j, color && `is-${color.color}-${color.intensity}`);
+    const childrenMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$j}__TextWrapper` }, { children: children }), void 0));
     return jsx("div", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
 };
 
@@ -9980,11 +10042,11 @@ const StatusIcon = {
     Warning: WarningIcon,
 };
 
-const COMPONENT_NAME$h = 'AlphaTile';
+const COMPONENT_NAME$i = 'AlphaTile';
 const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick, }) => {
     const { theme } = useTheme();
-    const className = cssClassName(COMPONENT_NAME$h, `is${themeClassConverter(themeProp || theme)}`, isSelected && 'isSelected');
-    const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$h}--StatusWrapper`, status && `is${status}`);
+    const className = cssClassName(COMPONENT_NAME$i, `is${themeClassConverter(themeProp || theme)}`, isSelected && 'isSelected');
+    const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$i}--StatusWrapper`, status && `is${status}`);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -9994,10 +10056,10 @@ const AlphaTile = ({ isSelected, icon, status, theme: themeProp, title, onClick,
             iconSource = icon.icon;
         }
     }
-    const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$h}__IconWrapper` }, { children: iconSource }), void 0)) : null;
-    const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$h}__MediaWrapper` }, { children: iconWrapper }), void 0)) : null;
-    const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$h}__TitleWrapper` }, { children: title }), void 0) }, void 0)) : null;
-    const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$h}__HeaderWrapper` }, { children: [mediaMarkup, titleWrapper] }), void 0));
+    const iconWrapper = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$i}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const mediaMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$i}__MediaWrapper` }, { children: iconWrapper }), void 0)) : null;
+    const titleWrapper = title ? (jsx("div", { children: jsx("div", Object.assign({ className: `${COMPONENT_NAME$i}__TitleWrapper` }, { children: title }), void 0) }, void 0)) : null;
+    const HeaderWrapper = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$i}__HeaderWrapper` }, { children: [mediaMarkup, titleWrapper] }), void 0));
     const statusIcon = status ? StatusIcon[status] : '';
     const statusWrapper = status ? (jsx("div", Object.assign({ className: statusWrapperClassName }, { children: jsx(AlphaIcon, { source: statusIcon, size: 'medium', outlined: true }, void 0) }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className, onClick: onClick }, { children: [HeaderWrapper, statusWrapper] }), void 0));
@@ -16640,9 +16702,9 @@ function getRangeDate(range, date) {
     };
 }
 
-const COMPONENT_NAME$g = 'DatePicker__Day';
+const COMPONENT_NAME$h = 'DatePicker__Day';
 const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelectedDay, isInRange, isSelected, onClick, theme: themeProp, }) {
-    const emptyDayClassName = cssClassName(COMPONENT_NAME$g, !day && 'isEmpty');
+    const emptyDayClassName = cssClassName(COMPONENT_NAME$h, !day && 'isEmpty');
     if (!day) {
         return jsx("td", { className: emptyDayClassName }, void 0);
     }
@@ -16653,14 +16715,14 @@ const Day = memo(function Day({ day, isDisabled, isFirstSelectedDay, isLastSelec
         }
     };
     const today = isToday(new Date(), day);
-    const className = cssClassName(COMPONENT_NAME$g, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
+    const className = cssClassName(COMPONENT_NAME$h, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
     const date = day.getDate();
     return (jsx("td", Object.assign({ className: className }, { children: jsx("button", Object.assign({ onClick: handleClick }, { children: date }), void 0) }), void 0));
 });
 
-const COMPONENT_NAME$f = 'DatePicker__Month';
+const COMPONENT_NAME$g = 'DatePicker__Month';
 const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(), allowRange, disableAfterDate, disableBeforeDate, onChange, selected, weekStartsOn = 0, disableDates, weekDays, }) => {
-    const className = cssClassName(COMPONENT_NAME$f);
+    const className = cssClassName(COMPONENT_NAME$g);
     const weeks = useMemo(() => getWeeksByMonth(month, year, weekStartsOn), [month, year, weekStartsOn]);
     const handleDateClick = useCallback((selectedDate) => {
         if (onChange) {
@@ -16685,9 +16747,9 @@ const Month = ({ month = new Date().getMonth(), year = new Date().getFullYear(),
     return jsx("div", Object.assign({ className: className }, { children: calendarGridMarkup }), void 0);
 };
 
-const COMPONENT_NAME$e = 'DatePIcker__YearField';
+const COMPONENT_NAME$f = 'DatePIcker__YearField';
 const YearField = ({ onChange, value, min, max, onBlur, onFocus, onKeyDown, onKeyUp, }) => {
-    const className = cssClassName(COMPONENT_NAME$e);
+    const className = cssClassName(COMPONENT_NAME$f);
     const handleChange = (event) => {
         if (onChange) {
             const value = event.target.value.trim();
@@ -16731,10 +16793,10 @@ const IconButton = (_a) => {
     return (jsx("button", Object.assign({ className: className, onClick: onClick, onBlur: onBlur, onFocus: onFocus }, rest, { children: icon && jsx(Icon, { name: icon }, void 0) }), void 0));
 };
 
-const COMPONENT_NAME$d = 'DatePicker__Header';
+const COMPONENT_NAME$e = 'DatePicker__Header';
 const Header$2 = ({ month, year, onChange, months }) => {
     const [yearValue, setYearValue] = useState(year);
-    const headerClassName = cssClassName(COMPONENT_NAME$d);
+    const headerClassName = cssClassName(COMPONENT_NAME$e);
     const handleMonthChange = useCallback((month, year) => {
         if (onChange) {
             onChange(month, year);
@@ -16764,10 +16826,10 @@ const Header$2 = ({ month, year, onChange, months }) => {
     const previousYear = getPreviousYear(month, year);
     const nextMonth = getNextMonth(month);
     const nextYear = getNextYear(month, year);
-    return (jsxs("div", Object.assign({ className: headerClassName }, { children: [jsx(IconButton, { icon: 'ArrowLeft', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(previousMonth, previousYear) }, void 0), jsxs("span", Object.assign({ className: `${COMPONENT_NAME$d}__DateLabel` }, { children: [montName, jsx(YearField, { value: yearValue, onChange: setYearValue, onBlur: handleYearBlur, min: MINIMUM_SELECTABLE_YEAR }, void 0)] }), void 0), jsx(IconButton, { icon: 'ArrowRight', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(nextMonth, nextYear) }, void 0)] }), void 0));
+    return (jsxs("div", Object.assign({ className: headerClassName }, { children: [jsx(IconButton, { icon: 'ArrowLeft', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(previousMonth, previousYear) }, void 0), jsxs("span", Object.assign({ className: `${COMPONENT_NAME$e}__DateLabel` }, { children: [montName, jsx(YearField, { value: yearValue, onChange: setYearValue, onBlur: handleYearBlur, min: MINIMUM_SELECTABLE_YEAR }, void 0)] }), void 0), jsx(IconButton, { icon: 'ArrowRight', size: 'small', appearance: 'secondary', onClick: () => handleMonthChange(nextMonth, nextYear) }, void 0)] }), void 0));
 };
 
-const COMPONENT_NAME$c = 'DatePicker';
+const COMPONENT_NAME$d = 'DatePicker';
 function getMonthSelectedDate(selected) {
     return selected instanceof Date
         ? {
@@ -16777,7 +16839,7 @@ function getMonthSelectedDate(selected) {
         : selected;
 }
 const DatePicker = ({ allowRange, disableAfterDate, disableBeforeDate, id, month = new Date().getMonth(), year = new Date().getFullYear(), onChange, selected, onMonthChange, weekStartsOn, disableDates, months, weekDays, }) => {
-    const className = cssClassName(COMPONENT_NAME$c);
+    const className = cssClassName(COMPONENT_NAME$d);
     const handleDateChange = useCallback((dateRange) => {
         if (onChange) {
             onChange(dateRange);
@@ -16792,19 +16854,19 @@ const TrashIcon = () => (jsxs("svg", Object.assign({ width: '24', height: '24',
             // eslint-disable-next-line max-len
             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 COMPONENT_NAME$c = 'DeletableSection';
 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 className = cssClassName(COMPONENT_NAME$c);
+    const classNameButton = cssClassName(`${COMPONENT_NAME$c}__DeleteButtonWrapper`, THEME_CLASS);
     const icon = iconDeletable || TrashIcon;
-    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;
+    const deleteButtonMarkup = onDelete && isDeletable ? (jsx("div", Object.assign({ className: classNameButton }, { children: jsx("button", Object.assign({ "aria-label": ariaLabel ? `${ariaLabel}-removeForm` : ariaLabel, className: `${COMPONENT_NAME$c}__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$c}__ContentWrapper` }, { children: children }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [deleteButtonMarkup, contentMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$a = 'AlphaInputTag';
+const COMPONENT_NAME$b = 'AlphaInputTag';
 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);
@@ -16847,10 +16909,10 @@ const InputTag$1 = ({ ariaLabel, id, inputTextPlaceholder, inputTextValue, isReq
         }
     };
     const renderTag = (tag, index) => {
-        return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__TagWrapper` }, { children: jsx(AlphaChip, Object.assign({ removeButtonIcon: tagRemoveIcon, onRemove: () => handleRemoveTag(index) }, { children: tag }), void 0) }), index));
+        return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$b}__TagWrapper` }, { children: jsx(AlphaChip, Object.assign({ removeButtonIcon: tagRemoveIcon, onRemove: () => handleRemoveTag(index) }, { children: tag }), void 0) }), index));
     };
-    const className = cssClassName(COMPONENT_NAME$a);
-    const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$a}__InputWrapper`, isFocused && 'isFocused', isDisabled && 'isDisabled', hasError && 'hasError');
+    const className = cssClassName(COMPONENT_NAME$b);
+    const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$b}__InputWrapper`, isFocused && 'isFocused', isDisabled && 'isDisabled', hasError && 'hasError');
     const handleInputChange = (event) => {
         if (onInputTextChange) {
             onInputTextChange(event.target.value);
@@ -23584,7 +23646,7 @@ var pako = {
  * @returns {symbol} - Element FileItem
  * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
  */
-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));
+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), jsx("p", Object.assign({ className: 'File__content__fileSize' }, { children: formatFileSize(size) }), void 0)] }), void 0)] }), void 0));
 
 /**
  * FileDrop is a component to upload files in any project
@@ -24529,7 +24591,7 @@ const SectionForm = ({ ariaLabel, data, fields, fieldsSection, iconDeletable, ic
     return (jsx(DeletableSection, Object.assign({ ariaLabel: ariaLabel, onDelete: onDelete, iconDeletable: iconDeletable, isDeletable: isDeletable }, { children: gridMarkup }), void 0));
 };
 
-const COMPONENT_NAME$9 = 'DynamicForm';
+const COMPONENT_NAME$a = 'DynamicForm';
 const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, iconDeletable, iconHelperText, labelDivider, onChange, onAddForm, tagRemoveIcon, deletableFormArray, extraPropsFieldsArray, }) => {
     const { theme } = useTheme();
     const handleChange = (contact, id) => {
@@ -24557,11 +24619,11 @@ const DynamicForm = ({ ariaLabel, dataFormArray = [], fields, fieldsSection, ico
             : undefined;
         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 contactsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$a}__SectionFormWrapper` }, { children: dataFormArray.map(renderForm) }), void 0));
     const dividerMarkup = labelDivider && jsx(Divider, { label: labelDivider }, 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);
+    const className = cssClassName(COMPONENT_NAME$a, THEME_CLASS);
     return (jsxs("div", Object.assign({ className: className }, { children: [dividerMarkup, contactsMarkup, addContactButtonMarkup] }), void 0));
 };
 
@@ -27757,19 +27819,19 @@ Sortable.mount(Remove, Revert);
 
 const Context = createContext({});
 
-const COMPONENT_NAME$8 = 'SortableList__Item';
+const COMPONENT_NAME$9 = 'SortableList__Item';
 const Item$2 = ({ children }) => {
     const { hasHandle } = useContext(Context);
-    const className = cssClassName(COMPONENT_NAME$8, !hasHandle && 'no-handle');
-    const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$8}__Handle` }, { children: [jsx(Icon, { name: 'MoreVertical' }, void 0), jsx(Icon, { name: 'MoreVertical' }, void 0)] }), void 0)) : null;
-    const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$8}__Content` }, { children: children }), void 0));
+    const className = cssClassName(COMPONENT_NAME$9, !hasHandle && 'no-handle');
+    const handleMarkup = hasHandle ? (jsxs("span", Object.assign({ className: `${COMPONENT_NAME$9}__Handle` }, { children: [jsx(Icon, { name: 'MoreVertical' }, void 0), jsx(Icon, { name: 'MoreVertical' }, void 0)] }), void 0)) : null;
+    const contentMarkup = (jsx("span", Object.assign({ className: `${COMPONENT_NAME$9}__Content` }, { children: children }), void 0));
     return (jsxs("li", Object.assign({ className: className }, { children: [handleMarkup, contentMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$7 = 'SortableList';
+const COMPONENT_NAME$8 = 'SortableList';
 const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
     const listRef = useRef(null);
-    const className = cssClassName(COMPONENT_NAME$7);
+    const className = cssClassName(COMPONENT_NAME$8);
     const hasItems = items && items.length > 0;
     const handleSortEnd = (event) => {
         const { newIndex, oldIndex } = event;
@@ -27800,7 +27862,7 @@ const SortableList = function ({ renderItem, items, onSort, hasHandle, }) {
         }
         return itemComponent;
     };
-    const listClassName = cssClassName(`${COMPONENT_NAME$7}__List`);
+    const listClassName = cssClassName(`${COMPONENT_NAME$8}__List`);
     const listMarkup = hasItems ? (jsx("ul", Object.assign({ ref: listRef, className: listClassName }, { children: Children.toArray(items.map(renderItemElement)) }), void 0)) : null;
     const contextValue = {
         hasHandle,
@@ -28683,6 +28745,13 @@ const Content = ({ children, hasPane = false, height }) => (jsx("div", Object.as
  * @param {boolean} ModalProps.hasPane - Validate if it has Pane
  */
 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';
@@ -28890,13 +28959,15 @@ const PanelHeader = ({ alt = '', icon, image, title, onClose, headerExtraActions
 
 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$4}__container`,
-        position && `${MAIN_CLASS$4}__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$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));
 };
@@ -30119,12 +30190,12 @@ const Tile = ({ isSelected, media, onClick, title, value, subtitle = '', mediaSi
     return (jsxs("div", Object.assign({ className: classes, onClick: handleOnClick }, { children: [jsxs("div", Object.assign({ className: 'Tile__Wrapper' }, { children: [jsxs("div", Object.assign({ className: 'Tile__TitleWrapper' }, { children: [jsx("div", Object.assign({ className: 'Tile__Media' }, { children: jsx(Media, { icon: media, size: mediaSize, appearance: 'info' }, void 0) }), void 0), jsxs("div", { children: [jsx("div", Object.assign({ className: 'Tile__Title' }, { children: title }), void 0), subtitle ? jsx("div", Object.assign({ className: 'Tile__Subtitle' }, { children: subtitle }), void 0) : null] }, void 0)] }), void 0), jsx("div", Object.assign({ className: 'Tile__RightMediaWrapper' }, { children: rightMedia !== null && rightMedia }), void 0)] }), void 0), tagsMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$6 = 'Totalizer';
+const COMPONENT_NAME$7 = 'Totalizer';
 const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, placeholderValue, value, theme: themeProp, }) => {
     const { theme } = useTheme();
     const themeClass = `has-Theme${themeProp ? themeProp.toUpperCase() : theme.toUpperCase()}`;
-    const className = cssClassName(COMPONENT_NAME$6, themeClass, isDisabled && 'isDisabled', isFocused && 'isFocused', direction && `has-${direction}Direction`);
-    const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__TitleWrapper` }, { children: label }), void 0)) : null;
+    const className = cssClassName(COMPONENT_NAME$7, themeClass, isDisabled && 'isDisabled', isFocused && 'isFocused', direction && `has-${direction}Direction`);
+    const titleMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__TitleWrapper` }, { children: label }), void 0)) : null;
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -30134,25 +30205,25 @@ const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, plac
             iconSource = icon.icon;
         }
     }
-    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$6}__IconWrapper` }, { children: iconSource }), void 0)) : null;
-    const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$6}__HeaderWrapper` }, { children: [titleMarkup, iconMarkup] }), void 0)) : null;
-    const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ValueWrapper` }, { children: value }), void 0)) : null;
-    const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__PlaceholderValueWrapper` }, { children: placeholderValue }), void 0)) : null;
+    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$7}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const headerMarkup = titleMarkup || iconMarkup ? (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$7}__HeaderWrapper` }, { children: [titleMarkup, iconMarkup] }), void 0)) : null;
+    const valueMarkup = value ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__ValueWrapper` }, { children: value }), void 0)) : null;
+    const placeholderValueMarkup = placeholderValue ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__PlaceholderValueWrapper` }, { children: placeholderValue }), void 0)) : null;
     const valueContentToRender = (!valueMarkup && placeholderValueMarkup) || valueMarkup;
-    const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ValueContainerWrapper` }, { children: valueContentToRender }), void 0)) : null;
-    const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$6}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, onClick: action.onClick, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isDisabled: action.isDisabled || isDisabled, isLoading: action.isLoading, isDanger: action.isDanger, icon: action.icon ? { icon: action.icon } : undefined, isPrimary: true }, { children: action.content }), void 0) }), void 0)) : null;
-    const contentClassName = cssClassName(`${COMPONENT_NAME$6}__ContentWrapper`, action && 'has-Action');
+    const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__ValueContainerWrapper` }, { children: valueContentToRender }), void 0)) : null;
+    const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$7}__ActionWrapper` }, { children: jsx(AlphaButton, Object.assign({ id: action.id, onClick: action.onClick, onMouseEnter: action.onMouseEnter, onTouchStart: action.onTouchStart, isDisabled: action.isDisabled || isDisabled, isLoading: action.isLoading, isDanger: action.isDanger, icon: action.icon ? { icon: action.icon } : undefined, isPrimary: true }, { children: action.content }), void 0) }), void 0)) : null;
+    const contentClassName = cssClassName(`${COMPONENT_NAME$7}__ContentWrapper`, action && 'has-Action');
     const contentMarkup = valueContainerMarkup || actionMarkup ? (jsxs("div", Object.assign({ className: contentClassName }, { children: [valueContainerMarkup, actionMarkup] }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [headerMarkup, contentMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$5 = 'TimeSelector__TimePicker__List';
+const COMPONENT_NAME$6 = 'AlphaMultiSelectionPicker__Picker__List';
 const List = ({ items, selected, onChange }) => {
     const listWrapperRef = useRef(null);
     const scrollToSelected = () => {
         const listWrapper = listWrapperRef.current;
         if (listWrapper) {
-            const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$5}__ListItem--selected`);
+            const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$6}__ListItem--selected`);
             if (selectedElement) {
                 const { top } = selectedElement.getBoundingClientRect();
                 const { top: listWrapperTop } = listWrapper.getBoundingClientRect();
@@ -30174,17 +30245,17 @@ const List = ({ items, selected, onChange }) => {
     const renderItem = (item, index) => {
         const { label, value } = item;
         const isSelected = Boolean(selected !== null && selected !== undefined && selected === value);
-        const className = cssClassName(`${COMPONENT_NAME$5}__ListItem`, isSelected && 'selected');
+        const className = cssClassName(`${COMPONENT_NAME$6}__ListItem`, isSelected && 'selected');
         const handleClick = () => handleChange(value);
-        return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$5}__ListItem-${index}`));
+        return (jsx("li", Object.assign({ className: className, onClick: handleClick }, { children: label }), `${COMPONENT_NAME$6}__ListItem-${index}`));
     };
     const itemsMarkup = items ? items.map(renderItem) : null;
-    const className = cssClassName(COMPONENT_NAME$5);
+    const className = cssClassName(COMPONENT_NAME$6);
     return (jsx("div", Object.assign({ className: className, ref: listWrapperRef }, { children: jsx("ul", { children: itemsMarkup }, void 0) }), void 0));
 };
 
-const COMPONENT_NAME$4 = 'TimeSelector__TimePicker';
-const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
+const COMPONENT_NAME$5 = 'AlphaMultiSelectionPicker__Picker';
+const Picker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
     const { theme: themeValue } = useTheme();
     const theme = ThemeProp || themeValue;
     if (!theme) {
@@ -30197,46 +30268,93 @@ const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) =
             onChange(selectedValues);
         }
     };
-    const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$4}__HeaderItem` }, { children: capitalize(header) }), `${COMPONENT_NAME$4}__HeaderItem-${index}`));
-    const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__HeadersMarkup` }, { children: headers.map(renderHeader) }), void 0)) : null;
+    const renderHeader = (header, index) => (jsx("span", Object.assign({ className: `${COMPONENT_NAME$5}__HeaderItem` }, { children: capitalize(header) }), `${COMPONENT_NAME$5}__HeaderItem-${index}`));
+    const headersMarkup = headers ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__HeadersMarkup` }, { children: headers.map(renderHeader) }), void 0)) : null;
     const renderList = (listItems, index) => {
         const selectedValue = selected ? selected[index] : undefined;
-        return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$4}__List-${index}`));
+        return (jsx(List, { items: listItems, onChange: (value) => handleChange(value, index), selected: selectedValue }, `${COMPONENT_NAME$5}__List-${index}`));
     };
-    const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__ItemsListWrapper` }, { children: items.map(renderList) }), void 0)) : null;
-    const className = cssClassName(COMPONENT_NAME$4, theme);
+    const itemsListsMarkup = items ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$5}__ItemsListWrapper` }, { children: items.map(renderList) }), void 0)) : null;
+    const className = cssClassName(COMPONENT_NAME$5, theme);
     return (jsxs("div", Object.assign({ className: className }, { children: [headersMarkup, itemsListsMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$3 = 'TimeSelector';
-const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, label, onChange, readOnly, placeholderValues, minMaxDays = [0, 365], minMaxHours = [0, 24], minMaxMinutes = [0, 60], minMaxSeconds = [0, 60], theme: themeProp, isRequired, }) => {
+const AlphaMultiSelectionPicker = ({ items, onChange, theme, }) => {
+    const getLabel = (value) => {
+        return value < 10 ? `0${value}` : `${value}`;
+    };
+    const getListItem = (min, max) => {
+        const numbersArray = Array.from({ length: max - min + 1 }, (_, i) => i + min);
+        return numbersArray.map((number) => ({
+            label: getLabel(number),
+            value: number,
+        }));
+    };
+    const headersPicker = useMemo(() => items.map((item) => item.plural), [items]);
+    const itemsPicker = useMemo(() => items.map((item) => getListItem(item.min, item.max)), [items]);
+    const valuesSelected = useMemo(() => items.map((item) => item.value), [items]);
+    const pickerMarkup = (jsx(Picker, { items: itemsPicker, headers: headersPicker, onChange: onChange, selected: valuesSelected, theme: theme }, void 0));
+    return jsx("div", { children: pickerMarkup }, void 0);
+};
+
+const COMPONENT_NAME$4 = 'TimeSelector';
+const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, label, onChange, readOnly, placeholderValues, minMaxYears, minMaxMonths, minMaxDays, minMaxHours, minMaxMinutes, minMaxSeconds, theme: themeProp, isRequired, }) => {
     const { theme: themeValue } = useTheme();
     const theme = themeProp || themeValue;
     if (!theme) {
         return null;
     }
+    const [items, setItems] = useState([]);
+    const [keysValues, setKeysValues] = useState([]);
     const fieldRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isActive, setIsActive] = useState(false);
     const toggleTimePicker = () => setIsActive(!isActive);
     const hasError = !!error;
-    const daysList = useMemo(() => getTimeList(...minMaxDays), [minMaxDays]);
-    const hoursList = useMemo(() => getTimeList(...minMaxHours), [minMaxHours]);
-    const minutesList = useMemo(() => getTimeList(...minMaxMinutes), [minMaxMinutes]);
-    const secondsList = useMemo(() => getTimeList(...minMaxSeconds), [minMaxSeconds]);
+    const getMaxMins = () => {
+        const maxMins = {
+            years: minMaxYears,
+            months: minMaxMonths,
+            days: minMaxDays,
+            hours: minMaxHours,
+            minutes: minMaxMinutes,
+            seconds: minMaxSeconds,
+        };
+        return maxMins;
+    };
+    const getItemMultiSelectionPicker = (key, minMax) => ({
+        id: key,
+        plural: plurals[key] || '',
+        singular: singulars[key] || '',
+        min: minMax[0],
+        max: minMax[1],
+        value: value ? value[key] : 0,
+    });
+    const getItemsMultiSelectionPicker = () => {
+        const catalogMinMax = getMaxMins();
+        const items = [];
+        const keys = [];
+        Object.keys(catalogMinMax).forEach((key) => {
+            const valueMinMax = catalogMinMax[key];
+            if (valueMinMax) {
+                keys.push(key);
+                items.push(getItemMultiSelectionPicker(key, valueMinMax));
+            }
+        });
+        setKeysValues(keys);
+        return items;
+    };
     const handleClosePopover = () => {
         if (isActive) {
             toggleTimePicker();
         }
     };
     const handleTimePickerChange = (values) => {
-        const [days, hours, minutes, seconds] = values;
-        const newValue = {
-            days: days || 0,
-            hours: hours || 0,
-            minutes: minutes || 0,
-            seconds: seconds || 0,
-        };
+        const newValue = {};
+        keysValues.forEach((key, index) => {
+            const valueByKey = values[index];
+            newValue[key] = valueByKey || 0;
+        });
         if (onChange) {
             onChange(newValue);
         }
@@ -30277,15 +30395,6 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
         fullValue[fieldName] = fieldVal;
         return fullValue;
     };
-    const getMaxMins = () => {
-        const maxMins = {
-            days: minMaxDays,
-            hours: minMaxHours,
-            minutes: minMaxMinutes,
-            seconds: minMaxSeconds,
-        };
-        return maxMins;
-    };
     const renderField = (field, index) => {
         const label = !value || (value && value[field] !== 1)
             ? plurals[field]
@@ -30297,50 +30406,46 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
             ? getTimeValue(value[field])
             : '';
         const separator = index === Object.keys(singulars).length - 1 ? '' : ', ';
-        const min = getMaxMins()[field][0];
-        const max = getMaxMins()[field][1];
-        return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$3}__InnerField` }, { children: [jsx("input", { type: 'number', value: elValue, placeholder: placeholderValue, onFocus: handleFocusField, onBlur: handleBlurField, disabled: disabled, onChange: handleInputChange, name: field, min: min, max: max }, void 0), jsxs("span", { children: [label, separator] }, void 0)] }), index));
+        const valuesMaxMin = getMaxMins()[field];
+        let max;
+        let min;
+        if (valuesMaxMin)
+            [min, max] = valuesMaxMin;
+        return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$4}__InnerField` }, { children: [jsx("input", { type: 'number', value: elValue, placeholder: placeholderValue, onFocus: handleFocusField, onBlur: handleBlurField, disabled: disabled, onChange: handleInputChange, name: field, min: min, max: max }, void 0), jsxs("span", { children: [label, separator] }, void 0)] }), index));
     };
     const fieldsMarkup = Object.keys(singulars).map(renderField);
-    const fieldClass = cssClassName(`${COMPONENT_NAME$3}__Field`, (isFocused || isActive) && 'isFocused');
-    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
+    const fieldClass = cssClassName(`${COMPONENT_NAME$4}__Field`, (isFocused || isActive) && 'isFocused');
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__LabelWrapper` }, { children: jsx(AlphaLabel, Object.assign({ isRequired: isRequired }, { children: label }), void 0) }), void 0)) : null;
     const helpTextMarkup = helpText
-        ? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__HelpTextWrapper` }, { children: helpText }), void 0))
+        ? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__HelpTextWrapper` }, { children: helpText }), void 0))
         : null;
-    const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__FieldWrapper` }, { children: jsxs(AlphaTooltip, Object.assign({ content: error, appearance: 'error', persistence: true, isActive: hasError }, { children: [labelMarkup, jsx("div", Object.assign({ className: fieldClass, onClick: handleFieldClick, ref: fieldRef }, { children: fieldsMarkup }), void 0)] }), void 0) }), void 0));
-    const timePickerValue = useMemo(() => {
-        if (value) {
-            const { days, hours, minutes, seconds } = value;
-            return [days, hours, minutes, seconds];
-        }
-        return undefined;
-    }, [value]);
-    const timePickerHeaders = useMemo(() => [plurals.days, plurals.hours, plurals.minutes, plurals.seconds], [plurals]);
-    const timePickerMarkup = (jsx(TimePicker, { items: [daysList, hoursList, minutesList, secondsList], headers: timePickerHeaders, onChange: handleTimePickerChange, selected: timePickerValue, theme: theme }, void 0));
+    const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$4}__FieldWrapper` }, { children: jsxs(AlphaTooltip, Object.assign({ content: error, appearance: 'error', persistence: true, isActive: hasError }, { children: [labelMarkup, jsx("div", Object.assign({ className: fieldClass, onClick: handleFieldClick, ref: fieldRef }, { children: fieldsMarkup }), void 0)] }), void 0) }), void 0));
+    const timePickerMarkup = (jsx(AlphaMultiSelectionPicker, { items: items, onChange: handleTimePickerChange, theme: themeProp }, void 0));
     const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: fieldMarkup, isActive: isActive, isFullWidth: true, onClose: handleClosePopover }, { children: timePickerMarkup }), void 0));
-    const className = cssClassName(COMPONENT_NAME$3, theme, !value && 'isEmpty');
+    useEffect(() => {
+        setItems(getItemsMultiSelectionPicker());
+    }, []);
+    useEffect(() => {
+        setItems(getItemsMultiSelectionPicker());
+    }, [value]);
+    const className = cssClassName(COMPONENT_NAME$4, theme, !value && 'isEmpty');
     return (jsxs("div", Object.assign({ className: className }, { children: [popoverMarkup, helpTextMarkup] }), void 0));
 };
 function getTimeValue(value) {
+    if (value === undefined)
+        return '';
     return value < 10 ? `0${value}` : `${value}`;
-}
-function getTimeList(min, max) {
-    const numbersArray = Array.from({ length: max - min + 1 }, (_, i) => i + min);
-    return numbersArray.map((number) => ({
-        label: getTimeValue(number),
-        value: number,
-    }));
 }
 
-const COMPONENT_NAME$2 = 'FilterField';
+const COMPONENT_NAME$3 = 'FilterField';
 const FilterField = ({ label, isRequired = false, field, onRemove, name, }) => {
-    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__LabelWrapper` }, { children: label }), void 0)) : null;
-    const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__FieldWrapper`, id: name }, { children: field }), void 0));
-    const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__RemoveButtonWrapper` }, { children: jsx("button", Object.assign({ type: 'button', className: `${COMPONENT_NAME$2}__RemoveButton`, onClick: onRemove }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0) }), void 0)) : null;
-    return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}` }, { children: [labelMarkup, filterFieldMarkup, removeButtonMarkup] }), void 0));
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__LabelWrapper` }, { children: label }), void 0)) : null;
+    const filterFieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__FieldWrapper`, id: name }, { children: field }), void 0));
+    const removeButtonMarkup = onRemove && !isRequired ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__RemoveButtonWrapper` }, { children: jsx("button", Object.assign({ type: 'button', className: `${COMPONENT_NAME$3}__RemoveButton`, onClick: onRemove }, { children: jsx(Icon, { name: 'X' }, void 0) }), void 0) }), void 0)) : null;
+    return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$3}` }, { children: [labelMarkup, filterFieldMarkup, removeButtonMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$1 = 'Filters';
+const COMPONENT_NAME$2 = 'Filters';
 const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appliedFilters, onCleanFilters, onAddFilter, addFilterButtonIcon, addFilterButtonLabel, clearButtonLabel, searchButtonLabel, extraActions, selectedFilters = [], }) => {
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const mainContainerRef = useRef(null);
@@ -30364,8 +30469,8 @@ const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appl
     const extraActionsMarkup = extraActions
         ? 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({ 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 secondaryActionsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__SecondaryActionsWrapper` }, { children: availableFiltersPopoverMarkup }), void 0));
+    const mainActionsMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}__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);
     };
@@ -30376,17 +30481,17 @@ const Filters = ({ ariaLabel, filters = [], onApplyFilters, onRemoveFilter, appl
         const handleRemove = () => {
             handleRemoveFilter(filter);
         };
-        return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SelectedFilter` }, { children: jsx(FilterField, { label: foundFilter.label, field: foundFilter.filter, isRequired: foundFilter.isRequired, onRemove: handleRemove, name: filter }, void 0) }), index));
+        return (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__SelectedFilter` }, { children: jsx(FilterField, { label: foundFilter.label, field: foundFilter.filter, isRequired: foundFilter.isRequired, onRemove: handleRemove, name: filter }, void 0) }), index));
     };
-    const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$1}__SelectedFiltersWrapper` }, { children: selectedFilters.map(renderSelectedFilter) }), void 0)) : null;
-    const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$1}__ActionsWrapper` }, { children: [secondaryActionsMarkup, mainActionsMarkup] }), void 0));
-    return (jsxs("div", Object.assign({ className: COMPONENT_NAME$1, ref: mainContainerRef }, { children: [selectedFiltersMarkup, actionsContainerMarkup] }), void 0));
+    const selectedFiltersMarkup = selectedFilters.length ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$2}__SelectedFiltersWrapper` }, { children: selectedFilters.map(renderSelectedFilter) }), void 0)) : null;
+    const actionsContainerMarkup = (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$2}__ActionsWrapper` }, { children: [secondaryActionsMarkup, mainActionsMarkup] }), void 0));
+    return (jsxs("div", Object.assign({ className: COMPONENT_NAME$2, ref: mainContainerRef }, { children: [selectedFiltersMarkup, actionsContainerMarkup] }), void 0));
 };
 
-const COMPONENT_NAME = 'Link';
+const COMPONENT_NAME$1 = 'Link';
 const Link = ({ children, className: classNameProp, component, to, target, }) => {
     const Component = component;
-    const className = cssClassName(COMPONENT_NAME, classNameProp);
+    const className = cssClassName(COMPONENT_NAME$1, classNameProp);
     return (jsx(Component, Object.assign({ className: className, to: to, target: target }, { children: children }), void 0));
 };
 
@@ -30422,5 +30527,58 @@ const AlphaGraphicCard = ({ data }) => {
     return jsx("div", Object.assign({ className: MAIN_CLASS }, { children: data.map(renderContainer) }), void 0);
 };
 
-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 };
+const COMPONENT_NAME = 'AlphaZipCodeInput';
+const AlphaZipCodeInput = ({ label, isRequired, items, onBlur, onFocus, onChange, value, labelEmpty, }) => {
+    const [isFocusActive, setIsFocusActive] = useState(false);
+    const [showPopover, setShowPopover] = useState(false);
+    const handleOnBlur = () => {
+        setIsFocusActive(false);
+        if (onBlur)
+            onBlur();
+    };
+    const handleOnFocus = () => {
+        setIsFocusActive(true);
+        setShowPopover(Boolean(value && (value === null || value === void 0 ? void 0 : value.length) > 2));
+        if (onFocus)
+            onFocus();
+    };
+    const handleOnChange = (event) => {
+        const isValid = /^[0-9]+$/i.test(event.target.value) || event.target.value === '';
+        if (isValid && onChange) {
+            setShowPopover(event.target.value.length > 2);
+            onChange(event.target.value);
+        }
+    };
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME}__Label--isRequired` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
+    const classesInput = cssClassName(`${COMPONENT_NAME}__InputWrapper`, isFocusActive && 'isFocus');
+    const inputMarkup = (jsx("div", Object.assign({ className: classesInput }, { children: jsx("input", { className: `${COMPONENT_NAME}__InputWrapper--input`, onBlur: handleOnBlur, onFocus: handleOnFocus, onChange: handleOnChange, maxLength: 5, value: value }, void 0) }), void 0));
+    const handleOnSelectItem = (item) => {
+        if (onChange)
+            onChange(item[0]);
+        setShowPopover(false);
+    };
+    const renderLabelItem = (item) => (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__ItemWrapper` }, { children: [jsx("div", Object.assign({ className: `${COMPONENT_NAME}__Item__Value` }, { children: item.cp }), void 0), jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Item__Description` }, { children: [item.municipality, ", ", item.city, ", ", item.state] }), void 0)] }), void 0));
+    const itemsOptions = items.map((item) => ({
+        label: renderLabelItem(item),
+        value: item.cp,
+    }));
+    const optionListMarkup = items.length > 0 ? (jsx(OptionList, { items: itemsOptions, selected: [''], onChange: handleOnSelectItem }, void 0)) : null;
+    const emptyItemsMarkup = items.length === 0 ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME}__EmptyItems` }, { children: labelEmpty }), void 0)) : null;
+    const popoverMarkup = useMemo(() => (jsx(Popover$1, Object.assign({ activator: inputMarkup, isActive: showPopover, isFullWidth: true, onClose: () => setShowPopover(false), isFixed: true }, { children: jsxs(Popover$1.Pane, { children: [optionListMarkup, emptyItemsMarkup] }, void 0) }), void 0)), [items, value, showPopover]);
+    return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME}__Wrapper` }, { children: [labelMarkup, popoverMarkup] }), void 0));
+};
+
+const MAINCLASS = 'SegmentedControl';
+const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected, }) => {
+    const renderSegment = (segment, index) => {
+        const classesControl = cssClassName(`${MAINCLASS}__ControlItem`, index === selected && 'isSelected');
+        return (jsx("div", Object.assign({ className: classesControl, id: segment.panelID, "aria-label": segment.ariaLabel, onClick: () => onSelected(index) }, { children: segment.content }), `segmentControl-${index}`));
+    };
+    const controlMarkup = (jsx("div", Object.assign({ className: `${MAINCLASS}__ControlWrapper` }, { children: segments.map(renderSegment) }), void 0));
+    const headerMarkup = (jsxs("div", Object.assign({ className: `${MAINCLASS}__HeaderWrapper` }, { children: [jsx("div", Object.assign({ className: `${MAINCLASS}__Title` }, { children: title }), void 0), controlMarkup] }), void 0));
+    const contentMarkup = children ? (jsx("div", Object.assign({ className: `${MAINCLASS}__ContentWrapper` }, { children: children }), void 0)) : null;
+    return (jsxs("div", Object.assign({ className: `${MAINCLASS}__Container` }, { children: [headerMarkup, contentMarkup] }), void 0));
+};
+
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AlphaZipCodeInput, 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, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
 //# sourceMappingURL=index.js.map