@jobber/components 8.2.0 → 8.4.0

package/ActivityIndicator.d.ts

@@ -0,0 +1 @@
+export * from "./dist/ActivityIndicator";

package/ActivityIndicator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var ActivityIndicator = require("./dist/ActivityIndicator");
+
+Object.keys(ActivityIndicator).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return ActivityIndicator[key];
+    },
+  });
+});

package/dist/ActivityIndicator/ActivityIndicator.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import type { CSSProperties } from "react";
+export interface ActivityIndicatorProps {
+    /**
+     * Visual size. `base` renders at 32px, `small` renders at 16px.
+     *
+     * @default "base"
+     */
+    readonly size?: "small" | "base";
+    /**
+     * Accessible label exposed via `aria-label` on the root element. Override
+     * to localize or to describe the specific activity (e.g. "Uploading file").
+     *
+     * @default "Loading"
+     */
+    readonly ariaLabel?: string;
+    /**
+     * Custom class name merged onto the root element alongside the component's
+     * own classes.
+     */
+    readonly className?: string;
+    /**
+     * Custom inline styles applied to the root element.
+     */
+    readonly style?: CSSProperties;
+}
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+export declare function ActivityIndicator({ size, ariaLabel, className, style, }: ActivityIndicatorProps): React.JSX.Element;

package/dist/ActivityIndicator/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ActivityIndicator = require('../ActivityIndicator-cjs.js');
+require('react');
+require('classnames');
+
+
+
+exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;

package/dist/ActivityIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityIndicator } from "./ActivityIndicator";
+export type { ActivityIndicatorProps } from "./ActivityIndicator";

package/dist/ActivityIndicator/index.mjs

@@ -0,0 +1,3 @@
+export { A as ActivityIndicator } from '../ActivityIndicator-es.js';
+import 'react';
+import 'classnames';

package/dist/ActivityIndicator-cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+
+var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","small":"_888S5Y2IeZ8-","svg":"Av9z-aLocss-","indicatorLinearRotate":"WvHFS--Nm80-","track":"VDTWabJptKI-","arc":"_9XO0290QNCY-","indicatorRotateArc":"SHHICknKvqA-","indicatorExpandArc":"_0m0Nzc5awnA-","indicatorReducedPulse":"_4dXQsbprq3s-","spinning":"IZCteJUCKio-"};
+
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+function ActivityIndicator({ size = "base", ariaLabel = "Loading", className, style, }) {
+    return (React.createElement("div", { role: "status", "aria-label": ariaLabel, className: classnames(styles.indicator, size === "small" && styles.small, className), style: style },
+        React.createElement("span", { className: styles.screenReaderOnly }, ariaLabel),
+        React.createElement("svg", { className: styles.svg, viewBox: "0 0 48 48", focusable: "false", "aria-hidden": "true" },
+            React.createElement("circle", { className: styles.track, cx: "24", cy: "24", r: "20" }),
+            React.createElement("circle", { className: styles.arc, cx: "24", cy: "24", r: "20" }))));
+}
+
+exports.ActivityIndicator = ActivityIndicator;

package/dist/ActivityIndicator-es.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import classnames from 'classnames';
+
+var styles = {"indicator":"YST686vLR3c-","screenReaderOnly":"MmNHh-oCyxc-","small":"_888S5Y2IeZ8-","svg":"Av9z-aLocss-","indicatorLinearRotate":"WvHFS--Nm80-","track":"VDTWabJptKI-","arc":"_9XO0290QNCY-","indicatorRotateArc":"SHHICknKvqA-","indicatorExpandArc":"_0m0Nzc5awnA-","indicatorReducedPulse":"_4dXQsbprq3s-","spinning":"IZCteJUCKio-"};
+
+/**
+ * `ActivityIndicator` communicates an indeterminate activity that the user
+ * cannot directly control or measure — loading, fetching, or waiting on an
+ * external system.
+ *
+ * For determinate progress (a known fraction completed), use
+ * `ProgressIndicator` instead (forthcoming).
+ *
+ * For now, the legacy `Spinner` component also remains available; new code
+ * should prefer `ActivityIndicator`.
+ */
+function ActivityIndicator({ size = "base", ariaLabel = "Loading", className, style, }) {
+    return (React__default.createElement("div", { role: "status", "aria-label": ariaLabel, className: classnames(styles.indicator, size === "small" && styles.small, className), style: style },
+        React__default.createElement("span", { className: styles.screenReaderOnly }, ariaLabel),
+        React__default.createElement("svg", { className: styles.svg, viewBox: "0 0 48 48", focusable: "false", "aria-hidden": "true" },
+            React__default.createElement("circle", { className: styles.track, cx: "24", cy: "24", r: "20" }),
+            React__default.createElement("circle", { className: styles.arc, cx: "24", cy: "24", r: "20" }))));
+}
+
+export { ActivityIndicator as A };

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,6 @@
 import type { Ref, RefAttributes } from "react";
 import React from "react";
 import { type AnyOption, type AutocompleteLegacyProps, type Option } from "./Autocomplete.types";
