@jobber/components 9.10.4 → 9.12.0

package/dist/Avatar/Avatar.d.ts

@@ -5,7 +5,13 @@ import type { IconProps } from "../Icon";
 type AvatarSize = "base" | "large" | "small";
 interface AvatarFoundationProps {
     /**
-     * A url for the image that will be displayed
+     * A URL for the image that will be displayed
+     */
+    readonly src?: string;
+    /**
+     * A URL for the image that will be displayed
+     *
+     * @deprecated Use `src` instead.
      */
     readonly imageUrl?: string;
     /**
@@ -50,13 +56,16 @@ interface AvatarFoundationProps {
     } & InitialsUnsafeStyleProps;
 }
 interface AvatarWithImageProps extends AvatarFoundationProps {
+    readonly src: string;
+}
+interface AvatarWithLegacyImageProps extends AvatarFoundationProps {
     readonly imageUrl: string;
 }
 interface AvatarWithInitialsProps extends AvatarFoundationProps {
     readonly initials: string;
 }
-export type AvatarProps = XOR<AvatarWithImageProps, AvatarWithInitialsProps>;
-export declare function Avatar({ imageUrl, name, initials, size, color, testID, UNSAFE_className, UNSAFE_style, }: AvatarProps): React.JSX.Element;
+export type AvatarProps = XOR<AvatarWithImageProps | AvatarWithLegacyImageProps, AvatarWithInitialsProps>;
+export declare function Avatar({ src, imageUrl, name, initials, size, color, testID, UNSAFE_className, UNSAFE_style, }: AvatarProps): React.JSX.Element;
 interface InitialsUnsafeClassNameProps {
     initials?: string;
     fallbackIcon?: IconProps["UNSAFE_className"];

package/dist/Avatar-cjs.js

@@ -42,15 +42,16 @@ function deconstructCssCustomProperty(color) {
 }
 
 const MAX_VISIBLE_INITIALS = 3;
-function Avatar({ imageUrl, name, initials, size = "base", color, testID, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+function Avatar({ src, imageUrl, name, initials, size = "base", color, testID, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    const imageSource = src !== null && src !== void 0 ? src : imageUrl;
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
-    if (imageUrl) {
-        style.backgroundImage = `url(${imageUrl})`;
+    if (imageSource) {
+        style.backgroundImage = `url(${imageSource})`;
     }
     const shouldBeDark = color == undefined || isDark(color);
     const hasCustomColor = color != undefined;
     const className = classnames(styles.avatar, size !== "base" && styles[size], {
-        [styles.hasBorder]: imageUrl && color,
+        [styles.hasBorder]: imageSource && color,
         [styles.isDark]: shouldBeDark,
         [styles.hasCustomColor]: hasCustomColor,
     });
@@ -60,7 +61,7 @@ function Avatar({ imageUrl, name, initials, size = "base", color, testID, UNSAFE
             : "text"
         : "textReverse";
     const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
-    return (React.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name, "data-testid": testID }, !imageUrl && (React.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
+    return (React.createElement("div", { className: containerClassNames, style: style, role: imageSource && "img", "aria-label": name, "data-testid": testID }, !imageSource && (React.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
             initials: UNSAFE_className.initials,
             fallbackIcon: UNSAFE_className.fallbackIcon,
         }, UNSAFE_style: {

package/dist/Avatar-es.js

@@ -40,15 +40,16 @@ function deconstructCssCustomProperty(color) {
 }
 
 const MAX_VISIBLE_INITIALS = 3;
-function Avatar({ imageUrl, name, initials, size = "base", color, testID, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+function Avatar({ src, imageUrl, name, initials, size = "base", color, testID, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    const imageSource = src !== null && src !== void 0 ? src : imageUrl;
     const style = Object.assign({ backgroundColor: color, borderColor: color }, UNSAFE_style.container);
-    if (imageUrl) {
-        style.backgroundImage = `url(${imageUrl})`;
+    if (imageSource) {
+        style.backgroundImage = `url(${imageSource})`;
     }
     const shouldBeDark = color == undefined || isDark(color);
     const hasCustomColor = color != undefined;
     const className = classnames(styles.avatar, size !== "base" && styles[size], {
-        [styles.hasBorder]: imageUrl && color,
+        [styles.hasBorder]: imageSource && color,
         [styles.isDark]: shouldBeDark,
         [styles.hasCustomColor]: hasCustomColor,
     });
@@ -58,7 +59,7 @@ function Avatar({ imageUrl, name, initials, size = "base", color, testID, UNSAFE
             : "text"
         : "textReverse";
     const containerClassNames = classnames(className, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
-    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageUrl && "img", "aria-label": name, "data-testid": testID }, !imageUrl && (React__default.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
+    return (React__default.createElement("div", { className: containerClassNames, style: style, role: imageSource && "img", "aria-label": name, "data-testid": testID }, !imageSource && (React__default.createElement(Initials, { initials: initials, iconColor: iconColor, iconSize: size, UNSAFE_className: {
             initials: UNSAFE_className.initials,
             fallbackIcon: UNSAFE_className.fallbackIcon,
         }, UNSAFE_style: {

package/dist/Dialog/Dialog.types.d.ts

@@ -106,11 +106,13 @@ export type DialogCloseRender = ReactElement | ((props: DialogCloseRenderProps)
 export interface DialogCloseProps extends DialogBaseProps, Omit<BaseDialog.Close.Props, BaseUIPropsToExclude> {
     /**
      * Optional content for the dismiss control. An Atlantis `<Button>` is adapted
-     * automatically; any other valid element is used as-is. The default ButtonDismiss is used if no children or render is provided.
+     * automatically; any other valid element is used as-is. Defaults to a subtle
+     * tertiary `Button` with a `cross` icon when neither `children` nor `render`
+     * is provided.
      */
     readonly children?: ReactNode;
     /**
-     * Renders a custom dismiss element in place of the default `ButtonDismiss`
+     * Renders a custom dismiss element in place of the default close button.
      * Pass an element or a function that receives the
      * BaseUI close props (so the element stays wired to close the dialog).
      */

package/dist/Dialog/dialogComposableShared.d.ts

@@ -15,8 +15,8 @@ export declare function resolveComposableTriggerRender({ children, render, }: {
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
- * Falls back to the subtle "cross" `ButtonDismiss` when neither `render` nor
- * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
+ * Falls back to a subtle tertiary `Button` with a `cross` icon when neither
+ * `render` nor `children` are supplied. An Atlantis `<Button>` passed via
  * `render` or `children` is adapted; any other valid element is used as-is.
  */
 export declare function resolveComposableCloseRender({ children, render, }: {

package/dist/InputAvatar-cjs.js

@@ -24,17 +24,19 @@ const inputAvatarMessages = useAtlantisI18n.defineMessages({
 });
 
 function InputAvatar(_a) {
+    var _b;
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = tslib_es6.__rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
     const [progress, setProgress] = React.useState(1);
     const { t } = useAtlantisI18n.useAtlantisI18n(inputAvatarMessages);
+    const imageSource = (_b = avatarProps.src) !== null && _b !== void 0 ? _b : avatarProps.imageUrl;
     return (React.createElement("div", { className: styles.inputAvatar },
         React.createElement("div", { className: styles.preview },
             React.createElement(Avatar.Avatar, Object.assign({ size: "large" }, avatarProps)),
             progress < 1 && (React.createElement(Overlay, null,
                 React.createElement(Centered, null,
                     React.createElement(ProgressBar.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React.createElement(InputFile.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? t("changeImage") : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React.createElement(Button.Button, { label: t("remove"), size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+        React.createElement(InputFile.InputFile, { variation: "button", buttonLabel: imageSource ? t("changeImage") : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+        imageSource != undefined && progress === 1 && (React.createElement(Button.Button, { label: t("remove"), size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);

package/dist/InputAvatar-es.js

@@ -22,17 +22,19 @@ const inputAvatarMessages = defineMessages({
 });
 
 function InputAvatar(_a) {
+    var _b;
     var { getUploadParams, onUploadComplete, onChange } = _a, avatarProps = __rest(_a, ["getUploadParams", "onUploadComplete", "onChange"]);
     const [progress, setProgress] = useState(1);
     const { t } = useAtlantisI18n(inputAvatarMessages);
+    const imageSource = (_b = avatarProps.src) !== null && _b !== void 0 ? _b : avatarProps.imageUrl;
     return (React__default.createElement("div", { className: styles.inputAvatar },
         React__default.createElement("div", { className: styles.preview },
             React__default.createElement(Avatar, Object.assign({ size: "large" }, avatarProps)),
             progress < 1 && (React__default.createElement(Overlay, null,
                 React__default.createElement(Centered, null,
                     React__default.createElement(ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React__default.createElement(InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? t("changeImage") : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
-        avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(Button, { label: t("remove"), size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
+        React__default.createElement(InputFile, { variation: "button", buttonLabel: imageSource ? t("changeImage") : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+        imageSource != undefined && progress === 1 && (React__default.createElement(Button, { label: t("remove"), size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);
         handleUpload(newFile);

package/dist/Modal/Modal.d.ts

@@ -1,3 +1,6 @@
 import React from "react";
 import type { ModalLegacyProps } from "./Modal.types";
+/**
+ * @deprecated Use the `Dialog` component instead.
+ */
 export declare function ModalLegacy({ open, title, size, dismissible, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }: ModalLegacyProps): React.JSX.Element;

package/dist/Modal/Modal.rebuilt.d.ts

@@ -1,11 +1,25 @@
 import type { PropsWithChildren } from "react";
 import React from "react";
 import type { HeaderProps, ModalActionsProps, ModalContentProps as ModalContainerProps } from "./Modal.types";
+/**
+ * @deprecated Use `Dialog.Header` with `Dialog.Title` and `Dialog.Close` instead.
+ */
 export declare function ModalHeader({ title, children }: HeaderProps): React.JSX.Element;
+/**
+ * @deprecated Use `Dialog.Actions` inside a `Dialog.Footer` instead.
+ */
 export declare function ModalActions({ primary, secondary, tertiary, }: ModalActionsProps): React.JSX.Element;
+/**
+ * @deprecated Use `Dialog.Trigger` instead.
+ */
 export declare function ModalActivator({ children }: PropsWithChildren): React.JSX.Element;
 /**
  * Background overlay for the modal. Used in the ModalContent.
+ *
+ * @deprecated Use the `Dialog` component instead, which renders its own overlay.
  */
 export declare function ModalOverlay({ children }: PropsWithChildren): React.JSX.Element;
+/**
+ * @deprecated Use `Dialog.Content` with `Dialog.Body` instead.
+ */
 export declare function ModalContent({ children }: ModalContainerProps): React.JSX.Element;

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

@@ -112,6 +112,9 @@ type HeaderWithChildren = PropsWithChildren<{
     readonly variant?: "inline" | "sticky";
 }>;
 export type HeaderProps = XOR<HeaderPropsWithoutChildren, HeaderWithChildren>;
+/**
+ * @deprecated Use the `Dialog` component instead.
+ */
 export interface ModalLegacyProps {
     /**
      * @default false

package/dist/Modal/ModalContext.rebuilt.d.ts

@@ -13,5 +13,11 @@ export interface ModalProviderProps {
     readonly modalLabelledBy?: string;
     readonly ariaLabel?: string;
 }
+/**
+ * @deprecated Use `Dialog` as the composable root instead.
+ */
 export declare function ModalProvider({ children, open, size, onRequestClose, activatorRef: refProp, dismissible, modalLabelledBy, ariaLabel, }: ModalProviderProps): React.JSX.Element;
+/**
+ * @deprecated Use `Dialog.Close` or `Dialog.createHandle` instead.
+ */
 export declare function useModalContext(): ModalContextType;

package/dist/Modal/index.cjs

@@ -44,6 +44,10 @@ const modalMessages = useAtlantisI18n.defineMessages({
     },
 });
 
+/* eslint-disable import/no-deprecated -- Implements the deprecated prop-driven Modal; the imports below are Modal's own internals. Dialog is the replacement. */
+/**
+ * @deprecated Use the `Dialog` component instead.
+ */
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
     const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
@@ -155,6 +159,9 @@ const ModalContext = React.createContext({
     dismissible: true,
     getFloatingProps: identity.identity,
 });
+/**
+ * @deprecated Use `Dialog` as the composable root instead.
+ */
 function ModalProvider({ children, open = false, size, onRequestClose = noop.noop, activatorRef: refProp, dismissible = true, modalLabelledBy = MODAL_HEADER_ID, ariaLabel, }) {
     const startedInsideRef = React.useRef(true);
     const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
@@ -182,12 +189,18 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop.noo
     }
     return React.createElement(floatingUi_react.FloatingTree, null, content);
 }
+/**
+ * @deprecated Use `Dialog.Close` or `Dialog.createHandle` instead.
+ */
 function useModalContext() {
     return React.useContext(ModalContext);
 }
 
 var styles = {"overlay":"cRhQeXmZobs-","overlayBackground":"PO6ZUDxQoFE-","modal":"OiqCKNmbHZ0-","modalWithStickyRegions":"_6dGKr5VVf9Y-","stickyHeaderRegion":"uo6BCADQuLU-","stickyActionsRegion":"Vq0y9ggAxtI-","modalBody":"zM9SWwAd5Dg-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
 
+/**
+ * @deprecated Use the `Dialog` component instead, which owns its own styling.
+ */
 function useModalStyles(size) {
     return {
         modal: classnames(styles.modal, size && sizes[size]),
@@ -201,6 +214,9 @@ function useModalStyles(size) {
     };
 }
 
+/**
+ * @deprecated Use `Dialog.Header` with `Dialog.Title` and `Dialog.Close` instead.
+ */
 function ModalHeader({ title, children }) {
     const { header, dismissButton } = useModalStyles();
     const { dismissible, onRequestClose, modalLabelledBy } = useModalContext();
@@ -213,6 +229,9 @@ function ModalHeader({ title, children }) {
         dismissible && (React.createElement("div", { className: dismissButton },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("closeModal") })))));
 }
+/**
+ * @deprecated Use `Dialog.Actions` inside a `Dialog.Footer` instead.
+ */
 function ModalActions({ primary, secondary, tertiary, }) {
     const { actionBar, rightAction, leftAction } = useModalStyles();
     const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
@@ -223,12 +242,17 @@ function ModalActions({ primary, secondary, tertiary, }) {
         tertiary && (React.createElement("div", { className: leftAction },
             React.createElement(Button.Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary))))))));
 }
+/**
+ * @deprecated Use `Dialog.Trigger` instead.
+ */
 function ModalActivator({ children }) {
     const { activatorRef } = useModalContext();
     return (React.createElement("span", { ref: activatorRef, style: { display: "contents" } }, children));
 }
 /**
  * Background overlay for the modal. Used in the ModalContent.
+ *
+ * @deprecated Use the `Dialog` component instead, which renders its own overlay.
  */
 function ModalOverlay({ children }) {
     const { overlay, overlayBackground } = useModalStyles();
@@ -241,6 +265,9 @@ function ModalOverlay({ children }) {
             } }),
         children));
 }
+/**
+ * @deprecated Use `Dialog.Content` with `Dialog.Body` instead.
+ */
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, startedInsideRef, } = useModalContext();
     const { modal } = useModalStyles(size);
@@ -287,13 +314,33 @@ function extractSticky(children, componentType, match) {
     return { sticky, rest };
 }
 
+/* eslint-disable import/no-deprecated -- Assembles the deprecated Modal namespace from its own parts. Dialog is the replacement. */
+/**
+ * @deprecated Use the `Dialog` component instead.
+ * @see https://atlantis.getjobber.com/components/Dialog/implement#component-view-migrating-to-dialog
+ */
 function Modal(props) {
     return React.createElement(ModalLegacy, Object.assign({}, props));
 }
+/**
+ * @deprecated Use `Dialog.Header` with `Dialog.Title` and `Dialog.Close` instead.
+ */
 Modal.Header = ModalHeader;
+/**
+ * @deprecated Use `Dialog.Actions` inside a `Dialog.Footer` instead.
+ */
 Modal.Actions = ModalActions;
+/**
+ * @deprecated Use `Dialog.Trigger` instead.
+ */
 Modal.Activator = ModalActivator;
+/**
+ * @deprecated Use `Dialog` as the composable root instead.
+ */
 Modal.Provider = ModalProvider;
+/**
+ * @deprecated Use `Dialog.Content` with `Dialog.Body` instead.
+ */
 Modal.Content = ModalContent;
 
 exports.Modal = Modal;

package/dist/Modal/index.d.ts

@@ -3,8 +3,12 @@ import { ModalProvider } from "./ModalContext.rebuilt";
 import { ModalActions, ModalActivator, ModalContent, ModalHeader } from "./Modal.rebuilt";
 import type { ModalLegacyProps } from "./Modal.types";
 export type { ModalLegacyProps as ModalProps } from "./Modal.types";
-declare function Modal(props: ModalLegacyProps): React.JSX.Element;
-declare namespace Modal {
+/**
+ * @deprecated Use the `Dialog` component instead.
+ * @see https://atlantis.getjobber.com/components/Dialog/implement#component-view-migrating-to-dialog
+ */
+export declare function Modal(props: ModalLegacyProps): React.JSX.Element;
+export declare namespace Modal {
     var Header: typeof ModalHeader;
     var Actions: typeof ModalActions;
     var Activator: typeof ModalActivator;
@@ -13,4 +17,3 @@ declare namespace Modal {
 }
 export { useModalContext } from "./ModalContext.rebuilt";
 export { useModalStyles } from "./useModalStyles";
-export { Modal };

package/dist/Modal/index.mjs

@@ -42,6 +42,10 @@ const modalMessages = defineMessages({
     },
 });
 
+/* eslint-disable import/no-deprecated -- Implements the deprecated prop-driven Modal; the imports below are Modal's own internals. Dialog is the replacement. */
+/**
+ * @deprecated Use the `Dialog` component instead.
+ */
 function ModalLegacy({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, ariaLabel, }) {
     const modalClassName = classnames(styles$1.modal, size && sizes[size]);
     const containerClassName = classnames(styles$1.container, size === "fullScreen" && styles$1.containerFullScreen);
@@ -153,6 +157,9 @@ const ModalContext = createContext({
     dismissible: true,
     getFloatingProps: identity,
 });
+/**
+ * @deprecated Use `Dialog` as the composable root instead.
+ */
 function ModalProvider({ children, open = false, size, onRequestClose = noop, activatorRef: refProp, dismissible = true, modalLabelledBy = MODAL_HEADER_ID, ariaLabel, }) {
     const startedInsideRef = useRef(true);
     const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
@@ -180,12 +187,18 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop, ac
     }
     return React__default.createElement(FloatingTree, null, content);
 }
+/**
+ * @deprecated Use `Dialog.Close` or `Dialog.createHandle` instead.
+ */
 function useModalContext() {
     return useContext(ModalContext);
 }
 
 var styles = {"overlay":"cRhQeXmZobs-","overlayBackground":"PO6ZUDxQoFE-","modal":"OiqCKNmbHZ0-","modalWithStickyRegions":"_6dGKr5VVf9Y-","stickyHeaderRegion":"uo6BCADQuLU-","stickyActionsRegion":"Vq0y9ggAxtI-","modalBody":"zM9SWwAd5Dg-","header":"GDWGHwmjgAc-","closeButton":"KJlGo4z-E6Q-","actionBar":"ZGrhWCAymCw-","leftAction":"hOiEWds2Vq8-","rightAction":"K31NzxPZP9s-","spinning":"SKeimJFlB-g-"};
 
+/**
+ * @deprecated Use the `Dialog` component instead, which owns its own styling.
+ */
 function useModalStyles(size) {
     return {
         modal: classnames(styles.modal, size && sizes[size]),
@@ -199,6 +212,9 @@ function useModalStyles(size) {
     };
 }
 
+/**
+ * @deprecated Use `Dialog.Header` with `Dialog.Title` and `Dialog.Close` instead.
+ */
 function ModalHeader({ title, children }) {
     const { header, dismissButton } = useModalStyles();
     const { dismissible, onRequestClose, modalLabelledBy } = useModalContext();
@@ -211,6 +227,9 @@ function ModalHeader({ title, children }) {
         dismissible && (React__default.createElement("div", { className: dismissButton },
             React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: t("closeModal") })))));
 }
+/**
+ * @deprecated Use `Dialog.Actions` inside a `Dialog.Footer` instead.
+ */
 function ModalActions({ primary, secondary, tertiary, }) {
     const { actionBar, rightAction, leftAction } = useModalStyles();
     const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
@@ -221,12 +240,17 @@ function ModalActions({ primary, secondary, tertiary, }) {
         tertiary && (React__default.createElement("div", { className: leftAction },
             React__default.createElement(Button, Object.assign({ type: "secondary", variation: "destructive" }, tertiary))))))));
 }
+/**
+ * @deprecated Use `Dialog.Trigger` instead.
+ */
 function ModalActivator({ children }) {
     const { activatorRef } = useModalContext();
     return (React__default.createElement("span", { ref: activatorRef, style: { display: "contents" } }, children));
 }
 /**
  * Background overlay for the modal. Used in the ModalContent.
+ *
+ * @deprecated Use the `Dialog` component instead, which renders its own overlay.
  */
 function ModalOverlay({ children }) {
     const { overlay, overlayBackground } = useModalStyles();
@@ -239,6 +263,9 @@ function ModalOverlay({ children }) {
             } }),
         children));
 }
+/**
+ * @deprecated Use `Dialog.Content` with `Dialog.Body` instead.
+ */
 function ModalContent({ children }) {
     const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, startedInsideRef, } = useModalContext();
     const { modal } = useModalStyles(size);
@@ -285,13 +312,33 @@ function extractSticky(children, componentType, match) {
     return { sticky, rest };
 }
 
+/* eslint-disable import/no-deprecated -- Assembles the deprecated Modal namespace from its own parts. Dialog is the replacement. */
+/**
+ * @deprecated Use the `Dialog` component instead.
+ * @see https://atlantis.getjobber.com/components/Dialog/implement#component-view-migrating-to-dialog
+ */
 function Modal(props) {
     return React__default.createElement(ModalLegacy, Object.assign({}, props));
 }
+/**
+ * @deprecated Use `Dialog.Header` with `Dialog.Title` and `Dialog.Close` instead.
+ */
 Modal.Header = ModalHeader;
+/**
+ * @deprecated Use `Dialog.Actions` inside a `Dialog.Footer` instead.
+ */
 Modal.Actions = ModalActions;
+/**
+ * @deprecated Use `Dialog.Trigger` instead.
+ */
 Modal.Activator = ModalActivator;
+/**
+ * @deprecated Use `Dialog` as the composable root instead.
+ */
 Modal.Provider = ModalProvider;
+/**
+ * @deprecated Use `Dialog.Content` with `Dialog.Body` instead.
+ */
 Modal.Content = ModalContent;
 
 export { Modal, useModalContext, useModalStyles };

package/dist/Modal/useModalStyles.d.ts

@@ -1,4 +1,7 @@
 import sizes from "./ModalSizes.module.css";
+/**
+ * @deprecated Use the `Dialog` component instead, which owns its own styling.
+ */
 export declare function useModalStyles(size?: keyof typeof sizes): {
     modal: string;
     overlay: string;

package/dist/dialogReturnFocus-cjs.js

@@ -53,8 +53,8 @@ function resolveComposableTriggerRender({ children, render, }) {
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
- * Falls back to the subtle "cross" `ButtonDismiss` when neither `render` nor
- * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
+ * Falls back to a subtle tertiary `Button` with a `cross` icon when neither
+ * `render` nor `children` are supplied. An Atlantis `<Button>` passed via
  * `render` or `children` is adapted; any other valid element is used as-is.
  */
 function resolveComposableCloseRender({ children, render, }) {

package/dist/dialogReturnFocus-es.js

@@ -51,8 +51,8 @@ function resolveComposableTriggerRender({ children, render, }) {
 /**
  * Resolves the dismiss element for `Dialog.Close`, mirroring
  * `resolveComposableTriggerRender` so a custom render works in both shells.
- * Falls back to the subtle "cross" `ButtonDismiss` when neither `render` nor
- * `children` are supplied. An Atlantis `<Button>`/`<ButtonDismiss>` passed via
+ * Falls back to a subtle tertiary `Button` with a `cross` icon when neither
+ * `render` nor `children` are supplied. An Atlantis `<Button>` passed via
  * `render` or `children` is adapted; any other valid element is used as-is.
  */
 function resolveComposableCloseRender({ children, render, }) {

package/dist/docs/Avatar/Avatar.md

@@ -52,7 +52,7 @@ useful for applying styles via CSS Modules.
 // For Avatar with image
 <Avatar
   name="Custom Container Class Name"
-  imageUrl="https://api.adorable.io/avatars/150/jobbler"
+  src="https://api.adorable.io/avatars/150/jobbler"
   UNSAFE_className={{ container: styles.customContainerClassName }}
 />
 
@@ -100,7 +100,7 @@ Use `UNSAFE_style` to apply inline custom styles to the Avatar component.
 // For Avatar with image
  <Avatar
   name="Custom Container Style"
-  imageUrl="https://api.adorable.io/avatars/150/jobbler"
+  src="https://api.adorable.io/avatars/150/jobbler"
   UNSAFE_style={{
     container: {
       borderColor: "var(--color-green)",
@@ -139,10 +139,11 @@ Use `UNSAFE_style` to apply inline custom styles to the Avatar component.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `color` | `string` | No | — | The background and border color that represents the user. This should be represented as a value that can be read by CSS |
-| `imageUrl` | `string` | No | — | A url for the image that will be displayed |
+| `imageUrl` | `string` | No | — | A URL for the image that will be displayed @deprecated Use `src` instead. |
 | `initials` | `string` | No | — | The initials that will be displayed if no image is set.\ |
 | `name` | `string` | No | — | A users name to be used for assistive technology |
 | `size` | `AvatarSize` | No | `base` | Change the size of the avatar @property "large" - Make avatar to be the focal point @property "small" - For higher-de... |
+| `src` | `string` | No | — | A URL for the image that will be displayed |
 | `testID` | `string` | No | — | A reference to the element in the rendered output |
 | `UNSAFE_className` | `{ container?: string; } & InitialsUnsafeClassNameProps` | No | `{}` | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
 | `UNSAFE_style` | `{ container?: CSSProperties; } & InitialsUnsafeStyleProps` | No | `{}` | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |

package/dist/docs/Button/Button.md

@@ -388,7 +388,7 @@ A key distinction between subtle buttons and the other variations is that the
 primary/secondary/tertiary scale is styled differently, but the conceptual
 hierarchy is the same. Notably, the tertiary subtle button has a transparent
 background, allowing it to be *extra* subtle when placed overtop
-`surface--background` elements such as a Modal header.
+`surface--background` elements such as a Dialog header.
 
 ```tsx
 import React from "react";

package/dist/docs/ButtonDismiss/ButtonDismiss.md

@@ -1,7 +1,7 @@
 # Button Dismiss
 
 This private component is used as a dismissal button for public components, such
-as Modal and Popover.
+as Popover and Drawer.
 
 ## Design & usage guidelines
 

package/dist/docs/Chip/Chip.md

@@ -22,7 +22,7 @@ export function ChipWithAvatarExample(
       <Chip.Prefix>
         <Avatar
           size="small"
-          imageUrl="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          src="https://images.unsplash.com/photo-1669475535925-a011d7c31d45?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         />
       </Chip.Prefix>
       <Chip.Suffix>

package/dist/docs/Colors/Colors.md

@@ -156,7 +156,7 @@ application.
 #### Overlay
 
 Use to mask an area of the interface to promote focus to a foreground action,
-such as a [Modal](../Modal/Modal.md)'s appearance. Overlay includes built-in
+such as a [Dialog](../Dialog/Dialog.md)'s appearance. Overlay includes built-in
 opacity values.
 
 #### Overlay--Dimmed

package/dist/docs/ConfirmationModal/ConfirmationModal.md

@@ -102,7 +102,7 @@ language should be direct and honest about the impact without being alarming.
 * To present non-blocking, contextual, text-only content, use a
   [Tooltip](../Tooltip/Tooltip.md)
 * To simply present information for users to view, edit, or for a temporary
-  change of context, use a regular [Modal](../Modal/Modal.md)
+  change of context, use a regular [Dialog](../Dialog/Dialog.md)
 
 
 ## Props

package/dist/docs/Dialog/Dialog.md

@@ -295,12 +295,12 @@ control, omit `open`/`onRequestClose` and let the dialog manage itself.
 
 `Dialog.Trigger` and `Dialog.Close` accept Atlantis-style content and can render
 a default control, composed Atlantis `Button` content, or a custom element via
-`render`. An Atlantis `<Button>`/`<ButtonDismiss>` is adapted automatically; any
-other valid element is used as-is. When `render` is a function, it receives the
-Base UI props so the element stays wired to open/close the dialog.
+`render`. An Atlantis `<Button>` is adapted automatically; any other valid
+element is used as-is. When `render` is a function, it receives the Base UI
+props so the element stays wired to open/close the dialog.
 
 ```tsx
-{/* default primary Button trigger / default ButtonDismiss close */}
+{/* default primary Button trigger / default close Button */}
 <Dialog.Trigger>Open</Dialog.Trigger>
 <Dialog.Close />
 
@@ -951,7 +951,7 @@ verify the result rather than expecting an exact match.
 | `children` | `ReactNode` | No | — | Optional content for the dismiss control. An Atlantis `<Button>` is adapted automatically; any other valid element is... |
 | `className` | `string` | No | — | Class name applied to the part's root element. |
 | `nativeButton` | `boolean` | No | `true` | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if ... |
-| `render` | `DialogCloseRender` | No | — | Renders a custom dismiss element in place of the default `ButtonDismiss` Pass an element or a function that receives ... |
+| `render` | `DialogCloseRender` | No | — | Renders a custom dismiss element in place of the default close button. Pass an element or a function that receives th... |
 | `style` | `CSSProperties` | No | — | Inline styles applied to the part's root element. |
 
 #### Dialog.Content

package/dist/docs/Drawer/Drawer.md

@@ -9,7 +9,7 @@ Use [SideDrawer](../SideDrawer/SideDrawer.md) if you need to overlay the page's
 content and block user interaction with the page, while still maintaining
 visibilty of the page's primary contents.
 
-Use [Modal](../Modal/Modal.md) if you need to overlay the page's content and
+Use [Dialog](../Dialog/Dialog.md) if you need to overlay the page's content and
 block user interaction with the page, and do not need the user to have visibilty
 of the page's primary contents.
 

package/dist/docs/InputAvatar/InputAvatar.md

@@ -18,9 +18,10 @@ avatar. You can read more about `getUploadParams` in the
 |------|------|----------|---------|-------------|
 | `getUploadParams` | `(file: File) => UploadParams | Promise<UploadParams>` | Yes | — | A callback that receives a file object and returns a `UploadParams` needed to upload the file.  More info is availabl... |
 | `color` | `string` | No | — | The background and border color that represents the user. This should be represented as a value that can be read by CSS |
-| `imageUrl` | `string` | No | — | A url for the image that will be displayed |
+| `imageUrl` | `string` | No | — | A URL for the image that will be displayed @deprecated Use `src` instead. |
 | `initials` | `string` | No | — | The initials that will be displayed if no image is set.\ |
 | `name` | `string` | No | — | A users name to be used for assistive technology |
 | `onChange` | `(file?: FileUpload) => void` | No | — | Triggered when an image is changed. |
 | `onUploadComplete` | `(file?: FileUpload) => void` | No | — | Triggered when an image upload has completed. |
+| `src` | `string` | No | — | A URL for the image that will be displayed |
 | `testID` | `string` | No | — | A reference to the element in the rendered output |

package/dist/docs/Modal/Modal.md

@@ -1,5 +1,10 @@
 # Modal
 
+> **WARNING:** This component is deprecated. Use [Dialog](../Dialog/Dialog.md) instead for new
+> work — see [migrating to
+> Dialog](/components/Dialog/implement#component-view-migrating-to-dialog).
+> `Modal` continues to work unchanged for existing call sites.
+
 Modals are overlays that allow users to view, edit, or show informations that
 doesn't require a page to be built. It also prevent users from interacting with
 the rest of the application until a specific action is taken.

package/dist/docs/SideDrawer/SideDrawer.md

@@ -10,7 +10,7 @@ Use [Drawer](../Drawer/Drawer.md) if you need to allow users to view
 supplementary content while still allowing users to interact with the main
 contents of the page.
 
-Use [Modal](../Modal/Modal.md) if you need to overlay the page's content and
+Use [Dialog](../Dialog/Dialog.md) if you need to overlay the page's content and
 block user interaction with the page, and do not need the user to have visibilty
 of the page's primary contents.
 

package/dist/docs/Spacing/Spacing.md

@@ -48,7 +48,7 @@ form elements.
 ### Large
 
 Use `large` spacing for higher-level "parent" containers.
-[Modal](../Modal/Modal.md) uses `large` spacing in its header and around the
+[Dialog](../Dialog/Dialog.md) uses `large` spacing in its header and around the
 edges to give itself a bit more prominence as a standalone view, in a similar
 manner to [Page](../Page/Page.md).
 

package/dist/docs/page-layouts/page-layouts.md

@@ -43,6 +43,35 @@ More complex full-page scaffolding can be found on the [Scaffolding](../scaffold
   </Stack>
 ```
 
+```tsx
+<Stack>
+    <Heading level={2}>Stack Dialog Layouts</Heading>
+    <Text>Stacks are a great way to layout content in a dialog format. They are responsive and easy to read.</Text>
+    <Dialog>
+      <Dialog.Trigger>
+        <Button label="Open Dialog" />
+      </Dialog.Trigger>
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Dialog Layout</Dialog.Title>
+          <Dialog.Close />
+        </Dialog.Header>
+        <Dialog.Body>
+          <Stack>
+            <Text>A dialog with a header, body text, and footer</Text>
+            <Text>And they're all stacked vertically with equal spacing</Text>
+          </Stack>
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Dialog.Actions
+            primary={<Dialog.Close render={<Button label="Close the Dialog" />} />}
+          />
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  </Stack>
+```
+
 ```tsx
 <Stack>
     <Heading level={1}>Cluster</Heading>

package/dist/docs/settings/settings.md

@@ -26,7 +26,7 @@ Most settings can be managed with the
 [FeatureSwitch](../FeatureSwitch/FeatureSwitch.md) component, which allows:
 
 * turning functionality on and off
-* editing aspects of the feature via a [Modal](../Modal/Modal.md)
+* editing aspects of the feature via a [Dialog](../Dialog/Dialog.md)
 * if the page supports it, live updates to the setting
 
 ### Grouping settings
@@ -37,7 +37,7 @@ Use a [Card](../Card/Card.md) to group related settings together.
 
 The [FeatureSwitch](../FeatureSwitch/FeatureSwitch.md) component is a good starting
 point for most settings. If the setting is more complex, you can trigger a
-[Modal](../Modal/Modal.md) to edit the setting.
+[Dialog](../Dialog/Dialog.md) to edit the setting.
 
 For cases where you don't need the full functionality of the `FeatureSwitch`,
 you can either opt out of props like `onSwitch` or `onEdit`, or compose a layout
@@ -49,7 +49,7 @@ of the pieces you do need.
 
 * [FeatureSwitch](../FeatureSwitch/FeatureSwitch.md)
 * [Card](../Card/Card.md)
-* [Modal](../Modal/Modal.md)
+* [Dialog](../Dialog/Dialog.md)
 * [Switch](../Switch/Switch.md)
 
 ## Principles

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -5,22 +5,13 @@ before generating any Atlantis code.
 
 ***
 
-## Always use version= for migrated components
-
-The following components have a v2 implementation. **Always pass
-`version={2}`**. Never generate v1 usage for these components — v1 is
-deprecated.
-
-| Component | Import                                             | v2 prop                                           |
-| --------- | -------------------------------------------------- | ------------------------------------------------- |
-| Modal     | `import { Modal } from "@jobber/components/Modal"` | `version={2}` — uses `Modal.Provider` composition |
-
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                            | Notes                                    |
-| --------------------- | ------------------------------------------------------ | ---------------------------------------- |
-| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.   |
-| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated. |
+| Deprecated            | Replacement                                            | Notes                                                                                                                                                  |
+| --------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Modal`               | `Dialog`                                               | Includes `Modal.Provider` and the `Modal.*` subcomponents. See [migrating to Dialog](/components/Dialog/implement#component-view-migrating-to-dialog). |
+| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.                                                                                                                 |
+| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated.                                                                                                               |
 
 ### Deprecated props on still-supported components
 
@@ -74,7 +65,7 @@ parent reads its compound children to wire up state, accessibility, and styling.
 
 | Component               | Subcomponents                                                                                                                                                                                                                                                                                | Usage                                                                                                                                                                                                                                                                                                                        |
 | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Modal` v2              | `Modal.Provider`, `Modal.Activator`, `Modal.Content`, `Modal.Header`, `Modal.Actions`                                                                                                                                                                                                        | Wrap with `Modal.Provider`. `Modal.Header` and `Modal.Actions` must be **direct children** of `Modal.Content` for sticky behavior to work. Use `Modal.Activator` to control focus return when the trigger element unmounts.                                                                                                  |
+| `Dialog`                | `Dialog.Trigger`, `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Close`, `Dialog.Body`, `Dialog.Footer`, `Dialog.Actions`, `Dialog.ScrollArea`                                                                                                                                   | `Dialog` > `Dialog.Trigger` + `Dialog.Content` containing `Dialog.Header` (with `Dialog.Title` and `Dialog.Close`), `Dialog.Body`, and `Dialog.Footer` (wrapping `Dialog.Actions`). `Dialog.Header` and `Dialog.Footer` are layout-only slots. Use `finalFocus` to control focus return when the trigger unmounts.           |
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
 | `FilterPicker`          | `FilterPicker.Activator`, `FilterPicker.Option`, `FilterPicker.Action`                                                                                                                                                                                                                       | `FilterPicker` > optional `FilterPicker.Activator`, one or more `FilterPicker.Option`, optional `FilterPicker.Action`. Omitting `FilterPicker.Activator` renders the default activator.                                                                                                                                      |
@@ -100,10 +91,9 @@ parent reads its compound children to wire up state, accessibility, and styling.
   returns a translated label per state (e.g. `"Next page"`, `"Previous page"`).
 * **`RadioGroup` options whose `children` aren't text** must provide
   `aria-label` on the option so it has an accessible name.
-* **`Modal` v2 without a `Modal.Header` title** must set either
-  `modalLabelledBy` (id of an existing element) or `ariaLabel` on the modal so
-  the dialog has an accessible name. A `Modal.Header` title takes precedence
-  over `ariaLabel` when both are provided.
+* **`Dialog` must include a `Dialog.Title`** so the dialog has an accessible
+  name. `Dialog.Title` is wired to `aria-labelledby` automatically, and
+  `Dialog.Body` to `aria-describedby` — do not wire these by hand.
 
 ## UNSAFE\_ props
 
@@ -123,12 +113,14 @@ prefer design tokens inside any custom styles you do write. See
 * If using two cards next to each other horizontally, ensure they have a gap
   between them
 
-### Modal
+### Dialog
 
-* When using a modal as part of an app, always wrap the inner content of the
-  modal in the Content component, this is what gives it the padding the form
-  needs from the edges of the modal.
-* Content will also provide the gap necessary between fields
+* Use `Dialog` for overlay content. `Modal` is deprecated — do not generate new
+  `Modal` or `Modal.Provider` usage.
+* Put the dialog's inner content in `Dialog.Body`, which supplies the padding
+  from the edges of the dialog and the gap between fields.
+* Put action buttons in a `Dialog.Actions` inside a `Dialog.Footer` rather than
+  placing bare buttons in the body.
 
 ### Color
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.10.4",
+  "version": "9.12.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -549,5 +549,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "de19112ccd7ce171f0ee64af0fa4043d040ace45"
+  "gitHead": "ae408ecc8d3eecc819118b2932493d653819aa9f"
 }