@jobber/components 5.15.2-fix-input-.0 → 5.15.2-fix-input-.1

package/dist/FeatureSwitch/index.cjs

@@ -1,23 +1,23 @@
 'use strict';
 
-var FeatureSwitch = require('../FeatureSwitch-ChnwF4JN.js');
+var FeatureSwitch = require('../FeatureSwitch-CKrxiGcQ.js');
 require('react');
 require('framer-motion');
 require('classnames');
-require('../Heading-DXeeqrC_.js');
-require('../Typography-CiVsswcS.js');
-require('../Text-a_zqIIN9.js');
-require('../Content-DyggamUZ.js');
-require('../Switch-a7-Q7k8B.js');
-require('../Button-C1LiBrTR.js');
+require('../Heading-BWTS0UD8.js');
+require('../Typography-BD7qrCaS.js');
+require('../Text-BjZcutrM.js');
+require('../Content-D0Dnz9Rk.js');
+require('../Switch-Ce_8PaJQ.js');
+require('../Button-mmk-2Vu6.js');
 require('react-router-dom');
-require('../Icon-CSGLgk85.js');
+require('../Icon-BtU-wg5K.js');
 require('@jobber/design');
-require('../Emphasis-BmoSrzRs.js');
-require('../Markdown-BQUAGfMM.js');
-require('../index-DdhkSmM4.js');
-require('../_commonjsHelpers-Bx4SHQ_D.js');
-require('../_polyfill-node.process-DeqyYqiM.js');
+require('../Emphasis-DqITOLJQ.js');
+require('../Markdown-Dz55-GFx.js');
+require('../index-DCbqOnRE.js');
+require('../_commonjsHelpers-KWPN9RM-.js');
+require('../_polyfill-node.process-CS-f4TbU.js');
 
 
 

package/dist/FeatureSwitch/index.mjs

@@ -1,18 +1,18 @@
-export { F as FeatureSwitch } from '../FeatureSwitch-DsQN2Ybw.js';
+export { F as FeatureSwitch } from '../FeatureSwitch-DlbSCW5s.js';
 import 'react';
 import 'framer-motion';
 import 'classnames';
-import '../Heading-Dx_zvABK.js';
-import '../Typography-DIMCVCvt.js';
-import '../Text-CEMqEWry.js';
-import '../Content-y5ws5cSy.js';
-import '../Switch-wB2DSaXm.js';
-import '../Button-C0mVjCcE.js';
+import '../Heading-CjC0WuEP.js';
+import '../Typography-aKemJWma.js';
+import '../Text-BWu90K4v.js';
+import '../Content-CTwMXrYI.js';
+import '../Switch-kJNzq77k.js';
+import '../Button-CrF27_3V.js';
 import 'react-router-dom';
-import '../Icon-PQT92gxC.js';
+import '../Icon-DCjQNyg7.js';
 import '@jobber/design';
-import '../Emphasis-CbdHOPtQ.js';
-import '../Markdown-C9NIE7v2.js';
-import '../index-DOVgHGhr.js';
-import '../_commonjsHelpers-BKuahENp.js';
-import '../_polyfill-node.process-Da0Yqo_a.js';
+import '../Emphasis-Bsf5_rJz.js';
+import '../Markdown-FHtyTe_1.js';
+import '../index-BbJ3eeRf.js';
+import '../_commonjsHelpers-kmZfvu5v.js';
+import '../_polyfill-node.process-BLBPD9oh.js';

package/dist/{FeatureSwitch-ChnwF4JN.js → FeatureSwitch-CKrxiGcQ.js}

@@ -3,13 +3,13 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var classnames = require('classnames');
-var Heading = require('./Heading-DXeeqrC_.js');
-var Text = require('./Text-a_zqIIN9.js');
-var Content = require('./Content-DyggamUZ.js');
-var Switch = require('./Switch-a7-Q7k8B.js');
-var Button = require('./Button-C1LiBrTR.js');
-var Emphasis = require('./Emphasis-BmoSrzRs.js');
-var Markdown = require('./Markdown-BQUAGfMM.js');
+var Heading = require('./Heading-BWTS0UD8.js');
+var Text = require('./Text-BjZcutrM.js');
+var Content = require('./Content-D0Dnz9Rk.js');
+var Switch = require('./Switch-Ce_8PaJQ.js');
+var Button = require('./Button-mmk-2Vu6.js');
+var Emphasis = require('./Emphasis-DqITOLJQ.js');
+var Markdown = require('./Markdown-Dz55-GFx.js');
 
 var styles = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
 