-import type { InputTextRef } from "../InputText";
-declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu, ...inputProps }: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<InputTextRef>): React.JSX.Element;
-export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<InputTextRef>) => ReturnType<typeof AutocompleteInternal>;
+declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu, ...inputProps }: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<HTMLInputElement>): React.JSX.Element;
+export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<HTMLInputElement>) => ReturnType<typeof AutocompleteInternal>;
 export {};

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -3,7 +3,7 @@ import type { UseAutocompleteListNavReturn } from "./hooks/useAutocompleteListNa
 import type { createInteractionPointerDownHandler } from "./utils/interactionUtils";
 import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
 import type { FormFieldProps } from "../FormField";
-import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
+import type { InputTextProps } from "../InputText";
 /**
  * ARIA attributes for Autocomplete with managed/orchestrated behavior.
  * Certain ARIA attributes are controlled internally by Autocomplete's
@@ -94,10 +94,6 @@ export interface AutocompleteLegacyProps<GenericOption extends AnyOption = AnyOp
      * @param newInputText
      */
     readonly getOptions: (newInputText: string) => Array<GenericGetOptionsValue | GenericOption> | Promise<Array<GenericGetOptionsValue | GenericOption>>;
-    /**
-     * Validations to run on the input.
-     */
-    readonly validations?: FormFieldProps["validations"];
 }
 export type AutocompleteProps<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption> = AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>;
 export type CustomOptionsMenuType<GenericOption extends AnyOption = AnyOption> = (props: CustomOptionsMenuProp<GenericOption>) => React.ReactElement;
@@ -112,7 +108,7 @@ export interface MenuProps<GenericOption extends AnyOption = AnyOption, GenericO
     /**
      * Ref to the TextInput element.
      */
-    readonly inputRef: RefObject<InputTextRef | null>;
+    readonly inputRef: RefObject<HTMLInputElement | null>;
     onOptionSelect(chosenOption?: GenericOptionValue): void;
     readonly customRenderMenu?: (props: CustomOptionsMenuProp<GenericOption, GenericOptionValue>) => React.ReactElement;
 }
@@ -139,9 +135,8 @@ export interface CustomOptionsMenuProp<GenericOption extends AnyOption = AnyOpti
     readonly inputFocused: boolean;
     /**
      * Ref to the TextInput element.
-     * v1 provides InputTextRef; v2 provides a DOM element ref.
      */
-    readonly inputRef: RefObject<InputTextRef | HTMLInputElement | HTMLTextAreaElement | null>;
+    readonly inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     /**
      * Component that wraps the menu content. Used for handling keyboard scroll behavior.
      */
