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

package/dist/Menu/index.mjs

@@ -1,17 +1,17 @@
-export { M as Menu } from '../Menu-dsoYqxg3.js';
+export { M as Menu } from '../Menu-Bahhyk73.js';
 import 'react';
 import 'classnames';
 import 'framer-motion';
-import '../useOnKeyDown-CP-ZHBUl.js';
-import '../useRefocusOnActivator-DRpjaqxT.js';
+import '../useOnKeyDown-CN4xcllA.js';
+import '../useRefocusOnActivator-pF1A-PEc.js';
 import 'react-popper';
-import '../useIsMounted-BAI_EWrW.js';
-import '../useSafeLayoutEffect-BYpr1gmT.js';
+import '../useIsMounted-CgSxXL6-.js';
+import '../useSafeLayoutEffect-zh3ddhlC.js';
 import 'react-dom';
-import '../useFocusTrap-Bq1x_TCr.js';
-import '../Button-DNnlnxie.js';
+import '../useFocusTrap-CtkRT0O5.js';
+import '../Button-B_S7hCDq.js';
 import 'react-router-dom';
-import '../Icon-BkEAR5t9.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Typography-Dfc5QcyD.js';
-import '../useFormFieldFocus-CVSFNsqx.js';
+import '../Typography-DhGlhWcl.js';
+import '../useFormFieldFocus-ClQ0z2uo.js';

package/dist/{Menu-dsoYqxg3.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-CP-ZHBUl.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DRpjaqxT.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-BAI_EWrW.js';
+import { u as useIsMounted_2 } from './useIsMounted-CgSxXL6-.js';
 import ReactDOM from 'react-dom';
-import { u as useFocusTrap_2 } from './useFocusTrap-Bq1x_TCr.js';
-import { B as Button } from './Button-DNnlnxie.js';
-import { T as Typography } from './Typography-Dfc5QcyD.js';
-import { I as Icon } from './Icon-BkEAR5t9.js';
-import { f as formFieldFocusAttribute } from './useFormFieldFocus-CVSFNsqx.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-C7xhrPRY.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-BWr1Uh0c.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-BFTtukDp.js');
+var useOnKeyDown = require('./useOnKeyDown-Dw5_7B0M.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DWAxYZut.js');
 var reactPopper = require('react-popper');
-var useIsMounted = require('./useIsMounted-BcLpfdxY.js');
+var useIsMounted = require('./useIsMounted-B2QNmIn3.js');
 var ReactDOM = require('react-dom');
-var useFocusTrap = require('./useFocusTrap-Dk-GuYjG.js');
-var Button = require('./Button-BJQ6Ejjr.js');
-var Typography = require('./Typography-BbeLF-cH.js');
-var Icon = require('./Icon-COz3twBh.js');
-var useFormFieldFocus = require('./useFormFieldFocus-DZ9HMBGq.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-DGdV6TPd.js');
+var Modal = require('../Modal-CApsNRnT.js');
 require('react');
 require('react-dom');
 require('classnames');
 require('framer-motion');
-require('../useRefocusOnActivator-BFTtukDp.js');
-require('../useOnKeyDown-BWr1Uh0c.js');
-require('../useFocusTrap-Dk-GuYjG.js');
-require('../Heading-B5N5rCZp.js');
-require('../Typography-BbeLF-cH.js');
-require('../Button-BJQ6Ejjr.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-COz3twBh.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../ButtonDismiss-CrVS9qvM.js');
+require('../ButtonDismiss-DcTAOplu.js');
 
 
 

package/dist/Modal/index.mjs

@@ -1,15 +1,15 @@
-export { M as Modal } from '../Modal-BdOL4GUK.js';
+export { M as Modal } from '../Modal-DIPue0ZO.js';
 import 'react';
 import 'react-dom';
 import 'classnames';
 import 'framer-motion';
-import '../useRefocusOnActivator-DRpjaqxT.js';
-import '../useOnKeyDown-CP-ZHBUl.js';
-import '../useFocusTrap-Bq1x_TCr.js';
-import '../Heading-rMLWU5QQ.js';
-import '../Typography-Dfc5QcyD.js';
-import '../Button-DNnlnxie.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-BkEAR5t9.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../ButtonDismiss-BDk_IQwR.js';
+import '../ButtonDismiss-DUIaPWcl.js';

