@hitachivantara/uikit-react-core 5.71.0 → 5.72.1

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -20,14 +20,7 @@ const HvDropdownButton = React.forwardRef((props, ref) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = DropdownButton_styles.useClasses(classesProp);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactIcons.DropDownXS,
-    {
-      iconSize: "XS",
-      style: { rotate: open ? "180deg" : void 0 },
-      className: classes.arrow
-    }
-  );
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { iconSize: "XS", style: { rotate: open ? "180deg" : void 0 } });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button.HvButton,
     {

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs

@@ -56,9 +56,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
   placeholder: {},
   arrowContainer: {
     marginRight: uikitStyles.theme.spacing(-2)
-  },
-  arrow: {
-    transition: "rotate 0.2s ease"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Header/Actions/Actions.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Actions_styles = require("./Actions.styles.cjs");
-const HvHeaderActions = (props) => {
+const HvHeaderActions = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -11,7 +12,7 @@ const HvHeaderActions = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvHeaderActions", props);
   const { classes, cx } = Actions_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+});
 exports.headerActionsClasses = Actions_styles.staticClasses;
 exports.HvHeaderActions = HvHeaderActions;

package/dist/cjs/Header/Brand/Brand.cjs

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Brand_styles = require("./Brand.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvHeaderBrand = (props) => {
+const HvHeaderBrand = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     logo,
@@ -13,11 +14,11 @@ const HvHeaderBrand = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvHeaderBrand", props);
   const { classes, cx } = Brand_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     logo,
     logo && name && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator }),
     name && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.brandName, variant: "label", children: name })
   ] });
-};
+});
 exports.headerBrandClasses = Brand_styles.staticClasses;
 exports.HvHeaderBrand = HvHeaderBrand;

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.cjs

@@ -59,11 +59,6 @@ const HvHeaderMenuItem = (props) => {
   const handleFocus = (event) => {
     dispatch?.({ type: "setItemFocused", itemFocused: event.currentTarget });
   };
-  const itemProps = {
-    onClick: actionHandler,
-    onKeyDown: actionHandler,
-    onFocus: handleFocus
-  };
   const label = /* @__PURE__ */ jsxRuntime.jsx(
     Typography.HvTypography,
     {
@@ -80,6 +75,8 @@ const HvHeaderMenuItem = (props) => {
     itemHref = href;
     itemTarget = target;
   }
+  const ItemComponent = itemHref ? "a" : "div";
+  const itemProps = itemHref ? { href: itemHref, target: itemTarget, "aria-label": item.label } : { role: "button", tabIndex: 0 };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
@@ -94,31 +91,20 @@ const HvHeaderMenuItem = (props) => {
         className
       ),
       children: [
-        itemHref ? /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ItemComponent,
           {
-            className: classes.link,
-            href: itemHref,
-            target: itemTarget,
-            ...itemProps,
+            className: cx(classes.item, {
+              [classes.link]: itemHref,
+              [classes.button]: !itemHref
+            }),
+            onFocus: handleFocus,
+            onClick: actionHandler,
+            onKeyDown: actionHandler,
             "aria-current": isCurrent,
-            "aria-label": item.label,
+            ...itemProps,
             children: label
           }
-        ) : (
-          // keeping this code path for backwards compatibility, but
-          // shouldn't really be used as it's not accessible
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: classes.button,
-              role: "button",
-              ...itemProps,
-              tabIndex: 0,
-              "aria-current": isCurrent,
-              children: label
-            }
-          )
         ),
         hasSubLevel && currentLevel < levels && currentLevel < 2 && /* @__PURE__ */ jsxRuntime.jsx(Bar.Bar, { data, type: "menu", children: data.map((itm) => /* @__PURE__ */ jsxRuntime.jsx(
           HvHeaderMenuItem,
@@ -132,8 +118,7 @@ const HvHeaderMenuItem = (props) => {
           itm.id
         )) })
       ]
-    },
-    item.label
+    }
   );
 };
 exports.headerMenuItemClasses = MenuItem_styles.staticClasses;

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.styles.cjs

