@jobber/components 7.5.0 → 7.7.0

package/dist/docs/InputDate/InputDate.md

@@ -19,10 +19,8 @@ date.
 ```tsx
 import React from "react";
 import { InputDate } from "@jobber/components/InputDate";
-// eslint-disable-next-line import/no-deprecated
-import type { InputDateProps } from "../InputDate.types";
+import type { InputDateProps } from "@jobber/components/InputDate";
 
-// eslint-disable-next-line import/no-deprecated
 export function InputDateDisabledExample(props: InputDateProps) {
   return <InputDate placeholder="Start Date" disabled={true} {...props} />;
 }
@@ -42,7 +40,6 @@ export function InputDateInvalidExample(props: InputDateProps) {
       error="Start Date is required"
       invalid={true}
       {...props}
-      version={2}
     />
   );
 }
@@ -116,28 +113,43 @@ at the root of the application, populated with the applicable value.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `onChange` | `(newValue: Date) => void` | Yes | — | onChange handler that provides the new value (or event) |
+| `onChange` | `(newValue: Date, event?: ChangeEvent<HTMLInputElement>) => void` | Yes | — | Callback for value changes. @param newValue - The new Date value @param event - Optional change event |
 | `align` | `"center" | "right"` | No | — | Determines the alignment of the text inside the input. |
+| `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). |
 | `description` | `ReactNode` | No | — | Further description of the input, can be used for a hint. |
-| `disabled` | `boolean` | No | — | Disable the input |
+| `disabled` | `boolean` | No | — | Whether the input is disabled. |
 | `emptyValueLabel` | `string` | No | — | Text to display instead of a date value |
-| `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 | — |  |
+| `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. |
 | `invalid` | `boolean` | No | — | Highlights the field red to indicate an error. |
-| `loading` | `boolean` | No | — | Show a spinner to indicate loading |
+| `loading` | `boolean` | No | — | Show a spinner to indicate loading. |
 | `maxDate` | `Date` | No | — | The maximum selectable date. |
 | `minDate` | `Date` | No | — | The minimum selectable date. |
-| `name` | `string` | No | — | Name of the input. |
-| `onBlur` | `(event?: FocusEvent<Element, Element>) => void` | No | — | Blur callback. |
-| `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 |
+| `name` | `string` | No | — | The name attribute for the input element. |
+| `onBlur` | `(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void` | No | — | Blur event handler. |
+| `onEnter` | `(event: KeyboardEvent<Element>) => void` | No | — | @deprecated Use `onKeyDown` or `onKeyUp` instead. |
+| `onFocus` | `(event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void` | No | — | Focus event handler. |
+| `onKeyDown` | `(event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Key down event handler. |
+| `onKeyUp` | `(event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Key up 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... |
-| `readonly` | `boolean` | No | — | Prevents users from editing the value. |
+| `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
+| `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `required` | `boolean` | No | — | Whether the input is required before form submission. |
+| `role` | `string` | No | — | Role attribute for accessibility. |
 | `showIcon` | `boolean` | No | `true` | Whether to show the calendar icon |
-| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
 | `size` | `"small" | "large"` | No | — | Adjusts the interface to either have small or large spacing. |
-| `validations` | `RegisterOptions` | No | — | Show an error message above the field. This also highlights the the field red if an error message shows up. |
+| `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `value` | `Date` | No | — | A Date object value (e.g., `new Date("11/11/2011")`) |
-| `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... |

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,15 @@ 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   |
+| 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 +37,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 +115,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');
@@ -55,7 +56,7 @@ var Grid = require('./Grid-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var InlineLabel = require('./InlineLabel-cjs.js');
 var InputAvatar = require('./InputAvatar-cjs.js');
-var InputDate_index = require('./InputDate/index.cjs');
+var InputDate = require('./InputDate-cjs.js');
 var InputEmail_index = require('./InputEmail/index.cjs');
 var InputFile = require('./InputFile-cjs.js');
 var InputGroup = require('./InputGroup-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;
@@ -282,7 +283,7 @@ exports.Grid = Grid.Grid;
 exports.Heading = Heading.Heading;
 exports.InlineLabel = InlineLabel.InlineLabel;
 exports.InputAvatar = InputAvatar.InputAvatar;
-exports.InputDate = InputDate_index.InputDate;
+exports.InputDate = InputDate.InputDate;
 exports.InputEmail = InputEmail_index.InputEmail;
 exports.InputFile = InputFile.InputFile;
 exports.InputFileContentContext = InputFile.InputFileContentContext;
@@ -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';
@@ -53,7 +54,7 @@ export { G as GRID_TEST_ID, a as Grid } from './Grid-es.js';
 export { H as Heading } from './Heading-es.js';
 export { I as InlineLabel } from './InlineLabel-es.js';
 export { I as InputAvatar } from './InputAvatar-es.js';
-export { InputDate } from './InputDate/index.mjs';
+export { I as InputDate } from './InputDate-es.js';
 export { InputEmail } from './InputEmail/index.mjs';
 export { I as InputFile, a as InputFileContentContext, u as updateFiles, b as useInputFileContentContext } from './InputFile-es.js';
 export { I as InputGroup } from './InputGroup-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';