@jobber/components 5.20.8-SCOTTTHd.45 → 5.20.8-SCOTTTHs-a30bcbb.35

package/dist/{InputDate-SSStYHaX.js → InputDate-CZ06WulU.js}

@@ -1,6 +1,6 @@
-import { D as DatePicker, o as omit } from './DatePicker-D-HxFDMh.js';
+import { D as DatePicker, o as omit } from './DatePicker-CWsQUiHO.js';
 import React, { useRef, useState, useEffect } from 'react';
-import { F as FormField } from './FormField-D7e_zEry.js';
+import { F as FormField } from './FormField-vy2Hd8hQ.js';
 
 function InputDate(inputProps) {
     const formFieldActionsRef = useRef(null);

package/dist/InputEmail/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var InputEmail = require('../InputEmail-Bv-VaN9E.js');
+var InputEmail = require('../InputEmail-2Q8zPAU5.js');
 require('react');
-require('../FormField-Eiia0LI8.js');
-require('../tslib.es6-Bi0OHwyo.js');
+require('../FormField-1MVxQMeP.js');
+require('../tslib.es6-D1nA6hj6.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-DV8P6VM4.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
-require('../Typography-KvPMVZyR.js');
-require('../Text-BEqy0ojx.js');
-require('../useFormFieldFocus-CUdV5BLE.js');
-require('../InputValidation-C2_Px5sQ.js');
-require('../Spinner-Bj9GuPzT.js');
+require('../Icon-DMURv2lZ.js');
+require('../Typography-DYUPEo3A.js');
+require('../Text-CJWvewR1.js');
+require('../useFormFieldFocus-0wEDq1A1.js');
+require('../InputValidation-Cex0nlcu.js');
+require('../Spinner-Cl4eyZlz.js');
 
 
 

package/dist/InputEmail/index.mjs

@@ -1,16 +1,16 @@
-export { I as InputEmail, v as validationMessage } from '../InputEmail-Dd86G8Rs.js';
+export { I as InputEmail, v as validationMessage } from '../InputEmail-sdOzdrzR.js';
 import 'react';
-import '../FormField-D7e_zEry.js';
-import '../tslib.es6-eq3zexCS.js';
+import '../FormField-vy2Hd8hQ.js';
+import '../tslib.es6-CeHUynox.js';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-DjIsGUK9.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Icon-CTO4wvIZ.js';
-import '../Typography-DdPGuT7r.js';
-import '../Text-DLaIGPdO.js';
-import '../useFormFieldFocus-sKGbcg5A.js';
-import '../InputValidation-DERTcXrX.js';
-import '../Spinner-DwfGkh1X.js';
+import '../Icon-BPJYIZWC.js';
+import '../Typography-DhGlhWcl.js';
+import '../Text-DfqZm-hl.js';
+import '../useFormFieldFocus-ClQ0z2uo.js';
+import '../InputValidation-CzNHjrwl.js';
+import '../Spinner-COTKfUIp.js';

package/dist/{InputEmail-Bv-VaN9E.js → InputEmail-2Q8zPAU5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-Eiia0LI8.js');
+var FormField = require('./FormField-1MVxQMeP.js');
 
 const validationMessage = "Please enter a valid email";
 function InputEmail(props) {

package/dist/{InputEmail-Dd86G8Rs.js → InputEmail-sdOzdrzR.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { F as FormField } from './FormField-D7e_zEry.js';
+import { F as FormField } from './FormField-vy2Hd8hQ.js';
 
 const validationMessage = "Please enter a valid email";
 function InputEmail(props) {

package/dist/InputFile/FileTypes.d.ts

@@ -0,0 +1,12 @@
+export declare enum FileTypes {
+    JPEG = "image/jpeg",
+    JPG = "image/jpg",
+    PNG = "image/png",
+    HEIC = "image/heic",
+    PDF = "application/pdf",
+    DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+}
+export declare const BASIC_IMAGE_TYPES: string[];
+export declare const mimeTypeToReadable: (mimeType: string) => string;
+export declare const convertToMimeTypes: (types: string[]) => string[];
+export declare function formatMimeTypes(types: string[]): string;

package/dist/InputFile/InputFile.d.ts

@@ -100,6 +100,26 @@ interface InputFileProps {
      * @default false
      */
     readonly allowMultiple?: boolean;
+    /**
+     * Further description of the input.
+     */
+    readonly description?: string;
+    /**
+     * An object which helps control and validate the number of files being uploaded
+     * via the dropzone.
+     * `maxFilesValidation={{ maxFiles: 3, numberOfCurrentFiles: files.length }}`
+     */
+    readonly maxFilesValidation?: {
+        /**
+         * Maximum number of files that can be uploaded via the dropzone.
+         */
+        readonly maxFiles: number;
+        /**
+         * The current count of uploaded files. This value should be
+         * updated whenever a file is successfully uploaded or removed.
+         */
+        readonly numberOfCurrentFiles: number;
+    };
     /**
      * A callback that receives a file object and returns a `UploadParams` needed
      * to upload the file.
@@ -129,7 +149,7 @@ interface InputFileProps {
      */
     readonly validator?: <T extends File>(file: T) => FileError | FileError[] | null;
 }
-export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }: InputFileProps): JSX.Element;
+export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, description, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }: InputFileProps): JSX.Element;
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.
  * `key` is used to uniquely identify files.

package/dist/InputFile/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var InputFile = require('../InputFile-BJvN3wwv.js');
-require('../tslib.es6-Bi0OHwyo.js');
+var InputFile = require('../InputFile-ANK0IeG9.js');
+require('../tslib.es6-D1nA6hj6.js');
 require('react');
 require('classnames');
-require('../index-CrZ7pTC-.js');
-require('../_commonjsHelpers-B0rrMtP0.js');
+require('../index-C36nFO6W.js');
+require('../_commonjsHelpers-DM5kGkm_.js');
 require('axios');
-require('../InputValidation-C2_Px5sQ.js');
+require('../InputValidation-Cex0nlcu.js');
 require('framer-motion');
-require('../Text-BEqy0ojx.js');
-require('../Typography-KvPMVZyR.js');
-require('../Icon-wS5vpmx3.js');
+require('../Text-CJWvewR1.js');
+require('../Typography-DYUPEo3A.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../Button-DV8P6VM4.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Content-CaBYhgC3.js');
+require('../Content-Bvcrqi5z.js');
 
 
 

package/dist/InputFile/index.mjs

@@ -1,16 +1,16 @@
-export { I as InputFile, u as updateFiles } from '../InputFile-BtPCPUcd.js';
-import '../tslib.es6-eq3zexCS.js';
+export { I as InputFile, u as updateFiles } from '../InputFile-BhukP39A.js';
+import '../tslib.es6-CeHUynox.js';
 import 'react';
 import 'classnames';
-import '../index-61fwtDnb.js';
-import '../_commonjsHelpers-BKFyl1YN.js';
+import '../index-BEcecQeg.js';
+import '../_commonjsHelpers-BgTBIXLr.js';
 import 'axios';
-import '../InputValidation-DERTcXrX.js';
+import '../InputValidation-CzNHjrwl.js';
 import 'framer-motion';
-import '../Text-DLaIGPdO.js';
-import '../Typography-DdPGuT7r.js';
-import '../Icon-CTO4wvIZ.js';
+import '../Text-DfqZm-hl.js';
+import '../Typography-DhGlhWcl.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Button-DjIsGUK9.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Content-CEpXEhkM.js';
+import '../Content-CZscRWg1.js';

package/dist/{InputFile-BJvN3wwv.js → InputFile-ANK0IeG9.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-Bi0OHwyo.js');
+var tslib_es6 = require('./tslib.es6-D1nA6hj6.js');
 var React = require('react');
 var classnames = require('classnames');
-var index = require('./index-CrZ7pTC-.js');
+var index = require('./index-C36nFO6W.js');
 var axios = require('axios');
-var InputValidation = require('./InputValidation-C2_Px5sQ.js');
-var Button = require('./Button-DV8P6VM4.js');
-var Content = require('./Content-CaBYhgC3.js');
-var Typography = require('./Typography-KvPMVZyR.js');
+var InputValidation = require('./InputValidation-Cex0nlcu.js');
+var Button = require('./Button-X03o-OsV.js');
+var Content = require('./Content-Bvcrqi5z.js');
+var Typography = require('./Typography-DYUPEo3A.js');
 
 var COMMON_MIME_TYPES = new Map([
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
@@ -1440,29 +1440,111 @@ function reducer(state, action) {
 
 function noop() {}
 
-var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-","dropzoneContent":"XvP0kEOKEFU-","spinning":"OBkJdjuB708-"};
+var styles = {"dropZoneBase":"fSDkYM-382I-","dropZone":"yT6m1v71VK8-","active":"fCb0O1wAjR0-","error":"Cm5wIem0XQI-","validationErrors":"wyjYhAlF1qA-","dropzoneContent":"sAxF04DcAi4-","spinning":"SUZshYRxxl4-"};
+
+var FileTypes;
+(function (FileTypes) {
+    FileTypes["JPEG"] = "image/jpeg";
+    FileTypes["JPG"] = "image/jpg";
+    FileTypes["PNG"] = "image/png";
+    FileTypes["HEIC"] = "image/heic";
+    FileTypes["PDF"] = "application/pdf";
+    FileTypes["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+})(FileTypes || (FileTypes = {}));
+const BASIC_IMAGE_TYPES = ["PNG", "JPEG", "JPG"];
+// Converts a MIME type to its readable format
+const mimeTypeToReadable = (mimeType) => {
+    const entry = Object.entries(FileTypes).find(([, value]) => value === mimeType);
+    return entry ? entry[0] : mimeType;
+};
+// Converts an array of readable file type names to their corresponding MIME types
+const convertToMimeTypes = (types) => {
+    return types.map(type => FileTypes[type.toUpperCase()] || type);
+};
+function formatMimeTypes(types) {
+    if (types.length === 0) {
+        return "";
+    }
+    else if (types.length === 1) {
+        return types[0];
+    }
+    else {
+        return `${types.slice(0, -1).join(", ")} or ${types[types.length - 1]}`;
+    }
+}
 
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+/* eslint-disable max-statements */
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", description, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+    const maxFiles = (maxFilesValidation === null || maxFilesValidation === void 0 ? void 0 : maxFilesValidation.maxFiles) || 0;
+    const numberOfCurrentFiles = (maxFilesValidation === null || maxFilesValidation === void 0 ? void 0 : maxFilesValidation.numberOfCurrentFiles) || 0;
+    const handleValidation = React.useCallback((file) => {
+        if (maxFiles &&
+            numberOfCurrentFiles &&
+            maxFiles - numberOfCurrentFiles <= 0) {
+            return {
+                code: "too-many-files",
+                message: `Cannot exceed a maximum of ${maxFiles} files.`,
+            };
+        }
+        return validator ? validator(file) : null;
+    }, [maxFiles, numberOfCurrentFiles]);
     const options = {
         multiple: allowMultiple,
+        maxFiles: maxFiles - numberOfCurrentFiles,
         onDrop: React.useCallback(handleDrop, [uploadFile]),
-        validator: validator && React.useCallback(validator, []),
+        validator: handleValidation,
     };
     if (allowedTypes === "images") {
         options.accept = "image/*";
     }
     else if (allowedTypes === "basicImages") {
-        options.accept = "image/png, image/jpg, image/jpeg";
+        options.accept = convertToMimeTypes(BASIC_IMAGE_TYPES).join(",");
     }
     else if (Array.isArray(allowedTypes)) {
-        options.accept = allowedTypes.join(",");
+        options.accept = convertToMimeTypes(allowedTypes).join(",");
     }
     const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone(options);
-    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.map(({ file, errors }) => {
-        return errors.map(error => {
-            return (React.createElement(InputValidation.InputValidation, { message: `${file.name} ${error.message}`, key: `${file.name}${error.code}` }));
+    const allowedTypesString = Array.isArray(allowedTypes)
+        ? formatMimeTypes(allowedTypes.map(mimeTypeToReadable))
+        : allowedTypes;
+    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.reduce((acc, { file, errors }) => {
+        errors.forEach(error => {
+            if (error.code === "too-many-files") {
+                if (!acc.some(e => e.code === "too-many-files")) {
+                    acc.push({
+                        code: "too-many-files",
+                        message: `Cannot exceed a maximum of ${maxFiles} files.`,
+                    });
+                }
+            }
+            else if (error.code === "file-invalid-type") {
+                let formatMessage;
+                if (allowedTypes === "basicImages") {
+                    formatMessage = formatMimeTypes(BASIC_IMAGE_TYPES.map(mimeTypeToReadable));
+                }
+                else if (allowedTypes === "images") {
+                    formatMessage = "an image";
+                }
+                else {
+                    formatMessage = allowedTypesString;
+                }
+                const message = allowedTypes === "images"
+                    ? `${file.name} must be ${formatMessage}.`
+                    : `${file.name} must be in ${formatMessage} format.`;
+                acc.push({
+                    code: error.code,
+                    message: message,
+                });
+            }
+            else {
+                acc.push({
+                    code: error.code,
+                    message: `${file.name} ${error.message}`,
+                });
+            }
         });
-    });
+        return acc;
+    }, []);
     const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
     const dropZone = classnames(styles.dropZoneBase, {
         [styles.dropZone]: variation === "dropzone",
@@ -1475,9 +1557,11 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
             variation === "dropzone" && (React.createElement("div", { className: styles.dropzoneContent },
                 React.createElement(Content.Content, { spacing: "small" },
                     React.createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
-                    size === "base" && (React.createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText))))),
+                    size === "base" && (React.createElement(React.Fragment, null,
+                        React.createElement(Typography.Typography, { size: "small" }, hintText),
+                        description && (React.createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, description))))))),
             variation === "button" && (React.createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))),
-        (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React.createElement("div", { className: styles.validationErrors }, validationErrors))));
+        (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.length) > 0 && (React.createElement("div", { className: styles.validationErrors }, validationErrors.map(error => (React.createElement(InputValidation.InputValidation, { message: error.message, key: error.code })))))));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);
@@ -1543,16 +1627,14 @@ function createAxiosConfig({ url, httpMethod = "POST", fields = {}, file, handle
     };
 }
 function getLabels(providedButtonLabel, multiple, allowedTypes) {
-    let buttonLabel = multiple ? "Upload Files" : "Upload File";
-    let hintText = multiple
-        ? "or drag files here to upload"
-        : "or drag a file here to upload";
-    if (allowedTypes === "images" || allowedTypes === "basicImages") {
-        buttonLabel = multiple ? "Upload Images" : "Upload Image";
-        hintText = multiple
-            ? "or drag images here to upload"
-            : "or drag an image here to upload";
-    }
+    const fileType = allowedTypes === "images" || allowedTypes === "basicImages"
+        ? "Image"
+        : "File";
+    let buttonLabel = multiple ? `Upload ${fileType}s` : `Upload ${fileType}`;
+    const fileTypeDeterminer = fileType === "Image" ? "an" : "a";
+    const hintText = multiple
+        ? `Select or drag ${fileType.toLowerCase()}s here to upload`
+        : `Select or drag ${fileTypeDeterminer} ${fileType.toLowerCase()} here to upload`;
     if (providedButtonLabel)
         buttonLabel = providedButtonLabel;
     return { buttonLabel, hintText };

package/dist/{InputFile-BtPCPUcd.js → InputFile-BhukP39A.js}

@@ -1,12 +1,12 @@
-import { a as __awaiter, b as __generator, c as __spread } from './tslib.es6-eq3zexCS.js';
+import { a as __awaiter, b as __generator, c as __spread } from './tslib.es6-CeHUynox.js';
 import React, { forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
-import { P as PropTypes } from './index-61fwtDnb.js';
+import { P as PropTypes } from './index-BEcecQeg.js';
 import axios from 'axios';
-import { I as InputValidation } from './InputValidation-DERTcXrX.js';
-import { B as Button } from './Button-DjIsGUK9.js';
-import { C as Content } from './Content-CEpXEhkM.js';
-import { T as Typography } from './Typography-DdPGuT7r.js';
+import { I as InputValidation } from './InputValidation-CzNHjrwl.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { C as Content } from './Content-CZscRWg1.js';
+import { T as Typography } from './Typography-DhGlhWcl.js';
 
 var COMMON_MIME_TYPES = new Map([
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
@@ -1438,29 +1438,111 @@ function reducer(state, action) {
 
 function noop() {}
 
-var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-","dropzoneContent":"XvP0kEOKEFU-","spinning":"OBkJdjuB708-"};
+var styles = {"dropZoneBase":"fSDkYM-382I-","dropZone":"yT6m1v71VK8-","active":"fCb0O1wAjR0-","error":"Cm5wIem0XQI-","validationErrors":"wyjYhAlF1qA-","dropzoneContent":"sAxF04DcAi4-","spinning":"SUZshYRxxl4-"};
+
+var FileTypes;
+(function (FileTypes) {
+    FileTypes["JPEG"] = "image/jpeg";
+    FileTypes["JPG"] = "image/jpg";
+    FileTypes["PNG"] = "image/png";
+    FileTypes["HEIC"] = "image/heic";
+    FileTypes["PDF"] = "application/pdf";
+    FileTypes["DOCX"] = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+})(FileTypes || (FileTypes = {}));
+const BASIC_IMAGE_TYPES = ["PNG", "JPEG", "JPG"];
+// Converts a MIME type to its readable format
+const mimeTypeToReadable = (mimeType) => {
+    const entry = Object.entries(FileTypes).find(([, value]) => value === mimeType);
+    return entry ? entry[0] : mimeType;
+};
+// Converts an array of readable file type names to their corresponding MIME types
+const convertToMimeTypes = (types) => {
+    return types.map(type => FileTypes[type.toUpperCase()] || type);
+};
+function formatMimeTypes(types) {
+    if (types.length === 0) {
+        return "";
+    }
+    else if (types.length === 1) {
+        return types[0];
+    }
+    else {
+        return `${types.slice(0, -1).join(", ")} or ${types[types.length - 1]}`;
+    }
+}
 
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+/* eslint-disable max-statements */
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", description, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+    const maxFiles = (maxFilesValidation === null || maxFilesValidation === void 0 ? void 0 : maxFilesValidation.maxFiles) || 0;
+    const numberOfCurrentFiles = (maxFilesValidation === null || maxFilesValidation === void 0 ? void 0 : maxFilesValidation.numberOfCurrentFiles) || 0;
+    const handleValidation = useCallback((file) => {
+        if (maxFiles &&
+            numberOfCurrentFiles &&
+            maxFiles - numberOfCurrentFiles <= 0) {
+            return {
+                code: "too-many-files",
+                message: `Cannot exceed a maximum of ${maxFiles} files.`,
+            };
+        }
+        return validator ? validator(file) : null;
+    }, [maxFiles, numberOfCurrentFiles]);
     const options = {
         multiple: allowMultiple,
+        maxFiles: maxFiles - numberOfCurrentFiles,
         onDrop: useCallback(handleDrop, [uploadFile]),
-        validator: validator && useCallback(validator, []),
+        validator: handleValidation,
     };
     if (allowedTypes === "images") {
         options.accept = "image/*";
     }
     else if (allowedTypes === "basicImages") {
-        options.accept = "image/png, image/jpg, image/jpeg";
+        options.accept = convertToMimeTypes(BASIC_IMAGE_TYPES).join(",");
     }
     else if (Array.isArray(allowedTypes)) {
-        options.accept = allowedTypes.join(",");
+        options.accept = convertToMimeTypes(allowedTypes).join(",");
     }
     const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone(options);
-    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.map(({ file, errors }) => {
-        return errors.map(error => {
-            return (React.createElement(InputValidation, { message: `${file.name} ${error.message}`, key: `${file.name}${error.code}` }));
+    const allowedTypesString = Array.isArray(allowedTypes)
+        ? formatMimeTypes(allowedTypes.map(mimeTypeToReadable))
+        : allowedTypes;
+    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.reduce((acc, { file, errors }) => {
+        errors.forEach(error => {
+            if (error.code === "too-many-files") {
+                if (!acc.some(e => e.code === "too-many-files")) {
+                    acc.push({
+                        code: "too-many-files",
+                        message: `Cannot exceed a maximum of ${maxFiles} files.`,
+                    });
+                }
+            }
+            else if (error.code === "file-invalid-type") {
+                let formatMessage;
+                if (allowedTypes === "basicImages") {
+                    formatMessage = formatMimeTypes(BASIC_IMAGE_TYPES.map(mimeTypeToReadable));
+                }
+                else if (allowedTypes === "images") {
+                    formatMessage = "an image";
+                }
+                else {
+                    formatMessage = allowedTypesString;
+                }
+                const message = allowedTypes === "images"
+                    ? `${file.name} must be ${formatMessage}.`
+                    : `${file.name} must be in ${formatMessage} format.`;
+                acc.push({
+                    code: error.code,
+                    message: message,
+                });
+            }
+            else {
+                acc.push({
+                    code: error.code,
+                    message: `${file.name} ${error.message}`,
+                });
+            }
         });
-    });
+        return acc;
+    }, []);
     const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
     const dropZone = classnames(styles.dropZoneBase, {
         [styles.dropZone]: variation === "dropzone",
@@ -1473,9 +1555,11 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
             variation === "dropzone" && (React.createElement("div", { className: styles.dropzoneContent },
                 React.createElement(Content, { spacing: "small" },
                     React.createElement(Button, { label: buttonLabel, size: "small", type: "secondary" }),
-                    size === "base" && (React.createElement(Typography, { size: "small", textColor: "textSecondary" }, hintText))))),
+                    size === "base" && (React.createElement(React.Fragment, null,
+                        React.createElement(Typography, { size: "small" }, hintText),
+                        description && (React.createElement(Typography, { size: "small", textColor: "textSecondary" }, description))))))),
             variation === "button" && (React.createElement(Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))),
-        (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React.createElement("div", { className: styles.validationErrors }, validationErrors))));
+        (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.length) > 0 && (React.createElement("div", { className: styles.validationErrors }, validationErrors.map(error => (React.createElement(InputValidation, { message: error.message, key: error.code })))))));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);
@@ -1541,16 +1625,14 @@ function createAxiosConfig({ url, httpMethod = "POST", fields = {}, file, handle
     };
 }
 function getLabels(providedButtonLabel, multiple, allowedTypes) {
-    let buttonLabel = multiple ? "Upload Files" : "Upload File";
-    let hintText = multiple
-        ? "or drag files here to upload"
-        : "or drag a file here to upload";
-    if (allowedTypes === "images" || allowedTypes === "basicImages") {
-        buttonLabel = multiple ? "Upload Images" : "Upload Image";
-        hintText = multiple
-            ? "or drag images here to upload"
-            : "or drag an image here to upload";
-    }
+    const fileType = allowedTypes === "images" || allowedTypes === "basicImages"
+        ? "Image"
+        : "File";
+    let buttonLabel = multiple ? `Upload ${fileType}s` : `Upload ${fileType}`;
+    const fileTypeDeterminer = fileType === "Image" ? "an" : "a";
+    const hintText = multiple
+        ? `Select or drag ${fileType.toLowerCase()}s here to upload`
+        : `Select or drag ${fileTypeDeterminer} ${fileType.toLowerCase()} here to upload`;
     if (providedButtonLabel)
         buttonLabel = providedButtonLabel;
     return { buttonLabel, hintText };

package/dist/InputGroup/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var InputGroup = require('../InputGroup-RIxfB-G6.js');
+var InputGroup = require('../InputGroup-C6N8CNLw.js');
 require('react');
 require('classnames');
 

package/dist/InputGroup/index.mjs

@@ -1,3 +1,3 @@
-export { I as InputGroup } from '../InputGroup-BS_Ipf-7.js';
+export { I as InputGroup } from '../InputGroup-i9ru0LcP.js';
 import 'react';
 import 'classnames';

package/dist/{InputGroup-RIxfB-G6.js → InputGroup-C6N8CNLw.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var classnames = require('classnames');
 
-var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-","spinning":"EQFn64vpr64-"};
+var styles = {"vertical":"RwhScbXCXw0-","horizontal":"xxMbKnv30VQ-","inputGroup":"l87dJm2JnlA-","spinning":"XZBCtuO467Y-"};
 
 function InputGroup({ children, flowDirection = "vertical", }) {
     if (isInvalidGroupNesting(children))

package/dist/{InputGroup-BS_Ipf-7.js → InputGroup-i9ru0LcP.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 
-var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-","spinning":"EQFn64vpr64-"};
+var styles = {"vertical":"RwhScbXCXw0-","horizontal":"xxMbKnv30VQ-","inputGroup":"l87dJm2JnlA-","spinning":"XZBCtuO467Y-"};
 
 function InputGroup({ children, flowDirection = "vertical", }) {
     if (isInvalidGroupNesting(children))

package/dist/InputNumber/index.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var InputNumber = require('../InputNumber-DsyFL51e.js');
+var InputNumber = require('../InputNumber-DzTGZO-F.js');
 require('react');
-require('../FormField-Eiia0LI8.js');
-require('../tslib.es6-Bi0OHwyo.js');
+require('../FormField-1MVxQMeP.js');
+require('../tslib.es6-D1nA6hj6.js');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-DV8P6VM4.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
-require('../Typography-KvPMVZyR.js');
-require('../Text-BEqy0ojx.js');
-require('../useFormFieldFocus-CUdV5BLE.js');
-require('../InputValidation-C2_Px5sQ.js');
-require('../Spinner-Bj9GuPzT.js');
+require('../Icon-DMURv2lZ.js');
+require('../Typography-DYUPEo3A.js');
+require('../Text-CJWvewR1.js');
+require('../useFormFieldFocus-0wEDq1A1.js');
+require('../InputValidation-Cex0nlcu.js');
+require('../Spinner-Cl4eyZlz.js');