@hitachivantara/uikit-react-core 5.91.2 → 5.92.0

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/DropdownButton/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const endIcon = icon ? undefined : <DropDownXS size=\"XS\" rotate={open} />;\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      data-popper-placement={placement}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,UAAU,OAAO,SAAY,oBAAC,cAAW,MAAK,MAAK,QAAQ,MAAM;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,yBAAuB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAM,CAAA,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,SAAS,CAAA,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { HvIcon } from \"../icons\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children: childrenProp,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const endIcon = !icon && <HvIcon name=\"CaretDown\" size=\"xs\" rotate={open} />;\n\n  const children =\n    childrenProp && typeof childrenProp === \"string\" ? (\n      <div className={classes.placeholder}>{childrenProp}</div>\n    ) : (\n      childrenProp\n    );\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      data-popper-placement={placement}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      {icon ? children : <div className={classes.selection}>{children}</div>}\n    </HvButton>\n  );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,UAAU,CAAC,QAAS,oBAAA,QAAA,EAAO,MAAK,aAAY,MAAK,MAAK,QAAQ,KAAM,CAAA;AAEpE,QAAA,WACJ,gBAAgB,OAAO,iBAAiB,WACrC,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAA,aAAA,CAAa,IAEnD;AAIF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,yBAAuB;AAAA,MACvB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEH,iBAAO,WAAW,oBAAC,SAAI,WAAW,QAAQ,WAAY,SAAS,CAAA;AAAA,IAAA;AAAA,EAClE;AAEJ,CAAC;"}

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

