@jobber/components 6.18.0 → 6.19.1

package/dist/Checkbox/Checkbox.d.ts

@@ -1,53 +1,2 @@
-import { ReactElement } from "react";
-import { XOR } from "ts-xor";
-interface BaseCheckboxProps {
-    /**
-     * Determines if the checkbox is checked or not.
-     */
-    readonly checked?: boolean;
-    /**
-     * Initial checked value of the checkbox. Only use this when you need to
-     * pre-populate the checked attribute that is not controlled by the component's
-     * state. If a state is controlling it, use the `checked` prop instead.
-     */
-    readonly defaultChecked?: boolean;
-    /**
-     * Disables the checkbox.
-     */
-    readonly disabled?: boolean;
-    /**
-     * When `true` the checkbox to appears in indeterminate.
-     *
-     * @default false
-     */
-    readonly indeterminate?: boolean;
-    /**
-     * Checkbox input name
-     */
-    readonly name?: string;
-    /**
-     * Value of the checkbox.
-     */
-    readonly value?: string;
-    /**
-     * Further description of the label
-     */
-    readonly description?: string;
-    onChange?(newValue: boolean): void;
-    onFocus?(): void;
-}
-interface CheckboxLabelProps extends BaseCheckboxProps {
-    /**
-     * Label that shows up beside the checkbox.
-     */
-    readonly label?: string;
-}
-interface CheckboxChildrenProps extends BaseCheckboxProps {
-    /**
-     * Component children, which shows up as a label
-     */
-    readonly children?: ReactElement;
-}
-type CheckboxProps = XOR<CheckboxLabelProps, CheckboxChildrenProps>;
-export declare function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onChange, onFocus, }: CheckboxProps): JSX.Element;
-export {};
+import { CheckboxLegacyProps } from "./Checkbox.types";
+export declare function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onBlur, onChange, onFocus, }: CheckboxLegacyProps): JSX.Element;

package/dist/Checkbox/Checkbox.rebuilt.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxRebuiltProps } from "./Checkbox.types";
+export declare function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, id, onBlur, onChange, onFocus, }: CheckboxRebuiltProps): JSX.Element;

package/dist/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,91 @@
+import { ReactElement } from "react";
+import { XOR } from "ts-xor";
+export interface BaseCheckboxProps {
+    /**
+     * Determines if the checkbox is checked or not.
+     */
+    readonly checked?: boolean;
+    /**
+     * Initial checked value of the checkbox. Only use this when you need to
+     * pre-populate the checked attribute that is not controlled by the component's
+     * state. If a state is controlling it, use the `checked` prop instead.
+     */
+    readonly defaultChecked?: boolean;
+    /**
+     * Disables the checkbox.
+     */
+    readonly disabled?: boolean;
+    /**
+     * When `true` the checkbox to appears in indeterminate.
+     *
+     * @default false
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Checkbox input name
+     */
+    readonly name?: string;
+    /**
+     * Value of the checkbox.
+     */
+    readonly value?: string;
+    /**
+     * Further description of the label
+     */
+    readonly description?: string;
+    /**
+     * ID for the checkbox input
+     */
+    readonly id?: string;
+    /**
+     * Called when the checkbox value changes
+     */
+    onChange?(newValue: boolean): void;
+    /**
+     * Called when the checkbox is focused
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Called when the checkbox loses focus
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+}
+interface CheckboxLabelProps extends BaseCheckboxProps {
+    /**
+     * Label that shows up beside the checkbox.
+     */
+    readonly label?: string;
+}
+interface CheckboxChildrenProps extends BaseCheckboxProps {
+    /**
+     * Component children, which shows up as a label
+     */
+    readonly children?: ReactElement;
+}
+export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "description" | "children" | "onChange"> & {
+    /**
+     * Label that shows up beside the checkbox.
+     * String will be rendered with the default markup.
+     * ReactElement will be rendered with provided positionining.
+     */
+    label?: string | ReactElement;
+    /**
+     * Additional description of the checkbox.
+     * String will be rendered with the default markup.
+     * ReactElement will be rendered with provided positioning.
+     */
+    description?: string | ReactElement;
+    /**
+     * Called when the checkbox value changes.
+     * Includes the change event as a second argument.
+     */
+    onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
+     */
+    version: 2;
+};
+export type CheckboxLegacyProps = XOR<CheckboxLabelProps, CheckboxChildrenProps> & {
+    version?: 1;
+};
+export {};

