kiban-design-system 1.1.13-hotfix.0 → 1.1.15-hotfix.0

package/dist/index.js

@@ -1012,11 +1012,14 @@ const Alert = ({ icon, appearance = 'info', content, onDismiss, id, }) => {
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxs("div", Object.assign({ className: className }, { children: [jsxs("div", Object.assign({ className: `${MAIN_CLASS$t}__content` }, { children: [icon && (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)), jsx("span", { children: content }, void 0)] }), void 0), onDismiss ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__close`, onClick: () => onDismiss(id) }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) : null] }), void 0));
+    const iconMarkup = appearance !== 'loading' && icon ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__icon` }, { children: jsx(Icon, { name: icon }, void 0) }), void 0)) : null;
+    const loadingMarkup = appearance === 'loading' ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__loading` }, { children: jsx(Icon, { name: 'Loader' }, void 0) }), void 0)) : null;
+    return (jsxs("div", Object.assign({ className: className }, { children: [jsxs("div", Object.assign({ className: `${MAIN_CLASS$t}__content` }, { children: [iconMarkup, loadingMarkup, jsx("span", { children: content }, void 0)] }), void 0), onDismiss ? (jsx("div", Object.assign({ className: `${MAIN_CLASS$t}__close`, onClick: () => onDismiss(id) }, { children: jsx(Icon, { name: 'Close' }, void 0) }), void 0)) : null] }), void 0));
 };
 
 const AlertContext = createContext({
     addAlert: () => null,
+    deleteAlert: () => null,
     limit: 0,
 });
 
@@ -1037,8 +1040,18 @@ const AlertProvider = ({ children, limit }) => {
         }
     }, [newAlert]);
     const countDownAlerts = () => {
-        let alerts = alertList.map((alertElem) => (Object.assign(Object.assign({}, alertElem), { duration: alertElem.duration - 1000 })));
-        alerts = alerts.filter((alertElement) => alertElement.duration > 0);
+        let alerts = alertList.map((alertElem) => (Object.assign(Object.assign({}, alertElem), { duration: alertElem.duration === 'infinite'
+                ? 'infinite'
+                : alertElem.duration - 1000 })));
+        // Trigger on dismiss event when an alert is dismissed
+        alerts.forEach((alertElement) => {
+            var _a;
+            if (alertElement.duration === 0) {
+                (_a = alertElement.onDismiss) === null || _a === void 0 ? void 0 : _a.call(alertElement, alertElement.id);
+            }
+        });
+        alerts = alerts.filter((alertElement) => alertElement.duration === 'infinite' ||
+            (typeof alertElement.duration === 'number' && alertElement.duration > 0));
         setAlertList(alerts);
     };
     useEffect(() => {
@@ -1053,7 +1066,7 @@ const AlertProvider = ({ children, limit }) => {
             clearInterval(interval);
         };
     }, [alertList]);
-    const addAlert = ({ icon, appearance, content, duration, }) => {
+    const addAlert = ({ icon, appearance, content, duration, onDismiss, dismissible = false, }) => {
         const id = Math.floor(Math.random() * 100 + 1);
         const alertAddProps = {
             icon,
@@ -1061,27 +1074,34 @@ const AlertProvider = ({ children, limit }) => {
             content,
             duration,
             id,
+            onDismiss,
+            dismissible,
         };
         setNewAlert(alertAddProps);
+        return id;
     };
     const deleteAlert = (index) => {
         if (index !== undefined) {
             setAlertList(alertList.filter((filterItem) => filterItem.id !== index));
         }
     };
-    return (jsxs(AlertContext.Provider, Object.assign({ value: { addAlert, limit } }, { children: [children, portalTarget &&
+    return (jsxs(AlertContext.Provider, Object.assign({ value: { addAlert, limit, deleteAlert } }, { children: [children, portalTarget &&
                 alertList.length > 0 &&
-                createPortal(jsx("div", Object.assign({ className: 'AlertProvider' }, { children: alertList.map((alertItem) => (jsx(Alert, { icon: alertItem.icon, appearance: alertItem.appearance, duration: alertItem.duration, onDismiss: alertItem.id ? () => deleteAlert(alertItem.id) : undefined, content: alertItem.content, id: alertItem.id }, alertItem.id))) }), void 0), portalTarget)] }), void 0));
+                createPortal(jsx("div", Object.assign({ className: 'AlertProvider' }, { children: alertList.map((alertItem) => (jsx(Alert, { icon: alertItem.icon, appearance: alertItem.appearance, duration: alertItem.duration === 'infinite'
+                            ? undefined
+                            : alertItem.duration, onDismiss: alertItem.dismissible
+                            ? () => deleteAlert(alertItem.id)
+                            : undefined, content: alertItem.content, id: alertItem.id }, alertItem.id))) }), void 0), portalTarget)] }), void 0));
 };
 const useShowAlert = () => {
     const { addAlert } = useContext(AlertContext);
     return addAlert;
 };
 
-const COMPONENT_NAME$B = 'AlphaAttributeInput';
+const COMPONENT_NAME$F = 'AlphaAttributeInput';
 const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
     const [isFocused, setIsFocused] = useState(false);
-    const className = cssClassName(COMPONENT_NAME$B, isFocused && 'isFocused');
+    const className = cssClassName(COMPONENT_NAME$F, isFocused && 'isFocused');
     const handleBlur = (callback) => {
         setIsFocused(false);
         if (callback) {
@@ -1100,25 +1120,25 @@ const AlphaAttributeInput = ({ items, divider, label, isRequired, }) => {
                 item.onChange(event.target.value);
             }
         };
-        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 itemLabelMarkup = item.label ? (jsx("label", Object.assign({ className: `${COMPONENT_NAME$F}__ItemLabelWrapper` }, { children: item.label }), void 0)) : null;
+        const dividerMarkup = divider && index < items.length - 1 ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$F}__Divider` }, { children: divider }), void 0)) : null;
+        return (jsxs(Fragment$1, { children: [jsxs("div", Object.assign({ className: `${COMPONENT_NAME$F}__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$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));
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$F}__LabelWrapper` }, { children: jsxs("label", Object.assign({ className: `${COMPONENT_NAME$F}__Label` }, { children: [label, isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$F}__IsRequiredSign` }, { children: "*" }), void 0)) : null] }), void 0) }), void 0)) : null;
+    const itemsMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$F}__ItemsWrapper` }, { children: items.map(renderItem) }), void 0));
     return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, itemsMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$A = 'AlphaBadge';
+const COMPONENT_NAME$E = 'AlphaBadge';
 const AlphaBadge = ({ theme: themeProp, children, isSuccess, isWarning, isDanger, isPrimary, }) => {
     const { theme } = useTheme();
     const THEME_CLASS = `${theme}`;
-    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));
+    const className = cssClassName(COMPONENT_NAME$E, !themeProp && THEME_CLASS, isPrimary && 'isPrimary', isDanger && 'isDanger', isSuccess && 'isSuccess', isWarning && 'isWarning', themeProp && `${themeProp.toUpperCase()}`);
+    const childrenMarkup = children && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$E}__TextWrapper` }, { children: children }), void 0));
     return jsx("span", Object.assign({ className: className }, { children: childrenMarkup }), void 0);
 };
 
-const COMPONENT_NAME$z = 'AlphaIcon';
+const COMPONENT_NAME$D = 'AlphaIcon';
 const ICON_COLOR_VARIANTS = [
     'danger',
     'darkGray',
@@ -1145,9 +1165,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$z, color && `is-${color}`, filled && 'isFilled', outlined && 'isOutlined', size && `is-${size}`, hasBackdrop && 'hasBackdrop', source && `source-${sourceType}`);
+    const className = cssClassName(COMPONENT_NAME$D, 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$z}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
+    const StringSource = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$D}__StringSource` }, { children: jsx("span", { children: source }, void 0) }), void 0));
     const content = {
         function: jsx(Source, {}, void 0),
         string: StringSource,
@@ -1155,9 +1175,9 @@ const AlphaIcon = ({ source, size, color, filled, hasBackdrop, outlined, }) => {
     return jsx("span", Object.assign({ className: className }, { children: content[sourceType] }), void 0);
 };
 
-const COMPONENT_NAME$y = 'AlphaSpinner';
+const COMPONENT_NAME$C = 'AlphaSpinner';
 const AlphaSpinner = ({ icon, size }) => {
-    const className = cssClassName(COMPONENT_NAME$y);
+    const className = cssClassName(COMPONENT_NAME$C);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -1167,16 +1187,16 @@ const AlphaSpinner = ({ icon, size }) => {
             iconSource = icon.icon;
         }
     }
-    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$y}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$C}__IconWrapper` }, { children: iconSource }), void 0)) : null;
     return jsx("div", Object.assign({ className: className }, { children: iconMarkup }), void 0);
 };
 
-const COMPONENT_NAME$x = 'AlphaButton';
+const COMPONENT_NAME$B = '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$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 className = cssClassName(COMPONENT_NAME$B, !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',
@@ -1193,7 +1213,7 @@ const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'l
         onTouchStart,
         onTouchEnd,
     };
-    const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$x}__TextWrapper` }, { children: children }), void 0)) : null;
+    const childrenMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__TextWrapper` }, { children: children }), void 0)) : null;
     let iconSource;
     let spinnerIconSource;
     if (icon) {
@@ -1212,18 +1232,18 @@ const AlphaButton = ({ ariaLabel, children, icon, spinnerIcon, iconPosition = 'l
             spinnerIconSource = spinnerIcon.icon;
         }
     }
-    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));
+    const iconMarkup = icon ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const spinnerMarkup = isLoading && (jsx("span", Object.assign({ className: `${COMPONENT_NAME$B}__SpinnerWrapper` }, { children: spinnerIconSource }), void 0));
     return (jsxs("button", Object.assign({ className: className }, buttonProps, { children: [spinnerMarkup, iconMarkup, childrenMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$w = 'AlphaChip';
+const COMPONENT_NAME$A = 'AlphaChip';
 const AlphaChip = ({ children, hasError, removeButtonIcon, isDisabled, theme, onRemove, }) => {
     const { theme: currentTheme } = useTheme();
     const THEME_CLASS = `${currentTheme}`;
-    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));
+    const className = cssClassName(COMPONENT_NAME$A, hasError && 'hasError', isDisabled && 'isDisabled', theme && `${theme.toUpperCase()}`, THEME_CLASS);
+    const childrenMarkup = children ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__TextWrapper` }, { children: children }), void 0)) : null;
+    const closeButtonMarkup = removeButtonIcon && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$A}__CloseButtonWrapper` }, { children: jsx(AlphaButton, { onClick: onRemove, icon: removeButtonIcon }, void 0) }), void 0));
     return (jsxs("div", Object.assign({ className: className }, { children: [childrenMarkup, closeButtonMarkup] }), void 0));
 };
 
@@ -1423,10 +1443,10 @@ const Panel$1 = ({ id, children, isHidden }) => {
     return (jsx("div", Object.assign({ className: className, id: id }, { children: children }), void 0));
 };
 
-const COMPONENT_NAME$v = 'Tabs';
+const COMPONENT_NAME$z = 'Tabs';
 const Tabs = ({ onSelect, selected, tabs, children, className, areFitted, }) => {
     const { theme } = useTheme();
-    const classNames = cssClassName(COMPONENT_NAME$v, `is${themeClassConverter(theme)}`);
+    const classNames = cssClassName(COMPONENT_NAME$z, `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;
@@ -1584,10 +1604,10 @@ const getPosition = (activator, tooltip, alignment) => {
     };
 };
 
