@hitachivantara/uikit-react-core 5.77.0 → 5.79.0

package/dist/cjs/Button/Button.cjs

@@ -3,28 +3,31 @@ 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 uikitStyles = require("@hitachivantara/uikit-styles");
 const generic = require("../types/generic.cjs");
 const Button_styles = require("./Button.styles.cjs");
-const mapVariant = (variant, theme) => {
-  if (theme === "ds3") return variant;
-  const deprecatedVariantMap = {
-    secondary: "secondarySubtle",
-    ghost: "primaryGhost"
-  };
-  const mappedVariant = deprecatedVariantMap[variant];
-  return mappedVariant || variant;
-};
+function parseVariant(variant) {
+  if (variant === "semantic") return ["inherit", "ghost"];
+  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "ghost") return ["primary", "ghost"];
+  if (variant === "contained" || variant === "subtle") {
+    return ["secondary", variant];
+  }
+  const result = variant.split(/(?=[A-Z])/);
+  if (!result[1]) return [result[0], "contained"];
+  return result.map((x) => x.toLowerCase());
+}
 const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
   const {
     classes: classesProp,
     children,
-    variant: variantProp,
-    // TODO - should we split into two props (color and type) in v6?
+    icon = false,
+    variant: variantProp = icon ? "secondaryGhost" : "primary",
+    color: colorProp,
     disabled = false,
     className,
     startIcon,
     endIcon,
-    icon = false,
     size,
     radius,
     overrideIconColors = true,
@@ -37,11 +40,8 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvButton", props);
   const { classes, css, cx } = Button_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactUtils.useTheme();
-  const variant = mapVariant(
-    variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.base
-  );
+  const [parsedColor, variant] = parseVariant(variantProp);
+  const color = colorProp ?? parsedColor;
   const handleClick = (e) => {
     if (disabled) return;
     onClickProp?.(e);
@@ -50,31 +50,24 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     if (disabled) return;
     onMouseDownProp?.(e);
   };
-  const [color, type] = React.useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
   const sizeStyles = React.useMemo(
-    () => size ? icon ? Button_styles.getIconSizeStyles(size) : Button_styles.getSizeStyles(size) : void 0,
+    () => size && (icon ? Button_styles.getIconSizeStyles(size) : Button_styles.getSizeStyles(size)),
     [size, icon]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Component,
     {
       ref,
-      style: {
-        ...style,
-        "--HvButton-height": sizeStyles ? sizeStyles.height : "32px"
-      },
+      style: uikitReactUtils.mergeStyles(style, {
+        "--color": color && uikitStyles.getColor(color),
+        "--radius": radius && uikitStyles.theme.radii[radius],
+        "--HvButton-height": sizeStyles?.height ?? "32px"
+      }),
       className: cx(
         classes.root,
-        type && classes[type],
-        color && css(Button_styles.getColoringStyle(color, type)),
         classes[variant],
+        classes[variantProp],
         // Placed after type and color CSS for DS3 override
-        radius && css(Button_styles.getRadiusStyles(radius)),
         overrideIconColors && css(Button_styles.getOverrideColors()),
         {
           [classes.icon]: icon,

package/dist/cjs/Button/Button.styles.cjs

@@ -4,6 +4,9 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton", {
+  /**
+   * Classes applied to the root element
+   */
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -12,19 +15,22 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     cursor: "pointer",
     whiteSpace: "nowrap",
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...focusUtils.outlineStyles
     },
     // Default button - no size specified
     fontFamily: uikitStyles.theme.fontFamily.body,
     ...uikitStyles.theme.typography.label,
+    color: "var(--color, currentcolor)",
+    backgroundColor: "transparent",
     height: "var(--HvButton-height)",
-    border: "1px solid currentcolor",
-    borderRadius: uikitStyles.theme.radii.base,
+    border: "1px solid transparent",
+    borderRadius: `var(--radius, ${uikitStyles.theme.radii.base})`,
     padding: uikitStyles.theme.spacing(0, "sm")
   },
   startIcon: {
@@ -37,11 +43,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   disabled: {
     cursor: "not-allowed",
     color: uikitStyles.theme.colors.secondary_60,
-    borderColor: uikitStyles.theme.colors.atmo3,
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    "&:hover, &:focus-visible": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      borderColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    ":hover, :focus-visible": {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     }
   },
   icon: {
@@ -52,27 +58,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
       margin: -1
     }
   },
-  subtle: {
-    backgroundColor: "transparent",
-    "&$disabled": {
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: "transparent"
+  contained: {
+    color: uikitStyles.theme.colors.atmo1,
+    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    backgroundColor: "var(--color)",
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 20%)"
+      },
+      ":active": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 30%)"
       }
     }
   },
