@jobber/components 8.3.0 → 8.5.0

package/dist/Menu-es.js

@@ -2,7 +2,7 @@ import React__default, { useState, useRef, useId, useMemo } from 'react';
 import { useWindowDimensions, useRefocusOnActivator } from '@jobber/hooks';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useFloating, c as useDismiss, j as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, c as useDismiss, k as useListNavigation, d as useInteractions, F as FloatingPortal } from './floating-ui.react-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';

package/dist/MenuSubmenuTrigger-es.js

@@ -5,7 +5,7 @@ import { k as createChangeEventDetails, B as closePress, C as isMouseLikePointer
 import { a as useButton, u as useBaseUiId, b as useCompositeRootContext } from './useBaseUiId-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { b as isElement, k as getWindow, a as isHTMLElement, d as isLastTraversableNode, e as getParentNode } from './floating-ui.utils.dom-es.js';
-import { e as evaluate, o as getPaddingObject, n as getAlignmentAxis, k as getAlignment, q as getAxisLength, p as clamp, g as getSide, b as getSideAxis } from './index.esm-es.js';
+import { e as evaluate, h as getPaddingObject, b as getAlignmentAxis, d as getAlignment, q as getAxisLength, n as clamp, c as getSide, g as getSideAxis } from './index.esm-es.js';
 import { u as useFloating$1, h as hide$1, f as flip, d as size, b as autoUpdate, o as offset, s as shift, l as limitShift } from './floating-ui.react-dom-es.js';
 import * as ReactDOM from 'react-dom';
 

package/dist/Spinner/Spinner.d.ts

@@ -1,4 +1,7 @@
 import React from "react";
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 interface SpinnerProps {
     /**
      * Specifies the size of the spinner
@@ -12,5 +15,8 @@ interface SpinnerProps {
      */
     readonly inline?: boolean;
 }
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 export declare function Spinner({ size, inline }: SpinnerProps): React.JSX.Element;
 export {};

package/dist/Spinner-cjs.js

@@ -5,6 +5,9 @@ var classnames = require('classnames');
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 function Spinner({ size = "base", inline }) {
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",

package/dist/Spinner-es.js

@@ -3,6 +3,9 @@ import classnames from 'classnames';
 
 var styles = {"spinner":"_6hfmGZoXNyg-","animationSpin":"aT3CETCJ4hQ-","small":"bMfynkzmlL4-","inline":"NA68eWblbLo-","spinning":"aCBq1WrkI4M-"};
 
+/**
+ * @deprecated Use `ActivityIndicator` instead.
+ */
 function Spinner({ size = "base", inline }) {
     const spinnerStyles = classnames(styles.spinner, {
         [styles.small]: size === "small",

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -0,0 +1,67 @@
+# Activity Indicator
+
+`ActivityIndicator` is used to communicate an **indeterminate** activity the
+user cannot directly control or measure — loading, fetching, or waiting on an
+external system.
+
+Use `ActivityIndicator` when the loading time or fraction of progress is
+unknown. If you know the fraction of progress (for example, "3 of 4 files
+uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
+will subsume `ProgressBar` under the new naming is forthcoming.
+
+## Design & usage guidelines
+
+The default `ActivityIndicator` size is `base` (32px) and can be used in most
+cases. The `small` size (16px) should be used on individual elements of an
+interface (e.g. inside a `Button` or `Card`) or when sitting next to short
+inline text.
+
+Layout is the consumer's responsibility — `ActivityIndicator` does not expose
+an `inline` prop. Place it inside your own flex / inline-block container, or
+pass a `className` / `style`, to control surrounding layout.
+
+## Accessibility
+
+`ActivityIndicator` announces itself politely to assistive technology:
+
+* `role="status"` marks the element as a polite live region, appropriate for
+  a non-urgent loading state.
+* `aria-label` defaults to the literal English string `"Loading"`. Pass a
+  custom `ariaLabel` to localize or to describe the specific activity
+  (e.g. `ariaLabel="Uploading file"`).
+
+The indicator does not participate in the keyboard tab order.
+
+### Reduced motion
+
+When the user's operating system reports
+[`prefers-reduced-motion: reduce`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion),
+the indicator hides its rocking and rotating layers, repaints a single
+static ring in the icon foreground colour, and gently pulses its opacity so
+the indicator still reads as "busy" without rotational motion.
+
+## Relationship to Spinner
+
+The legacy [Spinner](../Spinner/Spinner.md) component remains available and
+unchanged. New code should prefer `ActivityIndicator`. A follow-up change is
+expected to deprecate `Spinner` in favour of `ActivityIndicator`.
+
+## Mobile
+
+On mobile (`@jobber/components-native`), `ActivityIndicator` uses the
+[ActivityIndicator](https://reactnative.dev/docs/activityIndicator) core
+component from React Native.
+
+## Mockup
+
+
+## Props
+
+### Web
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ariaLabel` | `string` | No | `Loading` | Accessible label exposed via `aria-label` on the root element. Override to localize or to describe the specific activ... |
+| `className` | `string` | No | — | Custom class name merged onto the root element alongside the component's own classes. |
+| `size` | `"base" | "small"` | No | `base` | Visual size. `base` renders at 32px, `small` renders at 16px. |
+| `style` | `CSSProperties` | No | — | Custom inline styles applied to the root element. |

package/dist/docs/Autocomplete/{AutocompleteV2.md → Autocomplete.md}

@@ -25,7 +25,7 @@ import {
   defineMenu,
 } from "@jobber/components/Autocomplete";
 
-export const AutocompleteV2SectionedExample = () => {
+export const AutocompleteSectionedExample = () => {
   const [value, setValue] = useState<OptionLike | undefined>();
   const [inputValue, setInputValue] = useState("");
   const menu = defineMenu<OptionLike>([
@@ -61,7 +61,6 @@ export const AutocompleteV2SectionedExample = () => {
 
   return (
     <Autocomplete
-      version={2}
       placeholder="Search"
       value={value}
       onChange={setValue}
@@ -108,7 +107,7 @@ const simpleOptions: OptionLike[] = [
   { label: "HVAC Installation" },
 ];
 
-export function AutocompleteV2HeaderFooterStoryExample() {
+export function AutocompleteHeaderFooterStoryExample() {
   const [value, setValue] = useState<OptionLike | undefined>();
   const [inputValue, setInputValue] = useState("");
   const [lastAction, setLastAction] = useState("");
@@ -117,7 +116,6 @@ export function AutocompleteV2HeaderFooterStoryExample() {
     <Content>
       <Heading level={4}>Persistent header/footer actions</Heading>
       <Autocomplete
-        version={2}
         placeholder="Search"
         value={value}
         onChange={setValue}
@@ -151,7 +149,9 @@ export function AutocompleteV2HeaderFooterStoryExample() {
 
 ### Actions
 
-Actions may be placed either on the "flat" list of options or in individual sections. They are accessible by keyboard using arrow keys and Enter to select the highlighted action.
+Actions may be placed either on the "flat" list of options or in individual
+sections. They are accessible by keyboard using arrow keys and Enter to select
+the highlighted action.
 
 ```tsx
 import React, { useState } from "react";
@@ -190,7 +190,7 @@ const simpleOptionsThirdSection: OptionLike[] = [
   { label: "Gutter Cleaning" },
 ];
 
-export function AutocompleteV2WithActionsExample() {
+export function AutocompleteWithActionsExample() {
   const [value, setValue] = useState<OptionLike | undefined>();
   const [inputValue, setInputValue] = useState("");
   const [lastAction, setLastAction] = useState("");
@@ -199,7 +199,6 @@ export function AutocompleteV2WithActionsExample() {
     <Content>
       <Heading level={4}>Section with Actions</Heading>
       <Autocomplete
-        version={2}
         placeholder="Search"
         value={value}
         onChange={setValue}
@@ -271,7 +270,7 @@ import { Button } from "@jobber/components/Button";
 import { Content } from "@jobber/components/Content";
 import { Heading } from "@jobber/components/Heading";
 
-export const AutocompleteV2EmptyActionsExample = () => {
+export const AutocompleteEmptyActionsExample = () => {
   const [value, setValue] = useState<OptionLike | undefined>();
   const [inputValue, setInputValue] = useState("");
   const [open, setOpen] = useState(false);
@@ -281,7 +280,6 @@ export const AutocompleteV2EmptyActionsExample = () => {
     <Content>
       <Heading level={5}>Empty actions</Heading>
       <Autocomplete
-        version={2}
         placeholder="Try a term with no matches"
         value={value}
         onChange={setValue}
@@ -323,8 +321,8 @@ export const AutocompleteV2EmptyActionsExample = () => {
 
 ### Stay Open Behavior
 
-All interactive elements (actions, headers, footers, empty actions) can be individually configured to keep the menu open when used if
-desired.
+All interactive elements (actions, headers, footers, empty actions) can be
+individually configured to keep the menu open when used if desired.
 
 ```tsx
 import React, { useState } from "react";
@@ -336,7 +334,7 @@ import {
 import { Content } from "@jobber/components/Content";
 import { Heading } from "@jobber/components/Heading";
 
-export const AutocompleteV2StayOpenExample = () => {
+export const AutocompleteStayOpenExample = () => {
   const [value, setValue] = useState<OptionLike | undefined>();
   const [inputValue, setInputValue] = useState("");
 
@@ -344,7 +342,6 @@ export const AutocompleteV2StayOpenExample = () => {
     <Content>
       <Heading level={5}>Stay Open Action</Heading>
       <Autocomplete
-        version={2}
         placeholder="Search"
         value={value}
         onChange={setValue}
@@ -409,7 +406,7 @@ const simpleOptions: OptionLike[] = [
   { label: "HVAC Installation" },
 ];
 
-export function AutocompleteV2FreeFormStoryExample() {
+export function AutocompleteFreeFormStoryExample() {
   const [value, setValue] = useState<OptionLike | undefined>();
   const [inputValue, setInputValue] = useState("");
 
@@ -417,7 +414,6 @@ export function AutocompleteV2FreeFormStoryExample() {
     <Content>
       <Heading level={4}>Free-form create</Heading>
       <Autocomplete
-        version={2}
         placeholder="Type anything"
         value={value}
         onChange={setValue}
@@ -468,43 +464,6 @@ different from the rest.
 
 ## Configuration
 
-### Legacy to Supported
-
-Legacy has a single mechanism to update the options. Only `initialOptions` are
-directly controlled, then `getOptions` is used to populate the options based on
-the input term. This is managed with internal state that creates barriers as to
-what can be done with the experience.
-
-Now, Autocomplete is entirely controlled, having both sets of `inputValue`,
-`onInputChange`, `value` and `onChange`.
-
-Filtering is now built into Autocomplete. It has a default filter of comparing
-the input value to the case insensitive "label" value. If using custom data,
-where we might want to search a different field, or even multiple fields,
-providing filterOptions allows customization of the filter logic. For cases with
-async data it is recommended to opt out of filtering entirely, and manage that
-yourself with the results you return and pass as options. This can be done with
-`filterOptions={false}`.
-
-Autocomplete has been decoupled from React Hook Form, and has no built in
-validation. To validate, you must create your own logic and use either `error`
-or `invalid` to set the visually invalid state on the input. `onBlur`, `value`,
-`onChange`, `inputValue`, `onInputChange` provide all the necessary callbacks to
-determine the state of the Autocomplete. These callbacks will integrate with a
-schema like Zod, and an external instance of RHF.
-
-Filtering is now built in, and not necessary to implement yourself. You are able
-to opt out or customize it if desired, see more about this in the filtering
-section.
-
-While sections still exist, the additional pre defined "details" and
-"description" variations are not directly available by default. They can be
-re-created with custom data, custom layouts, and modified option/section styles.
-
-All options will by default continue to be visible after making a selection
-whereas Legacy would limit your options to the selected option if a selection is
-present.
-
 ### Structure, `menu` and `type`s
 
 The `menu` prop accepts 2 different possible "top level" types: "options" and
@@ -524,61 +483,10 @@ Options can be selected with the enter key if it active/highlighted, or with a
 mouse click. Space will do nothing because focus is intentionally kept in the
 input for further refinements to the search term.
 
-Legacy Section vs Supported
+Example
 
 ```
- const SectionHeadingOptions = [
-   {
-     label: "Ships",
-     options: [
-       { value: 1, label: "Sulaco" },
-       { value: 2, label: "Nostromo" },
-       { value: 3, label: "Serenity" },
-       { value: 4, label: "Sleeper Service" },
-       { value: 5, label: "Enterprise" },
-       { value: 6, label: "Enterprise-D" },
-     ],
-   },
-   {
-     label: "Planets",
-     options: [
-       { value: 7, label: "Endor" },
-       { value: 8, label: "Vulcan" },
-       { value: 9, label: "Bespin" },
-       { value: 10, label: "Tatooine" },
-     ],
-   },
- ];
-
- const [value, setValue] = useState<Option | undefined>();
-
- return (
-   <Autocomplete
-     initialOptions={SectionHeadingOptions}
-     placeholder="Search for something under a section heading"
-     value={value}
-     onChange={newValue => setValue(newValue)}
-     getOptions={getOptions}
-   />
- );
-
- function getOptions(text: string) {
-   if (text === "") {
-     return headingOptions;
-   }
-   const filterRegex = new RegExp(text, "i");
-
-   return headingOptions.map(section => ({
-     ...section,
-     options: section.options.filter(option =>
-       option.label.match(filterRegex),
-     ),
-   }));
- }
-
- // VERSION 2 BELOW
-
- const sectionMenu = [
+const sectionMenu = [
    {
      type: "section",
      label: "Ships",
@@ -608,7 +516,6 @@ Legacy Section vs Supported
 
  return(
    <Autocomplete
-     version={2}
      menu={sectionMenu}
      value={value}
      onChange={setValue}
@@ -769,7 +676,6 @@ This is not yet implemented fully. Avoid using.
 | `onChange` | `((value: AutocompleteValue<Value, Multiple>) => void) | ((value: AutocompleteValue<Value, Multiple>) => void)` | Yes | — | Callback invoked when the selection value changes. This is called when we consider a selection "committed" - The user... |
 | `onInputChange` | `(value: string) => void` | Yes | — | Callback invoked when the input value changes. |
 | `value` | `Value[] | OptionLike` | Yes | — | The currently selected value of the Autocomplete. Single-select: undefined indicates no selection |
-| `version` | `2` | Yes | — | Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first. |
 | `allowFreeForm` | `boolean` | No | — | Whether the autocomplete allows free-form input. When true, the input value is not restricted to the options * in the... |
 | `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... |

package/dist/docs/Banner/Banner.md

@@ -389,7 +389,7 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 | `dismissible` | `boolean` | No | `true` | Set to false to hide the dismiss button |
 | `icon` | `IconNames` | No | — | Use to override the default status Icon |
 | `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
-| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | Accepts props for Button. Default action uses a 'subtle' Button |
+| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | Accepts props for Button. Default action uses a 'subtle' Button |
 
 #### Banner.Action
 
@@ -441,8 +441,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `name` | `IconNames` | No | — | The icon to show. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |

package/dist/docs/Box/Box.md

@@ -206,9 +206,9 @@ defaults to respecting theme/modes.
 | `alignItems` | `AlignItems` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `alignSelf` | `AlignSelf` | No | — | This feature is well established and works across many devices and browser versions. It’s been available across brows... |
 | `as` | `"article" | "aside" | "div" | "main" | "section" | "span"` | No | `div` |  |
-| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | ... 269 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "disabled" | "icon" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 269 more ... | "client--onSurface"` | No | — |  |
 | `direction` | `FlexDirection` | No | — |  |
 | `gap` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | — |  |
 | `height` | `BoxDimension` | No | `auto` |  |

package/dist/docs/Chips/Chips.md

@@ -40,7 +40,7 @@ user, leaving all selections blank.
 ### Add/dismiss selection
 
 > **WARNING:** "Selection" Chips have been deprecated and are no longer supported. Instead,
-> please use [Autocomplete](../Autocomplete/AutocompleteV2.md) with the "multiple" prop.
+> please use [Autocomplete](../Autocomplete/Autocomplete.md) with the "multiple" prop.
 
 When the user will be selecting one or more items by inputting their own Chip
 options with, use the dismissible Chip.

package/dist/docs/DataList/DataList.md

@@ -552,7 +552,7 @@ objects that will define the sorting options for the column.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `message` | `string` | Yes | — | The message that shows when the DataList is empty. |
-| `action` | `ReactElement<{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }, string | JSXElementConstructor<...>>` | No | — | The action that shows when the DataList is empty.  This only accepts a Button component. Adding a non-Button componen... |
+| `action` | `ReactElement<{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }, string | JSXElementConstructor<...>>` | No | — | The action that shows when the DataList is empty.  This only accepts a Button component. Adding a non-Button componen... |
 | `customRender` | `(emptyState: Omit<DataListEmptyStateProps, "customRender">) => ReactNode` | No | — | Custom render function for the empty state.  If provided, this function will be used to render the empty state instea... |
 | `type` | `"empty" | "filtered"` | No | — | Determine the type of empty state to show.  By default, it will show the "empty" state when there is no data. If you ... |
 

package/dist/docs/Icon/Icon.md

@@ -582,7 +582,7 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/InputGroup/InputGroup.md

@@ -17,7 +17,7 @@ issues caused by nesting. Any non-horizontal nested groups will log an error to
 the console and not be rendered.
 
 If one of the InputGroup fields has a preset value from a larger list of
-options, it is possible to use [Autocomplete](../Autocomplete/AutocompleteV2.md) within
+options, it is possible to use [Autocomplete](../Autocomplete/Autocomplete.md) within
 InputGroup.
 
 

package/dist/docs/Menu/Menu.md

@@ -502,7 +502,7 @@ and should not be used for new implementations.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"task" | "text" | "warning" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
 | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
 | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
 | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |

package/dist/docs/Modal/Modal.md

@@ -290,9 +290,9 @@ screen.getByRole("dialog", { name: /Billing Settings/i });
 | `dismissible` | `boolean` | No | `true` |  |
 | `onRequestClose` | `() => void` | No | — |  |
 | `open` | `boolean` | No | `false` |  |
-| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
-| `secondaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
+| `primaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
+| `secondaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
 | `size` | `"fullScreen" | "large" | "small"` | No | — |  |
-| `tertiaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly size?: ButtonSize; readonly ariaLabel?: string; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
+| `tertiaryAction` | `{ onClick?: never; external?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
 | `title` | `string` | No | `false` |  |
 | `version` | `1` | No | — |  |

package/dist/docs/MultiSelect/MultiSelect.md

@@ -1,7 +1,7 @@
 # Multi Select
 
 > **WARNING:** This component has been deprecated and no longer supported. Instead, please
-> use [Autocomplete](../Autocomplete/AutocompleteV2.md) with the "mutliple" prop, or
+> use [Autocomplete](../Autocomplete/Autocomplete.md) with the "mutliple" prop, or
 > [Combobox](../Combobox/Combobox.md)
 
 The MultiSelect component gives our users the possibility to select multiple

package/dist/docs/Spinner/Spinner.md

@@ -1,5 +1,13 @@
 # Spinner
 
+> **Deprecated.** Use
+> [ActivityIndicator](../ActivityIndicator/ActivityIndicator.md) for new work.
+> `ActivityIndicator` is the supported indeterminate loading indicator going
+> forward — it offers the same semantic with a cleaner prop surface, a polite
+> `role="status"`, theme-adaptive tokens, Material-style three-layer
+> animation, and a `prefers-reduced-motion` fallback. `Spinner` continues to
+> work unchanged for existing call sites.
+
 Spinner is used to indicate the loading of content where the actual amount of
 loading time or progress is unknown.
 
@@ -32,7 +40,7 @@ If the amount of progress or loading time is known, use
 process.
 
 To indicate loading content in mobile applications, refer to
-[ActivityIndicator](/components/ActivityIndicator).
+[ActivityIndicator](../ActivityIndicator/ActivityIndicator.md).
 
 
 ## Props

package/dist/docs/index.md

@@ -1,9 +1,9 @@
+[ActivityIndicator](./ActivityIndicator/ActivityIndicator.md)
 [AnimatedPresence](./AnimatedPresence/AnimatedPresence.md)
 [AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
 [Animation](./Animation/Animation.md)
 [AtlantisThemeContext](./AtlantisThemeContext/AtlantisThemeContext.md)
-[AutocompleteV1](./Autocomplete/AutocompleteV1.md)
-[AutocompleteV2](./Autocomplete/AutocompleteV2.md)
+[Autocomplete](./Autocomplete/Autocomplete.md)
 [Avatar](./Avatar/Avatar.md)
 [Banner](./Banner/Banner.md)
 [Borders](./Borders/Borders.md)

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   |
-| Modal        | `import { Modal } from "@jobber/components/Modal"`               | `version={2}` — uses `Modal.Provider` composition |
+| Component | Import                                             | v2 prop                                           |
+| --------- | -------------------------------------------------- | ------------------------------------------------- |
+| Modal     | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                           | Notes                                    |
-| --------------------- | ----------------------------------------------------- | ---------------------------------------- |
-| `MultiSelect`         | `Autocomplete` v2 with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.   |
-| `Chips` (dismissible) | `Autocomplete` v2 with `multiple` prop                | Dismissible Chips variant is deprecated. |
+| Deprecated            | Replacement                                        | Notes                                    |
+| --------------------- | -------------------------------------------------- | ---------------------------------------- |
+| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.   |
+| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                | Dismissible Chips variant is deprecated. |
 
 ### Deprecated props on still-supported components
 
@@ -94,8 +93,7 @@ inputs will not give you v2's controlled API and is not supported.
 
 v2 inputs do not run validation themselves. To show an error state, drive it
 from your own state and pass `invalid` (boolean) and/or `error` (string message)
-on the input. The same applies to `Autocomplete` v2 — pass `error` / `invalid`
-rather than expecting the component to validate.
+on the input.
 
 ## Compound components — use the documented composition
 

package/dist/floating-ui.react-dom-es.js

@@ -1,4 +1,4 @@
-import { e as evaluate, g as getSide, b as getSideAxis, c as getOppositePlacement, d as getExpandedPlacements, h as getOppositeAxisPlacements, j as getAlignmentSides, k as getAlignment, m as min, l as max, n as getAlignmentAxis, o as getPaddingObject, r as rectToClientRect, p as clamp, q as getAxisLength, s as sides, u as getOppositeAxis, v as placements, w as getOppositeAlignmentPlacement, x as createCoords, y as round, f as floor } from './index.esm-es.js';
+import { g as getSideAxis, b as getAlignmentAxis, c as getSide, d as getAlignment, e as evaluate, h as getPaddingObject, r as rectToClientRect, j as getOppositePlacement, k as getExpandedPlacements, l as getOppositeAxisPlacements, m as getAlignmentSides, n as clamp, o as min, p as max, q as getAxisLength, s as sides, u as getOppositeAxis, v as placements, w as getOppositeAlignmentPlacement, x as createCoords, y as round, f as floor } from './index.esm-es.js';
 import { h as getOverflowAncestors, b as isElement, k as getWindow, l as getFrameElement, f as getComputedStyle$1, m as getDocumentElement, a as isHTMLElement, j as isWebKit, n as isTopLayer, g as getNodeName, o as isOverflowElement, p as getNodeScroll, e as getParentNode, d as isLastTraversableNode, q as isTableElement, r as isContainingBlock, s as getContainingBlock } from './floating-ui.utils.dom-es.js';
 import * as React from 'react';
 import { useLayoutEffect } from 'react';

package/dist/floating-ui.react-es.js

@@ -3233,4 +3233,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useListNavigation as j, useClick as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };
+export { FloatingPortal as F, useFloatingParentNodeId as a, useFloatingNodeId as b, useDismiss as c, useInteractions as d, FloatingTree as e, FloatingNode as f, useRole as g, FloatingFocusManager as h, FloatingOverlay as i, useClick as j, useListNavigation as k, useTransitionStyles as l, FloatingArrow as m, useFloating as u };

package/dist/index.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
+var ActivityIndicator = require('./ActivityIndicator-cjs.js');
 var AnimatedPresence = require('./AnimatedPresence-cjs.js');
 var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
 var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
 var updateTheme = require('./updateTheme-cjs.js');
-var Autocomplete_index = require('./Autocomplete/index.cjs');
+var Autocomplete = require('./Autocomplete-cjs.js');
 var Avatar = require('./Avatar-cjs.js');
 var Banner = require('./Banner-cjs.js');
 var Box = require('./Box-cjs.js');
@@ -93,6 +94,7 @@ var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
+require('classnames');
 require('framer-motion');
 require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
@@ -110,7 +112,6 @@ require('./index.esm-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
 require('./floating-ui.react-dom-cjs.js');
-require('classnames');
 require('./maxHeight-cjs.js');
 require('./tslib.es6-cjs.js');
 require('react-hook-form');
@@ -205,6 +206,7 @@ function isNormalClick(evt) {
         !evt.altKey);
 }
 
+exports.ActivityIndicator = ActivityIndicator.ActivityIndicator;
 exports.AnimatedPresence = AnimatedPresence.AnimatedPresence;
 exports.AnimatedSwitcher = AnimatedSwitcher.AnimatedSwitcher;
 exports.AtlantisContext = AtlantisContext.AtlantisContext;
@@ -215,7 +217,7 @@ exports.THEME_CHANGE_EVENT = AtlantisThemeContext.THEME_CHANGE_EVENT;
 exports.atlantisThemeContextDefaultValues = AtlantisThemeContext.atlantisThemeContextDefaultValues;
 exports.useAtlantisTheme = AtlantisThemeContext.useAtlantisTheme;
 exports.updateTheme = updateTheme.updateTheme;
-exports.Autocomplete = Autocomplete_index.Autocomplete;
+exports.Autocomplete = Autocomplete.Autocomplete;
 exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+export * from "./ActivityIndicator";
 export * from "./AnimatedPresence";
 export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ActivityIndicator";
 export * from "./AnimatedPresence";
 export * from "./AnimatedSwitcher";
 export * from "./AtlantisContext";