@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/esm/Dropdown/Dropdown.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
@@ -12,11 +13,9 @@ import { useClasses } from "./Dropdown.styles.js";
 import { staticClasses } from "./Dropdown.styles.js";
 import { getSelectionLabel, getSelected } from "./utils.js";
 import { HvDropdownList } from "./List/List.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 import { HvTypography } from "../Typography/Typography.js";
 const DEFAULT_LABELS = {
@@ -195,8 +194,6 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
       }
     );
   };
-  const hasLabel = label != null;
-  const hasDescription = description != null;
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const isStateInvalid = isInvalid(validationState);
   let errorMessageId;
@@ -221,25 +218,20 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
       ),
       ...others,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              id: setId(elementId, "label"),
-              label,
-              className: classes.label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx(
-            HvInfoMessage,
-            {
-              id: setId(elementId, "description"),
-              className: classes.description,
-              children: description
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
+          {
+            label,
+            description,
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          )
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           HvBaseDropdown,
           {
@@ -295,7 +287,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
                 hasTooltips,
                 singleSelectionToggle,
                 "aria-label": ariaLabel,
-                "aria-labelledby": hasLabel ? setId(elementId, "label") : void 0,
+                "aria-labelledby": label ? setId(elementId, "label") : void 0,
                 height,
                 maxHeight,
                 virtualized,

package/dist/esm/Dropdown/Dropdown.styles.js

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
     position: "relative",
     display: "inline-block"
   },
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   label: {},
   description: {},
   error: {},

package/dist/esm/DropdownButton/DropdownButton.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./DropdownButton.styles.js";
 import { staticClasses } from "./DropdownButton.styles.js";
 import { HvButton } from "../Button/Button.js";
@@ -14,12 +14,13 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
     open,
     icon,
     readOnly,
-    children,
+    children: childrenProp,
     variant,
     ...others
   } = useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = useClasses(classesProp, false);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { size: "XS", rotate: open });
+  const endIcon = !icon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: open });
+  const children = childrenProp && typeof childrenProp === "string" ? /* @__PURE__ */ jsx("div", { className: classes.placeholder, children: childrenProp }) : childrenProp;
   return /* @__PURE__ */ jsx(
     HvButton,
     {
@@ -40,7 +41,7 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
       endIcon,
       variant: open ? "secondarySubtle" : variant,
       ...others,
-      children: /* @__PURE__ */ jsx("div", { className: cx({ [classes.selection]: !icon }), children: children && typeof children === "string" ? /* @__PURE__ */ jsx("div", { className: classes.placeholder, children }) : children })
+      children: icon ? children : /* @__PURE__ */ jsx("div", { className: classes.selection, children })
     }
   );
 });

package/dist/esm/FileUploader/DropZone/DropZone.js

@@ -1,17 +1,16 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useContext, useState, useRef } from "react";
-import { Doc } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../../FormElement/LabelContainer.js";
 import { useLabels } from "../../hooks/useLabels.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
+import { HvIcon } from "../../icons.js";
 import { uniqueId } from "../../utils/helpers.js";
 import { setId } from "../../utils/setId.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./DropZone.styles.js";
 import { staticClasses } from "./DropZone.styles.js";
 import { HvFormElementContext } from "../../FormElement/context.js";
-import { HvLabel } from "../../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../../FormElement/InfoMessage/InfoMessage.js";
 const DEFAULT_LABELS = {
   /** Extensions of the accepted file types */
   acceptedFiles: "",
@@ -98,23 +97,26 @@ const HvDropZone = (props) => {
     });
     onFilesAdded?.(newFiles);
   };
