@hitachivantara/uikit-react-core 5.90.0 → 5.91.1

package/dist/cjs/Focus/Focus.cjs

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const browser = require("../utils/browser.cjs");
-const ConditionalWrapper = require("../utils/ConditionalWrapper.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Focus_styles = require("./Focus.styles.cjs");
 const utils = require("./utils.cjs");
@@ -18,11 +16,9 @@ const HvFocus = ({
   focusOnClick = false,
   focusDisabled = true,
   strategy = "listbox",
-  useFalseFocus = false,
   filterClass,
   navigationJump = 4
 }) => {
-  const [showFocus, setShowFocus] = React.useState(false);
   const [childFocus, setChildFocus] = React.useState();
   const [hasRunConfig, setHasRunConfig] = React.useState(false);
   const { classes, cx } = Focus_styles.useClasses(classesProp);
@@ -88,29 +84,23 @@ const HvFocus = ({
     setHasRunConfig(true);
   };
   const addFocusClass = (evt) => {
-    if (!useFalseFocus) {
-      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
-      evt.currentTarget.classList.add("HvIsFocused");
-      classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
-    }
+    classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    evt.currentTarget.classList.add("HvIsFocused");
+    classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
   };
   const removeFocusClass = () => {
-    if (!useFalseFocus) {
-      getFocuses().forEach((element) => {
-        classes.focused.split(" ").forEach((c) => element.classList.remove(c));
-        element.classList.remove("HvIsFocused");
-        classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
-      });
-    }
+    getFocuses().forEach((element) => {
+      classes.focused.split(" ").forEach((c) => element.classList.remove(c));
+      element.classList.remove("HvIsFocused");
+      classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
+    });
   };
   const onFocus = (evt) => {
     addFocusClass(evt);
-    setShowFocus(true);
     childFocus?.focus?.();
     onFocusStrategy(evt);
   };
   const onBlur = () => {
-    setShowFocus(false);
     removeFocusClass();
     onBlurStrategy();
   };
@@ -121,7 +111,6 @@ const HvFocus = ({
     setTabIndex(evt.currentTarget, 0);
     if (!focusOnClick) {
       removeFocusClass();
-      setShowFocus(false);
     }
   };
   const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {
@@ -297,11 +286,7 @@ const HvFocus = ({
     if (browser.isBrowser("firefox")) evt.preventDefault();
   };
   if (disabled) return children;
-  const focusWrapper = (childrenToWrap) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.externalReference, children: [
-    childrenToWrap,
-    showFocus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.falseFocus })
-  ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(ConditionalWrapper.ConditionalWrapper, { condition: useFalseFocus, wrapper: focusWrapper, children: React.cloneElement(children, {
+  return React.cloneElement(children, {
     className: cx(
       [classes.root, filterClass],
       {
@@ -318,7 +303,7 @@ const HvFocus = ({
     onKeyDown,
     onKeyUp,
     selected
-  }) });
+  });
 };
 exports.focusClasses = Focus_styles.staticClasses;
 exports.HvFocus = HvFocus;

package/dist/cjs/Focus/Focus.styles.cjs

@@ -21,23 +21,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFocus", {
       ...focusUtils.outlineStyles
     }
   },
-  externalReference: {
-    position: "relative"
-  },
-  falseFocus: {
-    width: "98%",
-    height: "98%",
-    position: "absolute",
-    zIndex: "1",
-    ...focusUtils.outlineStyles,
-    "@media (-webkit-min-device-pixel-ratio:0)": {
-      ...focusUtils.outlineStyles
-    },
-    top: 0,
-    left: "0.5%",
-    backgroundColor: "transparent",
-    pointerEvents: "none"
-  },
   focus: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Footer/Footer.styles.cjs

@@ -7,7 +7,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    padding: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`,
+    gap: uikitStyles.theme.space.xs,
+    padding: uikitStyles.theme.spacing("xs", "sm"),
     height: 40,
     bottom: 0,
     zIndex: uikitStyles.theme.zIndices.base,
@@ -26,7 +27,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
     width: 1,
     height: 16,
     backgroundColor: uikitStyles.theme.colors.text,
-    margin: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`
+    margin: uikitStyles.theme.spacing("xs", "sm")
   },
   small: {
     "&$root": {
@@ -34,17 +35,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
       flexDirection: "column",
       padding: uikitStyles.theme.space.xs
     },
-    "& $name": {
-      marginBottom: uikitStyles.theme.space.xs
-    },
     "& $rightContainer": {
-      flexDirection: "column",
-      textAlign: "center",
-      marginLeft: "unset"
-    },
-    "& $copyright": {
-      flexDirection: "column",
-      marginBottom: uikitStyles.theme.space.xs
+      display: "contents"
     },
     "& $separator": { display: "none" }
   }

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

@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader",
     alignItems: "center",
     width: "100%",
     height: "100%",
-    padding: `0 ${uikitStyles.theme.space.sm}`,
+    padding: uikitStyles.theme.spacing(0, "sm"),
     "& > *:not(nav)": {
       zIndex: 2
     }

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -80,7 +80,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       ref,
       inputRef,
       classes: {
-        root: classes.inputRoot,
+        inputRoot: classes.inputRoot,
         input: classes.input
       },
       inputProps: {
@@ -99,7 +99,6 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
     Button.HvButton,
     {
       variant: "secondaryGhost",
-      overrideIconColors: false,
       endIcon: /* @__PURE__ */ jsxRuntime.jsx(
         uikitReactIcons.Edit,
         {

package/dist/cjs/InlineEditor/InlineEditor.styles.cjs

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEdi
     color: uikitStyles.theme.colors.textDisabled
   },
   button: {
-    padding: uikitStyles.theme.spacing("6px", "8px", "5px", "8px"),
+    padding: uikitStyles.theme.spacing(0, "xs"),
     minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -17,10 +17,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
     borderRadius: uikitStyles.theme.radii.base,
     "& $button": {
       minWidth: 32,
-      width: "100%",
       maxWidth: 200,
       padding: 0,
-      flex: "1 1 auto",
+      flex: "1 1 0%",
       borderColor: "inherit",
       borderRadius: 0,
       fontWeight: uikitStyles.theme.typography.body.fontWeight,
@@ -53,8 +52,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       "&$selected": {
         backgroundColor: uikitStyles.theme.colors.bgContainer,
         fontWeight: uikitStyles.theme.typography.label.fontWeight,
-        borderRadius: "inherit",
-        borderColor: uikitStyles.theme.colors.text,
+        borderColor: "currentcolor",
         zIndex: 2,
         "&:hover:not(:disabled),&:focus-visible": {
           backgroundColor: uikitStyles.theme.colors.bgHover
@@ -103,20 +101,25 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   selected: {},
   vertical: {
     flexDirection: "column",
+    alignItems: "stretch",
     height: "auto",
     borderColor: `transparent ${uikitStyles.theme.colors.border}`,
     "& $button": {
       minWidth: 32,
-      width: "100%",
+      flex: "1 1 32px",
       "&$firstButton": {
         borderTopColor: uikitStyles.theme.colors.border,
         borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit"
+        borderTopRightRadius: "inherit",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
       },
       "&$lastButton": {
         borderBottomColor: uikitStyles.theme.colors.border,
         borderBottomLeftRadius: "inherit",
-        borderBottomRightRadius: "inherit"
+        borderBottomRightRadius: "inherit",
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -124,8 +127,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       },
       "&$selected": {
         height: 32,
-        width: "calc(100% + 2px)",
-        borderColor: uikitStyles.theme.colors.text
+        borderColor: "currentcolor"
       }
     }
   },

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -6,7 +6,6 @@ const Input_styles = require("../Input/Input.styles.cjs");
 require("../Input/Input.cjs");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
-const hoverColor = uikitStyles.theme.colors.bgHover;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {
@@ -32,7 +31,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
       backgroundColor: "transparent",
       height: "24px",
       "&:focus, &:focus-within, &:hover": {
-        backgroundColor: hoverColor
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     }
   },
@@ -108,7 +107,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
         borderRadius: uikitStyles.theme.radii.base,
         MozAppearance: "textfield",
         "&:focus": {
-          backgroundColor: hoverColor
+          backgroundColor: uikitStyles.theme.colors.bgHover
         },
         "&:hover": {
           cursor: "pointer"

package/dist/cjs/QueryBuilder/QueryBuilder.styles.cjs

@@ -77,9 +77,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
   /** Styles applied to the action button container. */
   actionButtonContainer: {
     marginLeft: "auto",
-    "&>*": {
-      marginLeft: uikitStyles.theme.space.sm
-    }
+    display: "flex",
+    gap: uikitStyles.theme.space.sm
   },
   /** Styles applied to the top action button container. */
   topActionButtonContainer: {

package/dist/cjs/Radio/Radio.styles.cjs

@@ -20,12 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     cursor: "not-allowed",
     "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
-  radio: {
-    "& svg": {
-      outline: "none",
-      boxShadow: "none"
-    }
-  },
+  radio: {},
   invalidRadio: {},
   label: {
     verticalAlign: "middle",

package/dist/cjs/Select/Select.cjs

@@ -200,7 +200,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
                 style: {
                   width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
                 },
-                className: cx(classes.panel, className, {
+                className: cx(classes.panel, {
                   [classes.panelOpenedUp]: placement.includes("top"),
                   [classes.panelOpenedDown]: placement.includes("bottom")
                 }),

package/dist/cjs/Select/Select.styles.cjs

@@ -22,7 +22,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   description: {},
   select: {},
   popper: {
-    zIndex: uikitStyles.theme.zIndices.popover
+    zIndex: uikitStyles.theme.zIndices.popover,
+    "--r": uikitStyles.theme.radii.base,
+    "&[data-popper-placement*='top'] $panel": {
+      borderRadius: `var(--r) var(--r) 0 0`
+    },
+    "&[data-popper-placement*='bottom'] $panel": {
+      borderRadius: `0 0 var(--r) var(--r)`
+    }
   },
   panel: {
     maxHeight: 400,
@@ -36,12 +43,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
     overflowY: "auto",
     borderRadius: "inherit"
   },
-  panelOpenedUp: {
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`
-  },
-  panelOpenedDown: {
-    borderRadius: `0 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-  },
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedUp: {},
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedDown: {},
   error: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Skeleton/Skeleton.cjs

@@ -25,17 +25,14 @@ const HvSkeleton = (props) => {
       className: cx(
         classes.root,
         classes[variant],
-        animation && classes[animation],
+        classes[animation],
         className
       ),
       style: {
         width,
         height,
         ...backgroundImage && {
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundSize: "contain",
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat"
+          background: `center / contain no-repeat url(${backgroundImage})`
         },
         ...style
       },

package/dist/cjs/Slider/Slider.styles.cjs

@@ -32,7 +32,7 @@ const dragSquare = {
 const ring = {
   width: "32px",
   height: "32px",
-  borderRadius: uikitStyles.theme.radii.circle,
+  borderRadius: uikitStyles.theme.radii.full,
   border: `9px solid ${uikitStyles.theme.colors.primaryDimmed}`,
   opacity: "100%",
   content: "''",
@@ -43,7 +43,7 @@ const ring = {
 const border = {
   width: "20px",
   height: "20px",
-  borderRadius: uikitStyles.theme.radii.circle,
+  borderRadius: uikitStyles.theme.radii.full,
   border: `2px solid ${uikitStyles.theme.colors.textDimmed}`,
   content: "''",
   position: "absolute",
@@ -93,7 +93,7 @@ const sliderStyles = {
   knobOuter: {
     position: "relative",
     borderColor: "transparent",
-    borderRadius: uikitStyles.theme.radii.circle,
+    borderRadius: uikitStyles.theme.radii.full,
     boxShadow: "none",
     backgroundColor: uikitStyles.theme.colors.border,
     width: "32px",

package/dist/cjs/Slider/SliderInput/SliderInput.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const SliderInput_styles = require("./SliderInput.styles.cjs");
@@ -32,8 +31,8 @@ const HvSliderInput = ({
   React.useEffect(() => {
     setInputValues(utils.knobsValuesToString(valuesProp, markDigits));
   }, [markDigits, valuesProp]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.inputRoot, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
-    index !== 0 && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Remove, { color: disabled ? "textDisabled" : void 0 }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    index !== 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "—" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Input.HvInput,
       {

package/dist/cjs/Slider/SliderInput/SliderInput.styles.cjs

@@ -1,10 +1,16 @@
 "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("HvSliderInput", {
-  inputRoot: { display: "flex" },
-  input: { maxWidth: "50px" },
-  inputContainer: { display: "flex" }
+  root: {
+    display: "flex",
+    alignItems: "center",
+    color: uikitStyles.theme.colors.textSubtle,
+    gap: uikitStyles.theme.space.xs,
+    fontSize: 16
+  },
+  input: { maxWidth: "50px" }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Table/TableHeader/TableHeader.cjs

@@ -94,7 +94,6 @@ const HvTableHeader = React.forwardRef(
                   {
                     className: classes.sortButton,
                     icon: true,
-                    overrideIconColors: false,
                     "aria-label": "Sort",
                     ...sortButtonProps,
                     children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })

package/dist/cjs/Tag/Tag.cjs

@@ -18,20 +18,22 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     style,
     label,
     disabled,
+    size = "xs",
+    variant,
     type = "semantic",
     selectable,
     selected,
     defaultSelected = false,
+    showSelectIcon = selectable,
     color,
+    icon: iconProp,
     deleteIcon: deleteIconProp,
     onDelete,
     onClick,
     onKeyDown,
     onKeyUp,
-    // TODO: remove from API
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    deleteButtonArialLabel = "Delete tag",
-    deleteButtonProps = {},
+    deleteButtonArialLabel,
+    deleteButtonProps,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTag", props);
   const { classes, cx } = Tag_styles.useClasses(classesProp);
@@ -43,7 +45,11 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     event.stopPropagation();
     onDelete?.(event);
   };
-  const backgroundColor = type === "semantic" && uikitStyles.getColor(color, "neutral_20") || type === "categorical" && uikitStyles.theme.alpha(uikitStyles.getColor(color, "cat1"), 0.2) || void 0;
+  const tagColor = (
+    // backwards-compatibility for `type` prop
+    type === "categorical" && uikitStyles.theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches
+    uikitStyles.theme.palette[color]?.[600] || uikitStyles.getColor(color)
+  );
   const isClickable = !!(onClick || onDelete || selectable);
   const CheckboxIcon = isSelected ? uikitReactIcons.CheckboxCheck : uikitReactIcons.Checkbox;
   const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
@@ -68,12 +74,14 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       disabled,
       "data-color": color,
       style: uikitReactUtils.mergeStyles(style, {
-        "--bgColor": backgroundColor
+        "--tagColor": tagColor
       }),
-      className: cx(classes.root, classes.chipRoot, className, {
-        [classes.disabled]: disabled,
-        [classes.selected]: isSelected,
+      className: cx(classes.root, classes.chipRoot, classes[size], className, {
+        [classes.hasIcon]: iconProp || selectable && showSelectIcon,
         [classes.clickable]: isClickable && !disabled,
+        [classes.selected]: isSelected,
+        [classes.disabled]: disabled,
+        [classes.outlined]: variant === "outlined",
         [classes.categorical]: type === "categorical",
         [classes.categoricalFocus]: type === "categorical" && !disabled,
         [classes.categoricalDisabled]: type === "categorical" && disabled
@@ -92,7 +100,8 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       selected: isClickable && isSelected,
       ...others,
       children: [
-        selectable && type === "semantic" && /* @__PURE__ */ jsxRuntime.jsx(
+        iconProp,
+        selectable && showSelectIcon && /* @__PURE__ */ jsxRuntime.jsx(
           CheckboxIcon,
           {
             className: classes.icon,

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

@@ -9,24 +9,51 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     justifyContent: "center",
     cursor: "default",
     color: uikitStyles.theme.colors.textDark,
-    backgroundColor: "var(--bgColor)",
-    height: 16,
+    borderColor: uikitStyles.theme.colors.border,
     borderRadius: 0,
     maxWidth: 180,
     whiteSpace: "nowrap",
-    ":hover, :focus": {
-      backgroundColor: "var(--bgColor)"
+    transition: "background-color 0.3s ease",
+    "&,:hover,:focus-visible": {
+      backgroundColor: "var(--tagColor)"
     }
   },
+  hasIcon: {
+    paddingLeft: 2
+  },
+  /** @deprecated */
+  outlined: {
+    outlineStyle: "solid"
+  },
+  /** @deprecated */
   categorical: {
     borderRadius: 8,
     "& $label": {
       color: uikitStyles.theme.colors.text
+    },
+    "& $icon": {
+      display: "none"
+    }
+  },
+  xs: {
+    height: 16
+  },
+  sm: {
+    height: 24,
+    "& $label": {
+      ...uikitStyles.theme.typography.caption1,
+      color: "inherit"
+    }
+  },
+  md: {
+    height: 32,
+    "& $label": {
+      ...uikitStyles.theme.typography.body,
+      color: "inherit"
     }
   },
   disabled: {
-    backgroundColor: uikitStyles.theme.colors.bgDisabled,
-    ":hover, :focus": {
+    "&,:hover,:focus-visible": {
       backgroundColor: uikitStyles.theme.colors.bgDisabled
     },
     "& $label": {
@@ -48,10 +75,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
   clickable: {
     cursor: "pointer"
   },
+  // TODO: remove in favour of `hasIcon` once it's no longer needed
   icon: {
     width: 12,
-    height: 12,
-    marginLeft: 2
+    height: 12
   },
   /** @deprecated use `root` instead */
   chipRoot: {},

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

@@ -23,7 +23,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTimePicke
   dropdownHeaderOpen: {},
   dropdownHeaderInvalid: {
     "&,:hover": {
-      border: `1px solid ${uikitStyles.theme.form.errorColor}`
+      borderColor: uikitStyles.theme.form.errorColor
     }
   },
   dropdownPanel: {},

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

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip",
     },
     "& $title": {
       padding: "15px 20px",
-      borderBottom: `3px solid ${uikitStyles.theme.colors.borderStrong}`
+      borderBottom: `3px solid ${uikitStyles.theme.colors.borderSubtle}`
     },
     "& $valuesContainer": {
       padding: uikitStyles.theme.space.sm

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/TreeView/TreeViewItem.cjs

@@ -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

@@ -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

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
         padding: uikitStyles.theme.space.sm
       },
       "& > :not(nav:first-of-type)": {
-        borderTop: `3px solid ${uikitStyles.theme.colors.borderStrong}`,
+        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.borderStrong}`
+        borderBottom: `3px solid ${uikitStyles.theme.colors.borderSubtle}`
       }
     },
     childData: {}