@jobber/components 6.21.0 → 6.22.0

package/dist/Button/Button.types.d.ts

@@ -10,7 +10,6 @@ export interface ButtonFoundationProps {
      * Used for screen readers. Will override label on screen
      * reader if present.
      */
-    readonly ariaLabel?: string;
     readonly ariaControls?: string;
     readonly ariaHaspopup?: boolean;
     readonly ariaExpanded?: boolean;
@@ -20,6 +19,7 @@ export interface ButtonFoundationProps {
     readonly id?: string;
     readonly loading?: boolean;
     readonly size?: ButtonSize;
+    readonly ariaLabel?: string;
     onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
     onMouseDown?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
 }
@@ -35,14 +35,6 @@ interface ButtonIconProps extends ButtonNonComposableProps {
 interface ButtonLabelProps extends ButtonNonComposableProps {
     readonly label: string;
 }
-type BaseButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<XOR<SubmitButtonProps, BasicButtonProps>, XOR<ButtonLinkProps, ButtonAnchorProps>>;
-interface ButtonIconProps extends ButtonFoundationProps {
-    readonly icon: IconNames;
-    readonly ariaLabel: string;
-}
-interface ButtonLabelProps extends ButtonFoundationProps {
-    readonly label: string;
-}
 interface ButtonAnchorProps extends ButtonFoundationProps {
     /**
      * Used to create an 'href' on an anchor tag.
@@ -82,6 +74,7 @@ interface BasicButtonProps extends ButtonFoundationProps {
      */
     readonly role?: string;
 }
+type BaseButtonProps = XOR<BaseActionProps, XOR<DestructiveActionProps, SubmitActionProps>> & XOR<XOR<SubmitButtonProps, BasicButtonProps>, XOR<ButtonLinkProps, ButtonAnchorProps>>;
 export type ButtonWithChildrenProps = BaseButtonProps & {
     readonly children: React.ReactNode;
 };

package/dist/InputAvatar/index.cjs

@@ -12,12 +12,12 @@ require('../InputFile-cjs.js');
 require('../index-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('axios');
-require('../InputValidation-cjs.js');
-require('framer-motion');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../InputValidation-cjs.js');
+require('framer-motion');
 require('../Content-cjs.js');
 require('../ProgressBar-cjs.js');
 

package/dist/InputAvatar/index.mjs

@@ -10,11 +10,11 @@ import '../InputFile-es.js';
 import '../index-es.js';
 import '../_commonjsHelpers-es.js';
 import 'axios';
-import '../InputValidation-es.js';
-import 'framer-motion';
 import '../Text-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../InputValidation-es.js';
+import 'framer-motion';
 import '../Content-es.js';
 import '../ProgressBar-es.js';

package/dist/InputFile/InputFile.d.ts

@@ -1,5 +1,9 @@
-import { SyntheticEvent } from "react";
+import React, { SyntheticEvent } from "react";
 import { FileError } from "react-dropzone";
+import { InputFileHintText } from "./InputFileHintText";
+import { InputFileDescription } from "./InputFileDescription";
+import { InputFileButton } from "./InputFileButton";
+import { InputFileDropzoneWrapper } from "./InputFileDropzoneWrapper";
 export interface FileUpload {
     /**
      * File Identifier
@@ -100,6 +104,10 @@ interface InputFileProps {
      * @default false
      */
     readonly allowMultiple?: boolean;
+    /**
+     * Override the default hint text with a custom value.
+     */
+    readonly hintText?: string;
     /**
      * Further description of the input.
      */
@@ -120,6 +128,10 @@ interface InputFileProps {
          */
         readonly numberOfCurrentFiles: number;
     };
+    /**
+     * Children will be rendered instead of the default content
+     */
+    readonly children?: React.ReactNode;
     /**
      * A callback that receives a file object and returns a `UploadParams` needed
      * to upload the file.
@@ -149,7 +161,13 @@ interface InputFileProps {
      */
     readonly validator?: <T extends File>(file: T) => FileError | FileError[] | null;
 }
-export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, description, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }: InputFileProps): JSX.Element;
+export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, description, hintText, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, children, }: InputFileProps): JSX.Element;
+export declare namespace InputFile {
+    var Button: typeof InputFileButton;
+    var Description: typeof InputFileDescription;
+    var DropzoneWrapper: typeof InputFileDropzoneWrapper;
+    var HintText: typeof InputFileHintText;
+}
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.
  * `key` is used to uniquely identify files.

