@jobber/components 6.36.1 → 6.37.0

package/dist/Button/index.cjs

@@ -11,6 +11,6 @@ require('../Typography-cjs.js');
 
 
 
-exports.Button = Button.Button;
+exports.Button = Button.ButtonNamespace;
 exports.useButtonContext = Button.useButtonContext;
 exports.useButtonStyles = Button.useButtonStyles;

package/dist/Button-cjs.js

@@ -68,28 +68,45 @@ function ButtonLabel(_a) {
     return (React.createElement(Typography.Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
 }
 
-function Button(props) {
+const ButtonComponent = React.forwardRef((props, ref) => {
     const { size } = props;
     return (React.createElement(ButtonProvider, { size: size },
-        React.createElement(ButtonWrapper, Object.assign({}, props))));
-}
-function ButtonWrapper(props) {
+        React.createElement(ButtonWrapper, Object.assign({}, props, { ref: ref }))));
+});
+ButtonComponent.displayName = "Button";
+const ButtonWrapper = React.forwardRef(
+// eslint-disable-next-line max-statements
+(props, ref) => {
     const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
     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 && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    // Base props common to all element types
+    const commonProps = Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
+        id, style: UNSAFE_style.container }, (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
     const buttonInternals = children || React.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
-        return (React.createElement(reactRouterDom.Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+        // Props specific to Link
+        const linkProps = Object.assign(Object.assign({}, commonProps), { to: to });
+        return React.createElement(reactRouterDom.Link, Object.assign({}, linkProps), buttonInternals);
     }
-    const Tag = url ? "a" : "button";
-    return React.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
-}
-Button.Label = ButtonLabel;
-Button.Icon = ButtonIcon;
+    if (url) {
+        // Props specific to anchor
+        const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), { href: !disabled ? url : undefined }), (external && { target: "_blank" })), { ref: ref });
+        return React.createElement("a", Object.assign({}, anchorProps), buttonInternals);
+    }
+    // Props specific to button
+    const buttonProps = Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), { type: buttonType }), (submit && { name, value })), { ref: ref });
+    // Explanation: "type" IS defined in the buttonProps object
+    // eslint-disable-next-line react/button-has-type
+    return React.createElement("button", Object.assign({}, buttonProps), buttonInternals);
+});
+ButtonWrapper.displayName = "ButtonWrapper";
+const ButtonNamespace = Object.assign(ButtonComponent, {
+    Label: ButtonLabel,
+    Icon: ButtonIcon,
+});
 
-exports.Button = Button;
+exports.ButtonNamespace = ButtonNamespace;
 exports.useButtonContext = useButtonContext;
 exports.useButtonStyles = useButtonStyles;

package/dist/Button-es.js

@@ -1,4 +1,4 @@
-import React__default, { createContext, useContext } from 'react';
+import React__default, { createContext, useContext, forwardRef } from 'react';
 import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 import { _ as __rest } from './tslib.es6-es.js';
@@ -66,26 +66,43 @@ function ButtonLabel(_a) {
     return (React__default.createElement(Typography, Object.assign({ element: element, fontWeight: fontWeight, fontFamily: fontFamily, size: getTypeSizes(size) }, props)));
 }
 
-function Button(props) {
+const ButtonComponent = forwardRef((props, ref) => {
     const { size } = props;
     return (React__default.createElement(ButtonProvider, { size: size },
-        React__default.createElement(ButtonWrapper, Object.assign({}, props))));
-}
-function ButtonWrapper(props) {
+        React__default.createElement(ButtonWrapper, Object.assign({}, props, { ref: ref }))));
+});
+ButtonComponent.displayName = "Button";
+const ButtonWrapper = forwardRef(
+// eslint-disable-next-line max-statements
+(props, ref) => {
     const { ariaControls, ariaHaspopup, ariaExpanded, ariaLabel, disabled = false, external, id, name, onClick, onMouseDown, role, value, submit, to, url, UNSAFE_className = {}, UNSAFE_style = {}, children, } = props;
     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 && { target: "_blank" })), (url === undefined && to === undefined && { type: buttonType })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
+    // Base props common to all element types
+    const commonProps = Object.assign(Object.assign(Object.assign({ className: buttonClassNames, disabled,
+        id, style: UNSAFE_style.container }, (!disabled && { onClick: onClick })), (!disabled && { onMouseDown: onMouseDown })), { "aria-controls": ariaControls, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, role: role });
     const buttonInternals = children || React__default.createElement(ButtonContent, Object.assign({}, props));
     if (to) {
-        return (React__default.createElement(Link, Object.assign({}, tagProps, { to: to }), buttonInternals));
+        // Props specific to Link
+        const linkProps = Object.assign(Object.assign({}, commonProps), { to: to });
+        return React__default.createElement(Link, Object.assign({}, linkProps), buttonInternals);
     }
