@hitachivantara/uikit-react-core 5.97.0 → 5.98.0

package/dist/cjs/StatusIcon/StatusIcon.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
+const StatusIcon_styles = require("./StatusIcon.styles.cjs");
+const IconContainer = require("../IconContainer/IconContainer.cjs");
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
+const HvStatusIcon = React.forwardRef(function HvStatusIcon2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    variant = "default",
+    customIcon,
+    size = "sm",
+    type = "full"
+  } = uikitReactUtils.useDefaultProps("HvStatusIcon", props);
+  const { classes, cx } = StatusIcon_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      "data-type": type,
+      "data-size": size,
+      className: cx(classes.root, className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer.HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsxRuntime.jsx(
+        icons.HvIcon,
+        {
+          compact: true,
+          className: classes.icon,
+          name: variantIconMap[variant]
+        }
+      ) })
+    }
+  );
+});
+exports.statusIconClasses = StatusIcon_styles.staticClasses;
+exports.HvStatusIcon = HvStatusIcon;

package/dist/cjs/StatusIcon/StatusIcon.styles.cjs

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

package/dist/cjs/index.cjs

@@ -231,6 +231,8 @@ const SnackbarProvider_styles = require("./SnackbarProvider/SnackbarProvider.sty
 const SnackbarProvider = require("./SnackbarProvider/SnackbarProvider.cjs");
 const Stack_styles = require("./Stack/Stack.styles.cjs");
 const Stack = require("./Stack/Stack.cjs");
+const StatusIcon_styles = require("./StatusIcon/StatusIcon.styles.cjs");
+const StatusIcon = require("./StatusIcon/StatusIcon.cjs");
 const Switch_styles = require("./Switch/Switch.styles.cjs");
 const Switch = require("./Switch/Switch.cjs");
 const useHvTable = require("./Table/hooks/useHvTable.cjs");
@@ -575,6 +577,8 @@ exports.HvSnackbarProvider = SnackbarProvider.HvSnackbarProvider;
 exports.useHvSnackbar = SnackbarProvider.useHvSnackbar;
 exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = Stack.HvStack;
+exports.statusIconClasses = StatusIcon_styles.staticClasses;
+exports.HvStatusIcon = StatusIcon.HvStatusIcon;
 exports.switchClasses = Switch_styles.staticClasses;
 exports.HvSwitch = Switch.HvSwitch;
 exports.useHvData = useHvTable.useHvTable;

package/dist/cjs/themes/ds3.cjs

@@ -21,6 +21,10 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
       classes: {
         root: {
           borderRadius: 0
+        },
+        messageIcon: {
+          color: "inherit !important",
+          padding: 0
         }
       }
     },
@@ -1202,6 +1206,9 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
           maxHeight: "calc(100% - (2 * 100px))"
         }
       }
+    },
+    HvStatusIcon: {
+      type: "simple"
     }
   }
 });

package/dist/cjs/themes/ds5.cjs

@@ -78,6 +78,14 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         }
       }
     },