package/dist/Checkbox/index.cjs

@@ -1,15 +1,89 @@
 'use strict';
 
-var Checkbox = require('../Checkbox-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react');
-require('classnames');
-require('react-hook-form');
-require('../Icon-cjs.js');
+var React = require('react');
+var tslib_es6 = require('../tslib.es6-cjs.js');
+var classnames = require('classnames');
+var reactHookForm = require('react-hook-form');
+var Icon = require('../Icon-cjs.js');
+var Text = require('../Text-cjs.js');
 require('@jobber/design');
-require('../Text-cjs.js');
 require('../Typography-cjs.js');
 
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
 
+function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
+    const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            reactHookForm.useForm({ mode: "onTouched" });
+    const [identifier] = React.useState(React.useId());
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
+    React.useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelText = label ? React.createElement(Text.Text, null, label) : children;
+    return (React.createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
+            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
+            return (React.createElement("div", { className: styles.checkBoxParent },
+                React.createElement("label", { className: wrapperClassName },
+                    React.createElement("span", { className: styles.checkHolder },
+                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
+                        React.createElement("span", { className: styles.checkBox },
+                            React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
+                    labelText && React.createElement("span", { className: styles.label }, labelText)),
+                description && (React.createElement("div", { className: styles.description },
+                    React.createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
+            function handleChange(event) {
+                const newChecked = event.currentTarget.checked;
+                onChange && onChange(newChecked);
+                onControllerChange(event);
+            }
+        } }));
+}
 
-exports.Checkbox = Checkbox.Checkbox;
+function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelContent = typeof label === "string" ? React.createElement(Text.Text, null, label) : label;
+    const descriptionContent = typeof description === "string" ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description);
+    function handleChange(event) {
+        const newChecked = event.currentTarget.checked;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newChecked, event);
+    }
+    return (React.createElement("div", { className: styles.checkBoxParent },
+        React.createElement("label", { className: wrapperClassName },
+            React.createElement("span", { className: styles.checkHolder },
+                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("span", { className: styles.checkBox },
+                    React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
+            labelContent && React.createElement("span", { className: styles.label }, labelContent)),
+        description && (React.createElement("div", { className: styles.description }, descriptionContent))));
+}
+
+function isNewCheckboxProps(props) {
+    return props.version === 2;
+}
+function Checkbox(props) {
+    if (isNewCheckboxProps(props)) {
+        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+    }
+    return React.createElement(CheckboxLegacy, Object.assign({}, props));
+}
+
+exports.Checkbox = Checkbox;

package/dist/Checkbox/index.d.ts

@@ -1 +1,4 @@
-export { Checkbox } from "./Checkbox";
+import { CheckboxLegacyProps, CheckboxRebuiltProps } from "./Checkbox.types";
+type CheckboxShimProps = CheckboxLegacyProps | CheckboxRebuiltProps;
+export declare function Checkbox(props: CheckboxShimProps): JSX.Element;
+export type { CheckboxLegacyProps, CheckboxRebuiltProps };

package/dist/Checkbox/index.mjs

@@ -1,9 +1,87 @@
-export { C as Checkbox } from '../Checkbox-es.js';
-import '../tslib.es6-es.js';
-import 'react';
-import 'classnames';
-import 'react-hook-form';
-import '../Icon-es.js';
+import React, { useState, useId, useEffect } from 'react';
+import { _ as __rest } from '../tslib.es6-es.js';
+import classnames from 'classnames';
+import { useFormContext, useForm, Controller } from 'react-hook-form';
+import { I as Icon } from '../Icon-es.js';
+import { T as Text } from '../Text-es.js';
 import '@jobber/design';
-import '../Text-es.js';
 import '../Typography-es.js';
+
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+
+function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
+    const { control, setValue, watch } = useFormContext() != undefined
+        ? useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            useForm({ mode: "onTouched" });
+    const [identifier] = useState(useId());
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const [controlledName] = useState(name ? name : `generatedName--${identifier}`);
+    useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelText = label ? React.createElement(Text, null, label) : children;
+    return (React.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = __rest(_b, ["onChange", "name"]);
+            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
+            return (React.createElement("div", { className: styles.checkBoxParent },
+                React.createElement("label", { className: wrapperClassName },
+                    React.createElement("span", { className: styles.checkHolder },
+                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
+                        React.createElement("span", { className: styles.checkBox },
+                            React.createElement(Icon, { name: iconName, color: "surface" }))),
+                    labelText && React.createElement("span", { className: styles.label }, labelText)),
+                description && (React.createElement("div", { className: styles.description },
+                    React.createElement(Text, { variation: "subdued", size: "small" }, description)))));
+            function handleChange(event) {
+                const newChecked = event.currentTarget.checked;
+                onChange && onChange(newChecked);
+                onControllerChange(event);
+            }
+        } }));
+}
+
+function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelContent = typeof label === "string" ? React.createElement(Text, null, label) : label;
+    const descriptionContent = typeof description === "string" ? (React.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
+    function handleChange(event) {
+        const newChecked = event.currentTarget.checked;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newChecked, event);
+    }
+    return (React.createElement("div", { className: styles.checkBoxParent },
+        React.createElement("label", { className: wrapperClassName },
+            React.createElement("span", { className: styles.checkHolder },
+                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("span", { className: styles.checkBox },
+                    React.createElement(Icon, { name: iconName, color: "surface" }))),
+            labelContent && React.createElement("span", { className: styles.label }, labelContent)),
+        description && (React.createElement("div", { className: styles.description }, descriptionContent))));
+}
+
+function isNewCheckboxProps(props) {
+    return props.version === 2;
+}
+function Checkbox(props) {
+    if (isNewCheckboxProps(props)) {
+        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+    }
+    return React.createElement(CheckboxLegacy, Object.assign({}, props));
+}
+
+export { Checkbox };

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