-    const Tag = url ? "a" : "button";
-    return React__default.createElement(Tag, Object.assign({}, tagProps), buttonInternals);
-}
-Button.Label = ButtonLabel;
-Button.Icon = ButtonIcon;
+    if (url) {
+        // Props specific to anchor
+        const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), { href: !disabled ? url : undefined }), (external && { target: "_blank" })), { ref: ref });
+        return React__default.createElement("a", Object.assign({}, anchorProps), buttonInternals);
+    }
+    // Props specific to button
+    const buttonProps = Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), { type: buttonType }), (submit && { name, value })), { ref: ref });
+    // Explanation: "type" IS defined in the buttonProps object
+    // eslint-disable-next-line react/button-has-type
+    return React__default.createElement("button", Object.assign({}, buttonProps), buttonInternals);
+});
+ButtonWrapper.displayName = "ButtonWrapper";
+const ButtonNamespace = Object.assign(ButtonComponent, {
+    Label: ButtonLabel,
+    Icon: ButtonIcon,
+});
 
-export { Button as B, useButtonContext as a, useButtonStyles as u };
+export { ButtonNamespace as B, useButtonContext as a, useButtonStyles as u };

package/dist/ButtonDismiss-cjs.js

@@ -5,7 +5,7 @@ var Button = require('./Button-cjs.js');
 require('classnames');
 
 function ButtonDismiss({ onClick, ariaLabel }) {
-    return (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
+    return (React.createElement(Button.ButtonNamespace, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
 }
 
 exports.ButtonDismiss = ButtonDismiss;

package/dist/ButtonDismiss-es.js

@@ -1,9 +1,9 @@
 import React__default from 'react';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 
 function ButtonDismiss({ onClick, ariaLabel }) {
-    return (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
+    return (React__default.createElement(ButtonNamespace, { ariaLabel: ariaLabel, icon: "remove", onClick: onClick, type: "tertiary", variation: "subtle" }));
 }
 
 export { ButtonDismiss as B };

package/dist/Card-cjs.js

@@ -59,9 +59,9 @@ function CardHeader({ title, header, }) {
     return React.createElement(React.Fragment, null);
 }
 function renderHeaderAction(action) {
-    if ((action === null || action === void 0 ? void 0 : action.type) === Button.Button) {
+    if ((action === null || action === void 0 ? void 0 : action.type) === Button.ButtonNamespace) {
         const props = Object.assign(Object.assign({ type: "tertiary" }, action.props), { size: "small" });
-        return action && React.createElement(Button.Button, Object.assign({}, props));
+        return action && React.createElement(Button.ButtonNamespace, Object.assign({}, props));
     }
     if ((action === null || action === void 0 ? void 0 : action.type) === Menu.Menu) {
         return action && React.createElement(Menu.Menu, Object.assign({}, action.props));

package/dist/Card-es.js

@@ -1,7 +1,7 @@
 import React__default, { useRef } from 'react';
 import classnames from 'classnames';
 import { H as Heading } from './Heading-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import { M as Menu } from './Menu-es.js';
 
 var styles = {"card":"-PlHaWx00Hw-","accent":"Iilm5Uhxo50-","clickable":"Vppn4k0fBsc-","header":"l3-Pkynq2zA-","spinning":"hvqmZrWenIs-"};
@@ -57,9 +57,9 @@ function CardHeader({ title, header, }) {
     return React__default.createElement(React__default.Fragment, null);
 }
 function renderHeaderAction(action) {
-    if ((action === null || action === void 0 ? void 0 : action.type) === Button) {
+    if ((action === null || action === void 0 ? void 0 : action.type) === ButtonNamespace) {
         const props = Object.assign(Object.assign({ type: "tertiary" }, action.props), { size: "small" });
-        return action && React__default.createElement(Button, Object.assign({}, props));
+        return action && React__default.createElement(ButtonNamespace, Object.assign({}, props));
     }
     if ((action === null || action === void 0 ? void 0 : action.type) === Menu) {
         return action && React__default.createElement(Menu, Object.assign({}, action.props));

package/dist/Chip/Chip.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import { ChipProps } from "./Chip.types";
-export declare const Chip: {
-    ({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role, tabIndex, variation, }: ChipProps): JSX.Element;
+declare const ChipNamespace: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     Prefix: typeof ChipPrefix;
     Suffix: typeof ChipSuffix;
 };
+export { ChipNamespace as Chip };

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

@@ -0,0 +1,64 @@
+import React, { PropsWithChildren } from "react";
+export interface ChipProps extends PropsWithChildren {
+    /**
+     * Accessible label, which can be different from the primary label.
+     */
+    readonly ariaLabel?: string;
+    /**
+     * The testing id for the chip if necessary.
+     */
+    testID?: string;
+    /**
+     * Disables both mouse and keyboard functionality, and updates the visual style of the Chip to appear disabled.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Adds more prominent text to act as a heading. Will be displayed on the left with a | separator.
+     */
+    readonly heading?: string;
+    /**
+     * Changes Chip styling to inform the user of an issue.
+     */
+    readonly invalid?: boolean;
+    /**
+     * The content of the chip. Will be displayed on the right if you include a heading.
+     */
+    readonly label: string;
+    /**
+     * The accessible role the Chip is fulfilling. Defaults to 'button'
+     */
+    readonly role?: string;
+    /**
+     * Used for accessibility purpopses, specifically using the tab key as navigation.
+     * @default 0
+     */
+    readonly tabIndex?: number;
+    /**
+     * Will be passed to onClick, when the user clicks on this Chip.
+     */
+    readonly value?: string | number;
+    /**
+     * Button style variation. Does not affect functionality.
+     * @default "base"
+     */
+    readonly variation?: ChipVariations;
+    /**
+     * Chip Click Callback. Sends an event and sometimes a value (SelectableChip).
+     */
+    readonly onClick?: (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.
+     */
+    readonly onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
+}
+export type ChipVariations = "subtle" | "base";
+export interface ChipSelectableProps extends ChipProps {
+    /**
+     * Is Chip selected?
+     */
+    readonly selected?: boolean;
+    /**
+     * Send this back onClick. Good for determining which Chip was clicked.
+     */
+    readonly value?: string | number;
+}

package/dist/Chip/index.cjs

@@ -21,6 +21,6 @@ require('../tslib.es6-cjs.js');
 
 
 
-exports.Chip = Chip.Chip;
+exports.Chip = Chip.ChipNamespace;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;

package/dist/Chip-cjs.js

@@ -75,35 +75,56 @@ const allowedSuffixIcons = [
     "arrowDown",
 ];
 
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
+const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
         [styles$1.subtle]: variation === "subtle",
         [styles$1.disabled]: disabled,
     });
-    const prefix = useChildComponent.useChildComponent(children, d => d.type === Chip.Prefix);
-    const suffix = useChildComponent.useChildComponent(children, d => d.type === Chip.Suffix);
+    const prefix = useChildComponent.useChildComponent(children, d => d.type === ChipPrefix);
+    const suffix = useChildComponent.useChildComponent(children, d => d.type === ChipSuffix);
     const [labelRef, labelFullyVisible] = useInView.useInView_2();
     const [headingRef, headingFullyVisible] = useInView.useInView_2();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
-    const Tag = onClick ? "button" : "div";
-    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage, setTabIndex: false },
-        React.createElement(Tag, { className: classes, onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev), tabIndex: disabled ? -1 : tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel, disabled: disabled, role: role, "data-testid": testID, type: "button" },
-            prefix,
-            React.createElement("div", { className: styles$1.chipContent },
-                heading && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
-                        heading,
-                        React.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
-                    label && React.createElement("span", { className: styles$1.chipBar }))),
-                React.createElement(Typography.Typography, { size: "base" },
-                    label,
-                    React.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
-                !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
-                    React.createElement("span", null)))),
-            suffix)));
-};
+    const chipContent = (React.createElement(React.Fragment, null,
+        prefix,
+        React.createElement("div", { className: styles$1.chipContent },
+            heading && (React.createElement(React.Fragment, null,
+                React.createElement(Typography.Typography, { size: "base", fontWeight: "medium" },
+                    heading,
+                    React.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
+                label && React.createElement("span", { className: styles$1.chipBar }))),
+            React.createElement(Typography.Typography, { size: "base" },
+                label,
+                React.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
+            !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)));
+});
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";
     if (heading && !headingFullyVisible) {
@@ -114,10 +135,14 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     }
     return message;
 }
