@jobber/components 6.105.5 → 6.106.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Page/Page.d.ts +1 -1
  2. package/dist/Page/index.cjs +2 -1
  3. package/dist/Page/index.mjs +2 -1
  4. package/dist/Page-cjs.js +20 -27
  5. package/dist/Page-es.js +20 -27
  6. package/dist/ProgressBar/ProgressBar.d.ts +11 -1
  7. package/dist/ProgressBar/ProgressBarStepped.d.ts +3 -1
  8. package/dist/ProgressBar-cjs.js +5 -5
  9. package/dist/ProgressBar-es.js +5 -5
  10. package/dist/styles.css +22 -34
  11. package/package.json +2 -2
package/dist/Page/Page.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { XOR } from "ts-xor";
4
4
  import { type ButtonProps } from "../Button";
5
5
  import { type SectionProps } from "../Menu";
6
6
  export type ButtonActionProps = ButtonProps & {
7
- ref?: React.RefObject<HTMLDivElement>;
7
+ ref?: React.RefObject<HTMLDivElement | null>;
8
8
  };
9
9
  interface PageFoundationProps {
10
10
  readonly children: ReactNode | ReactNode[];
package/dist/Page/index.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  var Page = require('../Page-cjs.js');
4
4
  require('react');
5
5
  require('classnames');
6
- require('@jobber/hooks');
7
6
  require('../Heading-cjs.js');
8
7
  require('../Typography-cjs.js');
9
8
  require('../Text-cjs.js');
@@ -19,12 +18,14 @@ require('../Icon-cjs.js');
19
18
  require('@jobber/design');
20
19
  require('../Menu-cjs.js');
21
20
  require('framer-motion');
21
+ require('@jobber/hooks');
22
22
  require('../floating-ui.react-cjs.js');
23
23
  require('react-dom');
24
24
  require('../Tree-cjs.js');
25
25
  require('../clsx-cjs.js');
26
26
  require('../useFormFieldFocus-cjs.js');
27
27
  require('../maxHeight-cjs.js');
28
+ require('../Container-cjs.js');
28
29
 
29
30
 
30
31
 
package/dist/Page/index.mjs CHANGED
@@ -1,7 +1,6 @@
1
1
  export { P as Page } from '../Page-es.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
- import '@jobber/hooks';
5
4
  import '../Heading-es.js';
6
5
  import '../Typography-es.js';
7
6
  import '../Text-es.js';
@@ -17,9 +16,11 @@ import '../Icon-es.js';
17
16
  import '@jobber/design';
18
17
  import '../Menu-es.js';
19
18
  import 'framer-motion';
19
+ import '@jobber/hooks';
20
20
  import '../floating-ui.react-es.js';
21
21
  import 'react-dom';
22
22
  import '../Tree-es.js';
23
23
  import '../clsx-es.js';
24
24
  import '../useFormFieldFocus-es.js';
25
25
  import '../maxHeight-es.js';
26
+ import '../Container-es.js';
package/dist/Page-cjs.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  var React = require('react');
4
4
  var classnames = require('classnames');
5
- var jobberHooks = require('@jobber/hooks');
6
5
  var Heading = require('./Heading-cjs.js');
7
6
  var Text = require('./Text-cjs.js');
8
7
  var Content = require('./Content-cjs.js');
@@ -10,17 +9,12 @@ var Markdown = require('./Markdown-cjs.js');
10
9
  var Button = require('./Button-cjs.js');
11
10
  var Menu = require('./Menu-cjs.js');
12
11
  var Emphasis = require('./Emphasis-cjs.js');
12
+ var Container = require('./Container-cjs.js');
13
13
 
14
- 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-"};
14
+ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
15
15
 
16
16
  function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
17
17
  const pageStyles = classnames(styles.page, styles[width]);
18
- const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
19
- const titleBarClasses = classnames(styles.titleBar, {
20
- [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
21
- [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
22
- [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
23
- });
24
18
  const showMenu = moreActionsMenu.length > 0;
25
19
  const showActionGroup = showMenu || primaryAction || secondaryAction;
26
20
  if (primaryAction != undefined) {
@@ -29,28 +23,27 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
29
23
  if (secondaryAction != undefined) {
30
24
  secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
31
25
  }
32
- if (secondaryAction != undefined) {
33
- secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
34
- }
35
26
  return (React.createElement("div", { className: pageStyles },
36
27
  React.createElement(Content.Content, null,
37
28
  React.createElement(Content.Content, null,
38
- React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
39
- React.createElement("div", null,
40
- typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
41
- React.createElement(Heading.Heading, { level: 1 }, title),
42
- titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
43
- subtitle && (React.createElement("div", { className: styles.subtitle },
44
- React.createElement(Text.Text, { size: "large", variation: "subdued" },
45
- React.createElement(Emphasis.Emphasis, { variation: "bold" },
46
- React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
47
- showActionGroup && (React.createElement("div", { className: styles.actionGroup },
48
- primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
49
- React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
50
- secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
51
- React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
52
- showMenu && (React.createElement("div", { className: styles.actionButton },
53
- React.createElement(Menu.Menu, { items: moreActionsMenu })))))),
29
+ React.createElement(Container.Container, { name: "page-titlebar", autoWidth: true },
30
+ React.createElement(Container.Container.Apply, { autoWidth: true },
31
+ React.createElement("div", { className: classnames(styles.titleBar) },
32
+ React.createElement("div", null,
33
+ typeof title === "string" && titleMetaData ? (React.createElement("div", { className: styles.titleRow },
34
+ React.createElement(Heading.Heading, { level: 1 }, title),
35
+ titleMetaData)) : typeof title === "string" ? (React.createElement(Heading.Heading, { level: 1 }, title)) : (title),
36
+ subtitle && (React.createElement("div", { className: styles.subtitle },
37
+ React.createElement(Text.Text, { size: "large", variation: "subdued" },
38
+ React.createElement(Emphasis.Emphasis, { variation: "bold" },
39
+ React.createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
40
+ showActionGroup && (React.createElement("div", { className: styles.actionGroup },
41
+ primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
42
+ React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
43
+ secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
44
+ React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
45
+ showMenu && (React.createElement("div", { className: styles.actionButton },
46
+ React.createElement(Menu.Menu, { items: moreActionsMenu })))))))),
54
47
  intro && (React.createElement(Text.Text, { size: "large" },
55
48
  React.createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
56
49
  React.createElement(Content.Content, null, children))));
package/dist/Page-es.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React__default from 'react';
2
2
  import classnames from 'classnames';
3
- import { useResizeObserver, Breakpoints } from '@jobber/hooks';
4
3
  import { H as Heading } from './Heading-es.js';
5
4
  import { T as Text } from './Text-es.js';
6
5
  import { C as Content } from './Content-es.js';
@@ -8,17 +7,12 @@ import { M as Markdown } from './Markdown-es.js';
8
7
  import { B as Button } from './Button-es.js';
9
8
  import { M as Menu } from './Menu-es.js';
10
9
  import { E as Emphasis } from './Emphasis-es.js';
10
+ import { C as Container } from './Container-es.js';
11
11
 
12
- 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-"};
12
+ var styles = {"page":"BLYnKItuM3c-","fill":"n5WRRhMkoLs-","standard":"WziKEWW9nA8-","narrow":"qgGzgDyS2NY-","titleBar":"lbmoDvdtQO4-","titleRow":"k9y5NuqTcks-","actionGroup":"_7t53-bnzh98-","primaryAction":"g-H7CKkX-LA-","actionButton":"RSP7jHjP-mw-","subtitle":"EqsNMrZVL-8-","spinning":"MJZVhEmx6h4-"};
13
13
 
14
14
  function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
15
15
  const pageStyles = classnames(styles.page, styles[width]);
16
- const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
17
- const titleBarClasses = classnames(styles.titleBar, {
18
- [styles.small]: titleBarWidth > Breakpoints.smaller,
19
- [styles.medium]: titleBarWidth > Breakpoints.small,
20
- [styles.large]: titleBarWidth > Breakpoints.base,
21
- });
22
16
  const showMenu = moreActionsMenu.length > 0;
23
17
  const showActionGroup = showMenu || primaryAction || secondaryAction;
24
18
  if (primaryAction != undefined) {
@@ -27,28 +21,27 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
27
21
  if (secondaryAction != undefined) {
28
22
  secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
29
23
  }
30
- if (secondaryAction != undefined) {
31
- secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
32
- }
33
24
  return (React__default.createElement("div", { className: pageStyles },
34
25
  React__default.createElement(Content, null,
35
26
  React__default.createElement(Content, null,
36
- React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
37
- React__default.createElement("div", null,
38
- typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
39
- React__default.createElement(Heading, { level: 1 }, title),
40
- titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
41
- subtitle && (React__default.createElement("div", { className: styles.subtitle },
42
- React__default.createElement(Text, { size: "large", variation: "subdued" },
43
- React__default.createElement(Emphasis, { variation: "bold" },
44
- React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
45
- showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
46
- primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
47
- React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
48
- secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
49
- React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
50
- showMenu && (React__default.createElement("div", { className: styles.actionButton },
51
- React__default.createElement(Menu, { items: moreActionsMenu })))))),
27
+ React__default.createElement(Container, { name: "page-titlebar", autoWidth: true },
28
+ React__default.createElement(Container.Apply, { autoWidth: true },
29
+ React__default.createElement("div", { className: classnames(styles.titleBar) },
30
+ React__default.createElement("div", null,
31
+ typeof title === "string" && titleMetaData ? (React__default.createElement("div", { className: styles.titleRow },
32
+ React__default.createElement(Heading, { level: 1 }, title),
33
+ titleMetaData)) : typeof title === "string" ? (React__default.createElement(Heading, { level: 1 }, title)) : (title),
34
+ subtitle && (React__default.createElement("div", { className: styles.subtitle },
35
+ React__default.createElement(Text, { size: "large", variation: "subdued" },
36
+ React__default.createElement(Emphasis, { variation: "bold" },
37
+ React__default.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
38
+ showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
39
+ primaryAction && (React__default.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
40
+ React__default.createElement(Button, Object.assign({}, getActionProps(primaryAction))))),
41
+ secondaryAction && (React__default.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
42
+ React__default.createElement(Button, Object.assign({}, getActionProps(secondaryAction))))),
43
+ showMenu && (React__default.createElement("div", { className: styles.actionButton },
44
+ React__default.createElement(Menu, { items: moreActionsMenu })))))))),
52
45
  intro && (React__default.createElement(Text, { size: "large" },
53
46
  React__default.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
54
47
  React__default.createElement(Content, null, children))));
package/dist/ProgressBar/ProgressBar.d.ts CHANGED
@@ -19,6 +19,16 @@ interface ProgressBarProps {
19
19
  * @default progress
20
20
  */
21
21
  readonly variation?: "progress" | "stepped";
22
+ /** **Use at your own risk:** Custom class names for specific elements. This should only be used as a
23
+ * **last resort**. Using this may result in unexpected side effects.
24
+ * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
25
+ */
26
+ readonly UNSAFE_className?: string;
27
+ /** **Use at your own risk:** Custom style for specific elements. This should only be used as a
28
+ * **last resort**. Using this may result in unexpected side effects.
29
+ * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
30
+ */
31
+ readonly UNSAFE_style?: React.CSSProperties;
22
32
  }
23
- export declare function ProgressBar({ currentStep, totalSteps, size, variation, }: ProgressBarProps): React.JSX.Element;
33
+ export declare function ProgressBar({ currentStep, totalSteps, size, variation, UNSAFE_className, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;
24
34
  export {};
package/dist/ProgressBar/ProgressBarStepped.d.ts CHANGED
@@ -5,6 +5,8 @@ interface ProgressBarSteppedProps {
5
5
  readonly totalSteps: number;
6
6
  readonly percentage: number;
7
7
  readonly size?: keyof typeof sizes;
8
+ readonly UNSAFE_className?: string;
9
+ readonly UNSAFE_style?: React.CSSProperties;
8
10
  }
9
- export declare function ProgressBarStepped({ currentStep, totalSteps, percentage, size, }: ProgressBarSteppedProps): React.JSX.Element;
11
+ export declare function ProgressBarStepped({ currentStep, totalSteps, percentage, size, UNSAFE_className, UNSAFE_style, }: ProgressBarSteppedProps): React.JSX.Element;
10
12
  export {};
package/dist/ProgressBar-cjs.js CHANGED
@@ -7,10 +7,10 @@ var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","
7
7
 
8
8
  var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A-","spinning":"GHfs7cB4nQQ-"};
9
9
 
10
- function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
10
+ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", UNSAFE_className, UNSAFE_style, }) {
11
11
  const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
12
12
  const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
13
- return (React.createElement("div", { role: "progressbar", className: styles.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
13
+ return (React.createElement("div", { role: "progressbar", className: classnames(styles.wrapper, UNSAFE_className), "data-testid": "progressbar-wrapper", style: UNSAFE_style, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
14
14
  const step = index + 1;
15
15
  const value = step <= currentStep ? 100 : 0;
16
16
  return (React.createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
@@ -19,13 +19,13 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
19
19
  })));
20
20
  }
21
21
 
22
- function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", }) {
22
+ function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", UNSAFE_className, UNSAFE_style, }) {
23
23
  const percentage = (currentStep / totalSteps) * 100;
24
24
  const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);
25
25
  if (variation === "stepped") {
26
- return (React.createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
26
+ return (React.createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
27
27
  }
28
- return (React.createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
28
+ return (React.createElement("progress", { className: classnames(progressBarClassName, UNSAFE_className), style: UNSAFE_style, max: totalSteps, value: currentStep },
29
29
  percentage,
30
30
  "%"));
31
31
  }
package/dist/ProgressBar-es.js CHANGED
@@ -5,10 +5,10 @@ var styles = {"ProgressBar":"p9AgTzIbTwY-","SteppedProgressBar":"w8NAw4ZMB6g-","
5
5
 
6
6
  var sizes = {"smaller":"dylWWgubHwM-","small":"z92YJQrscvI-","base":"DKfNM1to61A-","spinning":"GHfs7cB4nQQ-"};
7
7
 
8
- function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
8
+ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", UNSAFE_className, UNSAFE_style, }) {
9
9
  const steppedProgressBarClassName = classnames(styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
10
10
  const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
11
- return (React__default.createElement("div", { role: "progressbar", className: styles.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
11
+ return (React__default.createElement("div", { role: "progressbar", className: classnames(styles.wrapper, UNSAFE_className), "data-testid": "progressbar-wrapper", style: UNSAFE_style, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
12
12
  const step = index + 1;
13
13
  const value = step <= currentStep ? 100 : 0;
14
14
  return (React__default.createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
@@ -17,13 +17,13 @@ function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base"
17
17
  })));
18
18
  }
19
19
 
20
- function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", }) {
20
+ function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", UNSAFE_className, UNSAFE_style, }) {
21
21
  const percentage = (currentStep / totalSteps) * 100;
22
22
  const progressBarClassName = classnames(styles.ProgressBar, sizes[size]);
23
23
  if (variation === "stepped") {
24
- return (React__default.createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
24
+ return (React__default.createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
25
25
  }
26
- return (React__default.createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
26
+ return (React__default.createElement("progress", { className: classnames(progressBarClassName, UNSAFE_className), style: UNSAFE_style, max: totalSteps, value: currentStep },
27
27
  percentage,
28
28
  "%"));
29
29
  }
package/dist/styles.css CHANGED
@@ -9621,19 +9621,6 @@ input.oOrjwubmsVA- {
9621
9621
  flex: 1 0 auto;
9622
9622
  -ms-flex-item-align: baseline;
9623
9623
  align-self: baseline;
9624
- }
9625
-
9626
- .lbmoDvdtQO4-.SH0aNOLVhE8-,
9627
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- {
9628
- display: -ms-flexbox;
9629
- display: flex;
9630
- -ms-flex-wrap: wrap;
9631
- flex-wrap: wrap;
9632
- -ms-flex-pack: justify;
9633
- justify-content: space-between;
9634
- }
9635
-
9636
- .lbmoDvdtQO4-.iF5IA1SYKoA- ._7t53-bnzh98- {
9637
9624
  display: -ms-flexbox;
9638
9625
  display: flex;
9639
9626
  -ms-flex-wrap: wrap;
@@ -9642,15 +9629,15 @@ input.oOrjwubmsVA- {
9642
9629
  justify-content: space-between;
9643
9630
  }
9644
9631
 
9645
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98-,
9646
- .lbmoDvdtQO4-.SH0aNOLVhE8- ._7t53-bnzh98- {
9647
- -ms-flex-wrap: nowrap;
9648
- flex-wrap: nowrap;
9649
- }
9632
+ /* Medium and up: inline actions (no wrap) */
9650
9633
 
9651
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- ._7t53-bnzh98- {
9652
- -ms-flex-pack: end;
9653
- justify-content: flex-end;
9634
+ @container page-titlebar (min-width: 500px) {
9635
+ .lbmoDvdtQO4- > ._7t53-bnzh98- {
9636
+ -ms-flex-wrap: nowrap;
9637
+ flex-wrap: nowrap;
9638
+ -ms-flex-pack: end;
9639
+ justify-content: flex-end;
9640
+ }
9654
9641
  }
9655
9642
 
9656
9643
  .g-H7CKkX-LA- {
@@ -9671,23 +9658,24 @@ input.oOrjwubmsVA- {
9671
9658
  width: 100%;
9672
9659
  }
9673
9660
 
9674
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- {
9675
- margin-top: 0;
9676
- }
9661
+ /* Medium and up: inline spacing */
9677
9662
 
9678
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .g-H7CKkX-LA-,
9679
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
9680
- margin: 0;
9681
- -ms-flex: 0 auto;
9682
- flex: 0 auto;
9663
+ @container page-titlebar (min-width: 500px) {
9664
+ .lbmoDvdtQO4- .g-H7CKkX-LA-,
9665
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
9666
+ margin: 0;
9667
+ -ms-flex: 0 auto;
9668
+ flex: 0 auto;
9669
+ }
9670
+ .lbmoDvdtQO4- .RSP7jHjP-mw- {
9671
+ margin-left: 8px;
9672
+ margin-left: var(--space-small);
9673
+ }
9683
9674
  }
9684
9675
 
9685
- .lbmoDvdtQO4-.Lc7Z0FsBa6w- .RSP7jHjP-mw- {
9686
- margin-left: 8px;
9687
- margin-left: var(--space-small);
9688
- }
9676
+ /* Small: reduce top margin between stacked buttons */
9689
9677
 
9690
- .lbmoDvdtQO4-.iF5IA1SYKoA- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
9678
+ .lbmoDvdtQO4- .RSP7jHjP-mw- + .RSP7jHjP-mw- {
9691
9679
  margin-left: 8px;
9692
9680
  margin-left: var(--space-small);
9693
9681
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components",
3
- "version": "6.105.5",
3
+ "version": "6.106.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
538
538
  "> 1%",
539
539
  "IE 10"
540
540
  ],
541
- "gitHead": "8e175ccfeb6b342a93804023828d3c0e35737b77"
541
+ "gitHead": "0343791f65e5c1080b89658c61eb456170da0866"
542
542
  }