@jobber/components 7.2.0 → 7.3.0

package/dist/Checkbox/Checkbox.d.ts

@@ -1,3 +1,7 @@
 import React from "react";
-import type { CheckboxLegacyProps } from "./Checkbox.types";
-export declare function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onBlur, onChange, onFocus, }: CheckboxLegacyProps): React.JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "id" | "name" | "disabled"> & {
+    label?: string | React.ReactElement;
+    description?: React.ReactNode;
+    invalid?: boolean;
+    onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,5 @@
 import type { ReactElement, ReactNode } from "react";
-import type { XOR } from "ts-xor";
-import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
+import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, MouseEvents } from "../sharedHelpers/types";
 /**
  * Shared checkbox-specific props used by both legacy and rebuilt versions
  */
@@ -26,52 +25,7 @@ export interface CheckboxCoreProps {
      */
     readonly value?: string;
 }
-/**
- * Base props for legacy checkbox
- */
-export interface BaseCheckboxProps extends CheckboxCoreProps {
-    /**
-     * Disables the checkbox.
-     */
-    readonly disabled?: boolean;
-    /**
-     * Checkbox input name
-     */
-    readonly name?: string;
-    /**
-     * Further description of the label
-     */
-    readonly description?: ReactNode;
-    /**
-     * 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 = CheckboxCoreProps & AriaInputProps & FocusEvents<HTMLInputElement> & MouseEvents<HTMLInputElement> & Pick<HTMLInputBaseProps, "id" | "name" | "disabled"> & Pick<RebuiltInputCommonProps, "version"> & {
+export type CheckboxProps = CheckboxCoreProps & AriaInputProps & FocusEvents<HTMLInputElement> & MouseEvents<HTMLInputElement> & Pick<HTMLInputBaseProps, "id" | "name" | "disabled"> & {
     /**
      * Label that shows up beside the checkbox.
      * String will be rendered with the default markup.
@@ -95,10 +49,3 @@ export type CheckboxRebuiltProps = CheckboxCoreProps & AriaInputProps & FocusEve
      */
     onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
 };
-/**
- * @deprecated Use the v2 Checkbox component instead (version={2}).
- */
-export type CheckboxLegacyProps = XOR<CheckboxLabelProps, CheckboxChildrenProps> & {
-    version?: 1;
-};
-export {};

package/dist/Checkbox/index.cjs

@@ -1,99 +1,14 @@
 'use strict';
 
-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');
-var filterDataAttributes = require('../filterDataAttributes-cjs.js');
+var Checkbox = require('../Checkbox-cjs.js');
+require('react');
+require('classnames');
+require('../Icon-cjs.js');
 require('@jobber/design');
+require('../Text-cjs.js');
 require('../Typography-cjs.js');
+require('../filterDataAttributes-cjs.js');
 
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","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);
-            }
-        } }));
-}
 
-const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal(props, ref) {
-    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
-    const descriptionIdentifier = React.useId();
-    const descriptionVisible = Boolean(description);
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
-    const isInvalid = Boolean(invalid);
-    const inputClassName = classnames(styles.input, {
-        [styles.indeterminate]: indeterminate,
-    });
-    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
-    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", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
-                        ? descriptionIdentifier
-                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
-                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", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
-});
-CheckboxRebuilt.displayName = "CheckboxRebuilt";
-
-function isNewCheckboxProps(props) {
-    return props.version === 2;
-}
-const Checkbox = React.forwardRef(function CheckboxShim(props, ref) {
-    if (isNewCheckboxProps(props)) {
-        return React.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
-    }
-    return React.createElement(CheckboxLegacy, Object.assign({}, props));
-});
-Checkbox.displayName = "Checkbox";
-
-exports.Checkbox = Checkbox;
+exports.Checkbox = Checkbox.Checkbox;

package/dist/Checkbox/index.d.ts

@@ -1,5 +1,2 @@
-import React from "react";
-import type { CheckboxLegacyProps, CheckboxRebuiltProps } from "./Checkbox.types";
-type CheckboxShimProps = CheckboxLegacyProps | CheckboxRebuiltProps;
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxShimProps & React.RefAttributes<HTMLInputElement>>;
-export type { CheckboxLegacyProps, CheckboxRebuiltProps };
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox.types";

package/dist/Checkbox/index.mjs

