@jobber/components 7.1.2 → 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/Chip/Chip.d.ts

@@ -2,7 +2,13 @@ import React from "react";
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import type { ChipProps } from "./Chip.types";
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
+type ChipElement = HTMLButtonElement | HTMLDivElement;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.HTMLAttributes<ChipElement> & {
+    readonly "data-testid"?: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     Prefix: typeof ChipPrefix;
     Suffix: typeof ChipSuffix;
 };
+export {};

package/dist/Chip/Chip.types.d.ts

@@ -44,9 +44,14 @@ export interface ChipProps extends PropsWithChildren {
      */
     readonly variation?: ChipVariations;
     /**
-     * Chip Click Callback. Sends an event and sometimes a value (SelectableChip).
+     * Chip click callback using a standard event-first signature.
      */
-    readonly onClick?: (value: string | number | undefined, ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    readonly onClick?: (ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Value-first click callback retained as an upgrade path for existing consumers.
+     * @deprecated Prefer `onClick` with a closure over the value.
+     */
+    readonly onClickValue?: (value: string | number | undefined, ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     /**
      * Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed.
      */

package/dist/Chip/index.cjs

@@ -2,6 +2,7 @@
 
 var Chip = require('../Chip-cjs.js');
 var ChipDismissible = require('../ChipDismissible-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('@jobber/hooks');
@@ -18,7 +19,6 @@ require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
 require('framer-motion');
-require('../tslib.es6-cjs.js');
 
 
 

package/dist/Chip/index.mjs

@@ -1,5 +1,6 @@
 export { C as Chip } from '../Chip-es.js';
 export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '@jobber/hooks';
@@ -16,4 +17,3 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
 import 'framer-motion';
-import '../tslib.es6-es.js';

package/dist/Chip-cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
@@ -64,13 +65,14 @@ function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
     return (React.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
 }
 
-const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
+const ChipComponent = React.forwardRef((_a, ref) => {
+    var { ariaLabel, "aria-label": ariaLabelProp, disabled, heading, invalid, label, value, testID, onClick, onClickValue, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", className, style, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, title, "data-testid": dataTestId } = _a, rest = tslib_es6.__rest(_a, ["ariaLabel", "aria-label", "disabled", "heading", "invalid", "label", "value", "testID", "onClick", "onClickValue", "onKeyDown", "children", "role", "tabIndex", "variation", "className", "style", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "title", "data-testid"]);
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
         [styles$1.subtle]: variation === "subtle",
         [styles$1.disabled]: disabled,
-    });
+    }, className);
     const prefix = useChildComponent.useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent.useChildComponent(children, d => d.type === ChipSuffix);
     const [labelRef, labelFullyVisible] = jobberHooks.useInView();
@@ -90,29 +92,42 @@ const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid,
             !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                 React.createElement("span", null)))),
         suffix));
-    // Use createElement to properly handle the ref typing
-    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage, setTabIndex: false }, onClick
-        ? React.createElement("button", {
-            className: classes,
-            onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev),
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            disabled,
-            role,
-            "data-testid": testID,
-            type: "button",
-            ref,
-        }, chipContent)
-        : React.createElement("div", {
-            className: classes,
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            role,
-            "data-testid": testID,
-            ref,
-        }, chipContent)));
+    const isClickable = Boolean(onClick || onClickValue);
+    const handleClick = (ev) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+        onClickValue === null || onClickValue === void 0 ? void 0 : onClickValue(value, ev);
+    };
+    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage, setTabIndex: false }, isClickable
+        ? React.createElement("button", Object.assign(Object.assign({}, rest), { className: classes, style, onClick: handleClick, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, disabled,
+            role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title, type: "button", ref }), chipContent)
+        : React.createElement("div", Object.assign(Object.assign({}, rest), { className: classes, style, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title,
+            ref }), chipContent)));
 });
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";

package/dist/Chip-es.js

@@ -1,3 +1,4 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useRef, forwardRef } from 'react';
 import classnames from 'classnames';
 import { useInView } from '@jobber/hooks';
@@ -62,13 +63,14 @@ function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
     return (React__default.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
 }
 
-const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
+const ChipComponent = forwardRef((_a, ref) => {
+    var { ariaLabel, "aria-label": ariaLabelProp, disabled, heading, invalid, label, value, testID, onClick, onClickValue, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", className, style, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, title, "data-testid": dataTestId } = _a, rest = __rest(_a, ["ariaLabel", "aria-label", "disabled", "heading", "invalid", "label", "value", "testID", "onClick", "onClickValue", "onKeyDown", "children", "role", "tabIndex", "variation", "className", "style", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "title", "data-testid"]);
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
         [styles$1.subtle]: variation === "subtle",
         [styles$1.disabled]: disabled,
-    });
+    }, className);
     const prefix = useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent(children, d => d.type === ChipSuffix);
     const [labelRef, labelFullyVisible] = useInView();