-Chip.Prefix = ChipPrefix;
-Chip.Suffix = ChipSuffix;
+ChipComponent.displayName = "Chip";
+// Required to assign sub-components to the Chip component when it is a forwardRef
+const ChipNamespace = Object.assign(ChipComponent, {
+    Prefix: ChipPrefix,
+    Suffix: ChipSuffix,
+});
 
-exports.Chip = Chip;
+exports.ChipNamespace = ChipNamespace;
 exports.InternalChipButton = InternalChipButton;
 exports.styles = styles$1;
 exports.styles$1 = styles;

package/dist/Chip-es.js

@@ -1,4 +1,4 @@
-import React__default, { useRef } from 'react';
+import React__default, { useRef, forwardRef } from 'react';
 import classnames from 'classnames';
 import { u as useInView_2 } from './useInView-es.js';
 import { A as Avatar } from './Avatar-es.js';
@@ -73,35 +73,56 @@ const allowedSuffixIcons = [
     "arrowDown",
 ];
 
-const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }) => {
+const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
         [styles$1.subtle]: variation === "subtle",
         [styles$1.disabled]: disabled,
     });
-    const prefix = useChildComponent(children, d => d.type === Chip.Prefix);
-    const suffix = useChildComponent(children, d => d.type === Chip.Suffix);
+    const prefix = useChildComponent(children, d => d.type === ChipPrefix);
+    const suffix = useChildComponent(children, d => d.type === ChipSuffix);
     const [labelRef, labelFullyVisible] = useInView_2();
     const [headingRef, headingFullyVisible] = useInView_2();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