@@ -29,7 +29,7 @@ require('../../../AnimatedSwitcher-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('react-router-dom');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../DataList.module-cjs.js');

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

@@ -27,7 +27,7 @@ import '../../../AnimatedSwitcher-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import 'react-router-dom';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../DataList.module-es.js';

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

@@ -38,7 +38,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../useBatchSelect-cjs.js');

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

@@ -36,7 +36,7 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../useBatchSelect-es.js';

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

@@ -39,7 +39,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../useBatchSelect-cjs.js');

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

@@ -37,7 +37,7 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../useBatchSelect-es.js';

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

@@ -40,7 +40,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../useBatchSelect-cjs.js');

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

@@ -38,7 +38,7 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../useBatchSelect-es.js';

package/dist/DataList/index.cjs

@@ -49,7 +49,7 @@ require('../Heading-cjs.js');
 require('../DataListLayoutContext-cjs2.js');
 require('../DataListItemActionsOverflow-cjs.js');
 require('../DataListActionsMenu-cjs.js');
-require('../Checkbox-cjs.js');
+require('../Checkbox/index.cjs');
 require('react-hook-form');
 require('../useBatchSelect-cjs.js');
 require('../DataListItemClickable-cjs.js');

package/dist/DataList/index.mjs

@@ -47,7 +47,7 @@ import '../Heading-es.js';
 import '../DataListLayoutContext-es2.js';
 import '../DataListItemActionsOverflow-es.js';
 import '../DataListActionsMenu-es.js';