-  ghost: {
-    borderColor: "transparent",
-    backgroundColor: "transparent",
-    "&$disabled": {
-      borderColor: "transparent",
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        borderColor: "transparent",
-        backgroundColor: "transparent"
-      }
-    }
+  subtle: {
+    borderColor: "currentcolor"
   },
+  ghost: {},
   semantic: {
     color: uikitStyles.theme.colors.base_dark,
     backgroundColor: "transparent",
@@ -93,40 +95,19 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   // Deprecated (DS3)
   secondary: {}
 });
-const getColoringStyle = (color, type) => {
-  if (type)
-    return {
-      color: uikitStyles.theme.colors[color !== "warning" ? color : `${color}_140`]
-    };
-  const bg = uikitStyles.theme.colors[color !== "warning" ? color : `${color}_120`];
-  const hoverBg = uikitStyles.theme.colors[color !== "warning" ? `${color}_80` : `${color}_140`];
-  return {
-    color: uikitStyles.theme.colors.atmo1,
-    backgroundColor: bg,
-    borderColor: bg,
-    "&:hover, &:focus-visible": {
-      backgroundColor: hoverBg,
-      borderColor: hoverBg
-    }
-  };
-};
-const getRadiusStyles = (radius) => ({
-  borderRadius: uikitStyles.theme.radii[radius]
-});
 const sizes = {
-  xs: { height: "24px", space: "sm", typography: "captionLabel" },
-  sm: { height: "24px", space: "sm", typography: "captionLabel" },
-  md: { height: "32px", space: "sm", typography: "label" },
-  lg: { height: "48px", space: "md", typography: "label" },
-  xl: { height: "48px", space: "md", typography: "label" }
+  xs: { height: "24px", fontSize: "sm" },
+  sm: { height: "24px", fontSize: "sm" },
+  md: { height: "32px" },
+  lg: { height: "48px", space: "md" },
+  xl: { height: "48px", space: "md" }
 };
 const getSizeStyles = (size) => {
-  const { height, space, typography } = sizes[size];
-  const { color, ...typoProps } = uikitStyles.theme.typography[typography];
+  const { height, space = "sm", fontSize } = sizes[size];
   return {
     height,
     padding: uikitStyles.theme.spacing(0, space),
-    ...typoProps
+    fontSize: fontSize && uikitStyles.theme.fontSizes[fontSize]
   };
 };
 const getIconSizeStyles = (size) => {
@@ -141,10 +122,8 @@ const getOverrideColors = () => ({
     fill: "currentcolor"
   }
 });
-exports.getColoringStyle = getColoringStyle;
 exports.getIconSizeStyles = getIconSizeStyles;
 exports.getOverrideColors = getOverrideColors;
-exports.getRadiusStyles = getRadiusStyles;
 exports.getSizeStyles = getSizeStyles;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Footer/Footer.cjs

