@jobber/components 9.13.2 → 9.14.1

package/dist/FormField/FormFieldAffix.d.ts

@@ -1,11 +1,10 @@
 import React from "react";
 import type { RefObject } from "react";
-import type { XOR } from "ts-xor";
-import type { Affix, FormFieldProps, Suffix } from "./FormFieldTypes";
-interface AffixLabelProps extends Affix {
+import type { AffixProp, FormFieldProps } from "./FormFieldTypes";
+type AffixLabelProps = AffixProp & {
     readonly labelRef: RefObject<HTMLDivElement | null>;
     readonly variation?: "prefix" | "suffix";
-}
+};
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
@@ -13,8 +12,8 @@ export declare function AffixLabel({ label, variation, labelRef, }: AffixLabelPr
 /**
  * @internal Reach out to UX Foundations if using this component since it is possible it might change
  */
-interface AffixIconProps extends Pick<FormFieldProps, "size"> {
+interface AffixIconProps extends Pick<FormFieldProps, "size" | "disabled"> {
     readonly variation?: "prefix" | "suffix";
 }
-export declare function AffixIcon({ icon, onClick, ariaLabel, variation, size, }: AffixIconProps & XOR<Affix, Suffix>): React.JSX.Element | null;
+export declare function AffixIcon({ icon, onClick, ariaLabel, variation, size, disabled, }: AffixIconProps & AffixProp): React.JSX.Element | null;
 export {};

package/dist/FormField/FormFieldTypes.d.ts

@@ -1,26 +1,14 @@
 import type { ChangeEvent, ReactNode, RefObject } from "react";
 import type React from "react";
-import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
-import type { IconNames } from "../Icon";
+import type { AffixProp } from "../sharedHelpers/types";
+export type { Affix, AffixProp, ClickableAffix, Suffix, } from "../sharedHelpers/types";
 export type FormFieldTypes = "text" | "password" | "number" | "time" | "textarea" | "select" | "tel" | "email";
 export type KeyBoardTypes = "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
 export type AutocompleteTypes = "on" | "one-time-code" | "address-line1" | "address-line2";
 export interface FieldActionsRef {
     setValue(value: string | number): void;
 }
-export interface Affix {
-    readonly label?: string;
-    readonly icon?: IconNames;
-}
-interface BaseSuffix extends Affix {
-    readonly icon: IconNames;
-    onClick?(): void;
-}
-export interface Suffix extends BaseSuffix {
-    onClick(): void;
-    readonly ariaLabel: string;
-}
 export interface CommonFormFieldProps {
     /**
      * A unique identifier for the input.
@@ -141,13 +129,13 @@ export interface FormFieldProps extends CommonFormFieldProps {
      */
     readonly maxLength?: number;
     /**
-     * Adds a prefix label and icon to the field
+     * Adds a prefix label and icon with an optional action to the field
      */
-    readonly prefix?: Affix;
+    readonly prefix?: AffixProp;
     /**
      * Adds a suffix label and icon with an optional action to the field
      */
-    readonly suffix?: XOR<Affix, Suffix>;
+    readonly suffix?: AffixProp;
     /**
      * Specifies the minimum numerical or date value that a user can type
      */
@@ -194,4 +182,3 @@ export interface FormFieldProps extends CommonFormFieldProps {
      */
     readonly pattern?: string;
 }
-export {};

package/dist/FormFieldWrapper-cjs.js

@@ -26,24 +26,14 @@ function AffixLabel({ label, variation = "prefix", labelRef, }) {
         return null;
     return (React.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
-function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, disabled, }) {
     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" }))));
+    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize, disabled: disabled })) : (React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
 }
 
 function FormFieldDescription({ id, description, visible = true, }) {
@@ -192,7 +182,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     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(AffixIcon, Object.assign({}, prefix, { size: size, disabled: disabled })),
                 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
@@ -201,7 +191,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
                     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(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size, disabled: disabled }))),
             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 })));

package/dist/FormFieldWrapper-es.js

@@ -24,24 +24,14 @@ function AffixLabel({ label, variation = "prefix", labelRef, }) {
         return null;
     return (React__default.createElement("div", { ref: labelRef, className: affixLabelClass }, label));
 }