-    const Tag = onClick ? "button" : "div";
-    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false },
-        React__default.createElement(Tag, { className: classes, onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev), tabIndex: disabled ? -1 : tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel, disabled: disabled, role: role, "data-testid": testID, type: "button" },
-            prefix,
-            React__default.createElement("div", { className: styles$1.chipContent },
-                heading && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Typography, { size: "base", fontWeight: "medium" },
-                        heading,
-                        React__default.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
-                    label && React__default.createElement("span", { className: styles$1.chipBar }))),
-                React__default.createElement(Typography, { size: "base" },
-                    label,
-                    React__default.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
-                !labelFullyVisible && (React__default.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
-                    React__default.createElement("span", null)))),
-            suffix)));
-};
+    const chipContent = (React__default.createElement(React__default.Fragment, null,
+        prefix,
+        React__default.createElement("div", { className: styles$1.chipContent },
+            heading && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Typography, { size: "base", fontWeight: "medium" },
+                    heading,
+                    React__default.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
+                label && React__default.createElement("span", { className: styles$1.chipBar }))),
+            React__default.createElement(Typography, { size: "base" },
+                label,
+                React__default.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
+            !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)));
+});
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";
     if (heading && !headingFullyVisible) {
@@ -112,7 +133,11 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     }
     return message;
 }
-Chip.Prefix = ChipPrefix;
-Chip.Suffix = ChipSuffix;
+ChipComponent.displayName = "Chip";
+// Required to assign sub-components to the Chip component when it is a forwardRef
+const ChipNamespace = Object.assign(ChipComponent, {
+    Prefix: ChipPrefix,
+    Suffix: ChipSuffix,
+});
 
-export { Chip as C, InternalChipButton as I, styles as a, styles$1 as s };
+export { ChipNamespace as C, InternalChipButton as I, styles as a, styles$1 as s };

package/dist/ChipDismissible-cjs.js