package/dist/{FeatureSwitch-DsQN2Ybw.js → FeatureSwitch-DlbSCW5s.js}

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import classnames from 'classnames';
-import { H as Heading } from './Heading-Dx_zvABK.js';
-import { T as Text } from './Text-CEMqEWry.js';
-import { C as Content } from './Content-y5ws5cSy.js';
-import { S as Switch } from './Switch-wB2DSaXm.js';
-import { B as Button } from './Button-C0mVjCcE.js';
-import { E as Emphasis } from './Emphasis-CbdHOPtQ.js';
-import { M as Markdown } from './Markdown-C9NIE7v2.js';
+import { H as Heading } from './Heading-CjC0WuEP.js';
+import { T as Text } from './Text-BWu90K4v.js';
+import { C as Content } from './Content-CTwMXrYI.js';
+import { S as Switch } from './Switch-kJNzq77k.js';
+import { B as Button } from './Button-CrF27_3V.js';
+import { E as Emphasis } from './Emphasis-Bsf5_rJz.js';
+import { M as Markdown } from './Markdown-FHtyTe_1.js';
 
 var styles = {"container":"-sVnhIK4hZw-","content":"ZJaXf-cIFgU-","action":"OA-s1YYLMMM-","savedIndicator":"lN90IIewHq8-","featureContent":"mW56hvBHqPM-","enabled":"QfZjM5S-Ls0-"};
 

package/dist/Flex/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var Flex = require('../Flex-BOUW7LdD.js');
+var Flex = require('../Flex-D2Fd3yCR.js');
 require('react');
 require('classnames');
 

package/dist/Flex/index.mjs

@@ -1,3 +1,3 @@
-export { F as Flex } from '../Flex-C1wv-8mM.js';
+export { F as Flex } from '../Flex-Be2PSnFd.js';
 import 'react';
 import 'classnames';

package/dist/Form/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var Form = require('../Form-BSYkW8OU.js');
-require('../tslib.es6-DppZ7bsJ.js');
+var Form = require('../Form-BXtysYmW.js');
+require('../tslib.es6-B4XD2NIo.js');
 require('react');
 require('react-hook-form');
 

package/dist/Form/index.mjs

@@ -1,4 +1,4 @@
-export { F as Form } from '../Form-DpEKppWa.js';
-import '../tslib.es6-DRGKoNsn.js';
+export { F as Form } from '../Form-C4ptpufb.js';
+import '../tslib.es6-C6H-pUSl.js';
 import 'react';
 import 'react-hook-form';