@@ -21,6 +21,7 @@ const item = {
   },
   "& span": {
     display: "inline-flex",
+    color: "inherit",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "space-between"
@@ -43,57 +44,24 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   {
     root: {
       display: "inline",
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      },
-      "&:focus-within": {
+      height: "100%",
+      borderBottom: "4px solid transparent",
+      ":hover, :focus-within": {
         backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
       }
     },
-    menu: {
-      marginTop: 0,
-      paddingBottom: "4px",
-      paddingTop: "4px",
-      height: "100%",
-      borderTop: "none",
-      borderBottom: `4px solid ${uikitStyles.theme.colors.atmo2}`
-    },
-    menubar: {
-      marginTop: "0px",
-      paddingBottom: "4px",
-      paddingTop: "4px",
-      height: "100%",
-      borderTop: `0px solid ${uikitStyles.theme.colors.atmo1}`,
-      borderBottom: `${"4px"} solid ${uikitStyles.theme.colors.atmo1}`
-    },
+    menu: {},
+    menubar: {},
     selected: {
-      "&$menu": {
-        marginTop: 0,
-        paddingBottom: 0,
-        borderTop: "none",
-        borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
-        paddingTop: "4px",
-        height: "100%",
-        "& > * > span": {
-          color: uikitStyles.theme.colors.secondary
-        }
-      },
-      "&$menubar": {
-        marginTop: 0,
-        paddingBottom: 0,
-        borderTop: "none",
-        borderBottom: `4px solid ${uikitStyles.theme.colors.secondary}`,
-        paddingTop: "4px",
-        height: "100%"
-      }
+      borderColor: uikitStyles.theme.colors.secondary,
+      color: uikitStyles.theme.colors.secondary
     },
+    item,
     link: {
-      textDecoration: "none",
-      ...item
+      textDecoration: "none"
     },
     button: {
-      color: "inherit",
-      ...item
+      color: "inherit"
     }
   }
 );

package/dist/cjs/Header/Navigation/Navigation.cjs

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const useSelectionPath = require("./useSelectionPath.cjs");
 const FocusContext = require("./utils/FocusContext.cjs");
 const SelectionContext = require("./utils/SelectionContext.cjs");
 const MenuBar = require("./MenuBar/MenuBar.cjs");
-const HvHeaderNavigation = (props) => {
+const HvHeaderNavigation = React.forwardRef((props, ref) => {
   const {
     data,
     selected,
@@ -23,7 +24,7 @@ const HvHeaderNavigation = (props) => {
     event.preventDefault();
     onClick?.(event, selection);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.SelectionContext.Provider, { value: selectionPath, children: /* @__PURE__ */ jsxRuntime.jsx(FocusContext.FocusProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(
     MenuBar.HvHeaderMenuBar,
     {
       data,
@@ -33,6 +34,6 @@ const HvHeaderNavigation = (props) => {
       currentLevel: 1
     }
   ) }) }) });
-};
+});
 exports.headerNavigationClasses = Navigation_styles.staticClasses;
 exports.HvHeaderNavigation = HvHeaderNavigation;

package/dist/cjs/SimpleGrid/SimpleGrid.cjs