package/dist/InputFile/InputFileButton.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from "../Button";
+interface InputFileButtonProps extends Omit<ButtonProps, "submit" | "name" | "value" | "to" | "url" | "children"> {
+}
+export declare function InputFileButton({ label, size, fullWidth, ...buttonProps }: InputFileButtonProps): JSX.Element;
+export {};

package/dist/InputFile/InputFileContentContext.d.ts

@@ -0,0 +1,12 @@
+import { ButtonSize } from "../Button";
+export interface InputFileContentContextValue {
+    readonly fileType: string;
+    readonly allowMultiple: boolean;
+    readonly description: string | undefined;
+    readonly hintText: string;
+    readonly buttonLabel: string;
+    readonly size: ButtonSize;
+}
+declare const InputFileContentContext: import("react").Context<InputFileContentContextValue>;
+declare function useInputFileContentContext(): InputFileContentContextValue;
+export { InputFileContentContext, useInputFileContentContext };

package/dist/InputFile/InputFileDescription.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import { TextProps } from "../Text";
+export declare function InputFileDescription({ size, variation, children, ...textProps }: PropsWithChildren<TextProps>): JSX.Element | null;

package/dist/InputFile/InputFileDropzoneWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function InputFileDropzoneWrapper({ children, }: {
+    readonly children: React.ReactNode;
+}): JSX.Element;

package/dist/InputFile/InputFileHintText.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import { TextProps } from "../Text";
+export declare function InputFileHintText({ size, children, ...textProps }: PropsWithChildren<TextProps>): JSX.Element;

package/dist/InputFile/InputFileValidationErrors.d.ts

@@ -0,0 +1,4 @@
+import { InputFileValidationError } from "./types";
+export declare function InputFileValidationErrors({ validationErrors, }: {
+    readonly validationErrors: InputFileValidationError[];
+}): JSX.Element | null;

package/dist/InputFile/index.cjs

