@jobber/components 5.20.8-SCOTTTHd.45 → 5.20.8-SCOTTTHs-a30bcbb.35

package/dist/Menu/index.mjs

@@ -1,17 +1,17 @@
-export { M as Menu } from '../Menu-SxpmzPSN.js';
+export { M as Menu } from '../Menu-Bahhyk73.js';
 import 'react';
 import 'classnames';
 import 'framer-motion';
-import '../useOnKeyDown-CXrzyvS3.js';
-import '../useRefocusOnActivator-DHo9bEuK.js';
+import '../useOnKeyDown-CN4xcllA.js';
+import '../useRefocusOnActivator-pF1A-PEc.js';
 import 'react-popper';
-import '../useIsMounted-DIHcFr3m.js';
-import '../useSafeLayoutEffect-CU1PXH9Y.js';
+import '../useIsMounted-CgSxXL6-.js';
+import '../useSafeLayoutEffect-zh3ddhlC.js';
 import 'react-dom';
-import '../useFocusTrap-CQE7Ci6u.js';
-import '../Button-DjIsGUK9.js';
+import '../useFocusTrap-CtkRT0O5.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Icon-CTO4wvIZ.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Typography-DdPGuT7r.js';
-import '../useFormFieldFocus-sKGbcg5A.js';
+import '../Typography-DhGlhWcl.js';
+import '../useFormFieldFocus-ClQ0z2uo.js';

package/dist/{Menu-SxpmzPSN.js → Menu-Bahhyk73.js}

@@ -1,16 +1,16 @@
 import React, { useState, useRef, useId } from 'react';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-CXrzyvS3.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DHo9bEuK.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-CN4xcllA.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-pF1A-PEc.js';
 import { usePopper } from 'react-popper';
-import { u as useIsMounted_2 } from './useIsMounted-DIHcFr3m.js';
+import { u as useIsMounted_2 } from './useIsMounted-CgSxXL6-.js';
 import ReactDOM from 'react-dom';
-import { u as useFocusTrap_2 } from './useFocusTrap-CQE7Ci6u.js';
-import { B as Button } from './Button-DjIsGUK9.js';
-import { T as Typography } from './Typography-DdPGuT7r.js';
-import { I as Icon } from './Icon-CTO4wvIZ.js';
-import { f as formFieldFocusAttribute } from './useFormFieldFocus-sKGbcg5A.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CtkRT0O5.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { T as Typography } from './Typography-DhGlhWcl.js';
+import { I as Icon } from './Icon-BPJYIZWC.js';
+import { f as formFieldFocusAttribute } from './useFormFieldFocus-ClQ0z2uo.js';
 
 var useWindowDimensions$1 = {};
 
@@ -43,7 +43,7 @@ function useWindowDimensions() {
 }
 useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = useWindowDimensions;
 
-var styles = {"wrapper":"dT6M9tp1sZc-","popperContainer":"_9pvjsJS6vsg-","shadowRef":"G7Nzd9sctos-","menu":"Qmxlsj0D3qM-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","destructive":"swj5aEjo1Qo-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-","spinning":"EQ70eOFX848-"};
+var styles = {"wrapper":"fpi0W91w2ag-","popperContainer":"pyIy8jHif3g-","shadowRef":"_0KV3fxLr9xk-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
@@ -155,8 +155,9 @@ function Action({ label, sectionLabel, icon, destructive, onClick, }) {
         [styles.destructive]: destructive,
     });
     return (React.createElement("button", { role: "menuitem", type: "button", className: buttonClasses, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && (React.createElement(Icon, { color: destructive ? "destructive" : undefined, name: icon })),
-        React.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "textSecondary" },
+        icon && (React.createElement("div", null,
+            React.createElement(Icon, { color: destructive ? "destructive" : undefined, name: icon }))),
+        React.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "text" },
             sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));
 }

package/dist/{Menu-CZ9VOExg.js → Menu-CQ88gDhf.js}

@@ -3,16 +3,16 @@
 var React = require('react');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var useOnKeyDown = require('./useOnKeyDown-Tjm-_QHy.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BcTcbVPp.js');