-const COMPONENT_NAME$u = 'Alpha__TooltipOverlay';
+const COMPONENT_NAME$y = '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$u, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
+    const overlayClassName = cssClassName(COMPONENT_NAME$y, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
     const [positionStyles, setPositionStyles] = useState({
         '--tooltip-overlay-top': 0,
         '--tooltip-overlay-left': 0,
@@ -1623,7 +1643,7 @@ const Overlay = ({ children, activator, active, zIndexOverride, position = 'bott
     return markup;
 };
 
-const COMPONENT_NAME$t = 'AlphaTooltip';
+const COMPONENT_NAME$x = '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);
@@ -1631,7 +1651,7 @@ const AlphaTooltip = ({ content, children, activatorWrapper = 'span', isActive:
     const isMouseOver = useRef(false);
     const activatorContainer = useRef(null);
     const WrapperComponent = activatorWrapper;
-    const className = cssClassName(COMPONENT_NAME$t);
+    const className = cssClassName(COMPONENT_NAME$x);
     const handleOpen = useCallback(() => {
         if (!isActivePersistence) {
             setIsActive(true);
@@ -2210,10 +2230,10 @@ const Popover$1 = ({ activator, children, isActive, onClose, isFullWidth = false
 };
 Popover$1.Pane = Pane$1;
 
-const COMPONENT_NAME$s = 'Divider';
+const COMPONENT_NAME$w = 'Divider';
 const Divider = ({ alignment = 'left', label }) => {
-    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;
+    const className = cssClassName(COMPONENT_NAME$w, alignment, !label && 'no-label');
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$w}__LabelWrapper` }, { children: jsx("span", Object.assign({ className: `${COMPONENT_NAME$w}__Label` }, { children: label }), void 0) }), void 0)) : null;
     return jsx("div", Object.assign({ className: className }, { children: labelMarkup }), void 0);
 };
 
@@ -9712,7 +9732,7 @@ function formatDate(date, toISO) {
     return DateTime.fromJSDate(date).toFormat('dd/MM/yyyy');
 }
 
-const COMPONENT_NAME$r = 'DateInput';
+const COMPONENT_NAME$v = 'DateInput';
 const AlphaInputDate = ({ ariaLabel, disabled, label, onChange, value, isRequired, placeholder, onBlur, errorMessage, months, weekdays, }) => {
     const [isPopoverActive, setIsPopoverActive] = useState(false);
     const [{ month, year }, setDate] = useState({
@@ -9723,7 +9743,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$r);
+    const className = cssClassName(COMPONENT_NAME$v);
     const handleMonthChange = (monthValue, yearValue) => {
         setDate({ month: monthValue, year: yearValue });
     };
@@ -9845,7 +9865,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$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 inputMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$v}__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);
 };
@@ -9935,9 +9955,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$q = 'AlphaInlineError';
+const COMPONENT_NAME$u = 'AlphaInlineError';
 const AlphaInlineError = ({ icon, children }) => {
-    const className = cssClassName(COMPONENT_NAME$q);
+    const className = cssClassName(COMPONENT_NAME$u);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -9947,23 +9967,23 @@ const AlphaInlineError = ({ icon, children }) => {
             iconSource = icon.icon;
         }
     }
-    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;
+    const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$u}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const messageMarkup = children ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$u}__MessageWrapper` }, { children: children }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$p = 'AlphaLabel';
-const className$1 = cssClassName(COMPONENT_NAME$p);
+const COMPONENT_NAME$t = 'AlphaLabel';
+const className$1 = cssClassName(COMPONENT_NAME$t);
 const AlphaLabel = ({ children, isRequired, action, id }) => {
-    const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__RequiredSign` }, { children: "*" }), void 0)) : null;
+    const requiredSignMarkup = isRequired ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$t}__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$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;
+    const actionMarkup = action ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$t}__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$o = 'AlphaLabelledField__HelpText';
+const COMPONENT_NAME$s = 'AlphaLabelledField__HelpText';
 const HelpText = ({ message, icon }) => {
-    const className = cssClassName(COMPONENT_NAME$o);
+    const className = cssClassName(COMPONENT_NAME$s);
     let iconSource;
     if (icon) {
         if (isValidIcon(icon.icon)) {
@@ -9973,27 +9993,175 @@ const HelpText = ({ message, icon }) => {
             iconSource = icon.icon;
         }
     }
-    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;
+    const iconMarkup = iconSource ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$s}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const messageMarkup = message ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$s}__MessageWrapper` }, { children: message }), void 0)) : null;
     return (jsxs("div", Object.assign({ className: className }, { children: [iconMarkup, messageMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$n = 'AlphaLabelledField';
+const COMPONENT_NAME$r = 'AlphaLabelledField';
 const AlphaLabelledField = ({ label, children, action, error, helpText, id, isRequired, }) => {
-    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 className = cssClassName(COMPONENT_NAME$r);
+    const labelMarkup = label ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$r}__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$r}__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$n}__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$r}__ContentWrapper` }, { children: children }), void 0) }), void 0)) : (children);
     return (jsxs("div", Object.assign({ className: className }, { children: [labelMarkup, contentMarkup, helpTextMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$m = 'AlphaInputText';
+const COMPONENT_NAME$q = 'AlphaInputText';
 const AlphaInputText = ({ isDisabled, label }) => {
-    const className = cssClassName(COMPONENT_NAME$m, isDisabled && 'isDisabled');
+    const className = cssClassName(COMPONENT_NAME$q, isDisabled && 'isDisabled');
     return (jsx(AlphaLabelledField, Object.assign({ label: label }, { children: jsx("div", { className: className }, void 0) }), void 0));
 };
 
+const SideMenuContext = createContext({});
+
+const COMPONENT_NAME$p = 'AlphaSideMenu__Item';
+const Item$3 = ({ label, isDisabled, icon, onClick, isActive: isActiveProp, subNavigationItems, truncateText, anchorProps, isCollapsed: isCollapsedProp, isSubNavigation, isExternal, isExact, url, isVisible, }) => {
+    const { anchorComponent, collapsed, setCurrentTierItems, location } = useContext(SideMenuContext);
+    const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
+    const AnchorComponent = !isExternal ? anchorComponent || 'a' : 'a';
+    const isActive = useMemo(() => {
+        if (location && url) {
+            return isExact
+                ? location.pathname === url
+                : location.pathname.includes(url);
+        }
+        return isActiveProp;
+    }, [location, isExact, isActiveProp, url]);
+    useEffect(() => {
+        if (isActive && subNavigationItems) {
+            setCurrentTierItems === null || setCurrentTierItems === void 0 ? void 0 : setCurrentTierItems(subNavigationItems || [], {
+                label,
+                url,
+                isDisabled,
+                isActive: isActiveProp,
+                subNavigationItems: subNavigationItems || [],
+                truncateText,
+                anchorProps,
+                isExternal,
+                isExact,
+                isVisible,
+            });
+        }
+    }, [isActive]);
+    const labelMarkup = label ? (jsx("span", Object.assign({ className: `${COMPONENT_NAME$p}__Label` }, { children: label }), void 0)) : null;
+    const iconSource = icon && isValidIcon(icon === null || icon === void 0 ? void 0 : icon.icon) ? (jsx(AlphaIcon, { source: icon === null || icon === void 0 ? void 0 : icon.icon, outlined: icon === null || icon === void 0 ? void 0 : icon.outlined }, void 0)) : (jsx(Fragment, { children: icon }, void 0));
+    const iconMarkup = icon ? (jsx("div", Object.assign({ className: `${COMPONENT_NAME$p}__IconWrapper` }, { children: iconSource }), void 0)) : null;
+    const handleClick = () => {
+        if (!isDisabled) {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+            if (!isSubNavigation) {
+                setCurrentTierItems === null || setCurrentTierItems === void 0 ? void 0 : setCurrentTierItems(subNavigationItems || [], {
+                    label,
+                    url,
+                    isDisabled,
+                    isActive: isActiveProp,
+                    subNavigationItems: subNavigationItems || [],
+                    truncateText,
+                    anchorProps,
+                    isExternal,
+                    isExact,
+                    isVisible,
+                });
+            }
+        }
+    };
+    const anchorMarkup = (jsxs(AnchorComponent, Object.assign({}, anchorProps, { target: isExternal ? '_blank' : undefined, onClick: handleClick }, { children: [iconMarkup, labelMarkup] }), void 0));
+    const tooltipAnchorMarkup = isCollapsed ? (jsx(AlphaTooltip, Object.assign({ content: label, position: 'right' }, { children: anchorMarkup }), void 0)) : null;
+    const classNames = cssClassName(COMPONENT_NAME$p, isDisabled && 'isDisabled', isActive && 'isActive', truncateText && 'isTruncated', (isCollapsed !== undefined ? isCollapsed : collapsed) && 'isCollapsed');
+    if (isVisible !== undefined &&
+        !isVisible(location, {
+            label,
+            url,
+            isDisabled,
+            isActive: isActiveProp,
+            subNavigationItems: subNavigationItems || [],
+            truncateText,
+            anchorProps,
+        })) {
+        return null;
+    }
+    return jsx("li", Object.assign({ className: classNames }, { children: tooltipAnchorMarkup || anchorMarkup }), void 0);
+};
+
+const COMPONENT_NAME$o = 'AlphaSideMenu__Section';
+const Section$1 = ({ items, fill, title, isCollapsed: isCollapsedProp, areSubNavigationItems, }) => {
+    const { collapsed } = useContext(SideMenuContext);
+    const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
+    const titleClassNames = cssClassName(`${COMPONENT_NAME$o}__TitleWrapper`, (isCollapsed !== undefined ? isCollapsed : collapsed) && 'isCollapsed');
+    const titleMarkup = title ? (jsx("div", Object.assign({ 
+        // layout
+        className: titleClassNames }, { children: jsx("span", { children: title }, void 0) }), void 0)) : null;
+    const renderItem = (item, index) => {
+        const { label, isDisabled, icon, onClick, isActive, subNavigationItems, truncateText, anchorProps, url, isExact, isExternal, isVisible, } = item;
+        return (jsx(Item$3, { label: label, isDisabled: isDisabled, icon: icon, onClick: onClick, isActive: isActive, subNavigationItems: subNavigationItems, truncateText: truncateText, anchorProps: anchorProps, isCollapsed: isCollapsed, isSubNavigation: areSubNavigationItems, url: url, isExact: isExact, isExternal: isExternal, isVisible: isVisible }, `alpha-side-menu-item-${index}`));
+    };
+    const itemsMarkup = items && items.length > 0 ? (jsx("ul", Object.assign({ className: `${COMPONENT_NAME$o}__Items` }, { children: items.map(renderItem) }), void 0)) : null;
+    const classNames = cssClassName(COMPONENT_NAME$o, fill && 'isFill');
+    return (jsxs("div", Object.assign({ className: classNames }, { children: [titleMarkup, itemsMarkup] }), void 0));
+};
+
+const COMPONENT_NAME$n = 'AlphaSideMenu__Tier';
+const Tier = ({ children, title, isCollapsed, onExpand, hasSubNavigation, collapseExpandIcon, }) => {
+    const { collapsed } = useContext(SideMenuContext);
+    const isMenuCollapsed = isCollapsed !== undefined ? isCollapsed : collapsed;
+    const titleMarkup = title ? (jsx("div", Object.assign({ 
+        // layout
+        className: `${COMPONENT_NAME$n}__TitleWrapper` }, { children: jsx("span", { children: title }, void 0) }), void 0)) : null;
+    const cssExpandButtonWrapperClassName = cssClassName(`${COMPONENT_NAME$n}__ExpandButtonWrapper`, hasSubNavigation && 'isCollapsed');
+    const expandButtonMarkup = (jsx("div", Object.assign({ 
+        //  layout
+        className: cssExpandButtonWrapperClassName }, { children: jsx(AlphaButton, { icon: collapseExpandIcon, size: 'small', onClick: onExpand }, void 0) }), void 0));
+    const classNames = cssClassName(COMPONENT_NAME$n, isMenuCollapsed && 'isCollapsed');
+    return (jsxs("div", Object.assign({ className: classNames }, { children: [titleMarkup, expandButtonMarkup, children] }), void 0));
+};
+
+const COMPONENT_NAME$m = 'AlphaSideMenu';
+const AlphaSideMenu = ({ children, collapsed, anchorComponent, collapseExpandIcon, location, }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const [subNavigationTierItems, setSubNavigationTierItems] = useState([]);
+    const [subNavigationTierTitle, setSubNavigationTierTitle] = useState(undefined);
+    useEffect(() => {
+        if (collapsed !== undefined) {
+            setIsCollapsed(collapsed);
+        }
+    }, [collapsed]);
+    Children.forEach(children, (child) => {
+        if (!isValidElement(child) || child.type !== Section$1) {
+            console.error('AlphaSideMenu only accepts Section components as children');
+        }
+    });
+    const cssClassNames = cssClassName(COMPONENT_NAME$m, isCollapsed && 'isCollapsed');
+    const handleSetCurrentTierItems = (items, item) => {
+        if (!(item === null || item === void 0 ? void 0 : item.isExternal)) {
+            if (!items.length) {
+                setSubNavigationTierItems([]);
+                setSubNavigationTierTitle(undefined);
+                setIsCollapsed(false);
+                return;
+            }
+            setSubNavigationTierItems(items);
+            setSubNavigationTierTitle(item === null || item === void 0 ? void 0 : item.label);
+            setIsCollapsed(true);
+        }
+    };
+    const handleExpand = () => {
+        setIsCollapsed(!isCollapsed);
+    };
+    const contextValue = {
+        anchorComponent,
+        collapsed: isCollapsed,
+        setCurrentTierItems: handleSetCurrentTierItems,
+        location,
+    };
+    const subNavigationSectionMarkup = (jsx(Section$1, { isCollapsed: false, items: subNavigationTierItems, areSubNavigationItems: true }, void 0));
+    const subNavigationTierMarkup = subNavigationTierItems.length ? (jsx(Tier, Object.assign({ title: subNavigationTierTitle, isCollapsed: false }, { children: subNavigationSectionMarkup }), void 0)) : null;
+    const mainTierNavMarkup = (jsx(Tier, Object.assign({ onExpand: handleExpand, hasSubNavigation: subNavigationTierItems.length > 0, collapseExpandIcon: collapseExpandIcon }, { children: children }), void 0));
+    return (jsx(SideMenuContext.Provider, Object.assign({ value: contextValue }, { children: jsxs("div", Object.assign({ className: cssClassNames }, { children: [mainTierNavMarkup, subNavigationTierMarkup] }), void 0) }), void 0));
+};
+AlphaSideMenu.Section = Section$1;
+
 const StepDefault = {
     status: 'incomplete',
 };
@@ -28153,7 +28321,7 @@ FormLayout.Group = Group;
  * @param {ReactNode} FrameProps.sideMenu - Component to display as menu, left side
  * @param {ReactNode} FrameProps.content - Component to display as content
  */
-const Frame = ({ header, navigation, children }) => (jsxs("div", Object.assign({ className: 'Frame' }, { children: [header && jsx("div", Object.assign({ className: 'Frame__Header' }, { children: header }), void 0), navigation && jsx("div", Object.assign({ className: 'Frame__Navigation' }, { children: navigation }), void 0), jsx("div", Object.assign({ className: 'Frame__Content' }, { children: children }), void 0)] }), void 0));
+const Frame = ({ header, navigation, children }) => (jsxs("div", Object.assign({ className: 'Frame' }, { children: [header && jsx("div", Object.assign({ className: 'Frame__Header' }, { children: header }), void 0), jsxs("div", Object.assign({ className: 'Frame__Container' }, { children: [navigation && jsx("div", Object.assign({ className: 'Frame__Navigation' }, { children: navigation }), void 0), jsx("div", Object.assign({ className: 'Frame__Content' }, { children: children }), void 0)] }), void 0)] }), void 0));
 
 const KibanCloud = ({ size }) => (jsxs("svg", Object.assign({ className: `Logo Logo--${size}`, viewBox: '0 0 384 48', fill: 'none' }, { children: [jsxs("g", Object.assign({ clipPath: 'url(#clip0_47_16047)' }, { children: [jsxs("g", Object.assign({ clipPath: 'url(#clip1_47_16047)' }, { children: [jsx("path", { d: 'M48 48.3363V0.337029L47.6361 0.358307C41.5229 0.715759 35.7795 3.40131 31.5881 7.86215C27.3971 12.3226 25.0768 18.2186 25.1046 24.3367C25.0768 30.4548 27.3971 36.3508 31.5881 40.8112C35.7795 45.272 41.5229 47.9576 47.6361 48.315L48 48.3363Z', fill: '#0047FF' }, void 0), jsx("path", { d: 'M0 23.2516V0.337029H29.4276L29.4221 0.423215C29.0332 6.47079 26.4067 12.1575 22.0534 16.377C17.7002 20.5965 11.9316 23.0469 5.87019 23.2514L5.85842 23.2516H0Z', fill: '#0000CC' }, void 0), jsx("path", { d: 'M29.4201 48.3374C29.0246 42.301 26.3995 36.626 22.0534 32.4135C17.7002 28.194 11.9316 25.7436 5.87019 25.5391L5.85842 25.5389H0V48.3374H29.4201Z', fill: '#0000CC' }, void 0)] }), void 0), jsxs("g", Object.assign({ clipPath: 'url(#clip2_47_16047)' }, { children: [jsx("path", { d: 'M68.1528 0H59.52V47.4651H68.1528V0Z', fill: 'black' }, void 0), jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M116.427 47.4651V43.5771C118.119 46.2583 121.981 48 126.183 48C136.418 48 142.451 40.896 142.451 30.576C142.451 20.256 136.418 13.152 126.322 13.152C122.051 13.152 118.39 14.8937 116.427 17.4377V0H107.885V47.4651H116.427ZM124.963 20.4274C130.385 20.4274 133.977 24.4457 133.977 30.5486V30.576C133.977 36.672 130.448 40.6971 124.963 40.6971C119.478 40.6971 115.886 36.6788 115.886 30.576C115.886 24.4731 119.541 20.4274 124.963 20.4274Z', fill: 'black' }, void 0), jsx("path", { d: 'M102.656 0.0137492H94.1206V8.45489H102.656V0.0137492Z', fill: 'black' }, void 0), jsx("path", { d: 'M102.67 13.6868H94.1276V47.4651H102.67V13.6868Z', fill: 'black' }, void 0), jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M178.694 47.4652H170.152V43.5772C168.46 46.2583 164.667 48 160.396 48C150.161 48 144.115 40.896 144.115 30.576C144.115 20.256 150.147 13.152 160.243 13.152C164.514 13.152 168.176 14.8938 170.138 17.4377V13.7143H178.681L178.694 47.4652ZM170.693 30.576C170.693 24.4732 167.101 20.4549 161.616 20.4549C156.131 20.4549 152.602 24.4732 152.602 30.576C152.602 36.6789 156.194 40.6972 161.616 40.6972C167.038 40.6972 170.693 36.672 170.693 30.576Z', fill: 'black' }, void 0), jsx("path", { d: 'M192.465 13.7143H183.923V47.4651H192.445V32.6537C192.445 25.0766 195.489 20.6537 200.71 20.6537C204.711 20.6537 207.214 23.4034 207.214 27.36V47.4651H215.784V25.3714C215.784 17.9794 210.764 13.1794 203.303 13.1794C201.164 13.1415 199.049 13.6375 197.155 14.6215C195.261 15.6054 193.648 17.0457 192.465 18.8091V13.7143Z', fill: 'black' }, void 0), jsx("path", { d: 'M92.1167 13.6731L76.4459 29.0057L94.1206 47.4651H82.2982L68.1598 31.9131V26.544L81.0847 13.6731H92.1167Z', fill: 'black' }, void 0)] }), void 0)] }), void 0), jsx("g", Object.assign({ clipPath: 'url(#clip3_47_16047)' }, { children: jsxs("g", Object.assign({ opacity: '0.6' }, { children: [jsx("path", { d: 'M241.623 48C238.422 48 235.537 47.2787 232.967 45.836C230.442 44.3483 228.436 42.2971 226.948 39.6823C225.506 37.0224 224.784 33.9343 224.784 30.4179C224.784 26.9015 225.506 23.8359 226.948 21.2211C228.436 18.5612 230.442 16.51 232.967 15.0673C235.537 13.5796 238.422 12.8358 241.623 12.8358C245.59 12.8358 248.926 13.8727 251.631 15.9465C254.381 18.0202 256.117 20.7928 256.838 24.2641H251.022C250.571 22.1904 249.467 20.5899 247.709 19.4629C245.951 18.2907 243.899 17.7047 241.555 17.7047C239.662 17.7047 237.881 18.178 236.213 19.1248C234.545 20.0715 233.192 21.4916 232.155 23.385C231.118 25.2785 230.6 27.6228 230.6 30.4179C230.6 33.213 231.118 35.5573 232.155 37.4507C233.192 39.3442 234.545 40.7868 236.213 41.7786C237.881 42.7254 239.662 43.1987 241.555 43.1987C243.899 43.1987 245.951 42.6352 247.709 41.5081C249.467 40.336 250.571 38.6905 251.022 36.5716H256.838C256.162 39.9528 254.449 42.7028 251.699 44.8217C248.949 46.9406 245.59 48 241.623 48Z', fill: 'black' }, void 0), jsx("path", { d: 'M262.742 47.1885V0H268.423V47.1885H262.742Z', fill: 'black' }, void 0), jsx("path", { d: 'M290.987 48C287.831 48 284.991 47.2787 282.467 45.836C279.942 44.3934 277.936 42.3647 276.448 39.7499C275.006 37.0901 274.284 33.9794 274.284 30.4179C274.284 26.8564 275.028 23.7682 276.516 21.1535C278.004 18.4936 280.01 16.4424 282.534 14.9997C285.104 13.5571 287.967 12.8358 291.123 12.8358C294.278 12.8358 297.118 13.5571 299.643 14.9997C302.168 16.4424 304.151 18.4936 305.594 21.1535C307.082 23.7682 307.826 26.8564 307.826 30.4179C307.826 33.9794 307.082 37.0901 305.594 39.7499C304.106 42.3647 302.078 44.3934 299.508 45.836C296.983 47.2787 294.143 48 290.987 48ZM290.987 43.1311C292.926 43.1311 294.729 42.6577 296.397 41.711C298.065 40.7643 299.418 39.3442 300.455 37.4507C301.491 35.5573 302.01 33.213 302.01 30.4179C302.01 27.6228 301.491 25.2785 300.455 23.385C299.463 21.4916 298.133 20.0715 296.465 19.1248C294.797 18.178 293.016 17.7047 291.123 17.7047C289.184 17.7047 287.381 18.178 285.713 19.1248C284.045 20.0715 282.692 21.4916 281.655 23.385C280.618 25.2785 280.1 27.6228 280.1 30.4179C280.1 33.213 280.618 35.5573 281.655 37.4507C282.692 39.3442 284.022 40.7643 285.645 41.711C287.313 42.6577 289.094 43.1311 290.987 43.1311Z', fill: 'black' }, void 0), jsx("path", { d: 'M325.935 48C321.968 48 318.812 46.8053 316.468 44.416C314.123 41.9815 312.951 38.2622 312.951 33.2581V13.6473H318.632V32.6495C318.632 39.6372 321.494 43.1311 327.22 43.1311C330.15 43.1311 332.562 42.0942 334.455 40.0204C336.394 37.9016 337.363 34.9036 337.363 31.0265V13.6473H343.044V47.1885H337.904L337.499 41.17C336.462 43.2889 334.906 44.9569 332.832 46.1742C330.804 47.3914 328.505 48 325.935 48Z', fill: 'black' }, void 0), jsx("path", { d: 'M365.58 48C362.244 48 359.314 47.2336 356.789 45.7008C354.31 44.168 352.371 42.0717 350.974 39.4118C349.621 36.752 348.945 33.7314 348.945 30.3503C348.945 26.9691 349.644 23.9711 351.041 21.3563C352.439 18.6965 354.377 16.6227 356.857 15.135C359.336 13.6022 362.267 12.8358 365.648 12.8358C368.398 12.8358 370.832 13.3993 372.951 14.5264C375.07 15.6534 376.716 17.2313 377.888 19.26V0H383.568V47.1885H378.429L377.888 41.6434C376.806 43.2664 375.25 44.7315 373.222 46.0389C371.193 47.3463 368.646 48 365.58 48ZM366.189 43.0635C368.443 43.0635 370.427 42.545 372.14 41.5081C373.898 40.4262 375.25 38.9384 376.197 37.045C377.189 35.1515 377.685 32.9425 377.685 30.4179C377.685 27.8933 377.189 25.6842 376.197 23.7908C375.25 21.8973 373.898 20.4321 372.14 19.3953C370.427 18.3133 368.443 17.7723 366.189 17.7723C363.98 17.7723 361.996 18.3133 360.238 19.3953C358.525 20.4321 357.172 21.8973 356.181 23.7908C355.234 25.6842 354.76 27.8933 354.76 30.4179C354.76 32.9425 355.234 35.1515 356.181 37.045C357.172 38.9384 358.525 40.4262 360.238 41.5081C361.996 42.545 363.98 43.0635 366.189 43.0635Z', fill: 'black' }, void 0)] }), void 0) }), void 0), jsxs("defs", { children: [jsx("clipPath", Object.assign({ id: 'clip0_47_16047' }, { children: jsx("rect", { width: '215.784', height: '48', fill: 'white' }, void 0) }), void 0), jsx("clipPath", Object.assign({ id: 'clip1_47_16047' }, { children: jsx("rect", { width: '48', height: '48', fill: 'white' }, void 0) }), void 0), jsx("clipPath", Object.assign({ id: 'clip2_47_16047' }, { children: jsx("rect", { width: '156.264', height: '48', fill: 'white', transform: 'translate(59.52)' }, void 0) }), void 0), jsx("clipPath", Object.assign({ id: 'clip3_47_16047' }, { children: jsx("rect", { width: '158.784', height: '48', fill: 'white', transform: 'translate(224.784)' }, void 0) }), void 0)] }, void 0)] }), void 0));
 
@@ -28290,8 +28458,8 @@ const Header$1 = ({ leftContent, rightContent, actions, userMenu, logo, extraAct
     const { theme } = useTheme();
     const renderAction = (item, index) => (jsx("div", Object.assign({ className: 'User-menu__secondary-action', onClick: item.onClick }, { children: jsx(Icon, { name: item.icon }, void 0) }), index || ''));
     const renderActionWithTooltip = (item, index) => {
-        var _a, _b;
-        return (jsx(Tooltip, Object.assign({ position: (_a = item.tooltip) === null || _a === void 0 ? void 0 : _a.position, text: (item.tooltip && item.tooltip.text) || '', id: (item.tooltip && item.tooltip.id) || '', toggleType: (_b = item.tooltip) === null || _b === void 0 ? void 0 : _b.toogleType }, { children: renderAction(item) }), index));
+        var _a;
+        return (jsx(AlphaTooltip, Object.assign({ position: (_a = item.tooltip) === null || _a === void 0 ? void 0 : _a.position, content: (item.tooltip && item.tooltip.text) || '', appearance: 'default', theme: 'cloud' }, { children: renderAction(item) }), index));
     };
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: `Header__${theme} Header__container` }, { children: [jsxs("div", Object.assign({ className: 'Header__container-logo' }, { children: [extraAction && (extraAction === null || extraAction === void 0 ? void 0 : extraAction.icon) && (jsx("div", Object.assign({ className: 'Header__container-logo__extra-action' }, { children: jsx(IconButton, { onClick: extraAction === null || extraAction === void 0 ? void 0 : extraAction.onClick, icon: extraAction.icon, isRound: true, size: 'small', appearance: 'tertiary' }, void 0) }), void 0)), logo && jsx(Logo, { name: logo, size: 'small' }, void 0), leftContent && (jsx("div", Object.assign({ className: 'Header__container-content-left' }, { children: leftContent }), void 0))] }), void 0), jsxs("div", Object.assign({ className: 'Header__right-container' }, { children: [rightContent && (jsx("div", Object.assign({ className: 'Header__right-content' }, { children: rightContent }), void 0)), jsxs("div", Object.assign({ className: 'Header__menus-container' }, { children: [jsx("hr", { className: 'User-menu__divider-left' }, void 0), actions === null || actions === void 0 ? void 0 : actions.map((item, i) => item.tooltip
                                         ? renderActionWithTooltip(item, i)
@@ -30007,6 +30175,7 @@ const Section = ({ items, title, empty }) => {
 /**
  * The Side Menu is used to show navigation.
  *
+ * @deprecated This component is deprecated and will be removed in a future version. Please use the new SideMenu component when it becomes available.
  * @param {SideMenuProps}  SideMenuProps -SideMenuProps
  * @param {object} SideMenuProps.itemsBottom - Element to render section inside this component
  * @returns {symbol} - Element SideMenu
@@ -30603,5 +30772,5 @@ const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected
     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 };
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSideMenu, 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, Item$3 as Item, 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, Section$1 as Section, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tier, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, formatFileSize, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
 //# sourceMappingURL=index.js.map