@hitachivantara/uikit-react-core 5.96.3 → 5.98.0

package/dist/esm/StatusIcon/StatusIcon.styles.js

@@ -0,0 +1,57 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+const notificationMap = {
+  success: "positive",
+  warning: "warning",
+  error: "negative",
+  default: "info",
+  info: "info",
+  accent: "accent"
+};
+const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
+  root: {
+    display: "inline-flex",
+    lineHeight: 0,
+    flexShrink: 0,
+    padding: theme.space.xxs,
+    "--icsize": "auto",
+    [`&[data-size=xs]`]: { borderRadius: theme.radii.base },
+    [`&[data-size=sm]`]: { borderRadius: theme.radii.base },
+    [`&[data-size=md]`]: { borderRadius: theme.radii.round },
+    [`&[data-size=lg]`]: { borderRadius: theme.radii.large },
+    [`&[data-size=xl]`]: { borderRadius: theme.radii.large },
+    [`:not([data-type="simple"])`]: {
+      outline: "1px solid currentcolor"
+    },
+    ...Object.fromEntries(
+      Object.entries(notificationMap).map(([variant, color]) => [
+        [`&[data-variant="${variant}"]`],
+        {
+          color: theme.colors[color],
+          outline: `1px solid ${theme.colors[`${color}Border`]}`,
+          backgroundColor: theme.colors[`${color}Dimmed`],
+          [`&[data-type="simple"]`]: {
+            outline: "none",
+            backgroundColor: "transparent"
+          }
+        }
+      ])
+    ),
+    [`&[data-variant="default"]`]: {
+      color: theme.colors.text,
+      backgroundColor: theme.colors.bgContainerSecondary,
+      outline: `1px solid ${theme.colors.borderSubtle}`,
+      [`&[data-type="simple"]`]: {
+        outline: "none",
+        backgroundColor: "transparent"
+      }
+    }
+  },
+  icon: {
+    fontSize: "inherit"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Table/hooks/useHvRowSelection.js

@@ -121,7 +121,7 @@ function reducer(state, action, previousState, instance) {
       applyToggleAllRowsSelectedToPrefilteredRows
     } = instance;
     const rowsToSelect = applyToggleAllRowsSelectedToPrefilteredRows ? initialRowsById : nonGroupedRowsById;
-    const selectAll = typeof setSelected !== "undefined" ? setSelected : !isAllRowsSelected;
+    const selectAll = setSelected ?? !isAllRowsSelected;
     const selectedRowIds = { ...state.selectedRowIds };
     if (selectAll) {
       Object.keys(rowsToSelect).forEach((rowId) => {
@@ -151,7 +151,7 @@ function reducer(state, action, previousState, instance) {
     }
     const { rowsById, selectSubRows = true, getSubRows } = instance;
     const isSelected = state.selectedRowIds[id];
-    const shouldExist = typeof setSelected !== "undefined" ? setSelected : !isSelected;
+    const shouldExist = setSelected ?? !isSelected;
     if (isSelected === shouldExist) {
       return state;
     }
@@ -186,7 +186,7 @@ function reducer(state, action, previousState, instance) {
       isAllPageRowsSelected,
       getSubRows
     } = instance;
-    const selectAll = typeof setSelected !== "undefined" ? setSelected : !isAllPageRowsSelected;
+    const selectAll = setSelected ?? !isAllPageRowsSelected;
     const newSelectedRowIds = { ...state.selectedRowIds };
     const handleRowById = (rowId) => {
       const row = rowsById[rowId];
@@ -220,7 +220,7 @@ function reducer(state, action, previousState, instance) {
     const { id, value: setLockedSelection } = action;
     const { rowsById, selectSubRows = true, getSubRows } = instance;
     const isLockedSelection = state.lockedSelectionRowIds[id];
-    const shouldExist = typeof setLockedSelection !== "undefined" ? setLockedSelection : !isLockedSelection;
+    const shouldExist = setLockedSelection ?? !isLockedSelection;
     if (isLockedSelection === shouldExist) {
       return state;
     }

package/dist/esm/TextArea/TextArea.js

@@ -108,7 +108,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   const limitValue = (currentValue) => {
     if (currentValue === void 0 || !blockMax) return currentValue;
     const isOverflow = maxCharQuantity == null ? false : currentValue.length > maxCharQuantity;
-    return !isOverflow ? currentValue : currentValue.substring(0, maxCharQuantity);
+    return !isOverflow ? currentValue : currentValue.slice(0, maxCharQuantity);
   };
   const onContainerBlurHandler = (event) => {
     setFocused(false);

package/dist/esm/TimePicker/Placeholder.js

@@ -34,14 +34,14 @@ const Placeholder = forwardRef(
         ...others,
         children: [
           name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: getDateValue(value) }),
-          segments.map((segment, i) => /* @__PURE__ */ jsx(
+          segments.map((segment) => /* @__PURE__ */ jsx(
             PlaceholderSegment,
             {
               segment,
               state,
               placeholder: placeholders[segment.type]
             },
-            i
+            segment.type
           ))
         ]
       }

package/dist/esm/TimePicker/TimePicker.js

@@ -182,7 +182,7 @@ const HvTimePicker = forwardRef(
                 ]
               },
               ...otherDropdownProps,
-              children: /* @__PURE__ */ jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment) => /* @__PURE__ */ jsx(
                 Unit,
                 {
                   state,
@@ -194,7 +194,7 @@ const HvTimePicker = forwardRef(
                     state.setSegment(segment.type, Number(val));
                   }
                 },
-                i
+                segment.type
               )) })
             }
           ),

