@jobber/components 9.11.0 → 9.12.1

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

@@ -4,8 +4,8 @@ var Page = require('../Page-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
-require('@jobber/hooks');
 require('../Menu-cjs.js');
+require('@jobber/hooks');
 require('framer-motion');
 require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');

package/dist/Page/index.mjs

@@ -2,8 +2,8 @@ export { P as Page } from '../Page-es.js';
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
-import '@jobber/hooks';
 import '../Menu-es.js';
+import '@jobber/hooks';
 import 'framer-motion';
 import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';

package/dist/Page-cjs.js

@@ -3,7 +3,6 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks');
 var Menu = require('./Menu-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
@@ -15,7 +14,7 @@ var filterDataAttributes = require('./filterDataAttributes-cjs.js');
 var useAtlantisI18n = require('./useAtlantisI18n-cjs.js');
 require('./AtlantisContext-cjs.js');
 
-var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
+var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","titleBarContainer":"QY-7D1tlDqY-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
 const PageContext = React.createContext({ width: undefined });
 function usePageContext() {
@@ -40,33 +39,28 @@ function Page(props) {
 function PageLegacy(_a) {
     var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = tslib_es6.__rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
     const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
-    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
-    const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
-        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
-    });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;
     return (React.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
         React.createElement(Content.Content, null,
             React.createElement(Content.Content, null,
-                React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
-                    React.createElement("div", null,
-                        typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
-                            React.createElement(Heading.Heading, { level: 1 }, title),
-                            titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
-                        subtitle && (React.createElement("div", { className: styles.subtitle },
-                            React.createElement(Text.Text, { size: "large", variation: "subdued" },
-                                React.createElement(Emphasis.Emphasis, { variation: "bold" },
-                                    React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
-                    showActionGroup && (React.createElement("div", { className: styles.actionGroup },
-                        primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
-                        secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
-                        showMenu && (React.createElement("div", { className: styles.actionButton },
-                            React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
+                React.createElement("div", { className: styles.titleBarContainer },
+                    React.createElement("div", { className: styles.titleBar },
+                        React.createElement("div", null,
+                            typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
+                                React.createElement(Heading.Heading, { level: 1 }, title),
+                                titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
+                            subtitle && (React.createElement("div", { className: styles.subtitle },
+                                React.createElement(Text.Text, { size: "large", variation: "subdued" },
+                                    React.createElement(Emphasis.Emphasis, { variation: "bold" },
+                                        React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
+                        showActionGroup && (React.createElement("div", { className: styles.actionGroup },
+                            primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
+                                React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
+                            secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
+                                React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
+                            showMenu && (React.createElement("div", { className: styles.actionButton },
+                                React.createElement(Menu.Menu, { items: moreActionsMenu }))))))),
                 intro && (React.createElement(Text.Text, { size: "large" },
                     React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React.createElement(Content.Content, null, children))));
@@ -79,13 +73,8 @@ function PageLegacy(_a) {
 function PageHeader(_a) {
     var { children } = _a, rest = tslib_es6.__rest(_a, ["children"]);
     const dataAttrs = filterDataAttributes.filterDataAttributes(rest);
-    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
-    const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
-        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
-    });
-    return (React.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
+    return (React.createElement("div", { className: styles.titleBarContainer },
+        React.createElement("div", Object.assign({ className: styles.titleBar }, dataAttrs), children)));
 }
 /** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
 function PageHeaderContent(_a) {

package/dist/Page-es.js

@@ -1,7 +1,6 @@
 import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { createContext, useContext } from 'react';
 import classnames from 'classnames';
-import { useResizeObserver, Breakpoints } from '@jobber/hooks';
 import { M as Menu, m as menuMessages } from './Menu-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
@@ -13,7 +12,7 @@ import { f as filterDataAttributes } from './filterDataAttributes-es.js';
 import { u as useAtlantisI18n } from './useAtlantisI18n-es.js';
 import './AtlantisContext-es.js';
 
-var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","large":"SH0aNOLVhE8-","medium":"Lc7Z0FsBa6w-","small":"iF5IA1SYKoA-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
+var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","titleBarContainer":"QY-7D1tlDqY-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
 
 const PageContext = createContext({ width: undefined });
 function usePageContext() {
@@ -38,33 +37,28 @@ function Page(props) {
 function PageLegacy(_a) {
     var { title, titleMetaData, intro, externalIntroLinks, subtitle, children, primaryAction, secondaryAction, moreActionsMenu = [], pageStyles } = _a, rest = __rest(_a, ["title", "titleMetaData", "intro", "externalIntroLinks", "subtitle", "children", "primaryAction", "secondaryAction", "moreActionsMenu", "pageStyles"]);
     const dataAttrs = filterDataAttributes(rest);
-    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
-    const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > Breakpoints.small,
-        [styles.large]: titleBarWidth > Breakpoints.base,
-    });
     const showMenu = moreActionsMenu.length > 0;
     const showActionGroup = showMenu || primaryAction || secondaryAction;
     return (React__default.createElement("div", Object.assign({ className: pageStyles }, dataAttrs),
         React__default.createElement(Content, null,
             React__default.createElement(Content, null,
-                React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
-                    React__default.createElement("div", null,
-                        typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
-                            React__default.createElement(Heading, { level: 1 }, title),
-                            titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
-                        subtitle && (React__default.createElement("div", { className: styles.subtitle },
-                            React__default.createElement(Text, { size: "large", variation: "subdued" },
-                                React__default.createElement(Emphasis, { variation: "bold" },
-                                    React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
-                    showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
-                        primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
-                        secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
-                            React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
-                        showMenu && (React__default.createElement("div", { className: styles.actionButton },
-                            React__default.createElement(Menu, { items: moreActionsMenu })))))),
+                React__default.createElement("div", { className: styles.titleBarContainer },
+                    React__default.createElement("div", { className: styles.titleBar },
+                        React__default.createElement("div", null,
+                            typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
+                                React__default.createElement(Heading, { level: 1 }, title),
+                                titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
+                            subtitle && (React__default.createElement("div", { className: styles.subtitle },
+                                React__default.createElement(Text, { size: "large", variation: "subdued" },
+                                    React__default.createElement(Emphasis, { variation: "bold" },
+                                        React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
+                        showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
+                            primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
+                                React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction), { fullWidth: true })))),
+                            secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
+                                React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction), { fullWidth: true, type: "secondary" })))),
+                            showMenu && (React__default.createElement("div", { className: styles.actionButton },
+                                React__default.createElement(Menu, { items: moreActionsMenu }))))))),
                 intro && (React__default.createElement(Text, { size: "large" },
                     React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
             React__default.createElement(Content, null, children))));
@@ -77,13 +71,8 @@ function PageLegacy(_a) {
 function PageHeader(_a) {
     var { children } = _a, rest = __rest(_a, ["children"]);
     const dataAttrs = filterDataAttributes(rest);
-    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
-    const titleBarClasses = classnames(styles.titleBar, {
-        [styles.small]: titleBarWidth > Breakpoints.smaller,
-        [styles.medium]: titleBarWidth > Breakpoints.small,
-        [styles.large]: titleBarWidth > Breakpoints.base,
-    });
-    return (React__default.createElement("div", Object.assign({ className: titleBarClasses, ref: titleBarRef }, dataAttrs), children));
+    return (React__default.createElement("div", { className: styles.titleBarContainer },
+        React__default.createElement("div", Object.assign({ className: styles.titleBar }, dataAttrs), children)));
 }
 /** Wraps the title area (title, subtitle) inside `Page.Header`. Use when the header contains more than one content element to keep them stacked vertically. */
 function PageHeaderContent(_a) {

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/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/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/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/dist/styles.css

@@ -14749,6 +14749,16 @@ input.oOrjwubmsVA- {
   margin-bottom: 0;
 }
 
+/*
+ * Wrapper because a container query can't style the container itself, and
+ * containment on .page would capture fixed/absolute positioning of consumer
+ * content in the page body.
+ */
+.QY-7D1tlDqY- {
+  container-name: page-titlebar;
+  container-type: inline-size;
+}
+
 .lbmoDvdtQO4- > ._7t53-bnzh98- {
   -ms-flex: 1 0 auto;
       flex: 1 0 auto;
@@ -14756,36 +14766,6 @@ input.oOrjwubmsVA- {
       align-self: baseline;
 }
 
-.lbmoDvdtQO4-.SH0aNOLVhE8-,
-.lbmoDvdtQO4-.Lc7Z0FsBa6w- {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
-}
-
-.lbmoDvdtQO4-.iF5IA1SYKoA- ._7t53-bnzh98- {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
-}
-
-.lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98-,
-.lbmoDvdtQO4-.SH0aNOLVhE8- ._7t53-bnzh98- {
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-}
-
-.lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98- {
-  -ms-flex-pack: end;
-      justify-content: flex-end;
-}
-
 .g-H7CKkX-LA- {
   -ms-flex: 0 0 100%;
       flex: 0 0 100%;
@@ -14804,30 +14784,76 @@ input.oOrjwubmsVA- {
   width: 100%;
 }
 
-.lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- {
-  margin-top: 0;
+.lbmoDvdtQO4- .EqsNMrZVL-8- {
+  margin-bottom: 16px;
+  margin-bottom: var(--space-base);
 }
 
-.lbmoDvdtQO4-.Lc7Z0FsBa6w- .g-H7CKkX-LA-,
-.lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
-  margin: 0;
-  -ms-flex: 0 auto;
-      flex: 0 auto;
+/*
+ * The wrapper's containment traps trailing title/subtitle margins that used
+ * to collapse out of the (block, below 640px) titlebar into the following
+ * Content spacing; cancel them to keep that spacing unchanged.
+ */
+@container page-titlebar (width < 640px) {
+  .lbmoDvdtQO4- > :last-child,
+  .lbmoDvdtQO4- > div:last-child > :last-child {
+    margin-bottom: 0;
+  }
 }
 
-.lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
-  margin-left: 8px;
-  margin-left: var(--space-small);
-}
+/*
+ * 500/640 are the effective switch points of the replaced useResizeObserver
+ * implementation (it snapped widths to Breakpoints values before comparing).
+ * Hardcoded because @container accepts neither custom media nor var().
+ */
+@container page-titlebar (min-width: 500px) {
+  .lbmoDvdtQO4- ._7t53-bnzh98- {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -ms-flex-pack: justify;
+        justify-content: space-between;
+  }
 
-.lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
-  margin-left: 8px;
-  margin-left: var(--space-small);
+  .lbmoDvdtQO4- .RSP7jHjP-mw- {
+    margin-top: 0;
+  }
+
+  .lbmoDvdtQO4- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
+    margin-left: 8px;
+    margin-left: var(--space-small);
+  }
 }
 
-.lbmoDvdtQO4- .EqsNMrZVL-8- {
-  margin-bottom: 16px;
-  margin-bottom: var(--space-base);
+@container page-titlebar (min-width: 640px) {
+  .lbmoDvdtQO4- {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    -ms-flex-pack: justify;
+        justify-content: space-between;
+  }
+
+  .lbmoDvdtQO4- ._7t53-bnzh98- {
+    -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+    -ms-flex-pack: end;
+        justify-content: flex-end;
+  }
+
+  .lbmoDvdtQO4- .g-H7CKkX-LA-,
+  .lbmoDvdtQO4- .RSP7jHjP-mw- {
+    margin: 0;
+    -ms-flex: 0 auto;
+        flex: 0 auto;
+  }
+
+  .lbmoDvdtQO4- .RSP7jHjP-mw- {
+    margin-left: 8px;
+    margin-left: var(--space-small);
+  }
 }
 
 @-webkit-keyframes MJZVhEmx6h4- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.11.0",
+  "version": "9.12.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -506,13 +506,11 @@
     "@storybook/addon-mcp": "^0.4.2",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/react-vite": "10.3.5",
-    "@types/glob": "^7.1.1",
     "@types/node": "^22.10.1",
     "@vitest/browser-playwright": "^4.1.2",
     "@vitest/coverage-v8": "^4.1.2",
     "autoprefixer": "^10.4.0",
     "copyfiles": "^2.4.1",
-    "glob": "^7.1.4",
     "jsdom-testing-mocks": "^1.9.0",
     "playwright": "1.59.1",
     "postcss": "^8.5.25",
@@ -549,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fa163fb08329a1c705f4c545a7082ad585e9a5a4"
+  "gitHead": "2631b0995f78204f24e3175185951d9b0f1ac4bc"
 }