@hitachivantara/uikit-react-core 5.93.1 → 5.94.0

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -26,6 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
     alignItems: "center",
     position: "relative",
     padding: uikitStyles.theme.space.xxs,
+    height: "fit-content",
     ":focus-visible": {
       ...focusUtils.outlineStyles,
       borderRadius: 0

package/dist/cjs/Badge/Badge.cjs

@@ -3,12 +3,14 @@ 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 Badge_styles = require("./Badge.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const {
     classes: classesProp,
     className,
+    color,
     showCount = false,
     count: countProp = 0,
     maxCount = 99,
@@ -17,6 +19,7 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
     text,
     textVariant,
     children: childrenProp,
+    style,
     ...others
   } = uikitReactUtils.useDefaultProps("HvBadge", props);
   const { classes, cx } = Badge_styles.useClasses(classesProp);
@@ -30,6 +33,10 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        "data-color": color,
+        style: uikitReactUtils.mergeStyles(style, {
+          "--bg-color": color && uikitStyles.getColor(color)
+        }),
         className: cx(classes.badgePosition, {
           [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),

package/dist/cjs/Badge/Badge.styles.cjs

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
     ...uikitStyles.theme.typography.caption2,
     color: uikitStyles.theme.colors.textDimmed,
     borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.text,
+    backgroundColor: `var(--bg-color, ${uikitStyles.theme.colors.text})`,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -7,8 +7,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerCon
     minWidth: "100%",
     width: "100%",
     position: "relative",
-    gap: uikitStyles.theme.space.xs,
-    borderRadius: 0
+    gap: uikitStyles.theme.space.xs
   },
   success: {},
   warning: {},

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -20,7 +20,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     backgroundColor: uikitStyles.theme.colors.bgContainer,
     boxSizing: "border-box",
     border: `1px solid ${uikitStyles.theme.colors.text}`,
-    borderRadius: uikitStyles.theme.radii.base,
+    borderRadius: uikitStyles.theme.radii.round,
     ":hover,:focus-visible": {
       borderColor: uikitStyles.theme.colors.primary
     },
@@ -34,12 +34,6 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
   headerOpen: {
     "&,:hover": {
       borderColor: uikitStyles.theme.colors.text
-    },
-    "&[data-popper-placement*='top']": {
-      borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-    },
-    "&[data-popper-placement*='bottom']": {
-      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
     }
   },
   /** @deprecated use `[data-popper-placement*='top']` selector instead */
@@ -92,15 +86,10 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     padding: 0,
     border: `1px solid ${uikitStyles.theme.colors.text}`
   },
-  // TODO: change from classes to [data-popper-placement] selectors
-  panelOpenedUp: {
-    top: 1,
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`
-  },
-  panelOpenedDown: {
-    top: -1,
-    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: {},
   inputExtensionOpen: {
     height: "0px",
     backgroundColor: uikitStyles.theme.colors.bgContainer,

package/dist/cjs/BaseDropdown/BaseDropdownPanel.cjs

@@ -43,6 +43,7 @@ const BaseDropdownPanel = ({
             Panel.HvPanel,
             {
               id: containerId,
+              "data-popper-placement": popperPlacement,
               className: cx(classes.panel, {
                 [classes.panelOpenedUp]: popperPlacement?.includes("top"),
                 [classes.panelOpenedDown]: popperPlacement?.includes("bottom")

package/dist/cjs/BaseInput/BaseInput.styles.cjs

@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     position: "relative",
     overflow: "hidden",
     margin: 0,
-    borderRadius: uikitStyles.theme.radii.base,
+    borderRadius: uikitStyles.theme.radii.round,
     height: "32px",
     borderWidth: 1,
     borderColor: uikitStyles.theme.colors.text,

package/dist/cjs/BulkActions/BulkActions.styles.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActio
     display: "flex",
     alignItems: "center",
     border: `1px solid ${uikitStyles.theme.colors.border}`,
-    backgroundColor: uikitStyles.theme.colors.bgPage,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     padding: uikitStyles.theme.spacing("xs", "md"),
     marginBottom: uikitStyles.theme.space.xs
   },

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs

@@ -11,21 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownM
   },
   /** @deprecated use `classes.root` instead */
   container: {},
-  baseContainer: {
-    "--r": uikitStyles.theme.radii.base,
-    "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
-      borderRadius: "var(--r) 0 var(--r) var(--r)"
-    },
-    "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
-      borderRadius: "0 var(--r) var(--r) var(--r)"
-    },
-    "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
-      borderRadius: "var(--r) var(--r) var(--r) 0"
-    },
-    "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
-      borderRadius: "var(--r) var(--r) 0 var(--r)"
-    }
-  },
+  baseContainer: {},
   /** @deprecated use `classes.root` instead */
   icon: {},
   iconSelected: {

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

@@ -30,14 +30,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
     ...disabledStyle
   },
   open: {
-    "--r": uikitStyles.theme.radii.base,
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    "&[data-popper-placement*='top']": {
-      borderRadius: "0px 0px var(--r) var(--r)"
-    },
-    "&[data-popper-placement*='bottom']": {
-      borderRadius: "var(--r) var(--r) 0px 0px"
-    }
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   selection: {
     color: "inherit",

package/dist/cjs/FormElement/CharCounter/CharCounter.cjs

@@ -16,7 +16,7 @@ const HvCharCounter = (props) => {
     className,
     id: idProp,
     disabled: disabledProp,
-    disableGutter = false,
+    disableGutter,
     ...others
   } = uikitReactUtils.useDefaultProps("HvCharCounter", props);
   const { classes, cx } = CharCounter_styles.useClasses(classesProp);

package/dist/cjs/FormElement/Suggestions/Suggestions.styles.cjs

@@ -7,6 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestio
   list: {
     backgroundColor: uikitStyles.theme.colors.bgContainer,
     border: `1px solid ${uikitStyles.theme.colors.text}`,
+    borderRadius: uikitStyles.theme.radii.round,
     boxShadow: uikitStyles.theme.colors.shadow,
     padding: uikitStyles.theme.space.xs,
     width: "100%"
@@ -16,7 +17,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestio
     position: "absolute",
     zIndex: uikitStyles.theme.zIndices.tooltip,
     ":not($portal)": {
-      transform: "translate3d(0, -1px, 0) !important"
+      "&[data-popper-placement*='top']": {
+        transform: "translate3d(0, -28px, 0) !important"
+      },
+      "&[data-popper-placement*='bottom']": {
+        transform: "translate3d(0, 2px, 0) !important"
+      }
     }
   },
   portal: {}

package/dist/cjs/IconContainer/IconContainer.cjs

@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvIconConta
     display: "inline-flex",
     flex: "0 0 auto",
     // ensure icon doesn't flex grow/shrink
-    fontSize: `var(--icsize, 16px)`,
+    fontSize: `var(--isize, 16px)`,
     // default size of 16px
     transition: "rotate 0.2s ease",
     justifyContent: "center",
@@ -41,21 +41,21 @@ const HvIconContainer = React.forwardRef(function HvIconContainer2(props, ref) {
     classes: classesProp,
     style,
     color,
-    size: sizeProp = "S",
+    size = "S",
     rotate,
     children,
     ...others
   } = uikitReactUtils.useDefaultProps("HvIconContainer", props);
   const { cx, classes } = useClasses(classesProp);
-  const size = mapSizes(sizeProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref,
       className: cx(classes.root, className, {
-        [classes[size]]: size
+        [classes[mapSizes(size)]]: size
       }),
       style: uikitReactUtils.mergeStyles(style, {
+        "--isize": typeof size === "number" ? `${size}px` : void 0,
         color: uikitStyles.getColor(color),
         rotate: rotate ? "180deg" : void 0,
         ...style

package/dist/cjs/Input/Input.cjs

@@ -444,27 +444,24 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
             ...others
           }
         ),
-        canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: classes.inputExtension }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Suggestions.HvSuggestions,
-            {
-              id: setId.setId(elementId, "suggestions"),
-              classes: {
-                root: classes.suggestionsContainer,
-                list: classes.suggestionList
-              },
-              expanded: hasSuggestions,
-              anchorEl: inputRef.current?.parentElement,
-              onClose: suggestionClearHandler,
-              onKeyDown: onSuggestionKeyDown,
-              onSuggestionSelected: suggestionSelectedHandler,
-              suggestionValues,
-              enablePortal,
-              popperProps: { ref: suggestionsRef }
-            }
-          )
-        ] }),
+        canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsx(
+          Suggestions.HvSuggestions,
+          {
+            id: setId.setId(elementId, "suggestions"),
+            classes: {
+              root: classes.suggestionsContainer,
+              list: classes.suggestionList
+            },
+            expanded: hasSuggestions,
+            anchorEl: inputRef.current?.parentElement,
+            onClose: suggestionClearHandler,
+            onKeyDown: onSuggestionKeyDown,
+            onSuggestionSelected: suggestionSelectedHandler,
+            suggestionValues,
+            enablePortal,
+            popperProps: { ref: suggestionsRef }
+          }
+        ),
         canShowError && /* @__PURE__ */ jsxRuntime.jsx(
           WarningText.HvWarningText,
           {

package/dist/cjs/Input/Input.styles.cjs

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.styles.cjs");
 require("../FormElement/Suggestions/Suggestions.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
@@ -31,11 +30,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
       width: "100%"
     }
   },
-  inputExtension: {
-    height: uikitStyles.theme.space.xs,
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`
-  },
+  /** @deprecated unused. use `classes.suggestionsContainer ::before` instead */
+  inputExtension: {},
   input: {},
   inputRoot: {
     ":is(:hover,:focus-within) $iconClear": {

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

@@ -11,22 +11,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   },
   disabled: {},
   readOnly: {},
-  invalid: {
-    borderColor: uikitStyles.theme.form.errorColor
-  },
+  invalid: {},
   labelContainer: {},
   label: {},
   description: {},
-  select: {},
+  select: {
+    "&&$invalid": { borderColor: uikitStyles.theme.form.errorColor }
+  },
   popper: {
-    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)`
-    }
+    zIndex: uikitStyles.theme.zIndices.popover
   },
   panel: {
     maxHeight: 400,

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -41,6 +41,7 @@ const HvTagsInput = React.forwardRef(
       onBlur,
       onFocus,
       placeholder,
+      startAdornment,
       endAdornment,
       hideCounter,
       middleCountLabel = "/",
@@ -317,6 +318,7 @@ const HvTagsInput = React.forwardRef(
               children: hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
                 CharCounter.HvCharCounter,
                 {
+                  disableGutter: true,
                   id: setId.setId(elementId, "charCounter"),
                   className: classes.characterCounter,
                   separator: middleCountLabel,
@@ -359,6 +361,7 @@ const HvTagsInput = React.forwardRef(
                     `${label2}-${i}`
                   );
                 }),
+                !disabled && !readOnly && startAdornment,
                 !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {

package/dist/cjs/TagsInput/TagsInput.styles.cjs

@@ -56,7 +56,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderWidth: 1,
     borderColor: uikitStyles.theme.colors.textSubtle,
-    borderRadius: uikitStyles.theme.radii.base,
+    borderRadius: uikitStyles.theme.radii.round,
     "&:hover": {
       borderColor: uikitStyles.theme.colors.primary
     },

package/dist/cjs/TextArea/TextArea.cjs

@@ -214,6 +214,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
             children: hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
               CharCounter.HvCharCounter,
               {
+                disableGutter: true,
                 id: setId.setId(elementId, "charCounter"),
                 className: classes.characterCounter,
                 separator: middleCountLabel,

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -4,7 +4,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const utils = require("./NavigationSlider/utils.cjs");
-const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
 const HvVerticalNavigation = React.forwardRef(function HvVerticalNavigation2(props, ref) {
@@ -31,7 +30,7 @@ const HvVerticalNavigation = React.forwardRef(function HvVerticalNavigation2(pro
   );
   const [parentItem, setParentItem] = React.useState(initialParentItem);
   const hasAnyChildWithData = React.useMemo(
-    () => VerticalNavigation_utils.hasChildNavigationItems(parentData),
+    () => parentData.some((item) => item.data && item.data.length > 0),
     [parentData]
   );
   const headerTitle = React.useMemo(() => parentItem?.label, [parentItem]);

package/dist/cjs/icons.cjs

@@ -23,8 +23,8 @@ const SvgBase = styled__default.default("svg")({
   flexShrink: 0,
   transition: "rotate 0.2s ease"
 });
-const Svg = styled__default.default(SvgBase)(({ size, color, compact, rotate }) => ({
-  rotate: rotate ? "180deg" : void 0,
+const Svg = styled__default.default(SvgBase)(({ size, color, compact, rotation }) => ({
+  rotate: rotation ? "180deg" : void 0,
   margin: compact ? 0 : size === "xs" ? 10 : 8,
   color: uikitStyles.getColor(color) ?? "inherit",
   fontSize: svgSizeMap[size] ?? size ?? svgSizeMap.sm
@@ -67,31 +67,29 @@ const defaultIconPathMap = {
   Remove: "M0 7.5h16v1H0z"
 };
 function HvIconInternal(props, ref) {
-  const { name, title, "aria-label": ariaLabel, children, ...others } = props;
+  const { name, title, "aria-label": ariaLabel, rotate, ...others } = props;
   const { activeTheme } = uikitReactUtils.useTheme();
   const iconsPathMap = React.useMemo(
     () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
     [activeTheme?.icons]
   );
   const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
-  return (
-    // @ts-expect-error `rotate` is fine
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Svg,
-      {
-        ref,
-        "data-name": name,
-        viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
-        focusable: false,
-        "aria-label": ariaLabel,
-        role: title || ariaLabel ? "img" : "none",
-        ...others,
-        children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: iconsPathMap[name] })
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Svg,
+    {
+      ref,
+      "data-name": name,
+      rotation: rotate,
+      viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
+      focusable: false,
+      "aria-label": ariaLabel,
+      role: title || ariaLabel ? "img" : "none",
+      ...others,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: iconsPathMap[name] })
+      ]
+    }
   );
 }
 const HvIcon = React.memo(React.forwardRef(HvIconInternal));

package/dist/cjs/utils/Callout.cjs

@@ -16,7 +16,8 @@ const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
     position: "relative",
     boxShadow: "none",
     flexWrap: "nowrap",
-    padding: 0
+    padding: 0,
+    borderRadius: uikitStyles.theme.radii.round
   },
   success: {
     backgroundColor: uikitStyles.theme.colors.positiveDimmed
@@ -48,7 +49,8 @@ const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
     wordBreak: "break-word"
   },
   messageIcon: {
-    lineHeight: 0
+    lineHeight: 0,
+    flexShrink: 0
   },
   messageTitle: {
     display: "block",

package/dist/cjs/utils/focusUtils.cjs

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const outlineStyles = {
+  outline: "none",
+  // remove the default outlines
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 exports.outlineStyles = outlineStyles;

package/dist/esm/Avatar/Avatar.styles.js

@@ -24,6 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
     alignItems: "center",
     position: "relative",
     padding: theme.space.xxs,
+    height: "fit-content",
     ":focus-visible": {
       ...outlineStyles,
       borderRadius: 0

package/dist/esm/Badge/Badge.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./Badge.styles.js";
 import { staticClasses } from "./Badge.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -8,6 +9,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
   const {
     classes: classesProp,
     className,
+    color,
     showCount = false,
     count: countProp = 0,
     maxCount = 99,
@@ -16,6 +18,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
     text,
     textVariant,
     children: childrenProp,
+    style,
     ...others
   } = useDefaultProps("HvBadge", props);
   const { classes, cx } = useClasses(classesProp);
@@ -29,6 +32,10 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        "data-color": color,
+        style: mergeStyles(style, {
+          "--bg-color": color && getColor(color)
+        }),
         className: cx(classes.badgePosition, {
           [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),

package/dist/esm/Badge/Badge.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
     ...theme.typography.caption2,
     color: theme.colors.textDimmed,
     borderRadius: theme.radii.full,
-    backgroundColor: theme.colors.text,
+    backgroundColor: `var(--bg-color, ${theme.colors.text})`,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",

package/dist/esm/Banner/BannerContent/BannerContent.styles.js

@@ -5,8 +5,7 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     minWidth: "100%",
     width: "100%",
     position: "relative",
-    gap: theme.space.xs,
-    borderRadius: 0
+    gap: theme.space.xs
   },
   success: {},
   warning: {},

package/dist/esm/BaseDropdown/BaseDropdown.styles.js

@@ -18,7 +18,7 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     backgroundColor: theme.colors.bgContainer,
     boxSizing: "border-box",
     border: `1px solid ${theme.colors.text}`,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     ":hover,:focus-visible": {
       borderColor: theme.colors.primary
     },
@@ -32,12 +32,6 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   headerOpen: {
     "&,:hover": {
       borderColor: theme.colors.text
-    },
-    "&[data-popper-placement*='top']": {
-      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
-    },
-    "&[data-popper-placement*='bottom']": {
-      borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
     }
   },
   /** @deprecated use `[data-popper-placement*='top']` selector instead */
@@ -90,15 +84,10 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     padding: 0,
     border: `1px solid ${theme.colors.text}`
   },
-  // TODO: change from classes to [data-popper-placement] selectors
-  panelOpenedUp: {
-    top: 1,
-    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`
-  },
-  panelOpenedDown: {
-    top: -1,
-    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`
-  },
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedUp: {},
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedDown: {},
   inputExtensionOpen: {
     height: "0px",
     backgroundColor: theme.colors.bgContainer,

package/dist/esm/BaseDropdown/BaseDropdownPanel.js

@@ -41,6 +41,7 @@ const BaseDropdownPanel = ({
             HvPanel,
             {
               id: containerId,
+              "data-popper-placement": popperPlacement,
               className: cx(classes.panel, {
                 [classes.panelOpenedUp]: popperPlacement?.includes("top"),
                 [classes.panelOpenedDown]: popperPlacement?.includes("bottom")

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     position: "relative",
     overflow: "hidden",
     margin: 0,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     height: "32px",
     borderWidth: 1,
     borderColor: theme.colors.text,

package/dist/esm/BulkActions/BulkActions.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
     display: "flex",
     alignItems: "center",
     border: `1px solid ${theme.colors.border}`,
-    backgroundColor: theme.colors.bgPage,
+    backgroundColor: theme.colors.bgContainer,
     padding: theme.spacing("xs", "md"),
     marginBottom: theme.space.xs
   },