@@ -7,17 +7,19 @@ require('classnames');
 require('../index-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('axios');
-require('../InputValidation-cjs.js');
-require('framer-motion');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
-require('../Icon-cjs.js');
-require('@jobber/design');
 require('../Button-cjs.js');
 require('react-router-dom');
+require('../Icon-cjs.js');
+require('@jobber/design');
+require('../InputValidation-cjs.js');
+require('framer-motion');
 require('../Content-cjs.js');
 
 
 
 exports.InputFile = InputFile.InputFile;
+exports.InputFileContentContext = InputFile.InputFileContentContext;
 exports.updateFiles = InputFile.updateFiles;
+exports.useInputFileContentContext = InputFile.useInputFileContentContext;

package/dist/InputFile/index.d.ts

@@ -1 +1,2 @@
 export { InputFile, updateFiles, FileUpload, UploadParams } from "./InputFile";
+export { InputFileContentContext, useInputFileContentContext, } from "./InputFileContentContext";

package/dist/InputFile/index.mjs

@@ -1,16 +1,16 @@
-export { I as InputFile, u as updateFiles } from '../InputFile-es.js';
+export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from '../InputFile-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '../index-es.js';
 import '../_commonjsHelpers-es.js';
 import 'axios';
-import '../InputValidation-es.js';
-import 'framer-motion';
 import '../Text-es.js';
 import '../Typography-es.js';
-import '../Icon-es.js';
-import '@jobber/design';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../Icon-es.js';
+import '@jobber/design';
+import '../InputValidation-es.js';
+import 'framer-motion';
 import '../Content-es.js';

package/dist/InputFile/types.d.ts

@@ -0,0 +1,4 @@
+export interface InputFileValidationError {
+    readonly code: string;
+    readonly message: string;
+}

package/dist/InputFile-cjs.js

@@ -5,10 +5,10 @@ var React = require('react');
 var classnames = require('classnames');
 var index = require('./index-cjs.js');
 var axios = require('axios');
-var InputValidation = require('./InputValidation-cjs.js');
+var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
+var InputValidation = require('./InputValidation-cjs.js');
 var Content = require('./Content-cjs.js');
-var Typography = require('./Typography-cjs.js');
 
 var COMMON_MIME_TYPES = new Map([
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
@@ -1473,8 +1473,67 @@ function formatMimeTypes(types) {
     }
 }
 
+const InputFileContentContext = React.createContext({
+    fileType: "File",
+    allowMultiple: false,
+    description: undefined,
+    hintText: getDefaultHintText("File", false),
+    buttonLabel: getDefaultLabel(false, "File"),
+    size: "base",
+});
+function useInputFileContentContext() {
+    const context = React.useContext(InputFileContentContext);
+    const computedHintText = context.hintText ||
+        getDefaultHintText(context.fileType, context.allowMultiple);
+    const computedButtonLabel = context.buttonLabel ||
+        getDefaultLabel(context.allowMultiple, context.fileType);
+    return Object.assign(Object.assign({}, context), { hintText: computedHintText, buttonLabel: computedButtonLabel });
+}
+function getDefaultLabel(multiple, fileType) {
+    return multiple ? `Upload ${fileType}s` : `Upload ${fileType}`;
+}
+function getDefaultHintText(fileType, multiple) {
+    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`;
+    return hintText;
+}
+
+function InputFileHintText(_a) {
+    var { size = "small", children } = _a, textProps = tslib_es6.__rest(_a, ["size", "children"]);
+    const { hintText } = useInputFileContentContext();
+    return (React.createElement(Text.Text, Object.assign({}, textProps, { size: size }), children || hintText));
+}
+
+function InputFileDescription(_a) {
+    var { size = "small", variation = "subdued", children } = _a, textProps = tslib_es6.__rest(_a, ["size", "variation", "children"]);
+    const { description } = useInputFileContentContext();
+    if (!children && !description) {
+        return null;
+    }
+    return (React.createElement(Text.Text, Object.assign({ size: size, variation: variation }, textProps), children || description));
+}
+
+function InputFileButton(_a) {
+    var { label, size, fullWidth = false } = _a, buttonProps = tslib_es6.__rest(_a, ["label", "size", "fullWidth"]);
+    const { buttonLabel: contextLabel, size: contextSize } = useInputFileContentContext();
+    return (React.createElement(Button.Button, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
+}
+
+function InputFileDropzoneWrapper({ children, }) {
+    return React.createElement("div", { className: styles.dropzoneContent }, children);
+}
+
+function InputFileValidationErrors({ validationErrors, }) {
+    if (validationErrors.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: styles.validationErrors }, validationErrors.map(error => (React.createElement(InputValidation.InputValidation, { message: error.message, key: error.code })))));
+}
+
 /* eslint-disable max-statements */
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", description, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", description, hintText, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, children, }) {
     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) => {
@@ -1545,23 +1604,35 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
         });
         return acc;
     }, []);
-    const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
     const dropZone = classnames(styles.dropZoneBase, {
         [styles.dropZone]: variation === "dropzone",
         [styles.active]: isDragActive,
         [styles.error]: (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0,
     });
+    const fileType = allowedTypes === "images" || allowedTypes === "basicImages"
+        ? "Image"
+        : "File";
+    const contentContext = {
+        fileType: fileType,
+        allowMultiple,
+        description,
+        hintText: hintText || "",
+        buttonLabel: providedButtonLabel || "",
+        size,
+    };
+    const defaultContent = (React.createElement(React.Fragment, null,
+        variation === "dropzone" && (React.createElement(InputFile.DropzoneWrapper, null,
+            React.createElement(Content.Content, { spacing: "small" },
+                React.createElement(InputFile.Button, { size: "small", fullWidth: false }),
+                size === "base" && (React.createElement(React.Fragment, null,
+                    React.createElement(InputFile.HintText, null),
+                    React.createElement(InputFile.Description, null)))))),
+        variation === "button" && React.createElement(InputFile.Button, { fullWidth: true })));
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-            React.createElement("input", Object.assign({}, getInputProps())),
-            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(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 }))),
-        (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 })))))));
+            React.createElement("input", Object.assign({}, getInputProps(), { "data-testid": "input-file-input" })),
+            React.createElement(InputFileContentContext.Provider, { value: contentContext }, children || defaultContent)),
+        React.createElement(InputFileValidationErrors, { validationErrors: validationErrors })));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);
@@ -1626,19 +1697,6 @@ function createAxiosConfig({ url, httpMethod = "POST", fields = {}, file, handle
         onUploadProgress: handleUploadProgress,
     };
 }
-function getLabels(providedButtonLabel, multiple, allowedTypes) {
-    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 };
-}
 function getFileUpload(file, key, uploadUrl) {
     return {
         key: key,
@@ -1689,6 +1747,12 @@ function updateFiles(updatedFile, files) {
 function generateId() {
     return Math.floor(Math.random() * Date.now()).toString(16);
 }
+InputFile.Button = InputFileButton;
+InputFile.Description = InputFileDescription;
+InputFile.DropzoneWrapper = InputFileDropzoneWrapper;
+InputFile.HintText = InputFileHintText;
 
 exports.InputFile = InputFile;
+exports.InputFileContentContext = InputFileContentContext;
 exports.updateFiles = updateFiles;
+exports.useInputFileContentContext = useInputFileContentContext;

package/dist/InputFile-es.js

@@ -1,12 +1,12 @@
-import { a as __awaiter, b as __generator, c as __spread } from './tslib.es6-es.js';
-import React, { forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useEffect, useCallback } from 'react';
+import { a as __awaiter, b as __generator, c as __spread, _ as __rest } from './tslib.es6-es.js';
+import React, { forwardRef, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useEffect, useCallback, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { P as PropTypes } from './index-es.js';
 import axios from 'axios';
-import { I as InputValidation } from './InputValidation-es.js';
+import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
+import { I as InputValidation } from './InputValidation-es.js';
 import { C as Content } from './Content-es.js';
-import { T as Typography } from './Typography-es.js';
 
 var COMMON_MIME_TYPES = new Map([
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
@@ -1471,8 +1471,67 @@ function formatMimeTypes(types) {
     }
 }
 
+const InputFileContentContext = createContext({
+    fileType: "File",
+    allowMultiple: false,
+    description: undefined,
+    hintText: getDefaultHintText("File", false),
+    buttonLabel: getDefaultLabel(false, "File"),
+    size: "base",
+});
+function useInputFileContentContext() {
+    const context = useContext(InputFileContentContext);
+    const computedHintText = context.hintText ||
+        getDefaultHintText(context.fileType, context.allowMultiple);
+    const computedButtonLabel = context.buttonLabel ||
+        getDefaultLabel(context.allowMultiple, context.fileType);
+    return Object.assign(Object.assign({}, context), { hintText: computedHintText, buttonLabel: computedButtonLabel });
+}
+function getDefaultLabel(multiple, fileType) {
+    return multiple ? `Upload ${fileType}s` : `Upload ${fileType}`;
+}
+function getDefaultHintText(fileType, multiple) {
+    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`;
+    return hintText;
+}
+
+function InputFileHintText(_a) {
+    var { size = "small", children } = _a, textProps = __rest(_a, ["size", "children"]);
+    const { hintText } = useInputFileContentContext();
+    return (React.createElement(Text, Object.assign({}, textProps, { size: size }), children || hintText));
+}
+
+function InputFileDescription(_a) {
+    var { size = "small", variation = "subdued", children } = _a, textProps = __rest(_a, ["size", "variation", "children"]);
+    const { description } = useInputFileContentContext();
+    if (!children && !description) {
+        return null;
+    }
+    return (React.createElement(Text, Object.assign({ size: size, variation: variation }, textProps), children || description));
+}
+
+function InputFileButton(_a) {
+    var { label, size, fullWidth = false } = _a, buttonProps = __rest(_a, ["label", "size", "fullWidth"]);
+    const { buttonLabel: contextLabel, size: contextSize } = useInputFileContentContext();
+    return (React.createElement(Button, Object.assign({}, buttonProps, { label: label || contextLabel, size: size !== null && size !== void 0 ? size : contextSize, type: "secondary", fullWidth: fullWidth })));
+}
+
+function InputFileDropzoneWrapper({ children, }) {
+    return React.createElement("div", { className: styles.dropzoneContent }, children);
+}
+
+function InputFileValidationErrors({ validationErrors, }) {
+    if (validationErrors.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: styles.validationErrors }, validationErrors.map(error => (React.createElement(InputValidation, { message: error.message, key: error.code })))));
+}
+
 /* eslint-disable max-statements */
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", description, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", description, hintText, maxFilesValidation, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, children, }) {
     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) => {
@@ -1543,23 +1602,35 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
         });
         return acc;
     }, []);
