@jobber/components 8.6.0 → 8.7.0

package/dist/FormField/hooks/useAtlantisReactHookForm.d.ts

@@ -1,20 +0,0 @@
-import type { FormFieldProps } from "../FormFieldTypes";
-interface useAtlantisReactHookFormProps extends Pick<FormFieldProps, "actionsRef" | "defaultValue" | "value" | "validations" | "inputRef"> {
-    name: string;
-}
-/**
- * Hook used to manage the form state of a field through react-hook-form
- */
-export declare function useAtlantisReactHookForm({ actionsRef, name, defaultValue, value, validations, inputRef, }: useAtlantisReactHookFormProps): {
-    inputRefs: import("react").RefCallback<any>;
-    useControllerField: {
-        value: any;
-        disabled?: boolean;
-        name: string;
-    };
-    setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;
-    errorMessage: string;
-    onControllerChange: (...event: any[]) => void;
-    onControllerBlur: import("react-hook-form").Noop;
-};
-export {};

package/dist/FormField-cjs.js

@@ -1,209 +0,0 @@
-'use strict';
-
-var React = require('react');
-var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
-var FormFieldPostFix = require('./FormFieldPostFix-cjs.js');
-var classnames = require('classnames');
-var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
-var tslib_es6 = require('./tslib.es6-cjs.js');
-var reactHookForm = require('react-hook-form');
-var mergeRefs = require('./mergeRefs-cjs.js');
-
-/**
- * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
- * manage the form state of a field through react-hook-form while providing support for additional callbacks
- */
-function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerChange, onControllerBlur, onEnter, readonly, type, setValue, onFocus, onBlur, onValidation, }) {
-    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);
-        }
-        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(message) {
-        onValidation && onValidation(message);
-    }
-    return {
-        handleClear,
-        handleChange,
-        handleKeyDown,
-        handleFocus,
-        handleBlur,
-        handleValidation,
-    };
-}
-
-/**
- * Provides the props for the html fields rendered by the FormField component
- */
-function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(FormFieldWrapper.formFieldStyles.input, {
-            [FormFieldWrapper.formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
-        }), 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 });
-    React.useEffect(() => handleValidation(errorMessage), [errorMessage]);
-    return { textFieldProps, fieldProps, descriptionIdentifier };
-}
-function shouldAddPhoneNumberClass(type, value, pattern) {
-    return type === "tel" && !value && pattern && pattern[0] === "(";
-}
-
-/**
- * Hook used to manage the form state of a field through react-hook-form
- */
-function useAtlantisReactHookForm({ actionsRef, name, defaultValue, value, validations, inputRef, }) {
-    var _a;
-    const formContext = reactHookForm.useFormContext();
-    // If there isn't a Form Context being provided, get a form for this field.
-    const { control, setValue, watch } = formContext !== null && formContext !== void 0 ? formContext : reactHookForm.useForm({ mode: "onTouched" });
-    React.useImperativeHandle(actionsRef, () => ({
-        setValue: newValue => {
-            setValue(name, newValue, { shouldValidate: true });
-        },
-    }));
-    const { field, fieldState: { error }, } = reactHookForm.useController({
-        name,
-        control,
-        rules: validations,
-        defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "",
-    });
-    const { onChange, onBlur, ref: fieldRef } = field, useControllerField = tslib_es6.__rest(field, ["onChange", "onBlur", "ref"]);
-    React.useEffect(() => {
-        if (value != undefined) {
-            setValue(name, value);
-        }
-    }, [value, watch(name)]);
-    const inputRefs = mergeRefs.mergeRefs([inputRef, fieldRef]);
-    return {
-        inputRefs,
-        useControllerField,
-        setValue,
-        errorMessage: (error === null || error === void 0 ? void 0 : error.message) || "",
-        onControllerChange: onChange,
-        onControllerBlur: onBlur,
-    };
-}
-
-function FormField(props) {
-    // 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 generatedId = React.useId();
-    const id = props.id || generatedId;
-    return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
-}
-function FormFieldInternal(props) {
-    var _a;
-    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
-    const { name } = useAtlantisFormFieldName.useAtlantisFormFieldName({ id, nameProp });
-    const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
-        actionsRef,
-        name,
-        defaultValue,
-        value,
-        validations,
-        inputRef,
-    });
-    const { handleValidation, handleBlur, handleChange, handleClear, handleFocus, handleKeyDown, } = useAtlantisFormFieldActions({
-        inputRef,
-        onChange,
-        onEnter,
-        readonly,
-        type,
-        onFocus,
-        setValue,
-        onBlur,
-        onValidation,
-        onControllerBlur,
-        onControllerChange,
-        name,
-    });
-    const { textFieldProps, fieldProps, descriptionIdentifier } = useAtlantisFormField({
-        id,
-        useControllerField,
-        name,
-        nameProp,
-        description,
-        validations: !!validations,
-        disabled,
-        readonly,
-        keyboard,
-        autofocus,
-        value,
-        type,
-        pattern,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        inline,
-        errorMessage,
-        handleValidation,
-        handleKeyDown,
-    });
-    // Ensure focus tracking works by providing a wrapperRef when none is passed
-    const internalWrapperRef = React.useRef(null);
-    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
-    return (React.createElement(FormFieldWrapper.FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
-    function renderField() {
-        switch (type) {
-            case "select":
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("select", Object.assign({}, fieldProps), children),
-                    React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "select" })));
-            case "textarea":
-                return React.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRefs }));
-            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: inputRefs, onKeyUp: onKeyUp })),
-                    loading && React.createElement(FormFieldPostFix.FormFieldPostFix, { variation: "spinner" }),
-                    children));
-        }
-    }
-}
-function setAutocomplete(autocompleteSetting) {
-    if (autocompleteSetting === true) {
-        return undefined;
-    }
-    else if (autocompleteSetting === false) {
-        return "off";
-    }
-    return autocompleteSetting;
-}
-
-exports.FormField = FormField;
-exports.useAtlantisFormField = useAtlantisFormField;
-exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
-exports.useAtlantisReactHookForm = useAtlantisReactHookForm;

