@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

package/dist/{esm/Dropdown → Dropdown}/List/List.js

@@ -4,13 +4,12 @@ import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils"
 import { theme } from "@hitachivantara/uikit-styles";
 import { useBaseDropdownContext } from "../../BaseDropdown/context.js";
 import { CounterLabel } from "../../utils/CounterLabel.js";
-import { setId } from "../../utils/setId.js";
 import { getSelected } from "../utils.js";
 import { useClasses } from "./List.styles.js";
 import { staticClasses } from "./List.styles.js";
 import { HvActionBar } from "../../ActionBar/ActionBar.js";
-import { HvButton } from "../../Button/Button.js";
 import { HvList } from "../../List/List.js";
+import { HvButton } from "../../Button/Button.js";
 import { HvInput } from "../../Input/Input.js";
 import { HvCheckBox } from "../../CheckBox/CheckBox.js";
 const clone = (values) => values.map((value) => ({ ...value }));
@@ -28,7 +27,6 @@ const HvDropdownList = (props) => {
     onCancel,
     labels,
     notifyChangesOnFirstRender = false,
-    hasTooltips = false,
     singleSelectionToggle,
     height: heightProp,
     maxHeight: maxHeightProp,
@@ -45,10 +43,6 @@ const HvDropdownList = (props) => {
   const hasChanges = useMemo(() => {
     return String(getSelectedIds(values)) !== String(getSelectedIds(list));
   }, [list, values]);
-  const newLabels = {
-    selectAll: labels?.selectAll,
-    selectionConjunction: labels?.multiSelectionConjunction
-  };
   const updateSelectAll = (listValues) => {
     if (!listValues) return;
     const nbrSelected = getSelected(listValues).length;
@@ -83,7 +77,6 @@ const HvDropdownList = (props) => {
   const renderSearch = () => /* @__PURE__ */ jsx("div", { className: classes.searchContainer, children: /* @__PURE__ */ jsx(
     HvInput,
     {
-      id: setId(id, "search"),
       type: "search",
       value: searchStr,
       placeholder: labels?.searchPlaceholder,
@@ -103,7 +96,6 @@ const HvDropdownList = (props) => {
     return /* @__PURE__ */ jsx(
       HvCheckBox,
       {
-        id: setId(id, "select-all"),
         label: /* @__PURE__ */ jsx(
           CounterLabel,
           {
@@ -128,28 +120,17 @@ const HvDropdownList = (props) => {
     }
   };
   const renderActions = () => {
-    const applyLabel = labels?.applyLabel;
-    const cancelLabel = labels?.cancelLabel;
-    return /* @__PURE__ */ jsxs(HvActionBar, { id: setId(id, "actions"), children: [
+    return /* @__PURE__ */ jsxs(HvActionBar, { children: [
       /* @__PURE__ */ jsx(
         HvButton,
         {
-          id: setId(id, "actions-apply"),
           disabled: !hasChanges,
           onClick: () => onChange(cleanHidden(list), true, true, true),
           variant: "primaryGhost",
-          children: applyLabel
+          children: labels?.applyLabel
         }
       ),
-      /* @__PURE__ */ jsx(
-        HvButton,
-        {
-          id: setId(id, "actions-cancel"),
-          onClick: onCancel,
-          variant: "primaryGhost",
-          children: cancelLabel
-        }
-      )
+      /* @__PURE__ */ jsx(HvButton, { onClick: onCancel, variant: "primaryGhost", children: labels?.cancelLabel })
     ] });
   };
   const showList = valuesExist(values);
@@ -164,7 +145,6 @@ const HvDropdownList = (props) => {
       showList && /* @__PURE__ */ jsx(
         HvList,
         {
-          id: setId(id, "list"),
           style: mergeStyles(void 0, {
             height: heightProp,
             "--maxW": maxWidth,
@@ -180,8 +160,9 @@ const HvDropdownList = (props) => {
           useSelector: multiSelect,
           showSelectAll: false,
           onChange: onSelection,
-          labels: newLabels,
-          hasTooltips,
+          labels: {
+            selectionConjunction: labels?.multiSelectionConjunction
+          },
           selectable: true,
           condensed: true,
           singleSelectionToggle,

package/dist/{esm/FileUploader → FileUploader}/DropZone/DropZone.js

@@ -14,8 +14,6 @@ import { HvFormElementContext } from "../../FormElement/context.js";
 const DEFAULT_LABELS = {
   /** Extensions of the accepted file types */
   acceptedFiles: "",
-  /** Dropzone area label. @deprecated use `label` prop instead */
-  dropzone: "Label",
   /** Size file warning label. */
   sizeWarning: "Max. file size:",
   /** Size file warning label. */
@@ -51,7 +49,7 @@ const HvDropZone = (props) => {
   const {
     id: idProp,
     classes: classesProp,
-    label,
+    label = "Label",
     labels: labelsProp,
     accept,
     maxFileSize,
@@ -84,8 +82,7 @@ const HvDropZone = (props) => {
       });
       newFile.id = uniqueId("uploaded-file-data-");
       const isSizeAllowed = file.size <= maxFileSize;
-      const isFileAccepted = !accept || accept.includes(file.type?.split("/")[1]) || // TODO: remove in v6
-      validateAccept(file, accept);
+      const isFileAccepted = !accept || validateAccept(file, accept);
       if (!isFileAccepted) {
         newFile.errorMessage = labels?.fileTypeError;
         newFile.status = "fail";
@@ -106,11 +103,9 @@ const HvDropZone = (props) => {
       HvLabelContainer,
       {
         id,
-        label: label ?? labels.dropzone,
+        label,
         description,
         inputId: setId(id, "input-file"),
-        labelId: setId(id, "input-file-label"),
-        descriptionId: setId(id, "description"),
         classes: {
           root: classes.dropZoneLabelsGroup,
           label: classes.dropZoneLabel
@@ -120,7 +115,6 @@ const HvDropZone = (props) => {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        id: setId(id, "input-file-container"),
         className: cx(classes.dropZoneContainer, {
           [classes.dragAction]: dragState,
           [classes.dropZoneContainerDisabled]: disabled

package/dist/{esm/FileUploader → FileUploader}/FileList/FileList.js

@@ -1,12 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { setId } from "../../utils/setId.js";
 import { useClasses } from "./FileList.styles.js";
 import { staticClasses } from "./FileList.styles.js";
 import { HvFile } from "../File/File.js";
 const HvFileList = (props) => {
   const {
-    id,
     classes: classesProp,
     list = [],
     removeFileButtonLabel,
@@ -15,7 +13,7 @@ const HvFileList = (props) => {
   const { classes } = useClasses(classesProp);
   const hasFiles = list.length > 0;
   if (!hasFiles) return null;
-  return /* @__PURE__ */ jsx("ul", { id: setId(id, "list"), className: classes.root, children: list.map((data) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("ul", { className: classes.root, children: list.map((data) => /* @__PURE__ */ jsx(
     HvFile,
     {
       classes: { root: classes?.listItem },

package/dist/{esm/FileUploader → FileUploader}/FileUploader.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./FileUploader.styles.js";
 import { staticClasses } from "./FileUploader.styles.js";
 import { HvDropZone } from "./DropZone/DropZone.js";
@@ -23,7 +22,6 @@ const HvFileUploader = (props) => {
     maxFileSize = Infinity,
     inputProps = {},
     accept,
-    acceptedFiles = [],
     // TODO: consider adding/replacing with onFilesChange
     onFilesAdded,
     onFileRemoved,
@@ -35,11 +33,10 @@ const HvFileUploader = (props) => {
     /* @__PURE__ */ jsx(
       HvDropZone,
       {
-        id: setId(id, "dropzone"),
         label,
         labels,
         multiple,
-        accept: accept ?? acceptedFiles.join(","),
+        accept,
         maxFileSize,
         onFilesAdded,
         inputProps,
@@ -49,7 +46,6 @@ const HvFileUploader = (props) => {
     /* @__PURE__ */ jsx(
       HvFileList,
       {
-        id: setId(id, "filelist"),
         list: fileList,
         onFileRemoved,
         removeFileButtonLabel: labels?.removeFileButtonLabel

package/dist/{esm/FilterGroup → FilterGroup}/FilterContent/FilterContent.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useContext, useRef, useMemo } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
@@ -8,10 +8,10 @@ import { useClasses } from "./FilterContent.styles.js";
 import { staticClasses } from "./FilterContent.styles.js";
 import { HvFilterGroupLeftPanel } from "../LeftPanel/LeftPanel.js";
 import { HvFilterGroupRightPanel } from "../RightPanel/RightPanel.js";
-import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvBaseDropdown } from "../../BaseDropdown/BaseDropdown.js";
 import { HvActionBar } from "../../ActionBar/ActionBar.js";
+import { HvButton } from "../../Button/Button.js";
 import { HvFilterGroupCounter } from "../Counter/Counter.js";
 const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, ref) {
   const {
@@ -36,7 +36,6 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
     ...others
   } = useDefaultProps("HvFilterGroupContent", props);
   const { classes } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
   const [filterGroupOpen, setFilterGroupOpen] = useState(false);
   const {
     defaultValue,
@@ -146,7 +145,7 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
             {
               id: setId(id, "apply-button"),
               disabled: applyDisabled,
-              variant: activeTheme?.filterGroup.applyButtonVariant,
+              variant: "primary",
               onClick: onApplyHandler,
               className: classes.applyButton,
               children: labels?.applyLabel
@@ -156,7 +155,7 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
             HvButton,
             {
               id: setId(id, "cancel-button"),
-              variant: activeTheme?.filterGroup.cancelButtonVariant,
+              variant: "secondarySubtle",
               onClick: onCancelHandler,
               children: labels?.cancelLabel
             }

package/dist/{esm/FilterGroup → FilterGroup}/LeftPanel/LeftPanel.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./LeftPanel.styles.js";
 import { staticClasses } from "./LeftPanel.styles.js";
@@ -10,14 +9,13 @@ import { HvListContainer } from "../../ListContainer/ListContainer.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 const HvFilterGroupLeftPanel = ({
-  id,
   className,
   emptyElement,
   classes: classesProp
 }) => {
   const { classes } = useClasses(classesProp);
   const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
-  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { id: setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(HvPanel, { className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
     HvListItem,
     {
       className: classes.listItem,

package/dist/{esm/FilterGroup → FilterGroup}/RightPanel/RightPanel.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useContext, useMemo, useCallback, useEffect } from "react";
 import { CounterLabel } from "../../utils/CounterLabel.js";
-import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./RightPanel.styles.js";
 import { staticClasses } from "./RightPanel.styles.js";
@@ -10,7 +9,6 @@ import { HvPanel } from "../../Panel/Panel.js";
 import { HvInput } from "../../Input/Input.js";
 import { HvList } from "../../List/List.js";
 const HvFilterGroupRightPanel = ({
-  id,
   className,
   labels,
   emptyElement,
@@ -97,7 +95,6 @@ const HvFilterGroupRightPanel = ({
     return /* @__PURE__ */ jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsx(
       HvCheckBox,
       {
-        id: setId(id, "select-all"),
         label: /* @__PURE__ */ jsx(
           CounterLabel,
           {
@@ -106,7 +103,7 @@ const HvFilterGroupRightPanel = ({
             conjunctionLabel: labels?.multiSelectionConjunction
           }
         ),
-        onChange: () => handleSelectAll(),
+        onChange: handleSelectAll,
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,
         checked: allSelected
@@ -118,16 +115,14 @@ const HvFilterGroupRightPanel = ({
     allSelected,
     anySelected,
     handleSelectAll,
-    id,
-    labels,
+    labels?.multiSelectionConjunction,
     classes?.selectAllContainer,
     classes?.selectAll
   ]);
-  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "rightPanel"), className, children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(HvPanel, { className, children: listValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       HvInput,
       {
-        id: setId(id, "search"),
         classes: {
           root: classes.search
         },
@@ -141,7 +136,6 @@ const HvFilterGroupRightPanel = ({
     /* @__PURE__ */ jsx(
       HvList,
       {
-        id: setId(id, "list"),
         values: listValues,
         className: classes.list,
         multiSelect: true,
@@ -149,8 +143,7 @@ const HvFilterGroupRightPanel = ({
         showSelectAll: false,
         onChange: onChangeHandler,
         selectable: true,
-        condensed: true,
-        hasTooltips: true
+        condensed: true
       },
       activeGroup
     )

package/dist/{esm/Focus → Focus}/Focus.js

@@ -1,8 +1,7 @@
 import { useState, useRef, cloneElement } from "react";
-import { isBrowser } from "../utils/browser.js";
 import { isOneOfKeys, isKey } from "../utils/keyboardUtils.js";
 import { useClasses, staticClasses } from "./Focus.styles.js";
-import { setFocusTo, getFocusableChildren } from "./utils.js";
+import { isBrowser, setFocusTo, getFocusableChildren } from "./utils.js";
 const HvFocus = ({
   classes: classesProp,
   children,

package/dist/Focus/utils.js

@@ -0,0 +1,22 @@
+const getFocusableChildren = (el) => el?.querySelectorAll("input, button, select, textarea, a[href]") || [];
+const setFocusTo = (el) => {
+  el.focus();
+};
+const isBrowser = (browserId) => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  switch (browserId) {
+    case "firefox":
+      return userAgent.includes("firefox");
+    case "chrome":
+      return userAgent.includes("chrome") && !userAgent.includes("chromium");
+    case "safari":
+      return userAgent.includes("safari") && !userAgent.includes("chrome");
+    default:
+      return false;
+  }
+};
+export {
+  getFocusableChildren,
+  isBrowser,
+  setFocusTo
+};

package/dist/{esm/FormElement → FormElement}/Adornment/Adornment.js

@@ -28,9 +28,6 @@ const HvAdornment = forwardRef(function HvAdornment2(props, ref) {
       "aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
       className: cx(
         classes.root,
-        classes.adornment,
-        classes.icon,
-        onClick ? classes.adornmentButton : classes.adornmentIcon,
         {
           [classes.hideIcon]: !displayIcon,
           [classes.disabled]: disabled

package/dist/{esm/FormElement → FormElement}/Adornment/Adornment.styles.js

@@ -8,15 +8,7 @@ const { staticClasses, useClasses } = createClasses("HvAdornment", {
     height: 30,
     flexShrink: 0
   },
-  /** @deprecated use `classes.root` */
-  icon: {},
-  /** @deprecated use `classes.root` */
-  adornment: {},
-  /** @deprecated use `classes.root` */
-  adornmentIcon: {},
   hideIcon: { display: "none" },
-  /** @deprecated use `classes.root` */
-  adornmentButton: {},
   disabled: {}
 });
 export {

package/dist/{esm/FormElement → FormElement}/Suggestions/Suggestions.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useRef, useState, useEffect } from "react";
+import { forwardRef, useContext, useRef } from "react";
 import { ClickAwayListener } from "@mui/base/ClickAwayListener";
 import { Popper } from "@mui/base/Popper";
 import { useForkRef } from "@mui/material/utils";
@@ -16,9 +16,8 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
     id: idProp,
     className,
     classes: classesProp,
-    expanded = false,
     enablePortal,
-    open: openProp,
+    open: openProp = false,
     anchorEl,
     suggestionValues,
     onClose,
@@ -32,10 +31,6 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
   const id = idProp ?? setId(context.id, "suggestions");
   const ref = useRef(null);
   const forkedRef = useForkRef(ref, extRef);
-  const [isOpen, setIsOpen] = useState(expanded);
-  useEffect(() => {
-    setIsOpen(expanded);
-  }, [expanded]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -43,41 +38,32 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
       ref: forkedRef,
       className: cx(classes.root, className),
       ...others,
-      children: /* @__PURE__ */ jsx(
-        ClickAwayListener,
+      children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: onClose, children: /* @__PURE__ */ jsx(
+        Popper,
         {
-          onClickAway: (event) => {
-            setIsOpen(false);
-            onClose?.(event);
+          style: {
+            // @ts-ignore
+            "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
           },
+          open: openProp,
+          disablePortal: !enablePortal,
+          container: enablePortal ? getContainerElement(rootId) : void 0,
+          anchorEl,
+          className: cx(classes.popper, {
+            [classes.portal]: enablePortal
+          }),
+          ...popperProps,
           children: /* @__PURE__ */ jsx(
-            Popper,
+            HvSelectionList,
             {
-              style: {
-                // @ts-ignore
-                "--popper-width": enablePortal ? `${anchorEl?.clientWidth}px` : "100%"
-              },
-              open: openProp ?? isOpen,
-              disablePortal: !enablePortal,
-              container: enablePortal ? getContainerElement(rootId) : void 0,
-              anchorEl,
-              className: cx(classes.popper, {
-                [classes.portal]: enablePortal
-              }),
-              ...popperProps,
-              children: /* @__PURE__ */ jsx(
-                HvSelectionList,
-                {
-                  className: classes.list,
-                  id: setId(id, "list"),
-                  onChange: onSuggestionSelected,
-                  children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
-                }
-              )
+              className: classes.list,
+              id: setId(id, "list"),
+              onChange: onSuggestionSelected,
+              children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
             }
           )
         }
-      )
+      ) })
     }
   );
 });

package/dist/{esm/GlobalActions → GlobalActions}/GlobalActions.js

@@ -40,30 +40,19 @@ const HvGlobalActions = forwardRef(function HvGlobalActions2(props, ref) {
         className
       ),
       ...others,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cx(classes.wrapper, {
-            [classes.globalWrapperComplement]: variant === "global",
-            [classes.globalSectionArea]: variant === "section"
-          }),
-          children: [
-            variant === "global" && backButton && /* @__PURE__ */ jsx("div", { className: classes.backButton, children: backButton }),
-            typeof title !== "string" ? title : /* @__PURE__ */ jsx(
-              HvTypography,
-              {
-                variant: variant === "global" ? "title3" : "title4",
-                component: `h${headingLevelToApply}`,
-                className: cx(classes.name, {
-                  [classes.sectionName]: variant !== "global"
-                }),
-                children: title
-              }
-            ),
-            children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
+        variant === "global" && backButton && /* @__PURE__ */ jsx("div", { className: classes.backButton, children: backButton }),
+        typeof title !== "string" ? title : /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            variant: variant === "global" ? "title3" : "title4",
+            component: `h${headingLevelToApply}`,
+            className: classes.name,
+            children: title
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: classes.actions, children })
+      ] })
     }
   );
 });

package/dist/{esm/GlobalActions → GlobalActions}/GlobalActions.styles.js

@@ -51,16 +51,10 @@ const { staticClasses, useClasses } = createClasses("HvGlobalActions", {
     borderColor: theme.colors.border,
     paddingLeft: theme.space.sm
   },
-  /** @deprecated use classes.global $wrapper */
-  globalSectionArea: {},
-  /** @deprecated use classes.section $wrapper */
-  globalWrapperComplement: {},
   backButton: {},
   name: {
     flexGrow: 1
   },
-  /** @deprecated use classes.name */
-  sectionName: {},
   actions: {
     display: "flex",
     alignItems: "center",

package/dist/{esm/Grid → Grid}/Grid.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import MuiGrid from "@mui/material/Grid";
+import MuiGrid from "@mui/material/GridLegacy";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useWidth } from "../hooks/useWidth.js";
 import { useClasses } from "./Grid.styles.js";

package/dist/{esm/Header → Header}/Actions/Actions.styles.js

@@ -1,8 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../../Button/Button.styles.js";
-import "../../Button/Button.js";
-const { staticClasses, useClasses } = createClasses("HvHeader-Actions", {
+const { staticClasses, useClasses } = createClasses("HvHeaderActions", {
   root: {
     backgroundColor: "transparent",
     display: "flex",

package/dist/{esm/Header → Header}/Brand/Brand.styles.js

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvHeader-Brand", {
+const { staticClasses, useClasses } = createClasses("HvHeaderBrand", {
   root: { display: "flex", alignItems: "center" },
   separator: {
     width: 1,

package/dist/{esm/Header → Header}/Navigation/MenuBar/Bar.styles.js

@@ -13,7 +13,7 @@ const hide = {
   boxShadow: "none",
   transitionDuration: "300ms"
 };
-const { staticClasses, useClasses } = createClasses("HvHeader-MenuBar", {
+const { staticClasses, useClasses } = createClasses("HvHeaderMenuBar", {
   root: {
     left: 0,
     width: "100%",

package/dist/{esm/Header → Header}/Navigation/MenuItem/MenuItem.styles.js

@@ -37,32 +37,29 @@ const item = {
     }
   }
 };
-const { staticClasses, useClasses } = createClasses(
-  "HvHeader-MenuItem",
-  {
-    root: {
-      display: "inline",
-      height: "100%",
-      borderBottom: "4px solid transparent",
-      ":hover, :focus-within": {
-        backgroundColor: theme.colors.bgHover
-      }
-    },
-    menu: {},
-    menubar: {},
-    selected: {
-      color: theme.colors.text,
-      borderColor: "currentcolor"
-    },
-    item,
-    link: {
-      textDecoration: "none"
-    },
-    button: {
-      color: "inherit"
+const { staticClasses, useClasses } = createClasses("HvHeaderMenuItem", {
+  root: {
+    display: "inline",
+    height: "100%",
+    borderBottom: "4px solid transparent",
+    ":hover, :focus-within": {
+      backgroundColor: theme.colors.bgHover
     }
+  },
+  menu: {},
+  menubar: {},
+  selected: {
+    color: theme.colors.text,
+    borderColor: "currentcolor"
+  },
+  item,
+  link: {
+    textDecoration: "none"
+  },
+  button: {
+    color: "inherit"
   }
-);
+});
 export {
   staticClasses,
   useClasses

package/dist/{esm/Header → Header}/Navigation/Navigation.styles.js

@@ -1,6 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses(
-  "HvHeader-Navigation",
+  "HvHeaderNavigation",
   {
     root: {
       position: "absolute",