-    const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
     const dropZone = classnames(styles.dropZoneBase, {
         [styles.dropZone]: variation === "dropzone",
         [styles.active]: isDragActive,
         [styles.error]: (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0,
     });
+    const fileType = allowedTypes === "images" || allowedTypes === "basicImages"
+        ? "Image"
+        : "File";
+    const contentContext = {
+        fileType: fileType,
+        allowMultiple,
+        description,
+        hintText: hintText || "",
+        buttonLabel: providedButtonLabel || "",
+        size,
+    };
+    const defaultContent = (React.createElement(React.Fragment, null,
+        variation === "dropzone" && (React.createElement(InputFile.DropzoneWrapper, null,
+            React.createElement(Content, { spacing: "small" },
+                React.createElement(InputFile.Button, { size: "small", fullWidth: false }),
+                size === "base" && (React.createElement(React.Fragment, null,
+                    React.createElement(InputFile.HintText, null),
+                    React.createElement(InputFile.Description, null)))))),
+        variation === "button" && React.createElement(InputFile.Button, { fullWidth: true })));
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-            React.createElement("input", Object.assign({}, getInputProps())),
-            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(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 }))),
-        (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 })))))));
+            React.createElement("input", Object.assign({}, getInputProps(), { "data-testid": "input-file-input" })),
+            React.createElement(InputFileContentContext.Provider, { value: contentContext }, children || defaultContent)),
+        React.createElement(InputFileValidationErrors, { validationErrors: validationErrors })));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);
@@ -1624,19 +1695,6 @@ function createAxiosConfig({ url, httpMethod = "POST", fields = {}, file, handle
         onUploadProgress: handleUploadProgress,
     };
 }
