@jobber/components 7.2.0 → 7.4.0

package/dist/Button/Button.d.ts

@@ -1,7 +1,13 @@
 import React from "react";
-import { type ButtonProps } from "./Button.types";
+import type { ButtonProps } from "./Button.types";
 import { ButtonIcon, ButtonLabel } from "./ButtonInternals";
-declare function Button(props: ButtonProps): React.JSX.Element;
+type ButtonElement = HTMLAnchorElement | HTMLButtonElement;
+type ButtonRuntimeProps = ButtonProps & React.HTMLAttributes<ButtonElement> & {
+    readonly className?: string;
+    readonly ref?: React.Ref<ButtonElement>;
+    readonly style?: React.CSSProperties;
+};
+declare function Button(props: ButtonRuntimeProps): React.JSX.Element;
 declare namespace Button {
     var Label: typeof ButtonLabel;
     var Icon: typeof ButtonIcon;

package/dist/Button/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 var Button = require('../Button-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('react-router-dom');
 require('classnames');
-require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/Button/index.mjs

@@ -1,8 +1,8 @@
 export { B as Button, a as useButtonContext, u as useButtonStyles } from '../Button-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'react-router-dom';
 import 'classnames';
-import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/Button-cjs.js

@@ -1,9 +1,9 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var reactRouterDom = require('react-router-dom');
 var classnames = require('classnames');
-var tslib_es6 = require('./tslib.es6-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var Typography = require('./Typography-cjs.js');
 
@@ -74,22 +74,47 @@ function Button(props) {
     return (React.createElement(ButtonProvider, { size: size },
         React.createElement(ButtonWrapper, Object.assign({}, props))));
 }
+// eslint-disable-next-line max-statements
 function ButtonWrapper(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, loading, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, "aria-controls": ariaControlsProp, "aria-haspopup": ariaHaspopupProp, "aria-expanded": ariaExpandedProp, "aria-label": ariaLabelProp, disabled = false, external, id, name, onClick, onMouseDown, loading, role, value, submit, fullWidth: _fullWidth, icon: _icon, iconOnRight: _iconOnRight, label: _label, size: _size, to, type: _type, url, variation: _variation, UNSAFE_className = {}, UNSAFE_style = {}, children, className, style, ref, onKeyDown, onKeyUp, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, tabIndex, title } = props, rest = tslib_es6.__rest(props, ["ariaControls", "ariaHaspopup", "ariaExpanded", "ariaLabel", "aria-controls", "aria-haspopup", "aria-expanded", "aria-label", "disabled", "external", "id", "name", "onClick", "onMouseDown", "loading", "role", "value", "submit", "fullWidth", "icon", "iconOnRight", "label", "size", "to", "type", "url", "variation", "UNSAFE_className", "UNSAFE_style", "children", "className", "style", "ref", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "tabIndex", "title"]);
     const { combined } = useButtonStyles(props);
-    const buttonType = submit ? "submit" : "button";
-    const buttonClassNames = classnames(combined, UNSAFE_className.container);
-    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
-        id, style: UNSAFE_style.container }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && {
+    const isLinkButton = Boolean(url || to);
+    const buttonClassNames = classnames(combined, UNSAFE_className.container, className);
+    const sharedTagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { className: buttonClassNames, id, style: Object.assign(Object.assign({}, style), UNSAFE_style.container) }), (!disabled && {
+        onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        },
+    })), (!disabled && {
+        onMouseDown: (event) => {
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        },
+    })), (external && {
         target: "_blank",
         rel: "noopener noreferrer",
-    })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-busy": loading, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    })), { "aria-disabled": disabled && isLinkButton ? true : undefined, "aria-controls": ariaControls !== null && ariaControls !== void 0 ? ariaControls : ariaControlsProp, "aria-haspopup": ariaHaspopup !== null && ariaHaspopup !== void 0 ? ariaHaspopup : ariaHaspopupProp, "aria-busy": loading, "aria-expanded": ariaExpanded !== null && ariaExpanded !== void 0 ? ariaExpanded : ariaExpandedProp, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role,
+        tabIndex,
+        title,
+        onKeyDown,
+        onKeyUp,
+        onFocus,
+        onBlur,
+        onPointerDown,
+        onPointerUp,
+        onPointerEnter,
+        onPointerLeave,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchStart,
+        onTouchEnd,
+        onContextMenu });
     const buttonInternals = children || React.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
-        return (React.createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+        return (React.createElement(reactRouterDom.Link, Object.assign({}, sharedTagProps, { to: to }), buttonInternals));
+    }
+    if (url) {
+        return (React.createElement("a", Object.assign({}, sharedTagProps, { ref: ref, href: !disabled ? url : undefined }), buttonInternals));
     }
-    const Tag = url ? "a" : "button";
-    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+    return (React.createElement("button", Object.assign({}, sharedTagProps, { ref: ref, type: submit ? "submit" : "button", disabled: disabled }, (submit ? { name, value } : {})), buttonInternals));
 }
 Button.Label = ButtonLabel;
 Button.Icon = ButtonIcon;

package/dist/Button-es.js