-import '../Checkbox-es.js';
+import '../Checkbox/index.mjs';
 import 'react-hook-form';
 import '../useBatchSelect-es.js';
 import '../DataListItemClickable-es.js';

package/dist/DataListHeader-cjs.js

@@ -8,7 +8,7 @@ var classnames = require('classnames');
 var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
-var Checkbox = require('./Checkbox-cjs.js');
+var Checkbox_index = require('./Checkbox/index.cjs');
 var DataList_module = require('./DataList.module-cjs.js');
 var DataListBulkActions = require('./DataListBulkActions-cjs.js');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
@@ -27,7 +27,7 @@ function DataListHeaderCheckbox({ children }) {
         React.createElement("div", { className: classnames(DataList_module.styles.selectAllCheckbox, {
                 [DataList_module.styles.visible]: canSelectAll,
             }) },
-            React.createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+            React.createElement(Checkbox_index.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel))),
         React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: DataList_module.styles.batchSelectContainer },
                 React.createElement("div", { className: DataList_module.styles.headerBatchSelect },

package/dist/DataListHeader-es.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
-import { C as Checkbox } from './Checkbox-es.js';
+import { Checkbox } from './Checkbox/index.mjs';
 import { s as styles } from './DataList.module-es.js';
 import { I as InternalDataListBulkActions } from './DataListBulkActions-es.js';
 import { u as useBatchSelect } from './useBatchSelect-es.js';

package/dist/DataListItem-cjs.js

@@ -8,7 +8,7 @@ var DataListItemActions = require('./DataListItemActions-cjs.js');
 var DataListActionsMenu = require('./DataListActionsMenu-cjs.js');
 var DataListLayoutContext$1 = require('./DataListLayoutContext-cjs2.js');
 var DataList_utils = require('./DataList.utils-cjs.js');
-var Checkbox = require('./Checkbox-cjs.js');
+var Checkbox_index = require('./Checkbox/index.cjs');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
 var DataList_module = require('./DataList.module-cjs.js');
 var DataListItemClickable = require('./DataListItemClickable-cjs.js');
@@ -22,7 +22,7 @@ function DataListItemInternal({ children, item, }) {
             [DataList_module.styles.selected]: hasAtLeastOneSelected,
         }) },
         children,