-function getLabels(providedButtonLabel, multiple, allowedTypes) {
-    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 };
-}
 function getFileUpload(file, key, uploadUrl) {
     return {
         key: key,
@@ -1687,5 +1745,9 @@ function updateFiles(updatedFile, files) {
 function generateId() {
     return Math.floor(Math.random() * Date.now()).toString(16);
 }
+InputFile.Button = InputFileButton;
+InputFile.Description = InputFileDescription;
+InputFile.DropzoneWrapper = InputFileDropzoneWrapper;
+InputFile.HintText = InputFileHintText;
 
-export { InputFile as I, updateFiles as u };
+export { InputFile as I, InputFileContentContext as a, useInputFileContentContext as b, updateFiles as u };

package/dist/Text/Text.d.ts

@@ -1,9 +1,8 @@
 import { PropsWithChildren } from "react";
-interface TextProps {
+export interface TextProps {
     readonly maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
     readonly variation?: "default" | "subdued" | "success" | "error" | "warn" | "info" | "disabled";
     readonly align?: "start" | "center" | "end";
     readonly size?: "small" | "base" | "large";
 }
 export declare function Text({ variation, size, align, children, maxLines, }: PropsWithChildren<TextProps>): JSX.Element;
-export {};

package/dist/Text/index.d.ts

@@ -1 +1,2 @@
 export { Text } from "./Text";
+export type { TextProps } from "./Text";

package/dist/index.cjs

@@ -259,7 +259,9 @@ exports.InputDate = InputDate_index.InputDate;
 exports.InputEmail = InputEmail.InputEmail;
 exports.validationMessage = InputEmail.validationMessage;
 exports.InputFile = InputFile.InputFile;
+exports.InputFileContentContext = InputFile.InputFileContentContext;
 exports.updateFiles = InputFile.updateFiles;
+exports.useInputFileContentContext = InputFile.useInputFileContentContext;
 exports.InputGroup = InputGroup.InputGroup;
 exports.InputNumber = InputNumber.InputNumber;
 exports.InputPassword = InputPassword.InputPassword;

package/dist/index.mjs

@@ -56,7 +56,7 @@ export { I as InlineLabel } from './InlineLabel-es.js';
 export { I as InputAvatar } from './InputAvatar-es.js';
 export { InputDate } from './InputDate/index.mjs';
 export { I as InputEmail, v as validationMessage } from './InputEmail-es.js';
-export { I as InputFile, u as updateFiles } from './InputFile-es.js';
+export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from './InputFile-es.js';
 export { I as InputGroup } from './InputGroup-es.js';
 export { I as InputNumber } from './InputNumber-es.js';
 export { I as InputPassword } from './InputPassword-es.js';

package/dist/utils/meta/meta.json

@@ -87,6 +87,12 @@
     "InputDate",
     "InputEmail",
     "InputFile",
+    "InputFile.Button",
+    "InputFile.Description",
+    "InputFile.DropzoneWrapper",
+    "InputFile.HintText",
+    "InputFileContentContext.Consumer",
+    "InputFileContentContext.Provider",
     "InputGroup",
     "InputNumber",
     "InputPassword",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.21.0",
+  "version": "6.22.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "28e267f721a53c3aa458cdc30ea15b9aaf11c66e"
+  "gitHead": "e9c763ee038899442b41548c22005d4ff2ab00db"
 }