@@ -7,14 +7,14 @@ var Chip = require('./Chip-cjs.js');
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = tslib_es6.__rest(_a, ["selected"]);
-    return (React.createElement(Chip.Chip, Object.assign({}, rest),
-        React.createElement(Chip.Chip.Suffix, { className: selected ? Chip.styles.selected : "" },
+    return (React.createElement(Chip.ChipNamespace, Object.assign({}, rest),
+        React.createElement(Chip.ChipNamespace.Suffix, { className: selected ? Chip.styles.selected : "" },
             React.createElement(Icon.Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React.createElement(Chip.Chip, Object.assign({}, props),
-        React.createElement(Chip.Chip.Suffix, null,
+    return (React.createElement(Chip.ChipNamespace, Object.assign({}, props),
+        React.createElement(Chip.ChipNamespace.Suffix, null,
             React.createElement(Icon.Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/ChipDismissible-es.js

@@ -1,18 +1,18 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default from 'react';
 import { I as Icon } from './Icon-es.js';
-import { C as Chip, s as styles } from './Chip-es.js';
+import { C as ChipNamespace, s as styles } from './Chip-es.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);
-    return (React__default.createElement(Chip, Object.assign({}, rest),
-        React__default.createElement(Chip.Suffix, { className: selected ? styles.selected : "" },
+    return (React__default.createElement(ChipNamespace, Object.assign({}, rest),
+        React__default.createElement(ChipNamespace.Suffix, { className: selected ? styles.selected : "" },
             React__default.createElement(Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React__default.createElement(Chip, Object.assign({}, props),
-        React__default.createElement(Chip.Suffix, null,
+    return (React__default.createElement(ChipNamespace, Object.assign({}, props),
+        React__default.createElement(ChipNamespace.Suffix, null,
             React__default.createElement(Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/ComboboxActivator-cjs.js

@@ -23,7 +23,7 @@ function ComboboxActivator(props) {
     const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
     const accessibilityAttributes = useComboboxActivatorAccessibility();
     if (typeof props.children !== "function" &&
-        (props.children.type === Button.Button || props.children.type === Chip.Chip)) {
+        (props.children.type === Button.ButtonNamespace || props.children.type === Chip.ChipNamespace)) {
         return React.cloneElement(props.children, {
             role: accessibilityAttributes.role,
             onClick: handleOpen,

package/dist/ComboboxActivator-es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from 'react';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
-import { C as Chip } from './Chip-es.js';
+import { C as ChipNamespace } from './Chip-es.js';
 import './tslib.es6-es.js';
 import '@jobber/design';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
@@ -21,7 +21,7 @@ function ComboboxActivator(props) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const accessibilityAttributes = useComboboxActivatorAccessibility();
     if (typeof props.children !== "function" &&
-        (props.children.type === Button || props.children.type === Chip)) {
+        (props.children.type === ButtonNamespace || props.children.type === ChipNamespace)) {
         return React__default.cloneElement(props.children, {
             role: accessibilityAttributes.role,
             onClick: handleOpen,

package/dist/ComboboxContentHeader-cjs.js

@@ -15,7 +15,7 @@ function ComboboxContentHeader(props) {
     const showAction = hasSelected || props.hasOptionsVisible;
     return (React.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
         React.createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
-        showAction && (React.createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+        showAction && (React.createElement(Button.ButtonNamespace, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
 function getLabel(hasSelected, count, subjectNoun) {
     if (hasSelected) {

package/dist/ComboboxContentHeader-es.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
-import { B as Button } from './Button-es.js';
+import { B as ButtonNamespace } from './Button-es.js';
 import 'classnames';
 
 var styles = {"header":"nrNh3feibg8-","spinning":"rcoGBsZN55M-"};
@@ -13,7 +13,7 @@ function ComboboxContentHeader(props) {
     const showAction = hasSelected || props.hasOptionsVisible;
     return (React__default.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
         React__default.createElement(Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
-        showAction && (React__default.createElement(Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+        showAction && (React__default.createElement(ButtonNamespace, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
 function getLabel(hasSelected, count, subjectNoun) {
     if (hasSelected) {

package/dist/ComboboxTrigger-cjs.js

@@ -10,7 +10,7 @@ function ComboboxTrigger({ label = "Select", selected, }) {
     const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React.createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React.createElement(Chip.Chip.Suffix, null,
+    return (React.createElement(Chip.ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React.createElement(Chip.ChipNamespace.Suffix, null,
         React.createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 

package/dist/ComboboxTrigger-es.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { C as Chip } from './Chip-es.js';
+import { C as ChipNamespace } from './Chip-es.js';
 import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
@@ -8,7 +8,7 @@ function ComboboxTrigger({ label = "Select", selected, }) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React__default.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React__default.createElement(Chip.Suffix, null,
+    return (React__default.createElement(ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox" }, !hasSelection && (React__default.createElement(ChipNamespace.Suffix, null,
         React__default.createElement(Icon, { name: "add", size: "small" })))));
 }
 

package/dist/DataListActions-cjs.js

@@ -31,13 +31,13 @@ function DataListActions({ children, itemsToExpose = 2, }) {
             const actionLabel = getActionLabel();
             // If the action is always visible, we don't want a tooltip.
             if (props.alwaysVisible) {
-                return (React.createElement(Button.Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                return (React.createElement(Button.ButtonNamespace, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
                         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
                     }, type: "secondary", variation: "subtle" }));
             }
             return (React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
-                React.createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
+                React.createElement(Button.ButtonNamespace, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {
                             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);