@jobber/components 4.69.2 → 4.69.3-JOB-84091.16

package/dist/{FormatFile-aae6c6e2.js → FormatFile-cc949eaf.js}

@@ -53,11 +53,52 @@ function InternalThumbnailImage({ file }) {
     }
 }
 
+// This function comes from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
+function getClientBrowser(userAgent) {
+    // The order matters here, and this may report false positives for unlisted browsers.
+    if (userAgent.includes("Firefox")) {
+        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
+        return "Mozilla Firefox";
+    }
+    else if (userAgent.includes("SamsungBrowser")) {
+        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
+        return "Samsung Internet";
+    }
+    else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
+        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
+        return "Opera";
+    }
+    else if (userAgent.includes("Edge")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+        return "Microsoft Edge (Legacy)";
+    }
+    else if (userAgent.includes("Edg")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
+        return "Microsoft Edge (Chromium)";
+    }
+    else if (userAgent.includes("Chrome")) {
+        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
+        return "Google Chrome or Chromium";
+    }
+    else if (userAgent.includes("Safari")) {
+        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
+        return "Apple Safari";
+    }
+    else {
+        return "unknown";
+    }
+}
+function isSafari(userAgent) {
+    return getClientBrowser(userAgent) === "Apple Safari";
+}
+
 function InternalThumbnail({ compact = false, size, file, }) {
     const { name, type } = file;
     const iconName = getIconNameFromType(type);
     const hasName = Boolean(name) && compact;
-    if (type.startsWith("image/")) {
+    const nonHeicImage = !type.startsWith("image/heic");
+    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+    if (type.startsWith("image/") && (nonHeicImage || isSafari(userAgent))) {
         return React__default["default"].createElement(InternalThumbnailImage, { file: file });
     }
     return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
@@ -69,7 +110,7 @@ function InternalThumbnail({ compact = false, size, file, }) {
 }
 function getIconNameFromType(mimeType) {
     if (mimeType.startsWith("image/"))
-        return "camera";
+        return "image";
     if (mimeType.startsWith("video/"))
         return "video";
     switch (mimeType) {

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-a89d8863.js');
-var FormatFile = require('../FormatFile-aae6c6e2.js');
+var FormatFile = require('../FormatFile-cc949eaf.js');
 var Button = require('../Button-b73a5e01.js');
 require('framer-motion');
 require('react-dom');

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-65bfbd78.js');
+var InputFile = require('../InputFile-8767b7fd.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -16,8 +16,11 @@ require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../Content-2ca1ffe1.js');
+require('../InputValidation-a7a737f9.js');
+require('framer-motion');
+require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
+require('../Content-2ca1ffe1.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/InputDate/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var omit = require('lodash/omit');
 var React = require('react');
-var FormField = require('../FormField-a332b2a6.js');
+var FormField = require('../FormField-b0e74d32.js');
 var DatePicker = require('../DatePicker-64c5ab1a.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');

package/dist/InputEmail/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-a332b2a6.js');
+var FormField = require('../FormField-b0e74d32.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputFile/InputFile.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FileError } from "react-dropzone";
 export interface FileUpload {
     /**
      * File Identifier
@@ -82,10 +83,11 @@ interface InputFileProps {
      *
      * @param "images" - only accepts all types of image
      * @param "basicImages" - only accepts png, jpg and jpeg
+     * @param "string[]" - accept a specific list of MIME types
      *
      * @default "all"
      */
-    readonly allowedTypes?: "all" | "images" | "basicImages";
+    readonly allowedTypes?: "all" | "images" | "basicImages" | string[];
     /**
      * Allow for multiple files to be selected for upload.
      *
@@ -112,8 +114,16 @@ interface InputFileProps {
      * Upload event handler. Triggered on upload completion.
      */
     onUploadComplete?(file: FileUpload): void;
+    /**
+     *  Upload event handler. Triggered on upload error.
+     */
+    onUploadError?(error: Error): void;
+    /**
+     * Pass a custom validator function that will be called when a file is dropped.
+     */
+    readonly validator?: <T extends File>(file: T) => FileError | FileError[] | null;
 }
-export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }: InputFileProps): JSX.Element;
+export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, 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.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-65bfbd78.js');
+var InputFile = require('../InputFile-8767b7fd.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -10,11 +10,14 @@ require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-b73a5e01.js');
-require('react-router-dom');
+require('../InputValidation-a7a737f9.js');
+require('framer-motion');
+require('../Text-259af966.js');
+require('../Typography-c45bf216.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
 require('../Content-2ca1ffe1.js');
 
 

package/dist/{InputFile-65bfbd78.js → InputFile-8767b7fd.js}

@@ -7,6 +7,7 @@ var reactDropzone = require('react-dropzone');
 var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var InputValidation = require('./InputValidation-a7a737f9.js');
 var Button = require('./Button-b73a5e01.js');
 var Content = require('./Content-2ca1ffe1.js');
 var Typography = require('./Typography-c45bf216.js');
@@ -17,14 +18,15 @@ 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";
-var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-"};
+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, }) {
+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, []),
+        onDrop: React.useCallback(handleDrop, [uploadFile]),
+        validator: validator && React.useCallback(validator, []),
     };
     if (allowedTypes === "images") {
         options.accept = "image/*";
@@ -32,18 +34,29 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     else if (allowedTypes === "basicImages") {
         options.accept = "image/png, image/jpg, image/jpeg";
     }
-    const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone(options);
+    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("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 }))));
+    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);
@@ -51,7 +64,15 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     }
     function uploadFile(file) {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
-            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
+            let params;
+            try {
+                params = yield getUploadParams(file);
+            }
+            catch (_a) {
+                onUploadError && onUploadError(new Error("Failed to get upload params"));
+                return;
+            }
+            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST" } = params;
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -69,7 +90,12 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
                 file,
                 handleUploadProgress,
             });
-            axios__default["default"].request(axiosConfig).then(handleUploadComplete);
+            axios__default["default"]
+                .request(axiosConfig)
+                .then(handleUploadComplete)
+                .catch(() => {
+                onUploadError && onUploadError(new Error("Failed to upload file"));
+            });
         });
     }
 }