@@ -1,97 +1,8 @@
-import React__default, { useState, useId, useEffect, forwardRef } 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 { f as filterDataAttributes } from '../filterDataAttributes-es.js';
+export { C as Checkbox } from '../Checkbox-es.js';
+import 'react';
+import 'classnames';
+import '../Icon-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-","invalid":"Gqnclw4WaeQ-","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__default.createElement(Text, null, label) : children;
-    return (React__default.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__default.createElement("div", { className: styles.checkBoxParent },
-                React__default.createElement("label", { className: wrapperClassName },
-                    React__default.createElement("span", { className: styles.checkHolder },
-                        React__default.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
-                        React__default.createElement("span", { className: styles.checkBox },
-                            React__default.createElement(Icon, { name: iconName, color: "surface" }))),
-                    labelText && React__default.createElement("span", { className: styles.label }, labelText)),
-                description && (React__default.createElement("div", { className: styles.description },
-                    React__default.createElement(Text, { variation: "subdued", size: "small" }, description)))));
-            function handleChange(event) {
-                const newChecked = event.currentTarget.checked;
-                onChange && onChange(newChecked);
-                onControllerChange(event);
-            }
-        } }));
-}
-
-const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal(props, ref) {
-    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
-    const descriptionIdentifier = useId();
-    const descriptionVisible = Boolean(description);
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
-    const isInvalid = Boolean(invalid);
-    const inputClassName = classnames(styles.input, {
-        [styles.indeterminate]: indeterminate,
-    });
-    const dataAttrs = filterDataAttributes(props);
-    const iconName = indeterminate ? "minus2" : "checkmark";
-    const labelContent = typeof label === "string" ? React__default.createElement(Text, null, label) : label;
-    const descriptionContent = typeof description === "string" ? (React__default.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__default.createElement("div", { className: styles.checkBoxParent },
-        React__default.createElement("label", { className: wrapperClassName },
-            React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
-                        ? descriptionIdentifier
-                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
-                React__default.createElement("span", { className: styles.checkBox },
-                    React__default.createElement(Icon, { name: iconName, color: "surface" }))),
-            labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
-        description && (React__default.createElement("div", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
-});
-CheckboxRebuilt.displayName = "CheckboxRebuilt";
-
-function isNewCheckboxProps(props) {
-    return props.version === 2;
-}
-const Checkbox = forwardRef(function CheckboxShim(props, ref) {
-    if (isNewCheckboxProps(props)) {
-        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
-    }
-    return React__default.createElement(CheckboxLegacy, Object.assign({}, props));
-});
-Checkbox.displayName = "Checkbox";
-
-export { Checkbox };
+import '../filterDataAttributes-es.js';

package/dist/Checkbox-cjs.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Icon = require('./Icon-cjs.js');
+var Text = require('./Text-cjs.js');
+var filterDataAttributes = require('./filterDataAttributes-cjs.js');
+
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+
+const Checkbox = React.forwardRef(function CheckboxInternal(props, ref) {
+    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
+    const descriptionIdentifier = React.useId();
+    const descriptionVisible = Boolean(description);
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
+    const isInvalid = Boolean(invalid);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    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", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                        ? descriptionIdentifier
+                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
+                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", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
+});
+Checkbox.displayName = "Checkbox";
+
+exports.Checkbox = Checkbox;

package/dist/Checkbox-es.js

@@ -0,0 +1,39 @@
+import React__default, { forwardRef, useId } from 'react';
+import classnames from 'classnames';
+import { I as Icon } from './Icon-es.js';
+import { T as Text } from './Text-es.js';
+import { f as filterDataAttributes } from './filterDataAttributes-es.js';
+
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+
+const Checkbox = forwardRef(function CheckboxInternal(props, ref) {
+    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
+    const descriptionIdentifier = useId();
+    const descriptionVisible = Boolean(description);
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
+    const isInvalid = Boolean(invalid);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const dataAttrs = filterDataAttributes(props);
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelContent = typeof label === "string" ? React__default.createElement(Text, null, label) : label;
+    const descriptionContent = typeof description === "string" ? (React__default.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__default.createElement("div", { className: styles.checkBoxParent },
+        React__default.createElement("label", { className: wrapperClassName },
+            React__default.createElement("span", { className: styles.checkHolder },
+                React__default.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                        ? descriptionIdentifier
+                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
+                React__default.createElement("span", { className: styles.checkBox },
+                    React__default.createElement(Icon, { name: iconName, color: "surface" }))),
+            labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
+        description && (React__default.createElement("div", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox as C };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/DataList/index.cjs

@@ -48,8 +48,7 @@ require('../Heading-cjs.js');
 require('../DataListLayoutContext-cjs2.js');
 require('../DataListItemActionsOverflow-cjs.js');
 require('../DataListActionsMenu-cjs.js');
-require('../Checkbox/index.cjs');
-require('react-hook-form');
+require('../Checkbox-cjs.js');
 require('../filterDataAttributes-cjs.js');
 require('../useBatchSelect-cjs.js');
 require('../DataListItemClickable-cjs.js');
@@ -84,6 +83,7 @@ require('../InputText/index.cjs');
 require('../FormField-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
+require('react-hook-form');
 require('../DataListEmptyState-cjs.js');
 require('../DataListLoadMore-cjs.js');
 require('../DataListAction-cjs.js');

package/dist/DataList/index.mjs

@@ -46,8 +46,7 @@ import '../Heading-es.js';
 import '../DataListLayoutContext-es2.js';
 import '../DataListItemActionsOverflow-es.js';
 import '../DataListActionsMenu-es.js';
-import '../Checkbox/index.mjs';
-import 'react-hook-form';
+import '../Checkbox-es.js';
 import '../filterDataAttributes-es.js';
 import '../useBatchSelect-es.js';
 import '../DataListItemClickable-es.js';
@@ -82,6 +81,7 @@ import '../InputText/index.mjs';
 import '../FormField-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
+import 'react-hook-form';
 import '../DataListEmptyState-es.js';
 import '../DataListLoadMore-es.js';
 import '../DataListAction-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_index = require('./Checkbox/index.cjs');
+var Checkbox = require('./Checkbox-cjs.js');
 var DataList_module = require('./DataList.module-cjs.js');
 var DataListBulkActions = require('./DataListBulkActions-cjs.js');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
@@ -30,8 +30,7 @@ function DataListHeaderCheckbox({ children }) {
         React.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, style: {
                 visibility: canSelectAll ? "visible" : "hidden",
             }, className: classnames(DataList_module.styles.selectAllCheckbox) },
-            React.createElement(Checkbox_index.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
-                React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel))),
+            React.createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll, label: React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel) })),
         React.createElement(ColumnHeaderContent, { canSelectAll: canSelectAll, hasAtLeastOneSelected: hasAtLeastOneSelected, selectedCount: selectedCount, deselectText: deselectText, onSelect: onSelect }, children)));
     function isIndeterminate() {
         if (isSelectAll)

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 { Checkbox } from './Checkbox/index.mjs';
+import { C as Checkbox } from './Checkbox-es.js';
 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';
@@ -28,8 +28,7 @@ function DataListHeaderCheckbox({ children }) {
         React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, style: {
                 visibility: canSelectAll ? "visible" : "hidden",
             }, className: classnames(styles.selectAllCheckbox) },
-            React__default.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
-                React__default.createElement("div", { className: styles.srOnly }, selectedLabel))),
+            React__default.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll, label: React__default.createElement("div", { className: styles.srOnly }, selectedLabel) })),
         React__default.createElement(ColumnHeaderContent, { canSelectAll: canSelectAll, hasAtLeastOneSelected: hasAtLeastOneSelected, selectedCount: selectedCount, deselectText: deselectText, onSelect: onSelect }, children)));
     function isIndeterminate() {
         if (isSelectAll)

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_index = require('./Checkbox/index.cjs');
+var Checkbox = require('./Checkbox-cjs.js');
 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_index.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+        React.createElement(Checkbox.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 { Checkbox } from './Checkbox/index.mjs';
+import { C as Checkbox } from './Checkbox-es.js';
 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,9 +3,7 @@
 var MultiSelect = require('../MultiSelect-cjs.js');
 require('react');
 require('classnames');
-require('../Checkbox/index.cjs');
-require('../tslib.es6-cjs.js');
-require('react-hook-form');
+require('../Checkbox-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Text-cjs.js');

package/dist/MultiSelect/index.mjs

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

package/dist/MultiSelect-cjs.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Checkbox_index = require('./Checkbox/index.cjs');
+var Checkbox = require('./Checkbox-cjs.js');
 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_index.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
+            React.createElement(Checkbox.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__default, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { Checkbox } from './Checkbox/index.mjs';
+import { C as Checkbox } from './Checkbox-es.js';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
 

package/dist/docs/Checkbox/Checkbox.md

@@ -58,17 +58,31 @@ able to keep track the state of the child Checkboxes. See
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
+| `aria-activedescendant` | `string` | No | — | ID of the currently active descendant element. Used for composite widgets like combobox or listbox. @see {@link https... |
+| `aria-autocomplete` | `"none" | "inline" | "list" | "both"` | No | — | Indicates the type of autocomplete interaction. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-autocomplete} |
+| `aria-controls` | `string` | No | — | Indicates the element that controls the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-controls} |
+| `aria-describedby` | `string` | No | — | Identifies the element (or elements) that describes the object. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-... |
+| `aria-details` | `string` | No | — | Identifies the element (or elements) that provide a detailed, extended description. @see {@link https://www.w3.org/TR... |
+| `aria-expanded` | `Booleanish` | No | — | Indicates whether the element is expanded or collapsed. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-expanded} |
+| `aria-label` | `string` | No | — | Defines a string value that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-label} |
+| `aria-labelledby` | `string` | No | — | Identifies the element (or elements) that labels the current element. @see {@link https://www.w3.org/TR/wai-aria-1.2/... |
+| `aria-required` | `Booleanish` | No | — | Indicates that user input is required before form submission. @see {@link https://www.w3.org/TR/wai-aria-1.2/#aria-re... |
 | `checked` | `boolean` | No | — | Determines if the checkbox is checked or not. |
-| `children` | `ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | Component children, which shows up as a label |
 | `defaultChecked` | `boolean` | No | — | Initial checked value of the checkbox. Only use this when you need to pre-populate the checked attribute that is not ... |
-| `description` | `ReactNode` | No | — | Further description of the label |
-| `disabled` | `boolean` | No | — | Disables the checkbox. |
-| `id` | `string` | No | — | ID for the checkbox input |
+| `description` | `ReactNode` | No | — | Additional description of the checkbox. String will be rendered with the default markup. ReactElement will be rendere... |
+| `disabled` | `boolean` | No | — | Whether the input is disabled. |
+| `id` | `string` | No | — | The unique identifier for the input element. |
 | `indeterminate` | `boolean` | No | `false` | When `true` the checkbox to appears in indeterminate. |
-| `label` | `string` | No | — | Label that shows up beside the checkbox. |
-| `name` | `string` | No | — | Checkbox input name |
-| `onBlur` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Called when the checkbox loses focus |
-| `onChange` | `(newValue: boolean) => void` | No | — | Called when the checkbox value changes |
-| `onFocus` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Called when the checkbox is focused |
+| `invalid` | `boolean` | No | — | Whether the checkbox is invalid |
+| `label` | `string | ReactElement<unknown, string | JSXElementConstructor<any>>` | No | — | Label that shows up beside the checkbox. String will be rendered with the default markup. ReactElement will be render... |
+| `name` | `string` | No | — | The name attribute for the input element. |
+| `onBlur` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Blur event handler. |
+| `onChange` | `(newValue: boolean, event: ChangeEvent<HTMLInputElement>) => void` | No | — | Called when the checkbox value changes. Includes the change event as a second argument. This is the recommended event... |
+| `onClick` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Click event handler. |
+| `onFocus` | `(event: FocusEvent<HTMLInputElement, Element>) => void` | No | — | Focus event handler. |
+| `onMouseDown` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse down event handler. |
+| `onMouseUp` | `(event: MouseEvent<HTMLInputElement, MouseEvent>) => void` | No | — | Mouse up event handler. |
+| `onPointerDown` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer down event handler. |
+| `onPointerUp` | `(event: PointerEvent<HTMLInputElement>) => void` | No | — | Pointer up event handler. |
+| `ref` | `Ref<HTMLInputElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
 | `value` | `string` | No | — | Value of the checkbox. |
-| `version` | `1` | No | — |  |

package/dist/index.cjs

@@ -15,7 +15,7 @@ var Card = require('./Card-cjs.js');
 var Cluster = require('./Cluster-cjs.js');
 var Container = require('./Container-cjs.js');
 var Cover = require('./Cover-cjs.js');
-var Checkbox_index = require('./Checkbox/index.cjs');
+var Checkbox = require('./Checkbox-cjs.js');
 var Chip = require('./Chip-cjs.js');
 var ChipDismissible = require('./ChipDismissible-cjs.js');
 require('react');
@@ -222,7 +222,7 @@ exports.Card = Card.Card;
 exports.Cluster = Cluster.Cluster;
 exports.Container = Container.Container;
 exports.Cover = Cover.Cover;
-exports.Checkbox = Checkbox_index.Checkbox;
+exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;

package/dist/index.mjs

@@ -13,7 +13,7 @@ export { C as Card } from './Card-es.js';
 export { C as Cluster } from './Cluster-es.js';
 export { C as Container } from './Container-es.js';
 export { C as Cover } from './Cover-es.js';
-export { Checkbox } from './Checkbox/index.mjs';
+export { C as Checkbox } from './Checkbox-es.js';
 export { C as Chip } from './Chip-es.js';
 export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-es.js';
 import 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3e24f22e0704d0c879ccd8d76c37ac0ff9866094"
+  "gitHead": "3de45c6bd3fda1207525ad3328be9c60b407765b"
 }

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

@@ -1,7 +0,0 @@
-import React from "react";
-export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "id" | "name" | "disabled"> & Pick<import("../sharedHelpers/types").RebuiltInputCommonProps, "version"> & {
-    label?: string | React.ReactElement;
-    description?: React.ReactNode;
-    invalid?: boolean;
-    onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
-} & React.RefAttributes<HTMLInputElement>>;