@hitachivantara/uikit-react-core 5.83.1 → 5.84.0

package/dist/cjs/FileUploader/DropZone/DropZone.cjs

@@ -4,14 +4,34 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useLabels = require("../../hooks/useLabels.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const DropZone_styles = require("./DropZone.styles.cjs");
+const context = require("../../FormElement/context.cjs");
 const Label = require("../../FormElement/Label/Label.cjs");
 const InfoMessage = require("../../FormElement/InfoMessage/InfoMessage.cjs");
-const Typography = require("../../Typography/Typography.cjs");
+const DEFAULT_LABELS = {
+  /** Extensions of the accepted file types */
+  acceptedFiles: "",
+  /** Dropzone area label. @deprecated use `label` prop instead */
+  dropzone: "Label",
+  /** Size file warning label. */
+  sizeWarning: "Max. file size:",
+  /** Size file warning label. */
+  drag: "Drop files here or",
+  /** Size file warning label. */
+  selectFiles: "click to upload",
+  /** Theming sheet used to style components */
+  dropFiles: "Drop files here",
+  /** Message to display when file size is greater than allowed */
+  fileSizeError: "The file exceeds the maximum upload size",
+  /** Message to display when file type is greater than allowed */
+  fileTypeError: "File type not allowed for upload",
+  removeFileButtonLabel: "Remove File"
+};
 function validateAccept(file, acceptAttr) {
   if (!file || !acceptAttr) return true;
   const acceptEntries = acceptAttr.split(",");
@@ -33,17 +53,19 @@ const HvDropZone = (props) => {
   const {
     id: idProp,
     classes: classesProp,
-    labels,
+    label,
+    labels: labelsProp,
     accept,
     maxFileSize,
     inputProps,
     hideLabels,
     multiple = true,
-    disabled = false,
     onFilesAdded
   } = uikitReactUtils.useDefaultProps("HvDropZone", props);
   const id = useUniqueId.useUniqueId(idProp);
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const { classes, cx } = DropZone_styles.useClasses(classesProp);
+  const { disabled } = React.useContext(context.HvFormElementContext);
   const [dragState, setDragState] = React.useState(false);
   const inputRef = React.useRef(null);
   const handleDragLeave = () => {
@@ -85,7 +107,7 @@ const HvDropZone = (props) => {
           showGutter: true,
           id: setId.setId(id, "input-file-label"),
           htmlFor: setId.setId(id, "input-file"),
-          label: labels?.dropzone,
+          label: label ?? labels?.dropzone,
           className: classes.dropZoneLabel
         }
       ),
@@ -140,16 +162,9 @@ const HvDropZone = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactIcons.Doc,
-              {
-                iconSize: "M",
-                className: classes.dropZoneAreaIcon,
-                color: disabled ? "secondary_60" : "secondary"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { className: classes.dragText, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Doc, { size: "M", className: classes.dropZoneAreaIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.dragText, children: [
               labels?.drag,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",

package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs

@@ -10,15 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     display: "flex",
     border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`,
     cursor: "pointer",
-    background: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
     borderRadius: uikitStyles.theme.radii.round,
     "&:hover": {
-      background: `${uikitStyles.theme.colors.atmo1}`,
-      border: `1px dashed ${uikitStyles.theme.colors.secondary}`
+      borderColor: uikitStyles.theme.colors.secondary
     },
     "&:focus-within": {
-      background: `${uikitStyles.theme.colors.atmo1}`,
-      border: `1px dashed ${uikitStyles.theme.colors.secondary}`,
+      borderColor: uikitStyles.theme.colors.secondary,
       ...focusUtils.outlineStyles
     }
   },
@@ -31,22 +29,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     }
   },
   dragAction: {
-    background: `${uikitStyles.theme.colors.atmo1}`,
-    border: `1px dashed ${uikitStyles.theme.colors.primary}`
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    borderColor: uikitStyles.theme.colors.primary
   },
   dropZoneContainerDisabled: {
-    background: `${uikitStyles.theme.colors.atmo3}`,
-    border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`,
+    color: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: uikitStyles.theme.colors.atmo3,
+    borderColor: "currentcolor",
     cursor: "not-allowed",
     "&:hover": {
-      background: `${uikitStyles.theme.colors.atmo3}`,
-      border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`
-    },
-    "& $dragText": {
-      color: uikitStyles.theme.colors.secondary_60
-    },
-    "& $selectFilesText": {
-      color: uikitStyles.theme.colors.secondary_60
+      borderColor: "currentcolor"
     }
   },
   inputArea: {
@@ -61,7 +53,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
   },
   dropArea: {
     display: "flex",
-    margin: `${uikitStyles.theme.space.md} auto`,
+    margin: uikitStyles.theme.spacing("md", "auto"),
+    gap: uikitStyles.theme.space.xs,
     minHeight: 48
   },
   dropZoneAreaLabels: {
@@ -69,16 +62,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     maxWidth: 120,
     margin: "auto"
   },
-  dropZoneAreaIcon: {
-    margin: "auto",
-    marginRight: uikitStyles.theme.space.xs
-  },
+  dropZoneAreaIcon: {},
   dropZoneLabel: {},
-  dragText: {
-    ...uikitStyles.theme.typography.body
-  },
+  dragText: {},
   selectFilesText: {
-    ...uikitStyles.theme.typography.label
+    fontWeight: uikitStyles.theme.typography.label.fontWeight
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/FileUploader/FileUploader.cjs

@@ -4,44 +4,43 @@ const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
 const setId = require("../utils/setId.cjs");
+const FileUploader_styles = require("./FileUploader.styles.cjs");
 const DropZone = require("./DropZone/DropZone.cjs");
 const FileList = require("./FileList/FileList.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
 const DEFAULT_LABELS = {
-  dropzone: "Label",
-  sizeWarning: "Max. file size:",
-  drag: "Drop files here or",
-  selectFiles: "click to upload",
-  dropFiles: "Drop files here",
-  fileSizeError: "The file exceeds the maximum upload size",
-  fileTypeError: "File type not allowed for upload",
   removeFileButtonLabel: "Remove File"
 };
 const HvFileUploader = (props) => {
   const {
     id,
     className,
+    classes: classesProp,
     labels: labelsProp,
     fileList,
     multiple = true,
-    disabled = false,
-    hideLabels = false,
+    label,
+    hideLabels,
     maxFileSize = Infinity,
     inputProps = {},
+    accept,
     acceptedFiles = [],
+    // TODO: consider adding/replacing with onFilesChange
     onFilesAdded,
     onFileRemoved,
     ...others
   } = uikitReactUtils.useDefaultProps("HvFileUploader", props);
+  const { classes, cx } = FileUploader_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className, ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DropZone.HvDropZone,
       {
         id: setId.setId(id, "dropzone"),
+        label,
         labels,
         multiple,
-        disabled,
-        accept: acceptedFiles.join(","),
+        accept: accept ?? acceptedFiles.join(","),
         maxFileSize,
         onFilesAdded,
         inputProps,
@@ -59,4 +58,5 @@ const HvFileUploader = (props) => {
     )
   ] });
 };
+exports.fileUploaderClasses = FileUploader_styles.staticClasses;
 exports.HvFileUploader = HvFileUploader;

package/dist/cjs/FileUploader/FileUploader.styles.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileUploader", {
+  root: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/FileUploader/utils.cjs

@@ -11,4 +11,3 @@ const convertUnits = (bytes, base = 1e3) => {
   return value.toFixed(2) + unit;
 };
 exports.convertUnits = convertUnits;
-exports.findBestUnit = findBestUnit;

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

@@ -26,7 +26,7 @@ const HvSuggestions = React.forwardRef(function HvSuggestions2(props, extRef) {
     onSuggestionSelected,
     popperProps,
     ...others
-  } = props;
+  } = uikitReactUtils.useDefaultProps("HvSuggestions", props);
   const { classes, cx } = Suggestions_styles.useClasses(classesProp);
   const { rootId } = uikitReactUtils.useTheme();
   const context$1 = React.useContext(context.HvFormElementContext);

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

@@ -6,6 +6,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestio
   root: { position: "relative" },
   list: {
     backgroundColor: uikitStyles.theme.colors.atmo1,
+    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
     boxShadow: uikitStyles.theme.colors.shadow,
     padding: uikitStyles.theme.space.xs,
     width: "100%"

package/dist/cjs/Select/Select.cjs

@@ -17,7 +17,6 @@ const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
-const Panel = require("../Panel/Panel.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 function defaultRenderValue(options) {
@@ -194,8 +193,10 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              Panel.HvPanel,
+              ListContainer.HvListContainer,
               {
+                condensed: true,
+                selectable: true,
                 style: {
                   width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
                 },
@@ -203,7 +204,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
                   [classes.panelOpenedUp]: placement.includes("top"),
                   [classes.panelOpenedDown]: placement.includes("bottom")
                 }),
-                children: /* @__PURE__ */ jsxRuntime.jsx(useSelect.SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { condensed: true, selectable: true, ...getListboxProps(), children }) })
+                ...getListboxProps(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(useSelect.SelectProvider, { value: contextValue, children })
               }
             )
           }

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

@@ -28,7 +28,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
     maxHeight: 400,
     border: `1px solid ${uikitStyles.theme.colors.secondary}`,
     marginTop: -1,
-    marginBottom: -1
+    marginBottom: -1,
+    // panel styles
+    position: "relative",
+    padding: uikitStyles.theme.space.xs,
+    backgroundColor: uikitStyles.theme.colors.atmo1,
+    overflowY: "auto",
+    borderRadius: "inherit"
   },
   panelOpenedUp: {
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`

package/dist/cjs/index.cjs

@@ -155,6 +155,7 @@ const Preview_styles = require("./FileUploader/Preview/Preview.styles.cjs");
 const Preview = require("./FileUploader/Preview/Preview.cjs");
 const File_styles = require("./FileUploader/File/File.styles.cjs");
 const File = require("./FileUploader/File/File.cjs");
+const FileUploader_styles = require("./FileUploader/FileUploader.styles.cjs");
 const FileUploader = require("./FileUploader/FileUploader.cjs");
 const FilterGroup_styles = require("./FilterGroup/FilterGroup.styles.cjs");
 const FilterGroup = require("./FilterGroup/FilterGroup.cjs");
@@ -508,6 +509,7 @@ exports.fileUploaderPreviewClasses = Preview_styles.staticClasses;
 exports.HvFileUploaderPreview = Preview.HvFileUploaderPreview;
 exports.fileClasses = File_styles.staticClasses;
 exports.HvFile = File.HvFile;
+exports.fileUploaderClasses = FileUploader_styles.staticClasses;
 exports.HvFileUploader = FileUploader.HvFileUploader;
 exports.filterGroupClasses = FilterGroup_styles.staticClasses;
 exports.HvFilterGroup = FilterGroup.HvFilterGroup;

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

@@ -1,16 +1,36 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
+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 { uniqueId } from "../../utils/helpers.js";
 import { setId } from "../../utils/setId.js";
 import { convertUnits } from "../utils.js";
 import { useClasses } from "./DropZone.styles.js";
 import { staticClasses } from "./DropZone.styles.js";
+import { HvFormElementContext } from "../../FormElement/context.js";
 import { HvLabel } from "../../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../../FormElement/InfoMessage/InfoMessage.js";
-import { HvTypography } from "../../Typography/Typography.js";
+const DEFAULT_LABELS = {
+  /** Extensions of the accepted file types */
+  acceptedFiles: "",
+  /** Dropzone area label. @deprecated use `label` prop instead */
+  dropzone: "Label",
+  /** Size file warning label. */
+  sizeWarning: "Max. file size:",
+  /** Size file warning label. */
+  drag: "Drop files here or",
+  /** Size file warning label. */
+  selectFiles: "click to upload",
+  /** Theming sheet used to style components */
+  dropFiles: "Drop files here",
+  /** Message to display when file size is greater than allowed */
+  fileSizeError: "The file exceeds the maximum upload size",
+  /** Message to display when file type is greater than allowed */
+  fileTypeError: "File type not allowed for upload",
+  removeFileButtonLabel: "Remove File"
+};
 function validateAccept(file, acceptAttr) {
   if (!file || !acceptAttr) return true;
   const acceptEntries = acceptAttr.split(",");
@@ -32,17 +52,19 @@ const HvDropZone = (props) => {
   const {
     id: idProp,
     classes: classesProp,
-    labels,
+    label,
+    labels: labelsProp,
     accept,
     maxFileSize,
     inputProps,
     hideLabels,
     multiple = true,
-    disabled = false,
     onFilesAdded
   } = useDefaultProps("HvDropZone", props);
   const id = useUniqueId(idProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const { classes, cx } = useClasses(classesProp);
+  const { disabled } = useContext(HvFormElementContext);
   const [dragState, setDragState] = useState(false);
   const inputRef = useRef(null);
   const handleDragLeave = () => {
@@ -84,7 +106,7 @@ const HvDropZone = (props) => {
           showGutter: true,
           id: setId(id, "input-file-label"),
           htmlFor: setId(id, "input-file"),
-          label: labels?.dropzone,
+          label: label ?? labels?.dropzone,
           className: classes.dropZoneLabel
         }
       ),
@@ -139,16 +161,9 @@ const HvDropZone = (props) => {
               ...inputProps
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: classes?.dropArea, children: dragState ? /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsx(HvTypography, { className: classes.dragText, children: labels?.dropFiles }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Doc,
-              {
-                iconSize: "M",
-                className: classes.dropZoneAreaIcon,
-                color: disabled ? "secondary_60" : "secondary"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxs(HvTypography, { className: classes.dragText, children: [
+          /* @__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("div", { className: classes.dropZoneAreaLabels, children: /* @__PURE__ */ jsxs("div", { className: classes.dragText, children: [
               labels?.drag,
               /* @__PURE__ */ jsx(
                 "span",

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

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { 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 { HvInfoMessage, HvLabel } from \"../../FormElement\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvTypography } from \"../../Typography\";\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\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\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   * If the input is disabled or not\n   */\n  disabled?: 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    labels,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(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={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              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\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 { 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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"}

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

@@ -8,15 +8,13 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
     display: "flex",
     border: `1px dashed ${theme.colors.secondary_60}`,
     cursor: "pointer",
-    background: theme.colors.atmo1,
+    backgroundColor: theme.colors.atmo1,
     borderRadius: theme.radii.round,
     "&:hover": {
-      background: `${theme.colors.atmo1}`,
-      border: `1px dashed ${theme.colors.secondary}`
+      borderColor: theme.colors.secondary
     },
     "&:focus-within": {
-      background: `${theme.colors.atmo1}`,
-      border: `1px dashed ${theme.colors.secondary}`,
+      borderColor: theme.colors.secondary,
       ...outlineStyles
     }
   },
@@ -29,22 +27,16 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
     }
   },
   dragAction: {
-    background: `${theme.colors.atmo1}`,
-    border: `1px dashed ${theme.colors.primary}`
+    backgroundColor: theme.colors.atmo1,
+    borderColor: theme.colors.primary
   },
   dropZoneContainerDisabled: {
-    background: `${theme.colors.atmo3}`,
-    border: `1px dashed ${theme.colors.secondary_60}`,
+    color: theme.colors.secondary_60,
+    backgroundColor: theme.colors.atmo3,
+    borderColor: "currentcolor",
     cursor: "not-allowed",
     "&:hover": {
-      background: `${theme.colors.atmo3}`,
-      border: `1px dashed ${theme.colors.secondary_60}`
-    },
-    "& $dragText": {
-      color: theme.colors.secondary_60
-    },
-    "& $selectFilesText": {
-      color: theme.colors.secondary_60
+      borderColor: "currentcolor"
     }
   },
   inputArea: {
@@ -59,7 +51,8 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
   },
   dropArea: {
     display: "flex",
-    margin: `${theme.space.md} auto`,
+    margin: theme.spacing("md", "auto"),
+    gap: theme.space.xs,
     minHeight: 48
   },
   dropZoneAreaLabels: {
@@ -67,16 +60,11 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
     maxWidth: 120,
     margin: "auto"
   },
-  dropZoneAreaIcon: {
-    margin: "auto",
-    marginRight: theme.space.xs
-  },
+  dropZoneAreaIcon: {},
   dropZoneLabel: {},
-  dragText: {
-    ...theme.typography.body
-  },
+  dragText: {},
   selectFilesText: {
-    ...theme.typography.label
+    fontWeight: theme.typography.label.fontWeight
   }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"DropZone.styles.js","sources":["../../../../src/FileUploader/DropZone/DropZone.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropZone\", {\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"pointer\",\n    background: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n\n    \"&:hover\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px dashed ${theme.colors.secondary}`,\n    },\n\n    \"&:focus-within\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px dashed ${theme.colors.secondary}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n\n    \"& label:nth-of-type(1)\": {},\n\n    \"& p:nth-of-type(2)\": {\n      marginLeft: \"auto\",\n    },\n  },\n  dragAction: {\n    background: `${theme.colors.atmo1}`,\n    border: `1px dashed ${theme.colors.primary}`,\n  },\n  dropZoneContainerDisabled: {\n    background: `${theme.colors.atmo3}`,\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"not-allowed\",\n    \"&:hover\": {\n      background: `${theme.colors.atmo3}`,\n      border: `1px dashed ${theme.colors.secondary_60}`,\n    },\n\n    \"& $dragText\": {\n      color: theme.colors.secondary_60,\n    },\n    \"& $selectFilesText\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: `${theme.space.md} auto`,\n    minHeight: 48,\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    maxWidth: 120,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {\n    margin: \"auto\",\n    marginRight: theme.space.xs,\n  },\n  dropZoneLabel: {},\n  dragText: {\n    ...(theme.typography.body as React.CSSProperties),\n  },\n  selectFilesText: {\n    ...(theme.typography.label as React.CSSProperties),\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,SAAS;AAAA,IAC9C;AAAA,IAEA,kBAAkB;AAAA,MAChB,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,SAAS;AAAA,MAC5C,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAEhB,0BAA0B,CAAC;AAAA,IAE3B,sBAAsB;AAAA,MACpB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,YAAY;AAAA,IACV,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,IACjC,QAAQ,cAAc,MAAM,OAAO,OAAO;AAAA,EAC5C;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,IACjC,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IACjD;AAAA,IAEA,eAAe;AAAA,MACb,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpB,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,QAAQ,GAAG,MAAM,MAAM,EAAE;AAAA,IACzB,WAAW;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,IACR,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,iBAAiB;AAAA,IACf,GAAI,MAAM,WAAW;AAAA,EAAA;AAEzB,CAAC;"}
+{"version":3,"file":"DropZone.styles.js","sources":["../../../../src/FileUploader/DropZone/DropZone.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropZone\", {\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"pointer\",\n    backgroundColor: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n\n    \"&:hover\": {\n      borderColor: theme.colors.secondary,\n    },\n\n    \"&:focus-within\": {\n      borderColor: theme.colors.secondary,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n\n    \"& label:nth-of-type(1)\": {},\n\n    \"& p:nth-of-type(2)\": {\n      marginLeft: \"auto\",\n    },\n  },\n  dragAction: {\n    backgroundColor: theme.colors.atmo1,\n    borderColor: theme.colors.primary,\n  },\n  dropZoneContainerDisabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n    borderColor: \"currentcolor\",\n    cursor: \"not-allowed\",\n    \"&:hover\": {\n      borderColor: \"currentcolor\",\n    },\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: theme.spacing(\"md\", \"auto\"),\n    gap: theme.space.xs,\n    minHeight: 48,\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    maxWidth: 120,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {},\n  dropZoneLabel: {},\n  dragText: {},\n  selectFilesText: {\n    fontWeight: theme.typography.label.fontWeight,\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IAEA,kBAAkB;AAAA,MAChB,aAAa,MAAM,OAAO;AAAA,MAC1B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAEhB,0BAA0B,CAAC;AAAA,IAE3B,sBAAsB;AAAA,MACpB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,2BAA2B;AAAA,IACzB,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EAEjB;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,QAAQ,MAAM,QAAQ,MAAM,MAAM;AAAA,IAClC,KAAK,MAAM,MAAM;AAAA,IACjB,WAAW;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,eAAe,CAAC;AAAA,EAChB,UAAU,CAAC;AAAA,EACX,iBAAiB;AAAA,IACf,YAAY,MAAM,WAAW,MAAM;AAAA,EAAA;AAEvC,CAAC;"}

package/dist/esm/FileUploader/FileUploader.js

@@ -2,44 +2,44 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
 import { setId } from "../utils/setId.js";
+import { useClasses } from "./FileUploader.styles.js";
+import { staticClasses } from "./FileUploader.styles.js";
 import { HvDropZone } from "./DropZone/DropZone.js";
 import { HvFileList } from "./FileList/FileList.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 const DEFAULT_LABELS = {
-  dropzone: "Label",
-  sizeWarning: "Max. file size:",
-  drag: "Drop files here or",
-  selectFiles: "click to upload",
-  dropFiles: "Drop files here",
-  fileSizeError: "The file exceeds the maximum upload size",
-  fileTypeError: "File type not allowed for upload",
   removeFileButtonLabel: "Remove File"
 };
 const HvFileUploader = (props) => {
   const {
     id,
     className,
+    classes: classesProp,
     labels: labelsProp,
     fileList,
     multiple = true,
-    disabled = false,
-    hideLabels = false,
+    label,
+    hideLabels,
     maxFileSize = Infinity,
     inputProps = {},
+    accept,
     acceptedFiles = [],
+    // TODO: consider adding/replacing with onFilesChange
     onFilesAdded,
     onFileRemoved,
     ...others
   } = useDefaultProps("HvFileUploader", props);
+  const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  return /* @__PURE__ */ jsxs("div", { id, className, ...others, children: [
+  return /* @__PURE__ */ jsxs(HvFormElement, { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx(
       HvDropZone,
       {
         id: setId(id, "dropzone"),
+        label,
         labels,
         multiple,
-        disabled,
-        accept: acceptedFiles.join(","),
+        accept: accept ?? acceptedFiles.join(","),
         maxFileSize,
         onFilesAdded,
         inputProps,
@@ -58,5 +58,6 @@ const HvFileUploader = (props) => {
   ] });
 };
 export {
-  HvFileUploader
+  HvFileUploader,
+  staticClasses as fileUploaderClasses
 };