@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.5

package/dist/InputDate/index.mjs

@@ -0,0 +1,21 @@
+export { I as InputDate } from '../InputDate-68050753.js';
+import 'lodash/omit';
+import 'react';
+import '../FormField-8118cfc8.js';
+import '../tslib.es6-c563c1dd.js';
+import 'react-hook-form';
+import '../style-inject.es-a0e1a0ba.js';
+import 'classnames';
+import '@jobber/hooks/useShowClear';
+import '../Button-9ae092b3.js';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Typography-7cc5daf5.js';
+import '../Text-c9162504.js';
+import '../InputValidation-d68fb034.js';
+import 'framer-motion';
+import '../Spinner-5d8359b8.js';
+import '../DatePicker-85127ebc.js';
+import 'react-datepicker';
+import '@jobber/hooks/useRefocusOnActivator';

package/dist/InputDate-68050753.js

@@ -0,0 +1,32 @@
+import omit from 'lodash/omit';
+import React, { useRef } from 'react';
+import { F as FormField } from './FormField-8118cfc8.js';
+import { D as DatePicker } from './DatePicker-85127ebc.js';
+
+function InputDate(inputProps) {
+    const formFieldActionsRef = useRef(null);
+    return (React.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
+            var _a;
+            const { onChange, onClick, value } = activatorProps;
+            const newActivatorProps = omit(activatorProps, ["activator"]);
+            const suffix = Object.assign({ icon: "calendar" }, (onClick && {
+                onClick: onClick,
+                ariaLabel: "Show calendar",
+            }));
+            // Set form field to formatted date string immediately, to avoid validations
+            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
+            value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            return (
+            // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
+            React.createElement("div", { onClick: onClick },
+                React.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
+                        inputProps.onBlur && inputProps.onBlur();
+                        activatorProps.onBlur && activatorProps.onBlur();
+                    }, onFocus: () => {
+                        inputProps.onFocus && inputProps.onFocus();
+                        activatorProps.onFocus && activatorProps.onFocus();
+                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
+        } }));
+}
+
+export { InputDate as I };

package/dist/InputDate-77bcc250.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var omit = require('lodash/omit');
+var React = require('react');
+var FormField = require('./FormField-6ff183f8.js');
+var DatePicker = require('./DatePicker-64c5ab1a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function InputDate(inputProps) {
+    const formFieldActionsRef = React.useRef(null);
+    return (React__default["default"].createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
+            var _a;
+            const { onChange, onClick, value } = activatorProps;
+            const newActivatorProps = omit__default["default"](activatorProps, ["activator"]);
+            const suffix = Object.assign({ icon: "calendar" }, (onClick && {
+                onClick: onClick,
+                ariaLabel: "Show calendar",
+            }));
+            // Set form field to formatted date string immediately, to avoid validations
+            //  triggering incorrectly when it blurs (to handle the datepicker UI click)
+            value && ((_a = formFieldActionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(value));
+            return (
+            // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
+            React__default["default"].createElement("div", { onClick: onClick },
+                React__default["default"].createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: value, onChange: (_, event) => onChange && onChange(event), onBlur: () => {
+                        inputProps.onBlur && inputProps.onBlur();
+                        activatorProps.onBlur && activatorProps.onBlur();
+                    }, onFocus: () => {
+                        inputProps.onFocus && inputProps.onFocus();
+                        activatorProps.onFocus && activatorProps.onFocus();
+                    }, actionsRef: formFieldActionsRef, suffix: suffix }))));
+        } }));
+}
+
+exports.InputDate = InputDate;

package/dist/InputEmail/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputEmail = require('../InputEmail-3103e37c.js');
+require('react');
+require('../FormField-6ff183f8.js');
+require('../tslib.es6-754e2961.js');
+require('react-hook-form');
+require('../style-inject.es-9d2f5f4e.js');
+require('classnames');
+require('@jobber/hooks/useShowClear');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Typography-c45bf216.js');
+require('../Text-259af966.js');
+require('../InputValidation-05e839fa.js');
+require('framer-motion');
+require('../Spinner-9d8fc7ff.js');
+
+
+
+exports.InputEmail = InputEmail.InputEmail;
+exports.validationMessage = InputEmail.validationMessage;

package/dist/InputEmail/index.mjs

@@ -0,0 +1,17 @@
+export { I as InputEmail, v as validationMessage } from '../InputEmail-88d617d7.js';
+import 'react';
+import '../FormField-8118cfc8.js';
+import '../tslib.es6-c563c1dd.js';
+import 'react-hook-form';
+import '../style-inject.es-a0e1a0ba.js';
+import 'classnames';
+import '@jobber/hooks/useShowClear';
+import '../Button-9ae092b3.js';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Typography-7cc5daf5.js';
+import '../Text-c9162504.js';
+import '../InputValidation-d68fb034.js';
+import 'framer-motion';
+import '../Spinner-5d8359b8.js';

