@jobber/components 6.26.1 → 6.26.3

package/dist/Button/ButtonProvider.d.ts

@@ -6,5 +6,5 @@ interface ButtonContextProps {
 export declare function ButtonProvider({ children, size, }: PropsWithChildren<{
     readonly size?: ButtonSize;
 }>): JSX.Element;
-export declare function useButton(): ButtonContextProps;
+export declare function useButtonContext(): ButtonContextProps;
 export {};

package/dist/Button/index.cjs

@@ -12,5 +12,5 @@ require('../Typography-cjs.js');
 
 
 exports.Button = Button.Button;
-exports.useButton = Button.useButton;
+exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;

package/dist/Button/index.d.ts

@@ -1,4 +1,4 @@
 export { Button } from "./Button";
 export * from "./Button.types";
 export { useButtonStyles, UseButtonStylesProps } from "./useButtonStyles";
-export { useButton } from "./ButtonProvider";
+export { useButtonContext } from "./ButtonProvider";

package/dist/Button/index.mjs

@@ -1,4 +1,4 @@
-export { B as Button, a as useButton, u as useButtonStyles } from '../Button-es.js';
+export { B as Button, a as useButtonContext, u as useButtonStyles } from '../Button-es.js';
 import 'react';
 import 'react-router-dom';
 import 'classnames';

package/dist/Button-cjs.js

@@ -15,12 +15,12 @@ const ButtonContext = React.createContext({
 function ButtonProvider({ children, size = "base", }) {
     return (React.createElement(ButtonContext.Provider, { value: { size } }, children));
 }
-function useButton() {
+function useButtonContext() {
     return React.useContext(ButtonContext);
 }
 
 function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation = "work", type = "primary", }) {
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     const wrapper = classnames([styles.button, styles[size], styles[variation], styles[type]], {
         [styles.disabled]: disabled,
@@ -57,13 +57,13 @@ function getTypeSizes(size) {
 }
 function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return React.createElement(Icon.Icon, Object.assign({}, props, { size: size }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = tslib_es6.__rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return (React.createElement(Typography.Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
 }
@@ -90,5 +90,5 @@ Button.Label = ButtonLabel;
 Button.Icon = ButtonIcon;
 
 exports.Button = Button;
-exports.useButton = useButton;
+exports.useButtonContext = useButtonContext;
 exports.useButtonStyles = useButtonStyles;

package/dist/Button-es.js

@@ -13,12 +13,12 @@ const ButtonContext = createContext({
 function ButtonProvider({ children, size = "base", }) {
     return (React__default.createElement(ButtonContext.Provider, { value: { size } }, children));
 }
-function useButton() {
+function useButtonContext() {
     return useContext(ButtonContext);
 }
 
 function useButtonStyles({ size: sizeProp, disabled, fullWidth, loading, variation = "work", type = "primary", }) {
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     const wrapper = classnames([styles.button, styles[size], styles[variation], styles[type]], {
         [styles.disabled]: disabled,
@@ -55,13 +55,13 @@ function getTypeSizes(size) {
 }
 function ButtonIcon(_a) {
     var { size: sizeProp } = _a, props = __rest(_a, ["size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return React__default.createElement(Icon, Object.assign({}, props, { size: size }));
 }
 function ButtonLabel(_a) {
     var { element = "span", fontWeight = "semiBold", fontFamily = "base", size: sizeProp } = _a, props = __rest(_a, ["element", "fontWeight", "fontFamily", "size"]);
-    const { size: contextSize } = useButton();
+    const { size: contextSize } = useButtonContext();
     const size = sizeProp || contextSize;
     return (React__default.createElement(Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
 }
@@ -87,4 +87,4 @@ function ButtonWrapper(props) {
 Button.Label = ButtonLabel;
 Button.Icon = ButtonIcon;
 
-export { Button as B, useButton as a, useButtonStyles as u };
+export { Button as B, useButtonContext as a, useButtonStyles as u };

package/dist/FormField/FormFieldTypes.d.ts

@@ -202,5 +202,11 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * Determines the visibility of the toolbar.
      */
     readonly toolbarVisibility?: "always" | "while-editing";
+    /**
+     * Pattern is currently only used for the InputPhone type
+     * it is used to determine the format of the phone number
+     * and the number of digits to expect.
+     */
+    readonly pattern?: string;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
 import { UseControllerReturn } from "react-hook-form";
 import type { FormFieldProps, KeyBoardTypes } from "../FormFieldTypes";
-export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "description" | "disabled" | "readonly" | "inline" | "autofocus"> {
+export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "description" | "disabled" | "readonly" | "inline" | "autofocus" | "pattern" | "type" | "value"> {
     /**
      * The html id for the field
      */
@@ -57,7 +57,7 @@ export interface useAtlantisFormFieldProps extends Pick<FormFieldProps, "descrip
 /**
  * Provides the props for the html fields rendered by the FormField component
  */
-export declare function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }: useAtlantisFormFieldProps): {
+export declare function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, pattern, type, value, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }: useAtlantisFormFieldProps): {
     textFieldProps: {
         autoFocus: boolean | undefined;
         onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;

package/dist/FormField-cjs.js

@@ -33,7 +33,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -316,14 +316,19 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
 /**
  * Provides the props for the html fields rendered by the FormField component
  */
-function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
+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: styles$1.input, name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(styles$1.input, {
+            [styles$1.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] === "(";
+}
 
 function useAtlantisFormFieldName({ id, nameProp, }) {
     /**
@@ -397,7 +402,7 @@ function FormField(props) {
     return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
-    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 { 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,
@@ -432,6 +437,9 @@ function FormFieldInternal(props) {
         readonly,
         keyboard,
         autofocus,
+        value,
+        type,
+        pattern,
         handleChange,
         handleBlur,
         handleFocus,

package/dist/FormField-es.js

@@ -31,7 +31,7 @@ function useShowClear({ clearable, multiline, focused, hasValue, disabled = fals
     }
 }
 
-var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
+var styles$1 = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","disabled":"Tz9LK9ABKMk-","small":"Sw5O4I0lMJg-","inline":"SaORbL7SYWY-","center":"ozy2UoT2vsg-","right":"_3TJdT91YD3c-","maxLength":"W6GrMqLy2qk-","inputWrapper":"-LmjnYRU0r0-","childrenWrapper":"yVXYv6hkuOA-","input":"vtSDcuzNr9Q-","emptyPhoneNumber":"MVhuQuzUBUs-","label":"Dgk00tzlODA-","select":"NwQGiWBWIsc-","externalLabel":"Qb8zQ8n-8vc-","postfix":"yTDzs9h1otI-","affixIcon":"m0YpdssD2dY-","suffix":"_-3mMnjSh6ok-","hasAction":"OLE9N3Uem4o-","affixLabel":"-Wzcb0pBh5I-","description":"DHX5ijY3xIw-","toolbar":"AL-2brNI7dk-","spinning":"_8Rzv7CcDW80-"};
 
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
@@ -314,14 +314,19 @@ function useAtlantisFormFieldActions({ name, onChange, inputRef, onControllerCha
 /**
  * Provides the props for the html fields rendered by the FormField component
  */
-function useAtlantisFormField({ id, nameProp, name, useControllerField: useControllerField, description, disabled, readonly, keyboard, autofocus, handleChange, handleBlur, handleFocus, inline, validations, handleKeyDown, handleValidation, errorMessage, }) {
+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: styles$1.input, name: (validations || nameProp) && name, disabled: disabled, readOnly: readonly, inputMode: keyboard, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, autoFocus: autofocus }), (description &&
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, useControllerField), { id, className: classnames(styles$1.input, {
+            [styles$1.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] === "(";
+}
 
 function useAtlantisFormFieldName({ id, nameProp, }) {
     /**
@@ -395,7 +400,7 @@ function FormField(props) {
     return React__default.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
-    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 { 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,
@@ -430,6 +435,9 @@ function FormFieldInternal(props) {
         readonly,
         keyboard,
         autofocus,
+        value,
+        type,
+        pattern,
         handleChange,
         handleBlur,
         handleFocus,

package/dist/InputDate/index.cjs

@@ -3,11 +3,11 @@
 var React = require('react');
 var omit = require('../omit-cjs.js');
 var FormField = require('../FormField-cjs.js');
+require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
 var DatePicker = require('../DatePicker-cjs.js');
 var InputText_index = require('../InputText/index.cjs');

package/dist/InputDate/index.mjs

@@ -1,11 +1,11 @@
 import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
 import { o as omit } from '../omit-es.js';
 import { k as FormField } from '../FormField-es.js';
+import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
 import { D as DatePicker } from '../DatePicker-es.js';
 import { InputText } from '../InputText/index.mjs';

package/dist/InputEmail-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 const validationMessage = "Please enter a valid email";

package/dist/InputEmail-es.js

@@ -1,10 +1,10 @@
 import React__default from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 const validationMessage = "Please enter a valid email";

package/dist/InputNumber-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 function InputNumberInternal(props, ref) {

package/dist/InputNumber-es.js

@@ -1,10 +1,10 @@
 import React__default, { forwardRef, createRef, useImperativeHandle } from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 function InputNumberInternal(props, ref) {

package/dist/InputPassword-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 function InputPassword(props) {

package/dist/InputPassword-es.js

@@ -1,10 +1,10 @@
 import React__default, { useState } from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 function InputPassword(props) {

package/dist/InputPhoneNumber-cjs.js

@@ -4,9 +4,9 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
@@ -73,7 +73,7 @@ function InputPhoneNumber(_a) {
         : // If there isn't a Form Context being provided, get a form for this field.
             reactHookForm.useForm({ mode: "onTouched" });
     return (React.createElement(InputMask, { pattern: pattern, strict: false },
-        React.createElement(FormField.FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
+        React.createElement(FormField.FormField, Object.assign({}, props, { type: "tel", pattern: pattern, validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
                     message: `${errorSubject} is required`,
                 } }, validations), { validate: getPhoneNumberValidation }) }))));

package/dist/InputPhoneNumber-es.js

@@ -2,9 +2,9 @@ import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, cloneElement } from 'react';
 import { useFormContext, useForm } from 'react-hook-form';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 var styles = {"mask":"_78-Lxj78xPg-","hiddenValue":"GoiXVXaU1Qs-","spinning":"T3VvmDmzs-4-"};
@@ -71,7 +71,7 @@ function InputPhoneNumber(_a) {
         : // If there isn't a Form Context being provided, get a form for this field.
             useForm({ mode: "onTouched" });
     return (React__default.createElement(InputMask, { pattern: pattern, strict: false },
-        React__default.createElement(FormField, Object.assign({}, props, { type: "tel", validations: Object.assign(Object.assign({ required: {
+        React__default.createElement(FormField, Object.assign({}, props, { type: "tel", pattern: pattern, validations: Object.assign(Object.assign({ required: {
                     value: Boolean(required),
                     message: `${errorSubject} is required`,
                 } }, validations), { validate: getPhoneNumberValidation }) }))));

package/dist/InputText/index.cjs

@@ -3,11 +3,11 @@
 var React = require('react');
 var useSafeLayoutEffect = require('../useSafeLayoutEffect-cjs.js');
 var FormField = require('../FormField-cjs.js');
+require('classnames');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('../Button-cjs.js');
 var omit = require('../omit-cjs.js');
 require('../Icon-cjs.js');

package/dist/InputText/index.mjs

@@ -1,11 +1,11 @@
 import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
 import { u as useSafeLayoutEffect_1 } from '../useSafeLayoutEffect-es.js';
 import { k as FormField, s as styles, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix, m as mergeRefs } from '../FormField-es.js';
+import 'classnames';
 import { _ as __rest } from '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import '../Button-es.js';
 import { o as omit } from '../omit-es.js';
 import '../Icon-es.js';

package/dist/InputTime-cjs.js

@@ -4,10 +4,10 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var debounce = require('./debounce-cjs.js');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 const DEBOUNCE_TIME = 300;

package/dist/InputTime-es.js

@@ -2,10 +2,10 @@ import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useCallback, useEffect, useRef } from 'react';
 import { d as debounce } from './debounce-es.js';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 const DEBOUNCE_TIME = 300;

package/dist/Option-cjs.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var FormField = require('./FormField-cjs.js');
+require('classnames');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
-require('classnames');
 require('./Button-cjs.js');
 
 function Select(props) {

package/dist/Option-es.js

@@ -1,10 +1,10 @@
 import React__default from 'react';
 import { k as FormField } from './FormField-es.js';
+import 'classnames';
 import './tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
-import 'classnames';
 import './Button-es.js';
 
 function Select(props) {

package/dist/Select/Select.d.ts

@@ -5,6 +5,6 @@ import { FormFieldProps } from "../FormField";
  * Unfortunately Docz doesn't currently support Omit so it has been reduced to
  * its component parts.
  */
-type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef" | "clearable">>;
+type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef" | "clearable" | "pattern">>;
 export declare function Select(props: SelectProps): JSX.Element;
 export {};

package/dist/index.cjs

@@ -197,7 +197,7 @@ exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;
 exports.Button = Button.Button;
-exports.useButton = Button.useButton;
+exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;
 exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
 exports.Card = Card.Card;

package/dist/index.mjs

@@ -16,7 +16,7 @@ import 'react-dom';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
 export { B as Box } from './Box-es.js';
-export { B as Button, a as useButton, u as useButtonStyles } from './Button-es.js';
+export { B as Button, a as useButtonContext, u as useButtonStyles } from './Button-es.js';
 export { B as ButtonDismiss } from './ButtonDismiss-es.js';
 export { C as Card } from './Card-es.js';
 export { Checkbox } from './Checkbox/index.mjs';

package/dist/styles.css

@@ -877,6 +877,11 @@
   outline: none;
 }
 
+.MVhuQuzUBUs- {
+  padding-left: calc(var(--field--padding-left) + 4px);
+  padding-left: calc(var(--field--padding-left) + var(--space-smaller));
+}
+
 .hGr6YW4AeLM- .yVXYv6hkuOA- {
   display: -ms-flexbox;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.26.1",
+  "version": "6.26.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c6e2e145a9e31df7d2ae1e70d1b7c4d3ac3b1dbf"
+  "gitHead": "c4962eacf97393ea78117f7dc77392f1a694c075"
 }