@@ -88,29 +90,42 @@ const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label
             !labelFullyVisible && (React__default.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                 React__default.createElement("span", null)))),
         suffix));
-    // Use createElement to properly handle the ref typing
-    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false }, onClick
-        ? React__default.createElement("button", {
-            className: classes,
-            onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev),
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            disabled,
-            role,
-            "data-testid": testID,
-            type: "button",
-            ref,
-        }, chipContent)
-        : React__default.createElement("div", {
-            className: classes,
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            role,
-            "data-testid": testID,
-            ref,
-        }, chipContent)));
+    const isClickable = Boolean(onClick || onClickValue);
+    const handleClick = (ev) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+        onClickValue === null || onClickValue === void 0 ? void 0 : onClickValue(value, ev);
+    };
+    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false }, isClickable
+        ? React__default.createElement("button", Object.assign(Object.assign({}, rest), { className: classes, style, onClick: handleClick, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, disabled,
+            role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title, type: "button", ref }), chipContent)
+        : React__default.createElement("div", Object.assign(Object.assign({}, rest), { className: classes, style, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title,
+            ref }), chipContent)));
 });
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";

package/dist/Combobox/components/ComboboxTrigger/index.cjs

@@ -3,6 +3,7 @@
 var ComboboxTrigger = require('../../../ComboboxTrigger-cjs.js');
 require('react');
 require('../../../Chip-cjs.js');
+require('../../../tslib.es6-cjs.js');
 require('classnames');
 require('@jobber/hooks');
 require('../../../Avatar-cjs.js');
@@ -18,7 +19,6 @@ require('react/jsx-runtime');
 require('react-dom');
 require('../../../floating-ui.react-dom-cjs.js');
 require('framer-motion');
-require('../../../tslib.es6-cjs.js');
 require('../../../ComboboxProvider-cjs.js');
 
 

package/dist/Combobox/components/ComboboxTrigger/index.mjs

@@ -1,6 +1,7 @@
 export { C as ComboboxTrigger } from '../../../ComboboxTrigger-es.js';
 import 'react';
 import '../../../Chip-es.js';
+import '../../../tslib.es6-es.js';
 import 'classnames';
 import '@jobber/hooks';
 import '../../../Avatar-es.js';
@@ -16,5 +17,4 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../floating-ui.react-dom-es.js';
 import 'framer-motion';
-import '../../../tslib.es6-es.js';
 import '../../../ComboboxProvider-es.js';

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/InternalChipDismissible-cjs.js

@@ -14,7 +14,7 @@ var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick, label: label },
         prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
         suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
 }

package/dist/InternalChipDismissible-es.js

@@ -12,7 +12,7 @@ import { C as Chip, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick, label: label },
         prefix && React__default.createElement(Chip.Prefix, null, prefix),
         suffix && React__default.createElement(Chip.Suffix, null, suffix)));
 }

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/docs/Chip/Chip.md

@@ -362,11 +362,13 @@ those more complex selection flows.
 |------|------|----------|---------|-------------|
 | `label` | `string` | Yes | — | The content of the chip. Will be displayed on the right if you include a heading. |
 | `ariaLabel` | `string` | No | — | Accessible label, which can be different from the primary label. |
+| `data-testid` | `string` | No | — |  |
 | `disabled` | `boolean` | No | — | Disables both mouse and keyboard functionality, and updates the visual style of the Chip to appear disabled. |
 | `heading` | `string` | No | — | Adds more prominent text to act as a heading. Will be displayed on the left with a | separator. |
 | `invalid` | `boolean` | No | — | Changes Chip styling to inform the user of an issue. |
-| `onClick` | `(value: string | number, ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void` | No | — | Chip Click Callback. Sends an event and sometimes a value (SelectableChip). |
-| `onKeyDown` | `(ev: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void` | No | — | Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed. |
+| `onClick` | `((ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void) & MouseEventHandler<ChipElement>` | No | — | Chip click callback using a standard event-first signature. |
+| `onClickValue` | `(value: string | number, ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void` | No | — | Value-first click callback retained as an upgrade path for existing consumers. @deprecated Prefer `onClick` with a cl... |
+| `onKeyDown` | `((ev: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) & KeyboardEventHandler<ChipElement>` | No | — | Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed. |
 | `ref` | `Ref<HTMLButtonElement | HTMLDivElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
 | `role` | `string` | No | `button` | The accessible role the Chip is fulfilling. Defaults to 'button' |
 | `tabIndex` | `number` | No | `0` | Used for accessibility purpopses, specifically using the tab key as navigation. |

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.1.2",
+  "version": "7.3.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "51968df8e0c2cc9dab415e165643c88284e8bf28"
+  "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>>;