package/dist/esm/TreeView/TreeItem/TreeItem.js

@@ -70,7 +70,7 @@ const HvTreeItem = forwardRef(
       if (instance && label) {
         return instance.mapFirstChar(
           nodeId,
-          (contentRef.current?.textContent ?? "").substring(0, 1).toLowerCase()
+          (contentRef.current?.textContent ?? "").slice(0, 1).toLowerCase()
         );
       }
       return void 0;

package/dist/esm/TreeView/TreeItem/useHvTreeItem.js

@@ -1,9 +1,9 @@
-import * as React from "react";
+import { useContext } from "react";
 import { DescendantContext } from "../internals/DescendantProvider.js";
 import { useTreeViewContext } from "../internals/TreeViewProvider.js";
 function useHvTreeItem(nodeId) {
   const { instance, multiSelect } = useTreeViewContext();
-  const { level = 0 } = React.useContext(DescendantContext);
+  const { level = 0 } = useContext(DescendantContext);
   const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
   const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
   const focused = instance ? instance.isNodeFocused(nodeId) : false;

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js

@@ -119,7 +119,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
       if (mapFirstChar && unMapFirstChar && label && contentRef.current?.textContent) {
         mapFirstChar(
           nodeId,
-          contentRef.current?.textContent.substring(0, 1).toLowerCase()
+          contentRef.current?.textContent.slice(0, 1).toLowerCase()
         );
         return () => {
           unMapFirstChar(nodeId);
@@ -310,7 +310,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                       variant: "square",
                       size: "xs",
                       backgroundColor: "textSubtle",
-                      children: payload?.label?.substring(0, 1)
+                      children: payload?.label?.slice(0, 1)
                     }
                   ) : useIcons && icon,
                   hasChildren && !isOpen ? /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", size: "xs", compact: true }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx("div", {})

package/dist/esm/hooks/useForkRef.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useMemo } from "react";
 const setRef = (ref, value) => {
   if (typeof ref === "function") {
     ref(value);
@@ -7,7 +7,7 @@ const setRef = (ref, value) => {
   }
 };
 const useForkRef = (refA, refB) => {
-  return React.useMemo(() => {
+  return useMemo(() => {
     if (refA == null && refB == null) {
       return null;
     }

package/dist/esm/hooks/useImageLoaded.js

@@ -2,24 +2,18 @@ import { useState, useEffect } from "react";
 const useImageLoaded = (src, srcSet) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   useEffect(() => {
-    if (!src && !srcSet) {
-      return void 0;
-    }
+    if (!src && !srcSet) return;
     setImageLoaded(false);
     let active = true;
     const image = new Image();
     image.src = src || "";
     image.srcset = srcSet || "";
     image.onload = () => {
-      if (!active) {
-        return;
-      }
+      if (!active) return;
       setImageLoaded("loaded");
     };
     image.onerror = () => {
-      if (!active) {
-        return;
-      }
+      if (!active) return;
       setImageLoaded("error");
     };
     return () => {

package/dist/esm/index.js

@@ -229,24 +229,26 @@ import { staticClasses as staticClasses93 } from "./SnackbarProvider/SnackbarPro
 import { HvSnackbarProvider, useHvSnackbar } from "./SnackbarProvider/SnackbarProvider.js";
 import { staticClasses as staticClasses94 } from "./Stack/Stack.styles.js";
 import { HvStack } from "./Stack/Stack.js";
-import { staticClasses as staticClasses95 } from "./Switch/Switch.styles.js";
+import { staticClasses as staticClasses95 } from "./StatusIcon/StatusIcon.styles.js";
+import { HvStatusIcon } from "./StatusIcon/StatusIcon.js";
+import { staticClasses as staticClasses96 } from "./Switch/Switch.styles.js";
 import { HvSwitch } from "./Switch/Switch.js";
 import { useHvTable, useHvTable as useHvTable2 } from "./Table/hooks/useHvTable.js";
-import { staticClasses as staticClasses96 } from "./Table/Table.styles.js";
+import { staticClasses as staticClasses97 } from "./Table/Table.styles.js";
 import { HvTable } from "./Table/Table.js";
-import { staticClasses as staticClasses97 } from "./Table/TableContainer/TableContainer.styles.js";
+import { staticClasses as staticClasses98 } from "./Table/TableContainer/TableContainer.styles.js";
 import { HvTableContainer } from "./Table/TableContainer/TableContainer.js";
-import { staticClasses as staticClasses98 } from "./Table/TableSection/TableSection.styles.js";
+import { staticClasses as staticClasses99 } from "./Table/TableSection/TableSection.styles.js";
 import { HvTableSection } from "./Table/TableSection/TableSection.js";
-import { staticClasses as staticClasses99 } from "./Table/TableBody/TableBody.styles.js";
+import { staticClasses as staticClasses100 } from "./Table/TableBody/TableBody.styles.js";
 import { HvTableBody } from "./Table/TableBody/TableBody.js";
-import { staticClasses as staticClasses100 } from "./Table/TableHead/TableHead.styles.js";
+import { staticClasses as staticClasses101 } from "./Table/TableHead/TableHead.styles.js";
 import { HvTableHead } from "./Table/TableHead/TableHead.js";
-import { staticClasses as staticClasses101 } from "./Table/TableHeader/TableHeader.styles.js";
+import { staticClasses as staticClasses102 } from "./Table/TableHeader/TableHeader.styles.js";
 import { HvTableHeader } from "./Table/TableHeader/TableHeader.js";
-import { staticClasses as staticClasses102 } from "./Table/TableRow/TableRow.styles.js";
+import { staticClasses as staticClasses103 } from "./Table/TableRow/TableRow.styles.js";
 import { HvTableRow } from "./Table/TableRow/TableRow.js";
-import { staticClasses as staticClasses103 } from "./Table/TableCell/TableCell.styles.js";
+import { staticClasses as staticClasses104 } from "./Table/TableCell/TableCell.styles.js";
 import { HvTableCell } from "./Table/TableCell/TableCell.js";
 import { useHvTableStyles } from "./Table/hooks/useHvTableStyles.js";
 import { useHvSortBy } from "./Table/hooks/useHvSortBy.js";
@@ -265,48 +267,48 @@ import { HvDateColumnCell } from "./Table/renderers/DateColumnCell.js";
 import { HvDropdownColumnCell } from "./Table/renderers/DropdownColumnCell.js";
 import { HvProgressColumnCell } from "./Table/renderers/ProgressColumnCell.js";
 import { HvSwitchColumnCell } from "./Table/renderers/SwitchColumnCell.js";
-import { staticClasses as staticClasses104 } from "./Tabs/Tabs.styles.js";
+import { staticClasses as staticClasses105 } from "./Tabs/Tabs.styles.js";
 import { HvTabs } from "./Tabs/Tabs.js";
-import { staticClasses as staticClasses105 } from "./Tabs/Tab/Tab.styles.js";
+import { staticClasses as staticClasses106 } from "./Tabs/Tab/Tab.styles.js";
 import { HvTab } from "./Tabs/Tab/Tab.js";
-import { staticClasses as staticClasses106 } from "./Tag/Tag.styles.js";
+import { staticClasses as staticClasses107 } from "./Tag/Tag.styles.js";
 import { HvTag } from "./Tag/Tag.js";
-import { staticClasses as staticClasses107 } from "./TagsInput/TagsInput.styles.js";
+import { staticClasses as staticClasses108 } from "./TagsInput/TagsInput.styles.js";
 import { HvTagsInput } from "./TagsInput/TagsInput.js";
-import { staticClasses as staticClasses108 } from "./TextArea/TextArea.styles.js";
+import { staticClasses as staticClasses109 } from "./TextArea/TextArea.styles.js";
 import { HvTextArea } from "./TextArea/TextArea.js";
-import { staticClasses as staticClasses109 } from "./TimeAgo/TimeAgo.styles.js";
+import { staticClasses as staticClasses110 } from "./TimeAgo/TimeAgo.styles.js";
 import { HvTimeAgo } from "./TimeAgo/TimeAgo.js";
-import { staticClasses as staticClasses110 } from "./TimePicker/TimePicker.styles.js";
+import { staticClasses as staticClasses111 } from "./TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./TimePicker/TimePicker.js";
 import { HvToggleButton } from "./ToggleButton/ToggleButton.js";
-import { staticClasses as staticClasses111 } from "./Tooltip/Tooltip.styles.js";
+import { staticClasses as staticClasses112 } from "./Tooltip/Tooltip.styles.js";
 import { HvTooltip } from "./Tooltip/Tooltip.js";
-import { staticClasses as staticClasses112 } from "./TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses113 } from "./TreeView/TreeView.styles.js";
 import { HvTreeView } from "./TreeView/TreeView.js";
-import { staticClasses as staticClasses113 } from "./TreeView/TreeItem/TreeItem.styles.js";
+import { staticClasses as staticClasses114 } from "./TreeView/TreeItem/TreeItem.styles.js";
 import { HvTreeItem } from "./TreeView/TreeItem/TreeItem.js";
 import { useHvTreeItem } from "./TreeView/TreeItem/useHvTreeItem.js";
-import { staticClasses as staticClasses114 } from "./VerticalNavigation/VerticalNavigation.styles.js";
+import { staticClasses as staticClasses115 } from "./VerticalNavigation/VerticalNavigation.styles.js";
 import { HvVerticalNavigation } from "./VerticalNavigation/VerticalNavigation.js";
-import { staticClasses as staticClasses115 } from "./VerticalNavigation/Header/Header.styles.js";
+import { staticClasses as staticClasses116 } from "./VerticalNavigation/Header/Header.styles.js";
 import { HvVerticalNavigationHeader } from "./VerticalNavigation/Header/Header.js";
-import { staticClasses as staticClasses116 } from "./VerticalNavigation/Actions/Actions.styles.js";
+import { staticClasses as staticClasses117 } from "./VerticalNavigation/Actions/Actions.styles.js";
 import { HvVerticalNavigationActions } from "./VerticalNavigation/Actions/Actions.js";
-import { staticClasses as staticClasses117 } from "./VerticalNavigation/Actions/Action.styles.js";
+import { staticClasses as staticClasses118 } from "./VerticalNavigation/Actions/Action.styles.js";
 import { HvVerticalNavigationAction } from "./VerticalNavigation/Actions/Action.js";
-import { staticClasses as staticClasses118 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
+import { staticClasses as staticClasses119 } from "./VerticalNavigation/Navigation/Navigation.styles.js";
 import { HvVerticalNavigationTree } from "./VerticalNavigation/Navigation/Navigation.js";
-import { staticClasses as staticClasses119 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
+import { staticClasses as staticClasses120 } from "./VerticalNavigation/NavigationSlider/NavigationSlider.styles.js";
 import { HvVerticalNavigationSlider } from "./VerticalNavigation/NavigationSlider/NavigationSlider.js";
-import { staticClasses as staticClasses120 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
+import { staticClasses as staticClasses121 } from "./VerticalNavigation/TreeView/TreeView.styles.js";
 import { HvVerticalNavigationTreeView } from "./VerticalNavigation/TreeView/TreeView.js";
-import { staticClasses as staticClasses121 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
+import { staticClasses as staticClasses122 } from "./VerticalNavigation/TreeView/TreeViewItem.styles.js";
 import { HvVerticalNavigationTreeViewItem } from "./VerticalNavigation/TreeView/TreeViewItem.js";
 import { VerticalNavigationContext } from "./VerticalNavigation/VerticalNavigationContext.js";
 import { HvIconButton } from "./IconButton/IconButton.js";
-import { HvIconContainer, staticClasses as staticClasses122, staticClasses as staticClasses123, useClasses } from "./IconContainer/IconContainer.js";
-import { staticClasses as staticClasses124 } from "./Skeleton/Skeleton.styles.js";
+import { HvIconContainer, staticClasses as staticClasses123, staticClasses as staticClasses124, useClasses } from "./IconContainer/IconContainer.js";
+import { staticClasses as staticClasses125 } from "./Skeleton/Skeleton.styles.js";
 import { HvSkeleton } from "./Skeleton/Skeleton.js";
 import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
@@ -417,6 +419,7 @@ export {
   HvSnackbarContent,
   HvSnackbarProvider,
   HvStack,
+  HvStatusIcon,
   HvSuggestions,
   HvSwitch,
   HvSwitchColumnCell,
@@ -454,8 +457,8 @@ export {
   VerticalNavigationContext,
   staticClasses17 as accordionClasses,
   staticClasses18 as actionBarClasses,
-  staticClasses117 as actionClasses,
-  staticClasses116 as actionsClasses,
+  staticClasses118 as actionClasses,
+  staticClasses117 as actionsClasses,
   staticClasses19 as actionsGenericClasses,
   staticClasses7 as adornmentClasses,
   staticClasses21 as appSwitcherActionClasses,
@@ -539,7 +542,7 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
-  staticClasses122 as iconContainerClasses,
+  staticClasses123 as iconContainerClasses,
   iconVariant,
   increaseSize,
   staticClasses10 as infoMessageClasses,
@@ -583,37 +586,38 @@ export {
   setId,
   setUid,
   staticClasses89 as simpleGridClasses,
-  staticClasses124 as skeletonClasses,
+  staticClasses125 as skeletonClasses,
   staticClasses90 as sliderClasses,
   staticClasses91 as snackbarClasses,
   staticClasses92 as snackbarContentClasses,
   staticClasses93 as snackbarProviderClasses,
   staticClasses94 as stackClasses,
-  staticClasses123 as staticClasses,
+  staticClasses124 as staticClasses,
+  staticClasses95 as statusIconClasses,
   staticClasses14 as suggestionsClasses,
-  staticClasses95 as switchClasses,
-  staticClasses105 as tabClasses,
-  staticClasses99 as tableBodyClasses,
-  staticClasses103 as tableCellClasses,
-  staticClasses96 as tableClasses,
-  staticClasses97 as tableContainerClasses,
-  staticClasses100 as tableHeadClasses,
-  staticClasses101 as tableHeaderClasses,
-  staticClasses102 as tableRowClasses,
-  staticClasses98 as tableSectionClasses,
-  staticClasses104 as tabsClasses,
-  staticClasses106 as tagClasses,
-  staticClasses107 as tagsInputClasses,
-  staticClasses108 as textAreaClasses,
+  staticClasses96 as switchClasses,
+  staticClasses106 as tabClasses,
+  staticClasses100 as tableBodyClasses,
+  staticClasses104 as tableCellClasses,
+  staticClasses97 as tableClasses,
+  staticClasses98 as tableContainerClasses,
+  staticClasses101 as tableHeadClasses,
+  staticClasses102 as tableHeaderClasses,
+  staticClasses103 as tableRowClasses,
+  staticClasses99 as tableSectionClasses,
+  staticClasses105 as tabsClasses,
+  staticClasses107 as tagClasses,
+  staticClasses108 as tagsInputClasses,
+  staticClasses109 as textAreaClasses,
   theme,
   themes,
-  staticClasses109 as timeAgoClasses,
-  staticClasses110 as timePickerClasses,
-  staticClasses111 as tooltipClasses,
-  staticClasses113 as treeItemClasses,
-  staticClasses112 as treeView2Classes,
-  staticClasses120 as treeViewClasses,
-  staticClasses121 as treeViewItemClasses,
+  staticClasses110 as timeAgoClasses,
+  staticClasses111 as timePickerClasses,
+  staticClasses112 as tooltipClasses,
+  staticClasses114 as treeItemClasses,
+  staticClasses113 as treeView2Classes,
+  staticClasses121 as treeViewClasses,
+  staticClasses122 as treeViewItemClasses,
   staticClasses as typographyClasses,
   typographyVariants,
   uniqueId,
@@ -650,10 +654,10 @@ export {
   useTheme,
   useUniqueId,
   useWidth,
-  staticClasses114 as verticalNavigationClasses,
-  staticClasses115 as verticalNavigationHeaderClasses,
-  staticClasses119 as verticalNavigationSliderClasses,
-  staticClasses118 as verticalNavigationTreeClasses,
+  staticClasses115 as verticalNavigationClasses,
+  staticClasses116 as verticalNavigationHeaderClasses,
+  staticClasses120 as verticalNavigationSliderClasses,
+  staticClasses119 as verticalNavigationTreeClasses,
   staticClasses86 as verticalScrollListItemClasses,
   staticClasses11 as warningTextClasses
 };

package/dist/esm/themes/ds3.js

@@ -19,6 +19,10 @@ const ds3 = mergeTheme(ds3$1, {
       classes: {
         root: {
           borderRadius: 0
+        },
+        messageIcon: {
+          color: "inherit !important",
+          padding: 0
         }
       }
     },
@@ -1200,6 +1204,9 @@ const ds3 = mergeTheme(ds3$1, {
           maxHeight: "calc(100% - (2 * 100px))"
         }
       }
+    },
+    HvStatusIcon: {
+      type: "simple"
     }
   }
 });

package/dist/esm/themes/ds5.js

@@ -76,6 +76,14 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvCallout: {
+      classes: {
+        messageIcon: {
+          color: "inherit !important",
+          padding: 0
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         open: {
@@ -116,6 +124,9 @@ const ds5 = mergeTheme(ds5$1, {
         }
       }
     },
+    HvStatusIcon: {
+      type: "simple"
+    },
     HvTab: {
       classes: {
         root: {

package/dist/esm/themes/pentahoPlus.js

@@ -49,10 +49,8 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
           Object.entries(notificationMap).map(([variant, color]) => [
             variant,
             {
-              backgroundColor: theme.colors[`${color}Dimmed`],
+              backgroundColor: theme.mix(`${color}Dimmed`, 0.5, "dimmer"),
               "--icolor": theme.colors[color],
-              "--outline": theme.colors[`${color}Border`],
-              "--bg": theme.colors[`${color}Subtle`],
               "--title": theme.colors[`${color}Deep`]
             }
           ])
@@ -63,11 +61,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
           }
         },
         messageIcon: {
-          alignSelf: "start",
-          borderRadius: theme.radii.round,
-          color: "var(--icolor)",
-          outline: `1px solid var(--outline)`,
-          backgroundColor: "var(--bg)"
+          alignSelf: "start"
         },
         messageTitle: {
           color: "var(--title)"
@@ -289,7 +283,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         sm: { fontSize: 20, padding: 2 },
         md: { fontSize: 26, padding: 3 },
         lg: { fontSize: 36, padding: 6 },
-        xl: { fontSize: 48, padding: 8 }
+        xl: { fontSize: 48, padding: 5 }
       }
     },
     HvInlineEditor: {

package/dist/esm/utils/Callout.js

@@ -7,6 +7,7 @@ import { HvIcon } from "../icons.js";
 import { iconVariant } from "./iconVariant.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../Button/Button.js";
+import { HvStatusIcon } from "../StatusIcon/StatusIcon.js";
 const { useClasses } = createClasses("HvCallout", {
   root: {
     position: "relative",
@@ -44,10 +45,7 @@ const { useClasses } = createClasses("HvCallout", {
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {
-    lineHeight: 0,
-    flexShrink: 0
-  },
+  messageIcon: {},
   messageTitle: {
     display: "block",
     fontWeight: theme.fontWeights.semibold
@@ -113,7 +111,14 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
         action: classes.action
       },
       message: /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("div", { className: classes.messageIcon, children: icon }),
+        icon && /* @__PURE__ */ jsx(
+          HvStatusIcon,
+          {
+            className: classes.messageIcon,
+            variant: variant === "default" ? "info" : variant,
+            customIcon
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: classes.messageContent, children: [
           title && /* @__PURE__ */ jsx("b", { className: classes.messageTitle, children: title }),
           children