@hitachivantara/uikit-react-core 5.88.0 → 5.90.0

package/dist/cjs/Tabs/Tab/Tab.styles.cjs

@@ -13,17 +13,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
     ...uikitStyles.theme.typography.body,
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       "&::after": {
         height: "1px",
-        backgroundColor: uikitStyles.theme.colors.atmo4
+        backgroundColor: uikitStyles.theme.colors.border
       }
     },
     "&$selected": {
       fontWeight: uikitStyles.theme.typography.label.fontWeight
     },
     "&$disabled": {
-      color: uikitStyles.theme.colors.secondary_60,
+      color: uikitStyles.theme.colors.textDisabled,
       cursor: "not-allowed",
       pointerEvents: "all",
       opacity: 1,
@@ -38,15 +38,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
       top: "calc(100% - 1px)",
       height: "1px",
       width: "100%",
-      backgroundColor: uikitStyles.theme.colors.atmo4,
+      backgroundColor: uikitStyles.theme.colors.border,
       content: "''"
     },
     // Override Mui styling: https://mui.com/material-ui/api/tab/#css
     "& .MuiTab-iconWrapper": {
       margin: 0
-    },
-    "& svg .color0": {
-      fill: "currentcolor"
     }
   },
   focusVisible: {

package/dist/cjs/Tag/Tag.cjs

@@ -96,7 +96,7 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
           CheckboxIcon,
           {
             className: classes.icon,
-            color: disabled && ["atmo3", "secondary_60"] || void 0,
+            color: disabled && ["bgPageSecondary", "textDisabled"] || void 0,
             size: "XS"
           }
         ),

package/dist/cjs/Tag/Tag.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     alignItems: "center",
     justifyContent: "center",
     cursor: "default",
-    color: uikitStyles.theme.colors.base_dark,
+    color: uikitStyles.theme.colors.textDark,
     backgroundColor: "var(--bgColor)",
     height: 16,
     borderRadius: 0,
@@ -21,16 +21,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
   categorical: {
     borderRadius: 8,
     "& $label": {
-      color: uikitStyles.theme.colors.secondary
+      color: uikitStyles.theme.colors.text
     }
   },
   disabled: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled,
     ":hover, :focus": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      backgroundColor: uikitStyles.theme.colors.bgDisabled
     },
     "& $label": {
-      color: uikitStyles.theme.colors.secondary_60
+      color: uikitStyles.theme.colors.textDisabled
     }
   },
   label: {
@@ -41,7 +41,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     width: 16,
     height: 16,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   selected: {},

package/dist/cjs/TagsInput/TagsInput.styles.cjs

@@ -15,21 +15,21 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
   },
   disabled: {
     "& $tagsList": {
-      backgroundColor: uikitStyles.theme.colors.atmo2,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
       "&,:hover": {
-        borderColor: uikitStyles.theme.colors.atmo4
+        borderColor: uikitStyles.theme.colors.border
       }
     }
   },
   readOnly: {
     "& $tagsList": {
-      backgroundColor: uikitStyles.theme.colors.atmo2,
+      backgroundColor: uikitStyles.theme.colors.bgPage,
       "&,:hover": {
-        borderColor: uikitStyles.theme.colors.secondary_60
+        borderColor: uikitStyles.theme.colors.textDisabled
       }
     }
   },
-  resizable: { width: "auto", resize: "both", overflow: "auto" },
+  resizable: { width: "auto", resize: "both", clear: "both", overflow: "auto" },
   invalid: {},
   labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
   label: {},
@@ -53,9 +53,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     position: "relative",
     flexDirection: "row",
     flexWrap: "wrap",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderWidth: 1,
-    borderColor: uikitStyles.theme.colors.secondary_80,
+    borderColor: uikitStyles.theme.colors.textSubtle,
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
       borderColor: uikitStyles.theme.colors.primary
@@ -66,11 +66,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     "&$singleLine": {
       flexWrap: "nowrap"
     },
