@jobber/components 6.123.0 → 6.123.2

package/dist/InputNumber/index.mjs

@@ -1,11 +1,12 @@
-import React__default, { useEffect, useMemo, useCallback, useRef, useState, createContext, useContext, forwardRef, createRef, useImperativeHandle } from 'react';
+import React__default, { useEffect, useMemo, useCallback, useRef, useState, useContext, createContext, forwardRef, createRef, useImperativeHandle } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
-import { $ as $8ae05eaa5c114e9c$export$7f54fc3180508a52, a as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, b as $e9faafb641e167db$export$90fc3a17d93f704c, c as $507fabe10e71c6fb$export$b9b3dfddab17db27, d as $507fabe10e71c6fb$export$ec71b4b83ac08ec3, e as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, f as $9ab94262bd0047c7$export$420e68273165f4ec, g as $bdb11010cef70236$export$f680877a34711e37, h as $313b98861ee5dd6c$export$d6875122194c7b44, i as $bdb11010cef70236$export$b4cc09c592e8fdb8, j as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, l as $507fabe10e71c6fb$export$8397ddfc504fdb9a, m as $458b0a5536c1a7cf$export$40bfa8c7b0832715, n as $f645667febf57a63$export$4c014de7c8940b4c, o as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, p as $431fbd86ca7dc216$export$f21a1ffae260145a, q as $9446cca9a3875146$export$cb6e0bb50bc19463, r as $9446cca9a3875146$export$7d15b64cf5a3a4c4, s as $fca6afa0e843324b$export$f12b703ca79dfbb1, t as $03deb23ff14920c4$export$4eaf04e54aa8eed6, u as $c87311424ea30a05$export$186c6964ca17d99, v as $c87311424ea30a05$export$a11b0059900ceec8, w as $ff5963eb1fccf552$export$e08e3b67e392101e, x as $c87311424ea30a05$export$fedb369cb70207f1, y as $f39a9eba43920ace$export$86427a43e3e48ebb, z as $64fa3d84918910a7$export$29f1550f4b0d4415, A as $64fa3d84918910a7$export$4d86445c2cf5e3, B as $514c0188e459b4c0$export$5f1af8db9871e1d6, C as $6179b936705e76d3$export$ae780daf29e6d456, D as $64fa3d84918910a7$export$fabf2dc03a41866e, E as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, F as $64fa3d84918910a7$export$ef03459518577ad4, G as $64fa3d84918910a7$export$2881499e37b75b9a, H as $514c0188e459b4c0$export$9afb8bc826b033ea } from '../Text-es2.js';
+import { $ as $8ae05eaa5c114e9c$export$7f54fc3180508a52, a as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, b as $e9faafb641e167db$export$90fc3a17d93f704c, c as $507fabe10e71c6fb$export$b9b3dfddab17db27, d as $507fabe10e71c6fb$export$ec71b4b83ac08ec3, e as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, f as $9ab94262bd0047c7$export$420e68273165f4ec, g as $bdb11010cef70236$export$f680877a34711e37, h as $313b98861ee5dd6c$export$d6875122194c7b44, i as $bdb11010cef70236$export$b4cc09c592e8fdb8, j as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, l as $507fabe10e71c6fb$export$8397ddfc504fdb9a, m as $d4ee10de306f2510$export$e58f029f0fbfdb29, n as $458b0a5536c1a7cf$export$40bfa8c7b0832715, o as $f645667febf57a63$export$4c014de7c8940b4c, p as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, q as $9446cca9a3875146$export$cb6e0bb50bc19463, r as $9446cca9a3875146$export$7d15b64cf5a3a4c4, s as $fca6afa0e843324b$export$f12b703ca79dfbb1, t as $03deb23ff14920c4$export$4eaf04e54aa8eed6, u as $c87311424ea30a05$export$186c6964ca17d99, v as $c87311424ea30a05$export$a11b0059900ceec8, w as $ff5963eb1fccf552$export$e08e3b67e392101e, x as $c87311424ea30a05$export$fedb369cb70207f1, y as $d4ee10de306f2510$export$cd4e5573fbe2b576, z as $f39a9eba43920ace$export$86427a43e3e48ebb, A as $64fa3d84918910a7$export$29f1550f4b0d4415, B as $64fa3d84918910a7$export$df3a06d6289f983e, C as $64fa3d84918910a7$export$4d86445c2cf5e3, D as $514c0188e459b4c0$export$5f1af8db9871e1d6, E as $6179b936705e76d3$export$ae780daf29e6d456, F as $64fa3d84918910a7$export$fabf2dc03a41866e, G as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, H as $64fa3d84918910a7$export$ef03459518577ad4, I as $64fa3d84918910a7$export$2881499e37b75b9a, J as $514c0188e459b4c0$export$9afb8bc826b033ea } from '../Text-es2.js';
+import { flushSync } from 'react-dom';
 import classnames from 'classnames';
 import { I as Icon } from '../Icon-es.js';
 import { T as Text } from '../Text-es.js';
 import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
