@jobber/components 6.103.4 → 6.103.5

package/dist/Card-cjs.js

@@ -19,7 +19,7 @@ const SPACEBAR_KEY = " ";
  * Please use `<Card onClick={onClick} />` component instead.
  */
 function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
-    const cardRef = React.useRef();
+    const cardRef = React.useRef(null);
     return (React.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;

package/dist/Card-es.js

@@ -17,7 +17,7 @@ const SPACEBAR_KEY = " ";
  * Please use `<Card onClick={onClick} />` component instead.
  */
 function CardClickable({ className, onClick, children, UNSAFE_style = {}, }) {
-    const cardRef = useRef();
+    const cardRef = useRef(null);
     return (React__default.createElement("div", { ref: cardRef, "data-testid": "clickable-card", className: className, style: UNSAFE_style, onClick: onClick, onKeyUp: handleKeyup, onKeyDown: handleKeyDown, role: "button", tabIndex: 0 }, children));
     function isCardFocused() {
         return document.activeElement === cardRef.current;

package/dist/Chip/Chip.d.ts

@@ -2,8 +2,7 @@ import React from "react";
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import type { ChipProps } from "./Chip.types";
-declare const ChipNamespace: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     Prefix: typeof ChipPrefix;
     Suffix: typeof ChipSuffix;
 };
-export { ChipNamespace as Chip };

package/dist/Chip/hooks/useChildComponent.d.ts

@@ -6,4 +6,4 @@ import React from "react";
  * @param isCorrectComponent a function that accepts a ReactElement and returns a boolean.
  * @returns The first child component that returns true on isCorrectComponent
  */
-export declare function useChildComponent(children: ReactNode | undefined, isCorrectComponent: (toCheck: ReactElement) => boolean): ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+export declare function useChildComponent(children: ReactNode | undefined, isCorrectComponent: (toCheck: ReactElement) => boolean): ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;

package/dist/Chip/index.cjs

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

package/dist/Chip-cjs.js

@@ -21,14 +21,15 @@ function ChipPrefix({ children }) {
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = React.useRef();
+    const buttonRef = React.useRef(null);
     return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React.createElement(Icon.Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
+        var _a;
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
             event.stopPropagation();
-            buttonRef.current.click();
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
     function handleKeyDown(event) {
@@ -124,12 +125,12 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     return message;
 }
 ChipComponent.displayName = "Chip";
-const ChipNamespace = Object.assign(ChipComponent, {
+const Chip = Object.assign(ChipComponent, {
     Prefix: ChipPrefix,
     Suffix: ChipSuffix,
 });
 
-exports.ChipNamespace = ChipNamespace;
+exports.Chip = Chip;
 exports.InternalChipButton = InternalChipButton;
 exports.styles = styles$1;
 exports.styles$1 = styles;

package/dist/Chip-es.js

@@ -19,14 +19,15 @@ function ChipPrefix({ children }) {
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = useRef();
+    const buttonRef = useRef(null);
     return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default.createElement(Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
+        var _a;
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
             event.stopPropagation();
-            buttonRef.current.click();
+            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     }
     function handleKeyDown(event) {
@@ -122,9 +123,9 @@ function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, headin
     return message;
 }
 ChipComponent.displayName = "Chip";
-const ChipNamespace = Object.assign(ChipComponent, {
+const Chip = Object.assign(ChipComponent, {
     Prefix: ChipPrefix,
     Suffix: ChipSuffix,
 });
 
-export { ChipNamespace as C, InternalChipButton as I, styles as a, styles$1 as s };
+export { Chip 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.ChipNamespace, Object.assign({}, rest),
-        React.createElement(Chip.ChipNamespace.Suffix, { className: selected ? Chip.styles.selected : "" },
+    return (React.createElement(Chip.Chip, Object.assign({}, rest),
+        React.createElement(Chip.Chip.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.ChipNamespace, Object.assign({}, props),
-        React.createElement(Chip.ChipNamespace.Suffix, null,
+    return (React.createElement(Chip.Chip, Object.assign({}, props),
+        React.createElement(Chip.Chip.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 ChipNamespace, s as styles } from './Chip-es.js';
+import { C as Chip, s as styles } from './Chip-es.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);
-    return (React__default.createElement(ChipNamespace, Object.assign({}, rest),
-        React__default.createElement(ChipNamespace.Suffix, { className: selected ? styles.selected : "" },
+    return (React__default.createElement(Chip, Object.assign({}, rest),
+        React__default.createElement(Chip.Suffix, { className: selected ? styles.selected : "" },
             React__default.createElement(Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React__default.createElement(ChipNamespace, Object.assign({}, props),
-        React__default.createElement(ChipNamespace.Suffix, null,
+    return (React__default.createElement(Chip, Object.assign({}, props),
+        React__default.createElement(Chip.Suffix, null,
             React__default.createElement(Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 

package/dist/Chips/InternalChipDismissible/hooks/useInView.d.ts

@@ -1,4 +1,4 @@
 export declare function useInView<T extends Element>(): {
-    ref: import("react").RefObject<T>;
+    ref: import("react").RefObject<T | null>;
     isInView: boolean;
 };

package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts

@@ -8,7 +8,7 @@ export declare function useInternalChipDismissibleInput({ options, isLoadingMore
     searchValue: string;
     shouldCancelBlur: boolean;
     menuId: string;
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     activeOption: ChipDismissibleInputOptionProps;
     hasAvailableOptions: boolean;
     nextOptionIndex: number;

package/dist/Chips/InternalChipDismissible/hooks/useScrollToActive.d.ts

@@ -1 +1 @@
-export declare function useScrollToActive(index: number): import("react").MutableRefObject<HTMLDivElement | null>;
+export declare function useScrollToActive(index: number): import("react").RefObject<HTMLDivElement | null>;

package/dist/Combobox/Combobox.types.d.ts

@@ -165,7 +165,7 @@ export interface ComboboxContentProps {
     /**
      * Reference to the wrapping div element of all the Combobox pieces
      */
-    readonly wrapperRef: React.RefObject<HTMLDivElement>;
+    readonly wrapperRef: React.RefObject<HTMLDivElement | null>;
     /**
      * Is the Combobox open
      */
@@ -235,7 +235,7 @@ export interface ComboboxListProps {
     /**
      * A ref to the list element.
      */
-    readonly optionsListRef: React.RefObject<HTMLUListElement>;
+    readonly optionsListRef: React.RefObject<HTMLUListElement | null>;
     /**
      * The current search term. Used in the no results message.
      */

package/dist/Combobox/components/ComboboxActivator/ComboboxActivator.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ComboboxActivatorProps } from "../../Combobox.types";
-export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;

package/dist/Combobox/hooks/useCombobox.d.ts

@@ -3,7 +3,7 @@ import type React from "react";
 import type { UseMakeComboboxHandlersReturn } from "./useMakeComboboxHandlers";
 import { type ComboboxOption } from "../Combobox.types";
 type UseComboboxReturn = {
-    wrapperRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement | null>;
     searchValue: string;
     setSearchValue: Dispatch<React.SetStateAction<string>>;
     open: boolean;

package/dist/Combobox/hooks/useComboboxAccessibility.d.ts

@@ -1,7 +1,7 @@
 import type { UseInteractionsReturn } from "@floating-ui/react";
 import { type ComboboxOption } from "../Combobox.types";
-export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
-    floatingRef: React.RefObject<HTMLDivElement>;
+export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement | null>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement | null>): {
+    floatingRef: React.RefObject<HTMLDivElement | null>;
     floatingStyles: React.CSSProperties;
     floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
     nodeId?: string;

package/dist/Combobox/hooks/useComboboxContent.d.ts

@@ -1,6 +1,6 @@
 import { type ComboboxOption } from "../Combobox.types";
 interface useComboboxContent {
-    optionsListRef: React.RefObject<HTMLUListElement>;
+    optionsListRef: React.RefObject<HTMLUListElement | null>;
     onClear?: () => void;
     onSelectAll?: (selection: ComboboxOption[]) => void;
 }

package/dist/ComboboxActivator-cjs.js

@@ -22,8 +22,8 @@ function useComboboxActivatorAccessibility() {
 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.ChipNamespace)) {
+    if (React.isValidElement(props.children) &&
+        (props.children.type === Button.Button || props.children.type === Chip.Chip)) {
         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 'classnames';
-import { C as ChipNamespace } from './Chip-es.js';
+import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import '@jobber/design';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
@@ -20,8 +20,8 @@ function useComboboxActivatorAccessibility() {
 function ComboboxActivator(props) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const accessibilityAttributes = useComboboxActivatorAccessibility();
-    if (typeof props.children !== "function" &&
-        (props.children.type === Button || props.children.type === ChipNamespace)) {
+    if (React__default.isValidElement(props.children) &&
+        (props.children.type === Button || props.children.type === Chip)) {
         return React__default.cloneElement(props.children, {
             role: accessibilityAttributes.role,
             onClick: handleOpen,

package/dist/ComboboxTrigger-cjs.js

@@ -10,7 +10,7 @@ function ComboboxTrigger({ label = "Select", selected, activatorRef, }) {
     const { handleOpen } = React.useContext(ComboboxProvider.ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React.createElement(Chip.ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React.createElement(Chip.ChipNamespace.Suffix, null,
+    return (React.createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React.createElement(Chip.Chip.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 ChipNamespace } from './Chip-es.js';
+import { C as Chip } 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, activatorRef, }) {
     const { handleOpen } = React__default.useContext(ComboboxContext);
     const hasSelection = selected.length;
     const selectedLabel = selected.map(option => option.label).join(", ");
-    return (React__default.createElement(ChipNamespace, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(ChipNamespace.Suffix, null,
+    return (React__default.createElement(Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", ariaLabel: label, heading: label, onClick: handleOpen, role: "combobox", ref: activatorRef }, !hasSelection && (React__default.createElement(Chip.Suffix, null,
         React__default.createElement(Icon, { name: "add", size: "small" })))));
 }
 

package/dist/DataList/DataList.utils.d.ts

@@ -19,4 +19,4 @@ export declare function generateListItemElement<T extends DataListObject>(item:
  */
 export declare function generateHeaderElements<T extends DataListObject>(headers: DataListHeader<T>): DataListItemTypeFromHeader<T, DataListHeader<T>> | undefined;
 export declare function sortBreakpoints(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
-export declare function getExposedActions(childrenArray: ReactElement[], childCount?: number): ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function getExposedActions(childrenArray: ReactElement[], childCount?: number): ReactElement<unknown, string | React.JSXElementConstructor<any>>[];

package/dist/DataList/components/DataListHeaderTile/components/DataListSortingOptions.d.ts

@@ -5,8 +5,8 @@ interface DataListSortingOptionsProps {
     readonly selectedOption: DataListSorting | null;
     readonly onSelectChange: (selectedOption: SortableOptions) => void;
     readonly onClose: () => void;
-    readonly optionsListRef: React.RefObject<HTMLUListElement>;
-    readonly dataListHeaderTileRef: React.RefObject<HTMLElement>;
+    readonly optionsListRef: React.RefObject<HTMLUListElement | null>;
+    readonly dataListHeaderTileRef: React.RefObject<HTMLElement | null>;
 }
 export declare function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }: DataListSortingOptionsProps): React.JSX.Element;
 export {};

package/dist/DataList.utils-cjs.js

@@ -149,7 +149,9 @@ function sortBreakpoints(sizeProp) {
 function getExposedActions(childrenArray, childCount = 2) {
     const firstNChildren = childrenArray.slice(0, childCount);
     return firstNChildren.reduce((result, child, i) => {
+        // @ts-expect-error - TODO: fix props are type unknown
         const hasIcon = Boolean(child.props.icon);
+        // @ts-expect-error - TODO: fix props are type unknown
         const isAlwaysVisible = child.props.alwaysVisible; // If true, the child action will always be visible and not nested in the dropdown.
         if (isAlwaysVisible === false ||
             (isAlwaysVisible === undefined && !hasIcon)) {

package/dist/DataList.utils-es.js

@@ -147,7 +147,9 @@ function sortBreakpoints(sizeProp) {
 function getExposedActions(childrenArray, childCount = 2) {
     const firstNChildren = childrenArray.slice(0, childCount);
     return firstNChildren.reduce((result, child, i) => {
+        // @ts-expect-error - TODO: fix props are type unknown
         const hasIcon = Boolean(child.props.icon);
+        // @ts-expect-error - TODO: fix props are type unknown
         const isAlwaysVisible = child.props.alwaysVisible; // If true, the child action will always be visible and not nested in the dropdown.
         if (isAlwaysVisible === false ||
             (isAlwaysVisible === undefined && !hasIcon)) {

package/dist/DataListActions-cjs.js

@@ -14,7 +14,9 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     const exposedActions = DataList_utils.getExposedActions(childrenArray, itemsToExpose);
     childrenArray.splice(0, exposedActions.length);
     return (React.createElement(React.Fragment, null,
-        exposedActions.map(({ props }) => {
+        exposedActions.map(({ props: actionProps }) => {
+            const props = actionProps;
+            // @ts-expect-error - TODO: fix activeItem might be undefined
             const isVisible = props.visible ? props.visible(activeItem) : true;
             const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
             if (!isVisible || !hasIconOrAlwaysVisible) {
@@ -31,12 +33,17 @@ 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.Button, { ariaLabel: actionLabel, 
+                    // @ts-expect-error - TODO: fix props.label might be a function
+                    key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
+                        // @ts-expect-error - TODO: fix activeItem might be undefined
                         (_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 },
+            return (
+            // @ts-expect-error - TODO: fix actionLabel might be undefined
+            React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
                 React.createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {

package/dist/DataListActions-es.js

@@ -12,7 +12,9 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     const exposedActions = getExposedActions(childrenArray, itemsToExpose);
     childrenArray.splice(0, exposedActions.length);
     return (React__default.createElement(React__default.Fragment, null,
-        exposedActions.map(({ props }) => {
+        exposedActions.map(({ props: actionProps }) => {
+            const props = actionProps;
+            // @ts-expect-error - TODO: fix activeItem might be undefined
             const isVisible = props.visible ? props.visible(activeItem) : true;
             const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
             if (!isVisible || !hasIconOrAlwaysVisible) {
@@ -29,12 +31,17 @@ 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__default.createElement(Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                return (React__default.createElement(Button, { ariaLabel: actionLabel, 
+                    // @ts-expect-error - TODO: fix props.label might be a function
+                    key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
                         var _a;
+                        // @ts-expect-error - TODO: fix activeItem might be undefined
                         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
                     }, type: "secondary", variation: "subtle" }));
             }
-            return (React__default.createElement(Tooltip, { key: actionLabel, message: actionLabel },
+            return (
+            // @ts-expect-error - TODO: fix actionLabel might be undefined
+            React__default.createElement(Tooltip, { key: actionLabel, message: actionLabel },
                 React__default.createElement(Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {

package/dist/DataListItem-cjs.js

@@ -66,7 +66,9 @@ function useGetItemActions(item) {
     const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = React.useMemo(() => {
         return actionsArray.filter(action => {
+            // @ts-expect-error - TODO: fix action.props type is unknown
             if (React.isValidElement(action) && action.props.visible) {
+                // @ts-expect-error - TODO: fix action.props type is unknown
                 return action.props.visible(item);
             }
             return true;

package/dist/DataListItem-es.js

@@ -64,7 +64,9 @@ function useGetItemActions(item) {
     const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = useMemo(() => {
         return actionsArray.filter(action => {
+            // @ts-expect-error - TODO: fix action.props type is unknown
             if (isValidElement(action) && action.props.visible) {
+                // @ts-expect-error - TODO: fix action.props type is unknown
                 return action.props.visible(item);
             }
             return true;

package/dist/DataListSort-cjs.js

@@ -21,7 +21,7 @@ function DataListSort() {
             },
         ] },
         React.createElement(Combobox.Combobox.Activator, null,
-            React.createElement(Chip.ChipNamespace, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.ChipNamespace.Suffix, null,
+            React.createElement(Chip.Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React.createElement(Chip.Chip.Suffix, null,
                 React.createElement(Icon.Icon, { name: "arrowDown", size: "small" }))))),
         sortByOptions.map(({ label, value }) => (React.createElement(Combobox.Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {

package/dist/DataListSort-es.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { u as useDataListContext } from './DataListContext-es.js';
 import { C as Combobox } from './Combobox-es.js';
 import './ComboboxProvider-es.js';
-import { C as ChipNamespace } from './Chip-es.js';
+import { C as Chip } from './Chip-es.js';
 import './tslib.es6-es.js';
 import { I as Icon } from './Icon-es.js';
 
@@ -19,7 +19,7 @@ function DataListSort() {
             },
         ] },
         React__default.createElement(Combobox.Activator, null,
-            React__default.createElement(ChipNamespace, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(ChipNamespace.Suffix, null,
+            React__default.createElement(Chip, { heading: "Sort", label: getButtonLabel(), variation: state ? "base" : "subtle" }, !state && (React__default.createElement(Chip.Suffix, null,
                 React__default.createElement(Icon, { name: "arrowDown", size: "small" }))))),
         sortByOptions.map(({ label, value }) => (React__default.createElement(Combobox.Option, { key: value, id: value, label: label })))));
     function getSortByOptions() {

package/dist/DatePicker/useFocusOnSelectedDate.d.ts

@@ -1,5 +1,4 @@
-import type { MutableRefObject } from "react";
 export declare function useFocusOnSelectedDate(): {
-    ref: MutableRefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
     focusOnSelectedDate: () => void;
 };

package/dist/DatePicker-cjs.js

@@ -12692,7 +12692,7 @@ function InternalActivator(props, ref) {
 }
 
 function useFocusOnSelectedDate() {
-    const ref = React.useRef();
+    const ref = React.useRef(null);
     function focusOnSelectedDate() {
         var _a;
         const selectedDateClass = ".react-datepicker__day--selected";

package/dist/DatePicker-es.js

@@ -12690,7 +12690,7 @@ function InternalActivator(props, ref) {
 }
 
 function useFocusOnSelectedDate() {
-    const ref = useRef();
+    const ref = useRef(null);
     function focusOnSelectedDate() {
         var _a;
         const selectedDateClass = ".react-datepicker__day--selected";

package/dist/FormField/FormFieldAffix.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import type { XOR } from "ts-xor";
 import type { Affix, FormFieldProps, Suffix } from "./FormFieldTypes";
 interface AffixLabelProps extends Affix {
-    readonly labelRef: RefObject<HTMLDivElement>;
+    readonly labelRef: RefObject<HTMLDivElement | null>;
     readonly variation?: "prefix" | "suffix";
 }
 /**

package/dist/FormField/FormFieldTypes.d.ts

@@ -109,7 +109,7 @@ export interface CommonFormFieldProps {
     version?: 1;
 }
 export interface FormFieldProps extends CommonFormFieldProps {
-    actionsRef?: RefObject<FieldActionsRef>;
+    actionsRef?: RefObject<FieldActionsRef | null>;
     /**
      * Determines if the input should be auto-focused, using the HTML attribute
      */
@@ -126,8 +126,8 @@ export interface FormFieldProps extends CommonFormFieldProps {
      * `<select>`.
      */
     readonly children?: ReactNode;
-    inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-    wrapperRef?: RefObject<HTMLDivElement>;
+    inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null>;
+    wrapperRef?: RefObject<HTMLDivElement | null>;
     /**
      * Initial value of the input. Only use this when you need to pre-populate
      * the field with a data that is not controlled by the components state. If a

package/dist/FormField/hooks/useFormFieldFocus.d.ts

@@ -2,7 +2,7 @@ interface UseFormFieldFocus {
     focused: boolean;
 }
 interface UseFormFieldFocusProps {
-    wrapperRef?: React.RefObject<HTMLDivElement>;
+    wrapperRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare const formFieldFocusAttribute: {
     "data-atl-maintain-portal-focus": string;

package/dist/FormField/hooks/useFormFieldWrapperStyles.d.ts

@@ -2,8 +2,8 @@ import type { RefObject } from "react";
 import type { FormFieldProps } from "../FormFieldTypes";
 export interface useFormFieldWrapperStylesProps extends Pick<FormFieldProps, "size" | "align" | "placeholder" | "value" | "invalid" | "max" | "maxLength" | "type" | "disabled" | "inline"> {
     readonly error?: string;
-    suffixRef?: RefObject<HTMLDivElement>;
-    prefixRef?: RefObject<HTMLDivElement>;
+    suffixRef?: RefObject<HTMLDivElement | null>;
+    prefixRef?: RefObject<HTMLDivElement | null>;
     showMiniLabel?: boolean;
 }
 export interface LabelPadding {

package/dist/FormField-cjs.js

@@ -150,8 +150,8 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
 }
 
 function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = React.useRef();
-    const suffixRef = React.useRef();
+    const prefixRef = React.useRef(null);
+    const suffixRef = React.useRef(null);
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
         align,
         max,

package/dist/FormField-es.js

@@ -148,8 +148,8 @@ function getAffixPaddding({ value, type, prefixWidth, suffixWidth, }) {
 }
 
 function FormFieldWrapper({ align, description, descriptionIdentifier, placeholder, value, children, invalid, error, size, prefix, suffix, max, maxLength, type, disabled, inline, identifier, clearable, onClear, readonly, toolbar, toolbarVisibility = "while-editing", showMiniLabel = true, wrapperRef, }) {
-    const prefixRef = useRef();
-    const suffixRef = useRef();
+    const prefixRef = useRef(null);
+    const suffixRef = useRef(null);
     const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } = useFormFieldWrapperStyles({
         align,
         max,

package/dist/InputGroup-cjs.js

@@ -14,6 +14,7 @@ function InputGroup({ children, flowDirection = "vertical", }) {
 function isInvalidGroupNesting(childs) {
     return React.Children.toArray(childs).some(child => {
         if (child.type === InputGroup &&
+            // @ts-expect-error - TODO: fix child.props type is unknown
             child.props.flowDirection != "horizontal") {
             console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
             return true;

package/dist/InputGroup-es.js

@@ -12,6 +12,7 @@ function InputGroup({ children, flowDirection = "vertical", }) {
 function isInvalidGroupNesting(childs) {
     return React__default.Children.toArray(childs).some(child => {
         if (child.type === InputGroup &&
+            // @ts-expect-error - TODO: fix child.props type is unknown
             child.props.flowDirection != "horizontal") {
             console.error(`ERROR: InputGroup not rendered: nesting 'flowDirection="vertical"' columns not supported.`, `https://atlantis.getjobber.com/?path=/story/components-forms-and-inputs-inputgroup-web--nested`);
             return true;

package/dist/InputText/InputText.d.ts

@@ -26,7 +26,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly prefix?: import("../FormField").Affix | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;
@@ -60,7 +60,7 @@ export declare const InputText: React.ForwardRefExoticComponent<({
     readonly prefix?: import("../FormField").Affix | undefined;
     readonly autofocus?: boolean | undefined;
     readonly autocomplete?: (boolean | import("../FormField").AutocompleteTypes) | undefined;
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | undefined;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined;
     readonly keyboard?: ("numeric" | "decimal") | undefined;
     readonly maxLength?: number | undefined;
     readonly suffix?: import("ts-xor").XOR<import("../FormField").Affix, import("../FormField").Suffix> | undefined;

package/dist/InputText/useInputTextActions.d.ts

@@ -1,7 +1,7 @@
 import type { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
 import type { InputTextRebuiltProps } from "./InputText.types";
 export interface useInputTextActionsProps extends Pick<InputTextRebuiltProps, "onChange" | "onEnter" | "onFocus" | "onBlur" | "onKeyDown"> {
-    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
+    inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
 }
 /**
  * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.

package/dist/InputText/useInputTextFormField.d.ts

@@ -69,7 +69,7 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
         form?: string | undefined;
-        formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
+        formAction?: string | ((formData: FormData) => void | Promise<void>) | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
@@ -135,6 +135,10 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
@@ -337,6 +341,8 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onScroll?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onScrollCapture?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onScrollEnd?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onScrollEndCapture?: import("react").UIEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onWheel?: import("react").WheelEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
@@ -345,8 +351,16 @@ export declare function useInputTextFormField({ id, name, description, inline, h
         onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     };
     descriptionIdentifier: string;
 };

package/dist/InputText/useTextAreaResize.d.ts

@@ -6,8 +6,8 @@ import type { RowRange } from "./InputText.types";
 export declare function useTextAreaResize({ rows, value, inputRef, wrapperRef, }: {
     rows?: number | RowRange;
     value: string | number | Date | undefined;
-    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement>;
-    wrapperRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+    wrapperRef: RefObject<HTMLDivElement | null>;
 }): {
     resize: () => void;
     rowRange: RowRange;

package/dist/InternalChipDismissible-cjs.js

@@ -14,9 +14,9 @@ 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.ChipNamespace, { 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 },
-        prefix && React.createElement(Chip.ChipNamespace.Prefix, null, prefix),
-        suffix && React.createElement(Chip.ChipNamespace.Suffix, null, suffix)));
+    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 },
+        prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
+        suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};

package/dist/InternalChipDismissible-es.js

@@ -8,13 +8,13 @@ import { F as FloatingPortal } from './floating-ui.react-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
 import { S as Spinner } from './Spinner-es.js';
-import { C as ChipNamespace, I as InternalChipButton } from './Chip-es.js';
+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(ChipNamespace, { 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 },
-        prefix && React__default.createElement(ChipNamespace.Prefix, null, prefix),
-        suffix && React__default.createElement(ChipNamespace.Suffix, null, suffix)));
+    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 },
+        prefix && React__default.createElement(Chip.Prefix, null, prefix),
+        suffix && React__default.createElement(Chip.Suffix, null, suffix)));
 }
 
 var styles = {"wrapper":"XRnU90M2-fs-","input":"Dq-yFHd1zK0-","menu":"F7CpurjKzBI-","menuListOption":"_9SAK31TqNDY-","loadingIndicator":"s5vFJVv0t0Q-","activeOption":"_8d0w-JzgzS4-","spinning":"hDJGLX6kE-U-"};

package/dist/Menu-cjs.js

@@ -126,6 +126,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const { width } = jobberHooks.useWindowDimensions();
     const buttonID = React.useId();
     const menuID = React.useId();
+    // @ts-expect-error - TODO: fix activator.props type is unknown
     const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
@@ -198,6 +199,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         }))));
     return (React.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
         React.createElement("div", Object.assign({ ref: setReferenceElement }, getReferenceProps()), React.cloneElement(activator, {
+            // @ts-expect-error - TODO: fix activator.props type is unknown, onClick doesn't exist in unknown type
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,

package/dist/Menu-es.js

@@ -124,6 +124,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const { width } = useWindowDimensions();
     const buttonID = useId();
     const menuID = useId();
+    // @ts-expect-error - TODO: fix activator.props type is unknown
     const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
@@ -196,6 +197,7 @@ function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         }))));
     return (React__default.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
         React__default.createElement("div", Object.assign({ ref: setReferenceElement }, getReferenceProps()), React__default.cloneElement(activator, {
+            // @ts-expect-error - TODO: fix activator.props type is unknown, onClick doesn't exist in unknown type
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,

package/dist/MultiSelect-cjs.js

@@ -12,7 +12,7 @@ var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","ac
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
-    const menuDiv = React.useRef();
+    const menuDiv = React.useRef(null);
     const handleOptionClick = React.useCallback((clickedOption) => {
         setOptions(current => current.map(option => {
             if (option.label == clickedOption.label) {
@@ -87,13 +87,17 @@ function DropDownMenu({ options, setOptions }) {
         event.preventDefault();
         const newIndex = Math.max(0, highlightedIndex - 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "up");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "up");
+        }
     }
     function handlePressDown(event) {
         event.preventDefault();
         const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "down");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "down");
+        }
     }
 }
 
@@ -101,15 +105,16 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
     const [label, setLabel] = React.useState(defaultLabel);
     const [menuVisible, setMenuVisible] = React.useState(false);
     const [focused, setFocused] = React.useState(false);
-    const multiSelectContainer = React.useRef();
-    const multiSelectRef = React.useRef();
+    const multiSelectContainer = React.useRef(null);
+    const multiSelectRef = React.useRef(null);
     const multiSelectClass = classnames(styles$1.multiSelect, {
         [styles$1.active]: menuVisible,
         [styles$1.large]: size === "large",
         [styles$1.small]: size === "small",
     });
     function handleMenuVisibility() {
-        multiSelectRef.current.focus();
+        var _a;
+        (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setMenuVisible(!menuVisible);
     }
     const handleClickOutside = (e) => {
@@ -119,6 +124,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
         }
     };
     function handleKeydown(event) {
+        var _a;
         const { key, metaKey, ctrlKey } = event;
         if (metaKey || ctrlKey)
             return;
@@ -131,7 +137,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
                 break;
             }
             case "Escape": {
-                multiSelectRef.current.focus();
+                (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setMenuVisible(false);
                 break;
             }

package/dist/MultiSelect-es.js

@@ -10,7 +10,7 @@ var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","ac
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const menuDiv = useRef();
+    const menuDiv = useRef(null);
     const handleOptionClick = useCallback((clickedOption) => {
         setOptions(current => current.map(option => {
             if (option.label == clickedOption.label) {
@@ -85,13 +85,17 @@ function DropDownMenu({ options, setOptions }) {
         event.preventDefault();
         const newIndex = Math.max(0, highlightedIndex - 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "up");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "up");
+        }
     }
     function handlePressDown(event) {
         event.preventDefault();
         const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
         handleOptionFocus(newIndex);
-        scrollMenuIfItemNotInView(menuDiv.current, "down");
+        if (menuDiv.current) {
+            scrollMenuIfItemNotInView(menuDiv.current, "down");
+        }
     }
 }
 
@@ -99,15 +103,16 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
     const [label, setLabel] = useState(defaultLabel);
     const [menuVisible, setMenuVisible] = useState(false);
     const [focused, setFocused] = useState(false);
-    const multiSelectContainer = useRef();
-    const multiSelectRef = useRef();
+    const multiSelectContainer = useRef(null);
+    const multiSelectRef = useRef(null);
     const multiSelectClass = classnames(styles$1.multiSelect, {
         [styles$1.active]: menuVisible,
         [styles$1.large]: size === "large",
         [styles$1.small]: size === "small",
     });
     function handleMenuVisibility() {
-        multiSelectRef.current.focus();
+        var _a;
+        (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setMenuVisible(!menuVisible);
     }
     const handleClickOutside = (e) => {
@@ -117,6 +122,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
         }
     };
     function handleKeydown(event) {
+        var _a;
         const { key, metaKey, ctrlKey } = event;
         if (metaKey || ctrlKey)
             return;
@@ -129,7 +135,7 @@ function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange,
                 break;
             }
             case "Escape": {
-                multiSelectRef.current.focus();
+                (_a = multiSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 setMenuVisible(false);
                 break;
             }

package/dist/RadioGroup-cjs.js

@@ -31,7 +31,13 @@ function RadioGroup({ children, value, ariaLabel, onChange, name = React.useId()
     const className = classnames(styles.radioGroup, {
         [styles.directionHorizontal]: direction === "horizontal",
     });
-    return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React.Children.map(children, option => (React.createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
+    return (React.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React.Children.map(children, option => (
+    // @ts-expect-error - TODO: it thinks value is missing, but it's probably coming from option.props
+    React.createElement(InternalRadioOption
+    // @ts-expect-error - TODO: fix option.props type is unknown
+    , Object.assign({ 
+        // @ts-expect-error - TODO: fix option.props type is unknown
+        checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {
             onChange(newValue);

package/dist/RadioGroup-es.js

@@ -29,7 +29,13 @@ function RadioGroup({ children, value, ariaLabel, onChange, name = useId(), dire
     const className = classnames(styles.radioGroup, {
         [styles.directionHorizontal]: direction === "horizontal",
     });
-    return (React__default.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React__default.Children.map(children, option => (React__default.createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
+    return (React__default.createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: className }, React__default.Children.map(children, option => (
+    // @ts-expect-error - TODO: it thinks value is missing, but it's probably coming from option.props
+    React__default.createElement(InternalRadioOption
+    // @ts-expect-error - TODO: fix option.props type is unknown
+    , Object.assign({ 
+        // @ts-expect-error - TODO: fix option.props type is unknown
+        checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {
             onChange(newValue);

package/dist/Tabs/hooks/useTabsOverflow.d.ts

@@ -1,8 +1,8 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 interface UseTabsOverflow {
     overflowRight: boolean;
     overflowLeft: boolean;
-    tabRow: MutableRefObject<HTMLUListElement>;
+    tabRow: RefObject<HTMLUListElement | null>;
 }
 export declare function useTabsOverflow(): UseTabsOverflow;
 export {};

package/dist/Tabs-cjs.js

@@ -84,7 +84,7 @@ var throttle$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(throttle_
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = React.useState(false);
     const [overflowLeft, setOverflowLeft] = React.useState(false);
-    const tabRow = React.useRef();
+    const tabRow = React.useRef(null);
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
@@ -187,7 +187,9 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                 if (!isChildTab(child)) {
                     return child;
                 }
-                const index = tabChildren.findIndex(tab => tab.props.label === child.props.label);
+                const index = tabChildren.findIndex(
+                // @ts-expect-error - TODO: fix tab.props type is unknown
+                tab => tab.props.label === child.props.label);
                 return (React.createElement(InternalTab, { label: child.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: child.props.onClick, ref: el => {
                         if (el) {
                             tabRefs.current.set(index, el);

package/dist/Tabs-es.js

@@ -82,7 +82,7 @@ var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttle_1);
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = useState(false);
     const [overflowLeft, setOverflowLeft] = useState(false);
-    const tabRow = useRef();
+    const tabRow = useRef(null);
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
@@ -185,7 +185,9 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                 if (!isChildTab(child)) {
                     return child;
                 }
-                const index = tabChildren.findIndex(tab => tab.props.label === child.props.label);
+                const index = tabChildren.findIndex(
+                // @ts-expect-error - TODO: fix tab.props type is unknown
+                tab => tab.props.label === child.props.label);
                 return (React__default.createElement(InternalTab, { label: child.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: child.props.onClick, ref: el => {
                         if (el) {
                             tabRefs.current.set(index, el);

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -11,7 +11,7 @@ export declare function useTooltipPositioning({ preferredPlacement, }: ToolTipPo
         }) | undefined;
     };
     placement: import("@floating-ui/utils").Placement;
-    shadowRef: import("react").RefObject<HTMLSpanElement>;
+    shadowRef: import("react").RefObject<HTMLSpanElement | null>;
     setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
     setTooltipRef: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
 };

package/dist/helpers-cjs.js

@@ -23,6 +23,7 @@ var jobberHooks__namespace = /*#__PURE__*/_interopNamespaceDefault(jobberHooks);
 
 const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks__namespace, "useResizeObserver").mockReturnValue([
+        // @ts-expect-error - TODO: fix this mock ref value
         { current: null },
         {
             width: 1200,

package/dist/helpers-es.js

@@ -2,6 +2,7 @@ import * as jobberHooks from '@jobber/hooks';
 
 const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks, "useResizeObserver").mockReturnValue([
+        // @ts-expect-error - TODO: fix this mock ref value
         { current: null },
         {
             width: 1200,

package/dist/index.cjs

@@ -219,7 +219,7 @@ exports.Cluster = Cluster.Cluster;
 exports.Container = Container.Container;
 exports.Cover = Cover.Cover;
 exports.Checkbox = Checkbox_index.Checkbox;
-exports.Chip = Chip.ChipNamespace;
+exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
 exports.Icon = Icon.Icon;

package/dist/showToast-cjs.js

@@ -84,8 +84,8 @@ function showToast(props) {
 }
 const ToastContainer = React.forwardRef(ToastInternal);
 function ToasterOven(props) {
-    const toastRef = React.useRef();
-    React.useEffect(() => toastRef.current.add(props));
+    const toastRef = React.useRef(null);
+    React.useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
     return React.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {

package/dist/showToast-es.js

@@ -82,8 +82,8 @@ function showToast(props) {
 }
 const ToastContainer = forwardRef(ToastInternal);
 function ToasterOven(props) {
-    const toastRef = useRef();
-    useEffect(() => toastRef.current.add(props));
+    const toastRef = useRef(null);
+    useEffect(() => { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.add(props); });
     return React__default.createElement(ToastContainer, { ref: toastRef });
 }
 function ToastInternal(_, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.103.4",
+  "version": "6.103.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "89fec0b77276ec2b2fc80f4fc4ec2f6d207c1ac6"
+  "gitHead": "4b120bbb1789aa1b6b9a8eaf157be90d4ea15efc"
 }