@jobber/components 6.103.2-JOB-140609-9051081.26 → 6.103.2-JOB-141426-1b49367.0

package/dist/FormField/FormFieldTypes.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes, ChangeEvent, ReactNode, RefObject } from "react";
+import type { ChangeEvent, ReactNode, RefObject } from "react";
 import type React from "react";
 import type { RegisterOptions } from "react-hook-form";
 import type { XOR } from "ts-xor";
@@ -7,222 +7,6 @@ import type { IconNames } from "../Icon";
 export type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "tel" | "email";
 export type KeyBoardTypes = "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
 export type AutocompleteTypes = "one-time-code" | "address-line1" | "address-line2";
-/**
- * Core ARIA attributes for input elements.
- * Uses camelCase naming for consistency with React props pattern.
- * Based on React's canonical ARIA type definitions.
- */
-export interface AriaInputProps {
-    /**
-     * Defines a string value that labels the current element.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label}
-     */
-    readonly ariaLabel?: AriaAttributes["aria-label"];
-    /**
-     * Identifies the element (or elements) that labels the current element.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-labelledby}
-     */
-    readonly ariaLabelledBy?: AriaAttributes["aria-labelledby"];
-    /**
-     * Identifies the element (or elements) that describes the object.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-describedby}
-     */
-    readonly ariaDescribedBy?: AriaAttributes["aria-describedby"];
-    /**
-     * Identifies the element (or elements) that provide a detailed, extended description.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-details}
-     */
-    readonly ariaDetails?: AriaAttributes["aria-details"];
-    /**
-     * ID of the currently active descendant element.
-     * Used for composite widgets like combobox or listbox.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-activedescendant}
-     */
-    readonly ariaActiveDescendant?: AriaAttributes["aria-activedescendant"];
-    /**
-     * Indicates the entered value does not conform to the format expected.
-     * Supports boolean or specific error types: "grammar" | "spelling".
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-invalid}
-     */
-    readonly ariaInvalid?: AriaAttributes["aria-invalid"];
-    /**
-     * Indicates the element that controls the current element.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls}
-     */
-    readonly ariaControls?: AriaAttributes["aria-controls"];
-    /**
-     * Indicates whether the element is expanded or collapsed.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded}
-     */
-    readonly ariaExpanded?: AriaAttributes["aria-expanded"];
-    /**
-     * Indicates the type of autocomplete interaction.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete}
-     */
-    readonly ariaAutocomplete?: AriaAttributes["aria-autocomplete"];
-    /**
-     * Indicates that user input is required before form submission.
-     * @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-required}
-     */
-    readonly ariaRequired?: AriaAttributes["aria-required"];
-}
-/**
- * Focus event handlers for input elements.
- * Generic interface that can be specialized for different element types.
- */
-export interface FocusEvents<Target = HTMLElement> {
-    /**
-     * Focus event handler.
-     */
-    readonly onFocus?: (event: React.FocusEvent<Target>) => void;
-    /**
-     * Blur event handler.
-     */
-    readonly onBlur?: (event: React.FocusEvent<Target>) => void;
-}
-/**
- * Keyboard event handlers for input elements.
- * Generic interface that can be specialized for different element types.
- */
-export interface KeyboardEvents<Target = HTMLElement> {
-    /**
-     * Key down event handler.
-     */
-    readonly onKeyDown?: (event: React.KeyboardEvent<Target>) => void;
-    /**
-     * Key up event handler.
-     */
-    readonly onKeyUp?: (event: React.KeyboardEvent<Target>) => void;
-}
-/**
- * Curated set of HTML input attributes for rebuilt input components.
- * This provides a whitelist of standard HTML/React props we want to support,
- * avoiding the issues of extending React.InputHTMLAttributes directly.
- * Note: Event handlers and ARIA attributes are separate - use FocusEvents, KeyboardEvents, and AriaInputProps.
- */
-export interface HTMLInputBaseProps extends AriaInputProps {
-    /**
-     * The unique identifier for the input element.
-     */
-    readonly id?: string;
-    /**
-     * The name attribute for the input element.
-     */
-    readonly name?: string;
-    /**
-     * Placeholder text that appears when the input is empty.
-     */
-    readonly placeholder?: string;
-    /**
-     * Whether the input is disabled.
-     */
-    readonly disabled?: boolean;
-    /**
-     * Whether the input is required.
-     */
-    readonly required?: boolean;
-    /**
-     * Whether the input is read-only (HTML standard casing).
-     */
-    readonly readOnly?: boolean;
-    /**
-     * Whether the input should be auto-focused (React casing).
-     */
-    readonly autoFocus?: boolean;
-    /**
-     * Autocomplete behavior for the input (React casing, string values only).
-     * Use standard HTML autocomplete values or "on"/"off".
-     */
-    readonly autoComplete?: string;
-    /**
-     * Maximum character length for the input (HTML validation only).
-     * Note: In v2, this does NOT affect the visual width of the component.
-     * Use CSS or the size prop for width control.
-     */
-    readonly maxLength?: number;
-    /**
-     * Minimum character length for the input.
-     */
-    readonly minLength?: number;
-    /**
-     * Maximum numerical value (for number inputs).
-     */
-    readonly max?: number | string;
-    /**
-     * Minimum numerical value (for number inputs).
-     */
-    readonly min?: number | string;
-    /**
-     * Validation pattern (regex) for the input.
-     */
-    readonly pattern?: string;
-    /**
-     * Input mode hint for virtual keyboards.
-     */
-    readonly inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-    /**
-     * Role attribute for accessibility.
-     */
-    readonly role?: string;
-    /**
-     * Tab index for keyboard navigation.
-     */
-    readonly tabIndex?: number;
-}
-/**
- * Common props shared across all rebuilt input components.
- * These are Atlantis-specific features not part of standard HTML inputs.
- */
-export interface RebuiltInputCommonProps {
-    /**
-     * Error message to display. This also highlights the field red.
-     */
-    readonly error?: string;
-    /**
-     * Highlights the field red to indicate an error.
-     */
-    readonly invalid?: boolean;
-    /**
-     * Show a spinner to indicate loading.
-     */
-    readonly loading?: boolean;
-    /**
-     * Add a clear action on the input that clears the value.
-     */
-    readonly clearable?: Clearable;
-    /**
-     * Adjusts the interface to either have small or large spacing.
-     */
-    readonly size?: "small" | "large";
-    /**
-     * Adjusts the form field to go inline with content.
-     */
-    readonly inline?: boolean;
-    /**
-     * Determines the alignment of the text inside the input.
-     */
-    readonly align?: "center" | "right";
-    /**
-     * Adds a prefix label and icon to the field.
-     */
-    readonly prefix?: Affix;
-    /**
-     * Adds a suffix label and icon with an optional action to the field.
-     */
-    readonly suffix?: XOR<Affix, Suffix>;
-    /**
-     * Further description of the input, can be used for a hint.
-     */
-    readonly description?: ReactNode;
-    /**
-     * Children elements to render inside the component.
-     */
-    readonly children?: ReactNode;
-    /**
-     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
-     */
-    readonly version: 2;
-}
 export interface FieldActionsRef {
     setValue(value: string | number): void;
 }