package/dist/{Form-BSYkW8OU.js → Form-BXtysYmW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-DppZ7bsJ.js');
+var tslib_es6 = require('./tslib.es6-B4XD2NIo.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 

package/dist/{Form-DpEKppWa.js → Form-C4ptpufb.js}

@@ -1,4 +1,4 @@
-import { a as __awaiter } from './tslib.es6-DRGKoNsn.js';
+import { a as __awaiter } from './tslib.es6-C6H-pUSl.js';
 import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 

package/dist/FormField/index.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var FormField = require('../FormField-BaB7M_2E.js');
-require('../tslib.es6-DppZ7bsJ.js');
+var FormField = require('../FormField-tlhQoIA2.js');
+require('../tslib.es6-B4XD2NIo.js');
 require('react');
 require('react-hook-form');
 require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('../Button-C1LiBrTR.js');
+require('../Button-mmk-2Vu6.js');
 require('react-router-dom');
-require('../Icon-CSGLgk85.js');
-require('../Typography-CiVsswcS.js');
-require('../Text-a_zqIIN9.js');
-require('../useFormFieldFocus-CsZlDAhq.js');
-require('../InputValidation-DyIGFvVJ.js');
-require('../Spinner-BQ2yGtWC.js');
+require('../Icon-BtU-wg5K.js');
+require('../Typography-BD7qrCaS.js');
+require('../Text-BjZcutrM.js');
+require('../useFormFieldFocus-BnZc-yIt.js');
+require('../InputValidation-BMLePLzm.js');
+require('../Spinner-Rj3ZfbYP.js');
 
 
 

package/dist/FormField/index.mjs

@@ -1,15 +1,15 @@
-export { F as FormField } from '../FormField-D4mx2KFg.js';
-import '../tslib.es6-DRGKoNsn.js';
+export { F as FormField } from '../FormField-RKxWszYS.js';
+import '../tslib.es6-C6H-pUSl.js';
 import 'react';
 import 'react-hook-form';
 import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import '../Button-C0mVjCcE.js';
+import '../Button-CrF27_3V.js';
 import 'react-router-dom';
-import '../Icon-PQT92gxC.js';
-import '../Typography-DIMCVCvt.js';
-import '../Text-CEMqEWry.js';
-import '../useFormFieldFocus-Bx9IXlkw.js';
-import '../InputValidation-Jh_7dzRI.js';
-import '../Spinner-Dvn56859.js';
+import '../Icon-DCjQNyg7.js';
+import '../Typography-aKemJWma.js';
+import '../Text-BWu90K4v.js';
+import '../useFormFieldFocus-BgBYN1_J.js';
+import '../InputValidation-DwGxdivr.js';
+import '../Spinner-sUKaGqey.js';

package/dist/{FormField-D4mx2KFg.js → FormField-RKxWszYS.js}

@@ -1,15 +1,15 @@
-import { _ as __rest } from './tslib.es6-DRGKoNsn.js';
+import { _ as __rest } from './tslib.es6-C6H-pUSl.js';
 import React, { useRef, useState, useEffect, useId, useImperativeHandle } from 'react';
-import { useFormContext, useForm, Controller } from 'react-hook-form';
+import { useFormContext, useForm, useController } from 'react-hook-form';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@jobber/design';
-import { B as Button } from './Button-C0mVjCcE.js';
-import { I as Icon } from './Icon-PQT92gxC.js';
-import { T as Text } from './Text-CEMqEWry.js';
-import { u as useFormFieldFocus } from './useFormFieldFocus-Bx9IXlkw.js';
-import { I as InputValidation } from './InputValidation-Jh_7dzRI.js';
-import { S as Spinner } from './Spinner-Dvn56859.js';
+import { B as Button } from './Button-CrF27_3V.js';
+import { I as Icon } from './Icon-DCjQNyg7.js';
+import { T as Text } from './Text-BWu90K4v.js';
+import { u as useFormFieldFocus } from './useFormFieldFocus-BgBYN1_J.js';
+import { I as InputValidation } from './InputValidation-DwGxdivr.js';
+import { S as Spinner } from './Spinner-sUKaGqey.js';
 
 var styles$1 = {"container":"geR7qBhrMfk-","wrapper":"nPGhTEEzsoU-","horizontalWrapper":"q7AxfhwVVBs-","textarea":"mgPacJ6Z71Y-","safari":"g82RTxBqooQ-","timeInputLabel":"YhserUiOeFE-","miniLabel":"UIZq8hTmJVU-","large":"Ku8sWS0mLew-","text":"e4VYDAkWHAg-","invalid":"gJ-15M615eY-","disabled":"_1rsTLm5GwcM-","small":"o8D-H-lKfDk-","inline":"_5Hu2F3cBvng-","center":"s1WLQs6ffD8-","right":"a2r4QheWYIA-","maxLength":"KdAnXK1gClo-","inputWrapper":"iQFhpFYnz-8-","childrenWrapper":"Yo2Wi9dpa-Y-","input":"LSHPV7PwOTg-","select":"i31GQXcMz54-","label":"_3xREbTN5pPg-","postfix":"VtnAk1HYMMk-","affixIcon":"uPLklxvtfJw-","suffix":"pYqqDvv57JE-","hasAction":"eI44oQpuVlk-","affixLabel":"jO8P2iSHilM-","description":"_2GfgzNnLOSI-","toolbar":"_3GtIRFCkZMg-"};
 
@@ -184,103 +184,104 @@ function FormFieldPostFix({ variation }) {
     return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon, { name: "arrowDown" })) : (React.createElement(Spinner, { size: "small" }))));
 }
 
-// Added 13th statement to accommodate getErrorMessage function
-/*eslint max-statements: ["error", 13]*/
 function FormField(props) {
-    var _a, _b;
-    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, inputRef, inline, keyboard, max, maxLength, min, name, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
-    const { control, formState: { errors }, setValue, watch, } = useFormContext() != undefined
+    // Warning: do not move useId into FormFieldInternal. This must be here to avoid
+    // a problem where useId isn't stable across multiple StrictMode renders.
+    // https://github.com/facebook/react/issues/27103
+    const id = useId();
+    return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
+}
+// eslint-disable-next-line max-statements
+function FormFieldInternal(props) {
+    var _a;
+    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
+    const { control, setValue, watch } = useFormContext() != undefined
         ? useFormContext()
         : // If there isn't a Form Context being provided, get a form for this field.
             useForm({ mode: "onTouched" });
-    const [identifier] = useState(useId());
-    const [descriptionIdentifier] = useState(`descriptionUUID--${useId()}`);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
     /**
      * Generate a name if one is not supplied, this is the name
      * that will be used for react-hook-form and not neccessarily
      * attached to the DOM
      */
-    const [controlledName] = useState(name ? name : `generatedName--${identifier}`);
+    const name = nameProp ? nameProp : `generatedName--${id}`;
     useEffect(() => {
         if (value != undefined) {
-            setValue(controlledName, value);
+            setValue(name, value);
         }
-    }, [value, watch(controlledName)]);
+    }, [value, watch(name)]);
     useImperativeHandle(actionsRef, () => ({
         setValue: newValue => {
-            setValue(controlledName, newValue, { shouldValidate: true });
+            setValue(name, newValue, { shouldValidate: true });
         },
     }));
