@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

package/dist/InputText-CGTG1LNb.js

@@ -0,0 +1,104 @@
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-tr9DHxlf.js';
+import { F as FormField } from './FormField-BTV2b0gy.js';
+
+function InputTextInternal(props, ref) {
+    const inputRef = useRef(null);
+    const actionsRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const rowRange = getRowRange();
+    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_1(() => {
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            wrapperRef.current instanceof HTMLDivElement) {
+            resize(inputRef.current, wrapperRef.current);
+        }
+    }, [inputRef.current, wrapperRef.current]);
+    return (React.createElement(FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
+    function handleChange(newValue) {
+        props.onChange && props.onChange(newValue);
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
+            resize(inputRef.current, wrapperRef.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, wrapper) {
+        if (rowRange.min === rowRange.max)
+            return;
+        textArea.style.flexBasis = "auto";
+        wrapper.style.height = "auto";
+        textArea.style.flexBasis = 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 = 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();
+}
+
+export { InputText as I };

package/dist/{InputText-f7c45ee5.js → InputText-CqaMlAXF.js}

@@ -1,15 +1,13 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-dfc061ca.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var useSafeLayoutEffect = require('./useSafeLayoutEffect-DHIY4lnV.js');
+var FormField = require('./FormField-CEojfV6Q.js');
 
 function InputTextInternal(props, ref) {
     const inputRef = React.useRef(null);
     const actionsRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
     const rowRange = getRowRange();
     React.useImperativeHandle(ref, () => ({
         insert: (text) => {
@@ -34,16 +32,22 @@ function InputTextInternal(props, ref) {
             }
         },
     }));
-    React.useLayoutEffect(() => {
-        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
-            resize(inputRef.current);
+    useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            wrapperRef.current instanceof HTMLDivElement) {
+            resize(inputRef.current, wrapperRef.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 })));
+    }, [inputRef.current, wrapperRef.current]);
+    return (React.createElement(FormField.FormField, Object.assign({}, props, { type: props.multiline ? "textarea" : "text", inputRef: inputRef, actionsRef: actionsRef, wrapperRef: wrapperRef, onChange: handleChange, rows: rowRange.min })));
     function handleChange(newValue) {
         props.onChange && props.onChange(newValue);
-        if (inputRef && inputRef.current instanceof HTMLTextAreaElement) {
-            resize(inputRef.current);
+        if (inputRef &&
+            inputRef.current instanceof HTMLTextAreaElement &&
+            wrapperRef &&
+            (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) instanceof HTMLDivElement) {
+            resize(inputRef.current, wrapperRef.current);
         }
     }
     function getRowRange() {
@@ -57,11 +61,12 @@ function InputTextInternal(props, ref) {
             return { min: props.rows, max: props.rows };
         }
     }
-    function resize(textArea) {
+    function resize(textArea, wrapper) {
         if (rowRange.min === rowRange.max)
             return;
-        textArea.style.height = "auto";
-        textArea.style.height = textAreaHeight(textArea) + "px";
+        textArea.style.flexBasis = "auto";
+        wrapper.style.height = "auto";
+        textArea.style.flexBasis = textAreaHeight(textArea) + "px";
     }
     function textAreaHeight(textArea) {
         const { lineHeight, borderBottomWidth, borderTopWidth, paddingBottom, paddingTop, } = window.getComputedStyle(textArea);

package/dist/InputTime/InputTimeProps.d.ts

@@ -1,6 +1,6 @@
 import { CivilTime } from "@std-proposal/temporal";
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
-export interface InputTimeProps extends Pick<CommonFormFieldProps, "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
+export interface InputTimeProps extends Pick<CommonFormFieldProps, "align" | "description" | "disabled" | "invalid" | "inline" | "loading" | "name" | "onValidation" | "placeholder" | "size" | "clearable">, Pick<FormFieldProps, "maxLength" | "readonly" | "autocomplete" | "max" | "min" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations"> {
     /**
      * Intial value of the input. Only use this when you need to prepopulate the
      * field with a data that is not controlled by the components state. If a

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.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var InputTime = require('../InputTime-DXgod1n-.js');
+require('../tslib.es6-6AwvlbWV.js');
+require('react');
+require('@std-proposal/temporal');
+require('../debounce-pg3VOrFc.js');
+require('../_commonjsHelpers-BZy5LDD5.js');
+require('../isObjectLike-D1IeOnmx.js');
+require('../isSymbol-Bbb_qQGw.js');
+require('../FormField-CEojfV6Q.js');
+require('react-hook-form');
+require('classnames');
+require('framer-motion');
+require('@jobber/design');
+require('../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../Icon-fa-Ii8qc.js');
+require('../Typography-Dcec2MjG.js');
+require('../Text-CuGgzpie.js');
+require('../useFormFieldFocus-vUhlDUFH.js');
+require('../InputValidation-BjitowrV.js');
+require('../Spinner-b5Q8KXRQ.js');
+
+
+
+exports.InputTime = InputTime.InputTime;

package/dist/InputTime/index.mjs

@@ -0,0 +1,21 @@
+export { I as InputTime } from '../InputTime-lMdLTFxs.js';
+import '../tslib.es6-Bu_PBg9i.js';
+import 'react';
+import '@std-proposal/temporal';
+import '../debounce-BBtff9-S.js';
+import '../_commonjsHelpers-Dy2IPW0w.js';
+import '../isObjectLike-CcKIYba1.js';
+import '../isSymbol-BmwHOL7f.js';
+import '../FormField-BTV2b0gy.js';
+import 'react-hook-form';
+import 'classnames';
+import 'framer-motion';
+import '@jobber/design';
+import '../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../Icon-GaU33tZU.js';
+import '../Typography-BD0mo9T9.js';
+import '../Text-C3-8gHkD.js';
+import '../useFormFieldFocus-CjqwY0nh.js';
+import '../InputValidation-CM_L0IJg.js';
+import '../Spinner-Bg1QOlTK.js';

package/dist/InputTime-DXgod1n-.js

@@ -0,0 +1,192 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-6AwvlbWV.js');
+var React = require('react');
+var temporal = require('@std-proposal/temporal');
+var debounce = require('./debounce-pg3VOrFc.js');
+var FormField = require('./FormField-CEojfV6Q.js');
+
+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, set12HourFormat] = React.useState(false);
+    const [typedTime, setTypedTime] = React.useState("");
+    const predictTime = React.useCallback(debounce.debounce(() => {
+        if (value)
+            return;
+        handleChange(predictHours(typedTime, IS_12_HOUR_FORMAT));
+    }, DEBOUNCE_TIME), [typedTime, value, handleChange, IS_12_HOUR_FORMAT]);
+    React.useEffect(() => {
+        set12HourFormat(Boolean(Intl.DateTimeFormat(navigator.language, {
+            hour: "numeric",
+        }).resolvedOptions().hour12));
+    }, []);
+    /**
+     * 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.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/InputTime-lMdLTFxs.js

@@ -0,0 +1,190 @@
+import { _ as __rest } from './tslib.es6-Bu_PBg9i.js';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { CivilTime } from '@std-proposal/temporal';
+import { d as debounce } from './debounce-BBtff9-S.js';
+import { F as FormField } from './FormField-BTV2b0gy.js';
+
+function civilTimeToHTMLTime(civilTime) {
+    if (civilTime == undefined) {
+        return "";
+    }
+    const timeString = civilTime.toString();
+    return timeString.slice(0, 5);
+}
+function htmlTimeToCivilTime(timeString) {
+    try {
+        return CivilTime.fromString(timeString + ":00.000000000");
+    }
+    catch (_a) {
+        return undefined;
+    }
+}
+
+const DEBOUNCE_TIME = 300;
+function useTimePredict({ value, handleChange }) {
+    const [IS_12_HOUR_FORMAT, set12HourFormat] = useState(false);
+    const [typedTime, setTypedTime] = useState("");
+    const predictTime = useCallback(debounce(() => {
+        if (value)
+            return;
+        handleChange(predictHours(typedTime, IS_12_HOUR_FORMAT));
+    }, DEBOUNCE_TIME), [typedTime, value, handleChange, IS_12_HOUR_FORMAT]);
+    useEffect(() => {
+        set12HourFormat(Boolean(Intl.DateTimeFormat(navigator.language, {
+            hour: "numeric",
+        }).resolvedOptions().hour12));
+    }, []);
+    /**
+     * Predict the hour when user types a number
+     */
+    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
+     */
+    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 = __rest(_a, ["defaultValue", "value", "onChange"]);
+    const ref = 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.createElement(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 = "";
+            }
+        }
+    }
+}
+
+export { InputTime as I };

package/dist/InputValidation/InputValidation.d.ts

@@ -3,7 +3,7 @@ interface InputValidationProps {
     /**
      * Validation message to be displayed
      */
-    message: string;
+    readonly message: string;
 }
 export declare function InputValidation({ message }: InputValidationProps): JSX.Element;
 export {};

package/dist/InputValidation/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var InputValidation = require('../InputValidation-BjitowrV.js');
+require('react');
+require('framer-motion');
+require('../Text-CuGgzpie.js');
+require('../Typography-Dcec2MjG.js');
+require('classnames');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+
+
+
+exports.InputValidation = InputValidation.InputValidation;

package/dist/InputValidation/index.mjs

@@ -0,0 +1,8 @@
+export { I as InputValidation } from '../InputValidation-CM_L0IJg.js';
+import 'react';
+import 'framer-motion';
+import '../Text-C3-8gHkD.js';
+import '../Typography-BD0mo9T9.js';
+import 'classnames';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';

package/dist/InputValidation-BjitowrV.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var Text = require('./Text-CuGgzpie.js');
+var Icon = require('./Icon-fa-Ii8qc.js');
+
+var styles = {"hasValidationMessage":"sc-bFJieXBA-","message":"xybhC5Y6mk4-"};
+
+function InputValidation({ message }) {
+    const messages = [message];
+    const variants = {
+        slideOut: { y: "5%", opacity: 0 },
+        slideIn: { y: 0, opacity: 1 },
+    };
+    return (React.createElement(React.Fragment, null, messages && messages.length > 0 && (React.createElement(framerMotion.AnimatePresence, { mode: "wait" }, messages.map(msg => (React.createElement(framerMotion.motion.div, { key: `validation-${msg}`, variants: variants, initial: "slideOut", animate: "slideIn", exit: "slideOut", transition: { duration: 0.2 } },
+        React.createElement("div", { className: styles.message, "aria-live": "assertive", role: "alert", tabIndex: 0 },
+            React.createElement(Icon.Icon, { name: "alert", size: "small", color: "critical" }),
+            React.createElement(Text.Text, { size: "small", variation: "error" }, msg)))))))));
+}
+
+exports.InputValidation = InputValidation;