@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

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": {
+      borderColor: 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.borderSubtle}`
     },
     "& $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.cjs

@@ -51,7 +51,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { color: "currentcolor" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
             }
           ) : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })

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,
@@ -328,7 +328,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { color: "currentcolor", rotate: expanded })
+            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: expanded })
           ]
         }
       ) });

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",
@@ -127,6 +127,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     icon: {
       display: "flex",
+      alignItems: "center",
       "> 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.borderSubtle}`,
         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.borderSubtle}`
       }
     },
     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;
@@ -446,7 +438,6 @@ exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
 exports.HvBaseCheckBox = BaseCheckBox.HvBaseCheckBox;
 exports.baseRadioClasses = BaseRadio_styles.staticClasses;
 exports.HvBaseRadio = BaseRadio.HvBaseRadio;
-exports.getSelectorIcons = BaseRadio.getSelectorIcons;
 exports.baseSwitchClasses = BaseSwitch_styles.staticClasses;
 exports.HvBaseSwitch = BaseSwitch.HvBaseSwitch;
 exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;
@@ -611,14 +602,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 +625,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,
@@ -82,14 +89,14 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvCallout", props);
   const { classes, cx } = useClasses(classesProp, false);
   const { activeTheme } = uikitReactUtils.useTheme();
-  const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "inherit");
+  const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
   const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
   const actionsContent = /* @__PURE__ */ jsxRuntime.jsx(
     ActionsGeneric.HvActionsGeneric,
     {
       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/Accordion/Accordion.js

@@ -55,7 +55,7 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsx(DropUpXS, { color: "inherit", rotate: !isOpen }),
+          /* @__PURE__ */ jsx(DropUpXS, { rotate: !isOpen }),
           label
         ]
       }

package/dist/esm/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvAccordionProps\n>(function HvAccordion(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <DropUpXS color=\"inherit\" rotate={!isOpen} />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAA,oBAAC,UAAS,EAAA,OAAM,WAAU,QAAQ,CAAC,QAAQ;AAAA,UAC1C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvAccordionProps\n>(function HvAccordion(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <DropUpXS rotate={!isOpen} />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAC,oBAAA,UAAA,EAAS,QAAQ,CAAC,OAAQ,CAAA;AAAA,UAC1B;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/esm/Accordion/Accordion.styles.js

@@ -1,10 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvAccordion", {
-  root: {
-    "& + root": {
-      paddingTop: 8
-    }
-  },
+  root: {},
   hidden: { height: 0, display: "none" },
   container: { paddingTop: 8, height: "auto" },
   label: {

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n  },\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {},\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n  },\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}

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":"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"}
+{"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",