@jobber/components 9.12.0 → 9.12.2

package/dist/Combobox/Combobox.d.ts

@@ -16,7 +16,7 @@ declare function ComboboxInput({ className, ...inputProps }: ComboboxInputProps)
 declare function ComboboxTrigger({ className, render, ...triggerProps }: ComboboxTriggerProps): React.JSX.Element;
 declare function ComboboxClear({ className, ...clearProps }: ComboboxClearProps): React.JSX.Element;
 declare function ComboboxTriggerInput({ className, clearLabel, showOptionsLabel, ...inputProps }: ComboboxTriggerInputProps): React.JSX.Element;
-declare function ComboboxTriggerValue({ children, className, placeholder, ...triggerProps }: ComboboxTriggerValueProps): React.JSX.Element;
+declare function ComboboxTriggerValue({ children, className, clearLabel, placeholder, ...triggerProps }: ComboboxTriggerValueProps): React.JSX.Element;
 declare function ComboboxTriggerMultipleWithInput<Value = unknown>({ className, getItemLabel, getRemoveLabel, renderItem, showOptionsLabel, ...inputProps }: ComboboxTriggerMultipleWithInputProps<Value>): React.JSX.Element;
 declare function ComboboxTriggerMultipleValue<Value = unknown>({ getItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel, ...chipsProps }: ComboboxTriggerMultipleValueProps<Value>): React.JSX.Element;
 declare function ComboboxContent({ ariaLabel, children, className, empty, style, }: ComboboxContentProps): React.JSX.Element;

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