-import { k as FormField } from '../FormField-es.js';
+import { F as FormField } from '../FormField-es.js';
 import 'react-hook-form';
 import '@jobber/hooks';
 import 'framer-motion';
@@ -42,8 +43,7 @@ function $99facab73266f662$export$5add1d006293d136(ref, initialValue, onReset) {
             form === null || form === void 0 ? void 0 : form.removeEventListener('reset', handleReset);
         };
     }, [
-        ref,
-        handleReset
+        ref
     ]);
 }
 
@@ -629,6 +629,7 @@ function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
     let updateState = (useCallback)(()=>setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
     let onFocusChange = (useCallback)((isFocused)=>{
         state.current.isFocused = isFocused;
+        state.current.isFocusVisible = ($507fabe10e71c6fb$export$b9b3dfddab17db27)();
         setFocused(isFocused);
         updateState();
     }, [
@@ -637,7 +638,11 @@ function $f7dceffc5ad7768b$export$4e328f61c538687f(props = {}) {
     ($507fabe10e71c6fb$export$ec71b4b83ac08ec3)((isFocusVisible)=>{
         state.current.isFocusVisible = isFocusVisible;
         updateState();
-    }, [], {
+    }, [
+        isTextInput,
+        isFocused
+    ], {
+        enabled: isFocused,
         isTextInput: isTextInput
     });
     let { focusProps: focusProps } = ($a1ea59d68270f0dd$export$f8168d8dd8fd66e6)({
@@ -962,7 +967,7 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
         // This is best-effort. There may be false positives, e.g. setTimeout.
         form.reset = ()=>{
             // React uses MessageChannel for scheduling, so ignore 'message' events.
-            isIgnoredReset.current = !window.event || window.event.type === 'message' && window.event.target instanceof MessagePort;
+            isIgnoredReset.current = !window.event || window.event.type === 'message' && ($d4ee10de306f2510$export$e58f029f0fbfdb29)(window.event) instanceof MessagePort;
             reset === null || reset === void 0 ? void 0 : reset.call(form);
             isIgnoredReset.current = false;
         };
@@ -978,9 +983,6 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
         };
     }, [
         ref,
-        onInvalid,
-        onChange,
-        onReset,
         validationBehavior
     ]);
 }
@@ -1013,8 +1015,9 @@ function $e93e671b31057976$var$getNativeValidity(input) {
 }
 function $e93e671b31057976$var$getFirstInvalidInput(form) {
     for(let i = 0; i < form.elements.length; i++){
+        var _element_validity;
         let element = form.elements[i];
-        if (!element.validity.valid) return element;
+        if (((_element_validity = element.validity) === null || _element_validity === void 0 ? void 0 : _element_validity.valid) === false) return element;
     }
     return null;
 }
@@ -1061,25 +1064,6 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
     var _props_defaultValue;
     ($99facab73266f662$export$5add1d006293d136)(ref, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : initialValue, setValue);
     ($e93e671b31057976$export$b8473d3665f3a75a)(props, validationState, ref);
-    (useEffect)(()=>{
-        // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
-        // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
-        // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
-        // textareas are always controlled. React is planning on removing this synchronization in a
-        // future major version.
-        // https://github.com/facebook/react/issues/19474
-        // https://github.com/facebook/react/issues/11896
-        if (ref.current instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(ref.current).HTMLTextAreaElement) {
-            let input = ref.current;
-            Object.defineProperty(input, 'defaultValue', {
-                get: ()=>input.value,
-                set: ()=>{},
-                configurable: true
-            });
-        }
-    }, [
-        ref
-    ]);
     return {
         labelProps: labelProps,
         inputProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, {
@@ -1094,7 +1078,7 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
             'aria-haspopup': props['aria-haspopup'],
             'aria-controls': props['aria-controls'],
             value: value,
-            onChange: (e)=>setValue(e.target.value),
+            onChange: (e)=>setValue(($d4ee10de306f2510$export$e58f029f0fbfdb29)(e).value),
             autoComplete: props.autoComplete,
             autoCapitalize: props.autoCapitalize,
             maxLength: props.maxLength,
@@ -1204,11 +1188,10 @@ function $d841c8010a73d545$export$4f384c9210e583c3(props, state, inputRef) {
             input.removeEventListener('beforeinput', onBeforeInputFallback, false);
         };
     }, [
-        inputRef,
-        onBeforeInputFallback
+        inputRef
     ]);
     let onBeforeInput = !$d841c8010a73d545$var$supportsNativeBeforeInputEvent() ? (e)=>{
-        let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
+        let nextValue = ($d4ee10de306f2510$export$e58f029f0fbfdb29)(e).value.slice(0, ($d4ee10de306f2510$export$e58f029f0fbfdb29)(e).selectionStart) + e.data + ($d4ee10de306f2510$export$e58f029f0fbfdb29)(e).value.slice(($d4ee10de306f2510$export$e58f029f0fbfdb29)(e).selectionEnd);
         if (!state.validate(nextValue)) e.preventDefault();
     } : null;
     let { labelProps: labelProps, inputProps: textFieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = ($2d73ec29415bd339$export$712718f7aec83d5)(props, inputRef);
@@ -1326,22 +1309,25 @@ function $de67e98908f0c6ee$export$7f629e9dc1ecf37c(props) {
         numberParser,
         inputValue
     ]);
-    let commit = ()=>{
+    let commit = (overrideValue)=>{
+        let newInputValue = overrideValue === undefined ? inputValue : overrideValue;
+        let newParsedValue = parsedValue;
+        if (overrideValue !== undefined) newParsedValue = numberParser.parse(newInputValue);
         // Set to empty state if input value is empty
-        if (!inputValue.length) {
+        if (!newInputValue.length) {
             setNumberValue(NaN);
             setInputValue(value === undefined ? '' : format(numberValue));
             return;
         }
         // if it failed to parse, then reset input to formatted version of current number
-        if (isNaN(parsedValue)) {
+        if (isNaN(newParsedValue)) {
             setInputValue(format(numberValue));
             return;
         }
         // Clamp to min and max, round to the nearest step, and round to specified number of digits
         let clampedValue;
-        if (step === undefined || isNaN(step)) clampedValue = ($9446cca9a3875146$export$7d15b64cf5a3a4c4)(parsedValue, minValue, maxValue);
-        else clampedValue = ($9446cca9a3875146$export$cb6e0bb50bc19463)(parsedValue, minValue, maxValue, step);
+        if (step === undefined || isNaN(step)) clampedValue = ($9446cca9a3875146$export$7d15b64cf5a3a4c4)(newParsedValue, minValue, maxValue);
+        else clampedValue = ($9446cca9a3875146$export$cb6e0bb50bc19463)(newParsedValue, minValue, maxValue, step);
         clampedValue = numberParser.parse(format(clampedValue));
         setNumberValue(clampedValue);
         // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
@@ -1707,13 +1693,21 @@ function $parcel$interopDefault$1(a) {
 
 
 
+const $d2e8511e6f209edf$var$noop = ()=>{};
 function $d2e8511e6f209edf$export$e908e06f4b8e3402(props) {
     const _async = (useRef)(undefined);
     let { value: value, textValue: textValue, minValue: minValue, maxValue: maxValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onIncrement: onIncrement, onIncrementPage: onIncrementPage, onDecrement: onDecrement, onDecrementPage: onDecrementPage, onDecrementToMin: onDecrementToMin, onIncrementToMax: onIncrementToMax } = props;
     const stringFormatter = ($fca6afa0e843324b$export$f12b703ca79dfbb1)((($parcel$interopDefault$1($a99895ee3dc79e61$exports))), '@react-aria/spinbutton');
-    const clearAsync = ()=>clearTimeout(_async.current);
+    let isSpinning = (useRef)(false);
+    const clearAsync = (useCallback)(()=>{
+        clearTimeout(_async.current);
+        isSpinning.current = false;
+    }, []);
+    const clearAsyncEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+        clearAsync();
+    });
     (useEffect)(()=>{
-        return ()=>clearAsync();
+        return ()=>clearAsyncEvent();
     }, []);
     let onKeyDown = (e)=>{
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || isReadOnly || e.nativeEvent.isComposing) return;
@@ -1780,26 +1774,61 @@ function $d2e8511e6f209edf$export$e908e06f4b8e3402(props) {
     }, [
         ariaTextValue
     ]);
-    const onIncrementPressStart = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)((initialStepDelay)=>{
+    // For touch users, if they move their finger like they're scrolling, we don't want to trigger a spin.
+    let onPointerCancel = (useCallback)(()=>{
         clearAsync();
-        onIncrement === null || onIncrement === void 0 ? void 0 : onIncrement();
+    }, [
+        clearAsync
+    ]);
+    const onIncrementEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(onIncrement !== null && onIncrement !== void 0 ? onIncrement : $d2e8511e6f209edf$var$noop);
+    const onDecrementEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(onDecrement !== null && onDecrement !== void 0 ? onDecrement : $d2e8511e6f209edf$var$noop);
+    const stepUpEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+        if (maxValue === undefined || isNaN(maxValue) || value === undefined || isNaN(value) || value < maxValue) {
+            onIncrementEvent();
+            onIncrementPressStartEvent(60);
+        }
+    });
+    const onIncrementPressStartEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)((initialStepDelay)=>{
+        clearAsyncEvent();
+        isSpinning.current = true;
         // Start spinning after initial delay
-        _async.current = window.setTimeout(()=>{
-            if (maxValue === undefined || isNaN(maxValue) || value === undefined || isNaN(value) || value < maxValue) onIncrementPressStart(60);
-        }, initialStepDelay);
+        _async.current = window.setTimeout(stepUpEvent, initialStepDelay);
     });
-    const onDecrementPressStart = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)((initialStepDelay)=>{
-        clearAsync();
-        onDecrement === null || onDecrement === void 0 ? void 0 : onDecrement();
+    const stepDownEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)(()=>{
+        if (minValue === undefined || isNaN(minValue) || value === undefined || isNaN(value) || value > minValue) {
+            onDecrementEvent();
+            onDecrementPressStartEvent(60);
+        }
+    });
+    const onDecrementPressStartEvent = ($8ae05eaa5c114e9c$export$7f54fc3180508a52)((initialStepDelay)=>{
+        clearAsyncEvent();
+        isSpinning.current = true;
         // Start spinning after initial delay
-        _async.current = window.setTimeout(()=>{
-            if (minValue === undefined || isNaN(minValue) || value === undefined || isNaN(value) || value > minValue) onDecrementPressStart(60);
-        }, initialStepDelay);
+        _async.current = window.setTimeout(stepDownEvent, initialStepDelay);
     });
     let cancelContextMenu = (e)=>{
         e.preventDefault();
     };
     let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = ($03deb23ff14920c4$export$4eaf04e54aa8eed6)();
+    // Tracks in touch if the press end event was preceded by a press up.
+    // If it wasn't, then we know the finger left the button while still in contact with the screen.
+    // This means that the user is trying to scroll or interact in some way that shouldn't trigger
+    // an increment or decrement.
+    let isUp = (useRef)(false);
+    let [isIncrementPressed, setIsIncrementPressed] = (useState)(null);
+    (useEffect)(()=>{
+        if (isIncrementPressed === 'touch') onIncrementPressStartEvent(600);
+        else if (isIncrementPressed) onIncrementPressStartEvent(400);
+    }, [
+        isIncrementPressed
+    ]);
+    let [isDecrementPressed, setIsDecrementPressed] = (useState)(null);
+    (useEffect)(()=>{
+        if (isDecrementPressed === 'touch') onDecrementPressStartEvent(600);
+        else if (isDecrementPressed) onDecrementPressStartEvent(400);
+    }, [
+        isDecrementPressed
+    ]);
     return {
         spinButtonProps: {
             role: 'spinbutton',
@@ -1815,25 +1844,68 @@ function $d2e8511e6f209edf$export$e908e06f4b8e3402(props) {
             onBlur: onBlur
         },
         incrementButtonProps: {
-            onPressStart: ()=>{
-                onIncrementPressStart(400);
+            onPressStart: (e)=>{
+                clearAsync();
+                if (e.pointerType !== 'touch') {
+                    onIncrement === null || onIncrement === void 0 ? void 0 : onIncrement();
+                    setIsIncrementPressed('mouse');
+                } else {
+                    addGlobalListener(window, 'pointercancel', onPointerCancel, {
+                        capture: true
+                    });
+                    isUp.current = false;
+                    // For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
+                    // the control isn't spinning.
+                    setIsIncrementPressed('touch');
+                }
                 addGlobalListener(window, 'contextmenu', cancelContextMenu);
             },
-            onPressEnd: ()=>{
+            onPressUp: (e)=>{
                 clearAsync();
+                if (e.pointerType === 'touch') isUp.current = true;
                 removeAllGlobalListeners();
+                setIsIncrementPressed(null);
+            },
+            onPressEnd: (e)=>{
+                clearAsync();
+                if (e.pointerType === 'touch') {
+                    if (!isSpinning.current && isUp.current) onIncrement === null || onIncrement === void 0 ? void 0 : onIncrement();
+                }
+                isUp.current = false;
+                setIsIncrementPressed(null);
             },
             onFocus: onFocus,
             onBlur: onBlur
         },
         decrementButtonProps: {
-            onPressStart: ()=>{
-                onDecrementPressStart(400);
-                addGlobalListener(window, 'contextmenu', cancelContextMenu);
+            onPressStart: (e)=>{
+                clearAsync();
+                if (e.pointerType !== 'touch') {
+                    onDecrement === null || onDecrement === void 0 ? void 0 : onDecrement();
+                    setIsDecrementPressed('mouse');
+                } else {
+                    addGlobalListener(window, 'pointercancel', onPointerCancel, {
+                        capture: true
+                    });
+                    isUp.current = false;
+                    // For touch users, don't trigger a decrement on press start, we'll wait for the press end to trigger it if
+                    // the control isn't spinning.
+                    setIsDecrementPressed('touch');
+                }
             },
-            onPressEnd: ()=>{
+            onPressUp: (e)=>{
                 clearAsync();
+                if (e.pointerType === 'touch') isUp.current = true;
                 removeAllGlobalListeners();
+                setIsDecrementPressed(null);
+            },
+            onPressEnd: (e)=>{
+                clearAsync();
+                if (e.pointerType === 'touch') {
+                    if (!isSpinning.current && isUp.current) onDecrement === null || onDecrement === void 0 ? void 0 : onDecrement();
+                }
+                isUp.current = false;
+                setIsDecrementPressed(null);
             },
             onFocus: onFocus,
             onBlur: onBlur
@@ -2172,15 +2244,30 @@ function $parcel$interopDefault(a) {
 
 
 
+
+
 function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
     let { id: id, decrementAriaLabel: decrementAriaLabel, incrementAriaLabel: incrementAriaLabel, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, minValue: minValue, maxValue: maxValue, autoFocus: autoFocus, label: label, formatOptions: formatOptions, onBlur: onBlur = ()=>{}, onFocus: onFocus, onFocusChange: onFocusChange, onKeyDown: onKeyDown, onKeyUp: onKeyUp, description: description, errorMessage: errorMessage, isWheelDisabled: isWheelDisabled, ...otherProps } = props;
     let { increment: increment, incrementToMax: incrementToMax, decrement: decrement, decrementToMin: decrementToMin, numberValue: numberValue, inputValue: inputValue, commit: commit, commitValidation: commitValidation } = state;
     const stringFormatter = ($fca6afa0e843324b$export$f12b703ca79dfbb1)((($parcel$interopDefault($280a227d7cb94b92$exports))), '@react-aria/numberfield');
+    let commitAndAnnounce = (useCallback)(()=>{
+        var _inputRef_current, _inputRef_current1, _inputRef_current2;
+        var _inputRef_current_value;
+        let oldValue = (_inputRef_current_value = (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.value) !== null && _inputRef_current_value !== void 0 ? _inputRef_current_value : '';
+        // Set input value to normalized valid value
+        (flushSync)(()=>{
+            commit();
+        });
+        var _inputRef_current_value1;
+        if (((_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : _inputRef_current1.value) !== oldValue) ($319e236875307eab$export$a9b970dcc4ae71a9)((_inputRef_current_value1 = (_inputRef_current2 = inputRef.current) === null || _inputRef_current2 === void 0 ? void 0 : _inputRef_current2.value) !== null && _inputRef_current_value1 !== void 0 ? _inputRef_current_value1 : '', 'assertive');
+    }, [
+        commit,
+        inputRef
+    ]);
     let inputId = ($bdb11010cef70236$export$f680877a34711e37)(id);
     let { focusProps: focusProps } = ($a1ea59d68270f0dd$export$f8168d8dd8fd66e6)({
         onBlur () {
-            // Set input value to normalized valid value
-            commit();
+            commitAndAnnounce();
         }
     });
     let numberFormatter = ($a916eb452884faea$export$b7a616150fdb9f44)(formatOptions);
@@ -2256,6 +2343,24 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
     let onChange = (value)=>{
         if (state.validate(value)) state.setInputValue(value);
     };
+    let onPaste = (e)=>{
+        var _props_onPaste;
+        (_props_onPaste = props.onPaste) === null || _props_onPaste === void 0 ? void 0 : _props_onPaste.call(props, e);
+        let inputElement = ($d4ee10de306f2510$export$e58f029f0fbfdb29)(e);
+        var _inputElement_selectionEnd, _inputElement_selectionStart;
+        // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated
+        // trying to calculate the new string based on what the paste is replacing and where in the source string it is
+        if (inputElement && ((_inputElement_selectionEnd = inputElement.selectionEnd) !== null && _inputElement_selectionEnd !== void 0 ? _inputElement_selectionEnd : -1) - ((_inputElement_selectionStart = inputElement.selectionStart) !== null && _inputElement_selectionStart !== void 0 ? _inputElement_selectionStart : 0) === inputElement.value.length) {
+            var _e_clipboardData_getData, _e_clipboardData_getData1, _e_clipboardData;
+            e.preventDefault();
+            var _e_clipboardData_getData_trim;
+            // commit so that the user gets to see what it formats to immediately
+            // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves
+            // spin button will then handle announcing the new value, this should work with controlled state as well
+            // because the announcement is done as a result of the new rendered input value if there is one
+            commit((_e_clipboardData_getData_trim = (_e_clipboardData = e.clipboardData) === null || _e_clipboardData === void 0 ? void 0 : (_e_clipboardData_getData1 = _e_clipboardData.getData) === null || _e_clipboardData_getData1 === void 0 ? void 0 : (_e_clipboardData_getData = _e_clipboardData_getData1.call(_e_clipboardData, 'text/plain')) === null || _e_clipboardData_getData === void 0 ? void 0 : _e_clipboardData_getData.trim()) !== null && _e_clipboardData_getData_trim !== void 0 ? _e_clipboardData_getData_trim : '');
+        }
+    };
     let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
     let onKeyDownEnter = (useCallback)((e)=>{
         if (e.nativeEvent.isComposing) return;
@@ -2298,6 +2403,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
             onKeyDown
         ]),
         onKeyUp: onKeyUp,
+        onPaste: onPaste,
         description: description,
         errorMessage: errorMessage
     }, state, inputRef);
@@ -2319,7 +2425,7 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
         var _inputRef_current;
         // If focus is already on the input, keep it there so we don't hide the
         // software keyboard when tapping the increment/decrement buttons.
-        if (document.activeElement === inputRef.current) return;
+        if (($d4ee10de306f2510$export$cd4e5573fbe2b576)() === inputRef.current) return;
         // Otherwise, when using a mouse, move focus to the input.
         // On touch, or with a screen reader, focus the button so that the software
         // keyboard does not appear and the screen reader cursor is not moved off the button.
@@ -2402,7 +2508,8 @@ function $81397a9303501bda$export$23f548e970bdf099(props, state, inputRef) {
 const $01b77f81d0f07f68$export$75b6ee27786ba447 = /*#__PURE__*/ (createContext)({});
 const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($f39a9eba43920ace$export$86427a43e3e48ebb)(function Label(props, ref) {
     [props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $01b77f81d0f07f68$export$75b6ee27786ba447);
-    let { elementType: ElementType = 'label', ...labelProps } = props;
+    let { elementType: elementType = 'label', ...labelProps } = props;
+    let ElementType = ($64fa3d84918910a7$export$df3a06d6289f983e)[elementType];
     // @ts-ignore
     return /*#__PURE__*/ (React__default).createElement(ElementType, {
         className: "react-aria-Label",
@@ -2504,7 +2611,9 @@ const $d3e0e05bdfcf66bd$export$c24727297075ec6a = /*#__PURE__*/ (createContext)(
 const $a049562f99e7db0e$export$f9c6924e160136d1 = /*#__PURE__*/ (createContext)({});
 const $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 = /*#__PURE__*/ (forwardRef)(function Group(props, ref) {
     [props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $a049562f99e7db0e$export$f9c6924e160136d1);
-    let { isDisabled: isDisabled, isInvalid: isInvalid, onHoverStart: onHoverStart, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, ...otherProps } = props;
+    let { isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, onHoverStart: onHoverStart, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, ...otherProps } = props;
+    isDisabled !== null && isDisabled !== void 0 ? isDisabled : isDisabled = !!props['aria-disabled'] && props['aria-disabled'] !== 'false';
+    isInvalid !== null && isInvalid !== void 0 ? isInvalid : isInvalid = !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
     let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)({
         onHoverStart: onHoverStart,
         onHoverChange: onHoverChange,
@@ -2514,8 +2623,6 @@ const $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 = /*#__PURE__*/ (forwardRef)(fun
     let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
         within: true
     });
-    isDisabled !== null && isDisabled !== void 0 ? isDisabled : isDisabled = !!props['aria-disabled'] && props['aria-disabled'] !== 'false';
-    isInvalid !== null && isInvalid !== void 0 ? isInvalid : isInvalid = !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
     let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
         values: {
@@ -2528,7 +2635,7 @@ const $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 = /*#__PURE__*/ (forwardRef)(fun
         defaultClassName: 'react-aria-Group'
     });
     var _props_role, _props_slot;
-    return /*#__PURE__*/ (React__default).createElement("div", {
+    return /*#__PURE__*/ (React__default).createElement(($64fa3d84918910a7$export$df3a06d6289f983e).div, {
         ...($3ef42575df84b30b$export$9d1611c77c2fe928)(otherProps, focusProps, hoverProps),
         ...renderProps,
         ref: ref,
@@ -2538,7 +2645,8 @@ const $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 = /*#__PURE__*/ (forwardRef)(fun
         "data-hovered": isHovered || undefined,
         "data-focus-visible": isFocusVisible || undefined,
         "data-disabled": isDisabled || undefined,
-        "data-invalid": isInvalid || undefined
+        "data-invalid": isInvalid || undefined,
+        "data-readonly": isReadOnly || undefined
     }, renderProps.children);
 });
 
@@ -2564,7 +2672,10 @@ let $3985021b0ad6602f$var$filterHoverProps = (props)=>{
 };
 const $3985021b0ad6602f$export$f5b8910cec6cf069 = /*#__PURE__*/ ($f39a9eba43920ace$export$86427a43e3e48ebb)(function Input(props, ref) {
     [props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $3985021b0ad6602f$export$37fb8590cf2c088c);
-    let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)(props);
+    let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)({
+        ...props,
+        isDisabled: props.disabled
+    });
     let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
         isTextInput: true,
         autoFocus: props.autoFocus
@@ -2581,7 +2692,7 @@ const $3985021b0ad6602f$export$f5b8910cec6cf069 = /*#__PURE__*/ ($f39a9eba43920a
         },
         defaultClassName: 'react-aria-Input'
     });
-    return /*#__PURE__*/ (React__default).createElement("input", {
+    return /*#__PURE__*/ (React__default).createElement(($64fa3d84918910a7$export$df3a06d6289f983e).input, {
         ...($3ef42575df84b30b$export$9d1611c77c2fe928)($3985021b0ad6602f$var$filterHoverProps(props), focusProps, hoverProps),
         ...renderProps,
         ref: ref,
@@ -2696,7 +2807,7 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (forwardRef)(fun
                 validation
             ]
         ]
-    }, /*#__PURE__*/ (React__default).createElement("div", {
+    }, /*#__PURE__*/ (React__default).createElement(($64fa3d84918910a7$export$df3a06d6289f983e).div, {
         ...DOMProps,
         ...renderProps,
         ref: ref,
@@ -2708,7 +2819,8 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /*#__PURE__*/ (forwardRef)(fun
         type: "hidden",
         name: props.name,
         form: props.form,
-        value: isNaN(state.numberValue) ? '' : state.numberValue
+        value: isNaN(state.numberValue) ? '' : state.numberValue,
+        disabled: props.isDisabled || undefined
     }));
 });
 

package/dist/InputPassword-es.js

@@ -1,5 +1,5 @@
 import React__default, { useState } from 'react';
-import { k as FormField } from './FormField-es.js';
+import { F as FormField } from './FormField-es.js';
 import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';

package/dist/InputPhoneNumber/index.cjs

@@ -18,7 +18,7 @@ require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-router-dom');
 
-var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-","spinning":"T3VvmDmzs-4-"};
+var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-"};
 
 function useInputMask({ value = "", pattern, delimiter = "*", strict = true, onChange, }) {
     const [isMasking, setIsMasking] = React.useState(!value);

package/dist/InputPhoneNumber/index.mjs

@@ -1,7 +1,7 @@
 import React__default, { useState, useMemo, useCallback, useEffect, cloneElement, forwardRef, useId } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import classnames from 'classnames';
-import { b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, k as FormField } from '../FormField-es.js';
+import { i as useAtlantisFormFieldName, e as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, F as FormField } from '../FormField-es.js';
 import { useFormContext, useForm } from 'react-hook-form';
 import '../Button-es.js';
 import '@jobber/design';
@@ -16,7 +16,7 @@ import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
 
-var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-","spinning":"T3VvmDmzs-4-"};
+var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","emptyValue":"oOrjwubmsVA-"};
 
 function useInputMask({ value = "", pattern, delimiter = "*", strict = true, onChange, }) {
     const [isMasking, setIsMasking] = useState(!value);

package/dist/InputText/InputText.d.ts

@@ -1,71 +1,3 @@
 import React from "react";
-import type { InputTextRef } from "./InputText.types";
-export declare const InputText: React.ForwardRefExoticComponent<({
-    readonly multiline: true;
-    readonly rows?: (number | import("./InputText.types").RowRange) | undefined;
-    readonly id?: string | undefined;
-    readonly align?: ("center" | "right") | undefined;
-    readonly description?: React.ReactNode;
-    readonly disabled?: boolean | undefined;
-    readonly showMiniLabel?: boolean | undefined;
-    readonly invalid?: boolean | undefined;
-    readonly inline?: boolean | undefined;
-    loading?: boolean | undefined;
-    readonly name?: string | undefined;
-    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void) | undefined;
-    onValidation?: ((message: string) => void) | undefined;
-    readonly placeholder?: string | undefined;
-    readonly size?: ("small" | "large") | undefined;
-    readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks").Clearable | undefined;
-    version?: 1 | undefined;
-    onFocus?: ((event?: React.FocusEvent) => void) | undefined;
-    onBlur?: ((event?: React.FocusEvent) => void) | undefined;
-    readonly toolbar?: React.ReactNode;
-    readonly defaultValue?: (string | Date) | undefined;
-    readonly prefix?: import("../FormField").Affix | undefined;
-    readonly maxLength?: number | undefined;
-    readonly autofocus?: boolean | undefined;
-    readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
-    readonly keyboard?: ("numeric" | "decimal") | undefined;
-    readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
-    onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
-    readonly readonly?: boolean | undefined;
-    readonly validations?: import("react-hook-form").RegisterOptions | undefined;
-    readonly toolbarVisibility?: ("always" | "while-editing") | undefined;
-} | {
-    rows?: undefined;
-    multiline?: boolean | undefined;
-    readonly id?: string | undefined;
-    readonly align?: ("center" | "right") | undefined;
-    readonly description?: React.ReactNode;
-    readonly disabled?: boolean | undefined;
-    readonly showMiniLabel?: boolean | undefined;
-    readonly invalid?: boolean | undefined;
-    readonly inline?: boolean | undefined;
-    loading?: boolean | undefined;
-    readonly name?: string | undefined;
-    onChange?: ((newValue: string | number | boolean | Date, event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void) | undefined;
-    onValidation?: ((message: string) => void) | undefined;
-    readonly placeholder?: string | undefined;
-    readonly size?: ("small" | "large") | undefined;
-    readonly value?: (string | number | Date) | undefined;
-    readonly clearable?: import("@jobber/hooks").Clearable | undefined;
-    version?: 1 | undefined;
-    onFocus?: ((event?: React.FocusEvent) => void) | undefined;
-    onBlur?: ((event?: React.FocusEvent) => void) | undefined;
-    readonly toolbar?: React.ReactNode;
-    readonly defaultValue?: (string | Date) | undefined;
-    readonly prefix?: import("../FormField").Affix | undefined;
-    readonly maxLength?: number | undefined;
-    readonly autofocus?: boolean | undefined;
-    readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
-    readonly keyboard?: ("numeric" | "decimal") | undefined;
-    readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
-    onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
-    readonly readonly?: boolean | undefined;
-    readonly validations?: import("react-hook-form").RegisterOptions | undefined;
-    readonly toolbarVisibility?: ("always" | "while-editing") | undefined;
-}) & React.RefAttributes<InputTextRef>>;
+import type { InputTextLegacyProps, InputTextRef } from "./InputText.types";
+export declare const InputText: React.ForwardRefExoticComponent<InputTextLegacyProps & React.RefAttributes<InputTextRef>>;

package/dist/InputText/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, b as useAtlantisFormFieldName, n as mergeRefs, l as formFieldStyles, f as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
+import { F as FormField, i as useAtlantisFormFieldName, n as mergeRefs, l as formFieldStyles, e as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';

package/dist/InputTime/index.cjs

@@ -274,7 +274,6 @@ function InputTimeRebuilt(_a) {
     const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
         onChange,
         value,
-        readOnly,
         disabled: props.disabled,
         inputRef: internalRef,
         onFocus: props.onFocus,

package/dist/InputTime/index.mjs

@@ -1,7 +1,7 @@
 import React__default, { useState, useCallback, useEffect, useId, useRef } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import { a as debounce } from '../debounce-es.js';
-import { f as FormFieldWrapper, l as formFieldStyles, n as mergeRefs, k as FormField } from '../FormField-es.js';
+import { e as FormFieldWrapper, l as formFieldStyles, n as mergeRefs, F as FormField } from '../FormField-es.js';
 import 'classnames';
 import '@jobber/design';
 import 'react-hook-form';
@@ -272,7 +272,6 @@ function InputTimeRebuilt(_a) {
     const { handleChangeEvent, handleChange, handleBlur, handleClear, handleFocus, handleKeyDown, handleClick, handleMouseDown, handleMouseUp, handlePointerDown, handlePointerUp, } = useInputTimeActions({
         onChange,
         value,
-        readOnly,
         disabled: props.disabled,
         inputRef: internalRef,
         onFocus: props.onFocus,