@@ -1,7 +1,7 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { createContext, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
-import { _ as __rest } from './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 import { T as Typography } from './Typography-es.js';
 
@@ -72,22 +72,47 @@ function Button(props) {
     return (React__default.createElement(ButtonProvider, { size: size },
         React__default.createElement(ButtonWrapper, Object.assign({}, props))));
 }
+// eslint-disable-next-line max-statements
 function ButtonWrapper(props) {
-    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, loading, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
+    const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, "aria-controls": ariaControlsProp, "aria-haspopup": ariaHaspopupProp, "aria-expanded": ariaExpandedProp, "aria-label": ariaLabelProp, disabled = false, external, id, name, onClick, onMouseDown, loading, role, value, submit, fullWidth: _fullWidth, icon: _icon, iconOnRight: _iconOnRight, label: _label, size: _size, to, type: _type, url, variation: _variation, UNSAFE_className = {}, UNSAFE_style = {}, children, className, style, ref, onKeyDown, onKeyUp, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, tabIndex, title } = props, rest = __rest(props, ["ariaControls", "ariaHaspopup", "ariaExpanded", "ariaLabel", "aria-controls", "aria-haspopup", "aria-expanded", "aria-label", "disabled", "external", "id", "name", "onClick", "onMouseDown", "loading", "role", "value", "submit", "fullWidth", "icon", "iconOnRight", "label", "size", "to", "type", "url", "variation", "UNSAFE_className", "UNSAFE_style", "children", "className", "style", "ref", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "tabIndex", "title"]);
     const { combined } = useButtonStyles(props);
-    const buttonType = submit ? "submit" : "button";
-    const buttonClassNames = classnames(combined, UNSAFE_className.container);
-    const tagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
-        id, style: UNSAFE_style.container }, (submit && { name, value })), (!disabled && { href: url })), (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), (external && {
+    const isLinkButton = Boolean(url || to);
+    const buttonClassNames = classnames(combined, UNSAFE_className.container, className);
+    const sharedTagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { className: buttonClassNames, id, style: Object.assign(Object.assign({}, style), UNSAFE_style.container) }), (!disabled && {
+        onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        },
+    })), (!disabled && {
+        onMouseDown: (event) => {
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        },
+    })), (external && {
         target: "_blank",
         rel: "noopener noreferrer",
-    })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-busy": loading, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    })), { "aria-disabled": disabled && isLinkButton ? true : undefined, "aria-controls": ariaControls !== null && ariaControls !== void 0 ? ariaControls : ariaControlsProp, "aria-haspopup": ariaHaspopup !== null && ariaHaspopup !== void 0 ? ariaHaspopup : ariaHaspopupProp, "aria-busy": loading, "aria-expanded": ariaExpanded !== null && ariaExpanded !== void 0 ? ariaExpanded : ariaExpandedProp, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role,
+        tabIndex,
+        title,
+        onKeyDown,
+        onKeyUp,
+        onFocus,
+        onBlur,
+        onPointerDown,
+        onPointerUp,
+        onPointerEnter,
+        onPointerLeave,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchStart,
+        onTouchEnd,
+        onContextMenu });
     const buttonInternals = children || React__default.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
-        return (React__default.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+        return (React__default.createElement(Link, Object.assign({}, sharedTagProps, { to: to }), buttonInternals));
+    }
+    if (url) {
+        return (React__default.createElement("a", Object.assign({}, sharedTagProps, { ref: ref, href: !disabled ? url : undefined }), buttonInternals));
     }
-    const Tag = url ? "a" : "button";
-    return React__default.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
+    return (React__default.createElement("button", Object.assign({}, sharedTagProps, { ref: ref, type: submit ? "submit" : "button", disabled: disabled }, (submit ? { name, value } : {})), buttonInternals));
 }
 Button.Label = ButtonLabel;
 Button.Icon = ButtonIcon;

package/dist/ButtonDismiss/index.cjs

@@ -3,9 +3,9 @@
 var ButtonDismiss = require('../ButtonDismiss-cjs.js');
 require('react');
 require('../Button-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react-router-dom');
 require('classnames');
-require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');

package/dist/ButtonDismiss/index.mjs

@@ -1,9 +1,9 @@
 export { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import 'react';
 import '../Button-es.js';
+import '../tslib.es6-es.js';
 import 'react-router-dom';
 import 'classnames';
-import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';

package/dist/Card/index.cjs

@@ -6,8 +6,8 @@ require('classnames');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Button-cjs.js');
-require('react-router-dom');
 require('../tslib.es6-cjs.js');
+require('react-router-dom');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');

package/dist/Card/index.mjs

@@ -4,8 +4,8 @@ import 'classnames';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Button-es.js';
-import 'react-router-dom';
 import '../tslib.es6-es.js';
+import 'react-router-dom';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';

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

@@ -29,8 +29,8 @@ require('classnames');
 require('../../Text-cjs.js');
 require('../../Typography-cjs.js');
 require('../../Button-cjs.js');
-require('react-router-dom');
 require('../../tslib.es6-cjs.js');
+require('react-router-dom');
 require('../../Spinner-cjs.js');
 require('../../Chip-cjs.js');
 require('../../Avatar-cjs.js');