+    HvCallout: {
+      classes: {
+        messageIcon: {
+          color: "inherit !important",
+          padding: 0
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         open: {
@@ -118,6 +126,9 @@ const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
         }
       }
     },
+    HvStatusIcon: {
+      type: "simple"
+    },
     HvTab: {
       classes: {
         root: {

package/dist/cjs/themes/pentahoPlus.cjs

@@ -53,8 +53,6 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
             {
               backgroundColor: uikitStyles.theme.mix(`${color}Dimmed`, 0.5, "dimmer"),
               "--icolor": uikitStyles.theme.colors[color],
-              "--outline": uikitStyles.theme.colors[`${color}Border`],
-              "--bg": uikitStyles.theme.colors[`${color}Subtle`],
               "--title": uikitStyles.theme.colors[`${color}Deep`]
             }
           ])
@@ -65,11 +63,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
           }
         },
         messageIcon: {
-          alignSelf: "start",
-          borderRadius: uikitStyles.theme.radii.round,
-          color: "var(--icolor)",
-          outline: `1px solid var(--outline)`,
-          backgroundColor: "var(--bg)"
+          alignSelf: "start"
         },
         messageTitle: {
           color: "var(--title)"
@@ -291,7 +285,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         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/cjs/utils/Callout.cjs

@@ -9,6 +9,7 @@ const icons = require("../icons.cjs");
 const iconVariant = require("./iconVariant.cjs");
 const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
 const Button = require("../Button/Button.cjs");
+const StatusIcon = require("../StatusIcon/StatusIcon.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
 const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
@@ -48,10 +49,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {
-    lineHeight: 0,
-    flexShrink: 0
-  },
+  messageIcon: {},
   messageTitle: {
     display: "block",
     fontWeight: uikitStyles.theme.fontWeights.semibold
@@ -117,7 +115,14 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
         action: classes.action
       },
       message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.messageIcon, children: icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          StatusIcon.HvStatusIcon,
+          {
+            className: classes.messageIcon,
+            variant: variant === "default" ? "info" : variant,
+            customIcon
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContent, children: [
           title && /* @__PURE__ */ jsxRuntime.jsx("b", { className: classes.messageTitle, children: title }),
           children

package/dist/esm/StatusIcon/StatusIcon.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
+import { useClasses } from "./StatusIcon.styles.js";
+import { staticClasses } from "./StatusIcon.styles.js";
+import { HvIconContainer } from "../IconContainer/IconContainer.js";
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
+const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    variant = "default",
+    customIcon,
+    size = "sm",
+    type = "full"
+  } = useDefaultProps("HvStatusIcon", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-variant": variant,
+      "data-type": type,
+      "data-size": size,
+      className: cx(classes.root, className),
+      children: /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
+        HvIcon,
+        {
+          compact: true,
+          className: classes.icon,
+          name: variantIconMap[variant]
+        }
+      ) })
+    }
+  );
+});
+export {
+  HvStatusIcon,
+  staticClasses as statusIconClasses
+};

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/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

