@jobber/components 5.15.2-fix-input-.0 → 5.15.2-fix-input-.1

package/dist/{Markdown-BQUAGfMM.js → Markdown-Dz55-GFx.js}

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-var Text = require('./Text-a_zqIIN9.js');
-var Emphasis = require('./Emphasis-BmoSrzRs.js');
-var Heading = require('./Heading-DXeeqrC_.js');
-var Content = require('./Content-DyggamUZ.js');
-var index$3 = require('./index-DdhkSmM4.js');
-var _commonjsHelpers = require('./_commonjsHelpers-Bx4SHQ_D.js');
-var _polyfillNode_process = require('./_polyfill-node.process-DeqyYqiM.js');
+var Text = require('./Text-BjZcutrM.js');
+var Emphasis = require('./Emphasis-DqITOLJQ.js');
+var Heading = require('./Heading-BWTS0UD8.js');
+var Content = require('./Content-D0Dnz9Rk.js');
+var index$3 = require('./index-DCbqOnRE.js');
+var _commonjsHelpers = require('./_commonjsHelpers-KWPN9RM-.js');
+var _polyfillNode_process = require('./_polyfill-node.process-CS-f4TbU.js');
 
 const protocols = ['http', 'https', 'mailto', 'tel'];
 

package/dist/{Markdown-C9NIE7v2.js → Markdown-FHtyTe_1.js}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { T as Text } from './Text-CEMqEWry.js';
-import { E as Emphasis } from './Emphasis-CbdHOPtQ.js';
-import { H as Heading } from './Heading-Dx_zvABK.js';
-import { C as Content } from './Content-y5ws5cSy.js';
-import { P as PropTypes } from './index-DOVgHGhr.js';
-import { g as getDefaultExportFromCjs } from './_commonjsHelpers-BKuahENp.js';
-import { b as browser$1 } from './_polyfill-node.process-Da0Yqo_a.js';
+import { T as Text } from './Text-BWu90K4v.js';
+import { E as Emphasis } from './Emphasis-Bsf5_rJz.js';
+import { H as Heading } from './Heading-CjC0WuEP.js';
+import { C as Content } from './Content-CTwMXrYI.js';
+import { P as PropTypes } from './index-BbJ3eeRf.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-kmZfvu5v.js';
+import { b as browser$1 } from './_polyfill-node.process-BLBPD9oh.js';
 
 const protocols = ['http', 'https', 'mailto', 'tel'];
 

package/dist/Menu/Menu.d.ts