-    "&$error": {
-      borderColor: uikitStyles.theme.colors.negative_120
-    },
-    "&$invalid": {
-      borderColor: uikitStyles.theme.colors.negative_120
+    "&$error, $invalid": {
+      borderColor: uikitStyles.theme.form.errorColor
     }
   },
   /** @deprecated use `classes.input` instead */

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -169,7 +169,7 @@ const HvTimePicker = React.forwardRef(
               adornment: /* @__PURE__ */ jsxRuntime.jsx(
                 uikitReactIcons.Time,
                 {
-                  color: disabled ? "secondary_60" : void 0,
+                  color: disabled ? "textDisabled" : void 0,
                   className: classes.icon
                 }
               ),

package/dist/cjs/TimePicker/TimePicker.styles.cjs

@@ -17,14 +17,13 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTimePicke
     gap: 1
   },
   placeholderDisabled: {
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   dropdownHeader: {},
   dropdownHeaderOpen: {},
   dropdownHeaderInvalid: {
-    border: `1px solid ${uikitStyles.theme.colors.negative_120}`,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    "&,:hover": {
+      border: `1px solid ${uikitStyles.theme.form.errorColor}`
     }
   },
   dropdownPanel: {},

package/dist/cjs/Tooltip/Tooltip.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip",
       display: "flex",
       width: "fit-content",
       maxWidth: 532,
-      backgroundColor: uikitStyles.theme.colors.atmo1,
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
       boxShadow: uikitStyles.theme.colors.shadow,
       padding: 0,
       "& p": {
@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip",
     },
     "& $title": {
       padding: "15px 20px",
-      borderBottom: `3px solid ${uikitStyles.theme.colors.atmo2}`
+      borderBottom: `3px solid ${uikitStyles.theme.colors.borderStrong}`
     },
     "& $valuesContainer": {
       padding: uikitStyles.theme.space.sm

package/dist/cjs/TreeView/TreeItem/TreeItem.styles.cjs

@@ -28,24 +28,24 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTreeItem"
     cursor: "pointer",
     WebkitTapHighlightColor: "transparent",
     "&:hover:not($disabled)": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   expanded: {},
   selected: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   },
   focused: {
-    backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+    backgroundColor: uikitStyles.theme.colors.bgHover,
     "&:focus-visible": {
       ...focusUtils.outlineStyles
     }
   },
   disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     "& $label": {
-      color: uikitStyles.theme.colors.secondary_60
+      color: uikitStyles.theme.colors.textDisabled
     }
   },
   label: {

package/dist/cjs/Typography/Typography.styles.cjs

@@ -4,10 +4,11 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTypography", {
   root: {
-    fontFamily: uikitStyles.theme.fontFamily.body
+    fontFamily: uikitStyles.theme.fontFamily.body,
+    color: "inherit"
   },
   disabled: {
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   isLink: {
     cursor: "pointer",

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs

@@ -14,17 +14,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       marginBottom: "8px",
       "& > button": {
         marginLeft: "auto"
-      },
-      "& .HvListItem-startAdornment .color0": {
-        fill: "currentColor"
       }
     },
     listItemSelected: {
-      background: uikitStyles.theme.colors.atmo3,
-      borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+      borderLeft: `4px solid ${uikitStyles.theme.colors.text}`
     },
     listItemFocus: {
-      background: uikitStyles.theme.colors.atmo3
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary
     },
     forwardButton: {
       color: "inherit"

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -310,7 +310,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                     {
                       variant: "square",
                       size: "xs",
-                      backgroundColor: "secondary_80",
+                      backgroundColor: "textSubtle",
                       children: payload?.label?.substring(0, 1)
                     }
                   ) : useIcons && icon,

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -6,11 +6,11 @@ const focusUtils = require("../../utils/focusUtils.cjs");
 const Avatar_styles = require("../../Avatar/Avatar.styles.cjs");
 require("../../Avatar/Avatar.cjs");
 const selected = {
-  background: uikitStyles.theme.colors.atmo3,
-  borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`
+  background: uikitStyles.theme.colors.bgPageSecondary,
+  borderLeft: `4px solid ${uikitStyles.theme.colors.text}`
 };
 const hover = {
-  background: uikitStyles.theme.colors.containerBackgroundHover
+  background: uikitStyles.theme.colors.bgHover
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationTreeViewItem",
@@ -42,7 +42,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       width: "100%",
       display: "flex",
       justifyContent: "flex-start",
-      color: "inherit",
       alignItems: "center",
       height: "32px",
       borderLeft: `4px solid transparent`,
@@ -128,9 +127,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     icon: {
       display: "flex",
-      "& .color0": {
-        fill: "currentColor"
-      },
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)"
       },

package/dist/cjs/VerticalNavigation/VerticalNavigation.styles.cjs

@@ -10,14 +10,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       flexDirection: "column",
       justifyContent: "flex-start",
       width: "220px",
-      backgroundColor: uikitStyles.theme.colors.atmo1,
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
       boxShadow: uikitStyles.theme.colors.shadow,
       clipPath: "inset(0px -12px 0px 0px)",
       "& > :only-child": {
         padding: uikitStyles.theme.space.sm
       },
       "& > :not(nav:first-of-type)": {
-        borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
+        borderTop: `3px solid ${uikitStyles.theme.colors.borderStrong}`,
         padding: uikitStyles.theme.spacing("xs", "sm", "sm", "sm")
       },
       "& > :first-of-type:not(:last-child)": {
@@ -39,7 +39,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     slider: {
       "& > div:first-of-type": {
-        borderBottom: `3px solid ${uikitStyles.theme.colors.atmo2}`
+        borderBottom: `3px solid ${uikitStyles.theme.colors.borderStrong}`
       }
     },
     childData: {}

package/dist/cjs/index.cjs

@@ -16,9 +16,7 @@ const useWidth = require("./hooks/useWidth.cjs");
 const Provider = require("./providers/Provider.cjs");
 const ThemeProvider = require("./providers/ThemeProvider.cjs");
 const generic = require("./types/generic.cjs");
-const withTooltip = require("./hocs/withTooltip.cjs");
 const browser = require("./utils/browser.cjs");
-const checkValidHexColorValue = require("./utils/checkValidHexColorValue.cjs");
 const focusableElementFinder = require("./utils/focusableElementFinder.cjs");
 const focusUtils = require("./utils/focusUtils.cjs");
 const getComponentName = require("./utils/getComponentName.cjs");
@@ -26,12 +24,10 @@ const hexToRgbA = require("./utils/hexToRgbA.cjs");
 const iconVariant = require("./utils/iconVariant.cjs");
 const keyboardUtils = require("./utils/keyboardUtils.cjs");
 const multiSelectionEventHandler = require("./utils/multiSelectionEventHandler.cjs");
-const Random = require("./utils/Random.cjs");
 const setId = require("./utils/setId.cjs");
 const sizes = require("./utils/sizes.cjs");
 const theme = require("./utils/theme.cjs");
 const useSavedState = require("./utils/useSavedState.cjs");
-const wrapperTooltip = require("./utils/wrapperTooltip.cjs");
 const helpers = require("./utils/helpers.cjs");
 const utils = require("./Typography/utils.cjs");
 const Typography_styles = require("./Typography/Typography.styles.cjs");
@@ -236,6 +232,8 @@ const Table_styles = require("./Table/Table.styles.cjs");
 const Table = require("./Table/Table.cjs");
 const TableContainer_styles = require("./Table/TableContainer/TableContainer.styles.cjs");
 const TableContainer = require("./Table/TableContainer/TableContainer.cjs");
+const TableSection_styles = require("./Table/TableSection/TableSection.styles.cjs");
+const TableSection = require("./Table/TableSection/TableSection.cjs");
 const TableBody_styles = require("./Table/TableBody/TableBody.styles.cjs");
 const TableBody = require("./Table/TableBody/TableBody.cjs");
 const TableHead_styles = require("./Table/TableHead/TableHead.styles.cjs");
@@ -302,9 +300,8 @@ const TreeView$1 = require("./VerticalNavigation/TreeView/TreeView.cjs");
 const TreeViewItem_styles = require("./VerticalNavigation/TreeView/TreeViewItem.styles.cjs");
 const TreeViewItem = require("./VerticalNavigation/TreeView/TreeViewItem.cjs");
 const VerticalNavigationContext = require("./VerticalNavigation/VerticalNavigationContext.cjs");
-const TableSection_styles = require("./TableSection/TableSection.styles.cjs");
-const TableSection = require("./TableSection/TableSection.cjs");
 const IconButton = require("./IconButton/IconButton.cjs");
+const IconContainer = require("./IconContainer/IconContainer.cjs");
 const Skeleton_styles = require("./Skeleton/Skeleton.styles.cjs");
 const Skeleton = require("./Skeleton/Skeleton.cjs");
 const uikitReactShared = require("@hitachivantara/uikit-react-shared");
@@ -358,9 +355,7 @@ exports.useWidth = useWidth.useWidth;
 exports.HvProvider = Provider.HvProvider;
 exports.HvThemeProvider = ThemeProvider.HvThemeProvider;
 exports.fixedForwardRef = generic.fixedForwardRef;
-exports.withTooltip = withTooltip.withTooltip;
 exports.isBrowser = browser.isBrowser;
-exports.checkValidHexColorValue = checkValidHexColorValue.checkValidHexColorValue;
 exports.getFirstAndLastFocus = focusableElementFinder.getFirstAndLastFocus;
 exports.getFocusableList = focusableElementFinder.getFocusableList;
 exports.getPrevNextFocus = focusableElementFinder.getPrevNextFocus;
@@ -372,7 +367,6 @@ exports.isDeleteKey = keyboardUtils.isDeleteKey;
 exports.isKey = keyboardUtils.isKey;
 exports.isOneOfKeys = keyboardUtils.isOneOfKeys;
 exports.multiSelectionEventHandler = multiSelectionEventHandler.multiSelectionEventHandler;
-exports.Random = Random.Random;
 exports.setId = setId.setId;
 exports.setUid = setId.setUid;
 exports.decreaseSize = sizes.decreaseSize;
@@ -382,7 +376,6 @@ exports.getVarValue = theme.getVarValue;
 exports.processThemes = theme.processThemes;
 exports.setElementAttrs = theme.setElementAttrs;
 exports.useSavedState = useSavedState.useSavedState;
-exports.wrapperTooltip = wrapperTooltip.wrapperTooltip;
 exports.uniqueId = helpers.uniqueId;
 exports.typographyVariants = utils.typographyVariants;
 exports.typographyClasses = Typography_styles.staticClasses;
@@ -595,6 +588,8 @@ exports.tableClasses = Table_styles.staticClasses;
 exports.HvTable = Table.HvTable;
 exports.tableContainerClasses = TableContainer_styles.staticClasses;
 exports.HvTableContainer = TableContainer.HvTableContainer;
+exports.tableSectionClasses = TableSection_styles.staticClasses;
+exports.HvTableSection = TableSection.HvTableSection;
 exports.tableBodyClasses = TableBody_styles.staticClasses;
 exports.HvTableBody = TableBody.HvTableBody;
 exports.tableHeadClasses = TableHead_styles.staticClasses;
@@ -608,14 +603,9 @@ exports.HvTableCell = TableCell.HvTableCell;
 exports.useHvTableStyles = useHvTableStyles.useHvTableStyles;
 exports.useHvSortBy = useHvSortBy.useHvSortBy;
 exports.useHvTableSticky = useHvSticky.useHvTableSticky;
-exports.defaultGetHvPaginationProps = useHvPagination.defaultGetHvPaginationProps;
 exports.useHvPagination = useHvPagination.useHvPagination;
-exports.defaultGetToggleAllPageRowsSelectedProps = useHvRowSelection.defaultGetToggleAllPageRowsSelectedProps;
-exports.defaultGetToggleAllRowsSelectedProps = useHvRowSelection.defaultGetToggleAllRowsSelectedProps;
-exports.defaultGetToggleRowSelectedProps = useHvRowSelection.defaultGetToggleRowSelectedProps;
 exports.useHvRowSelection = useHvRowSelection.useHvRowSelection;
 exports.useHvBulkActions = useHvBulkActions.useHvBulkActions;
-exports.CellWithExpandButton = useHvRowExpand.CellWithExpandButton;
 exports.useHvRowExpand = useHvRowExpand.useHvRowExpand;
 exports.useHvHeaderGroups = useHvHeaderGroups.useHvHeaderGroups;
 exports.useHvResizeColumns = useHvResizeColumns.useHvResizeColumns;
@@ -636,7 +626,6 @@ exports.hvTextColumn = renderers.hvTextColumn;
 exports.HvDateColumnCell = DateColumnCell.HvDateColumnCell;
 exports.HvDropdownColumnCell = DropdownColumnCell.HvDropdownColumnCell;
 exports.HvProgressColumnCell = ProgressColumnCell.HvProgressColumnCell;
-exports.normalizeProgressBar = ProgressColumnCell.normalizeProgressBar;
 exports.HvSwitchColumnCell = SwitchColumnCell.HvSwitchColumnCell;
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = Tabs.HvTabs;
@@ -677,9 +666,11 @@ exports.HvVerticalNavigationTreeView = TreeView$1.HvVerticalNavigationTreeView;
 exports.treeViewItemClasses = TreeViewItem_styles.staticClasses;
 exports.HvVerticalNavigationTreeViewItem = TreeViewItem.HvVerticalNavigationTreeViewItem;
 exports.VerticalNavigationContext = VerticalNavigationContext.VerticalNavigationContext;
-exports.tableSectionClasses = TableSection_styles.staticClasses;
-exports.HvTableSection = TableSection.HvTableSection;
 exports.HvIconButton = IconButton.HvIconButton;
+exports.HvIconContainer = IconContainer.HvIconContainer;
+exports.iconContainerClasses = IconContainer.staticClasses;
+exports.staticClasses = IconContainer.staticClasses;
+exports.useClasses = IconContainer.useClasses;
 exports.skeletonClasses = Skeleton_styles.staticClasses;
 exports.HvSkeleton = Skeleton.HvSkeleton;
 Object.defineProperty(exports, "EmotionContext", {

package/dist/cjs/providers/ThemeProvider.cjs

@@ -70,23 +70,23 @@ const HvThemeProvider = ({
         success: { main: colors.positive },
         warning: { main: colors.warning },
         error: { main: colors.negative },
-        info: { main: colors.primary },
+        info: { main: colors.info },
         text: {
-          primary: colors.secondary,
-          secondary: colors.secondary_80,
-          disabled: colors.secondary_60
+          primary: colors.text,
+          secondary: colors.textSubtle,
+          disabled: colors.textDisabled
         },
         background: {
-          default: colors.atmo2,
-          paper: colors.atmo1
+          default: colors.bgPage,
+          paper: colors.bgContainer
         },
-        divider: colors.atmo4,
+        divider: colors.border,
         action: {
           active: colors.primary,
-          hover: colors.primary_80,
-          selected: colors.primary_80,
-          disabled: colors.secondary_60,
-          disabledBackground: colors.atmo3
+          hover: colors.primaryStrong,
+          selected: colors.primaryStrong,
+          disabled: colors.textDisabled,
+          disabledBackground: colors.bgDisabled
         }
       },
       components: {

package/dist/cjs/utils/Callout.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const SnackbarContent = require("@mui/material/SnackbarContent");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const iconVariant = require("./iconVariant.cjs");
+const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
+const Button = require("../Button/Button.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
+const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
+  root: {
+    position: "relative",
+    boxShadow: "none",
+    flexWrap: "nowrap",
+    padding: 0
+  },
+  success: {
+    backgroundColor: uikitStyles.theme.colors.positiveDimmed
+  },
+  warning: {
+    backgroundColor: uikitStyles.theme.colors.warningDimmed
+  },
+  error: {
+    backgroundColor: uikitStyles.theme.colors.negativeDimmed
+  },
+  info: {
+    backgroundColor: uikitStyles.theme.colors.infoDimmed
+  },
+  accent: {
+    backgroundColor: uikitStyles.theme.colors.accentDimmed
+  },
+  default: {
+    backgroundColor: uikitStyles.theme.colors.infoDimmed
+  },
+  message: {
+    display: "flex",
+    alignItems: "center",
+    padding: 0,
+    color: uikitStyles.theme.colors.textDark
+  },
+  messageContent: {
+    textWrap: "balance",
+    overflow: "hidden",
+    wordBreak: "break-word"
+  },
+  messageIcon: {},
+  messageTitle: {
+    display: "block",
+    fontWeight: uikitStyles.theme.fontWeights.semibold
+  },
+  action: {
+    marginRight: 0
+  },
+  actionContent: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "space-between",
+    gap: uikitStyles.theme.space.xs
+  },
+  actionCustom: {
+    flex: "0 0 auto"
+  },
+  actionClose: {
+    alignSelf: "flex-end"
+  }
+});
+const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    title,
+    showClose,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    onAction,
+    actionsPosition: actionsPositionProp = "auto",
+    children,
+    actionProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvCallout", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "inherit");
+  const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
+  const actionsContent = /* @__PURE__ */ jsxRuntime.jsx(
+    ActionsGeneric.HvActionsGeneric,
+    {
+      id,
+      className: classes.actionCustom,
+      variant: activeTheme?.snackbar.actionButtonVariant,
+      actions,
+      onAction
+    }
+  );
+  const showCustomActions = actions && actionsPosition === "bottom-right";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SnackbarContent__default.default,
+    {
+      ref,
+      id,
+      classes: {
+        root: cx(classes.root, classes[variant], className),
+        message: classes.message,
+        action: classes.action
+      },
+      message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.messageIcon, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContent, children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("b", { className: classes.messageTitle, children: title }),
+          children
+        ] }),
+        actions && actionsPosition === "inline" && actionsContent
+      ] }),
+      action: (showClose || showCustomActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actionContent, children: [
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          Button.HvButton,
+          {
+            icon: true,
+            className: classes.actionClose,
+            variant: "semantic",
+            "aria-label": "Close",
+            onClick: (evt) => onClose?.(evt, "clickaway"),
+            ...actionProps,
+            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { size: "XS" })
+          }
+        ),
+        showCustomActions && actionsContent
+      ] }),
+      ...others
+    }
+  );
+});
+exports.HvCallout = HvCallout;

package/dist/cjs/utils/iconVariant.cjs

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const iconVariant = (variant, color, semantic) => {
+const iconVariant = (variant, color) => {
   switch (variant) {
     case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color, semantic: semantic && "positive" });
+      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color });
     case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Caution, { color, semantic: semantic && "warning" });
+      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Caution, { color });
     case "error":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { color, semantic: semantic && "negative" });
+      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { color });
     case "info":
       return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color });
     default:

package/dist/esm/ActionBar/ActionBar.styles.js

@@ -4,7 +4,7 @@ const { staticClasses, useClasses } = createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: theme.space.sm,
-    borderTop: `1px solid ${theme.colors.atmo4}`,
+    borderTop: `1px solid ${theme.colors.border}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/esm/ActionBar/ActionBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.js","sources":["../../../src/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAAA;AAEpB,CAAC;"}
+{"version":3,"file":"ActionBar.styles.js","sources":["../../../src/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.border}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAAA;AAEpB,CAAC;"}