package/dist/FormField-cjs.js

@@ -467,6 +467,7 @@ exports.FormFieldWrapper = FormFieldWrapper;
 exports.FormFieldWrapperMain = FormFieldWrapperMain;
 exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
 exports.mergeRefs = mergeRefs;
+exports.styles = styles$1;
 exports.useAtlantisFormField = useAtlantisFormField;
 exports.useAtlantisFormFieldActions = useAtlantisFormFieldActions;
 exports.useAtlantisFormFieldName = useAtlantisFormFieldName;

package/dist/FormField-es.js

@@ -454,4 +454,4 @@ function setAutocomplete(autocompleteSetting) {
     return autocompleteSetting;
 }
 
-export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, FormFieldPostFix as l, mergeRefs as m, useAtlantisFormField as u };
+export { AffixIcon as A, FormFieldInputHorizontalWrapper as F, useAtlantisFormFieldActions as a, useAtlantisFormFieldName as b, useAtlantisReactHookForm as c, FormFieldInputWrapperStyles as d, FormFieldLabel as e, FormFieldWrapper as f, FormFieldWrapperMain as g, FormFieldWrapperToolbar as h, AffixLabel as i, useFormFieldWrapperStyles as j, FormField as k, FormFieldPostFix as l, mergeRefs as m, styles$1 as s, useAtlantisFormField as u };

package/dist/InputDate/index.cjs