@@ -351,7 +346,7 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      */
     readonly customRenderInput?: (props: {
         inputRef: Ref<HTMLInputElement | HTMLTextAreaElement>;
-        inputProps: InputTextRebuiltProps;
+        inputProps: InputTextProps;
     }) => React.ReactNode;
     /**
      * **Use at your own risk:** Custom class names for specific elements. This should only be used as a

package/dist/Autocomplete/index.cjs

@@ -12,7 +12,7 @@ var Text = require('../Text-cjs.js');
 var Typography = require('../Typography-cjs.js');
 var Icon = require('../Icon-cjs.js');
 var Glimmer = require('../Glimmer-cjs.js');
-var InputText_index = require('../InputText/index.cjs');
+var InputText = require('../InputText-cjs.js');
 var FormFieldWrapper = require('../FormFieldWrapper-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react-hook-form');
@@ -24,14 +24,13 @@ require('../index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('../Content-cjs.js');
-require('../FormField-cjs.js');
 require('../FormFieldPostFix-cjs.js');
 require('../Spinner-cjs.js');
 require('../useAtlantisFormFieldName-cjs.js');
 require('framer-motion');
-require('react-router-dom');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
+require('react-router-dom');
 
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
 /** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
@@ -1186,7 +1185,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
             ? `${listboxId}-item-${activeIndex}`
             : undefined,
     };
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
         disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, clearable: props.clearable, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), ariaProps), dataAttrs);
     const chipAreaRef = React.useCallback((node) => {
         if (!node)
@@ -1259,7 +1258,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                 : composedReferenceProps, inputAriaProps: ariaProps, inputDataAttrs: dataAttrs, limitVisibleSelections: props.limitVisibleSelections, limitSelectionText: props.limitSelectionText, unsafeClassName: (_p = props.UNSAFE_className) === null || _p === void 0 ? void 0 : _p.selection, unsafeStyle: (_q = props.UNSAFE_styles) === null || _q === void 0 ? void 0 : _q.selection }, floatingMenu));
     }
     return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt" },
-        React.createElement(InputText_index.InputText, Object.assign({ ref: mergedInputRef }, inputProps)),
+        React.createElement(InputText.InputText, Object.assign({ ref: mergedInputRef }, inputProps)),
         floatingMenu));
 }
 function SelectionChip({ value, active, disabled, getOptionLabel, customRenderValue, canDismiss, onDismiss, unsafeClassName, unsafeStyle, }) {
@@ -1572,7 +1571,7 @@ function CustomMenu({ options, selectedOption, onOptionSelect, customRenderMenu,
 // eslint-disable-next-line max-statements
 function AutocompleteInternal(_a, ref) {
     var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu } = _a, inputProps = tslib_es6.__rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "customRenderMenu"]);
     const initialOptionsMemo = React.useMemo(() => mapToOptions(initialOptions), [initialOptions]);
     const [options, setOptions] = React.useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = React.useState(false);
@@ -1588,7 +1587,7 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
-        React.createElement(InputText_index.InputText, Object.assign({ ref: mergeRefs.mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React.createElement(InputText.InputText, Object.assign({ ref: mergeRefs.mergeRefs([ref, inputRef]), autoComplete: "off", size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }, inputProps)),
         React.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);
@@ -1656,7 +1655,7 @@ function AutocompleteShim(props, ref) {
     if (isNewAutocompleteProps(props)) {
         return (React.createElement(AutocompleteRebuilt, Object.assign({}, props, { ref: ref })));
     }
-    return React.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref }));
+    return (React.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref })));
 }
 const AutocompleteForwarded = React.forwardRef(AutocompleteShim);
 AutocompleteForwarded.displayName = "Autocomplete";

package/dist/Autocomplete/index.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import type { AnyOption, AutocompleteLegacyProps, AutocompleteRebuiltProps, ExtraProps, Option, OptionLike } from "./Autocomplete.types";
-import type { InputTextRef } from "../InputText";
 export type { OptionLike } from "./Autocomplete.types";
 export { type MenuOptionProps, BaseMenuOption, type BaseMenuOptionProps, MenuOption, BaseMenuGroupOption, type BaseMenuGroupOptionProps, } from "./Option";
 export { type AnyOption, type AutocompleteProps, type BaseOption, type CustomOptionsMenuProp, type GroupOption, type OptionCollection, type Option, type MenuItem, type MenuSection, type MenuOptions, type MenuHeader, type MenuFooter, type MenuAction, type ExtraProps, defineMenu, } from "./Autocomplete.types";
@@ -9,7 +8,7 @@ export { useRepositionMenu } from "./useRepositionMenu";
 export { BaseAutocompleteMenuWrapper, useAutocompleteMenu, } from "./Menu/MenuWrapper";
 export { isOptionSelected, isOptionGroup } from "./Autocomplete.utils";
 type AutocompleteShimProps = AutocompleteLegacyProps | AutocompleteRebuiltProps<OptionLike, boolean, ExtraProps, ExtraProps>;
-declare function AutocompleteShim(props: AutocompleteShimProps, ref: React.Ref<InputTextRef | HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
+declare function AutocompleteShim(props: AutocompleteShimProps, ref: React.Ref<HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
 export declare const Autocomplete: {
     <T extends OptionLike = OptionLike, Multiple extends boolean = false, S extends object = ExtraProps, A extends object = ExtraProps>(props: AutocompleteRebuiltProps<T, Multiple, S, A> & {
         version: 2;
@@ -19,12 +18,12 @@ export declare const Autocomplete: {
     }): ReturnType<typeof AutocompleteShim>;
     <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & {
         version?: 1;
-        ref?: React.Ref<InputTextRef>;
+        ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
         menu?: never;
     }): ReturnType<typeof AutocompleteShim>;
     (props: AutocompleteLegacyProps & {
         version?: 1;
-        ref?: React.Ref<InputTextRef>;
+        ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
         menu?: never;
     }): ReturnType<typeof AutocompleteShim>;
 };

package/dist/Autocomplete/index.mjs

@@ -10,7 +10,7 @@ import { T as Text } from '../Text-es.js';
 import { T as Typography } from '../Typography-es.js';
 import { I as Icon } from '../Icon-es.js';
 import { G as Glimmer } from '../Glimmer-es.js';
-import { InputText } from '../InputText/index.mjs';
+import { I as InputText } from '../InputText-es.js';
 import { c as FormFieldWrapper } from '../FormFieldWrapper-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -22,14 +22,13 @@ import '../index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import '../Content-es.js';
-import '../FormField-es.js';
 import '../FormFieldPostFix-es.js';
 import '../Spinner-es.js';
 import '../useAtlantisFormFieldName-es.js';
 import 'framer-motion';
-import 'react-router-dom';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
+import 'react-router-dom';
 
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
 /** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
@@ -1184,7 +1183,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
             ? `${listboxId}-item-${activeIndex}`
             : undefined,
     };
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
         disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, clearable: props.clearable, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), ariaProps), dataAttrs);
     const chipAreaRef = useCallback((node) => {
         if (!node)
@@ -1570,7 +1569,7 @@ function CustomMenu({ options, selectedOption, onOptionSelect, customRenderMenu,
 // eslint-disable-next-line max-statements
 function AutocompleteInternal(_a, ref) {
     var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, customRenderMenu } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "customRenderMenu"]);
     const initialOptionsMemo = useMemo(() => mapToOptions(initialOptions), [initialOptions]);
     const [options, setOptions] = useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = useState(false);
@@ -1586,7 +1585,7 @@ function AutocompleteInternal(_a, ref) {
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
     return (React__default.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
-        React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
+        React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autoComplete: "off", size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur }, inputProps)),
         React__default.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);
@@ -1654,7 +1653,7 @@ function AutocompleteShim(props, ref) {
     if (isNewAutocompleteProps(props)) {
         return (React__default.createElement(AutocompleteRebuilt, Object.assign({}, props, { ref: ref })));
     }
-    return React__default.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref }));
+    return (React__default.createElement(Autocomplete$1, Object.assign({}, props, { ref: ref })));
 }
 const AutocompleteForwarded = forwardRef(AutocompleteShim);
 AutocompleteForwarded.displayName = "Autocomplete";

package/dist/DataList/components/DataListSearch/index.cjs

@@ -5,8 +5,7 @@ require('react');
 require('classnames');
 require('@jobber/design');
 require('@jobber/hooks');
-require('../../../InputText/index.cjs');
-require('../../../FormField-cjs.js');
+require('../../../InputText-cjs.js');
 require('../../../FormFieldWrapper-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');

package/dist/DataList/components/DataListSearch/index.mjs

@@ -3,8 +3,7 @@ import 'react';
 import 'classnames';
 import '@jobber/design';
 import '@jobber/hooks';
-import '../../../InputText/index.mjs';
-import '../../../FormField-es.js';
+import '../../../InputText-es.js';
 import '../../../FormFieldWrapper-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';

package/dist/DataList/index.cjs

@@ -79,8 +79,7 @@ require('../ComboboxActivator-cjs.js');
 require('../DataListOverflowFade-cjs.js');
 require('../DataListStickyHeader-cjs.js');
 require('../DataListSearch-cjs.js');
-require('../InputText/index.cjs');
-require('../FormField-cjs.js');
+require('../InputText-cjs.js');
 require('../FormFieldWrapper-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');

package/dist/DataList/index.mjs

@@ -77,8 +77,7 @@ import '../ComboboxActivator-es.js';
 import '../DataListOverflowFade-es.js';
 import '../DataListStickyHeader-es.js';
 import '../DataListSearch-es.js';
-import '../InputText/index.mjs';
-import '../FormField-es.js';
+import '../InputText-es.js';
 import '../FormFieldWrapper-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';

package/dist/DataListSearch-cjs.js

@@ -4,7 +4,7 @@ var React = require('react');
 var classnames = require('classnames');
 var design = require('@jobber/design');
 var jobberHooks = require('@jobber/hooks');
-var InputText_index = require('./InputText/index.cjs');
+var InputText = require('./InputText-cjs.js');
 var DataListContext = require('./DataListContext-cjs.js');
 var DataList_const = require('./DataList.const-cjs.js');
 var Button = require('./Button-cjs.js');
@@ -24,24 +24,26 @@ function DataListSearch(_) {
 function InternalDataListSearch() {
     const inputRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState("");
     const { searchComponent, filterComponent, sorting, title } = DataListContext.useDataListContext();
     const debouncedSearch = jobberHooks.useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, DataList_const.SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
+    const isControlled = controlledValue !== undefined;
     return (React.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
         React.createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames(styles.searchInput, {
                 [styles.searchInputVisible]: visible,
             }) },
-            React.createElement(InputText_index.InputText
+            React.createElement(InputText.InputText
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
-                    ? searchComponent.props.onSearch
-                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+                key: initialValue, value: isControlled ? controlledValue : internalValue, ref: inputRef, placeholder: getPlaceholder(), onChange: isControlled
+                    ? (val) => searchComponent.props.onSearch(val)
+                    : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React.createElement("div", { className: styles.searchButton },
             React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: visible, initialChild: React.createElement(Button.Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React.createElement(Button.Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
@@ -55,9 +57,13 @@ function InternalDataListSearch() {
         const visibility = !visible;
         setVisible(visibility);
         if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, design.tokens["timing-quick"]);
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, design.tokens["timing-quick"]);
         }
     }
+    function handleUncontrolledChange(val) {
+        setInternalValue(val);
+        debouncedSearch(val);
+    }
 }
 
 exports.DATA_LIST_SEARCH_TEST_ID = DATA_LIST_SEARCH_TEST_ID;

package/dist/DataListSearch-es.js

@@ -2,7 +2,7 @@ import React__default, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { useDebounce } from '@jobber/hooks';
-import { InputText } from './InputText/index.mjs';
+import { I as InputText } from './InputText-es.js';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { S as SEARCH_DEBOUNCE_DELAY } from './DataList.const-es.js';
 import { B as Button } from './Button-es.js';
@@ -22,11 +22,13 @@ function DataListSearch(_) {
 function InternalDataListSearch() {
     const inputRef = useRef(null);
     const [visible, setVisible] = useState(false);
+    const [internalValue, setInternalValue] = useState("");
     const { searchComponent, filterComponent, sorting, title } = useDataListContext();
     const debouncedSearch = useDebounce((value) => { var _a; return (_a = searchComponent === null || searchComponent === void 0 ? void 0 : searchComponent.props) === null || _a === void 0 ? void 0 : _a.onSearch(value); }, SEARCH_DEBOUNCE_DELAY);
     if (!searchComponent)
         return null;
     const { placeholder, initialValue, value: controlledValue, } = searchComponent.props;
+    const isControlled = controlledValue !== undefined;
     return (React__default.createElement("div", { className: classnames(styles.wrapper, {
             [styles.withNoFilters]: !filterComponent && !sorting,
         }) },
@@ -37,9 +39,9 @@ function InternalDataListSearch() {
             // If the initial value changes, reset the input.
             , { 
                 // If the initial value changes, reset the input.
-                key: initialValue, defaultValue: initialValue, value: controlledValue, ref: inputRef, placeholder: getPlaceholder(), onChange: controlledValue !== undefined
-                    ? searchComponent.props.onSearch
-                    : debouncedSearch, prefix: { icon: "search" }, clearable: "always" })),
+                key: initialValue, value: isControlled ? controlledValue : internalValue, ref: inputRef, placeholder: getPlaceholder(), onChange: isControlled
+                    ? (val) => searchComponent.props.onSearch(val)
+                    : handleUncontrolledChange, prefix: { icon: "search" }, clearable: "always" })),
         React__default.createElement("div", { className: styles.searchButton },
             React__default.createElement(AnimatedSwitcher, { switched: visible, initialChild: React__default.createElement(Button, { variation: "subtle", icon: "search", ariaLabel: "Search", onClick: toggleSearch }), switchTo: React__default.createElement(Button, { variation: "subtle", icon: "remove", ariaLabel: "Close search bar", onClick: toggleSearch }) }))));
     function getPlaceholder() {
@@ -53,9 +55,13 @@ function InternalDataListSearch() {
         const visibility = !visible;
         setVisible(visibility);
         if (visibility && inputRef.current) {
-            setTimeout(inputRef.current.focus, tokens["timing-quick"]);
+            setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, tokens["timing-quick"]);
         }
     }
+    function handleUncontrolledChange(val) {
+        setInternalValue(val);
+        debouncedSearch(val);
+    }
 }
 
 export { DATA_LIST_SEARCH_TEST_ID as D, InternalDataListSearch as I, DataListSearch as a };

package/dist/InputDate/index.cjs

@@ -30,8 +30,7 @@ require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
 require('../_setToString-cjs.js');
 require('../AtlantisContext-cjs.js');
-require('../InputText/index.cjs');
-require('../FormField-cjs.js');
+require('../InputText-cjs.js');
 require('../FormFieldWrapper-cjs.js');
 require('framer-motion');
 require('../Text-cjs.js');

package/dist/InputDate/index.mjs

@@ -28,8 +28,7 @@ import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
 import '../_setToString-es.js';
 import '../AtlantisContext-es.js';
-import '../InputText/index.mjs';
-import '../FormField-es.js';
+import '../InputText-es.js';
 import '../FormFieldWrapper-es.js';
 import 'framer-motion';
 import '../Text-es.js';

package/dist/InputDate-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var DatePicker = require('./DatePicker-cjs.js');
-var InputText_index = require('./InputText/index.cjs');
+var InputText = require('./InputText-cjs.js');
 
 function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     const [isFocused, setIsFocused] = React.useState(false);
@@ -82,7 +82,7 @@ const InputDate = React.forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React.createElement("div", { onClick: onClick },
-            React.createElement(InputText_index.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React.createElement(InputText.InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);

package/dist/InputDate-es.js

@@ -1,6 +1,6 @@
 import React__default, { useState, forwardRef, useRef } from 'react';
 import { D as DatePicker } from './DatePicker-es.js';
-import { InputText } from './InputText/index.mjs';
+import { I as InputText } from './InputText-es.js';
 
 function useInputDateActivatorActions({ onChange, onBlur, onFocus, }) {
     const [isFocused, setIsFocused] = useState(false);
@@ -80,7 +80,7 @@ const InputDate = forwardRef((props, forwardedRef) => {
         return (
         // We prevent the picker from opening on focus for keyboard navigation, so to maintain a good UX for mouse users we want to open the picker on click
         React__default.createElement("div", { onClick: onClick },
-            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, version: 2, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
+            React__default.createElement(InputText, { "aria-describedby": activatorProps.ariaDescribedBy, "aria-labelledby": activatorProps.ariaLabelledBy, "aria-required": activatorProps.ariaRequired === "true" ? true : false, autoFocus: props.autoFocus, id: activatorProps.id, autoComplete: props.autoComplete, disabled: props.disabled, error: props.error, readOnly: props.readOnly, placeholder: props.placeholder, size: props.size, inline: props.inline, align: props.align, description: props.description, invalid: props.invalid, required: props.required, name: props.name, value: showEmptyValueLabel ? props.emptyValueLabel || "" : value || "", ref: forwardedRef, suffix: suffix, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: event => {
                     var _a, _b;
                     if (props.showIcon === false && event.key === "ArrowDown") {
                         (_a = activatorProps.onClick) === null || _a === void 0 ? void 0 : _a.call(activatorProps);