+  const description = /* @__PURE__ */ jsxs(Fragment, { children: [
+    Number.isInteger(maxFileSize) && `${labels.sizeWarning} ${convertUnits(maxFileSize)}`,
+    labels.acceptedFiles || accept && ` (${accept?.replaceAll(",", ", ")})`
+  ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !hideLabels && /* @__PURE__ */ jsxs("div", { id, className: classes.dropZoneLabelsGroup, children: [
-      /* @__PURE__ */ jsx(
-        HvLabel,
-        {
-          showGutter: true,
-          id: setId(id, "input-file-label"),
-          htmlFor: setId(id, "input-file"),
-          label: label ?? labels?.dropzone,
-          className: classes.dropZoneLabel
+    !hideLabels && /* @__PURE__ */ jsx(
+      HvLabelContainer,
+      {
+        id,
+        label: label ?? labels.dropzone,
+        description,
+        inputId: setId(id, "input-file"),
+        labelId: setId(id, "input-file-label"),
+        descriptionId: setId(id, "description"),
+        classes: {
+          root: classes.dropZoneLabelsGroup,
+          label: classes.dropZoneLabel
         }
-      ),
-      /* @__PURE__ */ jsxs(HvInfoMessage, { id: setId(id, "description"), children: [
-        Number.isInteger(maxFileSize) && `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`,
-        labels?.acceptedFiles ? labels.acceptedFiles : accept && ` (${accept?.replaceAll(",", ", ")})`
-      ] })
-    ] }),
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -162,7 +164,14 @@ const HvDropZone = (props) => {
             }
           ),
           /* @__PURE__ */ jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsx("div", { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Doc, { size: "M", className: classes.dropZoneAreaIcon }),
+            /* @__PURE__ */ jsx(
+              HvIcon,
+              {
+                name: "Doc",
+                size: "md",
+                className: classes.dropZoneAreaIcon
+              }
+            ),
             /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxs("div", { className: classes.dragText, children: [
               labels?.drag,
               /* @__PURE__ */ jsx(

package/dist/esm/FileUploader/DropZone/DropZone.styles.js

@@ -19,9 +19,6 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
     }
   },
   dropZoneLabelsGroup: {
-    display: "flex",
-    justifyContent: "start",
-    "& label:nth-of-type(1)": {},
     "& p:nth-of-type(2)": {
       marginLeft: "auto"
     }

package/dist/esm/FileUploader/File/File.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Close, Fail, Success } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./File.styles.js";
 import { staticClasses } from "./File.styles.js";
@@ -10,9 +10,9 @@ import { HvIconButton } from "../../IconButton/IconButton.js";
 const getStatusIcon = (classes, status) => {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsx(Success, { className: classes?.icon, color: "positive" });
+      return /* @__PURE__ */ jsx(HvIcon, { name: "Success", className: classes?.icon, color: "positive" });
     case "fail":
-      return /* @__PURE__ */ jsx(Fail, { className: classes?.icon, color: "negative" });
+      return /* @__PURE__ */ jsx(HvIcon, { name: "Fail", className: classes?.icon, color: "negative" });
     default:
       return /* @__PURE__ */ jsx("div", { className: classes?.icon });
   }
@@ -71,7 +71,7 @@ const HvFile = (props) => {
         title: removeFileButtonLabel,
         className: classes.removeButton,
         onClick: () => onFileRemoved?.(data),
-        children: /* @__PURE__ */ jsx(Close, { iconSize: "XS" })
+        children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", size: "xs" })
       }
     )
   ] });

package/dist/esm/FileUploader/Preview/Preview.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { Preview } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { EyeIcon } from "../../Input/icons.js";
 import { useClasses } from "./Preview.styles.js";
 import { staticClasses } from "./Preview.styles.js";
 import { HvButton } from "../../Button/Button.js";
@@ -32,7 +32,7 @@ const HvFileUploaderPreview = (props) => {
         children: [
           children,
           !disableOverlay && /* @__PURE__ */ jsx("div", { className: classes.overlay, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-            Preview,
+            EyeIcon,
             {
               className: css({
                 position: "absolute",

package/dist/esm/FilterGroup/FilterContent/FilterContent.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useContext, useRef, useMemo } from "react";
-import { Filters } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./FilterContent.styles.js";
@@ -71,7 +71,7 @@ const HvFilterGroupContent = forwardRef(function HvFilterGroupContent2(props, re
   };
   const Header = useMemo(
     () => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Filters, {}),
+      /* @__PURE__ */ jsx(HvIcon, { name: "Filters" }),
       /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: labels?.placeholder })
     ] }),
     [labels?.placeholder]

package/dist/esm/FilterGroup/FilterGroup.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
@@ -10,8 +11,6 @@ import { staticClasses } from "./FilterGroup.styles.js";
 import { HvFilterGroupProvider } from "./FilterGroupContext.js";
 import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const DEFAULT_LABELS = {
   /** Apply button label. */
@@ -63,8 +62,6 @@ const HvFilterGroup = forwardRef(
     const [validationMessage] = useControlled(statusMessage, "Required");
     const elementId = useUniqueId(id);
     const labels = useLabels(DEFAULT_LABELS, labelsProp);
-    const hasLabel = label != null;
-    const hasDescription = description != null;
     const canShowError = status !== void 0 || required;
     return /* @__PURE__ */ jsxs(
       HvFormElement,
@@ -78,26 +75,21 @@ const HvFilterGroup = forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                id: setId(elementId, "label"),
-                htmlFor: setId(elementId, "input"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                id: setId(elementId, "description"),
-                className: classes.description,
-                children: description
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
+            {
+              label,
+              description,
+              inputId: setId(elementId, "input"),
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
               }
-            )
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsxs(
             HvFilterGroupProvider,
             {

package/dist/esm/FilterGroup/FilterGroup.styles.js

@@ -2,7 +2,7 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvFilterGroup", {
   root: {},
   label: {},
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   description: {},
   error: {}
 });

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

@@ -1,8 +1,12 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvAdornment", {
   root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     width: 32,
-    height: 30
+    height: 30,
+    flexShrink: 0
   },
   /** @deprecated use `classes.root` */
   icon: {},

package/dist/esm/FormElement/InfoMessage/InfoMessage.js

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

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

@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvInfoMessage", {
   root: { color: theme.colors.textSubtle, display: "inline-block" },
   infoDisabled: { color: theme.colors.textDisabled },
-  gutter: { padding: `0 0 6px ${theme.space.xs}` }
+  gutter: { padding: theme.spacing(0, 0, "xxs", "xs") }
 });
 export {
   staticClasses,

package/dist/esm/FormElement/Label/Label.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { setId } from "../../utils/setId.js";
 import { HvFormElementContext } from "../context.js";
@@ -25,7 +25,10 @@ const HvLabel = (props) => {
   const disabled = disabledProp ?? context.disabled;
   const required = requiredProp ?? context.required;
   const id = idProp ?? setId(context.id, "label");
-  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;
+  const forId = useMemo(
+    () => htmlForProp || findDescriptors(children)?.input?.[0]?.id,
+    [children, htmlForProp]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       HvTypography,

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

@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvLabel", {
   root: { fontWeight: theme.fontWeights.normal, display: "inline-block" },
   labelDisabled: { color: theme.colors.textDisabled },
-  childGutter: { paddingBottom: 4 }
+  childGutter: { paddingBottom: theme.space.xxs }
 });
 export {
   staticClasses,

package/dist/esm/FormElement/LabelContainer.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+import { HvInfoMessage } from "./InfoMessage/InfoMessage.js";
+import { HvLabel } from "./Label/Label.js";
+const { useClasses } = createClasses("HvLabelContainer", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.xs,
+    height: 24,
+    marginBottom: theme.space.xxs
+  },
+  label: {},
+  description: {}
+});
+const HvLabelContainer = (props) => {
+  const {
+    label,
+    description,
+    inputId,
+    labelId,
+    descriptionId,
+    classes: classesProp,
+    labelProps,
+    descriptionProps,
+    children,
+    ...others
+  } = useDefaultProps("HvLabelContainer", props);
+  const { classes } = useClasses(classesProp, false);
+  if (label == null && description == null && children == null) return null;
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, ...others, children: [
+    label != null && /* @__PURE__ */ jsx(
+      HvLabel,
+      {
+        id: labelId,
+        className: classes.label,
+        htmlFor: inputId,
+        label,
+        ...labelProps
+      }
+    ),
+    description != null && /* @__PURE__ */ jsx(
+      HvInfoMessage,
+      {
+        disableGutter: true,
+        id: descriptionId,
+        className: classes.description,
+        ...descriptionProps,
+        children: description
+      }
+    ),
+    children
+  ] });
+};
+export {
+  HvLabelContainer
+};

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

@@ -17,10 +17,10 @@ const HvSuggestions = forwardRef(function HvSuggestions2(props, extRef) {
     className,
     classes: classesProp,
     expanded = false,
-    enablePortal = false,
+    enablePortal,
     open: openProp,
     anchorEl,
-    suggestionValues = [],
+    suggestionValues,
     onClose,
     onSuggestionSelected,
     popperProps,

package/dist/esm/FormElement/WarningText/WarningText.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Fail } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { setId } from "../../utils/setId.js";
 import { HvFormElementContext } from "../context.js";
 import { useClasses } from "./WarningText.styles.js";
@@ -15,10 +15,10 @@ const HvWarningText = (props) => {
     className,
     id: idProp,
     disabled: disabledProp,
-    disableGutter = false,
-    disableBorder = false,
-    disableAdornment = false,
-    hideText = false,
+    disableGutter,
+    disableBorder,
+    disableAdornment,
+    hideText,
     ...others
   } = useDefaultProps("HvWarningText", props);
   const { classes, cx } = useClasses(classesProp);
@@ -27,7 +27,7 @@ const HvWarningText = (props) => {
   const visible = isVisibleProp ?? context.status === "invalid";
   const id = idProp ?? setId(context.id, "error");
   const showWarning = visible && !disabled;
-  const adornment = adornmentProp || /* @__PURE__ */ jsx(Fail, { size: "xs", className: classes.defaultIcon });
+  const adornment = adornmentProp || /* @__PURE__ */ jsx(HvIcon, { name: "Fail", size: "xs", className: classes.defaultIcon });
   return /* @__PURE__ */ jsxs(
     "div",
     {

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

@@ -5,7 +5,7 @@ const { staticClasses, useClasses } = createClasses("HvWarningText", {
     display: "none",
     color: theme.form.errorColor
   },
-  defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
+  defaultIcon: { margin: 6 },
   warningText: {
     ...theme.typography.caption1,
     color: "inherit",

package/dist/esm/FormElement/utils.js

@@ -52,13 +52,8 @@ const buildAriaPropsFromContext = (props, context, isInvalid2, inputId) => {
   }
   return arias;
 };
-const validationStates = Object.freeze({
-  standBy: "standBy",
-  valid: "valid",
-  invalid: "invalid"
-});
-const isValid = (state) => state === validationStates.valid;
-const isInvalid = (state) => state === validationStates.invalid;
+const isValid = (state) => state === "valid";
+const isInvalid = (state) => state === "invalid";
 export {
   buildAriaPropsFromContext,
   buildFormElementPropsFromContext,
@@ -66,6 +61,5 @@ export {
   getIdReferenceFor,
   getIdReferenceListFor,
   isInvalid,
-  isValid,
-  validationStates
+  isValid
 };

package/dist/esm/InlineEditor/InlineEditor.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { Edit } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useEnhancedEffect } from "../hooks/useEnhancedEffect.js";
+import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./InlineEditor.styles.js";
@@ -99,8 +99,10 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
     {
       variant: "secondaryGhost",
       endIcon: /* @__PURE__ */ jsx(
-        Edit,
+        HvIcon,
         {
+          compact: true,
+          name: "Edit",
           color: "textDisabled",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon

package/dist/esm/InlineEditor/InlineEditor.styles.js

@@ -45,8 +45,7 @@ const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
   icon: {
     cursor: "pointer",
     visibility: "hidden",
-    alignSelf: "center",
-    height: 16
+    alignSelf: "center"
   },
   iconVisible: {
     visibility: "visible"