package/dist/FormField-es.js

@@ -1,204 +0,0 @@
-import React__default, { useEffect, useImperativeHandle, useId, useRef } from 'react';
-import { g as formFieldStyles, c as FormFieldWrapper } from './FormFieldWrapper-es.js';
-import { F as FormFieldPostFix } from './FormFieldPostFix-es.js';
-import classnames from 'classnames';
-import { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
-import { _ as __rest } from './tslib.es6-es.js';
-import { useFormContext, useForm, useController } from 'react-hook-form';
-import { m as mergeRefs } from './mergeRefs-es.js';
-
-/**
- * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
- * manage the form state of a field through react-hook-form while providing support for additional callbacks
- */
-function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerChange, onControllerBlur, onEnter, readonly, type, setValue, onFocus, onBlur, onValidation, }) {
-    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);
-        }
-        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(message) {
-        onValidation && onValidation(message);
-    }
-    return {
-        handleClear,
-        handleChange,
-        handleKeyDown,
-        handleFocus,
-        handleBlur,
-        handleValidation,
-    };
-}
-
-/**
- * Provides the props for the html fields rendered by the FormField component
- */
-function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(formFieldStyles.input, {
-            [formFieldStyles.emptyPhoneNumber]: shouldAddPhoneNumberClass(type, value, pattern),
-        }), 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 });
-    useEffect(() => handleValidation(errorMessage), [errorMessage]);
-    return { textFieldProps, fieldProps, descriptionIdentifier };
-}
-function shouldAddPhoneNumberClass(type, value, pattern) {
-    return type === "tel" && !value && pattern && pattern[0] === "(";
-}
-
-/**
- * Hook used to manage the form state of a field through react-hook-form
- */
-function useAtlantisReactHookForm({ actionsRef, name, defaultValue, value, validations, inputRef, }) {
-    var _a;
-    const formContext = useFormContext();
-    // If there isn't a Form Context being provided, get a form for this field.
-    const { control, setValue, watch } = formContext !== null && formContext !== void 0 ? formContext : useForm({ mode: "onTouched" });
-    useImperativeHandle(actionsRef, () => ({
-        setValue: newValue => {
-            setValue(name, newValue, { shouldValidate: true });
-        },
-    }));
-    const { field, fieldState: { error }, } = useController({
-        name,
-        control,
-        rules: validations,
-        defaultValue: (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : "",
-    });
-    const { onChange, onBlur, ref: fieldRef } = field, useControllerField = __rest(field, ["onChange", "onBlur", "ref"]);
-    useEffect(() => {
-        if (value != undefined) {
-            setValue(name, value);
-        }
-    }, [value, watch(name)]);
-    const inputRefs = mergeRefs([inputRef, fieldRef]);
-    return {
-        inputRefs,
-        useControllerField,
-        setValue,
-        errorMessage: (error === null || error === void 0 ? void 0 : error.message) || "",
-        onControllerChange: onChange,
-        onControllerBlur: onBlur,
-    };
-}
-
-function FormField(props) {
-    // 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 generatedId = useId();
-    const id = props.id || generatedId;
-    return React__default.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
-}
-function FormFieldInternal(props) {
-    var _a;
-    const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
-    const { name } = useAtlantisFormFieldName({ id, nameProp });
-    const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
-        actionsRef,
-        name,
-        defaultValue,
-        value,
-        validations,
-        inputRef,
-    });
-    const { handleValidation, handleBlur, handleChange, handleClear, handleFocus, handleKeyDown, } = useAtlantisFormFieldActions({
-        inputRef,
-        onChange,
-        onEnter,
-        readonly,
-        type,
-        onFocus,
-        setValue,
-        onBlur,
-        onValidation,
-        onControllerBlur,
-        onControllerChange,
-        name,
-    });
-    const { textFieldProps, fieldProps, descriptionIdentifier } = useAtlantisFormField({
-        id,
-        useControllerField,
-        name,
-        nameProp,
-        description,
-        validations: !!validations,
-        disabled,
-        readonly,
-        keyboard,
-        autofocus,
-        value,
-        type,
-        pattern,
-        handleChange,
-        handleBlur,
-        handleFocus,
-        inline,
-        errorMessage,
-        handleValidation,
-        handleKeyDown,
-    });
-    // Ensure focus tracking works by providing a wrapperRef when none is passed
-    const internalWrapperRef = useRef(null);
-    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
-    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
-    function renderField() {
-        switch (type) {
-            case "select":
-                return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("select", Object.assign({}, fieldProps), children),
-                    React__default.createElement(FormFieldPostFix, { variation: "select" })));
-            case "textarea":
-                return React__default.createElement("textarea", Object.assign({}, textFieldProps, { rows: rows, ref: inputRefs }));
-            default:
-                return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("input", Object.assign({}, textFieldProps, { autoComplete: setAutocomplete(autocomplete), type: type, maxLength: maxLength, max: max, min: min, ref: inputRefs, onKeyUp: onKeyUp })),
-                    loading && React__default.createElement(FormFieldPostFix, { variation: "spinner" }),
-                    children));
-        }
-    }
-}
-function setAutocomplete(autocompleteSetting) {
-    if (autocompleteSetting === true) {
-        return undefined;
-    }
-    else if (autocompleteSetting === false) {
-        return "off";
-    }
-    return autocompleteSetting;
-}
-
-export { FormField as F, useAtlantisFormFieldActions as a, useAtlantisReactHookForm as b, useAtlantisFormField as u };