@@ -34,6 +34,10 @@ export interface ActionProps {
      * Visual cue for the action label
      */
     readonly icon?: IconNames;
+    /**
+     * Visual style for the action button
+     */
+    readonly destructive?: boolean;
     /**
      * Callback when an action gets clicked
      */

package/dist/Menu/index.cjs

@@ -1,22 +1,22 @@
 'use strict';
 
-var Menu = require('../Menu-DaHi-SiK.js');
+var Menu = require('../Menu-CYsc0SVT.js');
 require('react');
 require('classnames');
 require('framer-motion');
-require('../useOnKeyDown-BYbbkcsk.js');
-require('../useRefocusOnActivator-C9jfATva.js');
+require('../useOnKeyDown-G0iiu1jH.js');
+require('../useRefocusOnActivator-DCMK9jC1.js');
 require('react-popper');
-require('../useIsMounted-CB-IhYQT.js');
-require('../useSafeLayoutEffect-1-9u_7FR.js');
+require('../useIsMounted-BPcnOr_9.js');
+require('../useSafeLayoutEffect-ChtYX5Wl.js');
 require('react-dom');
-require('../useFocusTrap-n4j6eyXP.js');
-require('../Button-C1LiBrTR.js');
+require('../useFocusTrap-utLqKMpK.js');
+require('../Button-mmk-2Vu6.js');
 require('react-router-dom');
-require('../Icon-CSGLgk85.js');
+require('../Icon-BtU-wg5K.js');
 require('@jobber/design');
-require('../Typography-CiVsswcS.js');
-require('../useFormFieldFocus-CsZlDAhq.js');
+require('../Typography-BD7qrCaS.js');
+require('../useFormFieldFocus-BnZc-yIt.js');
 
 
 

package/dist/Menu/index.mjs

@@ -1,17 +1,17 @@
-export { M as Menu } from '../Menu-oEF1TuVE.js';
+export { M as Menu } from '../Menu-ChW1H6pH.js';
 import 'react';
 import 'classnames';
 import 'framer-motion';
-import '../useOnKeyDown-BN-F3VgW.js';
-import '../useRefocusOnActivator-CFT2Bp7b.js';
+import '../useOnKeyDown-DWx7sMlM.js';
+import '../useRefocusOnActivator-CLCDw3f0.js';
 import 'react-popper';
-import '../useIsMounted-yjKfYsRV.js';
-import '../useSafeLayoutEffect-DcN-0oKV.js';
+import '../useIsMounted-Dpr67DHO.js';
+import '../useSafeLayoutEffect-CbhRL_RA.js';
 import 'react-dom';
-import '../useFocusTrap-BpPM4wqW.js';
-import '../Button-C0mVjCcE.js';
+import '../useFocusTrap-D_JYeF_C.js';
+import '../Button-CrF27_3V.js';
 import 'react-router-dom';
-import '../Icon-PQT92gxC.js';
+import '../Icon-DCjQNyg7.js';
 import '@jobber/design';
-import '../Typography-DIMCVCvt.js';
-import '../useFormFieldFocus-Bx9IXlkw.js';
+import '../Typography-aKemJWma.js';
+import '../useFormFieldFocus-BgBYN1_J.js';

package/dist/{Menu-DaHi-SiK.js → Menu-CYsc0SVT.js}

@@ -3,16 +3,16 @@
 var React = require('react');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var useOnKeyDown = require('./useOnKeyDown-BYbbkcsk.js');
-var useRefocusOnActivator = require('./useRefocusOnActivator-C9jfATva.js');
+var useOnKeyDown = require('./useOnKeyDown-G0iiu1jH.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DCMK9jC1.js');
 var reactPopper = require('react-popper');
-var useIsMounted = require('./useIsMounted-CB-IhYQT.js');
+var useIsMounted = require('./useIsMounted-BPcnOr_9.js');
 var ReactDOM = require('react-dom');
-var useFocusTrap = require('./useFocusTrap-n4j6eyXP.js');
-var Button = require('./Button-C1LiBrTR.js');
-var Typography = require('./Typography-CiVsswcS.js');
-var Icon = require('./Icon-CSGLgk85.js');
-var useFormFieldFocus = require('./useFormFieldFocus-CsZlDAhq.js');
+var useFocusTrap = require('./useFocusTrap-utLqKMpK.js');
+var Button = require('./Button-mmk-2Vu6.js');
+var Typography = require('./Typography-BD7qrCaS.js');
+var Icon = require('./Icon-BtU-wg5K.js');
+var useFormFieldFocus = require('./useFormFieldFocus-BnZc-yIt.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-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
+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-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
@@ -151,10 +151,13 @@ function SectionHeader({ text }) {
     return (React.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
         React.createElement(Typography.Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
 }
-function Action({ label, sectionLabel, icon, onClick }) {
+function Action({ label, sectionLabel, icon, destructive, onClick, }) {
     const actionButtonRef = React.useRef();
-    return (React.createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && React.createElement(Icon.Icon, { name: icon }),
+    const buttonClasses = classnames(styles.action, {
+        [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" },
             sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));

package/dist/{Menu-oEF1TuVE.js → Menu-ChW1H6pH.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-BN-F3VgW.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-CFT2Bp7b.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-DWx7sMlM.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-CLCDw3f0.js';
 import { usePopper } from 'react-popper';
-import { u as useIsMounted_2 } from './useIsMounted-yjKfYsRV.js';
+import { u as useIsMounted_2 } from './useIsMounted-Dpr67DHO.js';
 import ReactDOM from 'react-dom';
-import { u as useFocusTrap_2 } from './useFocusTrap-BpPM4wqW.js';
-import { B as Button } from './Button-C0mVjCcE.js';
-import { T as Typography } from './Typography-DIMCVCvt.js';
-import { I as Icon } from './Icon-PQT92gxC.js';
-import { f as formFieldFocusAttribute } from './useFormFieldFocus-Bx9IXlkw.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-D_JYeF_C.js';
+import { B as Button } from './Button-CrF27_3V.js';
+import { T as Typography } from './Typography-aKemJWma.js';
+import { I as Icon } from './Icon-DCjQNyg7.js';
+import { f as formFieldFocusAttribute } from './useFormFieldFocus-BgBYN1_J.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-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
+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-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
@@ -149,10 +149,13 @@ function SectionHeader({ text }) {
     return (React.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
         React.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
 }
-function Action({ label, sectionLabel, icon, onClick }) {
+function Action({ label, sectionLabel, icon, destructive, onClick, }) {
     const actionButtonRef = useRef();
-    return (React.createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && React.createElement(Icon, { name: icon }),
+    const buttonClasses = classnames(styles.action, {
+        [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" },
             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 "./Sizes.css";
+import sizes from "./ModalSizes.css";
 import { ButtonProps } from "../Button";
 export interface ModalProps {
     /**

package/dist/Modal/index.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
-var Modal = require('../Modal-tGtsIHWm.js');
+var Modal = require('../Modal-CgoM7_Fv.js');
 require('react');
 require('react-dom');
 require('classnames');
 require('framer-motion');
-require('../useRefocusOnActivator-C9jfATva.js');
-require('../useOnKeyDown-BYbbkcsk.js');
-require('../useFocusTrap-n4j6eyXP.js');
-require('../Heading-DXeeqrC_.js');
-require('../Typography-CiVsswcS.js');
-require('../Button-C1LiBrTR.js');
+require('../useRefocusOnActivator-DCMK9jC1.js');
+require('../useOnKeyDown-G0iiu1jH.js');
+require('../useFocusTrap-utLqKMpK.js');
+require('../Heading-BWTS0UD8.js');
+require('../Typography-BD7qrCaS.js');
+require('../Button-mmk-2Vu6.js');
 require('react-router-dom');
-require('../Icon-CSGLgk85.js');
+require('../Icon-BtU-wg5K.js');
 require('@jobber/design');
-require('../ButtonDismiss-Cz4JT6r2.js');
+require('../ButtonDismiss-C4RcCEwm.js');
 
 
 

package/dist/Modal/index.mjs

@@ -1,15 +1,15 @@
-export { M as Modal } from '../Modal-Ba17BxU8.js';
+export { M as Modal } from '../Modal-QnS_j0KT.js';
 import 'react';
 import 'react-dom';
 import 'classnames';
 import 'framer-motion';
-import '../useRefocusOnActivator-CFT2Bp7b.js';
-import '../useOnKeyDown-BN-F3VgW.js';
-import '../useFocusTrap-BpPM4wqW.js';
-import '../Heading-Dx_zvABK.js';
-import '../Typography-DIMCVCvt.js';
-import '../Button-C0mVjCcE.js';
+import '../useRefocusOnActivator-CLCDw3f0.js';
+import '../useOnKeyDown-DWx7sMlM.js';
+import '../useFocusTrap-D_JYeF_C.js';
+import '../Heading-CjC0WuEP.js';
+import '../Typography-aKemJWma.js';
+import '../Button-CrF27_3V.js';
 import 'react-router-dom';
-import '../Icon-PQT92gxC.js';
+import '../Icon-DCjQNyg7.js';
 import '@jobber/design';
-import '../ButtonDismiss-FcbQV8t8.js';
+import '../ButtonDismiss-y_5OEnRo.js';

package/dist/{Modal-tGtsIHWm.js → Modal-CgoM7_Fv.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-C9jfATva.js');
-var useOnKeyDown = require('./useOnKeyDown-BYbbkcsk.js');
-var useFocusTrap = require('./useFocusTrap-n4j6eyXP.js');
-var Heading = require('./Heading-DXeeqrC_.js');
-var Button = require('./Button-C1LiBrTR.js');
-var ButtonDismiss = require('./ButtonDismiss-Cz4JT6r2.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-DCMK9jC1.js');
+var useOnKeyDown = require('./useOnKeyDown-G0iiu1jH.js');
+var useFocusTrap = require('./useFocusTrap-utLqKMpK.js');
+var Heading = require('./Heading-BWTS0UD8.js');
+var Button = require('./Button-mmk-2Vu6.js');
+var ButtonDismiss = require('./ButtonDismiss-C4RcCEwm.js');
 
 var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
 
-var sizes = {"small":"_65IpUjOZiBg-","large":"Cpwnmw65caA-"};
+var sizes = {"small":"E1zzTkLldmM-","large":"CszpySDRb0o-"};
 
 function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
     const modalClassName = classnames(styles.modal, size && sizes[size]);

package/dist/{Modal-Ba17BxU8.js → Modal-QnS_j0KT.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-CFT2Bp7b.js';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-BN-F3VgW.js';
-import { u as useFocusTrap_2 } from './useFocusTrap-BpPM4wqW.js';
-import { H as Heading } from './Heading-Dx_zvABK.js';
-import { B as Button } from './Button-C0mVjCcE.js';
-import { B as ButtonDismiss } from './ButtonDismiss-FcbQV8t8.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-CLCDw3f0.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-DWx7sMlM.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-D_JYeF_C.js';
+import { H as Heading } from './Heading-CjC0WuEP.js';
+import { B as Button } from './Button-CrF27_3V.js';
+import { B as ButtonDismiss } from './ButtonDismiss-y_5OEnRo.js';
 
 var styles = {"container":"QGRLFHPoV5E-","overlay":"_4WzGOMUGj5I-","modal":"WLId2NJBQcQ-","header":"wjrPpIUNNrk-","closeButton":"rKvigUnOyYE-","actionBar":"_62c8HLZFwvs-","leftAction":"Xl1Ptn-P9Ew-","rightAction":"p2s7GtpoZz0-"};
 
-var sizes = {"small":"_65IpUjOZiBg-","large":"Cpwnmw65caA-"};
+var sizes = {"small":"E1zzTkLldmM-","large":"CszpySDRb0o-"};
 
 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-P-fLpT_8.js');
+var MultiSelect = require('../MultiSelect-DiXtiFiN.js');
 require('react');
 require('classnames');
-require('../Checkbox-8JG00hOC.js');
-require('../tslib.es6-DppZ7bsJ.js');
+require('../Checkbox-CfumcDbq.js');
+require('../tslib.es6-B4XD2NIo.js');
 require('react-hook-form');
-require('../Icon-CSGLgk85.js');
+require('../Icon-BtU-wg5K.js');
 require('@jobber/design');
-require('../Text-a_zqIIN9.js');
-require('../Typography-CiVsswcS.js');
+require('../Text-BjZcutrM.js');
+require('../Typography-BD7qrCaS.js');
 
 
 

package/dist/MultiSelect/index.mjs

@@ -1,10 +1,10 @@
-export { M as MultiSelect } from '../MultiSelect-CDCig1UA.js';
+export { M as MultiSelect } from '../MultiSelect-iHQiaNiP.js';
 import 'react';
 import 'classnames';
-import '../Checkbox-Vt2JmL6d.js';
-import '../tslib.es6-DRGKoNsn.js';
+import '../Checkbox-DuZx2fms.js';
+import '../tslib.es6-C6H-pUSl.js';
 import 'react-hook-form';
-import '../Icon-PQT92gxC.js';
+import '../Icon-DCjQNyg7.js';
 import '@jobber/design';
-import '../Text-CEMqEWry.js';
-import '../Typography-DIMCVCvt.js';
+import '../Text-BWu90K4v.js';
+import '../Typography-aKemJWma.js';

package/dist/{MultiSelect-P-fLpT_8.js → MultiSelect-DiXtiFiN.js}

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Checkbox = require('./Checkbox-8JG00hOC.js');
-var Text = require('./Text-a_zqIIN9.js');
-var Icon = require('./Icon-CSGLgk85.js');
+var Checkbox = require('./Checkbox-CfumcDbq.js');
+var Text = require('./Text-BjZcutrM.js');
+var Icon = require('./Icon-BtU-wg5K.js');
 
 var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-"};
 

package/dist/{MultiSelect-CDCig1UA.js → MultiSelect-iHQiaNiP.js}

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
-import { C as Checkbox } from './Checkbox-Vt2JmL6d.js';
-import { T as Text } from './Text-CEMqEWry.js';
-import { I as Icon } from './Icon-PQT92gxC.js';
+import { C as Checkbox } from './Checkbox-DuZx2fms.js';
+import { T as Text } from './Text-BWu90K4v.js';
+import { I as Icon } from './Icon-DCjQNyg7.js';
 
 var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-"};
 

package/dist/{Option-vEX7CBes.js → Option-BaGRpAFH.js}

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

package/dist/{Option-Bz9MReP-.js → Option-PIvA-n6v.js}

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

package/dist/Page/Page.d.ts

@@ -8,6 +8,11 @@ interface PageFoundationProps {
      * Title of the page.
      */
     readonly title: string;
+    /**
+     * TitleMetaData component to be displayed
+     * next to the title.
+     */
+    readonly titleMetaData?: ReactNode;
     /**
      * Subtitle of the page.
      */
@@ -55,5 +60,5 @@ interface PageWithIntroProps extends PageFoundationProps {
     readonly externalIntroLinks?: boolean;
 }
 export type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
-export declare function Page({ title, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): JSX.Element;
+export declare function Page({ title, titleMetaData, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): JSX.Element;
 export {};

package/dist/Page/index.cjs

@@ -1,36 +1,36 @@
 'use strict';
 
-var Page = require('../Page-D7XA6Jpv.js');
+var Page = require('../Page-SY_flHc5.js');
 require('react');
 require('classnames');
-require('../useResizeObserver-e-cnkoXB.js');
-require('../_commonjsHelpers-Bx4SHQ_D.js');
-require('../throttle-C02tnNc4.js');
-require('../debounce-B6a9KhGj.js');
-require('../isObjectLike-3BW3Z_02.js');
-require('../isSymbol-BzrnEHGD.js');
-require('../Heading-DXeeqrC_.js');
-require('../Typography-CiVsswcS.js');
-require('../Text-a_zqIIN9.js');
-require('../Content-DyggamUZ.js');
-require('../Markdown-BQUAGfMM.js');
-require('../Emphasis-BmoSrzRs.js');
-require('../index-DdhkSmM4.js');
-require('../_polyfill-node.process-DeqyYqiM.js');
-require('../Button-C1LiBrTR.js');
+require('../useResizeObserver-frKjM6mN.js');
+require('../_commonjsHelpers-KWPN9RM-.js');
+require('../throttle-DYG0JW4a.js');
+require('../debounce-CAYgVfPV.js');
+require('../isObjectLike-Cx2Cq9iK.js');
+require('../isSymbol-Dvg9FrXF.js');
+require('../Heading-BWTS0UD8.js');
+require('../Typography-BD7qrCaS.js');
+require('../Text-BjZcutrM.js');
+require('../Content-D0Dnz9Rk.js');
+require('../Markdown-Dz55-GFx.js');
+require('../Emphasis-DqITOLJQ.js');
+require('../index-DCbqOnRE.js');
+require('../_polyfill-node.process-CS-f4TbU.js');
+require('../Button-mmk-2Vu6.js');
 require('react-router-dom');
-require('../Icon-CSGLgk85.js');
+require('../Icon-BtU-wg5K.js');
 require('@jobber/design');
-require('../Menu-DaHi-SiK.js');
+require('../Menu-CYsc0SVT.js');
 require('framer-motion');
-require('../useOnKeyDown-BYbbkcsk.js');
-require('../useRefocusOnActivator-C9jfATva.js');
+require('../useOnKeyDown-G0iiu1jH.js');
+require('../useRefocusOnActivator-DCMK9jC1.js');
 require('react-popper');
-require('../useIsMounted-CB-IhYQT.js');
-require('../useSafeLayoutEffect-1-9u_7FR.js');
+require('../useIsMounted-BPcnOr_9.js');
+require('../useSafeLayoutEffect-ChtYX5Wl.js');
 require('react-dom');
-require('../useFocusTrap-n4j6eyXP.js');
-require('../useFormFieldFocus-CsZlDAhq.js');
+require('../useFocusTrap-utLqKMpK.js');
+require('../useFormFieldFocus-BnZc-yIt.js');
 
 
 

package/dist/Page/index.mjs

@@ -1,31 +1,31 @@
-export { P as Page } from '../Page-nNlmGQif.js';
+export { P as Page } from '../Page-deDCMbA5.js';
 import 'react';
 import 'classnames';
-import '../useResizeObserver-DsH803nL.js';
-import '../_commonjsHelpers-BKuahENp.js';
-import '../throttle-yKnk5y-a.js';
-import '../debounce-D-aEAxVb.js';
-import '../isObjectLike-DumvTMPF.js';
-import '../isSymbol-CIegJ9Yh.js';
-import '../Heading-Dx_zvABK.js';
-import '../Typography-DIMCVCvt.js';
-import '../Text-CEMqEWry.js';
-import '../Content-y5ws5cSy.js';
-import '../Markdown-C9NIE7v2.js';
-import '../Emphasis-CbdHOPtQ.js';
-import '../index-DOVgHGhr.js';
-import '../_polyfill-node.process-Da0Yqo_a.js';
-import '../Button-C0mVjCcE.js';
+import '../useResizeObserver-q_kRu-In.js';
+import '../_commonjsHelpers-kmZfvu5v.js';
+import '../throttle-BgwT_gmu.js';
+import '../debounce-5cuuKTv9.js';
+import '../isObjectLike-B-qhhkEY.js';
+import '../isSymbol-DVySjdYm.js';
+import '../Heading-CjC0WuEP.js';
+import '../Typography-aKemJWma.js';
+import '../Text-BWu90K4v.js';
+import '../Content-CTwMXrYI.js';
+import '../Markdown-FHtyTe_1.js';
+import '../Emphasis-Bsf5_rJz.js';
+import '../index-BbJ3eeRf.js';
+import '../_polyfill-node.process-BLBPD9oh.js';
+import '../Button-CrF27_3V.js';
 import 'react-router-dom';
-import '../Icon-PQT92gxC.js';
+import '../Icon-DCjQNyg7.js';
 import '@jobber/design';
-import '../Menu-oEF1TuVE.js';
+import '../Menu-ChW1H6pH.js';
 import 'framer-motion';
-import '../useOnKeyDown-BN-F3VgW.js';
-import '../useRefocusOnActivator-CFT2Bp7b.js';
+import '../useOnKeyDown-DWx7sMlM.js';
+import '../useRefocusOnActivator-CLCDw3f0.js';
 import 'react-popper';
-import '../useIsMounted-yjKfYsRV.js';
-import '../useSafeLayoutEffect-DcN-0oKV.js';
+import '../useIsMounted-Dpr67DHO.js';
+import '../useSafeLayoutEffect-CbhRL_RA.js';
 import 'react-dom';
-import '../useFocusTrap-BpPM4wqW.js';
-import '../useFormFieldFocus-Bx9IXlkw.js';
+import '../useFocusTrap-D_JYeF_C.js';
+import '../useFormFieldFocus-BgBYN1_J.js';

package/dist/{Page-D7XA6Jpv.js → Page-SY_flHc5.js}

@@ -2,19 +2,19 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var useResizeObserver = require('./useResizeObserver-e-cnkoXB.js');
-var Heading = require('./Heading-DXeeqrC_.js');
-var Text = require('./Text-a_zqIIN9.js');
-var Content = require('./Content-DyggamUZ.js');
-var Markdown = require('./Markdown-BQUAGfMM.js');
-var Button = require('./Button-C1LiBrTR.js');
-var Menu = require('./Menu-DaHi-SiK.js');
-var Emphasis = require('./Emphasis-BmoSrzRs.js');
+var useResizeObserver = require('./useResizeObserver-frKjM6mN.js');
+var Heading = require('./Heading-BWTS0UD8.js');
+var Text = require('./Text-BjZcutrM.js');
+var Content = require('./Content-D0Dnz9Rk.js');
+var Markdown = require('./Markdown-Dz55-GFx.js');
+var Button = require('./Button-mmk-2Vu6.js');
+var Menu = require('./Menu-CYsc0SVT.js');
+var Emphasis = require('./Emphasis-DqITOLJQ.js');
 
-var styles = {"page":"pVEdXlwstrc-","fill":"_9r84iz--C5M-","standard":"_0LO26JFXU9g-","narrow":"KiMIF8eFbuE-","titleBar":"GCeQrLFyml4-","actionGroup":"KP-BTjB82iQ-","large":"GuFU-PgC1j4-","medium":"qiwlkB5pxkA-","small":"CbPnpIk7-EE-","primaryAction":"E5FEsck9zwg-","actionButton":"Sn3-wJuNCqk-","subtitle":"_9ZKFDK2jL80-"};
+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-"};
 
 // eslint-disable-next-line max-statements
-function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
+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();
     const titleBarClasses = classnames(styles.titleBar, {
@@ -38,7 +38,9 @@ function Page({ title, intro, externalIntroLinks, subtitle, children, width = "s
             React.createElement(Content.Content, null,
                 React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
                     React.createElement("div", null,
-                        React.createElement(Heading.Heading, { level: 1 }, title),
+                        titleMetaData ? (React.createElement("div", { className: styles.titleRow },
+                            React.createElement(Heading.Heading, { level: 1 }, title),
+                            titleMetaData)) : (React.createElement(Heading.Heading, { level: 1 }, title)),
                         subtitle && (React.createElement("div", { className: styles.subtitle },
                             React.createElement(Text.Text, { size: "large", variation: "subdued" },
                                 React.createElement(Emphasis.Emphasis, { variation: "bold" },