@@ -1,9 +1,9 @@
 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 { 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";
@@ -162,7 +162,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.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { useContext, useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementProps,\n  HvInfoMessage,\n  HvLabel,\n} from \"../../FormElement\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  /** Extensions of the accepted file types */\n  acceptedFiles: \"\",\n  /** Dropzone area label. @deprecated use `label` prop instead */\n  dropzone: \"Label\",\n  /** Size file warning label. */\n  sizeWarning: \"Max. file size:\",\n  /** Size file warning label. */\n  drag: \"Drop files here or\",\n  /** Size file warning label. */\n  selectFiles: \"click to upload\",\n  /** Theming sheet used to style components */\n  dropFiles: \"Drop files here\",\n  /** Message to display when file size is greater than allowed */\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  /** Message to display when file type is greater than allowed */\n  fileTypeError: \"File type not allowed for upload\",\n\n  removeFileButtonLabel: \"Remove File\",\n};\n\nexport type HvDropZoneLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvDropZoneProps\n  extends Pick<HvFormElementProps, \"id\" | \"disabled\" | \"label\"> {\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    label,\n    labels: labelsProp,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes, cx } = useClasses(classesProp);\n  const { disabled } = useContext(HvFormElementContext);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            showGutter\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={label ?? labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <div className={classes.dragText}>{labels?.dropFiles}</div>\n            </div>\n          ) : (\n            <>\n              <Doc size=\"M\" className={classes.dropZoneAreaIcon} />\n              <div className={classes.dropZoneAreaLabels}>\n                <div className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { useContext, useRef, useState } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElementContext,\n  HvFormElementProps,\n  HvInfoMessage,\n  HvLabel,\n} from \"../../FormElement\";\nimport { useLabels } from \"../../hooks/useLabels\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvIcon } from \"../../icons\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  /** Extensions of the accepted file types */\n  acceptedFiles: \"\",\n  /** Dropzone area label. @deprecated use `label` prop instead */\n  dropzone: \"Label\",\n  /** Size file warning label. */\n  sizeWarning: \"Max. file size:\",\n  /** Size file warning label. */\n  drag: \"Drop files here or\",\n  /** Size file warning label. */\n  selectFiles: \"click to upload\",\n  /** Theming sheet used to style components */\n  dropFiles: \"Drop files here\",\n  /** Message to display when file size is greater than allowed */\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  /** Message to display when file type is greater than allowed */\n  fileTypeError: \"File type not allowed for upload\",\n\n  removeFileButtonLabel: \"Remove File\",\n};\n\nexport type HvDropZoneLabels = Partial<typeof DEFAULT_LABELS>;\n\nexport interface HvDropZoneProps\n  extends Pick<HvFormElementProps, \"id\" | \"disabled\" | \"label\"> {\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    label,\n    labels: labelsProp,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const { classes, cx } = useClasses(classesProp);\n  const { disabled } = useContext(HvFormElementContext);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            showGutter\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={label ?? labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <div className={classes.dragText}>{labels?.dropFiles}</div>\n            </div>\n          ) : (\n            <>\n              <HvIcon\n                name=\"Doc\"\n                size=\"md\"\n                className={classes.dropZoneAreaIcon}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <div className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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/File/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","sources":["../../../../src/FileUploader/File/File.tsx"],"sourcesContent":["import { Close, Fail, Success } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvProgressBar } from \"../../ProgressBar\";\nimport { HvTypography } from \"../../Typography\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"],\n) => {\n  switch (status) {\n    case \"success\":\n      return <Success className={classes?.icon} color=\"positive\" />;\n    case \"fail\":\n      return <Fail className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = (props: HvFileProps) => {\n  const {\n    classes: classesProp,\n    data,\n    onFileRemoved,\n    removeFileButtonLabel,\n  } = useDefaultProps(\"HvFile\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack,\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <div className={classes.nameText}>\n        <HvTypography noWrap variant=\"label\">\n          {data.name}\n        </HvTypography>\n\n        <span className={classes.progressTextContainer}>{progressText}</span>\n      </div>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvIconButton\n        title={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n      >\n        <Close iconSize=\"XS\" />\n      </HvIconButton>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0EA,MAAM,gBAAgB,CACpB,SACA,WACG;AACH,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,iCAAQ,SAAQ,EAAA,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAC7D,KAAK;AACH,iCAAQ,MAAK,EAAA,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAC1D;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAW,SAAS,KAAM,CAAA;AAAA,EAAA;AAE5C;AAEA,MAAM,kBAAkB,CAAC,MAAkB,YAA4B;AAC/D,QAAA,YAAY,KAAK,WAAW;AAC5B,QAAA,aAAa,KAAK,WAAW;AAEnC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,KAAK,YAAY,KAAK,QAAQ,KAAK,eAAe,QAAc;AAAA,IAEhE,cAAc,KAAK,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SACnB,UAAG,GAAA,aAAa,KAAK,QAAQ,CAAC,OACjC;AAAA,IAGD,CAAC,aAAa,KAAK,QAClB,oBAAC,cAAc,EAAA,UAAA,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,CAAA;AAAA,IAG7C,aAAa,KAAK,gBACjB,oBAAC,gBAAa,WAAW,SAAS,MAC/B,UAAA,KAAK,aACR,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,qBAAqB,CAAC,EAAE,MAAM,eAA2B;AACvD,QAAA,QACJ,YAAY,QAAQ,QAAQ,OAAO,KAAK,MAAO,WAAW,MAAO,IAAI,IAAI;AAEpE,SAAA;AACT;AAEa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,UAAU,KAAK;AACnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,WAAW,KAAK,WAAW;AAE3B,QAAA,aAAa,KAAK,WAAW;AAE7B,QAAA,eAAe,gBAAgB,MAAM,OAAO;AAElD,QAAM,aAAa,cAAc,SAAS,KAAK,MAAM;AAE/C,QAAA,kBAAkB,mBAAmB,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,MACpB,UAAA;AAAA,IAAA,CAAC,YAAY,cACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,sBAAsB;AAAA,YACpB,QAAQ;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,QAEZ;AAAA,QACA,OAAO;AAAA,QACP,WAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAEA,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACtB,UAAA;AAAA,MAAA,oBAAC,gBAAa,QAAM,MAAC,SAAQ,SAC1B,eAAK,MACR;AAAA,MAEC,oBAAA,QAAA,EAAK,WAAW,QAAQ,uBAAwB,UAAa,aAAA,CAAA;AAAA,IAAA,GAChE;AAAA,IAEC,KAAK,WACH,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,eAAK,QAAQ,CAAA;AAAA,IAG1D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,SAAS,MAAM,gBAAgB,IAAI;AAAA,QAEnC,UAAA,oBAAC,OAAM,EAAA,UAAS,KAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvB,GACF;AAEJ;"}
+{"version":3,"file":"File.js","sources":["../../../../src/FileUploader/File/File.tsx"],"sourcesContent":["import {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../../IconButton\";\nimport { HvIcon } from \"../../icons\";\nimport { HvProgressBar } from \"../../ProgressBar\";\nimport { HvTypography } from \"../../Typography\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./File.styles\";\n\nexport { staticClasses as fileClasses };\n\nexport type HvFileClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileData extends Omit<File, \"name\" | \"size\"> {\n  /**\n   * The file id.\n   */\n  id?: string;\n  /**\n   * The file name.\n   */\n  name?: string;\n  /**\n   * The upload status.\n   */\n  status?: \"progress\" | \"success\" | \"fail\";\n  /**\n   * The file size in bytes.\n   */\n  size?: number;\n  /**\n   * Upload progress in bytes.\n   */\n  progress?: number;\n  /**\n   * Optional node representing a preview of the uploaded file.\n   */\n  preview?: React.ReactNode;\n  /**\n   * Error message when the upload failed.\n   */\n  errorMessage?: string;\n}\n\nexport type HvFilesAddedEvent = (files: HvFileData[]) => void;\n\nexport type HvFileRemovedEvent = (file: HvFileData) => void;\n\nexport type HvFileProps = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * File information to be displayed.\n   */\n  data: HvFileData;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in file list.\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileClasses;\n};\n\nconst getStatusIcon = (\n  classes?: HvFileClasses,\n  status?: HvFileData[\"status\"],\n) => {\n  switch (status) {\n    case \"success\":\n      return (\n        <HvIcon name=\"Success\" className={classes?.icon} color=\"positive\" />\n      );\n    case \"fail\":\n      return <HvIcon name=\"Fail\" className={classes?.icon} color=\"negative\" />;\n    default:\n      return <div className={classes?.icon} />;\n  }\n};\n\nconst getProgressText = (data: HvFileData, classes?: HvFileClasses) => {\n  const hasFailed = data.status === \"fail\";\n  const inProgress = data.status === \"progress\";\n\n  return (\n    <>\n      {data.progress || data.size || data.errorMessage ? `\\xa0|\\xa0` : null}\n\n      {inProgress && data.progress != null && (\n        <HvTypography variant=\"label\">\n          {`${convertUnits(data.progress)}\\xa0/\\xa0`}\n        </HvTypography>\n      )}\n\n      {!hasFailed && data.size && (\n        <HvTypography>{`${convertUnits(data.size)}`}</HvTypography>\n      )}\n\n      {hasFailed && data.errorMessage && (\n        <HvTypography className={classes?.fail}>\n          {data.errorMessage}\n        </HvTypography>\n      )}\n    </>\n  );\n};\n\nconst getProgressBarWith = ({ size, progress }: HvFileData) => {\n  const width =\n    progress != null && size != null ? Math.round((progress * 100) / size) : 0;\n\n  return width;\n};\n\nexport const HvFile = (props: HvFileProps) => {\n  const {\n    classes: classesProp,\n    data,\n    onFileRemoved,\n    removeFileButtonLabel,\n  } = useDefaultProps(\"HvFile\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const hasError = data.status === \"fail\";\n\n  const inProgress = data.status === \"progress\";\n\n  const progressText = getProgressText(data, classes);\n\n  const statusIcon = getStatusIcon(classes, data.status);\n\n  const currentProgress = getProgressBarWith(data);\n\n  return (\n    <li className={classes.root}>\n      {!hasError && inProgress && (\n        <HvProgressBar\n          classes={{\n            root: classes.progressbar,\n            progressBarContainer: cx(\n              classes.progressbarContainer,\n              classes.progressbarBack,\n            ),\n          }}\n          value={currentProgress}\n          hideLabel\n        />\n      )}\n\n      {statusIcon}\n\n      <div className={classes.nameText}>\n        <HvTypography noWrap variant=\"label\">\n          {data.name}\n        </HvTypography>\n\n        <span className={classes.progressTextContainer}>{progressText}</span>\n      </div>\n\n      {data.preview && (\n        <div className={classes.previewContainer}>{data.preview}</div>\n      )}\n\n      <HvIconButton\n        title={removeFileButtonLabel}\n        className={classes.removeButton}\n        onClick={() => onFileRemoved?.(data)}\n      >\n        <HvIcon name=\"Close\" size=\"xs\" />\n      </HvIconButton>\n    </li>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0EA,MAAM,gBAAgB,CACpB,SACA,WACG;AACH,UAAQ,QAAQ;AAAA,IACd,KAAK;AAED,aAAA,oBAAC,UAAO,MAAK,WAAU,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IAEtE,KAAK;AACI,aAAA,oBAAC,UAAO,MAAK,QAAO,WAAW,SAAS,MAAM,OAAM,YAAW;AAAA,IACxE;AACE,aAAQ,oBAAA,OAAA,EAAI,WAAW,SAAS,KAAM,CAAA;AAAA,EAAA;AAE5C;AAEA,MAAM,kBAAkB,CAAC,MAAkB,YAA4B;AAC/D,QAAA,YAAY,KAAK,WAAW;AAC5B,QAAA,aAAa,KAAK,WAAW;AAEnC,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,KAAK,YAAY,KAAK,QAAQ,KAAK,eAAe,QAAc;AAAA,IAEhE,cAAc,KAAK,YAAY,QAC7B,oBAAA,cAAA,EAAa,SAAQ,SACnB,UAAG,GAAA,aAAa,KAAK,QAAQ,CAAC,OACjC;AAAA,IAGD,CAAC,aAAa,KAAK,QAClB,oBAAC,cAAc,EAAA,UAAA,GAAG,aAAa,KAAK,IAAI,CAAC,GAAG,CAAA;AAAA,IAG7C,aAAa,KAAK,gBACjB,oBAAC,gBAAa,WAAW,SAAS,MAC/B,UAAA,KAAK,aACR,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,MAAM,qBAAqB,CAAC,EAAE,MAAM,eAA2B;AACvD,QAAA,QACJ,YAAY,QAAQ,QAAQ,OAAO,KAAK,MAAO,WAAW,MAAO,IAAI,IAAI;AAEpE,SAAA;AACT;AAEa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,UAAU,KAAK;AACnC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,WAAW,KAAK,WAAW;AAE3B,QAAA,aAAa,KAAK,WAAW;AAE7B,QAAA,eAAe,gBAAgB,MAAM,OAAO;AAElD,QAAM,aAAa,cAAc,SAAS,KAAK,MAAM;AAE/C,QAAA,kBAAkB,mBAAmB,IAAI;AAE/C,SACG,qBAAA,MAAA,EAAG,WAAW,QAAQ,MACpB,UAAA;AAAA,IAAA,CAAC,YAAY,cACZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,UACd,sBAAsB;AAAA,YACpB,QAAQ;AAAA,YACR,QAAQ;AAAA,UAAA;AAAA,QAEZ;AAAA,QACA,OAAO;AAAA,QACP,WAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAGD;AAAA,IAEA,qBAAA,OAAA,EAAI,WAAW,QAAQ,UACtB,UAAA;AAAA,MAAA,oBAAC,gBAAa,QAAM,MAAC,SAAQ,SAC1B,eAAK,MACR;AAAA,MAEC,oBAAA,QAAA,EAAK,WAAW,QAAQ,uBAAwB,UAAa,aAAA,CAAA;AAAA,IAAA,GAChE;AAAA,IAEC,KAAK,WACH,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBAAmB,eAAK,QAAQ,CAAA;AAAA,IAG1D;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,SAAS,MAAM,gBAAgB,IAAI;AAAA,QAEnC,UAAC,oBAAA,QAAA,EAAO,MAAK,SAAQ,MAAK,KAAK,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjC,GACF;AAEJ;"}

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/FileUploader/Preview/Preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"Preview.js","sources":["../../../../src/FileUploader/Preview/Preview.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Preview } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { staticClasses, useClasses } from \"./Preview.styles\";\n\nexport { staticClasses as fileUploaderPreviewClasses };\n\nexport type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileUploaderPreviewProps\n  extends Omit<HvButtonProps, \"children\" | \"classes\"> {\n  /**\n   * Content that represents the preview of an uploaded file.\n   */\n  children: React.ReactNode;\n  /**\n   * Callback executed when the preview is unmounted.\n   *\n   * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`.\n   */\n  onUnload?: () => void;\n  /**\n   * If `true`, doesn't show an overlay on top of the preview when hovering.\n   *\n   * Only applies when `onClick` is set.\n   */\n  disableOverlay?: boolean;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileUploaderPreviewClasses;\n}\n\n/**\n * The `HvFileUploaderPreview` component is available to facilitate the styling\n * of the button (when clickable) and the detection of image unloading.\n */\nexport const HvFileUploaderPreview = (props: HvFileUploaderPreviewProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disableOverlay = false,\n    onUnload,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvFileUploaderPreview\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  useEffect(() => {\n    return () => {\n      onUnload?.();\n    };\n  }, [onUnload]);\n\n  if (onClick) {\n    return (\n      <HvButton\n        icon\n        className={cx(classes.previewButton, className)}\n        onClick={onClick}\n        {...others}\n      >\n        {children}\n        {!disableOverlay && (\n          <div className={classes.overlay} aria-hidden=\"true\">\n            <Preview\n              className={css({\n                position: \"absolute\",\n                left: \"50%\",\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                display: \"none\",\n              })}\n            />\n          </div>\n        )}\n      </HvButton>\n    );\n  }\n\n  return children;\n};\n"],"names":[],"mappings":";;;;;;;AA0Ca,MAAA,wBAAwB,CAAC,UAAsC;AACpE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,yBAAyB,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,YAAU,MAAM;AACd,WAAO,MAAM;AACA,iBAAA;AAAA,IACb;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,SAAS;AAET,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,CAAC,kBACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,eAAY,QAC3C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,IAAI;AAAA,gBACb,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACV,CAAA;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIG,SAAA;AACT;"}
+{"version":3,"file":"Preview.js","sources":["../../../../src/FileUploader/Preview/Preview.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { EyeIcon } from \"../../Input/icons\";\nimport { staticClasses, useClasses } from \"./Preview.styles\";\n\nexport { staticClasses as fileUploaderPreviewClasses };\n\nexport type HvFileUploaderPreviewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileUploaderPreviewProps\n  extends Omit<HvButtonProps, \"children\" | \"classes\"> {\n  /**\n   * Content that represents the preview of an uploaded file.\n   */\n  children: React.ReactNode;\n  /**\n   * Callback executed when the preview is unmounted.\n   *\n   * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`.\n   */\n  onUnload?: () => void;\n  /**\n   * If `true`, doesn't show an overlay on top of the preview when hovering.\n   *\n   * Only applies when `onClick` is set.\n   */\n  disableOverlay?: boolean;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileUploaderPreviewClasses;\n}\n\n/**\n * The `HvFileUploaderPreview` component is available to facilitate the styling\n * of the button (when clickable) and the detection of image unloading.\n */\nexport const HvFileUploaderPreview = (props: HvFileUploaderPreviewProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disableOverlay = false,\n    onUnload,\n    onClick,\n    ...others\n  } = useDefaultProps(\"HvFileUploaderPreview\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  useEffect(() => {\n    return () => {\n      onUnload?.();\n    };\n  }, [onUnload]);\n\n  if (onClick) {\n    return (\n      <HvButton\n        icon\n        className={cx(classes.previewButton, className)}\n        onClick={onClick}\n        {...others}\n      >\n        {children}\n        {!disableOverlay && (\n          <div className={classes.overlay} aria-hidden=\"true\">\n            <EyeIcon\n              className={css({\n                position: \"absolute\",\n                left: \"50%\",\n                top: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                display: \"none\",\n              })}\n            />\n          </div>\n        )}\n      </HvButton>\n    );\n  }\n\n  return children;\n};\n"],"names":[],"mappings":";;;;;;;AA0Ca,MAAA,wBAAwB,CAAC,UAAsC;AACpE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,yBAAyB,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,YAAU,MAAM;AACd,WAAO,MAAM;AACA,iBAAA;AAAA,IACb;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEb,MAAI,SAAS;AAET,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,QAC9C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,CAAC,kBACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAS,eAAY,QAC3C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,IAAI;AAAA,gBACb,UAAU;AAAA,gBACV,MAAM;AAAA,gBACN,KAAK;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACV,CAAA;AAAA,YAAA;AAAA,UAAA,EAEL,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAIG,SAAA;AACT;"}

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/FilterContent/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../FormElement\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>(function HvFilterGroupContent(props, ref) {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvFilterGroupContent"],"mappings":"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"}
+{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../FormElement\";\nimport { HvIcon } from \"../../icons\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>(function HvFilterGroupContent(props, ref) {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <HvIcon name=\"Filters\" />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvFilterGroupContent"],"mappings":";;;;;;;;;;;;;;;AA+CO,MAAM,uBAAuB,WAGlC,SAASA,sBAAqB,OAAO,KAAK;AACpC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,wBAAwB,KAAK;AAEjD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,EAAE,YAAY,IAAI,SAAS;AAEjC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAkB,KAAK;AAE/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,WAAW,oBAAoB;AAE7B,QAAA,cAAc,OAAuB,IAAI;AAE/C,QAAM,mBAAmB,MAAM;AAC7B,gBAAY,SAAS,MAAM;AAAA,EAC7B;AAEM,QAAA,iBAAiB,CAAC,UAA+C;AACxD,iBAAA;AACb,eAAW,OAAO,YAAY;AAC9B,uBAAmB,KAAK;AAAA,EAC1B;AAEM,QAAA,kBAAkB,CACtB,UACG;AACa,oBAAA;AAChB,eAAW,KAAK;AAChB,uBAAmB,KAAK;AAAA,EAC1B;AAEM,QAAA,iBAAiB,CAAC,UAA+C;AACxD,iBAAA;AACb,cAAU,KAAK;AAAA,EACjB;AAEM,QAAA,eAAe,CAAC,OAAc,SAAkB;AAMpD,QAAI,UAAU,KAAM;AACpB,uBAAmB,IAAI;AACnB,QAAA,CAAC,KAAM,mBAAkB,KAAK;AAAA,EACpC;AAEA,QAAM,SAAS;AAAA,IACb,MAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAO,MAAK,UAAU,CAAA;AAAA,MACtB,oBAAA,cAAA,EAAa,SAAQ,SAAS,kBAAQ,YAAY,CAAA;AAAA,IAAA,GACrD;AAAA,IAEF,CAAC,QAAQ,WAAW;AAAA,EACtB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI,MAAM,IAAI,UAAU;AAAA,MACxB,MAAK;AAAA,MACL,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,QAAQ;AAAA,QACf,WAAW,QAAQ;AAAA,QACnB,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb,+BAAY,sBAAqB,EAAA;AAAA,MACjC,aAAa;AAAA,QACX,WAAW,CAAC,EAAE,MAAM,mBAAmB,SAAS,oBAAqB,CAAA;AAAA,MACvE;AAAA,MACA,iBAAc;AAAA,MACd,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,gBAAc,WAAW,YAAY,OAAO;AAAA,MAC5C,qBAAmB,WAAW,YAAY,MAAM,IAAI,OAAO,IAAI;AAAA,MAC/D,oBACE,CAAC,eAAe,MAAM,IAAI,aAAa,GAAG,eAAe,EACtD,KAAK,GAAG,EACR,KAAU,KAAA;AAAA,MAEd,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,OAAI,EAAA,KAAK,aAAa,UAAU,IAAI;AAAA,QACrC,qBAAC,SAAI,WAAW,QAAQ,MAAM,OAAO,EAAE,OACrC,GAAA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAc;AAAA,YAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAc;AAAA,cACd;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,GACF;AAAA,QACC,qBAAA,aAAA,EAAY,WAAW,QAAQ,WAC9B,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,qBAAqB;AAAA,cACnC,UACE,eACI,cAAc,KAAA,EAAO,WAAW,cAAc,KAAA,EAAO,SACrD,cAAc,OAAO,WAAW;AAAA,cAEtC,SAAQ;AAAA,cACR,SAAS;AAAA,cAER,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,8BACC,OAAI,EAAA,eAAY,QAAO,WAAW,QAAQ,OAAO,UAElD,KAAA;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,cAAc;AAAA,cAC5B,UAAU;AAAA,cACV,SACE,aAAa,YAAY;AAAA,cAE3B,SAAS;AAAA,cACT,WAAW,QAAQ;AAAA,cAElB,UAAQ,QAAA;AAAA,YAAA;AAAA,UACX;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,eAAe;AAAA,cAC7B,SACE,aAAa,YAAY;AAAA,cAE3B,SAAS;AAAA,cAER,UAAQ,QAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACX,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

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/Adornment/Adornment.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Adornment.styles.js","sources":["../../../../src/FormElement/Adornment/Adornment.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAdornment\", {\n  root: {\n    width: 32,\n    height: 30,\n  },\n  /** @deprecated use `classes.root` */\n  icon: {},\n  /** @deprecated use `classes.root` */\n  adornment: {},\n  /** @deprecated use `classes.root` */\n  adornmentIcon: {},\n  hideIcon: { display: \"none\" },\n  /** @deprecated use `classes.root` */\n  adornmentButton: {},\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,WAAW,CAAC;AAAA;AAAA,EAEZ,eAAe,CAAC;AAAA,EAChB,UAAU,EAAE,SAAS,OAAO;AAAA;AAAA,EAE5B,iBAAiB,CAAC;AAAA,EAClB,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"Adornment.styles.js","sources":["../../../../src/FormElement/Adornment/Adornment.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAdornment\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: 32,\n    height: 30,\n    flexShrink: 0,\n  },\n  /** @deprecated use `classes.root` */\n  icon: {},\n  /** @deprecated use `classes.root` */\n  adornment: {},\n  /** @deprecated use `classes.root` */\n  adornmentIcon: {},\n  hideIcon: { display: \"none\" },\n  /** @deprecated use `classes.root` */\n  adornmentButton: {},\n  disabled: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,WAAW,CAAC;AAAA;AAAA,EAEZ,eAAe,CAAC;AAAA,EAChB,UAAU,EAAE,SAAS,OAAO;AAAA;AAAA,EAE5B,iBAAiB,CAAC;AAAA,EAClB,UAAU,CAAA;AACZ,CAAC;"}

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/InfoMessage/InfoMessage.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.styles.js","sources":["../../../../src/FormElement/InfoMessage/InfoMessage.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInfoMessage\", {\n  root: { color: theme.colors.textSubtle, display: \"inline-block\" },\n  infoDisabled: { color: theme.colors.textDisabled },\n  gutter: { padding: `0 0 6px ${theme.space.xs}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,OAAO,MAAM,OAAO,YAAY,SAAS,eAAe;AAAA,EAChE,cAAc,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EACjD,QAAQ,EAAE,SAAS,WAAW,MAAM,MAAM,EAAE,GAAG;AACjD,CAAC;"}
+{"version":3,"file":"InfoMessage.styles.js","sources":["../../../../src/FormElement/InfoMessage/InfoMessage.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInfoMessage\", {\n  root: { color: theme.colors.textSubtle, display: \"inline-block\" },\n  infoDisabled: { color: theme.colors.textDisabled },\n  gutter: { padding: theme.spacing(0, 0, \"xxs\", \"xs\") },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,OAAO,MAAM,OAAO,YAAY,SAAS,eAAe;AAAA,EAChE,cAAc,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EACjD,QAAQ,EAAE,SAAS,MAAM,QAAQ,GAAG,GAAG,OAAO,IAAI,EAAE;AACtD,CAAC;"}

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/Label/Label.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.styles.js","sources":["../../../../src/FormElement/Label/Label.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLabel\", {\n  root: { fontWeight: theme.fontWeights.normal, display: \"inline-block\" },\n  labelDisabled: { color: theme.colors.textDisabled },\n  childGutter: { paddingBottom: 4 },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,YAAY,MAAM,YAAY,QAAQ,SAAS,eAAe;AAAA,EACtE,eAAe,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAClD,aAAa,EAAE,eAAe,EAAE;AAClC,CAAC;"}
+{"version":3,"file":"Label.styles.js","sources":["../../../../src/FormElement/Label/Label.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLabel\", {\n  root: { fontWeight: theme.fontWeights.normal, display: \"inline-block\" },\n  labelDisabled: { color: theme.colors.textDisabled },\n  childGutter: { paddingBottom: theme.space.xxs },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,YAAY,MAAM,YAAY,QAAQ,SAAS,eAAe;AAAA,EACtE,eAAe,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAClD,aAAa,EAAE,eAAe,MAAM,MAAM,IAAI;AAChD,CAAC;"}

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/Suggestions/Suggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.js","sources":["../../../../src/FormElement/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper, PopperProps } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /** Props passed to the underlying MUI Popper component */\n  popperProps?: Partial<PopperProps>;\n}\n\nexport const HvSuggestions = forwardRef<\n  // no-indent\n  unknown,\n  HvSuggestionsProps\n>(function HvSuggestions(props, extRef) {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal = false,\n    open: openProp,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    popperProps,\n    ...others\n  } = useDefaultProps(\"HvSuggestions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const context = useContext(HvFormElementContext);\n  const id = idProp ?? setId(context.id, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={id}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n          {...popperProps}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(id, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":["HvSuggestions"],"mappings":";;;;;;;;;;;;;AA4DO,MAAM,gBAAgB,WAI3B,SAASA,eAAc,OAAO,QAAQ;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,UAAU,WAAW,oBAAoB;AAC/C,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cACA,GAAG;AAAA,cAEJ,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,IAAI,MAAM;AAAA,kBACpB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,MADS,GAAA,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Suggestions.js","sources":["../../../../src/FormElement/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper, PopperProps } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible */\n  open?: boolean;\n  /**\n   * Whether suggestions is visible.\n   * @deprecated use `open` instead.\n   * */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: ClickAwayListenerProps[\"onClickAway\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n  /**\n   * If enabled, the suggestions list will be rendered using a portal.\n   * If disabled, it will be under the DOM hierarchy of the parent component.\n   * @default false\n   * */\n  enablePortal?: boolean;\n  /** Props passed to the underlying MUI Popper component */\n  popperProps?: Partial<PopperProps>;\n}\n\nexport const HvSuggestions = forwardRef<\n  // no-indent\n  unknown,\n  HvSuggestionsProps\n>(function HvSuggestions(props, extRef) {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    expanded = false,\n    enablePortal,\n    open: openProp,\n    anchorEl,\n    suggestionValues,\n    onClose,\n    onSuggestionSelected,\n    popperProps,\n    ...others\n  } = useDefaultProps(\"HvSuggestions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const context = useContext(HvFormElementContext);\n  const id = idProp ?? setId(context.id, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  // TODO: remove controlled+uncontrolled `expanded` prop in v6\n  const [isOpen, setIsOpen] = useState(expanded);\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <div\n      id={id}\n      ref={forkedRef}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      <ClickAwayListener\n        onClickAway={(event) => {\n          setIsOpen(false);\n          onClose?.(event);\n        }}\n      >\n        <Popper\n          style={{\n            // @ts-ignore\n            \"--popper-width\": enablePortal\n              ? `${anchorEl?.clientWidth}px`\n              : \"100%\",\n          }}\n          open={openProp ?? isOpen}\n          disablePortal={!enablePortal}\n          container={enablePortal ? getContainerElement(rootId) : undefined}\n          anchorEl={anchorEl}\n          className={cx(classes.popper, {\n            [classes.portal]: enablePortal,\n          })}\n          {...popperProps}\n        >\n          <HvSelectionList\n            className={classes.list}\n            id={setId(id, \"list\")}\n            onChange={onSuggestionSelected}\n          >\n            {suggestionValues?.map((item) => (\n              <HvListItem key={item.id} value={item} disabled={item.disabled}>\n                {item.label}\n              </HvListItem>\n            ))}\n          </HvSelectionList>\n        </Popper>\n      </ClickAwayListener>\n    </div>\n  );\n});\n"],"names":["HvSuggestions"],"mappings":";;;;;;;;;;;;;AA4DO,MAAM,gBAAgB,WAI3B,SAASA,eAAc,OAAO,QAAQ;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,UAAU,WAAW,oBAAoB;AAC/C,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA;AAAA,gBAEL,kBAAkB,eACd,GAAG,UAAU,WAAW,OACxB;AAAA,cACN;AAAA,cACA,MAAM,YAAY;AAAA,cAClB,eAAe,CAAC;AAAA,cAChB,WAAW,eAAe,oBAAoB,MAAM,IAAI;AAAA,cACxD;AAAA,cACA,WAAW,GAAG,QAAQ,QAAQ;AAAA,gBAC5B,CAAC,QAAQ,MAAM,GAAG;AAAA,cAAA,CACnB;AAAA,cACA,GAAG;AAAA,cAEJ,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,IAAI,MAAM;AAAA,kBACpB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,MADS,GAAA,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}

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";
@@ -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.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.js","sources":["../../../../src/FormElement/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment: adornmentProp,\n    isVisible: isVisibleProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    disabled: disabledProp,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const disabled = disabledProp ?? context.disabled;\n  const visible = isVisibleProp ?? context.status === \"invalid\";\n  const id = idProp ?? setId(context.id, \"error\");\n  const showWarning = visible && !disabled;\n  const adornment = adornmentProp || (\n    <Fail size=\"xs\" className={classes.defaultIcon} />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className,\n      )}\n    >\n      {!disableAdornment && adornment}\n      <span\n        id={id}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && children}\n      </span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,WAAW,gBAAgB,QAAQ;AACnC,QAAA,UAAU,iBAAiB,QAAQ,WAAW;AACpD,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,OAAO;AACxC,QAAA,cAAc,WAAW,CAAC;AAC1B,QAAA,YAAY,iBACf,oBAAA,MAAA,EAAK,MAAK,MAAK,WAAW,QAAQ,aAAa;AAIhD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAA,CAAC,oBAAoB;AAAA,QACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,cACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,MAAK;AAAA,YACL,aAAU;AAAA,YACV,iBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAe,eAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"WarningText.js","sources":["../../../../src/FormElement/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIcon } from \"../../icons\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment: adornmentProp,\n    isVisible: isVisibleProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    disabled: disabledProp,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n  const disabled = disabledProp ?? context.disabled;\n  const visible = isVisibleProp ?? context.status === \"invalid\";\n  const id = idProp ?? setId(context.id, \"error\");\n  const showWarning = visible && !disabled;\n  const adornment = adornmentProp || (\n    <HvIcon name=\"Fail\" size=\"xs\" className={classes.defaultIcon} />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className,\n      )}\n    >\n      {!disableAdornment && adornment}\n      <span\n        id={id}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && children}\n      </span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AACzC,QAAA,WAAW,gBAAgB,QAAQ;AACnC,QAAA,UAAU,iBAAiB,QAAQ,WAAW;AACpD,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,OAAO;AACxC,QAAA,cAAc,WAAW,CAAC;AAC1B,QAAA,YAAY,iBAChB,oBAAC,QAAO,EAAA,MAAK,QAAO,MAAK,MAAK,WAAW,QAAQ,YAAa,CAAA;AAI9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAA,CAAC,oBAAoB;AAAA,QACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,cACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,MAAK;AAAA,YACL,aAAU;AAAA,YACV,iBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAe,eAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EACF;AAEJ;"}

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/WarningText/WarningText.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/FormElement/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n  root: {\n    display: \"none\",\n    color: theme.form.errorColor,\n  },\n  defaultIcon: { minWidth: \"24px\", width: \"24px\", height: \"24px\" },\n  warningText: {\n    ...theme.typography.caption1,\n    color: \"inherit\",\n    paddingRight: theme.space.xs,\n  },\n  show: { display: \"flex\" },\n  topGutter: { paddingTop: \"3px\" },\n  hideText: {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  },\n  topBorder: { borderTop: \"1px solid currentcolor\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EACA,aAAa,EAAE,UAAU,QAAQ,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAC/D,aAAa;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,WAAW,EAAE,YAAY,MAAM;AAAA,EAC/B,UAAU;AAAA;AAAA;AAAA,IAGR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,WAAW,yBAAyB;AACnD,CAAC;"}
+{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/FormElement/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n  root: {\n    display: \"none\",\n    color: theme.form.errorColor,\n  },\n  defaultIcon: { margin: 6 },\n  warningText: {\n    ...theme.typography.caption1,\n    color: \"inherit\",\n    paddingRight: theme.space.xs,\n  },\n  show: { display: \"flex\" },\n  topGutter: { paddingTop: \"3px\" },\n  hideText: {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  },\n  topBorder: { borderTop: \"1px solid currentcolor\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EACA,aAAa,EAAE,QAAQ,EAAE;AAAA,EACzB,aAAa;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,WAAW,EAAE,YAAY,MAAM;AAAA,EAC/B,UAAU;AAAA;AAAA;AAAA,IAGR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,WAAW,yBAAyB;AACnD,CAAC;"}

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,9 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
     {
       variant: "secondaryGhost",
       endIcon: /* @__PURE__ */ jsx(
-        Edit,
+        HvIcon,
         {
+          name: "Edit",
           color: "textDisabled",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement | undefined>(undefined);\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = (el: HTMLElement | null) => {\n    if (!el) return;\n    setIsOverflowing(el.scrollWidth > el.clientWidth);\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            inputRoot: classes.inputRoot,\n            input: classes.input,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          endIcon={\n            <Edit\n              color=\"textDisabled\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTooltip title={isOverflowing && value}>\n            <HvTypography\n              component=\"div\"\n              ref={checkOverflow}\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvTooltip>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvIcon } from \"../icons\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement | undefined>(undefined);\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = (el: HTMLElement | null) => {\n    if (!el) return;\n    setIsOverflowing(el.scrollWidth > el.clientWidth);\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            inputRoot: classes.inputRoot,\n            input: classes.input,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          endIcon={\n            <HvIcon\n              name=\"Edit\"\n              color=\"textDisabled\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTooltip title={isOverflowing && value}>\n            <HvTypography\n              component=\"div\"\n              ref={checkOverflow}\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvTooltip>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":";;;;;;;;;;;;;;AAyEO,MAAM,iBAAiB,gBAAgB,SAASA,gBAErD,OAA+B,KAAwB;AACjD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAC9C,QAAA,WAAW,OAAqC,MAAS;AACzD,QAAA,EAAE,YAAY,IAAI,SAAS;AACjC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,mBAAmB,aAAa,WAAW,OAAO,KAAK,CAAC;AACxD,QAAA,EAAE,eAAe;AAEjB,QAAA,gBAAgB,CAAC,OAA2B;AAChD,QAAI,CAAC,GAAI;AACQ,qBAAA,GAAG,cAAc,GAAG,WAAW;AAAA,EAClD;AAEA,oBAAkB,MAAM;AACtB,UAAM,QAAQ,SAAS;AACvB,QAAI,YAAY,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,OAAO;AAAA,IAAA;AAAA,EACf,GACC,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAChB,mBAAe,KAAK;AAAA,EACtB;AAEM,QAAA,aAAqC,CAAC,UAAU;AACpD,gBAAY,KAAK;AAEjB,UAAM,WAAW,SAAS;AAC1B,aAAS,QAAQ;AACjB,aAAS,OAAO,QAAQ;AAAA,EAC1B;AAEM,QAAA,gBAA2C,CAAC,UAAU;AAC1D,QAAI,WAAW;AACX,QAAA,MAAM,OAAO,KAAK,GAAG;AACZ,iBAAA;AACX,kBAAY,KAAK;AACjB,eAAS,QAAQ;AAAA,IAAA;AAEnB,gBAAY,OAAO,QAAQ;AAAA,EAC7B;AAEM,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC7D,aAAS,GAAG;AACZ,eAAW,OAAO,GAAG;AAAA,EACvB;AAGE,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAY,YAAA,CAAC,WACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,mBAAmB,UAAU,aAAa;AAAA,QAAA;AAAA,MAEtD;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EAAA,IAGN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG;AAAA,UACxB,CAAA;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC5B,CAAC,QAAQ,SAAS,GAAG,SAAS,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,WAAA,EAAU,OAAO,iBAAiB,OACjC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL;AAAA,UACA,QAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO;AAAA,UAC1D,GAAG;AAAA,UAEH,UAAS,SAAA;AAAA,QAAA;AAAA,MAAA,EAEd,CAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;"}