@jobber/components 4.85.4-CJS-to-ESM.1 → 4.85.4

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-8d4fd4eb.js

@@ -0,0 +1,33 @@
+'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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = "._4bvHwa3-qBA- > *:not(:last-child) {\n  margin-bottom: -1px !important;\n}\n\n.bHm4WuX8ToY- {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.bHm4WuX8ToY- > *:not(:last-child) {\n  margin-bottom: auto;\n  margin-right: -1px;\n}\n\n/* Border corners are rounded on the outside edges of the group  */\n\n.nmDPgrXofeE- {\n  --public-field--top-left-radius: 0;\n  --public-field--top-right-radius: 0;\n  --public-field--bottom-left-radius: 0;\n  --public-field--bottom-right-radius: 0;\n}\n\n._4bvHwa3-qBA- > :first-child:not(.bHm4WuX8ToY-) {\n  --public-field--top-left-radius: var(--radius-base);\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n._4bvHwa3-qBA- > :last-child:not(.bHm4WuX8ToY-) {\n  --public-field--bottom-left-radius: var(--radius-base);\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n\n/* First Horizontal Input Group */\n\n.bHm4WuX8ToY-:first-child > :first-child {\n  --public-field--top-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:first-child > :last-child {\n  --public-field--top-right-radius: var(--radius-base);\n}\n\n/* Last Horizontal Input Group */\n\n.bHm4WuX8ToY-:last-child > :first-child {\n  --public-field--bottom-left-radius: var(--radius-base);\n}\n\n.bHm4WuX8ToY-:last-child > :last-child {\n  --public-field--bottom-right-radius: var(--radius-base);\n}\n";
+var styles = {"vertical":"_4bvHwa3-qBA-","horizontal":"bHm4WuX8ToY-","inputGroup":"nmDPgrXofeE-"};
+styleInject_es.styleInject(css_248z);
+
+function InputGroup({ children, flowDirection = "vertical", }) {
+    if (isInvalidGroupNesting(children))
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    const className = classnames__default["default"](styles.inputGroup, styles[flowDirection]);
+    return React__default["default"].createElement("div", { className: className }, children);
+}
+function isInvalidGroupNesting(childs) {
+    return React__default["default"].Children.toArray(childs).some(child => {
+        if (child.type === InputGroup &&
+            child.props.flowDirection != "horizontal") {
+            console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
+            return true;
+        }
+        return false;
+    });
+}
+
+exports.InputGroup = InputGroup;

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;

package/dist/InputNumber-d451b52e.js

@@ -0,0 +1,62 @@
+'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);
+
+function InputNumberInternal(props, ref) {
+    var _a;
+    const inputRef = React.createRef();
+    React.useImperativeHandle(ref, () => ({
+        blur: () => {
+            const input = inputRef.current;
+            if (input) {
+                input.blur();
+            }
+        },
+        focus: () => {
+            const input = inputRef.current;
+            if (input) {
+                input.focus();
+            }
+        },
+    }));
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
+    function customValidators(validators) {
+        if (validators == null) {
+            return getOverLimitMessage;
+        }
+        else if (typeof validators === "function") {
+            return {
+                customValidation: validators,
+                getOverLimitMessage,
+            };
+        }
+        return Object.assign(Object.assign({}, validators), { getOverLimitMessage });
+    }
+    function handleChange(newValue) {
+        props.onChange && props.onChange(newValue);
+    }
+    function getOverLimitMessage(value) {
+        const isOverMax = props.max != undefined && value && value > props.max;
+        const isUnderMin = props.min != undefined && value && value < props.min;
+        if (isOverMax || isUnderMin || (value && value.toString() === "")) {
+            if (props.min != undefined && props.max === undefined) {
+                return `Enter a number that is greater than or equal to ${props.min}`;
+            }
+            else if (props.max != undefined && props.min === undefined) {
+                return `Enter a number that is less than or equal to ${props.max}`;
+            }
+            else if (props.min != undefined && props.max != undefined) {
+                return `Enter a number between ${props.min} and ${props.max}`;
+            }
+        }
+        return true;
+    }
+}
+const InputNumber = React.forwardRef(InputNumberInternal);
+
+exports.InputNumber = InputNumber;