+var useOnKeyDown = require('./useOnKeyDown-Dw5_7B0M.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
 var reactPopper = require('react-popper');
-var useIsMounted = require('./useIsMounted-DVmJiLR9.js');
+var useIsMounted = require('./useIsMounted-B2QNmIn3.js');
 var ReactDOM = require('react-dom');
-var useFocusTrap = require('./useFocusTrap-Cxo9Hm3n.js');
-var Button = require('./Button-DV8P6VM4.js');
-var Typography = require('./Typography-KvPMVZyR.js');
-var Icon = require('./Icon-wS5vpmx3.js');
-var useFormFieldFocus = require('./useFormFieldFocus-CUdV5BLE.js');
+var useFocusTrap = require('./useFocusTrap-BcAaMx_N.js');
+var Button = require('./Button-X03o-OsV.js');
+var Typography = require('./Typography-DYUPEo3A.js');
+var Icon = require('./Icon-DMURv2lZ.js');
+var useFormFieldFocus = require('./useFormFieldFocus-0wEDq1A1.js');
 
 var useWindowDimensions$1 = {};
 
@@ -45,7 +45,7 @@ function useWindowDimensions() {
 }
 useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = useWindowDimensions;
 
-var styles = {"wrapper":"dT6M9tp1sZc-","popperContainer":"_9pvjsJS6vsg-","shadowRef":"G7Nzd9sctos-","menu":"Qmxlsj0D3qM-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","destructive":"swj5aEjo1Qo-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-","spinning":"EQ70eOFX848-"};
+var styles = {"wrapper":"fpi0W91w2ag-","popperContainer":"pyIy8jHif3g-","shadowRef":"_0KV3fxLr9xk-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
@@ -157,8 +157,9 @@ function Action({ label, sectionLabel, icon, destructive, onClick, }) {
         [styles.destructive]: destructive,
     });
     return (React.createElement("button", { role: "menuitem", type: "button", className: buttonClasses, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && (React.createElement(Icon.Icon, { color: destructive ? "destructive" : undefined, name: icon })),
-        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: "textSecondary" },
+        icon && (React.createElement("div", null,
+            React.createElement(Icon.Icon, { color: destructive ? "destructive" : undefined, name: icon }))),
+        React.createElement(Typography.Typography, { element: "span", fontWeight: "semiBold", textColor: "text" },
             sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));
 }

package/dist/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import sizes from "./ModalSizes.css";
+import sizes from "./ModalSizes.module.css";
 import { ButtonProps } from "../Button";
 export interface ModalProps {
     /**

package/dist/Modal/index.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var Modal = require('../Modal-DvR9oHUH.js');
+var Modal = require('../Modal-CApsNRnT.js');
 require('react');
 require('react-dom');
 require('classnames');
 require('framer-motion');
-require('../useRefocusOnActivator-BcTcbVPp.js');
-require('../useOnKeyDown-Tjm-_QHy.js');
-require('../useFocusTrap-Cxo9Hm3n.js');
-require('../Heading-VSRbd386.js');
-require('../Typography-KvPMVZyR.js');
-require('../Button-DV8P6VM4.js');
+require('../useRefocusOnActivator-DWAxYZut.js');
+require('../useOnKeyDown-Dw5_7B0M.js');
+require('../useFocusTrap-BcAaMx_N.js');
+require('../Heading-DNVMkz9q.js');
+require('../Typography-DYUPEo3A.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../ButtonDismiss-B3THrLQF.js');
+require('../ButtonDismiss-DcTAOplu.js');
 
 
 

package/dist/Modal/index.mjs

@@ -1,15 +1,15 @@
-export { M as Modal } from '../Modal-DKB13_zR.js';
+export { M as Modal } from '../Modal-DIPue0ZO.js';
 import 'react';
 import 'react-dom';
 import 'classnames';
 import 'framer-motion';
-import '../useRefocusOnActivator-DHo9bEuK.js';
-import '../useOnKeyDown-CXrzyvS3.js';
-import '../useFocusTrap-CQE7Ci6u.js';
-import '../Heading-C9cMR5S0.js';
-import '../Typography-DdPGuT7r.js';
-import '../Button-DjIsGUK9.js';
+import '../useRefocusOnActivator-pF1A-PEc.js';
+import '../useOnKeyDown-CN4xcllA.js';
+import '../useFocusTrap-CtkRT0O5.js';
+import '../Heading-De8Cz0wk.js';
+import '../Typography-DhGlhWcl.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Icon-CTO4wvIZ.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../ButtonDismiss-57RsWXKG.js';
+import '../ButtonDismiss-DUIaPWcl.js';

package/dist/{Modal-DvR9oHUH.js → Modal-CApsNRnT.js}

@@ -4,16 +4,16 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BcTcbVPp.js');
-var useOnKeyDown = require('./useOnKeyDown-Tjm-_QHy.js');
-var useFocusTrap = require('./useFocusTrap-Cxo9Hm3n.js');
-var Heading = require('./Heading-VSRbd386.js');
-var Button = require('./Button-DV8P6VM4.js');
-var ButtonDismiss = require('./ButtonDismiss-B3THrLQF.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
+var useOnKeyDown = require('./useOnKeyDown-Dw5_7B0M.js');
+var useFocusTrap = require('./useFocusTrap-BcAaMx_N.js');
+var Heading = require('./Heading-DNVMkz9q.js');
+var Button = require('./Button-X03o-OsV.js');
+var ButtonDismiss = require('./ButtonDismiss-DcTAOplu.js');
 
-var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-","spinning":"Z6DhczqKJEY-"};
+var styles = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
 
-var sizes = {"small":"E1zzTkLldmM-","large":"CszpySDRb0o-","spinning":"anZOr8FePP4-"};
+var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
 
 function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames(styles.modal, size && sizes[size]);

package/dist/{Modal-DKB13_zR.js → Modal-DIPue0ZO.js}

@@ -2,16 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DHo9bEuK.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-CXrzyvS3.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-CQE7Ci6u.js';
-import { H as Heading } from './Heading-C9cMR5S0.js';
-import { B as Button } from './Button-DjIsGUK9.js';
-import { B as ButtonDismiss } from './ButtonDismiss-57RsWXKG.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-pF1A-PEc.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-CN4xcllA.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-CtkRT0O5.js';
+import { H as Heading } from './Heading-De8Cz0wk.js';
+import { B as Button } from './Button-B_S7hCDq.js';
+import { B as ButtonDismiss } from './ButtonDismiss-DUIaPWcl.js';
 
-var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-","spinning":"Z6DhczqKJEY-"};
+var styles = {"container":"y3M-9xoEnk0-","overlay":"zkyJp1mib-U-","modal":"gMPgiggaud8-","header":"_5sBzUnyOqD0-","closeButton":"_4gw63G7IYG0-","actionBar":"cwVJrrJkNDg-","leftAction":"MkD4pNUKeAA-","rightAction":"C-yC8JKpQLg-","spinning":"_7hYqr6OrfHs-"};
 
-var sizes = {"small":"E1zzTkLldmM-","large":"CszpySDRb0o-","spinning":"anZOr8FePP4-"};
+var sizes = {"small":"BSZvIAUzFEU-","large":"-ydIALYVvGg-","spinning":"_10FfgKITqY0-"};
 
 function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames(styles.modal, size && sizes[size]);

package/dist/MultiSelect/index.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
-var MultiSelect = require('../MultiSelect-wAIDQ0aE.js');
+var MultiSelect = require('../MultiSelect-C1GeW2MD.js');
 require('react');
 require('classnames');
-require('../Checkbox-BAKbyb-l.js');
-require('../tslib.es6-Bi0OHwyo.js');
+require('../Checkbox-3WI4brva.js');
+require('../tslib.es6-D1nA6hj6.js');
 require('react-hook-form');
-require('../Icon-wS5vpmx3.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../Text-BEqy0ojx.js');
-require('../Typography-KvPMVZyR.js');
+require('../Text-CJWvewR1.js');
+require('../Typography-DYUPEo3A.js');
 
 
 

package/dist/MultiSelect/index.mjs

@@ -1,10 +1,10 @@
-export { M as MultiSelect } from '../MultiSelect-tXXQ4gzA.js';
+export { M as MultiSelect } from '../MultiSelect-uC3fLa0i.js';
 import 'react';
 import 'classnames';
-import '../Checkbox-COIDJHmm.js';
-import '../tslib.es6-eq3zexCS.js';
+import '../Checkbox-BHKjoG1e.js';
+import '../tslib.es6-CeHUynox.js';
 import 'react-hook-form';
-import '../Icon-CTO4wvIZ.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Text-DLaIGPdO.js';
-import '../Typography-DdPGuT7r.js';
+import '../Text-DfqZm-hl.js';
+import '../Typography-DhGlhWcl.js';

package/dist/{MultiSelect-wAIDQ0aE.js → MultiSelect-C1GeW2MD.js}

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Checkbox = require('./Checkbox-BAKbyb-l.js');
-var Text = require('./Text-BEqy0ojx.js');
-var Icon = require('./Icon-wS5vpmx3.js');
+var Checkbox = require('./Checkbox-3WI4brva.js');
+var Text = require('./Text-CJWvewR1.js');
+var Icon = require('./Icon-DMURv2lZ.js');
 
-var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-","spinning":"At81rlzwqi4-"};
+var styles$1 = {"multiSelectContainer":"bR1N0mdMeZU-","multiSelect":"_7naerR7479Q-","active":"SpV9TqBIR60-","small":"TdyW0RCheH4-","large":"eBeKgF0JxEQ-","spinning":"_8V1-KUyfAmg-"};
 
-var styles = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-","spinning":"_2jhT4T0gmpE-"};
+var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","active":"NxmdtEQX0fQ-","spinning":"mFFvx9SQyZo-"};
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = React.useState(0);
@@ -97,7 +97,6 @@ function DropDownMenu({ options, setOptions }) {
     }
 }
 
-// eslint-disable-next-line max-statements
 function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, size, }) {
     const [label, setLabel] = React.useState(defaultLabel);
     const [menuVisible, setMenuVisible] = React.useState(false);

package/dist/{MultiSelect-tXXQ4gzA.js → MultiSelect-uC3fLa0i.js}

@@ -1,12 +1,12 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { C as Checkbox } from './Checkbox-COIDJHmm.js';
-import { T as Text } from './Text-DLaIGPdO.js';
-import { I as Icon } from './Icon-CTO4wvIZ.js';
+import { C as Checkbox } from './Checkbox-BHKjoG1e.js';
+import { T as Text } from './Text-DfqZm-hl.js';
+import { I as Icon } from './Icon-BPJYIZWC.js';
 
-var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-","spinning":"At81rlzwqi4-"};
+var styles$1 = {"multiSelectContainer":"bR1N0mdMeZU-","multiSelect":"_7naerR7479Q-","active":"SpV9TqBIR60-","small":"TdyW0RCheH4-","large":"eBeKgF0JxEQ-","spinning":"_8V1-KUyfAmg-"};
 
-var styles = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-","spinning":"_2jhT4T0gmpE-"};
+var styles = {"dropDownMenuContainer":"zossMHCpMPU-","option":"poS49c-LqiU-","active":"NxmdtEQX0fQ-","spinning":"mFFvx9SQyZo-"};
 
 function DropDownMenu({ options, setOptions }) {
     const [highlightedIndex, setHighlightedIndex] = useState(0);
@@ -95,7 +95,6 @@ function DropDownMenu({ options, setOptions }) {
     }
 }
 
-// eslint-disable-next-line max-statements
 function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, size, }) {
     const [label, setLabel] = useState(defaultLabel);
     const [menuVisible, setMenuVisible] = useState(false);

package/dist/{Option-DgNQL6hs.js → Option-CUvVnbIK.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var FormField = require('./FormField-Eiia0LI8.js');
+var FormField = require('./FormField-1MVxQMeP.js');
 
 function Select(props) {
     return React.createElement(FormField.FormField, Object.assign({ type: "select" }, props));

package/dist/{Option-n8g0g5G6.js → Option-_Eghqezi.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { F as FormField } from './FormField-D7e_zEry.js';
+import { F as FormField } from './FormField-vy2Hd8hQ.js';
 
 function Select(props) {
     return React.createElement(FormField, Object.assign({ type: "select" }, props));

package/dist/Page/Page.d.ts

@@ -1,7 +1,10 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { XOR } from "ts-xor";
 import { ButtonProps } from "../Button";
 import { SectionProps } from "../Menu";
+export type ButtonActionProps = ButtonProps & {
+    ref?: React.RefObject<HTMLDivElement>;
+};
 interface PageFoundationProps {
     readonly children: ReactNode | ReactNode[];
     /**
@@ -32,12 +35,12 @@ interface PageFoundationProps {
     /**
      * Page title primary action button settings.
      */
-    readonly primaryAction?: ButtonProps;
+    readonly primaryAction?: ButtonActionProps;
     /**
      * Page title secondary action button settings.
      *   Only shown if there is a primaryAction.
      */
-    readonly secondaryAction?: ButtonProps;
+    readonly secondaryAction?: ButtonActionProps;
     /**
      * Page title Action menu.
      */
@@ -61,4 +64,5 @@ interface PageWithIntroProps extends PageFoundationProps {
 }
 export type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
 export declare function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): JSX.Element;
+export declare const getActionProps: (actionProps: ButtonActionProps) => ButtonProps;
 export {};

package/dist/Page/index.cjs

@@ -1,36 +1,36 @@
 'use strict';
 
-var Page = require('../Page-B7QxrQwe.js');
+var Page = require('../Page-DMckaIKn.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-D5xC3eGa.js');
-require('../_commonjsHelpers-B0rrMtP0.js');
-require('../throttle-DO6TCUuD.js');
-require('../debounce-Cng32dig.js');
-require('../isObjectLike-BL6msSB5.js');
-require('../isSymbol-CZBlB78R.js');
-require('../Heading-VSRbd386.js');
-require('../Typography-KvPMVZyR.js');
-require('../Text-BEqy0ojx.js');
-require('../Content-CaBYhgC3.js');
-require('../Markdown-CZ37pUwO.js');
-require('../Emphasis-BBIyVU0U.js');
-require('../index-CrZ7pTC-.js');
-require('../_polyfill-node.process-1MMgPD6v.js');
-require('../Button-DV8P6VM4.js');
+require('../useResizeObserver-BFycM9aW.js');
+require('../_commonjsHelpers-DM5kGkm_.js');
+require('../throttle-BFHQHnGo.js');
+require('../debounce-BN5llZ7Y.js');
+require('../isObjectLike-D54Sylr4.js');
+require('../isSymbol-onvgp5ug.js');
+require('../Heading-DNVMkz9q.js');
+require('../Typography-DYUPEo3A.js');
+require('../Text-CJWvewR1.js');
+require('../Content-Bvcrqi5z.js');
+require('../Markdown-q4KytAGw.js');
+require('../Emphasis-S49l0Kwc.js');
+require('../index-C36nFO6W.js');
+require('../_polyfill-node.process-DUypQ5CD.js');
+require('../Button-X03o-OsV.js');
 require('react-router-dom');
-require('../Icon-wS5vpmx3.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../Menu-CZ9VOExg.js');
+require('../Menu-CQ88gDhf.js');
 require('framer-motion');
-require('../useOnKeyDown-Tjm-_QHy.js');
-require('../useRefocusOnActivator-BcTcbVPp.js');
+require('../useOnKeyDown-Dw5_7B0M.js');
+require('../useRefocusOnActivator-DWAxYZut.js');
 require('react-popper');
-require('../useIsMounted-DVmJiLR9.js');
-require('../useSafeLayoutEffect-BgvvHbyP.js');
+require('../useIsMounted-B2QNmIn3.js');
+require('../useSafeLayoutEffect-BJHtGge9.js');
 require('react-dom');
-require('../useFocusTrap-Cxo9Hm3n.js');
-require('../useFormFieldFocus-CUdV5BLE.js');
+require('../useFocusTrap-BcAaMx_N.js');
+require('../useFormFieldFocus-0wEDq1A1.js');
 
 
 

package/dist/Page/index.mjs

@@ -1,31 +1,31 @@
-export { P as Page } from '../Page-BkfoOPCN.js';
+export { P as Page } from '../Page-HF7E43fM.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-BwWFM8ke.js';
-import '../_commonjsHelpers-BKFyl1YN.js';
-import '../throttle-BOoeq4sQ.js';
-import '../debounce-DFMQASje.js';
-import '../isObjectLike-DULN_z8K.js';
-import '../isSymbol-CJTiCj4j.js';
-import '../Heading-C9cMR5S0.js';
-import '../Typography-DdPGuT7r.js';
-import '../Text-DLaIGPdO.js';
-import '../Content-CEpXEhkM.js';
-import '../Markdown-BgejP_tO.js';
-import '../Emphasis-CkBQRq7-.js';
-import '../index-61fwtDnb.js';
-import '../_polyfill-node.process-M68YAIX4.js';
-import '../Button-DjIsGUK9.js';
+import '../useResizeObserver-DDopVH1n.js';
+import '../_commonjsHelpers-BgTBIXLr.js';
+import '../throttle-Chp_VbrK.js';
+import '../debounce-BFEgsSNV.js';
+import '../isObjectLike-C73xmKqw.js';
+import '../isSymbol-lWxnii5_.js';
+import '../Heading-De8Cz0wk.js';
+import '../Typography-DhGlhWcl.js';
+import '../Text-DfqZm-hl.js';
+import '../Content-CZscRWg1.js';
+import '../Markdown-D1xb-Cwj.js';
+import '../Emphasis-CG2lsbZH.js';
+import '../index-BEcecQeg.js';
+import '../_polyfill-node.process-BFFOZcuv.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Icon-CTO4wvIZ.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Menu-SxpmzPSN.js';
+import '../Menu-Bahhyk73.js';
 import 'framer-motion';
-import '../useOnKeyDown-CXrzyvS3.js';
-import '../useRefocusOnActivator-DHo9bEuK.js';
+import '../useOnKeyDown-CN4xcllA.js';
+import '../useRefocusOnActivator-pF1A-PEc.js';
 import 'react-popper';
-import '../useIsMounted-DIHcFr3m.js';
-import '../useSafeLayoutEffect-CU1PXH9Y.js';
+import '../useIsMounted-CgSxXL6-.js';
+import '../useSafeLayoutEffect-zh3ddhlC.js';
 import 'react-dom';
-import '../useFocusTrap-CQE7Ci6u.js';
-import '../useFormFieldFocus-sKGbcg5A.js';
+import '../useFocusTrap-CtkRT0O5.js';
+import '../useFormFieldFocus-ClQ0z2uo.js';

package/dist/{Page-B7QxrQwe.js → Page-DMckaIKn.js}

@@ -2,18 +2,17 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-D5xC3eGa.js');
-var Heading = require('./Heading-VSRbd386.js');
-var Text = require('./Text-BEqy0ojx.js');
-var Content = require('./Content-CaBYhgC3.js');
-var Markdown = require('./Markdown-CZ37pUwO.js');
-var Button = require('./Button-DV8P6VM4.js');
-var Menu = require('./Menu-CZ9VOExg.js');
-var Emphasis = require('./Emphasis-BBIyVU0U.js');
+var useResizeObserver = require('./useResizeObserver-BFycM9aW.js');
+var Heading = require('./Heading-DNVMkz9q.js');
+var Text = require('./Text-CJWvewR1.js');
+var Content = require('./Content-Bvcrqi5z.js');
+var Markdown = require('./Markdown-q4KytAGw.js');
+var Button = require('./Button-X03o-OsV.js');
+var Menu = require('./Menu-CQ88gDhf.js');
+var Emphasis = require('./Emphasis-S49l0Kwc.js');
 
-var styles = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","titleRow":"Rwavr8hZaCg-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-","spinning":"BQdr3QpQUW8-"};
+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-"};
 
-// eslint-disable-next-line max-statements
 function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
     const pageStyles = classnames(styles.page, styles[width]);
     const [titleBarRef, { width: titleBarWidth = useResizeObserver.useResizeObserver.Breakpoints.large }] = useResizeObserver.useResizeObserver.useResizeObserver();
@@ -46,15 +45,21 @@ function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, child
                                 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 },
-                            React.createElement(Button.Button, Object.assign({}, primaryAction)))),
-                        secondaryAction && (React.createElement("div", { className: styles.actionButton },
-                            React.createElement(Button.Button, Object.assign({}, secondaryAction)))),
+                        primaryAction && (React.createElement("div", { className: styles.primaryAction, ref: primaryAction.ref },
+                            React.createElement(Button.Button, Object.assign({}, getActionProps(primaryAction))))),
+                        secondaryAction && (React.createElement("div", { className: styles.actionButton, ref: secondaryAction.ref },
+                            React.createElement(Button.Button, Object.assign({}, getActionProps(secondaryAction))))),
                         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))));
 }
+const getActionProps = (actionProps) => {
+    const buttonProps = Object.assign({}, actionProps);
+    if (actionProps.ref)
+        delete buttonProps.ref;
+    return buttonProps;
+};
 
 exports.Page = Page;