package/dist/InputPassword/InputPassword.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
-interface InputPasswordProps extends CommonFormFieldProps, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "defaultValue"> {
-    readonly value?: string;
-    onChange?(newValue: string): void;
-    /**
-     * Display toggle to change the visibility of the password input
-     * @default false
-     */
-    readonly hasVisibility?: boolean;
-}
-export declare function InputPassword(props: InputPasswordProps): React.JSX.Element;
-export {};

package/dist/InputPassword/index.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-var InputPassword = require('../InputPassword-cjs.js');
-require('react');
-require('../FormField-cjs.js');
-require('../FormFieldWrapper-cjs.js');
-require('@jobber/hooks');
-require('framer-motion');
-require('@jobber/design');
-require('classnames');
-require('../Button-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react-router-dom');
-require('../Icon-cjs.js');
-require('../Typography-cjs.js');
-require('../Text-cjs.js');
-require('../useFormFieldFocus-cjs.js');
-require('../InputValidation-cjs.js');
-require('../FormFieldPostFix-cjs.js');
-require('../Spinner-cjs.js');
-require('../useAtlantisFormFieldName-cjs.js');
-require('react-hook-form');
-require('../mergeRefs-cjs.js');
-
-
-
-exports.InputPassword = InputPassword.InputPassword;

package/dist/InputPassword/index.d.ts

@@ -1 +0,0 @@
-export { InputPassword } from "./InputPassword";

package/dist/InputPassword/index.mjs

@@ -1,21 +0,0 @@
-export { I as InputPassword } from '../InputPassword-es.js';
-import 'react';
-import '../FormField-es.js';
-import '../FormFieldWrapper-es.js';
-import '@jobber/hooks';
-import 'framer-motion';
-import '@jobber/design';
-import 'classnames';
-import '../Button-es.js';
-import '../tslib.es6-es.js';
-import 'react-router-dom';
-import '../Icon-es.js';
-import '../Typography-es.js';
-import '../Text-es.js';
-import '../useFormFieldFocus-es.js';
-import '../InputValidation-es.js';
-import '../FormFieldPostFix-es.js';
-import '../Spinner-es.js';
-import '../useAtlantisFormFieldName-es.js';
-import 'react-hook-form';
-import '../mergeRefs-es.js';