package/dist/InputPassword/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var FormField = 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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function InputPassword(props) {
+    const { hasVisibility = false } = props;
+    const [visible, setVisibility] = React.useState(false);
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, (hasVisibility && {
+        suffix: {
+            ariaLabel: visible ? "Hide password" : "Show password",
+            icon: visible ? "eye" : "eyeCrossed",
+            onClick: () => setVisibility(!visible),
+        },
+    }), { type: visible ? "text" : "password", onChange: handleChange })));
+    function handleChange(newValue) {
+        props.onChange && props.onChange(newValue);
+    }
+}
+
+exports.InputPassword = InputPassword;

package/dist/InputPhoneNumber/index.js

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-754e2961.js');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var FormField = require('../FormField-6ff183f8.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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".L7WK-i5uaOk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  height: var(--field--height);\n  padding-top: var(--field--padding-top);\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--field--padding-right);\n  color: rgb(181, 181, 181);\n  color: var(--color-grey);\n  font-family: inherit;\n  font-size: inherit;\n  line-height: var(--field--value-lineHeight);\n  pointer-events: none;\n}\n\n.q1wXBupm5Xc- {\n  visibility: hidden;\n  opacity: 0;\n}\n";
+var styles = {"mask":"L7WK-i5uaOk-","hiddenValue":"q1wXBupm5Xc-"};
+styleInject_es.styleInject(css_248z);
+
+function InputMask({ children, delimiter = "*", pattern, strict = true, }) {
+    const { value: inputValue, onChange } = children.props;
+    const [isMasking, setIsMasking] = React.useState(!inputValue);
+    const stringifiedValue = String(inputValue || "");
+    const placeholderValue = pattern
+        .replace(new RegExp(`\\${delimiter}`, "g"), "_")
+        .slice(stringifiedValue.length);
+    const inputMask = (React__default["default"].createElement("div", { className: styles.mask, "aria-hidden": "true" },
+        React__default["default"].createElement("span", { className: styles.hiddenValue }, stringifiedValue),
+        placeholderValue));
+    return React.cloneElement(children, {
+        onChange: handleChange,
+        children: isMasking && inputMask,
+    });
+    function handleChange(value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(formatValue(value));
+    }
+    function formatValue(value) {
+        const { cleanValueChars, patternChars, specialChars, isOverCharLimit } = getMaskingInfo(value);
+        if (!strict && isOverCharLimit) {
+            setIsMasking(false);
+            return cleanValueChars.join("");
+        }
+        else {
+            setIsMasking(true);
+            return patternChars.reduce(getMaskedValue(cleanValueChars, specialChars), "");
+        }
+    }
+    function getMaskingInfo(value) {
+        const patternChars = pattern.split("");
+        const specialChars = patternChars.filter(char => char !== delimiter);
+        const cleanValueChars = value
+            .split("")
+            .filter(char => !specialChars.includes(char))
+            // Since this is only used in InputPhoneNumber, we can restrict it to
+            // just numbers for now.
+            .map(Number)
+            .filter(num => !isNaN(num));
+        const isOverCharLimit = cleanValueChars.length > patternChars.length - specialChars.length;
+        return { cleanValueChars, patternChars, specialChars, isOverCharLimit };
+    }
+}
+function getMaskedValue(cleanVal, specialChars) {
+    return (result, nextCharacter) => {
+        if (!cleanVal.length)
+            return result;
+        if (specialChars.includes(nextCharacter))
+            return result + nextCharacter;
+        const nextValue = cleanVal.shift();
+        return result + nextValue;
+    };
+}
+
+function InputPhoneNumber(_a) {
+    var { required } = _a, props = tslib_es6.__rest(_a, ["required"]);
+    const { placeholder, validations, pattern = "(***) ***-****" } = props;
+    const errorSubject = placeholder || "Phone number";
+    const { getValues } = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            reactHookForm.useForm({ mode: "onTouched" });
+    return (React__default["default"].createElement(InputMask, { pattern: pattern, strict: false },
+        React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
+                    value: Boolean(required),
+                    message: `${errorSubject} is required`,
+                } }, validations), { validate: getPhoneNumberValidation }) }))));
+    function getPhoneNumberValidation(value) {
+        // Get unique characters that aren't * in the pattern
+        const patternNonDelimterCharacters = pattern
+            .split("")
+            .filter(char => char !== "*")
+            .filter((char, index, arr) => arr.indexOf(char) === index);
+        const specialCharacters = patternNonDelimterCharacters.join(" ");
+        // Remove special characters from pattern
+        const cleanValue = value.replace(new RegExp(`[${specialCharacters}]`, "g"), "");
+        const cleanValueRequiredLength = (pattern.match(/\*/g) || []).length;
+        if (cleanValue.length > 0 && cleanValue.length < cleanValueRequiredLength) {
+            return `${errorSubject} must contain ${cleanValueRequiredLength} or more digits`;
+        }
+        if (typeof (validations === null || validations === void 0 ? void 0 : validations.validate) === "function") {
+            return validations.validate(value, getValues);
+        }
+        return true;
+    }
+}
+
+exports.InputPhoneNumber = InputPhoneNumber;