package/dist/{Modal-DGdV6TPd.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-BFTtukDp.js');
-var useOnKeyDown = require('./useOnKeyDown-BWr1Uh0c.js');
-var useFocusTrap = require('./useFocusTrap-Dk-GuYjG.js');
-var Heading = require('./Heading-B5N5rCZp.js');
-var Button = require('./Button-BJQ6Ejjr.js');
-var ButtonDismiss = require('./ButtonDismiss-CrVS9qvM.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-BdOL4GUK.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-DRpjaqxT.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-CP-ZHBUl.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-Bq1x_TCr.js';
-import { H as Heading } from './Heading-rMLWU5QQ.js';
-import { B as Button } from './Button-DNnlnxie.js';
-import { B as ButtonDismiss } from './ButtonDismiss-BDk_IQwR.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-C3jU-ADd.js');
+var MultiSelect = require('../MultiSelect-C1GeW2MD.js');
 require('react');
 require('classnames');
-require('../Checkbox-CSwkd8kN.js');
-require('../tslib.es6-BLv7qR2d.js');
+require('../Checkbox-3WI4brva.js');
+require('../tslib.es6-D1nA6hj6.js');
 require('react-hook-form');
-require('../Icon-COz3twBh.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../Text-B9SvNYhV.js');
-require('../Typography-BbeLF-cH.js');
+require('../Text-CJWvewR1.js');
+require('../Typography-DYUPEo3A.js');
 
 
 

package/dist/MultiSelect/index.mjs

@@ -1,10 +1,10 @@
-export { M as MultiSelect } from '../MultiSelect-DzEX6m39.js';
+export { M as MultiSelect } from '../MultiSelect-uC3fLa0i.js';
 import 'react';
 import 'classnames';
-import '../Checkbox-Du3UpGHa.js';
-import '../tslib.es6-DPdENH3v.js';
+import '../Checkbox-BHKjoG1e.js';
+import '../tslib.es6-CeHUynox.js';
 import 'react-hook-form';
-import '../Icon-BkEAR5t9.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Text-CBZYvoLZ.js';
-import '../Typography-Dfc5QcyD.js';
+import '../Text-DfqZm-hl.js';
+import '../Typography-DhGlhWcl.js';

package/dist/{MultiSelect-C3jU-ADd.js → MultiSelect-C1GeW2MD.js}

@@ -2,13 +2,13 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Checkbox = require('./Checkbox-CSwkd8kN.js');
-var Text = require('./Text-B9SvNYhV.js');
-var Icon = require('./Icon-COz3twBh.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-DzEX6m39.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-Du3UpGHa.js';
-import { T as Text } from './Text-CBZYvoLZ.js';
-import { I as Icon } from './Icon-BkEAR5t9.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-D7Iox5dO.js → Option-CUvVnbIK.js}

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

package/dist/{Option-CAK-2KOO.js → Option-_Eghqezi.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { F as FormField } from './FormField-Dw60Yuaw.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-hPRZma5e.js');
+var Page = require('../Page-DMckaIKn.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-CDlThO1I.js');
-require('../_commonjsHelpers-Ci46CUxA.js');
-require('../throttle-BiQ8DT9m.js');
-require('../debounce-BgaJlkp5.js');
-require('../isObjectLike-BM-uYAmX.js');
-require('../isSymbol-BxXQq1A2.js');
-require('../Heading-B5N5rCZp.js');
-require('../Typography-BbeLF-cH.js');
-require('../Text-B9SvNYhV.js');
-require('../Content-CWPwg3vC.js');
-require('../Markdown-BeMoNwWk.js');
-require('../Emphasis-DoxS7S30.js');
-require('../index-C76JIj31.js');
-require('../_polyfill-node.process-CPLFG6go.js');
-require('../Button-BJQ6Ejjr.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-COz3twBh.js');
+require('../Icon-DMURv2lZ.js');
 require('@jobber/design');
-require('../Menu-C7xhrPRY.js');
+require('../Menu-CQ88gDhf.js');
 require('framer-motion');
-require('../useOnKeyDown-BWr1Uh0c.js');
-require('../useRefocusOnActivator-BFTtukDp.js');
+require('../useOnKeyDown-Dw5_7B0M.js');
+require('../useRefocusOnActivator-DWAxYZut.js');
 require('react-popper');
-require('../useIsMounted-BcLpfdxY.js');
-require('../useSafeLayoutEffect-B2rzYFeG.js');
+require('../useIsMounted-B2QNmIn3.js');
+require('../useSafeLayoutEffect-BJHtGge9.js');
 require('react-dom');
-require('../useFocusTrap-Dk-GuYjG.js');
-require('../useFormFieldFocus-DZ9HMBGq.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-Ct2G9IzE.js';
+export { P as Page } from '../Page-HF7E43fM.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-BaRlQkGU.js';
-import '../_commonjsHelpers-qhLoVmu9.js';
-import '../throttle-B2QG4QCa.js';
-import '../debounce-cjF9b-E5.js';
-import '../isObjectLike-DKzW5wff.js';
-import '../isSymbol-BJl8Rtn2.js';
-import '../Heading-rMLWU5QQ.js';
-import '../Typography-Dfc5QcyD.js';
-import '../Text-CBZYvoLZ.js';
-import '../Content-CzuStjZy.js';
-import '../Markdown-D74vcFM4.js';
-import '../Emphasis-BYo0U-bF.js';
-import '../index-DP6F9DkH.js';
-import '../_polyfill-node.process-DGZnL0el.js';
-import '../Button-DNnlnxie.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-BkEAR5t9.js';
+import '../Icon-BPJYIZWC.js';
 import '@jobber/design';
-import '../Menu-dsoYqxg3.js';
+import '../Menu-Bahhyk73.js';
 import 'framer-motion';
-import '../useOnKeyDown-CP-ZHBUl.js';
-import '../useRefocusOnActivator-DRpjaqxT.js';
+import '../useOnKeyDown-CN4xcllA.js';
+import '../useRefocusOnActivator-pF1A-PEc.js';
 import 'react-popper';
-import '../useIsMounted-BAI_EWrW.js';
-import '../useSafeLayoutEffect-BYpr1gmT.js';
+import '../useIsMounted-CgSxXL6-.js';
+import '../useSafeLayoutEffect-zh3ddhlC.js';
 import 'react-dom';
-import '../useFocusTrap-Bq1x_TCr.js';
-import '../useFormFieldFocus-CVSFNsqx.js';
+import '../useFocusTrap-CtkRT0O5.js';
+import '../useFormFieldFocus-ClQ0z2uo.js';

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

@@ -2,18 +2,17 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-CDlThO1I.js');
-var Heading = require('./Heading-B5N5rCZp.js');
-var Text = require('./Text-B9SvNYhV.js');
-var Content = require('./Content-CWPwg3vC.js');
-var Markdown = require('./Markdown-BeMoNwWk.js');
-var Button = require('./Button-BJQ6Ejjr.js');
-var Menu = require('./Menu-C7xhrPRY.js');
-var Emphasis = require('./Emphasis-DoxS7S30.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;