@@ -132,6 +132,7 @@ export interface ComboboxTriggerInputProps extends Omit<ComboboxInputProps, "chi
 }
 export interface ComboboxTriggerValueProps extends Omit<ComboboxTriggerProps, "children"> {
     readonly children?: ComboboxValueProps["children"];
+    readonly clearLabel?: string;
     readonly placeholder?: ComboboxValueProps["placeholder"];
 }
 export interface ComboboxTriggerMultipleWithInputProps<Value> extends Omit<ComboboxInputProps, "children"> {

package/dist/Combobox-cjs.js

@@ -166,7 +166,7 @@ const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot"
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
-var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","fieldActions":"AokWVDmnM14-","fieldAction":"eFNme5KV-Tg-","fieldClear":"_8ofvzyVIbDQ-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","hasClearAction":"fqHi3uY-5FQ-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueActions":"_8AEote8Zs9E-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
 const comboboxMessages = useAtlantisI18n.defineMessages({
     noResults: {
@@ -600,22 +600,27 @@ function ComboboxTriggerInput(_a) {
     const context = useOptionalComboboxContext();
     return (React.createElement(ComboboxLabeledInputGroup, null,
         React.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
-        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
             React.createElement(DefaultClearIcon, null))),
-        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions"), className: styles.fieldAction },
             React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
-    var { children, className, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "placeholder"]);
+    var { children, className, clearLabel, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "clearLabel", "placeholder"]);
+    const { t } = useAtlantisI18n.useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const showLabel = shouldRenderInnerLabel(context);
     const renderLabel = shouldRenderRecipeLabel(context);
-    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+    const showClear = Boolean(!(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && clearLabel);
+    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel, showClear && styles.hasClearAction) },
         renderLabel && (React.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
         React.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName.mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
             React.createElement("span", { className: styles.triggerValueText },
-                React.createElement(ComboboxPrimitive.ComboboxValue, { placeholder: placeholder }, children)),
-            React.createElement("span", { className: styles.triggerValueIcon },
+                React.createElement(ComboboxPrimitive.ComboboxValue, { placeholder: placeholder }, children))),
+        React.createElement("span", { className: classnames(styles.fieldActions, styles.triggerValueActions) },
+            showClear && (React.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
+                React.createElement(DefaultClearIcon, null))),
+            React.createElement("span", { className: styles.fieldAction },
                 React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
 }
 function getDefaultItemLabel(value) {

package/dist/Combobox-es.js

@@ -164,7 +164,7 @@ const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot"
 const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
 const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
 
-var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","fieldActions":"AokWVDmnM14-","fieldAction":"eFNme5KV-Tg-","fieldClear":"_8ofvzyVIbDQ-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","hasClearAction":"fqHi3uY-5FQ-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueActions":"_8AEote8Zs9E-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
 
 const comboboxMessages = defineMessages({
     noResults: {
@@ -598,22 +598,27 @@ function ComboboxTriggerInput(_a) {
     const context = useOptionalComboboxContext();
     return (React__default.createElement(ComboboxLabeledInputGroup, null,
         React__default.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
-        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel !== null && clearLabel !== void 0 ? clearLabel : t("clearSelection") },
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
             React__default.createElement(DefaultClearIcon, null))),
-        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions") },
+        React__default.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel !== null && showOptionsLabel !== void 0 ? showOptionsLabel : t("openOptions"), className: styles.fieldAction },
             React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
 }
 function ComboboxTriggerValue(_a) {
-    var { children, className, placeholder } = _a, triggerProps = __rest(_a, ["children", "className", "placeholder"]);
+    var { children, className, clearLabel, placeholder } = _a, triggerProps = __rest(_a, ["children", "className", "clearLabel", "placeholder"]);
+    const { t } = useAtlantisI18n(comboboxMessages);
     const context = useOptionalComboboxContext();
     const showLabel = shouldRenderInnerLabel(context);
     const renderLabel = shouldRenderRecipeLabel(context);
-    return (React__default.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+    const showClear = Boolean(!(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && clearLabel);
+    return (React__default.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel, showClear && styles.hasClearAction) },
         renderLabel && (React__default.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
         React__default.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
             React__default.createElement("span", { className: styles.triggerValueText },
-                React__default.createElement(ComboboxValue, { placeholder: placeholder }, children)),
-            React__default.createElement("span", { className: styles.triggerValueIcon },
+                React__default.createElement(ComboboxValue, { placeholder: placeholder }, children))),
+        React__default.createElement("span", { className: classnames(styles.fieldActions, styles.triggerValueActions) },
+            showClear && (React__default.createElement(ComboboxClear, { "aria-label": clearLabel || t("clearSelection"), className: styles.fieldClear },
+                React__default.createElement(DefaultClearIcon, null))),
+            React__default.createElement("span", { className: styles.fieldAction },
                 React__default.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
 }
 function getDefaultItemLabel(value) {

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

@@ -4657,7 +4657,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .EySvIEsW9Q4-,
-:where(.F94vaco3HkM-),
+.F94vaco3HkM-,
 :where(.IYgNfHHPVFY-) {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.5);
   --comboboxPrimitive-control-height: calc(
@@ -4698,9 +4698,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-sizing: border-box;
 }
 
-.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible):not(
-    [data-popup-open]
-  ) {
+.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible),
+.EySvIEsW9Q4-[data-popup-open] {
   z-index: 1;
   z-index: var(--elevation-base);
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
@@ -4713,26 +4712,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border-color: var(--color-critical);
 }
 
-.EySvIEsW9Q4-:not([data-disabled]):not(
-    :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
-  ):hover {
-  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
-}
-
-.EySvIEsW9Q4-:not([data-disabled])[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
-  border-color: hsl(198, 35%, 21%);
-  border-color: var(--color-interactive--subtle);
-}
-
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled]):not(
     :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
   ):hover,
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled])[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
   border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
@@ -4819,7 +4802,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-disabled);
 }
 
-:where(.F94vaco3HkM-) {
+.F94vaco3HkM- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -4885,7 +4868,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   cursor: pointer;
 }
 
-.EySvIEsW9Q4- > :where(.F94vaco3HkM-) {
+.EySvIEsW9Q4- > .F94vaco3HkM- {
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
   -ms-flex-pack: center;
@@ -4910,14 +4893,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-heading);
 }
 
-.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible:not(
-    [data-popup-open]
-  ) {
-  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
-  box-shadow: var(--shadow-focus);
-  outline: none;
-}
-
 :where(.IYgNfHHPVFY-:focus-visible) {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
@@ -4926,10 +4901,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
-:where(.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible) {
-  outline: none;
-}
-
 :where(.IYgNfHHPVFY-:has(+ .F94vaco3HkM-)) {
   min-width: 24px;
   min-width: var(--space-large);
@@ -4940,19 +4911,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-icon--secondary);
 }
 
-/* Standalone triggers own field border/shadow states; InputGroup owns them when the trigger is embedded. */
+/* Standalone triggers own field focus states; InputGroup owns them when the trigger is embedded. */
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible,
 .F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-))[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
-  border-color: hsl(198, 35%, 21%);
-  border-color: var(--color-interactive--subtle);
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
 }
 