@@ -13,12 +13,12 @@ require('../Button-cjs.js');
 var DatePicker = require('../DatePicker-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
-require('../_getAllKeys-cjs.js');
+require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
 require('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
@@ -89,16 +89,12 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
-        if (event) {
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         setIsFocused(true);
     }
     function handleBlur(event) {
         setIsFocused(false);
-        if (event) {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
     return {
         handleBlur,

package/dist/InputDate/index.mjs

@@ -11,12 +11,12 @@ import '../Button-es.js';
 import { D as DatePicker } from '../DatePicker-es.js';
 import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
-import '../_getAllKeys-es.js';
+import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
+import '../isSymbol-es.js';
 import '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
@@ -87,16 +87,12 @@ function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
     function handleFocus(event) {
-        if (event) {
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
         setIsFocused(true);
     }
     function handleBlur(event) {
         setIsFocused(false);
-        if (event) {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
     return {
         handleBlur,

package/dist/InputDate/useInputDateActivatorActions.d.ts

@@ -9,8 +9,8 @@ export interface useInputDateActivatorActionsProps extends Pick<InputDateRebuilt
  * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
  */
 export declare function useInputDateActivatorActions({ onChange, onBlur, onFocus, }: useInputDateActivatorActionsProps): {
-    handleBlur: (event?: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
     handleChange: (_: unknown, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleFocus: (event?: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
     isFocused: boolean;
 };

package/dist/InputEmail/InputEmail.types.d.ts

@@ -1,4 +1,5 @@
-import type { CommonFormFieldProps, FocusEvents, FormFieldProps, HTMLInputBaseProps, KeyboardEvents, RebuiltInputCommonProps } from "../FormField";
+import type { Clearable } from "@jobber/hooks";
+import type { CommonFormFieldProps, FormFieldProps } from "../FormField";
 export type InputEmailLegacyProps = CommonFormFieldProps & Pick<FormFieldProps, "maxLength" | "readonly" | "validations" | "defaultValue">;
 export declare const validationMessage = "Please enter a valid email";
 export type InputEmailVersion = 1 | 2 | undefined;
@@ -6,23 +7,27 @@ export type InputEmailVersion = 1 | 2 | undefined;
  * Experimental version 2 of the InputEmail component.
  * Do not use unless you have talked with Atlantis first.
  */
-export interface InputEmailRebuiltProps extends HTMLInputBaseProps, FocusEvents<HTMLInputElement>, KeyboardEvents<HTMLInputElement>, RebuiltInputCommonProps {
-    /**
-     * The current value of the input.
-     */
-    readonly value?: string;
+export interface InputEmailRebuiltProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "size" | "suffix" | "prefix" | "value" | "max" | "min" | "defaultValue"> {
+    readonly error?: string;
+    readonly invalid?: boolean;
+    readonly identifier?: string;
+    readonly autocomplete?: boolean | string;
+    readonly loading?: boolean;
+    readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    readonly children?: React.ReactNode;
+    readonly clearable?: Clearable;
     /**
-     * Custom onChange handler that provides the new value as the first argument.
+     * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
      */
+    readonly version: 2;
     readonly onChange?: (newValue: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * A callback to handle "Enter" keypress. This will only run
-     * if Enter is the only key. Will not run if Shift or Control
-     * are being held.
-     */
     readonly onEnter?: FormFieldProps["onEnter"];
-    /**
-     * @deprecated Use `id` instead. This prop will be removed in a future version.
-     */
-    readonly identifier?: string;
+    readonly onBlur?: FormFieldProps["onBlur"];
+    readonly value?: string;
+    readonly size?: FormFieldProps["size"];
+    readonly inline?: FormFieldProps["inline"];
+    readonly align?: FormFieldProps["align"];
+    readonly prefix?: FormFieldProps["prefix"];
+    readonly suffix?: FormFieldProps["suffix"];
+    readonly description?: FormFieldProps["description"];
 }

package/dist/InputEmail/hooks/useInputEmailActions.d.ts

@@ -8,5 +8,5 @@ export declare function useInputEmailActions({ onChange, inputRef, onEnter, onFo
     handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
     handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event?: FocusEvent) => void;
 };

package/dist/InputEmail/hooks/useInputEmailFormField.d.ts

@@ -0,0 +1,32 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
+export interface UseInputEmailFormFieldProps {
+    readonly id: string;
+    readonly name: string;
+    readonly disabled?: boolean;
+    readonly autofocus?: boolean;
+    readonly error?: string;
+    readonly inline?: boolean;
+    readonly description?: ReactNode;
+    readonly invalid?: boolean;
+    readonly value?: string;
+    readonly handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    readonly handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+    readonly handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    readonly handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface UseInputEmailFormFieldReturn {
+    readonly fieldProps: {
+        readonly id: string;
+        readonly name: string;
+        readonly disabled?: boolean;
+        readonly autofocus?: boolean;
+        readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+        readonly onBlur: (event?: FocusEvent<HTMLInputElement>) => void;
+        readonly onFocus: (event: FocusEvent<HTMLInputElement>) => void;
+        readonly onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+        readonly value?: string;
+        readonly "aria-describedby"?: string;
+    };
+    readonly descriptionIdentifier: string;
+}
+export declare function useInputEmailFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error, ...rest }: UseInputEmailFormFieldProps): UseInputEmailFormFieldReturn;

package/dist/InputEmail/index.cjs

@@ -3,12 +3,13 @@
 var React = require('react');
 var FormField = require('../FormField-cjs.js');
 require('classnames');
-require('../tslib.es6-cjs.js');
+var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
+var omit = require('../omit-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../Typography-cjs.js');
@@ -16,6 +17,17 @@ require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
 require('react-router-dom');
+require('../_commonjsHelpers-cjs.js');
+require('../_baseGet-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../identity-cjs.js');
+require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
 
 const validationMessage = "Please enter a valid email";
 
@@ -37,7 +49,7 @@ function InputEmail$1(props) {
 function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
+        handleBlur();
         onChange === null || onChange === void 0 ? void 0 : onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -71,10 +83,19 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
     };
 }
 
+function useInputEmailFormField(_a) {
+    var { id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = tslib_es6.__rest(_a, ["id", "name", "disabled", "autofocus", "description", "inline", "value", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id,
+        name,
+        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value, invalid: error || rest.invalid ? "true" : undefined }), (description &&
+        !inline && { "aria-describedby": descriptionIdentifier }));
+    return { fieldProps, descriptionIdentifier };
+}
+
 const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, ref) {
     var _a, _b, _c;
-    const generatedId = React.useId();
-    const id = props.identifier || props.id || generatedId;
+    const id = React.useId();
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : React.useRef(null);
     const wrapperRef = React.useRef(null);
     const { inputStyle } = FormField.useFormFieldWrapperStyles({
@@ -85,7 +106,7 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
+        maxLength: props.maxLength,
         disabled: props.disabled,
         placeholder: props.placeholder,
     });
@@ -101,11 +122,25 @@ const InputEmailRebuilt = React.forwardRef(function InputEmailInternal(props, re
         onEnter: props.onEnter,
         inputRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
-    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
-        React.createElement("input", { id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
+    const inputProps = omit.omit(props, [
+        "placeholder",
+        "onChange",
+        "onBlur",
+        "onFocus",
+        "onEnter",
+        "size",
+        "prefix",
+        "suffix",
+        "version",
+    ]);
+    const { fieldProps, descriptionIdentifier } = useInputEmailFormField(Object.assign(Object.assign({}, inputProps), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleKeyDown }));
+    return (React.createElement(FormField.FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: props.identifier || id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
+        React.createElement("input", Object.assign({}, fieldProps, { ref: inputRef, type: "email", className: inputStyle, value: props.value, "data-testid": "ATL-InputEmail-input" })),
         React.createElement(FormField.FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
         props.children));
 });

package/dist/InputEmail/index.mjs

@@ -1,12 +1,13 @@
 import React__default, { forwardRef, useId, useRef } from 'react';
 import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
-import '../tslib.es6-es.js';
+import { _ as __rest } from '../tslib.es6-es.js';
 import 'react-hook-form';
 import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
+import { o as omit } from '../omit-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../Typography-es.js';
@@ -14,6 +15,17 @@ import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
 import 'react-router-dom';
+import '../_commonjsHelpers-es.js';
+import '../_baseGet-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../identity-es.js';
+import '../_getTag-es.js';
+import '../isSymbol-es.js';
+import '../keysIn-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFlatten-es.js';
+import '../_setToString-es.js';
 
 const validationMessage = "Please enter a valid email";
 
@@ -35,7 +47,7 @@ function InputEmail$1(props) {
 function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, onKeyDown, }) {
     function handleClear() {
         var _a;
-        // Don't call blur handler when programmatically clearing
+        handleBlur();
         onChange === null || onChange === void 0 ? void 0 : onChange("");
         (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
@@ -69,10 +81,19 @@ function useInputEmailActions({ onChange, inputRef, onEnter, onFocus, onBlur, on
     };
 }
 
+function useInputEmailFormField(_a) {
+    var { id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error } = _a, rest = __rest(_a, ["id", "name", "disabled", "autofocus", "description", "inline", "value", "handleChange", "handleBlur", "handleFocus", "handleKeyDown", "error"]);
+    const descriptionIdentifier = `descriptionUUID--${id}`;
+    const fieldProps = Object.assign(Object.assign(Object.assign({}, rest), { id,
+        name,
+        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value, invalid: error || rest.invalid ? "true" : undefined }), (description &&
+        !inline && { "aria-describedby": descriptionIdentifier }));
+    return { fieldProps, descriptionIdentifier };
+}
+
 const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
     var _a, _b, _c;
-    const generatedId = useId();
-    const id = props.identifier || props.id || generatedId;
+    const id = useId();
     const inputRef = (_a = ref) !== null && _a !== void 0 ? _a : useRef(null);
     const wrapperRef = useRef(null);
     const { inputStyle } = useFormFieldWrapperStyles({
@@ -83,7 +104,7 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
         value: props.value,
         invalid: props.invalid,
         error: props.error,
-        maxLength: undefined, // v2: maxLength is for HTML validation only, not for width styling
+        maxLength: props.maxLength,
         disabled: props.disabled,
         placeholder: props.placeholder,
     });
@@ -99,11 +120,25 @@ const InputEmailRebuilt = forwardRef(function InputEmailInternal(props, ref) {
         onEnter: props.onEnter,
         inputRef,
     });
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const hasDescription = props.description && !props.inline;
-    const isInvalid = Boolean(props.ariaInvalid || props.error || props.invalid);
-    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
-        React__default.createElement("input", { id: id, name: name, type: "email", ref: inputRef, className: inputStyle, value: props.value, disabled: props.disabled, readOnly: props.readOnly, required: props.required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, maxLength: props.maxLength, minLength: props.minLength, pattern: props.pattern, inputMode: props.inputMode, tabIndex: props.tabIndex, role: props.role, "aria-label": props.ariaLabel, "aria-describedby": hasDescription ? descriptionIdentifier : props.ariaDescribedBy, "aria-invalid": isInvalid ? true : undefined, "aria-controls": props.ariaControls, "aria-expanded": props.ariaExpanded, "aria-activedescendant": props.ariaActiveDescendant, "aria-autocomplete": props.ariaAutocomplete, "aria-required": props.ariaRequired, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: props.onKeyUp, "data-testid": "ATL-InputEmail-input" }),
+    const inputProps = omit(props, [
+        "placeholder",
+        "onChange",
+        "onBlur",
+        "onFocus",
+        "onEnter",
+        "size",
+        "prefix",
+        "suffix",
+        "version",
+    ]);
+    const { fieldProps, descriptionIdentifier } = useInputEmailFormField(Object.assign(Object.assign({}, inputProps), { id,
+        name,
+        handleChange,
+        handleBlur,
+        handleFocus,
+        handleKeyDown }));
+    return (React__default.createElement(FormFieldWrapper, { error: props.error || "", invalid: props.invalid, identifier: props.identifier || id, descriptionIdentifier: descriptionIdentifier, size: props.size, inline: props.inline, align: props.align, prefix: props.prefix, suffix: props.suffix, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, wrapperRef: wrapperRef, maxLength: props.maxLength, disabled: props.disabled, type: "email", value: props.value, placeholder: props.placeholder, autofocus: props.autoFocus, name: name },
+        React__default.createElement("input", Object.assign({}, fieldProps, { ref: inputRef, type: "email", className: inputStyle, value: props.value, "data-testid": "ATL-InputEmail-input" })),
         React__default.createElement(FormFieldPostFix, { variation: "spinner", visible: (_c = props.loading) !== null && _c !== void 0 ? _c : false }),
         props.children));
 });