package/dist/InputNumber/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputNumber = require('../InputNumber-3f5d3f8d.js');
+var InputNumber = require('../InputNumber-79da1cdc.js');
 require('react');
-require('../FormField-a332b2a6.js');
+require('../FormField-b0e74d32.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputNumber-3f5d3f8d.js → InputNumber-79da1cdc.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-a332b2a6.js');
+var FormField = require('./FormField-b0e74d32.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputPassword/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var FormField = require('../FormField-a332b2a6.js');
+var FormField = require('../FormField-b0e74d32.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/InputPhoneNumber/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var FormField = require('../FormField-a332b2a6.js');
+var FormField = require('../FormField-b0e74d32.js');
 require('uuid');
 require('classnames');
 require('@jobber/hooks/useShowClear');

package/dist/InputText/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputText = require('../InputText-e2d4ac19.js');
+var InputText = require('../InputText-9e61365c.js');
 require('react');
-require('../FormField-a332b2a6.js');
+require('../FormField-b0e74d32.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');

package/dist/{InputText-e2d4ac19.js → InputText-9e61365c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-a332b2a6.js');
+var FormField = require('./FormField-b0e74d32.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/InputTime/hooks/useTimePredict.d.ts

@@ -0,0 +1,8 @@
+import { InputTimeProps } from "../InputTimeProps";
+interface UseTimePredictProps extends Pick<InputTimeProps, "value"> {
+    readonly handleChange: (value: string) => void;
+}
+export declare function useTimePredict({ value, handleChange }: UseTimePredictProps): {
+    setTypedTime: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+export {};

package/dist/InputTime/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-a332b2a6.js');
+var FormField = require('../FormField-b0e74d32.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-9d2f5f4e.js');
@@ -786,18 +786,173 @@ function InputTimeSafari(_a) {
     }
 }
 
+const DEBOUNCE_TIME = 300;
+function useTimePredict({ value, handleChange }) {
+    const IS_12_HOUR_FORMAT = React.useRef(Intl.DateTimeFormat(navigator.language, {
+        hour: "numeric",
+    }).resolvedOptions().hour12);
+    const [typedTime, setTypedTime] = React.useState("");
+    const predictTime = React.useCallback(debounce__default["default"](() => {
+        if (value)
+            return;
+        handleChange(predictHours(typedTime, IS_12_HOUR_FORMAT.current));
+    }, DEBOUNCE_TIME), [typedTime, value, handleChange]);
+    /**
+     * Predict the hour when user types a number
+     */
+    React.useEffect(() => {
+        /**
+         * Don't try to predict if the user types 0 as the user would almost always
+         * type another number after 0.
+         */
+        if (typedTime && typedTime !== "0") {
+            predictTime();
+            if ((IS_12_HOUR_FORMAT && typedTime !== "1") || typedTime.length === 2) {
+                // Immediately predict the hour
+                predictTime.flush();
+            }
+        }
+        return predictTime.cancel;
+    }, [typedTime]);
+    /**
+     * Reset typed time when the value changed
+     */
+    React.useEffect(() => {
+        setTypedTime("");
+    }, [value]);
+    return {
+        setTypedTime,
+    };
+}
+function predictHours(time, is12HourFormat = false) {
+    const today = new Date();
+    const currentHour = today.getHours();
+    const parsedTime = parseInt(time, 10);
+    let predictedTime;
+    if (is12HourFormat) {
+        predictedTime = predict12Hours(parsedTime, currentHour);
+    }
+    else {
+        predictedTime = predict24Hours(time, parsedTime, currentHour);
+    }
+    return formatHour(predictedTime);
+}
+function predict12Hours(parsedTime, currentHour) {
+    /**
+     * We need to predict what the user wants when they type 1 since it could be
+     * 10, 11, 12, or 1.
+     *
+     * If the current hour is over 12PM, we can skip this and go to the next logic.
+     */
+    if (parsedTime === 1 && currentHour < 12) {
+        if (currentHour < 10) {
+            return 10;
+        }
+        else {
+            return currentHour + 1;
+        }
+    }
+    /**
+     * Typing 1-5 predicts that the user want that exact hour on the afternoon.
+     */
+    if (parsedTime <= 5) {
+        return parsedTime + 12;
+    }
+    /**
+     * Typing 13-15 predicts that the user want the 2nd number as the minute interval.
+     */
+    if (parsedTime > 12 && parsedTime <= 15) {
+        const timeArray = parsedTime.toString().split("").map(Number); // 13 -> [1, 3]
+        const convertToHoursAndMinutes = timeArray.map((time, i) => {
+            if (i === 0)
+                return time + 12; // 1 -> 13 as 1PM
+            if (i === 1)
+                return time * 10; // 3 -> 30 as 30 minutes
+        });
+        return Number(convertToHoursAndMinutes.join("")); // [13, 30] -> 1330
+    }
+    /**
+     * Anything after 5 will be predicted to be set as AM.
+     */
+    return parsedTime;
+}
+function predict24Hours(time, parsedTime, currentHour) {
+    /**
+     * Typing 1 could be predicted from 10 to 19.
+     * Typing 01 skips this logic and sets the time to 01:00.
+     */
+    if (parsedTime === 1 && time !== "01") {
+        if (currentHour < 10 || currentHour > 19) {
+            return 10;
+        }
+        else {
+            return currentHour + 1;
+        }
+    }
+    /**
+     * Typing 2 could be predicted from 20 to 24.
+     * Typing 02 skips this logic and sets the time to 02:00.
+     */
+    if (parsedTime === 2 && time !== "02") {
+        if (currentHour < 20) {
+            return 20;
+        }
+        else {
+            return currentHour + 1;
+        }
+    }
+    /**
+     * Typing 24 or 00 is set to midnight. This ensures the time doesn't get set
+     * to 24 as that would be invalid.
+     */
+    if (parsedTime === 24 || time === "00") {
+        return 0;
+    }
+    return parsedTime;
+}
+function formatHour(time) {
+    if (time > 99) {
+        const splitTime = time.toString().split("");
+        if (splitTime.length === 3)
+            splitTime.unshift("0"); // 130 -> 0130
+        splitTime.splice(2, 0, ":"); // 0130 -> 01:30
+        return splitTime.join("");
+    }
+    if (time < 10) {
+        return `0${time}:00`;
+    }
+    return `${time}:00`;
+}
+
 function InputTime(_a) {
     var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
-    const handleChange = (newValue) => {
-        onChange && onChange(htmlTimeToCivilTime(newValue));
-    };
+    const ref = React.useRef(null);
+    const { setTypedTime } = useTimePredict({ value, handleChange });
     if (supportsTime) {
         const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
-        return React__default["default"].createElement(FormField.FormField, Object.assign({ type: "time" }, fieldProps));
+        return (React__default["default"].createElement(FormField.FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
+                var _a;
+                (_a = fieldProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(fieldProps, e);
+                !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
+            } })));
     }
     else {
         return (React__default["default"].createElement(InputTimeSafari, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChange }, params)));
     }
+    function handleChange(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(htmlTimeToCivilTime(newValue));
+    }
+    function handleBlur() {
+        var _a;
+        (_a = params.onBlur) === null || _a === void 0 ? void 0 : _a.call(params);
+        // Time inputs doesn't clear the typed value when it's invalid. This should
+        // force it to reset the input value when the typed value is invalid.
+        if (ref.current) {
+            if (!ref.current.checkValidity()) {
+                ref.current.value = "";
+            }
+        }
+    }
 }
 
 exports.InputTime = InputTime;

