kiban-design-system 1.0.283-alpha.0 → 1.0.286-alpha.0

package/dist/index.cjs.js

@@ -2421,7 +2421,7 @@ const LifeBuoy = () => /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fra
   })]
 });
 
-const Link$2 = () => /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+const Link$3 = () => /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
   children: [/*#__PURE__*/jsxRuntimeExports.jsx("path", {
     d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
   }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
@@ -4703,7 +4703,7 @@ var Icons = /*#__PURE__*/Object.freeze({
 	Layers: Layers,
 	Layout: Layout,
 	LifeBuoy: LifeBuoy,
-	Link: Link$2,
+	Link: Link$3,
 	Link2: Link2,
 	Linkedin: Linkedin,
 	List: List$1,
@@ -5372,7 +5372,7 @@ const KibanCloud = ({
   })]
 });
 
-const Link$1 = ({
+const Link$2 = ({
   size
 }) => /*#__PURE__*/jsxRuntimeExports.jsxs("svg", {
   className: `Logo Logo--${size}`,
@@ -6798,7 +6798,7 @@ var Logos = /*#__PURE__*/Object.freeze({
 	KibanWhite: KibanWhite,
 	Klin: Klin,
 	KlinWhite: KlinWhite,
-	Link: Link$1,
+	Link: Link$2,
 	LinkWhite: LinkWhite,
 	Rainao: Rainao,
 	RainaoWhite: RainaoWhite,
@@ -6831,7 +6831,8 @@ const Logo = ({
 
 const AlertContext = /*#__PURE__*/React2.createContext({
   addAlert: () => null,
-  limit: 0
+  limit: 0,
+  deleteAlert: () => {}
 });
 
 const AlertProvider = ({
@@ -6857,9 +6858,15 @@ const AlertProvider = ({
   const countDownAlerts = () => {
     let alerts = alertList.map(alertElem => ({
       ...alertElem,
-      duration: alertElem.duration - 1000
+      duration: alertElem.duration === "infinite" ? "infinite" : alertElem.duration - 1000
     }));
-    alerts = alerts.filter(alertElement => alertElement.duration > 0);
+    // Trigger on dismiss event when an alert is dismissed
+    alerts.forEach(alertElement => {
+      if (alertElement.duration === 0) {
+        alertElement.onDismiss?.(alertElement.id);
+      }
+    });
+    alerts = alerts.filter(alertElement => alertElement.duration === "infinite" || typeof alertElement.duration === "number" && alertElement.duration > 0);
     setAlertList(alerts);
   };
   React2.useEffect(() => {
@@ -6876,7 +6883,9 @@ const AlertProvider = ({
     icon,
     appearance,
     content,
-    duration
+    duration,
+    onDismiss,
+    dismissible = false
   }) => {
     const id = Math.floor(Math.random() * 100 + 1);
     const alertAddProps = {
@@ -6884,9 +6893,12 @@ const AlertProvider = ({
       appearance,
       content,
       duration,
-      id
+      id,
+      onDismiss,
+      dismissible
     };
     setNewAlert(alertAddProps);
+    return id;
   };
   const deleteAlert = index => {
     if (index !== undefined) {
@@ -6896,15 +6908,16 @@ const AlertProvider = ({
   return /*#__PURE__*/jsxRuntimeExports.jsxs(AlertContext.Provider, {
     value: {
       addAlert,
-      limit
+      limit,
+      deleteAlert
     },
     children: [children, portalTarget && alertList.length > 0 && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/jsxRuntimeExports.jsx("div", {
       className: "AlertProvider",
       children: alertList.map(alertItem => /*#__PURE__*/jsxRuntimeExports.jsx(Alert, {
         icon: alertItem.icon,
         appearance: alertItem.appearance,
-        duration: alertItem.duration,
-        onDismiss: alertItem.id ? () => deleteAlert(alertItem.id) : undefined,
+        duration: alertItem.duration === "infinite" ? undefined : alertItem.duration,
+        onDismiss: alertItem.dismissible ? () => deleteAlert(alertItem.id) : undefined,
         content: alertItem.content,
         id: alertItem.id
       }, alertItem.id))
@@ -6974,7 +6987,7 @@ const Grid = ({
 };
 Grid.Item = GridItem;
 
-const COMPONENT_NAME$E = 'AlphaAttributeInput';
+const COMPONENT_NAME$F = 'AlphaAttributeInput';
 const AlphaAttributeInput = ({
   items,
   divider,
@@ -6982,7 +6995,7 @@ const AlphaAttributeInput = ({
   isRequired
 }) => {
   const [isFocused, setIsFocused] = React2.useState(false);
-  const className = cssClassName(COMPONENT_NAME$E, isFocused && 'isFocused');
+  const className = cssClassName(COMPONENT_NAME$F, isFocused && 'isFocused');
   const handleBlur = callback => {
     setIsFocused(false);
     if (callback) {
@@ -7002,16 +7015,16 @@ const AlphaAttributeInput = ({
       }
     };
     const itemLabelMarkup = item.label ? /*#__PURE__*/jsxRuntimeExports.jsx("label", {
-      className: `${COMPONENT_NAME$E}__ItemLabelWrapper`,
+      className: `${COMPONENT_NAME$F}__ItemLabelWrapper`,
       children: item.label
     }) : null;
     const dividerMarkup = divider && index < items.length - 1 ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-      className: `${COMPONENT_NAME$E}__Divider`,
+      className: `${COMPONENT_NAME$F}__Divider`,
       children: divider
     }) : null;
     return /*#__PURE__*/jsxRuntimeExports.jsxs(React2.Fragment, {
       children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-        className: `${COMPONENT_NAME$E}__Item`,
+        className: `${COMPONENT_NAME$F}__Item`,
         children: [itemLabelMarkup, /*#__PURE__*/jsxRuntimeExports.jsx("input", {
           type: item.type,
           value: item.value,
@@ -7028,17 +7041,17 @@ const AlphaAttributeInput = ({
     }, index);
   };
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$E}__LabelWrapper`,
+    className: `${COMPONENT_NAME$F}__LabelWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs("label", {
-      className: `${COMPONENT_NAME$E}__Label`,
+      className: `${COMPONENT_NAME$F}__Label`,
       children: [label, isRequired ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-        className: `${COMPONENT_NAME$E}__IsRequiredSign`,
+        className: `${COMPONENT_NAME$F}__IsRequiredSign`,
         children: "*"
       }) : null]
     })
   }) : null;
   const itemsMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$E}__ItemsWrapper`,
+    className: `${COMPONENT_NAME$F}__ItemsWrapper`,
     children: items.map(renderItem)
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -7047,7 +7060,7 @@ const AlphaAttributeInput = ({
   });
 };
 
-const COMPONENT_NAME$D = "AlphaBadge";
+const COMPONENT_NAME$E = "AlphaBadge";
 const AlphaBadge = ({
   theme: themeProp,
   children,
@@ -7060,9 +7073,9 @@ const AlphaBadge = ({
     theme
   } = useTheme();
   const THEME_CLASS = `${theme}`;
-  const className = cssClassName(COMPONENT_NAME$D, !themeProp && THEME_CLASS, isPrimary && "isPrimary", isDanger && "isDanger", isSuccess && "isSuccess", isWarning && "isWarning", themeProp && `${themeProp.toUpperCase()}`);
+  const className = cssClassName(COMPONENT_NAME$E, !themeProp && THEME_CLASS, isPrimary && "isPrimary", isDanger && "isDanger", isSuccess && "isSuccess", isWarning && "isWarning", themeProp && `${themeProp.toUpperCase()}`);
   const childrenMarkup = children && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$D}__TextWrapper`,
+    className: `${COMPONENT_NAME$E}__TextWrapper`,
     children: children
   });
   return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
@@ -7071,7 +7084,7 @@ const AlphaBadge = ({
   });
 };
 
-const COMPONENT_NAME$C = "AlphaIcon";
+const COMPONENT_NAME$D = "AlphaIcon";
 const ICON_COLOR_VARIANTS = ["danger", "darkGray", "lightGray", "onDark", "primary", "success", "warning", "cloud", "klin", "link", "rainao", "workfloo", "rekon"];
 const AlphaIcon = ({
   source,
@@ -7090,10 +7103,10 @@ const AlphaIcon = ({
   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$C, 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 = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$C}__StringSource`,
+    className: `${COMPONENT_NAME$D}__StringSource`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       children: source
     })
@@ -7108,12 +7121,12 @@ const AlphaIcon = ({
   });
 };
 
-const COMPONENT_NAME$B = "AlphaSpinner";
+const COMPONENT_NAME$C = "AlphaSpinner";
 const AlphaSpinner = ({
   icon,
   size
 }) => {
-  const className = cssClassName(COMPONENT_NAME$B);
+  const className = cssClassName(COMPONENT_NAME$C);
   let iconSource;
   if (icon) {
     if (isValidIcon(icon.icon)) {
@@ -7128,7 +7141,7 @@ const AlphaSpinner = ({
     }
   }
   const iconMarkup = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$B}__IconWrapper`,
+    className: `${COMPONENT_NAME$C}__IconWrapper`,
     children: iconSource
   }) : null;
   return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
@@ -7137,7 +7150,7 @@ const AlphaSpinner = ({
   });
 };
 
-const COMPONENT_NAME$A = "AlphaButton";
+const COMPONENT_NAME$B = "AlphaButton";
 const AlphaButton = ({
   ariaLabel,
   children,
@@ -7173,7 +7186,7 @@ const AlphaButton = ({
   } = useTheme();
   const THEME_CLASS = `${theme}`;
   const isIconOnly = !children && icon;
-  const className = cssClassName(COMPONENT_NAME$A, !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",
@@ -7191,7 +7204,7 @@ const AlphaButton = ({
     onTouchEnd
   };
   const childrenMarkup = children ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$A}__TextWrapper`,
+    className: `${COMPONENT_NAME$B}__TextWrapper`,
     children: children
   }) : null;
   let iconSource;
@@ -7217,11 +7230,11 @@ const AlphaButton = ({
     }
   }
   const iconMarkup = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$A}__IconWrapper`,
+    className: `${COMPONENT_NAME$B}__IconWrapper`,
     children: iconSource
   }) : null;
   const spinnerMarkup = isLoading && /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$A}__SpinnerWrapper`,
+    className: `${COMPONENT_NAME$B}__SpinnerWrapper`,
     children: spinnerIconSource
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs("button", {
@@ -7231,7 +7244,7 @@ const AlphaButton = ({
   });
 };
 
-const COMPONENT_NAME$z = "AlphaChip";
+const COMPONENT_NAME$A = "AlphaChip";
 const AlphaChip = ({
   children,
   hasError,
@@ -7244,13 +7257,13 @@ const AlphaChip = ({
     theme: currentTheme
   } = useTheme();
   const THEME_CLASS = `${currentTheme}`;
-  const className = cssClassName(COMPONENT_NAME$z, hasError && "hasError", isDisabled && "isDisabled", theme && `${theme.toUpperCase()}`, THEME_CLASS);
+  const className = cssClassName(COMPONENT_NAME$A, hasError && "hasError", isDisabled && "isDisabled", theme && `${theme.toUpperCase()}`, THEME_CLASS);
   const childrenMarkup = children ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$z}__TextWrapper`,
+    className: `${COMPONENT_NAME$A}__TextWrapper`,
     children: children
   }) : null;
   const closeButtonMarkup = removeButtonIcon && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$z}__CloseButtonWrapper`,
+    className: `${COMPONENT_NAME$A}__CloseButtonWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaButton, {
       onClick: onRemove,
       icon: removeButtonIcon
@@ -7298,7 +7311,7 @@ const getPosition = (activator, tooltip, alignment) => {
   };
 };
 
-const COMPONENT_NAME$y = 'Alpha__TooltipOverlay';
+const COMPONENT_NAME$z = 'Alpha__TooltipOverlay';
 const Overlay = ({
   children,
   activator,
@@ -7312,7 +7325,7 @@ const Overlay = ({
   onClick
 }) => {
   const tooltipRef = React2.useRef(null);
-  const overlayClassName = cssClassName(COMPONENT_NAME$y, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
+  const overlayClassName = cssClassName(COMPONENT_NAME$z, position && `is-${position}`, appearance && `is-${appearance}`, theme && appearance === 'default' && `is-${theme}`);
   const [positionStyles, setPositionStyles] = React2.useState({
     '--tooltip-overlay-top': 0,
     '--tooltip-overlay-left': 0,
@@ -7363,7 +7376,7 @@ const Overlay = ({
   return markup;
 };
 
-const COMPONENT_NAME$x = 'AlphaTooltip';
+const COMPONENT_NAME$y = 'AlphaTooltip';
 const AlphaTooltip = ({
   content,
   children,
@@ -7385,7 +7398,7 @@ const AlphaTooltip = ({
   const isMouseOver = React2.useRef(false);
   const activatorContainer = React2.useRef(null);
   const WrapperComponent = activatorWrapper;
-  const className = cssClassName(COMPONENT_NAME$x);
+  const className = cssClassName(COMPONENT_NAME$y);
   const handleOpen = React2.useCallback(() => {
     if (!isActivePersistence) {
       setIsActive(true);
@@ -7668,7 +7681,7 @@ function getRangeDate(range, date) {
   };
 }
 
-const COMPONENT_NAME$w = 'DatePicker__Day';
+const COMPONENT_NAME$x = 'DatePicker__Day';
 const Day = /*#__PURE__*/React2.memo(function Day({
   day,
   isDisabled,
@@ -7679,7 +7692,7 @@ const Day = /*#__PURE__*/React2.memo(function Day({
   onClick,
   theme: themeProp
 }) {
-  const emptyDayClassName = cssClassName(COMPONENT_NAME$w, !day && 'isEmpty');
+  const emptyDayClassName = cssClassName(COMPONENT_NAME$x, !day && 'isEmpty');
   if (!day) {
     return /*#__PURE__*/jsxRuntimeExports.jsx("td", {
       className: emptyDayClassName
@@ -7694,7 +7707,7 @@ const Day = /*#__PURE__*/React2.memo(function Day({
     }
   };
   const today = isToday(new Date(), day);
-  const className = cssClassName(COMPONENT_NAME$w, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
+  const className = cssClassName(COMPONENT_NAME$x, today && 'isToday', `theme-${themeProp || theme}`, isSelected && 'isSelected', isDisabled && 'isDisabled', isInRange && 'isInRange', isFirstSelectedDay && 'isFirstSelectedDay', isLastSelectedDay && 'isLastSelectedDay');
   const date = day.getDate();
   return /*#__PURE__*/jsxRuntimeExports.jsx("td", {
     className: className,
@@ -7705,7 +7718,7 @@ const Day = /*#__PURE__*/React2.memo(function Day({
   });
 });
 
-const COMPONENT_NAME$v = 'DatePicker__Month';
+const COMPONENT_NAME$w = 'DatePicker__Month';
 const Month = ({
   month = new Date().getMonth(),
   year = new Date().getFullYear(),
@@ -7718,7 +7731,7 @@ const Month = ({
   disableDates,
   weekDays
 }) => {
-  const className = cssClassName(COMPONENT_NAME$v);
+  const className = cssClassName(COMPONENT_NAME$w);
   const weeks = React2.useMemo(() => getWeeksByMonth(month, year, weekStartsOn), [month, year, weekStartsOn]);
   const handleDateClick = React2.useCallback(selectedDate => {
     if (onChange) {
@@ -7762,7 +7775,7 @@ const Month = ({
   });
 };
 
-const COMPONENT_NAME$u = 'DatePIcker__YearField';
+const COMPONENT_NAME$v = 'DatePIcker__YearField';
 const YearField = ({
   onChange,
   value,
@@ -7773,7 +7786,7 @@ const YearField = ({
   onKeyDown,
   onKeyUp
 }) => {
-  const className = cssClassName(COMPONENT_NAME$u);
+  const className = cssClassName(COMPONENT_NAME$v);
   const handleChange = event => {
     if (onChange) {
       const value = event.target.value.trim();
@@ -7798,7 +7811,7 @@ const YearField = ({
   });
 };
 
-const COMPONENT_NAME$t = 'DatePicker__Header';
+const COMPONENT_NAME$u = 'DatePicker__Header';
 const Header$2 = ({
   month,
   year,
@@ -7806,7 +7819,7 @@ const Header$2 = ({
   months
 }) => {
   const [yearValue, setYearValue] = React2.useState(year);
-  const headerClassName = cssClassName(COMPONENT_NAME$t);
+  const headerClassName = cssClassName(COMPONENT_NAME$u);
   const handleMonthChange = React2.useCallback((month, year) => {
     if (onChange) {
       onChange(month, year);
@@ -7843,7 +7856,7 @@ const Header$2 = ({
       appearance: "secondary",
       onClick: () => handleMonthChange(previousMonth, previousYear)
     }), /*#__PURE__*/jsxRuntimeExports.jsxs("span", {
-      className: `${COMPONENT_NAME$t}__DateLabel`,
+      className: `${COMPONENT_NAME$u}__DateLabel`,
       children: [montName, /*#__PURE__*/jsxRuntimeExports.jsx(YearField, {
         value: yearValue,
         onChange: setYearValue,
@@ -7859,7 +7872,7 @@ const Header$2 = ({
   });
 };
 
-const COMPONENT_NAME$s = 'DatePicker';
+const COMPONENT_NAME$t = 'DatePicker';
 function getMonthSelectedDate(selected) {
   return selected instanceof Date ? {
     start: selected,
@@ -7881,7 +7894,7 @@ const DatePicker = ({
   months,
   weekDays
 }) => {
-  const className = cssClassName(COMPONENT_NAME$s);
+  const className = cssClassName(COMPONENT_NAME$t);
   const handleDateChange = React2.useCallback(dateRange => {
     if (onChange) {
       onChange(dateRange);
@@ -16544,7 +16557,7 @@ function formatDate(date, toISO) {
   return DateTime.fromJSDate(date).toFormat('dd/MM/yyyy');
 }
 
-const COMPONENT_NAME$r = 'DateInput';
+const COMPONENT_NAME$s = 'DateInput';
 const AlphaInputDate = ({
   ariaLabel,
   disabled,
@@ -16570,7 +16583,7 @@ const AlphaInputDate = ({
   const [isErrorTooltipActive, setIsErrorTooltipActive] = React2.useState(false);
   const [selectedDate, setSelectedDate] = React2.useState();
   const inputRef = React2.useRef(null);
-  const className = cssClassName(COMPONENT_NAME$r);
+  const className = cssClassName(COMPONENT_NAME$s);
   const handleMonthChange = (monthValue, yearValue) => {
     setDate({
       month: monthValue,
@@ -16695,7 +16708,7 @@ const AlphaInputDate = ({
     weekDays: weekdays
   });
   const inputMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$r}__InputWrapper`,
+    className: `${COMPONENT_NAME$s}__InputWrapper`,
     onClick: () => setIsPopoverActive(true),
     ref: inputRef,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaTooltip, {
@@ -16900,16 +16913,16 @@ const Tag = ({
   });
 };
 
-const COMPONENT_NAME$q = "Divider";
+const COMPONENT_NAME$r = "Divider";
 const Divider = ({
   alignment = "left",
   label
 }) => {
-  const className = cssClassName(COMPONENT_NAME$q, alignment, !label && "no-label");
+  const className = cssClassName(COMPONENT_NAME$r, alignment, !label && "no-label");
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$q}__LabelWrapper`,
+    className: `${COMPONENT_NAME$r}__LabelWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-      className: `${COMPONENT_NAME$q}__Label`,
+      className: `${COMPONENT_NAME$r}__Label`,
       children: label
     })
   }) : null;
@@ -17554,7 +17567,7 @@ const Panel$1 = ({
   });
 };
 
-const COMPONENT_NAME$p = 'Tabs';
+const COMPONENT_NAME$q = 'Tabs';
 const Tabs = ({
   onSelect,
   selected,
@@ -17566,7 +17579,7 @@ const Tabs = ({
   const {
     theme
   } = useTheme();
-  const classNames = cssClassName(COMPONENT_NAME$p, `is${themeClassConverter(theme)}`);
+  const classNames = cssClassName(COMPONENT_NAME$q, `is${themeClassConverter(theme)}`);
   const panelMarkup = children ? tabs.map((tab, index) => selected === index ? /*#__PURE__*/jsxRuntimeExports.jsx(Panel$1, {
     id: tab.panelID || `${tab.id}-panel`,
     children: children
@@ -17829,12 +17842,12 @@ const AlphaGraphicCard = ({
   });
 };
 
-const COMPONENT_NAME$o = "AlphaInlineError";
+const COMPONENT_NAME$p = "AlphaInlineError";
 const AlphaInlineError = ({
   icon,
   children
 }) => {
-  const className = cssClassName(COMPONENT_NAME$o);
+  const className = cssClassName(COMPONENT_NAME$p);
   let iconSource;
   if (icon) {
     if (isValidIcon(icon.icon)) {
@@ -17848,11 +17861,11 @@ const AlphaInlineError = ({
     }
   }
   const iconMarkup = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$o}__IconWrapper`,
+    className: `${COMPONENT_NAME$p}__IconWrapper`,
     children: iconSource
   }) : null;
   const messageMarkup = children ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$o}__MessageWrapper`,
+    className: `${COMPONENT_NAME$p}__MessageWrapper`,
     children: children
   }) : null;
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -17861,8 +17874,8 @@ const AlphaInlineError = ({
   });
 };
 
-const COMPONENT_NAME$n = "AlphaLabel";
-const className$1 = cssClassName(COMPONENT_NAME$n);
+const COMPONENT_NAME$o = "AlphaLabel";
+const className$1 = cssClassName(COMPONENT_NAME$o);
 const AlphaLabel = ({
   children,
   isRequired,
@@ -17870,7 +17883,7 @@ const AlphaLabel = ({
   id
 }) => {
   const requiredSignMarkup = isRequired ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$n}__RequiredSign`,
+    className: `${COMPONENT_NAME$o}__RequiredSign`,
     children: "*"
   }) : null;
   const labelMarkup = /*#__PURE__*/jsxRuntimeExports.jsxs("label", {
@@ -17878,7 +17891,7 @@ const AlphaLabel = ({
     children: [children, requiredSignMarkup]
   });
   const actionMarkup = action ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$n}__ActionWrapper`,
+    className: `${COMPONENT_NAME$o}__ActionWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaButton, {
       id: action.id,
       isDanger: action.isDanger,
@@ -17896,12 +17909,12 @@ const AlphaLabel = ({
   });
 };
 
-const COMPONENT_NAME$m = "AlphaLabelledField__HelpText";
+const COMPONENT_NAME$n = "AlphaLabelledField__HelpText";
 const HelpText = ({
   message,
   icon
 }) => {
-  const className = cssClassName(COMPONENT_NAME$m);
+  const className = cssClassName(COMPONENT_NAME$n);
   let iconSource;
   if (icon) {
     if (isValidIcon(icon.icon)) {
@@ -17915,11 +17928,11 @@ const HelpText = ({
     }
   }
   const iconMarkup = iconSource ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$m}__IconWrapper`,
+    className: `${COMPONENT_NAME$n}__IconWrapper`,
     children: iconSource
   }) : null;
   const messageMarkup = message ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$m}__MessageWrapper`,
+    className: `${COMPONENT_NAME$n}__MessageWrapper`,
     children: message
   }) : null;
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -17928,7 +17941,7 @@ const HelpText = ({
   });
 };
 
-const COMPONENT_NAME$l = "AlphaLabelledField";
+const COMPONENT_NAME$m = "AlphaLabelledField";
 const AlphaLabelledField = ({
   label,
   children,
@@ -17938,9 +17951,9 @@ const AlphaLabelledField = ({
   id,
   isRequired
 }) => {
-  const className = cssClassName(COMPONENT_NAME$l);
+  const className = cssClassName(COMPONENT_NAME$m);
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$l}__LabelWrapper`,
+    className: `${COMPONENT_NAME$m}__LabelWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaLabel, {
       action: action,
       id: id,
@@ -17949,7 +17962,7 @@ const AlphaLabelledField = ({
     })
   }) : null;
   const errorMarkup = error ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$l}__ErrorWrapper`,
+    className: `${COMPONENT_NAME$m}__ErrorWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaInlineError, {
       icon: error.icon,
       children: error.message
@@ -17965,7 +17978,7 @@ const AlphaLabelledField = ({
     isActive: Boolean(errorMarkup),
     appearance: "error",
     children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: `${COMPONENT_NAME$l}__ContentWrapper`,
+      className: `${COMPONENT_NAME$m}__ContentWrapper`,
       children: children
     })
   }) : children;
@@ -17975,7 +17988,7 @@ const AlphaLabelledField = ({
   });
 };
 
-const COMPONENT_NAME$k = "AlphaInputTag";
+const COMPONENT_NAME$l = "AlphaInputTag";
 const InputTag$1 = ({
   ariaLabel,
   id,
@@ -18034,7 +18047,7 @@ const InputTag$1 = ({
   };
   const renderTag = (tag, index) => {
     return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: `${COMPONENT_NAME$k}__TagWrapper`,
+      className: `${COMPONENT_NAME$l}__TagWrapper`,
       children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaChip, {
         removeButtonIcon: tagRemoveIcon,
         onRemove: () => handleRemoveTag(index),
@@ -18042,8 +18055,8 @@ const InputTag$1 = ({
       })
     }, index);
   };
-  const className = cssClassName(COMPONENT_NAME$k);
-  const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$k}__InputWrapper`, isFocused && "isFocused", isDisabled && "isDisabled", hasError && "hasError");
+  const className = cssClassName(COMPONENT_NAME$l);
+  const inputWrapperClassName = cssClassName(`${COMPONENT_NAME$l}__InputWrapper`, isFocused && "isFocused", isDisabled && "isDisabled", hasError && "hasError");
   const handleInputChange = event => {
     if (onInputTextChange) {
       onInputTextChange(event.target.value);
@@ -18081,12 +18094,12 @@ const InputTag$1 = ({
   });
 };
 
-const COMPONENT_NAME$j = "AlphaInputText";
+const COMPONENT_NAME$k = "AlphaInputText";
 const AlphaInputText = ({
   isDisabled,
   label
 }) => {
-  const className = cssClassName(COMPONENT_NAME$j, isDisabled && "isDisabled");
+  const className = cssClassName(COMPONENT_NAME$k, isDisabled && "isDisabled");
   return /*#__PURE__*/jsxRuntimeExports.jsx(AlphaLabelledField, {
     label: label,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
@@ -18095,7 +18108,7 @@ const AlphaInputText = ({
   });
 };
 
-const COMPONENT_NAME$i = "AlphaMultiSelectionPicker__Picker__List";
+const COMPONENT_NAME$j = "AlphaMultiSelectionPicker__Picker__List";
 const List = ({
   items,
   selected,
@@ -18105,7 +18118,7 @@ const List = ({
   const scrollToSelected = () => {
     const listWrapper = listWrapperRef.current;
     if (listWrapper) {
-      const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$i}__ListItem--selected`);
+      const selectedElement = listWrapper.querySelector(`.${COMPONENT_NAME$j}__ListItem--selected`);
       if (selectedElement) {
         const {
           top
@@ -18134,16 +18147,16 @@ const List = ({
       value
     } = item;
     const isSelected = Boolean(selected !== null && selected !== undefined && selected === value);
-    const className = cssClassName(`${COMPONENT_NAME$i}__ListItem`, isSelected && "selected");
+    const className = cssClassName(`${COMPONENT_NAME$j}__ListItem`, isSelected && "selected");
     const handleClick = () => handleChange(value);
     return /*#__PURE__*/jsxRuntimeExports.jsx("li", {
       className: className,
       onClick: handleClick,
       children: label
-    }, `${COMPONENT_NAME$i}__ListItem-${index}`);
+    }, `${COMPONENT_NAME$j}__ListItem-${index}`);
   };
   const itemsMarkup = items ? items.map(renderItem) : null;
-  const className = cssClassName(COMPONENT_NAME$i);
+  const className = cssClassName(COMPONENT_NAME$j);
   return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     className: className,
     ref: listWrapperRef,
@@ -18153,7 +18166,7 @@ const List = ({
   });
 };
 
-const COMPONENT_NAME$h = 'AlphaMultiSelectionPicker__Picker';
+const COMPONENT_NAME$i = 'AlphaMultiSelectionPicker__Picker';
 const Picker = ({
   headers,
   items,
@@ -18176,11 +18189,11 @@ const Picker = ({
     }
   };
   const renderHeader = (header, index) => /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$h}__HeaderItem`,
+    className: `${COMPONENT_NAME$i}__HeaderItem`,
     children: capitalize(header)
-  }, `${COMPONENT_NAME$h}__HeaderItem-${index}`);
+  }, `${COMPONENT_NAME$i}__HeaderItem-${index}`);
   const headersMarkup = headers ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$h}__HeadersMarkup`,
+    className: `${COMPONENT_NAME$i}__HeadersMarkup`,
     children: headers.map(renderHeader)
   }) : null;
   const renderList = (listItems, index) => {
@@ -18189,13 +18202,13 @@ const Picker = ({
       items: listItems,
       onChange: value => handleChange(value, index),
       selected: selectedValue
-    }, `${COMPONENT_NAME$h}__List-${index}`);
+    }, `${COMPONENT_NAME$i}__List-${index}`);
   };
   const itemsListsMarkup = items ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$h}__ItemsListWrapper`,
+    className: `${COMPONENT_NAME$i}__ItemsListWrapper`,
     children: items.map(renderList)
   }) : null;
-  const className = cssClassName(COMPONENT_NAME$h, theme);
+  const className = cssClassName(COMPONENT_NAME$i, theme);
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: className,
     children: [headersMarkup, itemsListsMarkup]
@@ -18275,7 +18288,7 @@ const AlphaSegmentedControl = ({
 
 const SideMenuContext = /*#__PURE__*/React2.createContext({});
 
-const COMPONENT_NAME$g = "AlphaSideMenu__Item";
+const COMPONENT_NAME$h = "AlphaSideMenu__Item";
 const Item$2 = ({
   label,
   isDisabled,
@@ -18301,11 +18314,11 @@ const Item$2 = ({
   const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
   const AnchorComponent = !isExternal ? anchorComponent || "a" : "a";
   const isActive = React2.useMemo(() => {
-    if (location && url) {
+    if (location?.pathname && url) {
       return isExact ? location.pathname === url : location.pathname.includes(url);
     }
     return isActiveProp;
-  }, [location, isExact, isActiveProp, url]);
+  }, [location?.pathname, isExact, isActiveProp, url]);
   React2.useEffect(() => {
     if (isActive && subNavigationItems) {
       setCurrentTierItems?.(subNavigationItems || [], {
@@ -18323,7 +18336,7 @@ const Item$2 = ({
     }
   }, [isActive]);
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$g}__Label`,
+    className: `${COMPONENT_NAME$h}__Label`,
     children: label
   }) : null;
   const iconSource = icon && isValidIcon(icon?.icon) ? /*#__PURE__*/jsxRuntimeExports.jsx(AlphaIcon, {
@@ -18333,7 +18346,7 @@ const Item$2 = ({
     children: icon
   });
   const iconMarkup = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$g}__IconWrapper`,
+    className: `${COMPONENT_NAME$h}__IconWrapper`,
     children: iconSource
   }) : null;
   const handleClick = () => {
@@ -18366,7 +18379,7 @@ const Item$2 = ({
     position: "right",
     children: anchorMarkup
   }) : null;
-  const classNames = cssClassName(COMPONENT_NAME$g, isDisabled && "isDisabled", isActive && "isActive", truncateText && "isTruncated", (isCollapsed !== undefined ? isCollapsed : collapsed) && "isCollapsed");
+  const classNames = cssClassName(COMPONENT_NAME$h, isDisabled && "isDisabled", isActive && "isActive", truncateText && "isTruncated", (isCollapsed !== undefined ? isCollapsed : collapsed) && "isCollapsed");
   if (isVisible !== undefined && !isVisible(location, {
     label,
     url,
@@ -18384,7 +18397,7 @@ const Item$2 = ({
   });
 };
 
-const COMPONENT_NAME$f = "AlphaSideMenu__Section";
+const COMPONENT_NAME$g = "AlphaSideMenu__Section";
 const Section$1 = ({
   items,
   fill,
@@ -18396,7 +18409,7 @@ const Section$1 = ({
     collapsed
   } = React2.useContext(SideMenuContext);
   const isCollapsed = isCollapsedProp !== undefined ? isCollapsedProp : collapsed;
-  const titleClassNames = cssClassName(`${COMPONENT_NAME$f}__TitleWrapper`, (isCollapsed !== undefined ? isCollapsed : collapsed) && "isCollapsed");
+  const titleClassNames = cssClassName(`${COMPONENT_NAME$g}__TitleWrapper`, (isCollapsed !== undefined ? isCollapsed : collapsed) && "isCollapsed");
   const titleMarkup = title ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     // layout
     className: titleClassNames
@@ -18442,10 +18455,10 @@ const Section$1 = ({
     }, `alpha-side-menu-item-${index}`);
   };
   const itemsMarkup = items && items.length > 0 ? /*#__PURE__*/jsxRuntimeExports.jsx("ul", {
-    className: `${COMPONENT_NAME$f}__Items`,
+    className: `${COMPONENT_NAME$g}__Items`,
     children: items.map(renderItem)
   }) : null;
-  const classNames = cssClassName(COMPONENT_NAME$f, fill && "isFill");
+  const classNames = cssClassName(COMPONENT_NAME$g, fill && "isFill");
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: classNames
     // layout
@@ -18458,7 +18471,7 @@ const Section$1 = ({
   });
 };
 
-const COMPONENT_NAME$e = "AlphaSideMenu__Tier";
+const COMPONENT_NAME$f = "AlphaSideMenu__Tier";
 const Tier = ({
   children,
   title,
@@ -18473,12 +18486,12 @@ const Tier = ({
   const isMenuCollapsed = isCollapsed !== undefined ? isCollapsed : collapsed;
   const titleMarkup = title ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     // layout
-    className: `${COMPONENT_NAME$e}__TitleWrapper`,
+    className: `${COMPONENT_NAME$f}__TitleWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
       children: title
     })
   }) : null;
-  const cssExpandButtonWrapperClassName = cssClassName(`${COMPONENT_NAME$e}__ExpandButtonWrapper`, hasSubNavigation && "isCollapsed");
+  const cssExpandButtonWrapperClassName = cssClassName(`${COMPONENT_NAME$f}__ExpandButtonWrapper`, hasSubNavigation && "isCollapsed");
   const expandButtonMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     //  layout
     className: cssExpandButtonWrapperClassName,
@@ -18488,7 +18501,7 @@ const Tier = ({
       onClick: onExpand
     })
   });
-  const classNames = cssClassName(COMPONENT_NAME$e, isMenuCollapsed && "isCollapsed");
+  const classNames = cssClassName(COMPONENT_NAME$f, isMenuCollapsed && "isCollapsed");
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: classNames
     // initial={false}
@@ -18502,7 +18515,7 @@ const Tier = ({
   });
 };
 
-const COMPONENT_NAME$d = "AlphaSideMenu";
+const COMPONENT_NAME$e = "AlphaSideMenu";
 const AlphaSideMenu = ({
   children,
   collapsed,
@@ -18523,7 +18536,7 @@ const AlphaSideMenu = ({
       console.error("AlphaSideMenu only accepts Section components as children");
     }
   });
-  const cssClassNames = cssClassName(COMPONENT_NAME$d, isCollapsed && "isCollapsed");
+  const cssClassNames = cssClassName(COMPONENT_NAME$e, isCollapsed && "isCollapsed");
   const handleSetCurrentTierItems = (items, item) => {
     if (!item?.isExternal) {
       if (!items.length) {
@@ -18576,7 +18589,7 @@ const StepDefault = {
   status: 'incomplete'
 };
 
-const COMPONENT_NAME$c = 'AlphaStepper__Step';
+const COMPONENT_NAME$d = 'AlphaStepper__Step';
 const Step = ({
   iconMarkup,
   label,
@@ -18589,20 +18602,20 @@ const Step = ({
   const {
     theme
   } = useTheme();
-  const itemClassName = cssClassName(`${COMPONENT_NAME$c}__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');
+  const itemClassName = cssClassName(`${COMPONENT_NAME$d}__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 /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: COMPONENT_NAME$c,
+    className: COMPONENT_NAME$d,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
       className: itemClassName,
       children: iconMarkup
     }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: `${COMPONENT_NAME$c}__Label`,
+      className: `${COMPONENT_NAME$d}__Label`,
       children: label
     })]
   });
 };
 
-const COMPONENT_NAME$b = "AlphaStepper";
+const COMPONENT_NAME$c = "AlphaStepper";
 const getSourceIcon = icon => {
   if (icon) {
     if (isValidIcon(icon.icon)) {
@@ -18629,7 +18642,7 @@ const AlphaStepper = ({
     ...StepDefault
   }, index) => {
     const lastStepStatus = steps[index - 1] ? steps[index - 1].status : "";
-    const iconClassName = cssClassName(`${COMPONENT_NAME$b}__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$c}__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);
     if (step.status === "complete") iconSource = getSourceIcon(completeIcon);
@@ -18649,23 +18662,23 @@ const AlphaStepper = ({
       isSuccess: isSuccess,
       isLastStepComplete: isLastStepComplete,
       isLastStepInactive: isLastStepInactive
-    }, `${COMPONENT_NAME$b}-${index}`);
+    }, `${COMPONENT_NAME$c}-${index}`);
   };
   const stepsMarkup = steps ? steps.map(renderStep) : null;
   return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$b}__Container`,
+    className: `${COMPONENT_NAME$c}__Container`,
     children: stepsMarkup
   });
 };
 
-const COMPONENT_NAME$a = "AlphaTag";
+const COMPONENT_NAME$b = "AlphaTag";
 const AlphaTag = ({
   color,
   children
 }) => {
-  const className = cssClassName(COMPONENT_NAME$a, color && `is-${color.color}-${color.intensity}`);
+  const className = cssClassName(COMPONENT_NAME$b, color && `is-${color.color}-${color.intensity}`);
   const childrenMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$a}__TextWrapper`,
+    className: `${COMPONENT_NAME$b}__TextWrapper`,
     children: children
   });
   return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
@@ -18681,7 +18694,7 @@ const StatusIcon = {
   Warning: WarningIcon
 };
 
-const COMPONENT_NAME$9 = "AlphaTile";
+const COMPONENT_NAME$a = "AlphaTile";
 const AlphaTile = ({
   isSelected,
   icon,
@@ -18693,8 +18706,8 @@ const AlphaTile = ({
   const {
     theme
   } = useTheme();
-  const className = cssClassName(COMPONENT_NAME$9, `is${themeClassConverter(themeProp || theme)}`, isSelected && "isSelected");
-  const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$9}--StatusWrapper`, status && `is${status}`);
+  const className = cssClassName(COMPONENT_NAME$a, `is${themeClassConverter(themeProp || theme)}`, isSelected && "isSelected");
+  const statusWrapperClassName = cssClassName(`${COMPONENT_NAME$a}--StatusWrapper`, status && `is${status}`);
   let iconSource;
   if (icon) {
     if (isValidIcon(icon.icon)) {
@@ -18709,21 +18722,21 @@ const AlphaTile = ({
     }
   }
   const iconWrapper = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$9}__IconWrapper`,
+    className: `${COMPONENT_NAME$a}__IconWrapper`,
     children: iconSource
   }) : null;
   const mediaMarkup = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$9}__MediaWrapper`,
+    className: `${COMPONENT_NAME$a}__MediaWrapper`,
     children: iconWrapper
   }) : null;
   const titleWrapper = title ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     children: /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: `${COMPONENT_NAME$9}__TitleWrapper`,
+      className: `${COMPONENT_NAME$a}__TitleWrapper`,
       children: title
     })
   }) : null;
   const HeaderWrapper = /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME$9}__HeaderWrapper`,
+    className: `${COMPONENT_NAME$a}__HeaderWrapper`,
     children: [mediaMarkup, titleWrapper]
   });
   const statusIcon = status ? StatusIcon[status] : "";
@@ -18742,7 +18755,7 @@ const AlphaTile = ({
   });
 };
 
-const COMPONENT_NAME$8 = "TimeSelector";
+const COMPONENT_NAME$9 = "TimeSelector";
 const TimeSelector = ({
   plurals,
   singulars,
@@ -18874,7 +18887,7 @@ const TimeSelector = ({
     let min;
     if (valuesMaxMin) [min, max] = valuesMaxMin;
     return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      className: `${COMPONENT_NAME$8}__InnerField`,
+      className: `${COMPONENT_NAME$9}__InnerField`,
       children: [/*#__PURE__*/jsxRuntimeExports.jsx("input", {
         type: "number",
         value: elValue,
@@ -18892,20 +18905,20 @@ const TimeSelector = ({
     }, index);
   };
   const fieldsMarkup = Object.keys(singulars).map(renderField);
-  const fieldClass = cssClassName(`${COMPONENT_NAME$8}__Field`, (isFocused || isActive) && "isFocused");
+  const fieldClass = cssClassName(`${COMPONENT_NAME$9}__Field`, (isFocused || isActive) && "isFocused");
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$8}__LabelWrapper`,
+    className: `${COMPONENT_NAME$9}__LabelWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaLabel, {
       isRequired: isRequired,
       children: label
     })
   }) : null;
   const helpTextMarkup = helpText ? helpText && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$8}__HelpTextWrapper`,
+    className: `${COMPONENT_NAME$9}__HelpTextWrapper`,
     children: helpText
   }) : null;
   const fieldMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$8}__FieldWrapper`,
+    className: `${COMPONENT_NAME$9}__FieldWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs(AlphaTooltip, {
       content: error,
       appearance: "error",
@@ -18937,7 +18950,7 @@ const TimeSelector = ({
   React2.useEffect(() => {
     setItems(getItemsMultiSelectionPicker());
   }, [value]);
-  const className = cssClassName(COMPONENT_NAME$8, theme, !value && "isEmpty");
+  const className = cssClassName(COMPONENT_NAME$9, theme, !value && "isEmpty");
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: className,
     children: [popoverMarkup, helpTextMarkup]
@@ -18948,7 +18961,7 @@ function getTimeValue(value) {
   return value < 10 ? `0${value}` : `${value}`;
 }
 
-const COMPONENT_NAME$7 = "Totalizer";
+const COMPONENT_NAME$8 = "Totalizer";
 const Totalizer = ({
   action,
   direction,
@@ -18964,9 +18977,9 @@ const Totalizer = ({
     theme
   } = useTheme();
   const themeClass = `has-Theme${themeProp ? themeProp.toUpperCase() : theme.toUpperCase()}`;
-  const className = cssClassName(COMPONENT_NAME$7, themeClass, isDisabled && "isDisabled", isFocused && "isFocused", direction && `has-${direction}Direction`);
+  const className = cssClassName(COMPONENT_NAME$8, themeClass, isDisabled && "isDisabled", isFocused && "isFocused", direction && `has-${direction}Direction`);
   const titleMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$7}__TitleWrapper`,
+    className: `${COMPONENT_NAME$8}__TitleWrapper`,
     children: label
   }) : null;
   let iconSource;
@@ -18982,28 +18995,28 @@ const Totalizer = ({
     }
   }
   const iconMarkup = icon ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$7}__IconWrapper`,
+    className: `${COMPONENT_NAME$8}__IconWrapper`,
     children: iconSource
   }) : null;
   const headerMarkup = titleMarkup || iconMarkup ? /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME$7}__HeaderWrapper`,
+    className: `${COMPONENT_NAME$8}__HeaderWrapper`,
     children: [titleMarkup, iconMarkup]
   }) : null;
   const valueMarkup = value ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$7}__ValueWrapper`,
+    className: `${COMPONENT_NAME$8}__ValueWrapper`,
     children: value
   }) : null;
   const placeholderValueMarkup = placeholderValue ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$7}__PlaceholderValueWrapper`,
+    className: `${COMPONENT_NAME$8}__PlaceholderValueWrapper`,
     children: placeholderValue
   }) : null;
   const valueContentToRender = !valueMarkup && placeholderValueMarkup || valueMarkup;
   const valueContainerMarkup = valueMarkup || placeholderValueMarkup ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$7}__ValueContainerWrapper`,
+    className: `${COMPONENT_NAME$8}__ValueContainerWrapper`,
     children: valueContentToRender
   }) : null;
   const actionMarkup = action ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$7}__ActionWrapper`,
+    className: `${COMPONENT_NAME$8}__ActionWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaButton, {
       id: action.id,
       onClick: action.onClick,
@@ -19019,7 +19032,7 @@ const Totalizer = ({
       children: action.content
     })
   }) : null;
-  const contentClassName = cssClassName(`${COMPONENT_NAME$7}__ContentWrapper`, action && "has-Action");
+  const contentClassName = cssClassName(`${COMPONENT_NAME$8}__ContentWrapper`, action && "has-Action");
   const contentMarkup = valueContainerMarkup || actionMarkup ? /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: contentClassName,
     children: [valueContainerMarkup, actionMarkup]
@@ -19030,7 +19043,7 @@ const Totalizer = ({
   });
 };
 
-const COMPONENT_NAME$6 = 'AlphaZipCodeInput';
+const COMPONENT_NAME$7 = 'AlphaZipCodeInput';
 const AlphaZipCodeInput = ({
   label,
   isRequired,
@@ -19062,20 +19075,20 @@ const AlphaZipCodeInput = ({
     }
   };
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$6}__LabelWrapper`,
+    className: `${COMPONENT_NAME$7}__LabelWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsxs("label", {
-      className: `${COMPONENT_NAME$6}__Label`,
+      className: `${COMPONENT_NAME$7}__Label`,
       children: [label, isRequired ? /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-        className: `${COMPONENT_NAME$6}__Label--isRequired`,
+        className: `${COMPONENT_NAME$7}__Label--isRequired`,
         children: "*"
       }) : null]
     })
   }) : null;
-  const classesInput = cssClassName(`${COMPONENT_NAME$6}__InputWrapper`, isFocusActive && 'isFocus', loading && 'loading');
+  const classesInput = cssClassName(`${COMPONENT_NAME$7}__InputWrapper`, isFocusActive && 'isFocus', loading && 'loading');
   const inputMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     className: classesInput,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("input", {
-      className: `${COMPONENT_NAME$6}__InputWrapper--input`,
+      className: `${COMPONENT_NAME$7}__InputWrapper--input`,
       onBlur: handleOnBlur,
       onFocus: handleOnFocus,
       onChange: handleOnChange,
@@ -19089,12 +19102,12 @@ const AlphaZipCodeInput = ({
     setShowPopover(false);
   };
   const renderLabelItem = item => /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME$6}__ItemWrapper`,
+    className: `${COMPONENT_NAME$7}__ItemWrapper`,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: `${COMPONENT_NAME$6}__Item__Value`,
+      className: `${COMPONENT_NAME$7}__Item__Value`,
       children: item.cp
     }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-      className: `${COMPONENT_NAME$6}__Item__Description`,
+      className: `${COMPONENT_NAME$7}__Item__Description`,
       children: [item.municipality, ", ", item.city, ", ", item.state]
     })]
   });
@@ -19108,7 +19121,7 @@ const AlphaZipCodeInput = ({
     onChange: handleOnSelectItem
   }) : null;
   const emptyItemsMarkup = items && items.length === 0 ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$6}__EmptyItems`,
+    className: `${COMPONENT_NAME$7}__EmptyItems`,
     children: labelEmpty
   }) : null;
   const popoverMarkup = React2.useMemo(() => /*#__PURE__*/jsxRuntimeExports.jsx(Popover$1, {
@@ -19127,7 +19140,7 @@ const AlphaZipCodeInput = ({
     } else setShowPopover(false);
   }, [items]);
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME$6}__Wrapper`,
+    className: `${COMPONENT_NAME$7}__Wrapper`,
     children: [labelMarkup, popoverMarkup]
   });
 };
@@ -33626,7 +33639,7 @@ const TrashIcon = () => /*#__PURE__*/jsxRuntimeExports.jsxs("svg", {
   })]
 });
 
-const COMPONENT_NAME$5 = 'DeletableSection';
+const COMPONENT_NAME$6 = 'DeletableSection';
 const DeletableSection = ({
   ariaLabel,
   children,
@@ -33638,14 +33651,14 @@ const DeletableSection = ({
     theme
   } = useTheme();
   const THEME_CLASS = `${theme}`;
-  const className = cssClassName(COMPONENT_NAME$5);
-  const classNameButton = cssClassName(`${COMPONENT_NAME$5}__DeleteButtonWrapper`, THEME_CLASS);
+  const className = cssClassName(COMPONENT_NAME$6);
+  const classNameButton = cssClassName(`${COMPONENT_NAME$6}__DeleteButtonWrapper`, THEME_CLASS);
   const icon = iconDeletable || TrashIcon;
   const deleteButtonMarkup = onDelete && isDeletable ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
     className: classNameButton,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("button", {
       "aria-label": ariaLabel ? `${ariaLabel}-removeForm` : ariaLabel,
-      className: `${COMPONENT_NAME$5}__DeleteButton`,
+      className: `${COMPONENT_NAME$6}__DeleteButton`,
       onClick: onDelete,
       children: /*#__PURE__*/jsxRuntimeExports.jsx(AlphaIcon, {
         source: icon,
@@ -33654,7 +33667,7 @@ const DeletableSection = ({
     })
   }) : null;
   const contentMarkup = children ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$5}__ContentWrapper`,
+    className: `${COMPONENT_NAME$6}__ContentWrapper`,
     children: children
   }) : null;
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
@@ -34056,7 +34069,7 @@ const SectionForm = ({
   });
 };
 
-const COMPONENT_NAME$4 = "DynamicForm";
+const COMPONENT_NAME$5 = "DynamicForm";
 const DynamicForm = ({
   ariaLabel,
   dataFormArray = [],
@@ -34110,7 +34123,7 @@ const DynamicForm = ({
     }, `DynamicForm-${form.id}-${index}}`);
   };
   const contactsMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$4}__SectionFormWrapper`,
+    className: `${COMPONENT_NAME$5}__SectionFormWrapper`,
     children: dataFormArray.map(renderForm)
   });
   const dividerMarkup = labelDivider && /*#__PURE__*/jsxRuntimeExports.jsx(Divider, {
@@ -34123,7 +34136,7 @@ const DynamicForm = ({
     children: onAddForm.label
   });
   const THEME_CLASS = `${theme}`;
-  const className = cssClassName(COMPONENT_NAME$4, THEME_CLASS);
+  const className = cssClassName(COMPONENT_NAME$5, THEME_CLASS);
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
     className: className,
     children: [dividerMarkup, contactsMarkup, addContactButtonMarkup]
@@ -36896,16 +36909,16 @@ Sortable.mount(Remove, Revert);
 
 const Context = /*#__PURE__*/React2.createContext({});
 
-const COMPONENT_NAME$3 = 'SortableList__Item';
+const COMPONENT_NAME$4 = 'SortableList__Item';
 const Item$1 = ({
   children
 }) => {
   const {
     hasHandle
   } = React2.useContext(Context);
-  const className = cssClassName(COMPONENT_NAME$3, !hasHandle && 'no-handle');
+  const className = cssClassName(COMPONENT_NAME$4, !hasHandle && 'no-handle');
   const handleMarkup = hasHandle ? /*#__PURE__*/jsxRuntimeExports.jsxs("span", {
-    className: `${COMPONENT_NAME$3}__Handle`,
+    className: `${COMPONENT_NAME$4}__Handle`,
     children: [/*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
       name: "MoreVertical"
     }), /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
@@ -36913,7 +36926,7 @@ const Item$1 = ({
     })]
   }) : null;
   const contentMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: `${COMPONENT_NAME$3}__Content`,
+    className: `${COMPONENT_NAME$4}__Content`,
     children: children
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs("li", {
@@ -36922,7 +36935,7 @@ const Item$1 = ({
   });
 };
 
-const COMPONENT_NAME$2 = "SortableList";
+const COMPONENT_NAME$3 = "SortableList";
 const SortableList = function ({
   renderItem,
   items,
@@ -36930,7 +36943,7 @@ const SortableList = function ({
   hasHandle
 }) {
   const listRef = React2.useRef(null);
-  const className = cssClassName(COMPONENT_NAME$2);
+  const className = cssClassName(COMPONENT_NAME$3);
   const hasItems = items && items.length > 0;
   const handleSortEnd = event => {
     const {
@@ -36962,7 +36975,7 @@ const SortableList = function ({
     }
     return itemComponent;
   };
-  const listClassName = cssClassName(`${COMPONENT_NAME$2}__List`);
+  const listClassName = cssClassName(`${COMPONENT_NAME$3}__List`);
   const listMarkup = hasItems ? /*#__PURE__*/jsxRuntimeExports.jsx("ul", {
     ref: listRef,
     className: listClassName,
@@ -37526,7 +37539,7 @@ const FilterControl = ({
   });
 };
 
-const COMPONENT_NAME$1 = 'FilterField';
+const COMPONENT_NAME$2 = 'FilterField';
 const FilterField = ({
   label,
   isRequired = false,
@@ -37535,19 +37548,19 @@ const FilterField = ({
   name
 }) => {
   const labelMarkup = label ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$1}__LabelWrapper`,
+    className: `${COMPONENT_NAME$2}__LabelWrapper`,
     children: label
   }) : null;
   const filterFieldMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$1}__FieldWrapper`,
+    className: `${COMPONENT_NAME$2}__FieldWrapper`,
     id: name,
     children: field
   });
   const removeButtonMarkup = onRemove && !isRequired ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME$1}__RemoveButtonWrapper`,
+    className: `${COMPONENT_NAME$2}__RemoveButtonWrapper`,
     children: /*#__PURE__*/jsxRuntimeExports.jsx("button", {
       type: "button",
-      className: `${COMPONENT_NAME$1}__RemoveButton`,
+      className: `${COMPONENT_NAME$2}__RemoveButton`,
       onClick: onRemove,
       children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {
         name: "X"
@@ -37555,12 +37568,12 @@ const FilterField = ({
     })
   }) : null;
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME$1}`,
+    className: `${COMPONENT_NAME$2}`,
     children: [labelMarkup, filterFieldMarkup, removeButtonMarkup]
   });
 };
 
-const COMPONENT_NAME = 'Filters';
+const COMPONENT_NAME$1 = 'Filters';
 const Filters = ({
   ariaLabel,
   filters = [],
@@ -37614,11 +37627,11 @@ const Filters = ({
     key: `extra-action-${index}`
   }, extraAction.label)) : null;
   const secondaryActionsMarkup = /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME}__SecondaryActionsWrapper`,
+    className: `${COMPONENT_NAME$1}__SecondaryActionsWrapper`,
     children: availableFiltersPopoverMarkup
   });
   const mainActionsMarkup = /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME}__MainActionsWrapper`,
+    className: `${COMPONENT_NAME$1}__MainActionsWrapper`,
     children: [extraActionsMarkup, /*#__PURE__*/jsxRuntimeExports.jsx(AlphaButton, {
       ariaLabel: `${ariaLabel}-cleanFilters`,
       onClick: onCleanFilters,
@@ -37642,7 +37655,7 @@ const Filters = ({
       handleRemoveFilter(filter);
     };
     return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-      className: `${COMPONENT_NAME}__SelectedFilter`,
+      className: `${COMPONENT_NAME$1}__SelectedFilter`,
       children: /*#__PURE__*/jsxRuntimeExports.jsx(FilterField, {
         label: foundFilter.label,
         field: foundFilter.filter,
@@ -37653,15 +37666,15 @@ const Filters = ({
     }, index);
   };
   const selectedFiltersMarkup = selectedFilters.length ? /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-    className: `${COMPONENT_NAME}__SelectedFiltersWrapper`,
+    className: `${COMPONENT_NAME$1}__SelectedFiltersWrapper`,
     children: selectedFilters.map(renderSelectedFilter)
   }) : null;
   const actionsContainerMarkup = /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: `${COMPONENT_NAME}__ActionsWrapper`,
+    className: `${COMPONENT_NAME$1}__ActionsWrapper`,
     children: [secondaryActionsMarkup, mainActionsMarkup]
   });
   return /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-    className: COMPONENT_NAME,
+    className: COMPONENT_NAME$1,
     ref: mainContainerRef,
     children: [selectedFiltersMarkup, actionsContainerMarkup]
   });
@@ -39704,7 +39717,7 @@ function BrowserRouter({
   );
 }
 var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
-var Link = React2__namespace.forwardRef(
+var Link$1 = React2__namespace.forwardRef(
   function LinkWithRef({
     onClick,
     discover = "render",
@@ -39780,7 +39793,7 @@ var Link = React2__namespace.forwardRef(
     return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, link, /* @__PURE__ */ React2__namespace.createElement(PrefetchPageLinks, { page: href2 })) : link;
   }
 );
-Link.displayName = "Link";
+Link$1.displayName = "Link";
 var NavLink = React2__namespace.forwardRef(
   function NavLinkWithRef({
     "aria-current": ariaCurrentProp = "page",
@@ -39833,7 +39846,7 @@ var NavLink = React2__namespace.forwardRef(
     }
     let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
     return /* @__PURE__ */ React2__namespace.createElement(
-      Link,
+      Link$1,
       {
         ...rest,
         "aria-current": ariaCurrent,
@@ -41325,6 +41338,24 @@ const Tile = ({
   });
 };
 
+const COMPONENT_NAME = 'Link';
+const Link = ({
+  children,
+  className: classNameProp,
+  component,
+  to,
+  target
+}) => {
+  const Component = component;
+  const className = cssClassName(COMPONENT_NAME, classNameProp);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Component, {
+    className: className,
+    to: to,
+    target: target,
+    children: children
+  });
+};
+
 exports.ActionList = ActionList;
 exports.Alert = Alert;
 exports.AlertProvider = AlertProvider;
@@ -41393,6 +41424,7 @@ exports.InputText = InputText;
 exports.Item = Item$2;
 exports.JsonViewer = JsonViewer;
 exports.Label = Label;
+exports.Link = Link;
 exports.ListInfo = ListInfo;
 exports.Loader = Loader;
 exports.Logo = Logo;