package/dist/InputPassword-cjs.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var React = require('react');
-var FormField = require('./FormField-cjs.js');
-require('classnames');
-require('./tslib.es6-cjs.js');
-require('react-hook-form');
-require('@jobber/hooks');
-require('framer-motion');
-require('@jobber/design');
-require('./Button-cjs.js');
-
-function InputPassword(props) {
-    const { hasVisibility = false } = props;
-    const [visible, setVisibility] = React.useState(false);
-    return (React.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/InputPassword-es.js

@@ -1,26 +0,0 @@
-import React__default, { useState } from 'react';
-import { F as FormField } from './FormField-es.js';
-import 'classnames';
-import './tslib.es6-es.js';
-import 'react-hook-form';
-import '@jobber/hooks';
-import 'framer-motion';
-import '@jobber/design';
-import './Button-es.js';
-
-function InputPassword(props) {
-    const { hasVisibility = false } = props;
-    const [visible, setVisibility] = useState(false);
-    return (React__default.createElement(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);
-    }
-}
-
-export { InputPassword as I };

package/dist/docs/Form/Form.md

@@ -1,106 +0,0 @@
-# Form
-
-The Form component is a wrapper component that handles the submission and
-validation of forms.
-
-For more information about `validations` using any of the Input components, see
-the [InputText](../InputText/InputText.md) documentation.
-
-## Design & usages guidelines
-
-The Form component has a lot of built-in features which rely on its internal
-state. To take advantage of these features, do not bypass the Form's internal
-state — the fields or inputs within the Form must have a `name` prop and **NOT**
-have a `value` and `onChange` prop.
-
-## Content guidelines
-
-### Inputs
-
-Form can accept various inputs and selection elements such as (but not limited
-to) [InputText](../InputText/InputText.md), [Select](../Select/Select.md),
-[Switch](../Switch/Switch.md), [Checkbox](../Checkbox/Checkbox.md), and
-[Chips](../Chips/Chips.md). They should be placed [Cards](../Card/Card.md) to
-indicate grouping when relevant, and groups of Cards can be spaced appropriately
-using ContentSection.
-
-### Save Button label
-
-The `saveButtonLabel` property defaults to "Save", but should be made more
-verbose to add context for the user. Use the format "Save {object}", such as
-"Save Job". This helps clarify to the user that tapping the Save Button is not
-saving the single input they are editing, but the entire object.
-
-### Form errors
-
-All error messaging should follow our
-[Product Vocabulary.](/content/product-vocabulary)
-
-## Setup (mobile)
-
-Consuming apps using the mobile Form must wrap their app root with
-`KeyboardProvider` from `react-native-keyboard-controller`.
-
-## Accessibility (mobile)
-
-The individual inputs are responsible for accessibility concerns such as the
-labels, types, values, and error messages of each input.
-
-
-## Platform considerations
-
-#### iOS
-
-On iOS, the save button will be fixed to the bottom of the viewport until the
-keyboard is opened.
-
-Once the keyboard is open, the save button will be inline beneath the Form's
-inputs, unless the Form is so short that it does not scroll. In this case, the
-save button will remain fixed above the keyboard.
-
-This prevents the user from accidentally submitting the Form before they have
-completed entering all the relevant information for their work, especially since
-many data points in Jobber cannot be edited once saved.
-
-#### Android
-
-On Android, the save button will always be inline with the contents of the Form.
-
-### Error handling
-
-#### Server-side errors
-
-Server-side error messages will be displayed in a banner at the top the Form
-upon a failed submission attempt. These are errors where something has gone
-wrong with the data either on the way to, or on the way back from, our servers.
-If the user can address the errors, inform them how to do so in the banner.
-Otherwise, a generic message informing the user that something went wrong is an
-appropriate fallback.
-
-Note: When a server-side error happens, inside the `onSubmit` function, an error
-must be thrown. Throwing an error inside the `onSubmit` function will ensure
-that your `onSubmitError` function is called instead of your `onSubmitSuccess`.
-
-#### Client-side errors
-
-Client-side errors are issues that we can catch and inform the user of before
-they attempt to submit the Form, such as a required field left blank or an
-incorrect email address format.
-
-Error messages for individual inputs should appear inline on each impacted
-input. Form will automatically scroll to the first invalid (has an error)
-element and display the error message.
-
-When an error occurs, either server-side or client-side, Form will announce the
-message to screen-readers and set focus to the impacted portion of the Form.
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `onStateChange` | `(formState: { isDirty: boolean; isValid: boolean; }) => void` | No | — |  |
-| `onSubmit` | `() => void` | No | — | Callback for when the form has been sucessfully submitted. |
-| `ref` | `Ref<FormRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |