@jobber/components 7.5.0 → 7.6.0

package/dist/docs/Select/Select.md

@@ -9,9 +9,9 @@ selected. For grouping options with section headers, use Select.OptionGroup.
 
 #### Custom grouped menu and browser support
 
-V2 remains a native `<select>` by default. To enable the enhanced grouped menu
-styling (bold section headers, edge‑to‑edge dividers and hover backgrounds), set
-the `UNSAFE_experimentalStyles` prop on `Select`.
+To enable the enhanced grouped menu styling (bold section headers, edge‑to‑edge
+dividers and hover backgrounds), set the `UNSAFE_experimentalStyles` prop on
+`Select`.
 
 * When `UNSAFE_experimentalStyles` is true and the browser supports
   `appearance: base-select` (Chromium 123+), the select renders with the
@@ -20,21 +20,19 @@ the `UNSAFE_experimentalStyles` prop on `Select`.
   the select remains native while still rendering the same `OptionGroup`
   structure.
 
-#### Option Props
-
-#### OptionGroup Props
-
 ## States
 
 ### Invalid
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Option, Select } from "@jobber/components/Select";
 
 export function SelectInvalidExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
-    <Select invalid={true}>
+    <Select invalid={true} value={value} onChange={setValue}>
       <Option value="sad">Tony</Option>
       <Option value="old">Steve</Option>
     </Select>
@@ -45,12 +43,14 @@ export function SelectInvalidExample() {
 ### Disabled
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Option, Select } from "@jobber/components/Select";
 
 export function SelectDisabledExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
-    <Select disabled={true}>
+    <Select disabled={true} value={value} onChange={setValue}>
       <Option value="sad">Tony</Option>
       <Option value="old">Steve</Option>
     </Select>
@@ -67,15 +67,18 @@ provides the section header text.
 ### Basic Option Groups
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Select } from "@jobber/components/Select";
 
 export function SelectCustomOptionGroupsExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
     <Select
       placeholder="Select an option"
-      version={2}
       UNSAFE_experimentalStyles={true}
+      value={value}
+      onChange={setValue}
     >
       <Select.OptionGroup label="Team A">
         <Select.Option value="alice">Alice</Select.Option>
@@ -100,15 +103,18 @@ export function SelectCustomOptionGroupsExample() {
 ### Disabled Option Groups
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Select } from "@jobber/components/Select";
 
 export function SelectCustomOptionGroupDisabledExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
     <Select
-      version={2}
       UNSAFE_experimentalStyles
       placeholder="Select an option"
+      value={value}
+      onChange={setValue}
     >
       <Select.OptionGroup label="Available Items">
         <Select.Option value="option1">Option 1</Select.Option>
