@jobber/components 6.60.4 → 6.61.0

package/dist/AtlantisThemeContext-es.js

@@ -1,7 +1,7 @@
 import { tokens, darkTokens } from '@jobber/design';
 import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import { e as eq_1, b as _Stack } from './identity-es.js';
+import { e as eq_1, c as _Stack } from './identity-es.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
 import { _ as _baseFor } from './_baseFor-es.js';
 import { _ as _copyObject, k as keysIn_1, a as _cloneBufferExports, b as _cloneTypedArray, c as _copyArray, d as _initCloneObject, i as isPlainObject_1 } from './keysIn-es.js';

package/dist/Autocomplete/index.cjs

@@ -20,11 +20,11 @@ require('../ButtonDismiss-cjs.js');
 require('../noop-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../floating-ui.react-cjs.js');
-require('../AtlantisPortalContent-cjs.js');
-require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');

package/dist/Autocomplete/index.mjs

@@ -18,11 +18,11 @@ import '../ButtonDismiss-es.js';
 import '../noop-es.js';
 import '../_commonjsHelpers-es.js';
 import '../floating-ui.react-es.js';
-import '../AtlantisPortalContent-es.js';
-import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFor-es.js';
 import '../keysIn-es.js';

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

@@ -1,3 +1,7 @@
 import React from "react";
