@hitachivantara/uikit-react-core 5.90.0 → 5.91.0

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -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: {}

package/dist/cjs/index.cjs

@@ -438,7 +438,6 @@ exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
 exports.HvBaseCheckBox = BaseCheckBox.HvBaseCheckBox;
 exports.baseRadioClasses = BaseRadio_styles.staticClasses;
 exports.HvBaseRadio = BaseRadio.HvBaseRadio;
-exports.getSelectorIcons = BaseRadio.getSelectorIcons;
 exports.baseSwitchClasses = BaseSwitch_styles.staticClasses;
 exports.HvBaseSwitch = BaseSwitch.HvBaseSwitch;
 exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;

package/dist/cjs/utils/Callout.cjs

@@ -89,7 +89,7 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvCallout", props);
   const { classes, cx } = useClasses(classesProp, false);
   const { activeTheme } = uikitReactUtils.useTheme();
-  const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "inherit");
+  const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
   const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
   const actionsContent = /* @__PURE__ */ jsxRuntime.jsx(
     ActionsGeneric.HvActionsGeneric,

package/dist/esm/Accordion/Accordion.js

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

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

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

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

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

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

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

package/dist/esm/Avatar/Avatar.js

@@ -6,9 +6,15 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
-import { decreaseSize } from "../utils/sizes.js";
 import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
+const decreaseSizeMap = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
 const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
   const {
     className,
@@ -58,7 +64,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
       User,
       {
         color,
-        iconSize: decreaseSize(size),
+        size: decreaseSizeMap[size],
         className: classes.fallback
       }
     );
@@ -78,18 +84,19 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     const statusColor = getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = getColor(badge || "", "positive");
-  return /* @__PURE__ */ jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(classes.status, classes[variant], classes[size]),
+      ref,
+      className: cx(classes.container, classes.status, classes[variant]),
       style: statusInlineStyle,
+      ...others,
       children: [
         badge && /* @__PURE__ */ jsx(
           "div",
           {
             className: classes.badge,
-            style: { backgroundColor: badgeColor }
+            style: { backgroundColor: getColor(badge, "positive") }
           }
         ),
         /* @__PURE__ */ jsx(
@@ -106,7 +113,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
         )
       ]
     }
-  ) });
+  );
 });
 export {
   HvAvatar,