@@ -51,8 +51,6 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
             {
               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

package/dist/types/index.d.ts

@@ -5749,7 +5749,7 @@ export { HvSize }
  */
 export declare const HvSkeleton: (props: HvSkeletonProps) => JSX_2.Element;
 
-export declare type HvSkeletonClasses = ExtractNames<typeof useClasses_133>;
+export declare type HvSkeletonClasses = ExtractNames<typeof useClasses_134>;
 
 export declare interface HvSkeletonProps extends HvBaseProps {
     /** Whether the skeleton element is hidden or not. */
@@ -6018,6 +6018,33 @@ export declare interface HvStackProps extends HvBaseProps {
     classes?: HvStackClasses;
 }
 
+/**
+ * A status icon represents the status of a process or an entity.
+ *
+ * @experimental
+ * This component is experimental and its API might change in future releases.
+ */
+export declare const HvStatusIcon: ForwardRefExoticComponent<HvStatusIconProps & RefAttributes<HTMLDivElement>>;
+
+export declare type HvStatusIconClasses = ExtractNames<typeof useClasses_110>;
+
+export declare interface HvStatusIconProps extends HvBaseProps {
+    /** Variant of the snackbar. */
+    variant?: HvStatusIconVariant;
+    /** Custom icon to replace the variant default. */
+    customIcon?: React.ReactNode;
+    /** The size of the icon. */
+    size?: HvSize;
+    /** The type of status icon. */
+    type?: HvStatusIconType;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvStatusIconClasses;
+}
+
+export declare type HvStatusIconType = "full" | "simple";
+
+export declare type HvStatusIconVariant = HvCalloutVariant;
+
 export declare const hvStringFallback: (value: any) => string;
 
 export declare interface HvSuggestion {
@@ -6072,7 +6099,7 @@ export declare type HvSupportColors = Record<HvSupportColorKeys, string>;
  */
 export declare const HvSwitch: ForwardRefExoticComponent<Omit<HvSwitchProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
-export declare type HvSwitchClasses = ExtractNames<typeof useClasses_110>;
+export declare type HvSwitchClasses = ExtractNames<typeof useClasses_111>;
 
 export declare function hvSwitchColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, switchLabel: string, falseLabel?: string, trueLabel?: string, switchProps?: HvBaseSwitchProps): HvTableColumnConfig<D, H>;
 
@@ -6183,7 +6210,7 @@ export declare interface HvSwitchProps extends Omit<SwitchProps, "color" | "onCh
 
 export declare const HvTab: ForwardRefExoticComponent<Omit<HvTabProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvTabClasses = ExtractNames<typeof useClasses_117>;
+export declare type HvTabClasses = ExtractNames<typeof useClasses_118>;
 
 /**
  * A table gathers relational data. It displays values arranged to allow quick numerical analysis like comparison and sorting.
@@ -6203,7 +6230,7 @@ export declare const HvTable: ForwardRefExoticComponent<HvTableProps & RefAttrib
  */
 export declare const HvTableBody: ForwardRefExoticComponent<HvTableBodyProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableBodyClasses = ExtractNames<typeof useClasses_113>;
+export declare type HvTableBodyClasses = ExtractNames<typeof useClasses_114>;
 
 export declare interface HvTableBodyProps extends HvBaseProps<HTMLTableSectionElement, "children"> {
     /**
@@ -6291,7 +6318,7 @@ export declare interface HvTableColumnOptions<D extends object = Record<string,
  */
 export declare const HvTableContainer: ForwardRefExoticComponent<HvTableContainerProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableContainerClasses = ExtractNames<typeof useClasses_111>;
+export declare type HvTableContainerClasses = ExtractNames<typeof useClasses_112>;
 
 export declare interface HvTableContainerProps extends HvBaseProps<HTMLDivElement, "children"> {
     /**
@@ -6315,7 +6342,7 @@ export declare type HvTableDefinitionConfig<D extends object = Record<string, un
  */
 export declare const HvTableHead: ForwardRefExoticComponent<HvTableHeadProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableHeadClasses = ExtractNames<typeof useClasses_114>;
+export declare type HvTableHeadClasses = ExtractNames<typeof useClasses_115>;
 
 /**
  * `HvTableHeader` acts as a `th` element and inherits styles from its context
@@ -6488,7 +6515,7 @@ export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement
  */
 export declare const HvTableSection: ForwardRefExoticComponent<HvTableSectionProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvTableSectionClasses = ExtractNames<typeof useClasses_112>;
+export declare type HvTableSectionClasses = ExtractNames<typeof useClasses_113>;
 
 export declare interface HvTableSectionProps extends HvSectionProps {
 }
@@ -6518,7 +6545,7 @@ export declare interface HvTabProps extends Omit<TabProps, "children"> {
  */
 export declare const HvTabs: ForwardRefExoticComponent<Omit<HvTabsProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvTabsClasses = ExtractNames<typeof useClasses_116>;
+export declare type HvTabsClasses = ExtractNames<typeof useClasses_117>;
 
 export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
     /**
@@ -6547,7 +6574,7 @@ export declare interface HvTabsProps extends Omit<TabsProps, "onChange"> {
  */
 export declare const HvTag: ForwardRefExoticComponent<Omit<HvTagProps, "ref"> & RefAttributes<HTMLElement>>;
 
-export declare type HvTagClasses = ExtractNames<typeof useClasses_115>;
+export declare type HvTagClasses = ExtractNames<typeof useClasses_116>;
 
 export declare function hvTagColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, A extends object = Record<string, unknown>>(col: HvTableColumnConfig<D, H>, valueDataKey: keyof A, colorDataKey: keyof A, textColorDataKey: keyof A, fromRowData?: boolean, tagProps?: HvTagProps): HvTableColumnConfig<D, H>;
 
@@ -6594,7 +6621,7 @@ export declare interface HvTagProps extends Omit<HvButtonBaseProps, "type" | "co
  */
 export declare const HvTagsInput: ForwardRefExoticComponent<HvTagsInputProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTagsInputClasses = ExtractNames<typeof useClasses_118>;
+export declare type HvTagsInputClasses = ExtractNames<typeof useClasses_119>;
 
 export declare interface HvTagsInputProps extends Omit<HvInputProps, "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "value" | "defaultValue"> {
     /** The value of the form element. */
@@ -6645,7 +6672,7 @@ export declare interface HvTagSuggestion extends HvInputSuggestion {
  */
 export declare const HvTextArea: ForwardRefExoticComponent<HvTextAreaProps & RefAttributes<HTMLTextAreaElement>>;
 
-export declare type HvTextAreaClasses = ExtractNames<typeof useClasses_119>;
+export declare type HvTextAreaClasses = ExtractNames<typeof useClasses_120>;
 
 export declare interface HvTextAreaProps extends Omit<HvBaseInputProps, "onChange" | "onBlur" | "rows" | "classes" | "onFocus" | "placeholder"> {
     /** The placeholder value of the text area. */
@@ -6825,7 +6852,7 @@ export declare const HvTimeAgo: <C extends React.ElementType = "p">(props: {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
-export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_120>;
+export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_121>;
 
 export declare type HvTimeAgoProps<C extends React.ElementType = "p"> = PolymorphicComponentRef<C, {
     /**
@@ -6861,7 +6888,7 @@ export declare type HvTimeAgoProps<C extends React.ElementType = "p"> = Polymorp
  */
 export declare const HvTimePicker: ForwardRefExoticComponent<HvTimePickerProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvTimePickerClasses = ExtractNames<typeof useClasses_121>;
+export declare type HvTimePickerClasses = ExtractNames<typeof useClasses_122>;
 
 export declare type HvTimePickerClassKey = "root" | "input" | "label" | "placeholder" | "timePopperContainer" | "separator" | "periodContainer" | "formElementRoot" | "dropdownPlaceholder" | "iconBaseRoot" | "error" | "labelContainer" | "description" | "dropdownHeaderInvalid" | "dropdownPlaceholderDisabled" | "dropdownHeaderOpen";
 
@@ -6989,7 +7016,7 @@ export declare interface HvTooltipProps extends Omit<TooltipProps, "classes"> {
     containerId?: string;
 }
 
-declare type HvTreeContentClasses = ExtractNames<typeof useClasses_124>;
+declare type HvTreeContentClasses = ExtractNames<typeof useClasses_125>;
 
 export declare interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {
     /** className applied to the root element. */
@@ -7010,7 +7037,7 @@ export declare interface HvTreeContentProps extends React.HTMLAttributes<HTMLEle
 
 export declare const HvTreeItem: ForwardRefExoticComponent<HvTreeItemProps & RefAttributes<HTMLLIElement>>;
 
-export declare type HvTreeItemClasses = ExtractNames<typeof useClasses_123>;
+export declare type HvTreeItemClasses = ExtractNames<typeof useClasses_124>;
 
 export declare interface HvTreeItemProps extends React.HTMLAttributes<HTMLElement> {
     /** The element id */
@@ -7060,7 +7087,7 @@ export declare interface HvTreeItemProps extends React.HTMLAttributes<HTMLElemen
  */
 export declare const HvTreeView: <Multiple extends boolean | undefined>(props: HvTreeViewProps<Multiple> & RefAttributes<HTMLUListElement>) => React.ReactElement<any> | null;
 
-export declare type HvTreeViewClasses = ExtractNames<typeof useClasses_122>;
+export declare type HvTreeViewClasses = ExtractNames<typeof useClasses_123>;
 
 export declare interface HvTreeViewProps<Multiple extends boolean | undefined> extends HvBaseProps<HTMLUListElement>, DefaultTreeViewPluginParameters<Multiple> {
     /** A Jss Object used to override or extend the styles applied. */
@@ -7192,7 +7219,7 @@ export declare const HvVerticalNavigation: ForwardRefExoticComponent<HvVerticalN
 
 export declare const HvVerticalNavigationAction: (props: HvVerticalNavigationActionProps) => JSX_2.Element;
 
-export declare type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses_128>;
+export declare type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses_129>;
 
 export declare interface HvVerticalNavigationActionProps extends Omit<HvButtonProps, "classes" | "icon"> {
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -7205,18 +7232,18 @@ export declare interface HvVerticalNavigationActionProps extends Omit<HvButtonPr
 
 export declare const HvVerticalNavigationActions: (props: HvVerticalNavigationActionsProps) => JSX_2.Element;
 
-export declare type HvVerticalNavigationActionsClasses = ExtractNames<typeof useClasses_127>;
+export declare type HvVerticalNavigationActionsClasses = ExtractNames<typeof useClasses_128>;
 
 export declare interface HvVerticalNavigationActionsProps extends HvBaseProps {
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvVerticalNavigationActionsClasses;
 }
 
-export declare type HvVerticalNavigationClasses = ExtractNames<typeof useClasses_125>;
+export declare type HvVerticalNavigationClasses = ExtractNames<typeof useClasses_126>;
 
 export declare const HvVerticalNavigationHeader: (props: HvVerticalNavigationHeaderProps) => JSX_2.Element | null;
 
-export declare type HvVerticalNavigationHeaderClasses = ExtractNames<typeof useClasses_126>;
+export declare type HvVerticalNavigationHeaderClasses = ExtractNames<typeof useClasses_127>;
 
 export declare interface HvVerticalNavigationHeaderProps extends HvBaseProps {
     /** The title text to show on header. */
@@ -7263,7 +7290,7 @@ export declare interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivEl
 
 export declare const HvVerticalNavigationSlider: (props: HvVerticalNavigationSliderProps) => JSX_2.Element;
 
-export declare type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses_130>;
+export declare type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses_131>;
 
 export declare interface HvVerticalNavigationSliderProps extends Omit<HvListContainerProps, "classes"> {
     /** A Jss Object used to override or extend the styles applied. */
@@ -7291,7 +7318,7 @@ export declare interface HvVerticalNavigationSliderProps extends Omit<HvListCont
 
 export declare const HvVerticalNavigationTree: (props: HvVerticalNavigationTreeProps) => JSX_2.Element;
 
-export declare type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses_129>;
+export declare type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses_130>;
 
 export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLDivElement, "onChange" | "onToggle"> {
     /** A Jss Object used to override or extend the styles applied. */
@@ -7335,11 +7362,11 @@ export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLD
 
 export declare const HvVerticalNavigationTreeView: ForwardRefExoticComponent<HvVerticalNavigationTreeViewProps & RefAttributes<HTMLUListElement>>;
 
-export declare type HvVerticalNavigationTreeViewClasses = ExtractNames<typeof useClasses_131>;
+export declare type HvVerticalNavigationTreeViewClasses = ExtractNames<typeof useClasses_132>;
 
 export declare const HvVerticalNavigationTreeViewItem: ForwardRefExoticComponent<HvVerticalNavigationTreeViewItemProps & RefAttributes<unknown>>;
 
-export declare type HvVerticalNavigationTreeViewItemClasses = ExtractNames<typeof useClasses_132>;
+export declare type HvVerticalNavigationTreeViewItemClasses = ExtractNames<typeof useClasses_133>;
 
 export declare interface HvVerticalNavigationTreeViewItemProps {
     /**
@@ -7993,6 +8020,11 @@ declare const staticClasses: {
 export { staticClasses as iconContainerClasses }
 export { staticClasses }
 
+export declare const statusIconClasses: {
+    root: string;
+    icon: string;
+};
+
 declare type StringKey<D> = Extract<keyof D, string>;
 
 export declare const suggestionsClasses: {
@@ -8506,7 +8538,16 @@ declare const useClasses_11: (classesProp?: Partial<Record<"root" | "gutter" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_110: (classesProp?: Partial<Record<"label" | "root" | "error" | "switchContainer" | "invalidSwitch", string>>, addStatic?: boolean) => {
+declare const useClasses_110: (classesProp?: Partial<Record<"icon" | "root", string>>, addStatic?: boolean) => {
+    readonly classes: {
+        root: string;
+        icon: string;
+    };
+    readonly css: any;
+    readonly cx: (...args: any) => string;
+};
+
+declare const useClasses_111: (classesProp?: Partial<Record<"label" | "root" | "error" | "switchContainer" | "invalidSwitch", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         label: string;
@@ -8518,7 +8559,7 @@ declare const useClasses_110: (classesProp?: Partial<Record<"label" | "root" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_111: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_112: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
     };
@@ -8526,7 +8567,7 @@ declare const useClasses_111: (classesProp?: Partial<Record<"root", string>>, ad
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_112: (classesProp?: Partial<Record<"content" | "header" | "hidden" | "root" | "actions" | "hasHeader" | "spaceTop" | "raisedHeader", string>>, addStatic?: boolean) => {
+declare const useClasses_113: (classesProp?: Partial<Record<"content" | "header" | "hidden" | "root" | "actions" | "hasHeader" | "spaceTop" | "raisedHeader", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         header: string;
@@ -8541,7 +8582,7 @@ declare const useClasses_112: (classesProp?: Partial<Record<"content" | "header"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_113: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_114: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
     };
@@ -8549,7 +8590,7 @@ declare const useClasses_113: (classesProp?: Partial<Record<"root", string>>, ad
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_114: (classesProp?: Partial<Record<"root" | "stickyHeader", string>>, addStatic?: boolean) => {
+declare const useClasses_115: (classesProp?: Partial<Record<"root" | "stickyHeader", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         stickyHeader: string;
@@ -8558,7 +8599,7 @@ declare const useClasses_114: (classesProp?: Partial<Record<"root" | "stickyHead
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_115: (classesProp?: Partial<Record<"label" | "xs" | "sm" | "md" | "button" | "icon" | "disabled" | "root" | "categorical" | "hasIcon" | "deleteIcon" | "clickable" | "selected" | "focusVisible" | "outlined" | "chipRoot" | "tagButton" | "disabledDeleteIcon" | "categoricalFocus" | "categoricalDisabled", string>>, addStatic?: boolean) => {
+declare const useClasses_116: (classesProp?: Partial<Record<"label" | "xs" | "sm" | "md" | "button" | "icon" | "disabled" | "root" | "categorical" | "hasIcon" | "deleteIcon" | "clickable" | "selected" | "focusVisible" | "outlined" | "chipRoot" | "tagButton" | "disabledDeleteIcon" | "categoricalFocus" | "categoricalDisabled", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         hasIcon: string;
@@ -8585,7 +8626,7 @@ declare const useClasses_115: (classesProp?: Partial<Record<"label" | "xs" | "sm
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_116: (classesProp?: Partial<Record<"root" | "floating" | "indicator" | "scroller" | "flexContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_117: (classesProp?: Partial<Record<"root" | "floating" | "indicator" | "scroller" | "flexContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         indicator: string;
@@ -8597,7 +8638,7 @@ declare const useClasses_116: (classesProp?: Partial<Record<"root" | "floating"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_117: (classesProp?: Partial<Record<"disabled" | "root" | "selected" | "focusVisible", string>>, addStatic?: boolean) => {
+declare const useClasses_118: (classesProp?: Partial<Record<"disabled" | "root" | "selected" | "focusVisible", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         focusVisible: string;
@@ -8608,7 +8649,7 @@ declare const useClasses_117: (classesProp?: Partial<Record<"disabled" | "root"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_118: (classesProp?: Partial<Record<"label" | "disabled" | "root" | "error" | "tagsList" | "singleLine" | "inputExtension" | "input" | "readOnly" | "description" | "invalid" | "labelContainer" | "resizable" | "suggestionsContainer" | "suggestionList" | "chipRoot" | "listItemGutters" | "listItemRoot" | "characterCounter" | "tagInputContainerRoot" | "tagInputRoot" | "tagSelected" | "tagInputBorderContainer" | "tagInputRootFocused" | "tagInputRootEmpty", string>>, addStatic?: boolean) => {
+declare const useClasses_119: (classesProp?: Partial<Record<"label" | "disabled" | "root" | "error" | "tagsList" | "singleLine" | "inputExtension" | "input" | "readOnly" | "description" | "invalid" | "labelContainer" | "resizable" | "suggestionsContainer" | "suggestionList" | "chipRoot" | "listItemGutters" | "listItemRoot" | "characterCounter" | "tagInputContainerRoot" | "tagInputRoot" | "tagSelected" | "tagInputBorderContainer" | "tagInputRootFocused" | "tagInputRootEmpty", string>>, addStatic?: boolean) => {
     readonly classes: {
         listItemGutters: string;
         listItemRoot: string;
@@ -8640,7 +8681,21 @@ declare const useClasses_118: (classesProp?: Partial<Record<"label" | "disabled"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_119: (classesProp?: Partial<Record<"label" | "disabled" | "root" | "error" | "input" | "description" | "invalid" | "labelContainer" | "resizable" | "inputResizable" | "characterCounter" | "baseInput", string>>, addStatic?: boolean) => {
+declare const useClasses_12: (classesProp?: Partial<Record<"show" | "root" | "defaultIcon" | "warningText" | "topGutter" | "hideText" | "topBorder", string>>, addStatic?: boolean) => {
+    readonly classes: {
+        root: string;
+        defaultIcon: string;
+        warningText: string;
+        show: string;
+        topGutter: string;
+        hideText: string;
+        topBorder: string;
+    };
+    readonly css: any;
+    readonly cx: (...args: any) => string;
+};
+
+declare const useClasses_120: (classesProp?: Partial<Record<"label" | "disabled" | "root" | "error" | "input" | "description" | "invalid" | "labelContainer" | "resizable" | "inputResizable" | "characterCounter" | "baseInput", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         disabled: string;
@@ -8659,21 +8714,7 @@ declare const useClasses_119: (classesProp?: Partial<Record<"label" | "disabled"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_12: (classesProp?: Partial<Record<"show" | "root" | "defaultIcon" | "warningText" | "topGutter" | "hideText" | "topBorder", string>>, addStatic?: boolean) => {
-    readonly classes: {
-        root: string;
-        defaultIcon: string;
-        warningText: string;
-        show: string;
-        topGutter: string;
-        hideText: string;
-        topBorder: string;
-    };
-    readonly css: any;
-    readonly cx: (...args: any) => string;
-};
-
-declare const useClasses_120: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_121: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
     };
@@ -8681,7 +8722,7 @@ declare const useClasses_120: (classesProp?: Partial<Record<"root", string>>, ad
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_121: (classesProp?: Partial<Record<"label" | "icon" | "root" | "error" | "placeholder" | "description" | "labelContainer" | "dropdownHeader" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_122: (classesProp?: Partial<Record<"label" | "icon" | "root" | "error" | "placeholder" | "description" | "labelContainer" | "dropdownHeader" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         labelContainer: string;
@@ -8701,7 +8742,7 @@ declare const useClasses_121: (classesProp?: Partial<Record<"label" | "icon" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_122: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_123: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
     };
@@ -8709,7 +8750,7 @@ declare const useClasses_122: (classesProp?: Partial<Record<"root", string>>, ad
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_123: (classesProp?: Partial<Record<"content" | "label" | "expanded" | "disabled" | "root" | "selected" | "group" | "focused" | "iconContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_124: (classesProp?: Partial<Record<"content" | "label" | "expanded" | "disabled" | "root" | "selected" | "group" | "focused" | "iconContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         group: string;
@@ -8725,7 +8766,7 @@ declare const useClasses_123: (classesProp?: Partial<Record<"content" | "label"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_124: (classesProp?: Partial<Record<"label" | "expanded" | "disabled" | "root" | "selected" | "focused" | "iconContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_125: (classesProp?: Partial<Record<"label" | "expanded" | "disabled" | "root" | "selected" | "focused" | "iconContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         expanded: string;
@@ -8739,7 +8780,7 @@ declare const useClasses_124: (classesProp?: Partial<Record<"label" | "expanded"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_125: (classesProp?: Partial<Record<"root" | "slider" | "collapsed" | "childData", string>>, addStatic?: boolean) => {
+declare const useClasses_126: (classesProp?: Partial<Record<"root" | "slider" | "collapsed" | "childData", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         collapsed: string;
@@ -8750,7 +8791,7 @@ declare const useClasses_125: (classesProp?: Partial<Record<"root" | "slider" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_126: (classesProp?: Partial<Record<"root" | "title" | "backButton" | "minimized" | "collapseButton", string>>, addStatic?: boolean) => {
+declare const useClasses_127: (classesProp?: Partial<Record<"root" | "title" | "backButton" | "minimized" | "collapseButton", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         minimized: string;
@@ -8762,7 +8803,7 @@ declare const useClasses_126: (classesProp?: Partial<Record<"root" | "title" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_127: (classesProp?: Partial<Record<"hide" | "root", string>>, addStatic?: boolean) => {
+declare const useClasses_128: (classesProp?: Partial<Record<"hide" | "root", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         hide: string;
@@ -8771,7 +8812,7 @@ declare const useClasses_127: (classesProp?: Partial<Record<"hide" | "root", str
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_128: (classesProp?: Partial<Record<"action" | "minimized" | "noIcon", string>>, addStatic?: boolean) => {
+declare const useClasses_129: (classesProp?: Partial<Record<"action" | "minimized" | "noIcon", string>>, addStatic?: boolean) => {
     readonly classes: {
         action: string;
         noIcon: string;
@@ -8781,19 +8822,6 @@ declare const useClasses_128: (classesProp?: Partial<Record<"action" | "minimize
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_129: (classesProp?: Partial<Record<"root" | "list" | "popup" | "listItem" | "collapsed" | "navigationPopup", string>>, addStatic?: boolean) => {
-    readonly classes: {
-        root: string;
-        list: string;
-        listItem: string;
-        collapsed: string;
-        popup: string;
-        navigationPopup: string;
-    };
-    readonly css: any;
-    readonly cx: (...args: any) => string;
-};
-
 declare const useClasses_13: (classesProp?: Partial<Record<"label" | "disabled" | "root" | "panel" | "popper" | "error" | "select" | "readOnly" | "description" | "invalid" | "labelContainer" | "panelOpenedUp" | "panelOpenedDown", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
@@ -8814,7 +8842,20 @@ declare const useClasses_13: (classesProp?: Partial<Record<"label" | "disabled"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_130: (classesProp?: Partial<Record<"root" | "listItemDisabled" | "listItemSelected" | "listItemFocus" | "listContainer" | "forwardButton", string>>, addStatic?: boolean) => {
+declare const useClasses_130: (classesProp?: Partial<Record<"root" | "list" | "popup" | "listItem" | "collapsed" | "navigationPopup", string>>, addStatic?: boolean) => {
+    readonly classes: {
+        root: string;
+        list: string;
+        listItem: string;
+        collapsed: string;
+        popup: string;
+        navigationPopup: string;
+    };
+    readonly css: any;
+    readonly cx: (...args: any) => string;
+};
+
+declare const useClasses_131: (classesProp?: Partial<Record<"root" | "listItemDisabled" | "listItemSelected" | "listItemFocus" | "listContainer" | "forwardButton", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         listItemSelected: string;
@@ -8827,7 +8868,7 @@ declare const useClasses_130: (classesProp?: Partial<Record<"root" | "listItemDi
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_131: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_132: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
     };
@@ -8835,7 +8876,7 @@ declare const useClasses_131: (classesProp?: Partial<Record<"root", string>>, ad
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_132: (classesProp?: Partial<Record<"content" | "label" | "link" | "hide" | "expanded" | "icon" | "disabled" | "selected" | "selectable" | "unselectable" | "group" | "node" | "focused" | "expandable" | "labelIcon" | "collapsed" | "minimized" | "unselected" | "labelExpandable", string>>, addStatic?: boolean) => {
+declare const useClasses_133: (classesProp?: Partial<Record<"content" | "label" | "link" | "hide" | "expanded" | "icon" | "disabled" | "selected" | "selectable" | "unselectable" | "group" | "node" | "focused" | "expandable" | "labelIcon" | "collapsed" | "minimized" | "unselected" | "labelExpandable", string>>, addStatic?: boolean) => {
     readonly classes: {
         node: string;
         content: string;
@@ -8861,7 +8902,7 @@ declare const useClasses_132: (classesProp?: Partial<Record<"content" | "label"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_133: (classesProp?: Partial<Record<"text" | "content" | "circle" | "square" | "root" | "pulse" | "wave", string>>, addStatic?: boolean) => {
+declare const useClasses_134: (classesProp?: Partial<Record<"text" | "content" | "circle" | "square" | "root" | "pulse" | "wave", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         content: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.97.0",
+  "version": "5.98.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.5.0",
-    "@hitachivantara/uikit-react-utils": "^0.2.40",
-    "@hitachivantara/uikit-styles": "^5.48.2",
+    "@hitachivantara/uikit-react-shared": "^5.5.1",
+    "@hitachivantara/uikit-react-utils": "^0.2.41",
+    "@hitachivantara/uikit-styles": "^5.49.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "acfc9b4224682aaebdf1c171e80eb1bfc2632a47",
+  "gitHead": "3b3c13424f41d3ab57653e51d7b0108193eff962",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",