@hitachivantara/uikit-react-core 5.93.0 → 5.93.2

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/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/Dropdown/List/List.cjs

@@ -106,7 +106,10 @@ const HvDropdownList = (props) => {
     }
   ) });
   const handleSelectAll = () => {
-    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));
+    const newList = list.map((elem) => {
+      if (elem.disabled) return elem;
+      return { ...elem, selected: !anySelected };
+    });
     setList(newList);
     updateSelectAll(newList);
   };

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

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

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/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
   },

package/dist/esm/DropDownMenu/DropDownMenu.styles.js

@@ -9,21 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
   },
   /** @deprecated use `classes.root` instead */
   container: {},
-  baseContainer: {
-    "--r": 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/esm/Dropdown/List/List.js

@@ -105,7 +105,10 @@ const HvDropdownList = (props) => {
     }
   ) });
   const handleSelectAll = () => {
-    const newList = list.map((elem) => ({ ...elem, selected: !anySelected }));
+    const newList = list.map((elem) => {
+      if (elem.disabled) return elem;
+      return { ...elem, selected: !anySelected };
+    });
     setList(newList);
     updateSelectAll(newList);
   };

package/dist/esm/DropdownButton/DropdownButton.styles.js

@@ -28,14 +28,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
     ...disabledStyle
   },
   open: {
-    "--r": theme.radii.base,
-    backgroundColor: 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: theme.colors.bgContainer
   },
   selection: {
     color: "inherit",

package/dist/esm/FormElement/CharCounter/CharCounter.js

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

package/dist/esm/FormElement/Suggestions/Suggestions.styles.js

@@ -5,6 +5,7 @@ const { staticClasses, useClasses } = createClasses("HvSuggestions", {
   list: {
     backgroundColor: theme.colors.bgContainer,
     border: `1px solid ${theme.colors.text}`,
+    borderRadius: theme.radii.round,
     boxShadow: theme.colors.shadow,
     padding: theme.space.xs,
     width: "100%"
@@ -14,7 +15,12 @@ const { staticClasses, useClasses } = createClasses("HvSuggestions", {
     position: "absolute",
     zIndex: 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/esm/Input/Input.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
@@ -443,27 +443,24 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
             ...others
           }
         ),
-        canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, { children: [
-          hasSuggestions && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputExtension }),
-          /* @__PURE__ */ jsx(
-            HvSuggestions,
-            {
-              id: 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__ */ jsx(
+          HvSuggestions,
+          {
+            id: 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__ */ jsx(
           HvWarningText,
           {

package/dist/esm/Input/Input.styles.js

@@ -1,5 +1,4 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../FormElement/Suggestions/Suggestions.styles.js";
 import "../FormElement/Suggestions/Suggestions.js";
 const { staticClasses, useClasses } = createClasses("HvInput", {
@@ -29,11 +28,8 @@ const { staticClasses, useClasses } = createClasses("HvInput", {
       width: "100%"
     }
   },
-  inputExtension: {
-    height: theme.space.xs,
-    backgroundColor: theme.colors.bgContainer,
-    boxShadow: `0px 8px 0px ${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/esm/Select/Select.styles.js

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

package/dist/esm/TagsInput/TagsInput.js

@@ -316,6 +316,7 @@ const HvTagsInput = forwardRef(
               children: hasCounter && /* @__PURE__ */ jsx(
                 HvCharCounter,
                 {
+                  disableGutter: true,
                   id: setId(elementId, "charCounter"),
                   className: classes.characterCounter,
                   separator: middleCountLabel,

package/dist/esm/TagsInput/TagsInput.styles.js

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

package/dist/esm/TextArea/TextArea.js

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

package/dist/esm/VerticalNavigation/VerticalNavigation.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useMemo, useCallback } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { fillDataWithParentId, getParentItemById, getNavigationItemById } from "./NavigationSlider/utils.js";
-import { hasChildNavigationItems } from "./utils/VerticalNavigation.utils.js";
 import { useClasses } from "./VerticalNavigation.styles.js";
 import { staticClasses } from "./VerticalNavigation.styles.js";
 import { VerticalNavigationContext } from "./VerticalNavigationContext.js";
@@ -30,7 +29,7 @@ const HvVerticalNavigation = forwardRef(function HvVerticalNavigation2(props, re
   );
   const [parentItem, setParentItem] = useState(initialParentItem);
   const hasAnyChildWithData = useMemo(
-    () => hasChildNavigationItems(parentData),
+    () => parentData.some((item) => item.data && item.data.length > 0),
     [parentData]
   );
   const headerTitle = useMemo(() => parentItem?.label, [parentItem]);

package/dist/esm/icons.js

@@ -19,8 +19,8 @@ const SvgBase = styled("svg")({
   flexShrink: 0,
   transition: "rotate 0.2s ease"
 });
-const Svg = styled(SvgBase)(({ size, color, compact, rotate }) => ({
-  rotate: rotate ? "180deg" : void 0,
+const Svg = styled(SvgBase)(({ size, color, compact, rotation }) => ({
+  rotate: rotation ? "180deg" : void 0,
   margin: compact ? 0 : size === "xs" ? 10 : 8,
   color: getColor(color) ?? "inherit",
   fontSize: svgSizeMap[size] ?? size ?? svgSizeMap.sm
@@ -63,31 +63,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 } = useTheme();
   const iconsPathMap = useMemo(
     () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
     [activeTheme?.icons]
   );
   const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
-  return (
-    // @ts-expect-error `rotate` is fine
-    /* @__PURE__ */ 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__ */ jsx("title", { children: title }) : null,
-          /* @__PURE__ */ jsx("path", { d: iconsPathMap[name] })
-        ]
-      }
-    )
+  return /* @__PURE__ */ 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__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("path", { d: iconsPathMap[name] })
+      ]
+    }
   );
 }
 const HvIcon = memo(forwardRef(HvIconInternal));

package/dist/esm/utils/Callout.js

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

package/dist/esm/utils/focusUtils.js

@@ -1,4 +1,6 @@
 const outlineStyles = {
+  outline: "none",
+  // remove the default outlines
   boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
 };
 export {

package/dist/types/index.d.ts

@@ -1999,7 +1999,7 @@ export declare const HvButton: <C extends React.ElementType = "button">(props: {
     component?: C | undefined;
 } & {
     children?: ReactNode | undefined;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
@@ -4022,7 +4022,7 @@ export declare const HvIconButton: <C extends React.ElementType = "button">(prop
     component?: C | undefined;
 } & {
     children?: ReactNode | undefined;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T_2 ? T_2 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T_2 extends any ? T_2 : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> ? T_1 extends any ? T_1 : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> extends infer T_2 ? T_2 extends Omit<PropsWithoutRef<ComponentProps<C>>, "color" | "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "radius" | "component" | "className" | "focusableWhenDisabled" | "startIcon" | "endIcon" | "overrideIconColors"> ? T_2 extends any ? T_2 : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "focusableWhenDisabled" | "startIcon" | "endIcon">> ? T_1 extends any ? T_1 : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
 } & RefAttributes<unknown>) => React.ReactElement<any> | null;
 
@@ -4794,13 +4794,13 @@ export declare interface HvPanelProps extends HvBaseProps {
 
 export declare type HvPolarizedColorKeys = "positive" | "positive_120" | "positive_80" | "warning" | "warning_120" | "warning_140" | "negative" | "cat21" | "cat22" | "cat23" | "cat24" | "cat25" | "cat26" | "cat27" | "cat28" | "catastrophic";
 
+/**
+ * ProgressBar provides feedback about a process that is taking place in the application.
+ */
 export declare const HvProgressBar: (props: HvProgressBarProps) => JSX_2.Element;
 
 export declare type HvProgressBarClasses = ExtractNames<typeof useClasses_96>;
 
-/**
- * ProgressBar provides feedback about a process that is taking place in the application.
- */
 export declare interface HvProgressBarProps extends HvBaseProps {
     /** The value of the progress bar. */
     value: number;
@@ -7705,6 +7705,7 @@ export declare const optionGroupClasses: {
 };
 
 export declare const outlineStyles: {
+    outline: string;
     boxShadow: string;
 };
 
@@ -8625,7 +8626,7 @@ declare const useClasses_117: (classesProp?: Partial<Record<"root" | "disabled"
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_118: (classesProp?: Partial<Record<"label" | "root" | "invalid" | "disabled" | "readOnly" | "input" | "tagInputRoot" | "tagsList" | "error" | "singleLine" | "description" | "labelContainer" | "resizable" | "suggestionsContainer" | "suggestionList" | "inputExtension" | "chipRoot" | "listItemGutters" | "listItemRoot" | "characterCounter" | "tagInputContainerRoot" | "tagSelected" | "tagInputBorderContainer" | "tagInputRootFocused" | "tagInputRootEmpty", string>>, addStatic?: boolean) => {
+declare const useClasses_118: (classesProp?: Partial<Record<"label" | "root" | "invalid" | "disabled" | "readOnly" | "input" | "tagInputRoot" | "tagsList" | "error" | "singleLine" | "inputExtension" | "description" | "labelContainer" | "resizable" | "suggestionsContainer" | "suggestionList" | "chipRoot" | "listItemGutters" | "listItemRoot" | "characterCounter" | "tagInputContainerRoot" | "tagSelected" | "tagInputBorderContainer" | "tagInputRootFocused" | "tagInputRootEmpty", string>>, addStatic?: boolean) => {
     readonly classes: {
         listItemGutters: string;
         listItemRoot: string;
@@ -9465,7 +9466,7 @@ declare const useClasses_46: (classesProp?: Partial<Record<"image" | "slide", st
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_47: (classesProp?: Partial<Record<"label" | "root" | "input" | "icon" | "error" | "inputRoot" | "adornmentsBox" | "description" | "adornmentButton" | "labelContainer" | "inputBorderContainer" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList" | "inputExtension", string>>, addStatic?: boolean) => {
+declare const useClasses_47: (classesProp?: Partial<Record<"label" | "root" | "input" | "icon" | "error" | "inputRoot" | "inputExtension" | "adornmentsBox" | "description" | "adornmentButton" | "labelContainer" | "inputBorderContainer" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         labelContainer: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.93.0",
+  "version": "5.93.2",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.4.0",
-    "@hitachivantara/uikit-react-utils": "^0.2.33",
-    "@hitachivantara/uikit-styles": "^5.46.0",
+    "@hitachivantara/uikit-react-shared": "^5.4.2",
+    "@hitachivantara/uikit-react-utils": "^0.2.35",
+    "@hitachivantara/uikit-styles": "^5.46.2",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d96b3d461f5676cf95f4321fd9a3104874814fc3",
+  "gitHead": "9b7ed5b28906e4871b7f54b947e1a7a1d6f5f215",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/dist/cjs/VerticalNavigation/utils/VerticalNavigation.utils.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const hasChildNavigationItems = (data) => {
-  return data.some((item) => item.data && item.data.length > 0);
-};
-exports.hasChildNavigationItems = hasChildNavigationItems;

package/dist/esm/VerticalNavigation/utils/VerticalNavigation.utils.js

@@ -1,6 +0,0 @@
-const hasChildNavigationItems = (data) => {
-  return data.some((item) => item.data && item.data.length > 0);
-};
-export {
-  hasChildNavigationItems
-};