-        React.createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+        React.createElement(Checkbox_index.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
     function getIsChecked() {
         const isItemInSelectedIDs = selectedIDs.includes(item.id);
         // If we're in a "select all" state, the selectedID's becomes a list of

package/dist/DataListItem-es.js

@@ -6,7 +6,7 @@ import { I as InternalDataListItemActions } from './DataListItemActions-es.js';
 import { D as DataListActionsMenu } from './DataListActionsMenu-es.js';
 import { D as DataListLayoutActionsContext } from './DataListLayoutContext-es2.js';
 import { d as generateListItemElement } from './DataList.utils-es.js';
-import { C as Checkbox } from './Checkbox-es.js';
+import { Checkbox } from './Checkbox/index.mjs';
 import { u as useBatchSelect } from './useBatchSelect-es.js';
 import { s as styles } from './DataList.module-es.js';
 import { D as DataListItemClickable } from './DataListItemClickable-es.js';

package/dist/MultiSelect/index.cjs

@@ -3,7 +3,7 @@
 var MultiSelect = require('../MultiSelect-cjs.js');
 require('react');
 require('classnames');
-require('../Checkbox-cjs.js');
+require('../Checkbox/index.cjs');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../Icon-cjs.js');

package/dist/MultiSelect/index.mjs

@@ -1,7 +1,7 @@
 export { M as MultiSelect } from '../MultiSelect-es.js';
 import 'react';
 import 'classnames';
-import '../Checkbox-es.js';
+import '../Checkbox/index.mjs';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
 import '../Icon-es.js';

package/dist/MultiSelect-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Checkbox = require('./Checkbox-cjs.js');
+var Checkbox_index = require('./Checkbox/index.cjs');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
 
@@ -81,7 +81,7 @@ function DropDownMenu({ options, setOptions }) {
                 event.preventDefault();
                 handleOptionClick(option);
             }, onMouseOver: e => handleOptionHover(e, index) },
-            React.createElement(Checkbox.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
+            React.createElement(Checkbox_index.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
     })));
     function handlePressUp(event) {
         event.preventDefault();

package/dist/MultiSelect-es.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { C as Checkbox } from './Checkbox-es.js';
+import { Checkbox } from './Checkbox/index.mjs';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
 

package/dist/index.cjs

@@ -21,7 +21,7 @@ var Box = require('./Box-cjs.js');
 var Button = require('./Button-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 var Card = require('./Card-cjs.js');
-var Checkbox = require('./Checkbox-cjs.js');
+var Checkbox_index = require('./Checkbox/index.cjs');
 var Chip = require('./Chip-cjs.js');
 var ChipDismissible = require('./ChipDismissible-cjs.js');
 var Chips = require('./Chips-cjs.js');
@@ -199,7 +199,7 @@ exports.Box = Box.Box;
 exports.Button = Button.Button;
 exports.ButtonDismiss = ButtonDismiss.ButtonDismiss;
 exports.Card = Card.Card;
-exports.Checkbox = Checkbox.Checkbox;
+exports.Checkbox = Checkbox_index.Checkbox;
 exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;

package/dist/index.mjs

@@ -19,7 +19,7 @@ export { B as Box } from './Box-es.js';
 export { B as Button } from './Button-es.js';
 export { B as ButtonDismiss } from './ButtonDismiss-es.js';
 export { C as Card } from './Card-es.js';
-export { C as Checkbox } from './Checkbox-es.js';
+export { Checkbox } from './Checkbox/index.mjs';
 export { C as Chip } from './Chip-es.js';
 export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-es.js';
 export { C as Chips } from './Chips-es.js';

package/dist/styles.css

@@ -7452,22 +7452,29 @@ html.atlantisLightBoxActive {
   gap: var(--space-small);
   -ms-flex-negative: 0;
       flex-shrink: 0;
-
-  scrollbar-width: thin;
-  scrollbar-color: hsl(198, 35%, 21%) transparent;
-  scrollbar-color: var(--color-interactive--subtle) transparent;
 }
-._3TfQLQEE3GQ-::-webkit-scrollbar {
-    height: 8px;
-  }
-._3TfQLQEE3GQ-::-webkit-scrollbar-track {
-    background: transparent;
+@supports (scrollbar-color: #000 #000) {
+._3TfQLQEE3GQ- {
+    scrollbar-width: thin; /* Safari version 18.3: Bug causes this rule to undermine other scrollbar styling  */
+    scrollbar-color: hsl(198, 35%, 21%) transparent;
+    scrollbar-color: var(--color-interactive--subtle) transparent;
+}
   }
-._3TfQLQEE3GQ-::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    border-radius: var(--radius-small);
-    background: hsl(198, 35%, 21%);
-    background: var(--color-interactive--subtle);
+@supports not (scrollbar-color: #000 #000) {
+    ._3TfQLQEE3GQ-::-webkit-scrollbar {
+      height: 8px;
+    }
+
+    ._3TfQLQEE3GQ-::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ._3TfQLQEE3GQ-::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      border-radius: var(--radius-small);
+      background: hsl(198, 35%, 21%);
+      background: var(--color-interactive--subtle);
+    }
   }
 .eBMzUOlcfQ4- {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.18.0",
+  "version": "6.19.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c3b013c987b47e1576110136ac4ce45acbe5e7ba"
+  "gitHead": "8bdfcad7ad4f56fc40d669239db76f46243542d7"
 }

package/dist/Checkbox-cjs.js

@@ -1,55 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-cjs.js');
-var React = require('react');
-var classnames = require('classnames');
-var reactHookForm = require('react-hook-form');
-var Icon = require('./Icon-cjs.js');
-var Text = require('./Text-cjs.js');
-
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
-
-function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
-    const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
-        ? reactHookForm.useFormContext()
-        : // If there isn't a Form Context being provided, get a form for this field.
-            reactHookForm.useForm({ mode: "onTouched" });
-    const [identifier] = React.useState(React.useId());
-    /**
-     * Generate a name if one is not supplied, this is the name
-     * that will be used for react-hook-form and not neccessarily
-     * attached to the DOM
-     */
-    const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
-    React.useEffect(() => {
-        if (value != undefined) {
-            setValue(controlledName, value);
-        }
-    }, [value, watch(controlledName)]);
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
-    const inputClassName = classnames(styles.input, {
-        [styles.indeterminate]: indeterminate,
-    });
-    const iconName = indeterminate ? "minus2" : "checkmark";
-    const labelText = label ? React.createElement(Text.Text, null, label) : children;
-    return (React.createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
-            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
-            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
-            return (React.createElement("div", { className: styles.checkBoxParent },
-                React.createElement("label", { className: wrapperClassName },
-                    React.createElement("span", { className: styles.checkHolder },
-                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
-                        React.createElement("span", { className: styles.checkBox },
-                            React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
-                    labelText && React.createElement("span", { className: styles.label }, labelText)),
-                description && (React.createElement("div", { className: styles.description },
-                    React.createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
-            function handleChange(event) {
-                const newChecked = event.currentTarget.checked;
-                onChange && onChange(newChecked);
-                onControllerChange(event);
-            }
-        } }));
-}
-
-exports.Checkbox = Checkbox;

package/dist/Checkbox-es.js

@@ -1,53 +0,0 @@
-import { _ as __rest } from './tslib.es6-es.js';
-import React, { useState, useId, useEffect } from 'react';
-import classnames from 'classnames';
-import { useFormContext, useForm, Controller } from 'react-hook-form';
-import { I as Icon } from './Icon-es.js';
-import { T as Text } from './Text-es.js';
-
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
-
-function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onChange, onFocus, }) {
-    const { control, setValue, watch } = useFormContext() != undefined
-        ? useFormContext()
-        : // If there isn't a Form Context being provided, get a form for this field.
-            useForm({ mode: "onTouched" });
-    const [identifier] = useState(useId());
-    /**
-     * Generate a name if one is not supplied, this is the name
-     * that will be used for react-hook-form and not neccessarily
-     * attached to the DOM
-     */
-    const [controlledName] = useState(name ? name : `generatedName--${identifier}`);
-    useEffect(() => {
-        if (value != undefined) {
-            setValue(controlledName, value);
-        }
-    }, [value, watch(controlledName)]);
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
-    const inputClassName = classnames(styles.input, {
-        [styles.indeterminate]: indeterminate,
-    });
-    const iconName = indeterminate ? "minus2" : "checkmark";
-    const labelText = label ? React.createElement(Text, null, label) : children;
-    return (React.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
-            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = __rest(_b, ["onChange", "name"]);
-            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
-            return (React.createElement("div", { className: styles.checkBoxParent },
-                React.createElement("label", { className: wrapperClassName },
-                    React.createElement("span", { className: styles.checkHolder },
-                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus })),
-                        React.createElement("span", { className: styles.checkBox },
-                            React.createElement(Icon, { name: iconName, color: "surface" }))),
-                    labelText && React.createElement("span", { className: styles.label }, labelText)),
-                description && (React.createElement("div", { className: styles.description },
-                    React.createElement(Text, { variation: "subdued", size: "small" }, description)))));
-            function handleChange(event) {
-                const newChecked = event.currentTarget.checked;
-                onChange && onChange(newChecked);
-                onControllerChange(event);
-            }
-        } }));
-}
-
-export { Checkbox as C };