package/dist/InputEmail-3103e37c.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var FormField = require('./FormField-6ff183f8.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const validationMessage = "Please enter a valid email";
+function InputEmail(props) {
+    const { validations } = props;
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
+    function checkForValidEmail(value) {
+        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if (!value) {
+            return true;
+        }
+        if (!value.match(emailRegex)) {
+            return validationMessage;
+        }
+        return true;
+    }
+}
+
+exports.InputEmail = InputEmail;
+exports.validationMessage = validationMessage;

package/dist/InputEmail-88d617d7.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { F as FormField } from './FormField-8118cfc8.js';
+
+const validationMessage = "Please enter a valid email";
+function InputEmail(props) {
+    const { validations } = props;
+    return (React.createElement(FormField, Object.assign({}, props, { type: "email", validations: Object.assign(Object.assign({}, validations), { validate: checkForValidEmail }) })));
+    function checkForValidEmail(value) {
+        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        if (!value) {
+            return true;
+        }
+        if (!value.match(emailRegex)) {
+            return validationMessage;
+        }
+        return true;
+    }
+}
+
+export { InputEmail as I, validationMessage as v };

package/dist/InputFile/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputFile = require('../InputFile-bb945071.js');
+require('../tslib.es6-754e2961.js');
+require('react');
+require('classnames');
+require('react-dropzone');
+require('axios');
+require('../style-inject.es-9d2f5f4e.js');
+require('../InputValidation-05e839fa.js');
+require('framer-motion');
+require('../Text-259af966.js');
+require('../Typography-c45bf216.js');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
+require('../Content-e3f7b6fc.js');
+
+
+
+exports.InputFile = InputFile.InputFile;
+exports.updateFiles = InputFile.updateFiles;

package/dist/InputFile/index.mjs

@@ -0,0 +1,16 @@
+export { I as InputFile, u as updateFiles } from '../InputFile-cfa53555.js';
+import '../tslib.es6-c563c1dd.js';
+import 'react';
+import 'classnames';
+import 'react-dropzone';
+import 'axios';
+import '../style-inject.es-a0e1a0ba.js';
+import '../InputValidation-d68fb034.js';
+import 'framer-motion';
+import '../Text-c9162504.js';
+import '../Typography-7cc5daf5.js';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Button-9ae092b3.js';
+import 'react-router-dom';
+import '../Content-c4ea919f.js';

package/dist/InputFile-bb945071.js

@@ -0,0 +1,190 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-754e2961.js');
+var React = require('react');
+var classnames = require('classnames');
+var reactDropzone = require('react-dropzone');
+var axios = require('axios');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var InputValidation = require('./InputValidation-05e839fa.js');
+var Button = require('./Button-b73a5e01.js');
+var Content = require('./Content-e3f7b6fc.js');
+var Typography = require('./Typography-c45bf216.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+
+var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.WHhHWgaoXk4-.MRRclAp51-w- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n.TIbSRNvDK10- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n";
+var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-"};
+styleInject_es.styleInject(css_248z);
+
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+    const options = {
+        multiple: allowMultiple,
+        onDrop: React.useCallback(handleDrop, [uploadFile]),
+        validator: validator && React.useCallback(validator, []),
+    };
+    if (allowedTypes === "images") {
+        options.accept = "image/*";
+    }
+    else if (allowedTypes === "basicImages") {
+        options.accept = "image/png, image/jpg, image/jpeg";
+    }
+    else if (Array.isArray(allowedTypes)) {
+        options.accept = allowedTypes.join(",");
+    }
+    const { getRootProps, getInputProps, isDragActive, fileRejections } = reactDropzone.useDropzone(options);
+    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.map(({ file, errors }) => {
+        return errors.map(error => {
+            return (React__default["default"].createElement(InputValidation.InputValidation, { message: `${file.name} ${error.message}`, key: `${file.name}${error.code}` }));
+        });
+    });
+    const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
+    const dropZone = classnames__default["default"](styles.dropZoneBase, {
+        [styles.dropZone]: variation === "dropzone",
+        [styles.active]: isDragActive,
+        [styles.error]: (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0,
+    });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
+            React__default["default"].createElement("input", Object.assign({}, getInputProps())),
+            variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
+                React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
+                size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
+            variation === "button" && (React__default["default"].createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))),
+        (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React__default["default"].createElement("div", { className: styles.validationErrors }, validationErrors))));
+    function handleDrop(acceptedFiles) {
+        acceptedFiles.forEach(file => {
+            uploadFile(file);
+        });
+    }
+    function uploadFile(file) {
+        return tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            let params;
+            try {
+                params = yield getUploadParams(file);
+            }
+            catch (_a) {
+                onUploadError && onUploadError(new Error("Failed to get upload params"));
+                return;
+            }
+            const { url, key = generateId(), fields = {}, httpMethod = "POST", } = params;
+            const fileUpload = getFileUpload(file, key, url);
+            onUploadStart && onUploadStart(Object.assign({}, fileUpload));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const handleUploadProgress = (progressEvent) => {
+                onUploadProgress &&
+                    onUploadProgress(Object.assign(Object.assign({}, fileUpload), { progress: progressEvent.loaded / progressEvent.total }));
+            };
+            const handleUploadComplete = () => {
+                onUploadComplete === null || onUploadComplete === void 0 ? void 0 : onUploadComplete(Object.assign(Object.assign({}, fileUpload), { progress: 1 }));
+            };
+            const axiosConfig = createAxiosConfig({
+                url,
+                httpMethod,
+                fields,
+                file,
+                handleUploadProgress,
+            });
+            axios__default["default"]
+                .request(axiosConfig)
+                .then(handleUploadComplete)
+                .catch(() => {
+                onUploadError && onUploadError(new Error("Failed to upload file"));
+            });
+        });
+    }
+}
+function createAxiosConfig({ url, httpMethod = "POST", fields = {}, file, handleUploadProgress, }) {
+    let data;
+    let headers;
+    if (httpMethod === "POST") {
+        const formData = new FormData();
+        Object.entries(fields).forEach(([field, value]) => formData.append(field, value));
+        formData.append("file", file);
+        data = formData;
+        headers = { "X-Requested-With": "XMLHttpRequest" };
+    }
+    else {
+        data = file;
+        headers = fields;
+    }
+    return {
+        method: httpMethod,
+        url: url,
+        headers: headers,
+        data: data,
+        onUploadProgress: handleUploadProgress,
+    };
+}
+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";
+    }
+    if (providedButtonLabel)
+        buttonLabel = providedButtonLabel;
+    return { buttonLabel, hintText };
+}
+function getFileUpload(file, key, uploadUrl) {
+    return {
+        key: key,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        progress: 0,
+        src: getSrc,
+        uploadUrl,
+    };
+    function getSrc() {
+        const promise = new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = event => {
+                if (event.target &&
+                    event.target.result &&
+                    typeof event.target.result === "string") {
+                    resolve(event.target.result);
+                }
+                else {
+                    reject("Could not generate file data url.");
+                }
+            };
+            reader.readAsDataURL(file);
+        });
+        return promise;
+    }
+}
+/**
+ * Upsert a given `FileUpload` into an array of `FileUpload`s.
+ * `key` is used to uniquely identify files.
+ *
+ * @param updatedFile FileUpload File that was updated.
+ * @param files Existing array of FileUploads.
+ * @returns FileUpload[] updated set of files.
+ */
+function updateFiles(updatedFile, files) {
+    const newFiles = [...files];
+    const index = files.findIndex(file => file.key === updatedFile.key);
+    if (index !== -1) {
+        newFiles[index] = updatedFile;
+    }
+    else {
+        newFiles.push(updatedFile);
+    }
+    return newFiles;
+}
+function generateId() {
+    return Math.floor(Math.random() * Date.now()).toString(16);
+}
+
+exports.InputFile = InputFile;
+exports.updateFiles = updateFiles;