-.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not([data-disabled]):not(
-    :focus-visible
-  ):hover {
-  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
+.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible {
+  outline: none;
 }
 
 .F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
@@ -4961,17 +4929,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
     [data-disabled]
   )[data-popup-open] {
-  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
-  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
   border-color: hsl(6, 64%, 51%);
   border-color: var(--color-critical);
 }
 
 .F94vaco3HkM-[data-disabled] {
-  --comboboxPrimitive-field-border-width: var(--border-base);
-
   border-color: hsl(200, 13%, 87%);
-
   border-color: var(--color-border);
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
@@ -5916,6 +5879,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .RViH4KcR7S4-.RViH4KcR7S4- {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 3);
   --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-trigger-icon-size: calc(var(--base-unit) * 1.5);
   --combobox-chip-padding-block: var(--space-small);
   --combobox-chip-padding-inline: var(--space-slim);
   --combobox-hasLabel-control-padding-top: calc(
@@ -5937,6 +5901,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .PhTQQLSQRfU-.PhTQQLSQRfU- {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.25);
   --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-trigger-icon-size: var(--space-base);
   --combobox-chip-padding-block: var(--space-smaller);
   --combobox-chip-padding-inline: var(--space-slim);
   --combobox-hasLabel-control-padding-top: var(
@@ -5954,6 +5919,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 ._2GAP0lCM9iU-._2GAP0lCM9iU- {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 3.5);
   --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-trigger-icon-size: calc(var(--base-unit) * 1.5);
   --combobox-chip-padding-block: var(--space-slim);
   --combobox-chip-padding-inline: var(--space-slim);
   --combobox-hasLabel-control-padding-top: calc(
@@ -5972,6 +5938,22 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   --combobox-trigger-padding-inline-end: var(--space-base);
 }
 
+.RViH4KcR7S4-.RViH4KcR7S4-,
+.PhTQQLSQRfU-.PhTQQLSQRfU-,
+._2GAP0lCM9iU-._2GAP0lCM9iU- {
+  --comboboxPrimitive-control-height: calc(
+    var(--comboboxPrimitive-field-height) - (var(--border-base) * 2)
+  );
+  --combobox-field-action-width: max(
+    var(--comboboxPrimitive-control-height),
+    calc(
+      var(--combobox-trigger-padding-inline-start) +
+        var(--combobox-trigger-padding-inline-end) +
+        var(--combobox-trigger-icon-size)
+    )
+  );
+}
+
 .dCxC3YMhuE8-:not(.PhTQQLSQRfU-) {
   --comboboxPrimitive-field-padding-inline: var(--space-base);
 }
@@ -6179,6 +6161,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
+.AokWVDmnM14- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+.eFNme5KV-Tg- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  width: var(--combobox-field-action-width);
+  min-width: var(--combobox-field-action-width);
+  box-sizing: border-box;
+  padding: 0 var(--combobox-trigger-padding-inline-end) 0
+    var(--combobox-trigger-padding-inline-start);
+}
+
+._8ofvzyVIbDQ- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+
 ._0jDShCnQjxc- {
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -6196,44 +6208,66 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .v6DatDYO-gk- {
+  --combobox-trigger-actions-width: var(--combobox-field-action-width);
+
   position: relative;
   width: 100%;
 }
 
-.LyrziI4LY5w- {
+.v6DatDYO-gk-.fqHi3uY-5FQ- {
+  --combobox-trigger-actions-width: calc(
+    var(--combobox-field-action-width) + (var(--base-unit) * 1.5) +
+      var(--space-smaller)
+  );
+}
+
+.v6DatDYO-gk- > .DZ76oTE8arw- {
+  top: calc(2px + 1px);
+  top: calc(var(--space-smallest) + var(--border-base));
+  left: 1px;
+  left: var(--border-base);
+  width: calc(100% - (1px * 2));
+  width: calc(100% - (var(--border-base) * 2));
+}
+
+.mKKJ60Qxxmw-.LyrziI4LY5w- {
   padding: 0;
 }
 
 .ayWSHF3Mwfc- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  display: block;
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
-  -ms-flex-align: center;
-      align-items: center;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
   min-width: 0;
-  padding: var(--comboboxPrimitive-field-padding-block) 8px
+  box-sizing: border-box;
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--combobox-trigger-actions-width)
     var(--comboboxPrimitive-field-padding-block)
-    var(--comboboxPrimitive-field-padding-inline);
-  padding: var(--comboboxPrimitive-field-padding-block) var(--space-small)
+    calc(var(--comboboxPrimitive-field-padding-inline) + 1px);
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--combobox-trigger-actions-width)
     var(--comboboxPrimitive-field-padding-block)
-    var(--comboboxPrimitive-field-padding-inline);
+    calc(var(--comboboxPrimitive-field-padding-inline) + var(--border-base));
+  line-height: var(--comboboxPrimitive-field-line-height);
 }
 
-.Glijnn9-fUw- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
-  -ms-flex-item-align: stretch;
-      align-self: stretch;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex-pack: center;
-      justify-content: center;
-  min-width: 0;
-  padding-left: var(--combobox-trigger-padding-inline-start);
-  padding-right: var(--combobox-trigger-padding-inline-end);
+._8AEote8Zs9E- {
+  position: absolute;
+  top: 1px;
+  top: var(--border-base);
+  right: 1px;
+  right: var(--border-base);
+  bottom: 1px;
+  bottom: var(--border-base);
+  pointer-events: none;
+}
+
+._8AEote8Zs9E- ._8ofvzyVIbDQ- {
+  z-index: 1;
+  z-index: var(--elevation-base);
+  pointer-events: auto;
 }
 
 ._-0af5xRGjJ8- {
@@ -14749,6 +14783,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 +14800,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 +14818,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.12.0",
+  "version": "9.12.2",
   "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": "ae408ecc8d3eecc819118b2932493d653819aa9f"
+  "gitHead": "923becb22a4e697d07efdb9fb86966a9ff3f459c"
 }