@@ -132,7 +138,7 @@ export function SelectCustomOptionGroupDisabledExample() {
 
 ### Custom (Chromium) vs native
 
-Select (V2) is native by default. Opt into the customizable Chrome UI with
+Select is native by default. Opt into the customizable Chrome UI with
 `UNSAFE_experimentalStyles`. This enhances grouped menus in Chromium 123+ when
 the browser supports `appearance: base-select`.
 
@@ -186,30 +192,60 @@ dropdown content is stylable; the closed value alignment is not.
 
 ### Web
 
+#### Select
+
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
-| `autofocus` | `boolean` | No | — | Determines if the input should be auto-focused, using the HTML attribute |
+| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
+| `aria-autocomplete` | `"inline" | "none" | "list" | "both"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
+| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
+| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
+| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
+| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
+| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
+| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
+| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
+| `autoComplete` | `string` | No | — | Autocomplete behavior for the input (React casing, string values only). Use standard HTML autocomplete values or "on"... |
+| `autoFocus` | `boolean` | No | — | Whether the input should be auto-focused (React casing). |
 | `children` | `ReactNode` | No | — | If you need to pass in a children. For example, `<options>` inside `<select>`. |
-| `defaultValue` | `string | Date` | No | — | Initial value of the input. Only use this when you need to pre-populate the field with a data that is not controlled ... |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
-| `id` | `string` | No | — | A unique identifier for the input. |
-| `inline` | `boolean` | No | — | Adjusts the form field to go inline with a content. This also silences the given `validations` prop. You'd have to us... |
-| `inputRef` | `RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>` | No | — |  |
+| `disabled` | `boolean` | No | — | Whether the input is disabled. |
+| `error` | `string` | No | — | Error message to display. This also highlights the field red. |
+| `id` | `string` | No | — | The unique identifier for the input element. |
+| `inline` | `boolean` | No | — | Adjusts the form field to go inline with content. |
+| `inputMode` | `"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"` | No | — | Input mode hint for virtual keyboards. |
+| `inputRef` | `Ref<HTMLSelectElement>` | No | — |  |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `maxLength` | `number` | No | — | Changes the width to roughly the same size as the maximum character length |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
-| `onChange` | `(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void` | No | — | onChange handler that provides the new value (or event) @param newValue @param event |
-| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | A callback to handle "Enter" keypress. This will only run if Enter is the only key. Will not run if Shift or Control ... |
-| `onFocus` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Focus callback. |
-| `onValidation` | `(message: string) => void` | No | — | Callback to get the the status and message when validating a field @param message |
+| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
+| `name` | `string` | No | — | The name attribute for the input element. |
+| `onBlur` | `(event: FocusEvent<HTMLSelectElement, Element>) => void` | No | — | Blur event handler. |
+| `onChange` | `(newValue?: string | number) => void` | No | — |  |
+| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
+| `onFocus` | `(event: FocusEvent<HTMLSelectElement, Element>) => void` | No | — | Focus event handler. |
+| `pattern` | `string` | No | — | Validation pattern (regex) for the input. |
 | `placeholder` | `string` | No | — | Text that appears inside the input when empty and floats above the value as a mini label once the user enters a value... |
 | `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field |
+| `required` | `boolean` | No | — | Whether the input is required before form submission. |
+| `role` | `string` | No | — | Role attribute for accessibility. |
 | `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `suffix` | `{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }` | No | — | Adds a suffix label and icon with an optional action to the field |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
-| `value` | `string | number | Date` | No | — | Set the component to the given value. |
-| `version` | `1` | No | — | Experimental: Determine which version of the FormField to use. Right now this isn't used but it will be used in the f... |
-| `wrapperRef` | `RefObject<HTMLDivElement>` | No | — |  |
+| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
+| `UNSAFE_experimentalStyles` | `boolean` | No | — | Opt-in to the customizable select UI (Chromium 123+). When true, the component will apply the custom select styles De... |
+| `value` | `string | number` | No | — |  |
+
+#### Select.Option
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `disabled` | `boolean` | No | — |  |
+| `value` | `string` | No | — | The content of this attribute represents the value to be submitted with the form, should this option be selected. |
+
+#### Select.OptionGroup
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `label` | `string` | Yes | — |  |
+| `disabled` | `boolean` | No | — |  |
+| `UNSAFE_className` | `string` | No | — | Use at your own risk: Custom classnames for specific elements. This should only be used as a last resort. Using this ... |
+| `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | Use at your own risk: Custom style for specific elements. This should only be used as a last resort. Using this may r... |

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -11,17 +11,16 @@ The following components have a v2 implementation. **Always pass
 `version={2}`**. Never generate v1 usage for these components — v1 is
 deprecated.
 
-| Component        | Import                                                                   | v2 prop                                                                                                   |
-| ---------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
-| Autocomplete     | `import { Autocomplete } from "@jobber/components/Autocomplete"`         | `version={2}` — fully controlled, async support                                                           |
-| InputDate        | `import { InputDate } from "@jobber/components/InputDate"`               | `version={2}`                                                                                             |
-| InputEmail       | `import { InputEmail } from "@jobber/components/InputEmail"`             | `version={2}`                                                                                             |
-| InputNumber      | `import { InputNumber } from "@jobber/components/InputNumber"`           | `version={2}`                                                                                             |
-| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}`                                                                                             |
-| InputText        | `import { InputText } from "@jobber/components/InputText"`               | `version={2}`                                                                                             |
-| InputTime        | `import { InputTime } from "@jobber/components/InputTime"`               | `version={2}`                                                                                             |
-| Modal            | `import { Modal } from "@jobber/components/Modal"`                       | `version={2}` — uses `Modal.Provider` composition                                                         |
-| Select           | `import { Select } from "@jobber/components/Select"`                     | `version={2}` — native `<select>`; opt into the customizable Chromium UI with `UNSAFE_experimentalStyles` |
+| Component        | Import                                                                   | v2 prop                                           |
+| ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
+| Autocomplete     | `import { Autocomplete } from "@jobber/components/Autocomplete"`         | `version={2}` — fully controlled, async support   |
+| InputDate        | `import { InputDate } from "@jobber/components/InputDate"`               | `version={2}`                                     |
+| InputEmail       | `import { InputEmail } from "@jobber/components/InputEmail"`             | `version={2}`                                     |
+| InputNumber      | `import { InputNumber } from "@jobber/components/InputNumber"`           | `version={2}`                                     |
+| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}`                                     |
+| InputText        | `import { InputText } from "@jobber/components/InputText"`               | `version={2}`                                     |
+| InputTime        | `import { InputTime } from "@jobber/components/InputTime"`               | `version={2}`                                     |
+| Modal            | `import { Modal } from "@jobber/components/Modal"`                       | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use
 
@@ -39,7 +38,6 @@ deprecated.
 | `Card`                                 | `title`                 | Use the `header` prop, or compose with `Card.Header` and `Card.Body`.                          |
 | `Toast`                                | `action`, `actionLabel` | Both will be removed in the next major version. Trigger follow-up work from outside the toast. |
 | Text inputs (`InputText` v2 etc.)      | `onEnter`               | Use `onKeyDown` or `onKeyUp` and check the key.                                                |
-| `Select` v2                            | `onEnter`               | Use `onKeyDown` or `onKeyUp`.                                                                  |
 | `FormField` (`maxLength` on v1 inputs) | `maxLength`             | Flagged in source as flawed; only kept for v1 backwards compatibility.                         |
 
 ## Import pattern
@@ -118,7 +116,6 @@ parent reads its compound children to wire up state, accessibility, and styling.
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
 | `Combobox`              | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action`                                                                                                                                                                                                                                   | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator.                                                                                                                                                          |
-| `Select` v2             | `Select.Option`, `Select.OptionGroup`                                                                                                                                                                                                                                                        | These map directly to native `<option>` and `<optgroup>`. Use `UNSAFE_experimentalStyles` to opt into the customizable Chromium UI for grouped menus.                                                                                                                                                                        |
 | `DataTable`             | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`.                                                                                                |
 | `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator`                                                                                                                                          | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers.                                                                                                                                       |
 | `Page`                  | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body`                                   | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |

package/dist/index.cjs

@@ -43,6 +43,7 @@ var FeatureSwitch = require('./FeatureSwitch-cjs.js');
 var Flex = require('./Flex-cjs.js');
 var Form = require('./Form-cjs.js');
 var FormField = require('./FormField-cjs.js');
+var mergeRefs = require('./mergeRefs-cjs.js');
 var FormatDate = require('./FormatDate-cjs.js');
 var FormatEmail = require('./FormatEmail-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
@@ -79,7 +80,7 @@ var RadioGroup = require('./RadioGroup-cjs.js');
 var RecurringSelect = require('./RecurringSelect-cjs.js');
 var DayOfMonthSelect = require('./DayOfMonthSelect-cjs.js');
 var ResponsiveSwitcher = require('./ResponsiveSwitcher-cjs.js');
-var Select_index = require('./Select/index.cjs');
+var Select = require('./Select-cjs.js');
 var SegmentedControl = require('./SegmentedControl-cjs.js');
 var SideDrawer = require('./SideDrawer-cjs.js');
 var SideKick = require('./SideKick-cjs.js');
@@ -251,20 +252,20 @@ exports.Emphasis = Emphasis.Emphasis;
 exports.FeatureSwitch = FeatureSwitch.FeatureSwitch;
 exports.Flex = Flex.Flex;
 exports.Form = Form.Form;
-exports.AffixIcon = FormField.AffixIcon;
-exports.AffixLabel = FormField.AffixLabel;
 exports.FormField = FormField.FormField;
-exports.FormFieldInputHorizontalWrapper = FormField.FormFieldInputHorizontalWrapper;
-exports.FormFieldInputWrapperStyles = FormField.FormFieldInputWrapperStyles;
-exports.FormFieldLabel = FormField.FormFieldLabel;
-exports.FormFieldWrapper = FormField.FormFieldWrapper;
-exports.FormFieldWrapperMain = FormField.FormFieldWrapperMain;
-exports.FormFieldWrapperToolbar = FormField.FormFieldWrapperToolbar;
 exports.useAtlantisFormField = FormField.useAtlantisFormField;
 exports.useAtlantisFormFieldActions = FormField.useAtlantisFormFieldActions;
-exports.useAtlantisFormFieldName = FormField.useAtlantisFormFieldName;
 exports.useAtlantisReactHookForm = FormField.useAtlantisReactHookForm;
-exports.useFormFieldWrapperStyles = FormField.useFormFieldWrapperStyles;
+exports.AffixIcon = mergeRefs.AffixIcon;
+exports.AffixLabel = mergeRefs.AffixLabel;
+exports.FormFieldInputHorizontalWrapper = mergeRefs.FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = mergeRefs.FormFieldInputWrapperStyles;
+exports.FormFieldLabel = mergeRefs.FormFieldLabel;
+exports.FormFieldWrapper = mergeRefs.FormFieldWrapper;
+exports.FormFieldWrapperMain = mergeRefs.FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = mergeRefs.FormFieldWrapperToolbar;
+exports.useAtlantisFormFieldName = mergeRefs.useAtlantisFormFieldName;
+exports.useFormFieldWrapperStyles = mergeRefs.useFormFieldWrapperStyles;
 exports.FormatDate = FormatDate.FormatDate;
 exports.strFormatDate = FormatDate.strFormatDate;
 exports.FormatEmail = FormatEmail.FormatEmail;
@@ -323,8 +324,8 @@ Object.defineProperty(exports, "WeekDay", {
     get: function () { return DayOfMonthSelect.WeekDay; }
 });
 exports.ResponsiveSwitcher = ResponsiveSwitcher.ResponsiveSwitcher;
-exports.Option = Select_index.Option;
-exports.Select = Select_index.Select;
+exports.Option = Select.SelectOption;
+exports.Select = Select.Select;
 exports.SegmentedControl = SegmentedControl.SegmentedControl;
 exports.SegmentedControlContext = SegmentedControl.SegmentedControlContext;
 exports.SegmentedControlProvider = SegmentedControl.SegmentedControlProvider;

package/dist/index.mjs

@@ -40,7 +40,8 @@ export { E as Emphasis } from './Emphasis-es.js';
 export { F as FeatureSwitch } from './FeatureSwitch-es.js';
 export { F as Flex } from './Flex-es.js';
 export { F as Form } from './Form-es.js';
-export { A as AffixIcon, i as AffixLabel, k as FormField, F as FormFieldInputHorizontalWrapper, d as FormFieldInputWrapperStyles, e as FormFieldLabel, f as FormFieldWrapper, g as FormFieldWrapperMain, h as FormFieldWrapperToolbar, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisFormFieldName, c as useAtlantisReactHookForm, j as useFormFieldWrapperStyles } from './FormField-es.js';
+export { F as FormField, u as useAtlantisFormField, a as useAtlantisFormFieldActions, b as useAtlantisReactHookForm } from './FormField-es.js';
+export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useAtlantisFormFieldName, g as useFormFieldWrapperStyles } from './mergeRefs-es.js';
 export { F as FormatDate, s as strFormatDate } from './FormatDate-es.js';
 export { F as FormatEmail } from './FormatEmail-es.js';
 export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
@@ -77,7 +78,7 @@ export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
 export { R as RecurringSelect } from './RecurringSelect-es.js';
 export { D as DurationPeriod, W as WeekDay } from './DayOfMonthSelect-es.js';
 export { R as ResponsiveSwitcher } from './ResponsiveSwitcher-es.js';
-export { Option, Select } from './Select/index.mjs';
+export { S as Option, a as Select } from './Select-es.js';
 export { S as SegmentedControl, a as SegmentedControlContext, b as SegmentedControlProvider, u as useSegmentedControl } from './SegmentedControl-es.js';
 export { S as SideDrawer } from './SideDrawer-es.js';
 export { S as SideKick } from './SideKick-es.js';

package/dist/mergeRefs-cjs.js

@@ -0,0 +1,279 @@
+'use strict';
+
+var React = require('react');
+var jobberHooks = require('@jobber/hooks');
+var framerMotion = require('framer-motion');
+var design = require('@jobber/design');
+var classnames = require('classnames');
+var Button = require('./Button-cjs.js');
+var Icon = require('./Icon-cjs.js');
+var Text = require('./Text-cjs.js');
+var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
+var InputValidation = require('./InputValidation-cjs.js');
+var Spinner = require('./Spinner-cjs.js');
+
+var formFieldStyles = {"container":"YL-mNv-Bl6g-","wrapper":"_8lhbGTQ-hhg-","disabled":"Tz9LK9ABKMk-","horizontalWrapper":"b5mv1x1H7YE-","textarea":"hGr6YW4AeLM-","safari":"QBCWi9GBgMs-","timeInputLabel":"_0pmqVa2zSE4-","miniLabel":"F1t76G6bDKo-","large":"_9tjyT9QUtP8-","text":"QmMiyoAWp-g-","invalid":"XWDSfe6weSY-","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-","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
+ */
+function AffixLabel({ label, variation = "prefix", labelRef, }) {
+    const affixLabelClass = classnames(formFieldStyles.affixLabel, {
+        [formFieldStyles.suffix]: variation === "suffix",
+    });
+    if (!label)
+        return null;
+    return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
+}
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+    const affixIconClass = classnames(formFieldStyles.affixIcon, {
+        [formFieldStyles.suffix]: variation === "suffix",
+    });
+    const iconSize = size === "small" ? "small" : "base";
+    if (!icon)
+        return null;
+    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.Button
+    /**
+     * We can cast the ariaLabel here as a `Suffix`
+     * requires an ariaLabel if there is an action
+     */
+    , { 
+        /**
+         * We can cast the ariaLabel here as a `Suffix`
+         * requires an ariaLabel if there is an action
+         */
+        ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize })) : (React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+}
+
+function FormFieldDescription({ id, description, visible = true, }) {
+    if (!visible)
+        return null;
+    const useStringFormat = !description || typeof description === "string";
+    return (React.createElement("div", { id: id, className: formFieldStyles.description }, useStringFormat ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description)));
+}
+
+var styles = {"clearInput":"YmRTd-KeXv4-","spinning":"B25z9B8I3gs-"};
+
+function ClearAction({ onClick, visible, }) {
+    if (!visible)
+        return null;
+    return (React.createElement("button", { className: styles.clearInput, onClick: onClick, type: "button", "aria-label": "Clear input", "data-testid": "ATL-FormField-clearButton" },
+        React.createElement(Icon.Icon, { name: "remove", size: "small" })));
+}
+
+function useToolbar(props) {
+    const isToolbarVisible = props.toolbar !== undefined &&
+        (props.toolbarVisibility === "always" || props.focused);
+    const toolbarAnimationEnd = { opacity: 0, height: 0 };
+    const toolbarAnimationStart = { opacity: 1, height: "auto" };
+    return {
+        isToolbarVisible,
+        toolbarAnimationEnd,
+        toolbarAnimationStart,
+    };
+}
+
+function useIsSafari() {
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator)
+        ? /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+        : false;
+}
+
+/**
+ * Hook for getting the correct styles for the FormField and its children
+ */
+function useFormFieldWrapperStyles({ size, align, placeholder, value, invalid, error, max, prefixRef, suffixRef, maxLength, type, disabled, inline, showMiniLabel = true, }) {
+    const isSafari = useIsSafari();
+    const wrapperClasses = classnames(formFieldStyles.wrapper, size && formFieldStyles[size], align && formFieldStyles[align], {
+        [formFieldStyles.miniLabel]: (showMiniLabel && placeholder && value !== "") ||
+            (placeholder && type === "select") ||
+            // Naively assume that if the the type is tel, it is the InputPhoneNumber
+            (placeholder && type === "tel"),
+        [formFieldStyles.text]: type === "textarea" || type === "text",
+        [formFieldStyles.textarea]: type === "textarea",
+        [formFieldStyles.safari]: isSafari && type === "textarea",
+        [formFieldStyles.select]: type === "select",
+        [formFieldStyles.invalid]: invalid !== null && invalid !== void 0 ? invalid : error,
+        [formFieldStyles.disabled]: disabled,
+        [formFieldStyles.maxLength]: maxLength,
+        [formFieldStyles.timeInputLabel]: placeholder && type === "time" && placeholder && value === "",
+    });
+    const containerClasses = classnames(formFieldStyles.container, {
+        [formFieldStyles.inline]: inline,
+    });
+    const wrapperInlineStyle = {
+        ["--formField-maxLength"]: maxLength || max,
+    };
+    const [labelStyle, setLabelStyle] = React.useState({
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    });
+    React.useEffect(() => {
+        var _a, _b;
+        setLabelStyle(getAffixPaddding({
+            value,
+            type,
+            prefixWidth: ((_a = prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0,
+            suffixWidth: ((_b = suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0,
+        }));
+    }, [value]);
+    return {
+        inputStyle: formFieldStyles.input,
+        wrapperClasses,
+        containerClasses,
+        wrapperInlineStyle,
+        labelStyle,
+        setLabelStyle,
+    };
+}
+function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
+    const hasValue = value !== "";
+    const newPadding = {
+        paddingLeft: undefined,
+        paddingRight: undefined,
+    };
+    // Naively assume that if the the type is tel, it is the InputPhoneNumber
+    if (type === "tel")
+        return newPadding;
+    if (prefixWidth && !hasValue) {
+        newPadding.paddingLeft = offset(prefixWidth);
+    }
+    if (suffixWidth && !hasValue) {
+        newPadding.paddingRight = offset(suffixWidth);
+    }
+    function offset(width) {
+        return `calc(${width}px + var(--space-smallest)`;
+    }
+    return newPadding;
+}
+
+function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
+    const prefixRef = React.useRef(null);
+    const suffixRef = React.useRef(null);
+    const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
+        align,
+        max,
+        maxLength,
+        prefixRef,
+        suffixRef,
+        placeholder,
+        value,
+        invalid,
+        error,
+        type,
+        disabled,
+        inline,
+        size,
+        showMiniLabel,
+    });
+    const { focused } = useFormFieldFocus.useFormFieldFocus({ wrapperRef });
+    const showClear = jobberHooks.useShowClear({
+        clearable,
+        multiline: type === "textarea",
+        focused,
+        hasValue: Boolean(value),
+        disabled,
+        readonly,
+    });
+    const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } = useToolbar({
+        focused,
+        toolbar,
+        toolbarVisibility,
+    });
+    return (React.createElement("div", { className: containerClasses },
+        React.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
+            React.createElement(FormFieldInputHorizontalWrapper, null,
+                React.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React.createElement(FormFieldInputWrapperStyles, null,
+                    (showMiniLabel || !value) && (React.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
+                            ? labelStyle
+                            : undefined }, placeholder)),
+                    React.createElement(AffixLabel, Object.assign({}, prefix, { labelRef: prefixRef })),
+                    React.createElement(FormFieldWrapperMain, null, children),
+                    React.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
+                React.createElement(ClearAction, { onClick: onClear, visible: showClear }),
+                React.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
+            React.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
+        React.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
+        React.createElement(InputValidation.InputValidation, { message: error, visible: !!error && !inline })));
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldInputHorizontalWrapper({ children, }) {
+    return React.createElement("div", { className: formFieldStyles.horizontalWrapper }, children);
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldInputWrapperStyles({ children, }) {
+    return React.createElement("div", { className: formFieldStyles.inputWrapper }, children);
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldWrapperMain({ children, tabIndex = -1, }) {
+    return (React.createElement("div", { className: formFieldStyles.childrenWrapper, tabIndex: tabIndex }, children));
+}
+function FormFieldLabel({ children, htmlFor, style, external = false, }) {
+    if (!children)
+        return null;
+    return (React.createElement("label", { className: external ? formFieldStyles.externalLabel : formFieldStyles.label, htmlFor: htmlFor, style: style }, children));
+}
+/**
+ * @internal Reach out to UX Foundations if using this component since it is possible it might change
+ */
+function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart, toolbarVisibility, }) {
+    return (React.createElement(framerMotion.AnimatePresence, { initial: toolbarVisibility === "always" ? false : true }, isToolbarVisible && (React.createElement(framerMotion.motion.div, { key: "toolbar", initial: toolbarAnimationEnd, animate: toolbarAnimationStart, exit: toolbarAnimationEnd, transition: {
+            duration: design.tokens["timing-base"] / 1000,
+            ease: "easeInOut",
+        }, tabIndex: -1 },
+        React.createElement("div", { className: formFieldStyles.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
+}
+
+function FormFieldPostFix({ variation, visible = true, className, }) {
+    if (!visible)
+        return null;
+    return (React.createElement("span", { className: classnames(formFieldStyles.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+}
+
+function useAtlantisFormFieldName({ id, nameProp, }) {
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const name = nameProp ? nameProp : `generatedName--${id}`;
+    return { name };
+}
+
+/**
+ * Given an array of refs, merge them into a single ref callback.
+ * This is useful for cases where you need to pass a multiple refs to a component.
+ */
+function mergeRefs(refs) {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+
+exports.AffixIcon = AffixIcon;
+exports.AffixLabel = AffixLabel;
+exports.FormFieldInputHorizontalWrapper = FormFieldInputHorizontalWrapper;
+exports.FormFieldInputWrapperStyles = FormFieldInputWrapperStyles;
+exports.FormFieldLabel = FormFieldLabel;
+exports.FormFieldPostFix = FormFieldPostFix;
+exports.FormFieldWrapper = FormFieldWrapper;
+exports.FormFieldWrapperMain = FormFieldWrapperMain;
+exports.FormFieldWrapperToolbar = FormFieldWrapperToolbar;
+exports.formFieldStyles = formFieldStyles;
+exports.mergeRefs = mergeRefs;
+exports.useAtlantisFormFieldName = useAtlantisFormFieldName;
+exports.useFormFieldWrapperStyles = useFormFieldWrapperStyles;