package/dist/InputText/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputText = require('../InputText-55b6cb65.js');
+require('react');
+require('@jobber/hooks/useSafeLayoutEffect');
+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.InputText = InputText.InputText;

package/dist/InputText-55b6cb65.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var React = require('react');
+var useSafeLayoutEffect = require('@jobber/hooks/useSafeLayoutEffect');
+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);
+
+function InputTextInternal(props, ref) {
+    const inputRef = React.useRef(null);
+    const actionsRef = React.useRef(null);
+    const rowRange = getRowRange();
+    React.useImperativeHandle(ref, () => ({
+        insert: (text) => {
+            insertText(text);
+        },
+        blur: () => {
+            const input = inputRef.current;
+            if (input) {
+                input.blur();
+            }
+        },
+        focus: () => {
+            const input = inputRef.current;
+            if (input) {
+                input.focus();
+            }
+        },
+        scrollIntoView: arg => {
+            const input = inputRef.current;
+            if (input) {
+                input.scrollIntoView(arg);
+            }
+        },
+    }));
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
+        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+            resize(inputRef.current);
+        }
+    }, [inputRef.current]);
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, onChange: handleChange, rows: rowRange.min })));
+    function handleChange(newValue) {
+        props.onChange && props.onChange(newValue);
+        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
+            resize(inputRef.current);
+        }
+    }
+    function getRowRange() {
+        if (props.rows === undefined) {
+            return { min: 3, max: 3 };
+        }
+        else if (typeof props.rows === "object") {
+            return { min: props.rows.min, max: props.rows.max };
+        }
+        else {
+            return { min: props.rows, max: props.rows };
+        }
+    }
+    function resize(textArea) {
+        if (rowRange.min === rowRange.max)
+            return;
+        textArea.style.height = "auto";
+        textArea.style.height = textAreaHeight(textArea) + "px";
+    }
+    function textAreaHeight(textArea) {
+        const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);
+        const maxHeight = rowRange.max * parseFloat(lineHeight) +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth) +
+            parseFloat(paddingTop) +
+            parseFloat(paddingBottom);
+        const scrollHeight = textArea.scrollHeight +
+            parseFloat(borderTopWidth) +
+            parseFloat(borderBottomWidth);
+        return Math.min(scrollHeight, maxHeight);
+    }
+    function insertText(text) {
+        var _a;
+        const input = inputRef.current;
+        if (input) {
+            insertAtCursor(input, text);
+            const newValue = input.value;
+            (_a = actionsRef.current) === null || _a === void 0 ? void 0 : _a.setValue(newValue);
+            props.onChange && props.onChange(newValue);
+        }
+    }
+}
+const InputText = React.forwardRef(InputTextInternal);
+function insertAtCursor(input, newText) {
+    const start = input.selectionStart || 0;
+    const end = input.selectionEnd || 0;
+    const text = input.value;
+    const before = text.substring(0, start);
+    const after = text.substring(end, text.length);
+    input.value = before + newText + after;
+    input.selectionStart = input.selectionEnd = start + newText.length;
+    input.focus();
+}
+
+exports.InputText = InputText;

package/dist/InputTime/index.js

@@ -0,0 +1,209 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../tslib.es6-754e2961.js');
+var React = require('react');
+var temporal = require('@std-proposal/temporal');
+var debounce = require('lodash/debounce');
+var FormField = require('../FormField-6ff183f8.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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+function civilTimeToHTMLTime(civilTime) {
+    if (civilTime == undefined) {
+        return "";
+    }
+    const timeString = civilTime.toString();
+    return timeString.slice(0, 5);
+}
+function htmlTimeToCivilTime(timeString) {
+    try {
+        return temporal.CivilTime.fromString(timeString + ":00.000000000");
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+
+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 ref = React.useRef(null);
+    const { setTypedTime } = useTimePredict({ value, handleChange });
+    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({ 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);
+        } })));
+    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/InputValidation/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputValidation = require('../InputValidation-05e839fa.js');
+require('react');
+require('framer-motion');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Text-259af966.js');
+require('../Typography-c45bf216.js');
+require('classnames');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+
+
+
+exports.InputValidation = InputValidation.InputValidation;