package/dist/Menu/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-da5d8217.js');
+var Menu = require('../Menu-81b12936.js');
 require('react');
 require('uuid');
 require('classnames');

package/dist/{Menu-da5d8217.js → Menu-81b12936.js}

@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = ".dT6M9tp1sZc- * {\n  box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n  --menu-space: var(--space-small);\n  --menu-offset: var(--space-smallest);\n  display: inline-block;\n  position: relative;\n}\n\n.Qmxlsj0D3qM- {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: 72vh;\n  padding: var(--menu-space);\n  padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n@media (min-width: 490px) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n    box-shadow: var(--shadow-base);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n    box-shadow: var(--shadow-base);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n.LaKFjYCLHZc- {\n  padding: var(--menu-space) 0;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.LaKFjYCLHZc-:first-of-type {\n  padding-top: 0;\n}\n\n.LaKFjYCLHZc-:last-of-type {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n._7HB7dWnqCi0- {\n  padding: var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(var(--menu-space) * 1.5) var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- h6 {\n  /* can move into the Typography component post re-theme */\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 400;\n  text-transform: none;\n}\n\n.ZuceCiefKqw- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  width: 100%;\n  padding: var(--menu-space);\n  border: none;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: transparent;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .ZuceCiefKqw- {\n  gap: var(--menu-space);\n}\n\n.ZuceCiefKqw-:hover,\n.ZuceCiefKqw-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.jobber-retheme .ZuceCiefKqw- span {\n  /* can move into the Typography component post re-theme */\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  font-weight: 600;\n}\n\n.jobber-retheme .Bz8TONF8kws- path {\n  /* can move into the Icon component post re-theme */\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.eKnUAucwwWU- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n@media (min-width: 490px) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n.oaxefr58z-E- {\n  width: 100%;\n}\n\n.vz9opIdwHFg- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n";
+var css_248z = ".dT6M9tp1sZc- * {\n  box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n  --menu-space: var(--space-small);\n  --menu-offset: var(--space-smallest);\n  display: inline-block;\n  position: relative;\n}\n\n.Qmxlsj0D3qM- {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: 72vh;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: var(--menu-space);\n  padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n@media (min-width: 490px) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n.LaKFjYCLHZc- {\n  padding: var(--menu-space) 0;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.LaKFjYCLHZc-:first-of-type {\n  padding-top: 0;\n}\n\n.LaKFjYCLHZc-:last-of-type {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n._7HB7dWnqCi0- {\n  padding: var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(var(--menu-space) * 1.5) var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- h6 {\n  /* can move into the Typography component post re-theme */\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 400;\n  text-transform: none;\n}\n\n.ZuceCiefKqw- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  width: 100%;\n  padding: var(--menu-space);\n  border: none;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: transparent;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .ZuceCiefKqw- {\n  gap: var(--menu-space);\n}\n\n.ZuceCiefKqw-:hover,\n.ZuceCiefKqw-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.jobber-retheme .ZuceCiefKqw- span {\n  /* can move into the Typography component post re-theme */\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  font-weight: 600;\n}\n\n.jobber-retheme .Bz8TONF8kws- path {\n  /* can move into the Icon component post re-theme */\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.eKnUAucwwWU- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n@media (min-width: 490px) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n.oaxefr58z-E- {\n  width: 100%;\n}\n\n.vz9opIdwHFg- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n";
 var styles = {"wrapper":"dT6M9tp1sZc-","menu":"Qmxlsj0D3qM-","above":"QTisUfiHwL4-","below":"qsch1dlpOHc-","left":"_0xR9-oxWMOU-","right":"gaZwsdyoG0k-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","icon":"Bz8TONF8kws-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
 styleInject_es.styleInject(css_248z);
 

package/dist/{Option-e5274cd8.js → Option-b715f6b4.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-a332b2a6.js');
+var FormField = require('./FormField-b0e74d32.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-259af966.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Markdown = require('../Markdown-b80706ed.js');
 var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-da5d8217.js');
+var Menu = require('../Menu-81b12936.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');

package/dist/RecurringSelect/index.js

@@ -9,11 +9,11 @@ var RadioGroup = require('../RadioGroup-ca7a5978.js');
 var Text = require('../Text-259af966.js');
 require('classnames');
 require('../Typography-c45bf216.js');
-var Option = require('../Option-e5274cd8.js');
-var InputNumber = require('../InputNumber-3f5d3f8d.js');
+var Option = require('../Option-b715f6b4.js');
+var InputNumber = require('../InputNumber-79da1cdc.js');
 var InputGroup = require('../InputGroup-8d4fd4eb.js');
 var Content = require('../Content-2ca1ffe1.js');
-require('../FormField-a332b2a6.js');
+require('../FormField-b0e74d32.js');
 require('../tslib.es6-5b8768b7.js');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');

package/dist/Select/index.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-e5274cd8.js');
+var Option = require('../Option-b715f6b4.js');
 require('react');
-require('../FormField-a332b2a6.js');
+require('../FormField-b0e74d32.js');
 require('../tslib.es6-5b8768b7.js');
 require('uuid');
 require('react-hook-form');