-import { CheckboxRebuiltProps } from "./Checkbox.types";
-export declare function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, id, onBlur, onChange, onFocus, }: CheckboxRebuiltProps): React.JSX.Element;
+export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<Omit<import("./Checkbox.types").BaseCheckboxProps, "children" | "onChange" | "label" | "description"> & {
+    label?: string | React.ReactElement;
+    description?: string | React.ReactElement;
+    onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
+    version: 2;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -49,6 +49,10 @@ export interface BaseCheckboxProps {
      * Called when the checkbox loses focus
      */
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Whether the checkbox is invalid
+     */
+    invalid?: boolean;
 }
 interface CheckboxLabelProps extends BaseCheckboxProps {
     /**

package/dist/Checkbox/index.cjs

@@ -9,7 +9,7 @@ var Text = require('../Text-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
 
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
 
 function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
     const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
@@ -54,8 +54,8 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -69,21 +69,23 @@ function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value
     return (React.createElement("div", { className: styles.checkBoxParent },
         React.createElement("label", { className: wrapperClassName },
             React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React.createElement("span", { className: styles.checkBox },
                     React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
             labelContent && React.createElement("span", { className: styles.label }, labelContent)),
         description && (React.createElement("div", { className: styles.description }, descriptionContent))));
-}
+});
+CheckboxRebuilt.displayName = "CheckboxRebuilt";
 
 function isNewCheckboxProps(props) {
     return props.version === 2;
 }
-function Checkbox(props) {
+const Checkbox = React.forwardRef(function CheckboxShim(props, ref) {
     if (isNewCheckboxProps(props)) {
-        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+        return React.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
     }
     return React.createElement(CheckboxLegacy, Object.assign({}, props));
-}
+});
+Checkbox.displayName = "Checkbox";
 
 exports.Checkbox = Checkbox;

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox/index.mjs

@@ -1,4 +1,4 @@
-import React__default, { useState, useId, useEffect } from 'react';
+import React__default, { useState, useId, useEffect, forwardRef } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import classnames from 'classnames';
 import { useFormContext, useForm, Controller } from 'react-hook-form';
@@ -7,7 +7,7 @@ import { T as Text } from '../Text-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
 
-var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","invalid":"Gqnclw4WaeQ-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
 
 function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
     const { control, setValue, watch } = useFormContext() != undefined
@@ -52,8 +52,8 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
-    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -67,21 +67,23 @@ function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value
     return (React__default.createElement("div", { className: styles.checkBoxParent },
         React__default.createElement("label", { className: wrapperClassName },
             React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React__default.createElement("span", { className: styles.checkBox },
                     React__default.createElement(Icon, { name: iconName, color: "surface" }))),
             labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
         description && (React__default.createElement("div", { className: styles.description }, descriptionContent))));
-}
+});
+CheckboxRebuilt.displayName = "CheckboxRebuilt";
 
 function isNewCheckboxProps(props) {
     return props.version === 2;
 }
-function Checkbox(props) {
+const Checkbox = forwardRef(function CheckboxShim(props, ref) {
     if (isNewCheckboxProps(props)) {
-        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props));
+        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props, { ref: ref }));
     }
     return React__default.createElement(CheckboxLegacy, Object.assign({}, props));
-}
+});
+Checkbox.displayName = "Checkbox";
 
 export { Checkbox };

package/dist/ConfirmationModal/index.cjs

@@ -20,11 +20,11 @@ require('../ButtonDismiss-cjs.js');
 require('../noop-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../floating-ui.react-cjs.js');
-require('../AtlantisPortalContent-cjs.js');
-require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');

package/dist/ConfirmationModal/index.mjs

@@ -18,11 +18,11 @@ import '../ButtonDismiss-es.js';
 import '../noop-es.js';
 import '../_commonjsHelpers-es.js';
 import '../floating-ui.react-es.js';
-import '../AtlantisPortalContent-es.js';
-import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFor-es.js';
 import '../keysIn-es.js';

package/dist/FormatFile/index.cjs

@@ -27,11 +27,11 @@ require('../ButtonDismiss-cjs.js');
 require('../noop-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../floating-ui.react-cjs.js');
-require('../AtlantisPortalContent-cjs.js');
-require('../AtlantisThemeContext-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');

package/dist/FormatFile/index.mjs

@@ -25,11 +25,11 @@ import '../ButtonDismiss-es.js';
 import '../noop-es.js';
 import '../_commonjsHelpers-es.js';
 import '../floating-ui.react-es.js';
-import '../AtlantisPortalContent-es.js';
-import '../AtlantisThemeContext-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFor-es.js';
 import '../keysIn-es.js';

package/dist/Modal/Modal.types.d.ts

@@ -1,5 +1,5 @@
 import React, { MutableRefObject, PropsWithChildren, ReactNode } from "react";
-import { ExtendedRefs, FloatingContext, ReferenceType } from "@floating-ui/react";
+import { ExtendedRefs, FloatingContext, ReferenceType, UseInteractionsReturn } from "@floating-ui/react";
 import { XOR } from "ts-xor";
 import sizes from "./ModalSizes.module.css";
 import { ButtonProps } from "../Button";
@@ -65,6 +65,10 @@ export interface ModalContextType {
      * @default "ATL-Modal-Header"
      */
     readonly modalLabelledBy?: string;
+    /**
+     * Floating-ui props to position the modal.
+     */
+    readonly getFloatingProps: UseInteractionsReturn["getFloatingProps"];
 }
 export interface ModalActionsProps {
     /**

package/dist/Modal/index.cjs

@@ -12,6 +12,7 @@ var Button = require('../Button-cjs.js');
 var ButtonDismiss = require('../ButtonDismiss-cjs.js');
 var noop = require('../noop-cjs.js');
 var floatingUi_react = require('../floating-ui.react-cjs.js');
+var identity = require('../identity-cjs.js');
 var AtlantisPortalContent = require('../AtlantisPortalContent-cjs.js');
 require('../Typography-cjs.js');
 require('react-router-dom');
@@ -19,10 +20,9 @@ require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../_commonjsHelpers-cjs.js');
-require('../AtlantisThemeContext-cjs.js');
-require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');
@@ -96,10 +96,10 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
     const dismiss = floatingUi_react.useDismiss(floatingContext, {
         outsidePressEvent: "click",
         escapeKey: true,
-        bubbles: true,
+        bubbles: false,
     });
     const role = floatingUi_react.useRole(floatingContext);
-    floatingUi_react.useInteractions([click, dismiss, role]);
+    const { getFloatingProps } = floatingUi_react.useInteractions([click, dismiss, role]);
     const parentId = floatingUi_react.useFloatingParentNodeId();
     return {
         floatingRefs,
@@ -107,6 +107,7 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         nodeId,
         activatorRef,
         parentId,
+        getFloatingProps,
     };
 }
 
@@ -119,9 +120,10 @@ const ModalContext = React.createContext({
     size: undefined,
     floatingNodeId: undefined,
     dismissible: true,
+    getFloatingProps: identity.identity,
 });
 function ModalProvider({ children, open = false, size, onRequestClose = noop.noop, activatorRef: refProp, dismissible = true, modalLabelledBy = "ATL-Modal-Header", }) {
-    const { floatingRefs, floatingContext, nodeId, activatorRef, parentId } = useModal({
+    const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
         open,
         activatorRef: refProp,
         onRequestClose,
@@ -136,6 +138,7 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop.noo
             floatingNodeId: nodeId,
             dismissible,
             modalLabelledBy,
+            getFloatingProps,
         } }, children));
     if (parentId) {
         return content;
@@ -195,14 +198,14 @@ function ModalOverlay() {
     return (React.createElement(framerMotion.motion.div, { onClick: onRequestClose, className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
 }
 function ModalContent({ children }) {
-    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, } = useModalContext();
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
     const { modal, overlay } = useModalStyles(size);
     return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
         React.createElement(floatingUi_react.FloatingPortal, null,
             React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
                 React.createElement(floatingUi_react.FloatingOverlay, { className: overlay },
                     React.createElement(floatingUi_react.FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
-                        React.createElement("div", { ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy },
+                        React.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy }, getFloatingProps()),
                             React.createElement(ModalOverlay, null),
                             React.createElement(framerMotion.motion.div, { "data-floating-ui-focusable": true, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                                     duration: 0.2,

package/dist/Modal/index.mjs

@@ -10,6 +10,7 @@ import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
 import { a as useFloatingNodeId, b as useFloating, i as useClick, e as useDismiss, j as useRole, f as useInteractions, u as useFloatingParentNodeId, F as FloatingTree, g as FloatingNode, h as FloatingPortal, k as FloatingOverlay, l as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';
 import 'react-router-dom';
@@ -17,10 +18,9 @@ import '../tslib.es6-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../_commonjsHelpers-es.js';
-import '../AtlantisThemeContext-es.js';
-import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../AtlantisThemeContext-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFor-es.js';
 import '../keysIn-es.js';
@@ -94,10 +94,10 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
     const dismiss = useDismiss(floatingContext, {
         outsidePressEvent: "click",
         escapeKey: true,
-        bubbles: true,
+        bubbles: false,
     });
     const role = useRole(floatingContext);
-    useInteractions([click, dismiss, role]);
+    const { getFloatingProps } = useInteractions([click, dismiss, role]);
     const parentId = useFloatingParentNodeId();
     return {
         floatingRefs,
@@ -105,6 +105,7 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         nodeId,
         activatorRef,
         parentId,
+        getFloatingProps,
     };
 }
 
@@ -117,9 +118,10 @@ const ModalContext = createContext({
     size: undefined,
     floatingNodeId: undefined,
     dismissible: true,
+    getFloatingProps: identity,
 });
 function ModalProvider({ children, open = false, size, onRequestClose = noop, activatorRef: refProp, dismissible = true, modalLabelledBy = "ATL-Modal-Header", }) {
-    const { floatingRefs, floatingContext, nodeId, activatorRef, parentId } = useModal({
+    const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
         open,
         activatorRef: refProp,
         onRequestClose,
@@ -134,6 +136,7 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop, ac
             floatingNodeId: nodeId,
             dismissible,
             modalLabelledBy,
+            getFloatingProps,
         } }, children));
     if (parentId) {
         return content;
@@ -193,14 +196,14 @@ function ModalOverlay() {
     return (React__default.createElement(motion.div, { onClick: onRequestClose, className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }));
 }
 function ModalContent({ children }) {
-    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, } = useModalContext();
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, getFloatingProps, } = useModalContext();
     const { modal, overlay } = useModalStyles(size);
     return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
         React__default.createElement(FloatingPortal, null,
             React__default.createElement(AtlantisPortalContent, null,
                 React__default.createElement(FloatingOverlay, { className: overlay },
                     React__default.createElement(FloatingFocusManager, { context: floatingContext, returnFocus: (activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current) ? activatorRef : true, initialFocus: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.floating },
-                        React__default.createElement("div", { ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy },
+                        React__default.createElement("div", Object.assign({ ref: floatingRefs === null || floatingRefs === void 0 ? void 0 : floatingRefs.setFloating, role: "dialog", tabIndex: 0, "aria-labelledby": modalLabelledBy }, getFloatingProps()),
                             React__default.createElement(ModalOverlay, null),
                             React__default.createElement(motion.div, { "data-floating-ui-focusable": true, className: modal, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
                                     duration: 0.2,

package/dist/Modal/useModal.d.ts

@@ -31,5 +31,6 @@ export declare function useModal({ open, activatorRef: refProp, onRequestClose,
     nodeId: string | undefined;
     activatorRef: import("react").RefObject<HTMLElement | null>;
     parentId: string | null;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };
 export {};

package/dist/_baseEach-es.js

@@ -1,4 +1,4 @@
-import { f as _MapCache, c as _Uint8Array, e as eq_1, b as _Stack, a as _isIndex, i as identity_1 } from './identity-es.js';
+import { g as _MapCache, d as _Uint8Array, e as eq_1, c as _Stack, a as _isIndex, i as identity_1 } from './identity-es.js';
 import { b as _Symbol, a as isObjectLike_1, i as isObject_1 } from './isObjectLike-es.js';
 import { e as _getAllKeys, k as keys_1, b as _baseGet, f as _castPath, g as _toKey, h as _isKey } from './_baseGet-es.js';
 import { a as _getTag } from './_getTag-es.js';

package/dist/_baseGet-es.js

@@ -1,5 +1,5 @@
 import { b as isArrayLike_1, a as isArray_1 } from './isTypedArray-es.js';
-import { d as _arrayLikeKeys, f as _MapCache } from './identity-es.js';
+import { f as _arrayLikeKeys, g as _MapCache } from './identity-es.js';
 import { _ as _baseKeys } from './_getTag-es.js';
 import { i as isSymbol_1 } from './isSymbol-es.js';
 import { b as _Symbol } from './isObjectLike-es.js';

package/dist/identity-cjs.js

@@ -2,6 +2,7 @@
 
 var isTypedArray$1 = require('./isTypedArray-cjs.js');
 var isObjectLike = require('./isObjectLike-cjs.js');
+var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
 
 /**
  * Removes all key-value entries from the list cache.
@@ -805,6 +806,8 @@ function identity(value) {
 
 var identity_1 = identity;
 
+var identity$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(identity_1);
+
 exports._MapCache = _MapCache;
 exports._Stack = _Stack;
 exports._Uint8Array = _Uint8Array;
@@ -812,4 +815,5 @@ exports._arrayLikeKeys = _arrayLikeKeys;
 exports._defineProperty = _defineProperty;
 exports._isIndex = _isIndex;
 exports.eq_1 = eq_1;
+exports.identity = identity$1;
 exports.identity_1 = identity_1;

package/dist/identity-es.js

@@ -1,5 +1,6 @@
 import { f as _getNative, g as _Map, i as isArguments_1, c as isBufferExports, d as isTypedArray_1, a as isArray_1 } from './isTypedArray-es.js';
 import { c as _root } from './isObjectLike-es.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 
 /**
  * Removes all key-value entries from the list cache.
@@ -803,4 +804,6 @@ function identity(value) {
 
 var identity_1 = identity;
 
-export { _defineProperty as _, _isIndex as a, _Stack as b, _Uint8Array as c, _arrayLikeKeys as d, eq_1 as e, _MapCache as f, identity_1 as i };
+var identity$1 = /*@__PURE__*/getDefaultExportFromCjs(identity_1);
+
+export { _defineProperty as _, _isIndex as a, identity$1 as b, _Stack as c, _Uint8Array as d, eq_1 as e, _arrayLikeKeys as f, _MapCache as g, identity_1 as i };

package/dist/keysIn-es.js

@@ -1,5 +1,5 @@
 import { c as _root, i as isObject_1, _ as _baseGetTag, a as isObjectLike_1 } from './isObjectLike-es.js';
-import { c as _Uint8Array, e as eq_1, d as _arrayLikeKeys } from './identity-es.js';
+import { d as _Uint8Array, e as eq_1, f as _arrayLikeKeys } from './identity-es.js';
 import { e as _overArg, _ as _isPrototype, b as isArrayLike_1 } from './isTypedArray-es.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
 

package/dist/omit-es.js

@@ -1,6 +1,6 @@
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { k as keys_1, c as _getSymbols, _ as _arrayPush, s as stubArray_1, d as _baseGetAllKeys, e as _getAllKeys, b as _baseGet, f as _castPath, g as _toKey, a as _arrayMap } from './_baseGet-es.js';
-import { b as _Stack } from './identity-es.js';
+import { c as _Stack } from './identity-es.js';
 import { _ as _copyObject, k as keysIn_1, e as _getPrototype, f as _cloneArrayBuffer, b as _cloneTypedArray, a as _cloneBufferExports, c as _copyArray, d as _initCloneObject, g as _assignValue, i as isPlainObject_1 } from './keysIn-es.js';
 import { a as _getTag } from './_getTag-es.js';
 import { b as _Symbol, a as isObjectLike_1, i as isObject_1 } from './isObjectLike-es.js';

package/dist/styles.css

@@ -3214,6 +3214,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   --checkbox--size: 20px;
   --checkbox--border--checked: var(--color-interactive);
   --checkbox--border--unchecked: var(--color-border--interactive);
+  --checkbox--border--invalid: var(--color-critical);
   --checkbox--border--hover: var(--color-interactive);
   display: inline-block;
 }
@@ -3308,6 +3309,26 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   opacity: 1;
 }
 
+/* Invalid states set border and fill color when field not disabled
+     - note, some rules are duplicated to ensure selectors follow
+       descending cascade linting rules
+*/
+
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M- + ._-8JCQE6SA9s- {
+  border-color: var(--checkbox--border--invalid);
+}
+
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M-:checked + ._-8JCQE6SA9s-,
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M-.rqHq3ff9In0- + ._-8JCQE6SA9s- {
+  background-color: hsl(6, 64%, 51%);
+  background-color: var(--color-critical);
+}
+
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-):focus-within .XnCmS-EzK2M- + ._-8JCQE6SA9s-,
+.Gqnclw4WaeQ-:not(.TKr3J-6ARFo-) .XnCmS-EzK2M-.rqHq3ff9In0-:focus-within + ._-8JCQE6SA9s- {
+  border-color: var(--checkbox--border--invalid);
+}
+
 .l8z5TxzVvqA- {
   margin: 0 8px;
   margin: 0 var(--space-small);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.60.4",
+  "version": "6.61.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "855d78c2b9475a49c6b600681802ec691896e34e"
+  "gitHead": "1aa6f369e1206bf66aef78694ec072ca89bf7793"
 }