@@ -11,7 +11,7 @@ const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const HvFooter = (props) => {
   const {
     name = "Hitachi Vantara",
-    copyright = `© Hitachi Vantara Corporation ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
+    copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
     links,
     classes: classesProp,
     className,

package/dist/cjs/Loading/Loading.styles.cjs

@@ -12,13 +12,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
   },
   barContainer: {
     display: "flex",
+    alignItems: "center",
     justifyContent: "space-around",
     ":has($regular)": {
       width: 30,
       height: 30
     },
     ":has($small)": {
-      "--scaleY": "0.223",
+      "--height": "40%",
       width: 18,
       height: 18
     }
@@ -29,9 +30,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     animation: "loading 1s ease-in-out infinite",
     // TODO: make this the default when it has better support
     width: "round(up, 0.11em, 2px)",
+    height: "100%",
     "@keyframes loading": {
       "50%": {
-        transform: "scale(1, var(--scaleY, 0.6))",
+        height: "var(--height, 60%)",
         backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.secondary})`
       }
     },

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -3,11 +3,9 @@ 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 setId = require("../utils/setId.cjs");
 const MultiButton_styles = require("./MultiButton.styles.cjs");
 const HvMultiButton = (props) => {
   const {
-    id,
     className,
     children,
     classes: classesProp,
@@ -18,13 +16,7 @@ const HvMultiButton = (props) => {
     split,
     ...others
   } = uikitReactUtils.useDefaultProps("HvMultiButton", props);
-  const { classes, cx, css } = MultiButton_styles.useClasses(classesProp);
-  const [color, type] = React.useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
+  const { classes, cx } = MultiButton_styles.useClasses(classesProp);
   const buttons = React.useMemo(() => {
     const btns = [];
     React.Children.forEach(children, (child) => {
@@ -37,7 +29,6 @@ const HvMultiButton = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      id,
       className: cx(
         classes.root,
         {
@@ -53,35 +44,17 @@ const HvMultiButton = (props) => {
       ...others,
       children: buttons.map((child, index) => {
         const childIsSelected = !!child.props.selected;
-        const btnKey = setId.setId([id, index]);
-        return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-          React.cloneElement(child, {
-            variant,
-            disabled: disabled || child.props.disabled,
-            size,
-            className: cx(child.props.className, classes.button, {
-              [classes.firstButton]: index === 0,
-              [classes.lastButton]: index === buttons.length - 1,
-              [classes.selected]: childIsSelected
-            })
-          }),
-          split && index < buttons.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cx(
-                classes.splitContainer,
-                color && css(MultiButton_styles.getSplitContainerColor(color, type, disabled)),
-                size && css(MultiButton_styles.getSplitContainerHeight(size)),
-                {
-                  [classes.splitDisabled]: disabled
-                },
-                classes[variant]
-                // TODO - remove in v6
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.split })
-            }
-          )
-        ] }, btnKey);
+        return React.cloneElement(child, {
+          key: index,
+          variant,
+          disabled: disabled || child.props.disabled,
+          size,
+          className: cx(child.props.className, classes.button, {
+            [classes.firstButton]: index === 0,
+            [classes.lastButton]: index === buttons.length - 1,
+            [classes.selected]: childIsSelected
+          })
+        });
       })
     }
   );

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Button_styles = require("../Button/Button.styles.cjs");
 const DropDownMenu_styles = require("../DropDownMenu/DropDownMenu.styles.cjs");
 require("../DropDownMenu/DropDownMenu.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButton", {
@@ -98,44 +97,40 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   splitGroup: {
     width: "fit-content",
     background: uikitStyles.theme.colors.atmo1,
-    // Button
-    "& button$button": {
-      "&$firstButton": {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-        "& + div$splitContainer": {
-          marginLeft: -1
-        }
-      },
-      "&$lastButton": {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
-      }
-    },
-    // Dropdown Menu
-    [`& .${DropDownMenu_styles.staticClasses.root}`]: {
-      "&:has($firstButton)": {
-        "& + div$splitContainer": {
-          marginRight: -1
-        }
+    // HvButton, HvDropDownMenu
+    "& button$button:not($firstButton), & $button:not($firstButton) button": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      "&:not([aria-controls])": {
+        borderLeftWidth: 0
       }
     },
-    "& $button$firstButton > button": {
-      marginRight: -1.5,
+    // HvButton, HvDropDownMenu
+    "& button$button:not($lastButton), & $button:not($lastButton) button": {
       borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    },
-    "& $button$lastButton > button": {
-      marginLeft: -1.5,
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
+      borderBottomRightRadius: 0,
+      "&:not([aria-controls])": {
+        borderRightWidth: 0
+      },
+      "&::after": {
+        content: "''",
+        position: "absolute",
+        inset: "4px -1px 4px auto",
+        width: 1,
+        zIndex: 1,
+        height: "auto",
+        backgroundColor: "currentcolor"
+      }
     },
+    // HvDropDownMenu
     [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
       zIndex: 2
     }
   },
   splitGroupDisabled: { background: uikitStyles.theme.colors.atmo3 },
-  button: {},
+  button: {
+    position: "relative"
+  },
   selected: {},
   vertical: {
     flexDirection: "column",
@@ -197,23 +192,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       }
     }
   },
-  split: {
-    width: 1,
-    height: "100%",
-    background: "currentColor"
-  },
-  splitContainer: {
-    display: "flex",
-    justifyContent: "center",
-    zIndex: 1,
-    width: 2,
-    paddingTop: 4,
-    paddingBottom: 4,
-    height: "calc(32px - 2px)"
-  },
-  splitDisabled: {
-    color: uikitStyles.theme.colors.secondary_60
-  },
   firstButton: {},
   lastButton: {},
   // TODO - review the need for these classes in v6
@@ -224,14 +202,5 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   secondarySubtle: {},
   secondaryGhost: {}
 });
-const getSplitContainerColor = (color, type, disabled) => ({
-  color: Button_styles.getColoringStyle(color, type).color,
-  backgroundColor: disabled ? uikitStyles.theme.colors.atmo3 : type === "subtle" ? uikitStyles.theme.colors.atmo1 : "transparent"
-});
-const getSplitContainerHeight = (size) => ({
-  height: `calc(${Button_styles.getSizeStyles(size).height} - 2px)`
-});
-exports.getSplitContainerColor = getSplitContainerColor;
-exports.getSplitContainerHeight = getSplitContainerHeight;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -28,6 +28,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
     zIndex: uikitStyles.theme.zIndices.popover
   },
   panel: {
+    maxHeight: 400,
     border: `1px solid ${uikitStyles.theme.colors.secondary}`,
     marginTop: -1,
     marginBottom: -1

package/dist/cjs/Switch/Switch.cjs

@@ -3,6 +3,7 @@ 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 uikitStyles = require("@hitachivantara/uikit-styles");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -12,6 +13,7 @@ const BaseSwitch = require("../BaseSwitch/BaseSwitch.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(
   (props, ref) => {
     const {
@@ -35,9 +37,10 @@ const HvSwitch = React.forwardRef(
       statusMessage,
       "aria-errormessage": ariaErrorMessage,
       inputProps,
+      color,
       ...others
     } = uikitReactUtils.useDefaultProps("HvSwitch", props);
-    const { classes, cx } = Switch_styles.useClasses(classesProp);
+    const { classes, cx, css } = Switch_styles.useClasses(classesProp);
     const elementId = useUniqueId.useUniqueId(id);
     const [isChecked, setIsChecked] = useControlled.useControlled(
       checked,
@@ -115,6 +118,16 @@ const HvSwitch = React.forwardRef(
                     "aria-describedby": ariaDescribedBy,
                     ...inputProps
                   },
+                  ...color && {
+                    classes: {
+                      switchBase: css({
+                        "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
+                          backgroundColor: uikitStyles.getColor(color),
+                          borderColor: isSemantical(color) ? uikitStyles.getColor(`${color}_120`) : "#00000032"
+                        }
+                      })
+                    }
+                  },
                   ...others
                 }
               )

package/dist/cjs/Table/TableCell/TableCell.styles.cjs

@@ -7,6 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   /** Styles applied to the component root class. */
   root: {
     verticalAlign: "inherit",
+    alignContent: "inherit",
     textAlign: "left",
     padding: `calc(${uikitStyles.theme.space.xs} - 2px ) ${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.xs} - 3px ) ${uikitStyles.theme.spacing(4)}`,
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
@@ -15,6 +16,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   head: {
     height: 52,
     verticalAlign: "top",
+    alignContent: "start",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderTop: "1px solid transparent",
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
@@ -99,6 +101,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   /** Styles applied to the cell when its variant is list and actions. */
   variantListactions: {
     verticalAlign: "middle",
+    alignContent: "center",
     borderLeft: "none",
     paddingLeft: "0",
     textAlign: "center",

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

@@ -8,6 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     "--cell-height": "32px",
     height: "var(--cell-height)",
     verticalAlign: "inherit",
+    alignContent: "inherit",
     textAlign: "left",
     padding: uikitStyles.theme.spacing(0, 1, 0, 4),
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
@@ -15,6 +16,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   head: {
     paddingTop: 8,
     verticalAlign: "top",
+    alignContent: "start",
     ...uikitStyles.theme.typography.label,
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     backgroundColor: uikitStyles.theme.colors.atmo1,
@@ -32,6 +34,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     },
     "&$sortable": {
       verticalAlign: "initial",
+      alignContent: "initial",
       paddingTop: 0,
       paddingLeft: 0,
       cursor: "pointer",

package/dist/cjs/Table/TableRow/TableRow.styles.cjs

@@ -9,6 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
     color: "inherit",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     verticalAlign: "middle",
+    alignContent: "center",
     outline: 0
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */

package/dist/cjs/Table/hooks/useRowExpand.cjs

@@ -15,7 +15,7 @@ const CellWithExpandButton = ({
   labels: labelsProp
 }) => {
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  const { onClick } = row.getToggleRowExpandedProps();
+  const rowProps = row.getToggleRowExpandedProps?.();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button.HvButton,
@@ -23,8 +23,8 @@ const CellWithExpandButton = ({
         icon: true,
         "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
         "aria-expanded": row.isExpanded,
-        onClick,
-        children: row.isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {})
+        onClick: rowProps?.onClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { style: { rotate: row.isExpanded ? "180deg" : void 0 } })
       }
     ),
     cell?.value && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", component: "span", children: cell.value })

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

@@ -6,13 +6,9 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip", {
   root: {},
   tooltip: {},
-  tooltipMulti: {},
   popper: {
-    [`& .${Tooltip.tooltipClasses.popper}`]: {
-      opacity: 1
-    },
+    // TODO: move this to `tooltip` in v6 and make class always be applied
     [`& .${Tooltip.tooltipClasses.tooltip}`]: {
-      fontFamily: uikitStyles.theme.fontFamily.body,
       ...uikitStyles.theme.typography.body,
       display: "flex",
       width: "fit-content",
@@ -56,19 +52,29 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTooltip",
       padding: uikitStyles.theme.space.sm
     },
     "& $tooltip": {
-      padding: "15px 20px",
+      padding: uikitStyles.theme.space.sm,
       borderRadius: uikitStyles.theme.radii.round,
       "& p": {
         wordBreak: "break-word"
       }
     }
   },
+  // TODO: remove in v6
+  /** @deprecated */
+  tooltipMulti: {},
+  /** @deprecated */
   title: {},
+  /** @deprecated */
   valuesContainer: {},
+  /** @deprecated */
   values: {},
+  /** @deprecated */
   color: {},
+  /** @deprecated */
   separatorColor: {},
+  /** @deprecated */
   separator: {},
+  /** @deprecated */
   valueWrapper: {}
 });
 exports.staticClasses = staticClasses;