@hitachivantara/uikit-react-core 5.89.0 → 5.90.0

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

@@ -15,17 +15,17 @@ 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
       }
     }
   },
@@ -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

@@ -8,7 +8,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTypograph
     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

@@ -17,11 +17,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       }
     },
     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",

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");
@@ -359,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;
@@ -373,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;
@@ -383,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;
@@ -611,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;
@@ -639,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;

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

@@ -11,7 +11,7 @@ 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, staticClasses } = uikitReactUtils.createClasses("HvCallout", {
+const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
   root: {
     position: "relative",
     boxShadow: "none",
@@ -19,32 +19,38 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvCallout",
     padding: 0
   },
   success: {
-    backgroundColor: uikitStyles.theme.colors.positive_20
+    backgroundColor: uikitStyles.theme.colors.positiveDimmed
   },
   warning: {
-    backgroundColor: uikitStyles.theme.colors.warning_20
+    backgroundColor: uikitStyles.theme.colors.warningDimmed
   },
   error: {
-    backgroundColor: uikitStyles.theme.colors.negative_20
+    backgroundColor: uikitStyles.theme.colors.negativeDimmed
+  },
+  info: {
+    backgroundColor: uikitStyles.theme.colors.infoDimmed
+  },
+  accent: {
+    backgroundColor: uikitStyles.theme.colors.accentDimmed
   },
   default: {
-    backgroundColor: uikitStyles.theme.colors.neutral_20
+    backgroundColor: uikitStyles.theme.colors.infoDimmed
   },
   message: {
     display: "flex",
     alignItems: "center",
     padding: 0,
-    color: uikitStyles.theme.colors.base_dark
+    color: uikitStyles.theme.colors.textDark
   },
   messageContent: {
     textWrap: "balance",
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {
-    "& svg .color0": {
-      fill: "inherit"
-    }
+  messageIcon: {},
+  messageTitle: {
+    display: "block",
+    fontWeight: uikitStyles.theme.fontWeights.semibold
   },
   action: {
     marginRight: 0
@@ -68,6 +74,7 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
     id,
     classes: classesProp,
     className,
+    title,
     showClose,
     showIcon,
     customIcon,
@@ -89,7 +96,7 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
     {
       id,
       className: classes.actionCustom,
-      variant: showClose ? "semantic" : activeTheme?.snackbar.actionButtonVariant,
+      variant: activeTheme?.snackbar.actionButtonVariant,
       actions,
       onAction
     }
@@ -107,7 +114,10 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
       },
       message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.messageIcon, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.messageContent, children }),
+        /* @__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: [
@@ -130,5 +140,3 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
   );
 });
 exports.HvCallout = HvCallout;
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

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;"}

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -63,7 +63,7 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
-    const iconColor = variant === "semantic" && "base_dark" || void 0;
+    const iconColor = variant === "semantic" && "textDark" || void 0;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
       /* @__PURE__ */ jsx(

package/dist/esm/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const iconColor = (variant === \"semantic\" && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n});\n"],"names":["HvActionsGeneric"],"mappings":";;;;;;;;;;AAoEO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,qBAAqB,GAAG,kBAAkB,IACzD,yBAAyB,CAAC;AAE5B,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEI,MAAA,CAAC,MAAM,QAAQ,OAAO,EAAU,QAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,UAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IACL;AAEA,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAAA;AAIJ,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAEJ;AAEA,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAE9C,UAAA,YAAa,YAAY,cAAc,eAAgB;AAE7D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAM,oBAAC,qBAAoB,EAAA,OAAO,UAAW,CAAA;AAAA,UAC7C,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WAAW;AACX,2BAAA,OAAO,UAAU,IAAI,MAAyB;AAC7D,kCAAsB,OAAO,MAAM;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AAEM,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAC5D;AAEJ,CAAC;"}
+{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const iconColor = (variant === \"semantic\" && \"textDark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n});\n"],"names":["HvActionsGeneric"],"mappings":"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"}

package/dist/esm/AppSwitcher/Action/Action.js

@@ -22,8 +22,8 @@ const HvAppSwitcherAction = ({
   const { classes, cx } = useClasses(classesProp);
   const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = getColor(
-    disabled ? "secondary_60" : application?.color,
-    "secondary"
+    disabled ? "textDisabled" : application?.color,
+    "text"
   );
   const [validIconUrl, setValidIconUrl] = useState(true);
   const renderApplicationIcon = () => {

package/dist/esm/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"secondary_60\" : application?.color,\n    \"secondary\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}

package/dist/esm/AppSwitcher/Action/Action.styles.js

@@ -21,7 +21,7 @@ const { staticClasses, useClasses } = createClasses(
       minHeight: 52,
       padding: `6px ${theme.space.xs}`,
       border: "none",
-      borderLeft: `solid 2px ${theme.colors.secondary}`,
+      borderLeft: `2px solid currentcolor`,
       cursor: "pointer",
       textDecoration: "inherit",
       backgroundColor: "inherit",

package/dist/esm/AppSwitcher/Action/Action.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.styles.js","sources":["../../../../src/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n      color: \"inherit\",\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,gBAAgB,SAAS;AAAA,IAChE,SAAS,EAAE,OAAO,GAAG;AAAA,IACrB,UAAU,EAAE,UAAU,GAAG;AAAA,IACzB,UAAU,CAAC;AAAA,IACX,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,MAE9B,QAAQ;AAAA,MACR,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,MAE/C,QAAQ;AAAA,MAER,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MAEjB,eAAe;AAAA,QACb,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK,MAAM,MAAM,EAAE;AAAA,MAC3B,UAAU;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ;"}
+{"version":3,"file":"Action.styles.js","sources":["../../../../src/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `2px solid currentcolor`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n      color: \"inherit\",\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,gBAAgB,SAAS;AAAA,IAChE,SAAS,EAAE,OAAO,GAAG;AAAA,IACrB,UAAU,EAAE,UAAU,GAAG;AAAA,IACzB,UAAU,CAAC;AAAA,IACX,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,MAE9B,QAAQ;AAAA,MACR,YAAY;AAAA,MAEZ,QAAQ;AAAA,MAER,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MAEjB,eAAe;AAAA,QACb,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK,MAAM,MAAM,EAAE;AAAA,MAC3B,UAAU;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ;"}

package/dist/esm/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
 import { User } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
 import { decreaseSize } from "../utils/sizes.js";
@@ -17,8 +17,8 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "secondary",
-    color = "atmo1",
+    backgroundColor = "text",
+    color = "bgContainer",
     src,
     srcSet,
     sizes,
@@ -70,18 +70,15 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     inlineStyle.borderRadius = "50%";
   }
   if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = getColor(
-      backgroundColor,
-      theme.colors.secondary
-    );
-    inlineStyle.color = getColor(color, theme.colors.atmo1);
+    inlineStyle.backgroundColor = getColor(backgroundColor, "text");
+    inlineStyle.color = getColor(color, "textDimmed");
   }
   const statusInlineStyle = {};
   if (status) {
-    const statusColor = getColor(status, theme.colors.positive);
+    const statusColor = getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = getColor(badge || "", theme.colors.positive);
+  const badgeColor = getColor(badge || "", "positive");
   return /* @__PURE__ */ jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxs(
     "div",
     {