-function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, }) {
+function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, disabled, }) {
     const affixIconClass = classnames(formFieldStyles.affixIcon, {
         [formFieldStyles.suffix]: variation === "suffix",
     });
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
         return null;
-    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(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__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize, disabled: disabled })) : (React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
 }
 
 function FormFieldDescription({ id, description, visible = true, }) {
@@ -190,7 +180,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
     return (React__default.createElement("div", { className: containerClasses },
         React__default.createElement("div", { className: wrapperClasses, style: wrapperInlineStyle, "data-testid": "Form-Field-Wrapper", ref: wrapperRef },
             React__default.createElement(FormFieldInputHorizontalWrapper, null,
-                React__default.createElement(AffixIcon, Object.assign({}, prefix, { size: size })),
+                React__default.createElement(AffixIcon, Object.assign({}, prefix, { size: size, disabled: disabled })),
                 React__default.createElement(FormFieldInputWrapperStyles, null,
                     (showMiniLabel || !value) && (React__default.createElement(FormFieldLabel, { htmlFor: identifier, style: (prefixRef === null || prefixRef === void 0 ? void 0 : prefixRef.current) || (suffixRef === null || suffixRef === void 0 ? void 0 : suffixRef.current)
                             ? labelStyle
@@ -199,7 +189,7 @@ function FormFieldWrapper({ align, description, descriptionIdentifier, placehold
                     React__default.createElement(FormFieldWrapperMain, null, children),
                     React__default.createElement(AffixLabel, Object.assign({}, suffix, { labelRef: suffixRef, variation: "suffix" }))),
                 React__default.createElement(ClearAction, { onClick: onClear, visible: showClear }),
-                React__default.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size }))),
+                React__default.createElement(AffixIcon, Object.assign({}, suffix, { variation: "suffix", size: size, disabled: disabled }))),
             React__default.createElement(FormFieldWrapperToolbar, { toolbarVisibility: toolbarVisibility, isToolbarVisible: isToolbarVisible, toolbarAnimationEnd: toolbarAnimationEnd, toolbarAnimationStart: toolbarAnimationStart, toolbar: toolbar })),
         React__default.createElement(FormFieldDescription, { visible: !!description && !inline, id: descriptionIdentifier, description: description }),
         React__default.createElement(InputValidation, { message: error, visible: !!error && !inline })));

package/dist/docs/Autocomplete/Autocomplete.md

@@ -714,10 +714,10 @@ This is not yet implemented fully. Avoid using.
 | `onOpen` | `() => void` | No | — | Callback invoked when the menu opens. |
 | `openOnFocus` | `boolean` | No | `true` | Whether the menu should open when the input gains focus. Note: Clicking on the input will always open the menu. openO... |
 | `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. |
+| `prefix` | `AffixProp` | No | — | Adds a prefix label and icon with an optional action to the field. |
 | `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
 | `ref` | `Ref<HTMLInputElement | HTMLTextAreaElement>` | No | — |  |
 | `size` | `"large" | "small"` | 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. |
+| `suffix` | `AffixProp` | No | — | Adds a suffix label and icon with an optional action to the field. |
 | `UNSAFE_className` | `{ menu?: string; option?: string; section?: string; action?: string; input?: string; header?: string; footer?: string; selection?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_styles` | `{ menu?: CSSProperties; option?: CSSProperties; section?: CSSProperties; action?: CSSProperties; input?: CSSProperties; header?: CSSProperties; footer?: CSSProperties; selection?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

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 disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — | Accepts props for Button. Default action uses a 'subtle' Button |
+| `primaryAction` | `{ external?: never; onClick?: 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` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 275 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
-| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `backgroundColor` | `"disabled" | "success" | "warning" | "icon" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | "base-grey--500" | "base-grey--600" | "base-grey--700" | ... 279 more ... | "client--onSurface"` | No | — | Sets the background color of the icon. |
+| `color` | `"disabled" | "success" | "warning" | "icon" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 34 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` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 275 more ... | "client--onSurface"` | No | — |  |
+| `background` | `"disabled" | "success" | "warning" | "icon" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | "base-grey--500" | "base-grey--600" | "base-grey--700" | ... 279 more ... | "client--onSurface"` | No | — |  |
 | `border` | `"base" | "thick" | "thicker" | "thickest" | BoxBorderWidth` | No | — |  |
-| `borderColor` | `"disabled" | "icon" | "event" | "invoice" | "job" | "quote" | "request" | "task" | "text" | "visit" | "warning" | "success" | "base-grey--100" | "base-grey--200" | "base-grey--300" | ... 275 more ... | "client--onSurface"` | No | — |  |
+| `borderColor` | `"disabled" | "success" | "warning" | "icon" | "base-grey--100" | "base-grey--200" | "base-grey--300" | "base-grey--400" | "base-grey--500" | "base-grey--600" | "base-grey--700" | ... 279 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/DataList/DataList.md

@@ -553,7 +553,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 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... |
+| `action` | `ReactElement<{ external?: never; onClick?: 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/Dialog/Dialog.md

@@ -930,10 +930,10 @@ verify the result rather than expecting an exact match.
 |------|------|----------|---------|-------------|
 | `align` | `DialogActionsAlign` | No | `right` | Layout for the right-hand action group. |
 | `className` | `string` | No | — | Class name applied to the part's root element. |
-| `primary` | `{ 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; } | ... 35 more ... | (({ ...; } | ... 35 more ... | ReactElement<...>) & ({ ...; } | ....` | No | — | Primary action (right). |
-| `secondary` | `{ 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; } | ... 35 more ... | (({ ...; } | ... 35 more ... | ReactElement<...>) & ({ ...; } | ....` | No | — | Secondary action (right, subtle). |
+| `primary` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 35 more ... | (({ ...; } | ... 35 more ... | ReactElement<...>) & ({ ...; } | ....` | No | — | Primary action (right). |
+| `secondary` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 35 more ... | (({ ...; } | ... 35 more ... | ReactElement<...>) & ({ ...; } | ....` | No | — | Secondary action (right, subtle). |
 | `style` | `CSSProperties` | No | — | Inline styles applied to the part's root element. |
-| `tertiary` | `{ 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; } | ... 35 more ... | (({ ...; } | ... 35 more ... | ReactElement<...>) & ({ ...; } | ....` | No | — | Tertiary/destructive action (left). |
+| `tertiary` | `{ external?: never; onClick?: never; readonly name?: string; submit: never; readonly type?: ButtonType; readonly value?: string; readonly disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 35 more ... | (({ ...; } | ... 35 more ... | ReactElement<...>) & ({ ...; } | ....` | No | — | Tertiary/destructive action (left). |
 
 #### Dialog.Body
 

package/dist/docs/FilterPicker/FilterPicker.md

@@ -281,6 +281,6 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 |------|------|----------|---------|-------------|
 | `id` | `number | string` | Yes | — | A unique identifier for the option. |
 | `label` | `string` | Yes | — | The value to be visually displayed in the FilterPicker options list. |
-| `customRender` | `(option: Pick<FilterPickerOptionProps, "prefix" | "label" | "id"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
+| `customRender` | `(option: Pick<FilterPickerOptionProps, "prefix" | "id" | "label"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
 | `onClick` | `(option: FilterPickerOptionProps) => void` | No | — | Callback function invoked when the option is clicked. |
 | `prefix` | `ReactNode` | No | — | An optional component to be displayed before the label. |

package/dist/docs/Icon/Icon.md

@@ -192,6 +192,7 @@ export function IconSizesExample() {
 
 | Icon | `Name`             |
 | :--- | :----------------- |
+|      | `arrow`            |
 |      | `arrowDown`        |
 |      | `arrowLeft`        |
 |      | `arrowRight`       |
@@ -244,22 +245,23 @@ export function IconSizesExample() {
 
 ### Forms
 
-| Icon | `Name`         |
-| :--- | :------------- |
-|      | `checkbox`     |
-|      | `checklist`    |
-|      | `edit`         |
-|      | `editDisabled` |
-|      | `radioButton`  |
-|      | `star`         |
-|      | `starHalf`     |
-|      | `starFill`     |
-|      | `text`         |
-|      | `textBox`      |
-|      | `textField`    |
-|      | `toggle`       |
-|      | `dropdown`     |
-|      | `trash`        |
+| Icon | `Name`            |
+| :--- | :---------------- |
+|      | `checkbox`        |
+|      | `checklist`       |
+|      | `digestChecklist` |
+|      | `edit`            |
+|      | `editDisabled`    |
+|      | `radioButton`     |
+|      | `star`            |
+|      | `starHalf`        |
+|      | `starFill`        |
+|      | `text`            |
+|      | `textBox`         |
+|      | `textField`       |
+|      | `toggle`          |
+|      | `dropdown`        |
+|      | `trash`           |
 
 ### Status and support
 
@@ -346,6 +348,8 @@ export function IconSizesExample() {
 |      | `contactlessPayment` |
 |      | `cheque`             |
 |      | `cash`               |
+|      | `coin`               |
+|      | `handDollarSign`     |
 
 ### Work
 
@@ -479,6 +483,7 @@ export function IconSizesExample() {
 |      | `phoneEnd`          |
 |      | `phoneIncoming`     |
 |      | `phoneOutgoing`     |
+|      | `pieChart`          |
 |      | `pinned`            |
 |      | `presentation`      |
 |      | `priceTag`          |
@@ -620,7 +625,7 @@ necessary.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"disabled" | "success" | "warning" | "icon" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 34 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/InputEmail/InputEmail.md

@@ -68,12 +68,12 @@ If you are not worried about email address validation, consider using
 | `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer 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... |
-| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
+| `prefix` | `AffixProp` | No | — | Adds a prefix label and icon with an optional action to the field. |
 | `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. |
 | `size` | `"large" | "small"` | 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. |
+| `suffix` | `AffixProp` | No | — | Adds a suffix label and icon with an optional action to the field. |
 | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `value` | `string` | No | — | The current value of the input. |

package/dist/docs/InputPhoneNumber/InputPhoneNumber.md

@@ -80,11 +80,11 @@ edits the input.
 | `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
 | `pattern` | `string` | No | `(***) ***-****` | A pattern to specify the format to display the phone number in. For example if you want to display the format for [De... |
 | `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. |
+| `prefix` | `AffixProp` | No | — | Adds a prefix label and icon with an optional action to the field. |
 | `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. |
 | `size` | `"large" | "small"` | 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. |
+| `suffix` | `AffixProp` | No | — | Adds a suffix label and icon with an optional action to the field. |
 | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |

package/dist/docs/InputText/InputText.md

@@ -86,6 +86,10 @@ and align the input with
 With clearer guidance around the purpose of inputs, the user is able to better
 focus on the task at hand.
 
+Either affix can be given an `onClick` to make it an action, which renders the
+affix icon as a button. An actioned affix requires both an `icon` and an
+`ariaLabel` to name the button — affix labels are not actionable.
+
 ```tsx
 import React, { useState } from "react";
 import type { InputTextProps } from "@jobber/components/InputText";
@@ -128,7 +132,11 @@ export function InputTextPrefixSuffixExample(
       />
       <InputText
         placeholder="Search"
-        prefix={{ icon: "search" }}
+        prefix={{
+          icon: "search",
+          ariaLabel: "submit search",
+          onClick: () => alert("This could submit a search"),
+        }}
         value={search}
         onChange={handleSearchChange}
         suffix={{
@@ -354,7 +362,7 @@ export function InputTextKeyboardExample(
 | `onPointerUp` | `(event: PointerEvent<HTMLInputElement | HTMLTextAreaElement>) => void` | No | — | Pointer 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... |
-| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
+| `prefix` | `AffixProp` | No | — | Adds a prefix label and icon with an optional action to the field. |
 | `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
 | `ref` | `Ref<HTMLInputElement | HTMLTextAreaElement>` | 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. |
@@ -362,7 +370,7 @@ export function InputTextKeyboardExample(
 | `rows` | `RowRange | number` | No | — | Specifies the visible height of a long answer form field. Can be in the form of a single number to set a static heigh... |
 | `showMiniLabel` | `boolean` | No | `true` | When false, the placeholder text only serves as a standard placeholder and disappears when the user types, instead of... |
 | `size` | `"large" | "small"` | 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. |
+| `suffix` | `AffixProp` | No | — | Adds a suffix label and icon with an optional action to the field. |
 | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `toolbar` | `ReactNode` | No | — | Toolbar to render content below the input. |
 | `toolbarVisibility` | `"always" | "while-editing"` | No | — | Determines the visibility of the toolbar. |

package/dist/docs/InputTime/InputTime.md

@@ -82,12 +82,12 @@ as a mini label while editing or once a value is set.
 | `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer 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... |
-| `prefix` | `Affix` | No | — | Adds a prefix label and icon to the field. |
+| `prefix` | `AffixProp` | No | — | Adds a prefix label and icon with an optional action to the field. |
 | `readOnly` | `boolean` | No | — | Whether the input is read-only (HTML standard casing). |
 | `required` | `boolean` | No | — | Whether the input is required before form submission. |
 | `role` | `string` | No | — | Role attribute for accessibility. |
 | `size` | `"large" | "small"` | No | — | Adjusts the interface to either have small or large spacing. |
 | `step` | `number` | No | `60` | Granularity of the time input, in seconds. Matches the native HTML `step` attribute. Defaults to `60` so the input di... |
-| `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. |
+| `suffix` | `AffixProp` | No | — | Adds a suffix label and icon with an optional action to the field. |
 | `tabIndex` | `number` | No | — | Tab index for keyboard navigation. |
 | `value` | `Date` | No | — | Set the component to the given value. |

package/dist/docs/LegacySelect/LegacySelect.md

@@ -230,11 +230,11 @@ dropdown content is stylable; the closed value alignment is not.
 | `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 |
+| `prefix` | `AffixProp` | No | — | Adds a prefix label and icon with an optional action to the field |
 | `required` | `boolean` | No | — | Whether the input is required before form submission. |
 | `role` | `string` | No | — | Role attribute for accessibility. |
 | `size` | `"large" | "small"` | 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 |
+| `suffix` | `AffixProp` | No | — | Adds a suffix label and icon with an optional action to the field |
 | `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` | `number | string` | No | — |  |

package/dist/docs/Menu/Menu.md

@@ -506,7 +506,7 @@ and should not be used for new implementations.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `name` | `IconNames` | Yes | — | The icon to show. |
-| `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 33 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
+| `color` | `"disabled" | "success" | "warning" | "icon" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | "destructive" | ... 34 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

@@ -295,9 +295,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 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 | — |  |
+| `primaryAction` | `{ external?: never; onClick?: 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` | `{ external?: never; onClick?: 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 disabled?: boolean; readonly loading?: boolean; ... 17 more ...; readonly children?: never; } | ... 34 more ... | { ...; }` | No | — |  |
+| `tertiaryAction` | `{ external?: never; onClick?: 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/sharedHelpers/types.d.ts

@@ -1,6 +1,5 @@
 import type { AriaAttributes, ReactNode } from "react";
 import type React from "react";
-import type { XOR } from "ts-xor";
 import type { Clearable } from "@jobber/hooks";
 import type { IconNames } from "../Icon";
 export interface CommonAtlantisProps {
@@ -182,15 +181,20 @@ export interface HTMLInputBaseProps extends AriaInputProps {
 export interface Affix {
     readonly label?: string;
     readonly icon?: IconNames;
+    readonly ariaLabel?: never;
+    readonly onClick?: never;
 }
-interface BaseSuffix extends Affix {
+export interface ClickableAffix {
+    readonly label?: string;
     readonly icon: IconNames;
-    onClick?(): void;
-}
-export interface Suffix extends BaseSuffix {
-    onClick(): void;
     readonly ariaLabel: string;
+    onClick(): void;
 }
+export type AffixProp = Affix | ClickableAffix;
+/**
+ * @deprecated Use {@link ClickableAffix}.
+ */
+export type Suffix = ClickableAffix;
 /**
  * Common props shared across all rebuilt input components.
  * These are Atlantis-specific features not part of standard HTML inputs.
@@ -232,13 +236,13 @@ export interface RebuiltInputCommonProps {
      */
     readonly align?: "center" | "right";
     /**
-     * Adds a prefix label and icon to the field.
+     * Adds a prefix label and icon with an optional action to the field.
      */
-    readonly prefix?: Affix;
+    readonly prefix?: AffixProp;
     /**
      * Adds a suffix label and icon with an optional action to the field.
      */
-    readonly suffix?: XOR<Affix, Suffix>;
+    readonly suffix?: AffixProp;
     /**
      * Further description of the input, can be used for a hint.
      */
@@ -249,4 +253,3 @@ export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CommonAllowedElements = "section" | "p" | "article" | "ul" | "li" | "div" | "span" | "dl" | "dd" | "dt";
 export type Spaces = "none" | "minuscule" | "slim" | "smallest" | "smaller" | "small" | "base" | "large" | "larger" | "largest" | "extravagant";
 export type GapSpacing = Spaces | (string & NonNullable<unknown>);
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.13.2",
+  "version": "9.14.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -495,7 +495,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.112.0",
+    "@jobber/design": "0.113.0",
     "@jobber/hooks": "2.21.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e730613f3ba3851d31e78cbae08a8b832a1605d5"
+  "gitHead": "a4a24e9df170032a2d37c2b72e855d95281fafcd"
 }