package/dist/InputFile-cfa53555.js

@@ -0,0 +1,181 @@
+import { a as __awaiter } from './tslib.es6-c563c1dd.js';
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { useDropzone } from 'react-dropzone';
+import axios from 'axios';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { I as InputValidation } from './InputValidation-d68fb034.js';
+import { B as Button } from './Button-9ae092b3.js';
+import { C as Content } from './Content-c4ea919f.js';
+import { T as Typography } from './Typography-7cc5daf5.js';
+
+var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.WHhHWgaoXk4-.MRRclAp51-w- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n.TIbSRNvDK10- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n";
+var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-"};
+styleInject(css_248z);
+
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
+    const options = {
+        multiple: allowMultiple,
+        onDrop: useCallback(handleDrop, [uploadFile]),
+        validator: validator && useCallback(validator, []),
+    };
+    if (allowedTypes === "images") {
+        options.accept = "image/*";
+    }
+    else if (allowedTypes === "basicImages") {
+        options.accept = "image/png, image/jpg, image/jpeg";
+    }
+    else if (Array.isArray(allowedTypes)) {
+        options.accept = 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 { 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,
+    });
+    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(Content, { spacing: "small" },
+                React.createElement(Button, { label: buttonLabel, size: "small", type: "secondary" }),
+                size === "base" && (React.createElement(Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
+            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))));
+    function handleDrop(acceptedFiles) {
+        acceptedFiles.forEach(file => {
+            uploadFile(file);
+        });
+    }
+    function uploadFile(file) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let params;
+            try {
+                params = yield getUploadParams(file);
+            }
+            catch (_a) {
+                onUploadError && onUploadError(new Error("Failed to get upload params"));
+                return;
+            }
+            const { url, key = generateId(), fields = {}, httpMethod = "POST", } = params;
+            const fileUpload = getFileUpload(file, key, url);
+            onUploadStart && onUploadStart(Object.assign({}, fileUpload));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const handleUploadProgress = (progressEvent) => {
+                onUploadProgress &&
+                    onUploadProgress(Object.assign(Object.assign({}, fileUpload), { progress: progressEvent.loaded / progressEvent.total }));
+            };
+            const handleUploadComplete = () => {
+                onUploadComplete === null || onUploadComplete === void 0 ? void 0 : onUploadComplete(Object.assign(Object.assign({}, fileUpload), { progress: 1 }));
+            };
+            const axiosConfig = createAxiosConfig({
+                url,
+                httpMethod,
+                fields,
+                file,
+                handleUploadProgress,
+            });
+            axios
+                .request(axiosConfig)
+                .then(handleUploadComplete)
+                .catch(() => {
+                onUploadError && onUploadError(new Error("Failed to upload file"));
+            });
+        });
+    }
+}
+function createAxiosConfig({ url, httpMethod = "POST", fields = {}, file, handleUploadProgress, }) {
+    let data;
+    let headers;
+    if (httpMethod === "POST") {
+        const formData = new FormData();
+        Object.entries(fields).forEach(([field, value]) => formData.append(field, value));
+        formData.append("file", file);
+        data = formData;
+        headers = { "X-Requested-With": "XMLHttpRequest" };
+    }
+    else {
+        data = file;
+        headers = fields;
+    }
+    return {
+        method: httpMethod,
+        url: url,
+        headers: headers,
+        data: data,
+        onUploadProgress: handleUploadProgress,
+    };
+}
+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";
+    }
+    if (providedButtonLabel)
+        buttonLabel = providedButtonLabel;
+    return { buttonLabel, hintText };
+}
+function getFileUpload(file, key, uploadUrl) {
+    return {
+        key: key,
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        progress: 0,
+        src: getSrc,
+        uploadUrl,
+    };
+    function getSrc() {
+        const promise = new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = event => {
+                if (event.target &&
+                    event.target.result &&
+                    typeof event.target.result === "string") {
+                    resolve(event.target.result);
+                }
+                else {
+                    reject("Could not generate file data url.");
+                }
+            };
+            reader.readAsDataURL(file);
+        });
+        return promise;
+    }
+}
+/**
+ * Upsert a given `FileUpload` into an array of `FileUpload`s.
+ * `key` is used to uniquely identify files.
+ *
+ * @param updatedFile FileUpload File that was updated.
+ * @param files Existing array of FileUploads.
+ * @returns FileUpload[] updated set of files.
+ */
+function updateFiles(updatedFile, files) {
+    const newFiles = [...files];
+    const index = files.findIndex(file => file.key === updatedFile.key);
+    if (index !== -1) {
+        newFiles[index] = updatedFile;
+    }
+    else {
+        newFiles.push(updatedFile);
+    }
+    return newFiles;
+}
+function generateId() {
+    return Math.floor(Math.random() * Date.now()).toString(16);
+}
+
+export { InputFile as I, updateFiles as u };

package/dist/InputGroup/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputGroup = require('../InputGroup-8d4fd4eb.js');
+require('react');
+require('classnames');
+require('../style-inject.es-9d2f5f4e.js');
+
+
+
+exports.InputGroup = InputGroup.InputGroup;

package/dist/InputGroup/index.mjs

@@ -0,0 +1,4 @@
+export { I as InputGroup } from '../InputGroup-436859cf.js';
+import 'react';
+import 'classnames';
+import '../style-inject.es-a0e1a0ba.js';

package/dist/InputNumber/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputNumber = require('../InputNumber-d451b52e.js');
+require('react');
+require('../FormField-6ff183f8.js');
+require('../tslib.es6-754e2961.js');
+require('react-hook-form');
+require('../style-inject.es-9d2f5f4e.js');
+require('classnames');
+require('@jobber/hooks/useShowClear');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Typography-c45bf216.js');
+require('../Text-259af966.js');
+require('../InputValidation-05e839fa.js');
+require('framer-motion');
+require('../Spinner-9d8fc7ff.js');
+
+
+
+exports.InputNumber = InputNumber.InputNumber;