-    const message = (_a = errors[controlledName]) === null || _a === void 0 ? void 0 : _a.message;
-    const error = getErrorMessage();
-    useEffect(() => handleValidation(), [error]);
-    return (React.createElement(Controller, { control: control, name: controlledName, rules: Object.assign({}, validations), defaultValue: (_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : "", render: (_a) => {
-            var _b = _a.field, { onChange: onControllerChange, onBlur: onControllerBlur, name: controllerName } = _b, rest = __rest(_b, ["onChange", "onBlur", "name"]);
-            const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id: identifier, className: styles$1.input, name: (validations || name) && controllerName, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
-                !inline && { "aria-describedby": descriptionIdentifier }));
-            const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
-            return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: error, identifier: identifier, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
-            function renderField() {
-                switch (type) {
-                    case "select":
-                        return (React.createElement(React.Fragment, null,
-                            React.createElement("select", Object.assign({}, fieldProps), children),
-                            React.createElement(FormFieldPostFix, { variation: "select" })));
-                    case "textarea":
-                        return (React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
-                    default:
-                        return (React.createElement(React.Fragment, null,
-                            React.createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef, onKeyUp: onKeyUp })),
-                            loading && React.createElement(FormFieldPostFix, { variation: "spinner" }),
-                            children));
-                }
-            }
-            function handleClear() {
-                var _a;
-                handleBlur();
-                setValue(controlledName, "", { shouldValidate: true });
-                onChange && onChange("");
-                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            function handleChange(event) {
-                let newValue;
-                newValue = event.currentTarget.value;
-                if (type === "number" && newValue.length > 0) {
-                    newValue = parseFloat(newValue);
-                }
-                onChange && onChange(newValue, event);
-                onControllerChange(event);
-            }
-            function handleKeyDown(event) {
-                if (!onEnter)
-                    return;
-                if (event.key !== "Enter")
-                    return;
-                if (event.shiftKey || event.ctrlKey)
-                    return;
-                event.preventDefault();
-                onEnter && onEnter(event);
-            }
-            function handleFocus(event) {
-                const target = event.currentTarget;
-                if (target.select) {
-                    setTimeout(() => readonly && target.select());
-                }
-                onFocus && onFocus();
-            }
-            function handleBlur() {
-                onBlur && onBlur();
-                onControllerBlur();
-            }
-        } }));
-    function getErrorMessage() {
-        if (typeof message === "string") {
-            return message;
+    const _b = useController({
+        name,
+        control,
+        rules: validations,
+        defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "",
+    }), _c = _b.field, { onChange: onControllerChange, onBlur: onControllerBlur } = _c, rest = __rest(_c, ["onChange", "onBlur"]), { fieldState: { error } } = _b;
+    const errorMessage = (error === null || error === void 0 ? void 0 : error.message) || "";
+    useEffect(() => handleValidation(errorMessage), [errorMessage]);
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id, className: styles$1.input, name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
+        !inline && { "aria-describedby": descriptionIdentifier }));
+    const textFieldProps = Object.assign(Object.assign({}, fieldProps), { autoFocus: autofocus, onKeyDown: handleKeyDown });
+    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: rest.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    function renderField() {
+        switch (type) {
+            case "select":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("select", Object.assign({}, fieldProps), children),
+                    React.createElement(FormFieldPostFix, { variation: "select" })));
+            case "textarea":
+                return (React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRef })));
+            default:
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRef, onKeyUp: onKeyUp })),
+                    loading && React.createElement(FormFieldPostFix, { variation: "spinner" }),
+                    children));
+        }
+    }
+    function handleClear() {
+        var _a;
+        handleBlur();
+        setValue(name, "", { shouldValidate: true });
+        onChange && onChange("");
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleChange(event) {
+        let newValue;
+        newValue = event.currentTarget.value;
+        if (type === "number" && newValue.length > 0) {
+            newValue = parseFloat(newValue);
         }
-        return "";
+        onChange && onChange(newValue, event);
+        onControllerChange(event);
+    }
+    function handleKeyDown(event) {
+        if (!onEnter)
+            return;
+        if (event.key !== "Enter")
+            return;
+        if (event.shiftKey || event.ctrlKey)
+            return;
+        event.preventDefault();
+        onEnter && onEnter(event);
+    }
+    function handleFocus(event) {
+        const target = event.currentTarget;
+        if (target.select) {
+            setTimeout(() => readonly && target.select());
+        }
+        onFocus && onFocus();
+    }
+    function handleBlur() {
+        onBlur && onBlur();
+        onControllerBlur();
     }
-    function handleValidation() {
-        onValidation && onValidation(error);
+    function handleValidation(message) {
+        onValidation && onValidation(message);
     }
 }
 function setAutocomplete(autocompleteSetting) {