@jobber/components 4.72.0 → 4.74.0

package/dist/Autocomplete/index.js

@@ -13,11 +13,11 @@ var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Text = require('../Text-259af966.js');
 var Icon = require('../Icon-405a216c.js');
 var Heading = require('../Heading-1e8e4bd3.js');
-var InputText = require('../InputText-e2d4ac19.js');
+var InputText = require('../InputText-9e61365c.js');
 require('../Typography-c45bf216.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../FormField-a332b2a6.js');
+require('../FormField-b0e74d32.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');

package/dist/ConfirmationModal/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ConfirmationModal = require('../ConfirmationModal-189e107a.js');
+var ConfirmationModal = require('../ConfirmationModal-f1a049fb.js');
 require('react');
 require('@jobber/hooks/useOnKeyDown');
 require('../Modal-a0627c92.js');
@@ -20,8 +20,8 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../ButtonDismiss-350af163.js');
-require('../Content-2ca1ffe1.js');
-require('../Markdown-b80706ed.js');
+require('../Content-e3f7b6fc.js');
+require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');

package/dist/{ConfirmationModal-189e107a.js → ConfirmationModal-f1a049fb.js}

@@ -3,8 +3,8 @@
 var React = require('react');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Modal = require('./Modal-a0627c92.js');
-var Content = require('./Content-2ca1ffe1.js');
-var Markdown = require('./Markdown-b80706ed.js');
+var Content = require('./Content-e3f7b6fc.js');
+var Markdown = require('./Markdown-f7c55304.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Content/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Content = require('../Content-2ca1ffe1.js');
+var Content = require('../Content-e3f7b6fc.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/Content-e3f7b6fc.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z$1 = "._340SlNuzSDQ- > :not(:last-child) {\n  margin-bottom: calc(16px / 16);\n  margin-bottom: var(--space-minuscule);\n}\n\n.H1BK-YSBQBQ- > :not(:last-child) {\n  margin-bottom: calc(16px / 8);\n  margin-bottom: var(--space-smallest);\n}\n\n.xUe31mY0kro- > :not(:last-child) {\n  margin-bottom: calc(16px / 4);\n  margin-bottom: var(--space-smaller);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n.SRYe3DkjH1c- > :not(:last-child) {\n  margin-bottom: calc(16px * 1);\n  margin-bottom: var(--space-base);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n  margin-bottom: calc(16px * 1.5);\n  margin-bottom: var(--space-large);\n}\n\n.jvPl3aAN9PA- > :not(:last-child) {\n  margin-bottom: calc(16px * 2);\n  margin-bottom: var(--space-larger);\n}\n\n.fFTgb4ra1X0- > :not(:last-child) {\n  margin-bottom: calc(16px * 3);\n  margin-bottom: var(--space-largest);\n}\n\n.kKnfL37LO6A- > :not(:last-child) {\n  margin-bottom: calc(16px * 4);\n  margin-bottom: var(--space-extravagant);\n}\n";
+var spacings = {"minuscule":"_340SlNuzSDQ-","smallest":"H1BK-YSBQBQ-","smaller":"xUe31mY0kro-","small":"rDJFaGPzCbE-","base":"SRYe3DkjH1c-","large":"_7TZ4MI3kr4Y-","larger":"jvPl3aAN9PA-","largest":"fFTgb4ra1X0-","extravagant":"kKnfL37LO6A-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = "._4On2F-4nWuY- {\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
+var styles = {"padded":"_4On2F-4nWuY-"};
+styleInject_es.styleInject(css_248z);
+
+function Content({ children, spacing = "base", type = "div", }) {
+    const className = classnames__default["default"](styles.padded, spacings[spacing]);
+    return React.createElement(type, { className }, children);
+}
+
+exports.Content = Content;

package/dist/DataDump/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var Card = require('../Card-426a68a8.js');
-var Content = require('../Content-2ca1ffe1.js');
+var Content = require('../Content-e3f7b6fc.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/DataList/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 Text = require('../Text-259af966.js');
-var Glimmer = require('../Glimmer-cfa92a88.js');
+var Glimmer = require('../Glimmer-f40d5ea5.js');
 var noop = require('lodash/noop');
 var design = require('@jobber/design');
 var framerMotion = require('framer-motion');
@@ -29,10 +29,10 @@ var Combobox = require('../Combobox-95b3c413.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var Icon = require('../Icon-405a216c.js');
 var debounce = require('lodash/debounce');
-var InputText = require('../InputText-e2d4ac19.js');
+var InputText = require('../InputText-9e61365c.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Typography = require('../Typography-c45bf216.js');
-require('../Content-2ca1ffe1.js');
+require('../Content-e3f7b6fc.js');
 require('react-popper');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('uuid');
@@ -40,7 +40,7 @@ require('react-hook-form');
 require('@jobber/hooks/useAssert');
 require('../Avatar-76a799fa.js');
 require('color');
-require('../FormField-a332b2a6.js');
+require('../FormField-b0e74d32.js');
 require('@jobber/hooks/useShowClear');
 require('../InputValidation-a7a737f9.js');
 

package/dist/DataTable/index.js

@@ -7,13 +7,13 @@ var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Glimmer = require('../Glimmer-cfa92a88.js');
+var Glimmer = require('../Glimmer-f40d5ea5.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-e5274cd8.js');
+var Option = require('../Option-b715f6b4.js');
 var Button = require('../Button-b73a5e01.js');
 var Text = require('../Text-259af966.js');
-require('../Content-2ca1ffe1.js');
-require('../FormField-a332b2a6.js');
+require('../Content-e3f7b6fc.js');
+require('../FormField-b0e74d32.js');
 require('uuid');
 require('react-hook-form');
 require('@jobber/hooks/useShowClear');

package/dist/FeatureSwitch/index.js

@@ -8,11 +8,11 @@ var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-1e8e4bd3.js');
 var Text = require('../Text-259af966.js');
-var Content = require('../Content-2ca1ffe1.js');
+var Content = require('../Content-e3f7b6fc.js');
 var Switch = require('../Switch-7d4aa7c3.js');
 var Button = require('../Button-b73a5e01.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
-var Markdown = require('../Markdown-b80706ed.js');
+var Markdown = require('../Markdown-f7c55304.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('react-router-dom');

package/dist/FormField/FormFieldTypes.d.ts

@@ -147,6 +147,7 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * Blur callback.
      */
     onBlur?(): void;
+    onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
     /**
      * Exclusively for textareas. Specifies the visible height of a textarea.
      */

package/dist/FormField/index.js

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

package/dist/{FormField-a332b2a6.js → FormField-b0e74d32.js}

@@ -146,7 +146,7 @@ function FormFieldPostFix({ variation }) {
 /*eslint max-statements: ["error", 13]*/
 function FormField(props) {
     var _a, _b;
-    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, clearable = "never", } = props;
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", } = props;
     const { control, formState: { errors }, setValue, watch, } = reactHookForm.useFormContext() != undefined
         ? reactHookForm.useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
@@ -188,7 +188,7 @@ function FormField(props) {
                         return (React__default["default"].createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
                     default:
                         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                            React__default["default"].createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef })),
+                            React__default["default"].createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef, onKeyUp: onKeyUp })),
                             loading && React__default["default"].createElement(FormFieldPostFix, { variation: "spinner" }),
                             children));
                 }

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-cc949eaf.js');
+var FormatFile = require('../FormatFile-9f8e4996.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -12,7 +12,7 @@ require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Typography-c45bf216.js');
-require('../ConfirmationModal-189e107a.js');
+require('../ConfirmationModal-f1a049fb.js');
 require('@jobber/hooks/useOnKeyDown');
 require('../Modal-a0627c92.js');
 require('react-dom');
@@ -22,12 +22,12 @@ require('@jobber/hooks/useFocusTrap');
 require('../Heading-1e8e4bd3.js');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('../ButtonDismiss-350af163.js');
-require('../Content-2ca1ffe1.js');
-require('../Markdown-b80706ed.js');
+require('../Content-e3f7b6fc.js');
+require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');
-require('../Glimmer-cfa92a88.js');
+require('../Glimmer-f40d5ea5.js');
 require('../tslib.es6-5b8768b7.js');
 require('../ProgressBar-b68edc8f.js');
 

package/dist/{FormatFile-cc949eaf.js → FormatFile-9f8e4996.js}

@@ -5,8 +5,8 @@ var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Button = require('./Button-b73a5e01.js');
-var ConfirmationModal = require('./ConfirmationModal-189e107a.js');
-var Glimmer = require('./Glimmer-cfa92a88.js');
+var ConfirmationModal = require('./ConfirmationModal-f1a049fb.js');
+var Glimmer = require('./Glimmer-f40d5ea5.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-c45bf216.js');
 var Text = require('./Text-259af966.js');

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-cc949eaf.js');
+var FormatFile = require('../FormatFile-9f8e4996.js');
 var Button = require('../Button-b73a5e01.js');
 require('framer-motion');
 require('react-dom');
@@ -16,17 +16,17 @@ require('@jobber/hooks/useOnKeyDown');
 require('@jobber/hooks/useFocusTrap');
 require('../ButtonDismiss-350af163.js');
 require('filesize');
-require('../ConfirmationModal-189e107a.js');
+require('../ConfirmationModal-f1a049fb.js');
 require('../Modal-a0627c92.js');
 require('../Heading-1e8e4bd3.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../Content-2ca1ffe1.js');
-require('../Markdown-b80706ed.js');
+require('../Content-e3f7b6fc.js');
+require('../Markdown-f7c55304.js');
 require('react-markdown');
 require('../Text-259af966.js');
 require('../Emphasis-bda56d3b.js');
-require('../Glimmer-cfa92a88.js');
+require('../Glimmer-f40d5ea5.js');
 require('../tslib.es6-5b8768b7.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');

package/dist/Glimmer/index.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Glimmer = require('../Glimmer-cfa92a88.js');
+var Glimmer = require('../Glimmer-f40d5ea5.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Content-2ca1ffe1.js');
+require('../Content-e3f7b6fc.js');
 
 
 

package/dist/{Glimmer-cfa92a88.js → Glimmer-f40d5ea5.js}

@@ -4,7 +4,7 @@ var tslib_es6 = require('./tslib.es6-5b8768b7.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Content = require('./Content-2ca1ffe1.js');
+var Content = require('./Content-e3f7b6fc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-8767b7fd.js');
+var InputFile = require('../InputFile-d080dec5.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -20,7 +20,7 @@ require('../InputValidation-a7a737f9.js');
 require('framer-motion');
 require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
-require('../Content-2ca1ffe1.js');
+require('../Content-e3f7b6fc.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/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-8767b7fd.js');
+var InputFile = require('../InputFile-d080dec5.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -18,7 +18,7 @@ require('../Icon-405a216c.js');
 require('@jobber/design');
 require('../Button-b73a5e01.js');
 require('react-router-dom');
-require('../Content-2ca1ffe1.js');
+require('../Content-e3f7b6fc.js');
 
 
 

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

@@ -9,7 +9,7 @@ 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 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 }; }

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/List/index.js

@@ -11,12 +11,12 @@ var Icon = require('../Icon-405a216c.js');
 var Text = require('../Text-259af966.js');
 var Heading = require('../Heading-1e8e4bd3.js');
 var Typography = require('../Typography-c45bf216.js');
-var Markdown = require('../Markdown-b80706ed.js');
+var Markdown = require('../Markdown-f7c55304.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('@jobber/design');
 require('../getAtlantisConfig-0f3e8af2.js');
 require('react-markdown');
-require('../Content-2ca1ffe1.js');
+require('../Content-e3f7b6fc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Markdown/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Markdown = require('../Markdown-b80706ed.js');
+var Markdown = require('../Markdown-f7c55304.js');
 require('react');
 require('react-markdown');
 require('../Text-259af966.js');
@@ -12,7 +12,7 @@ require('../style-inject.es-9d2f5f4e.js');
 require('../Emphasis-bda56d3b.js');
 require('../Heading-1e8e4bd3.js');
 require('../getAtlantisConfig-0f3e8af2.js');
-require('../Content-2ca1ffe1.js');
+require('../Content-e3f7b6fc.js');
 
 
 

package/dist/{Markdown-b80706ed.js → Markdown-f7c55304.js}

@@ -5,7 +5,7 @@ var ReactMarkdown = require('react-markdown');
 var Text = require('./Text-259af966.js');
 var Emphasis = require('./Emphasis-bda56d3b.js');
 var Heading = require('./Heading-1e8e4bd3.js');
-var Content = require('./Content-2ca1ffe1.js');
+var Content = require('./Content-e3f7b6fc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -8,8 +8,8 @@ var jobberHooks = require('@jobber/hooks/useResizeObserver');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Heading = require('../Heading-1e8e4bd3.js');
 var Text = require('../Text-259af966.js');
-var Content = require('../Content-2ca1ffe1.js');
-var Markdown = require('../Markdown-b80706ed.js');
+var Content = require('../Content-e3f7b6fc.js');
+var Markdown = require('../Markdown-f7c55304.js');
 var Button = require('../Button-b73a5e01.js');
 var Menu = require('../Menu-81b12936.js');
 var Emphasis = require('../Emphasis-bda56d3b.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');
+var Content = require('../Content-e3f7b6fc.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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.72.0",
+  "version": "4.74.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
     "dist/*"
   ],
   "dependencies": {
-    "@jobber/design": "^0.51.1",
+    "@jobber/design": "^0.52.0",
     "@jobber/formatters": "*",
     "@jobber/hooks": "^2.8.0",
     "@popperjs/core": "^2.0.6",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "58a975b16f769405c26ebad6b5b8d8e699edbd04"
+  "gitHead": "112dd86d030e24299b20c1597be67f6466e1b065"
 }

package/dist/Content-2ca1ffe1.js

@@ -1,24 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-
-var css_248z$1 = ".SRYe3DkjH1c- > :not(:last-child) {\n  margin-bottom: calc(16px * 1);\n  margin-bottom: var(--space-base);\n}\n\n.rDJFaGPzCbE- > :not(:last-child) {\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n._7TZ4MI3kr4Y- > :not(:last-child) {\n  margin-bottom: calc(16px * 1.5);\n  margin-bottom: var(--space-large);\n}\n";
-var spacings = {"base":"SRYe3DkjH1c-","small":"rDJFaGPzCbE-","large":"_7TZ4MI3kr4Y-"};
-styleInject_es.styleInject(css_248z$1);
-
-var css_248z = "._4On2F-4nWuY- {\n  padding: 0;\n  padding: var(--public-content--padding, 0);\n}\n";
-var styles = {"padded":"_4On2F-4nWuY-"};
-styleInject_es.styleInject(css_248z);
-
-function Content({ children, spacing = "base", type = "div", }) {
-    const className = classnames__default["default"](styles.padded, spacings[spacing]);
-    return React.createElement(type, { className }, children);
-}
-
-exports.Content = Content;