@@ -7,14 +7,14 @@ const HvSimpleGrid = (props) => {
   const {
     children,
     breakpoints,
-    spacing = "sm",
+    spacing,
     cols,
     className,
     classes: classesProp,
     ...others
   } = uikitReactUtils.useDefaultProps("HvSimpleGrid", props);
   const { classes, cx, css } = SimpleGrid_styles.useClasses(classesProp);
-  const containerStyle = SimpleGrid_styles.getContainerStyle({ breakpoints, spacing, cols });
+  const containerStyle = SimpleGrid_styles.getContainerStyle(breakpoints, spacing, cols);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/cjs/SimpleGrid/SimpleGrid.styles.cjs

@@ -3,13 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSimpleGrid", {
-  root: {}
-});
-function size(props) {
-  if (typeof props.size === "number") {
-    return props.size;
+  root: {
+    display: "grid",
+    boxSizing: "border-box",
+    gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
   }
-  return props.sizes[props.size] || props.size || props.sizes.md;
+});
+function getSize(size) {
+  return size || Number(uikitStyles.theme.breakpoints.values.md);
 }
 function getSortedBreakpoints(breakpoints) {
   if (breakpoints.length === 0) {
@@ -17,29 +18,23 @@ function getSortedBreakpoints(breakpoints) {
   }
   const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
   const sorted = [...breakpoints].sort(
-    (a, b) => size({ size: b[property], sizes: uikitStyles.theme.breakpoints }) - size({ size: a[property], sizes: uikitStyles.theme.breakpoints })
+    (a, b) => getSize(b[property]) - getSize(a[property])
   );
   return property === "minWidth" ? sorted.reverse() : sorted;
 }
-const getContainerStyle = ({
-  breakpoints,
-  spacing,
-  cols
-}) => {
+const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
   return {
-    boxSizing: "border-box",
-    display: "grid",
-    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+    // TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]
+    "--cols": cols,
     gap: uikitStyles.theme.space[spacing],
     ...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
       const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
-      const breakpointSize = size({
-        size: property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth,
-        sizes: uikitStyles.theme.breakpoints
-      });
-      acc[`@media (${property}: ${breakpointSize + (property === "max-width" ? 0 : 1)}px)`] = {
-        gridTemplateColumns: `repeat(${breakpoint.cols}, minmax(0, 1fr))`,
-        gap: uikitStyles.theme.space[spacing]
+      const breakpointSize = getSize(
+        property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth
+      );
+      acc[`@media (${property}: ${breakpointSize}px)`] = {
+        ["--cols"]: breakpoint.cols,
+        gap: uikitStyles.theme.space[breakpoint.spacing || spacing]
       };
       return acc;
     }, {})

package/dist/cjs/Typography/Typography.cjs

@@ -50,7 +50,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     disabled = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTypography", props);
-  const { classes, cx } = Typography_styles.useClasses(classesProp);
+  const { classes, css, cx } = Typography_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactUtils.useTheme();
   const variant = utils.mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
@@ -59,6 +59,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     {
       ref,
       className: cx(
+        css({ ...activeTheme?.typography[variant] }),
         classes.root,
         classes[variant],
         {

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

@@ -20,45 +20,44 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTypograph
     whiteSpace: "nowrap"
   },
   // variants
-  display: { ...uikitStyles.theme.typography.display },
-  title1: { ...uikitStyles.theme.typography.title1 },
-  title2: { ...uikitStyles.theme.typography.title2 },
-  title3: { ...uikitStyles.theme.typography.title3 },
-  title4: { ...uikitStyles.theme.typography.title4 },
-  body: { ...uikitStyles.theme.typography.body },
-  label: { ...uikitStyles.theme.typography.label },
-  captionLabel: { ...uikitStyles.theme.typography.captionLabel },
-  caption1: { ...uikitStyles.theme.typography.caption1 },
-  caption2: { ...uikitStyles.theme.typography.caption2 },
+  display: {},
+  title1: {},
+  title2: {},
+  title3: {},
+  title4: {},
+  body: {},
+  label: {},
+  captionLabel: {},
+  caption1: {},
+  caption2: {},
   // legacy variants
-  "5xlTitle": { ...uikitStyles.theme.typography["5xlTitle"] },
-  "4xlTitle": { ...uikitStyles.theme.typography["4xlTitle"] },
+  // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants
+  "5xlTitle": {},
+  "4xlTitle": {},
   // @ts-ignore non-existent variant
-  "3xlTitle": { ...uikitStyles.theme.typography["3xlTitle"] },
-  xxlTitle: { ...uikitStyles.theme.typography.xxlTitle },
+  "3xlTitle": {},
+  xxlTitle: {},
   xlTitle: {},
-  lTitle: { ...uikitStyles.theme.typography.lTitle },
+  lTitle: {},
   mTitle: {},
-  sTitle: { ...uikitStyles.theme.typography.sTitle },
+  sTitle: {},
   xsTitle: {},
-  xxsTitle: { ...uikitStyles.theme.typography.xxsTitle },
+  xxsTitle: {},
   sectionTitle: {
-    ...uikitStyles.theme.typography.sectionTitle,
     textTransform: "uppercase"
   },
   highlightText: {},
   normalText: {},
-  placeholderText: { ...uikitStyles.theme.typography.placeholderText },
+  placeholderText: {},
   link: {
-    ...uikitStyles.theme.typography.link,
     cursor: "pointer",
     textDecoration: "underline"
   },
-  disabledText: { ...uikitStyles.theme.typography.disabledText },
-  selectedNavText: { ...uikitStyles.theme.typography.selectedNavText },
+  disabledText: {},
+  selectedNavText: {},
   vizText: {},
-  vizTextDisabled: { ...uikitStyles.theme.typography.vizTextDisabled },
-  xsInlineLink: { ...uikitStyles.theme.typography.xsInlineLink }
+  vizTextDisabled: {},
+  xsInlineLink: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/VerticalNavigation/Actions/Action.cjs

@@ -3,11 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Action_styles = require("./Action.styles.cjs");
-const Typography = require("../../Typography/Typography.cjs");
+const Button = require("../../Button/Button.cjs");
 const HvVerticalNavigationAction = (props) => {
   const {
     className,
@@ -15,26 +14,16 @@ const HvVerticalNavigationAction = (props) => {
     id,
     label = "",
     icon,
-    onClick,
     ...others
   } = uikitReactUtils.useDefaultProps("HvVerticalNavigationAction", props);
   const { isOpen } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   const { classes, cx } = Action_styles.useClasses(classesProp);
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (!onClick || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
-        return;
-      }
-      onClick(event);
-    },
-    [onClick]
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Typography.HvTypography,
+    Button.HvButton,
     {
       id: setId.setId(id, "button"),
-      component: "div",
-      role: "button",
+      variant: "secondaryGhost",
+      icon: !isOpen,
       className: cx(
         classes.action,
         {
@@ -43,10 +32,7 @@ const HvVerticalNavigationAction = (props) => {
         },
         className
       ),
-      tabIndex: 0,
       ...!isOpen && { "aria-label": label },
-      onKeyDown: handleKeyDown,
-      onClick,
       ...others,
       children: [
         icon,

package/dist/cjs/VerticalNavigation/Actions/Action.styles.cjs

@@ -2,31 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../utils/focusUtils.cjs");
-const hover = {
-  background: uikitStyles.theme.colors.containerBackgroundHover
-};
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationAction",
   {
     action: {
       width: "100%",
-      display: "flex",
       justifyContent: "flex-start",
-      alignItems: "center",
       height: "32px",
-      color: uikitStyles.theme.colors.secondary,
-      // hover
-      "&:hover": { ...hover },
-      "&:focus": {
-        outline: "none",
-        ...hover
-      },
-      "&:focus-visible": {
-        ...focusUtils.outlineStyles
-      },
+      color: "inherit",
+      fontWeight: "inherit",
+      padding: 0,
+      border: "none",
       // cursor
-      cursor: "pointer",
       "& *": {
         cursor: "pointer"
       }

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

@@ -6,12 +6,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationActions",
   {
     root: {
-      display: "block",
-      background: uikitStyles.theme.colors.atmo1,
+      display: "flex",
+      flexDirection: "column",
       marginTop: "auto",
-      "& :not(:last-child)": {
-        marginBottom: "8px"
-      }
+      gap: uikitStyles.theme.space.xs
     },
     hide: {
       display: "none"

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

@@ -16,12 +16,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     collapseButton: {
       marginLeft: "auto",
+      color: "inherit",
       "&$minimized": {
         marginLeft: 0
       }
     },
-    backButton: {},
-    title: {}
+    backButton: {
+      color: "inherit"
+    },
+    title: {
+      color: "inherit"
+    }
   }
 );
 exports.staticClasses = staticClasses;

package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs

@@ -7,7 +7,7 @@ const useControlled = require("../../hooks/useControlled.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
 const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
-const NavigationSlider_utils = require("../NavigationSlider/utils/NavigationSlider.utils.cjs");
+const utils = require("../NavigationSlider/utils.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const NavigationSlider = require("../NavigationSlider/NavigationSlider.cjs");
@@ -199,8 +199,8 @@ const HvVerticalNavigationTree = (props) => {
     if (setParentData) setParentData(data);
   }, [data, setParentData]);
   React.useEffect(() => {
-    if (withParentData && selected && setParentItem && NavigationSlider_utils.getParentItemById(withParentData, selected)) {
-      setParentItem(NavigationSlider_utils.getParentItemById(withParentData, selected));
+    if (withParentData && selected && setParentItem && utils.getParentItemById(withParentData, selected)) {
+      setParentItem(utils.getParentItemById(withParentData, selected));
     }
   }, [withParentData, selected, setParentItem]);
   const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);

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

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationTree",
   {
     root: {
       display: "block",
-      background: uikitStyles.theme.colors.atmo1,
       overflowY: "auto"
     },
     list: {},

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, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { color: "currentcolor" })
             }
           ) : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })

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

@@ -10,9 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       alignItems: "center",
       borderLeft: `4px solid transparent`,
       minHeight: "48px",
+      color: "inherit",
       marginBottom: "8px",
       "& > button": {
         marginLeft: "auto"
+      },
+      "& .HvListItem-startAdornment .color0": {
+        fill: "currentColor"
       }
     },
     listItemSelected: {
@@ -22,7 +26,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     listItemFocus: {
       background: uikitStyles.theme.colors.atmo3
     },
-    forwardButton: {},
+    forwardButton: {
+      color: "inherit"
+    },
     listContainer: {},
     listItemDisabled: {}
   }

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

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationTreeView",
   {
     root: {
       display: "block",
-      background: uikitStyles.theme.colors.atmo1,
       padding: `0px`,
       margin: "0",
       listStyle: "none",