@jobber/components 2.85.8 → 2.86.1

package/dist/Modal/index.js

@@ -2,134 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
-var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-var index = require('../Typography/index.js');
-require('@jobber/design');
-require('../Icon/index.js');
+var Modal = require('../Modal-aaaaf2df.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('react-dom');
+require('classnames');
+require('framer-motion');
+require('@jobber/hooks');
+require('../style-inject.es-dcee06b6.js');
+require('../Typography-7e542a72.js');
+require('../Button-5b2f1636.js');
 require('react-router-dom');
-var index$5 = require('../Button/index.js');
-var framerMotion = require('framer-motion');
-var hooks = require('@jobber/hooks');
-var index$1 = require('../ButtonDismiss/index.js');
-var ReactDOM = require('react-dom');
-var ReactDOM__default = _interopDefault(ReactDOM);
-
-var css = ":root {\n  --modal--width: calc(var(--base-unit) * 37.5);\n  --modal--padding: var(--space-base);\n}\n\n@media (min-width: 640px) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n@media (min-width: 640px) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n@media (--medium-screens) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n._1_FReUDORhZR5sFF1jxDZ4 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  z-index: var(--elevation-modal);\n  padding: var(--space-small);\n  overflow: auto;\n}\n\n._1_FReUDORhZR5sFF1jxDZ4,\n.YdwnL8q9kXtLnlxEu6SP9 {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.YdwnL8q9kXtLnlxEu6SP9 {\n  background-color: var(--color-overlay);\n}\n\n._2hKHM4Rlzvclc2pGmHoTBL {\n  --public-tab--inset: var(--space-large);\n\n  position: relative;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: 100%;\n  max-width: calc(var(--base-unit) * 37.5);\n  max-width: calc(var(--base-unit) * 37.5);\n  max-width: var(--modal--width);\n  margin: auto;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\n  background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the modal */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * {\n  --public-content--padding: var(--modal--padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * > * {\n  --public-content--padding: 0;\n}\n\n.RhEfa9gwqpglIheT5uq0v {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--modal--padding);\n  background-color: var(--color-surface--background);\n}\n\n._2hGT8VbbIAX27SyJglRyMG {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n._3O1sOKNEhVvtW_k_wBrJR {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--modal--padding);\n  padding-top: 0;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n._3pUVCJLJyWuGSGnaStM3sE {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK > * {\n  margin-left: var(--space-small);\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:first-child {\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:nth-child(2) {\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n";
-var styles = {"container":"_1_FReUDORhZR5sFF1jxDZ4","overlay":"YdwnL8q9kXtLnlxEu6SP9","modal":"_2hKHM4Rlzvclc2pGmHoTBL","header":"RhEfa9gwqpglIheT5uq0v","closeButton":"_2hGT8VbbIAX27SyJglRyMG","actionBar":"_3O1sOKNEhVvtW_k_wBrJR","leftAction":"_3pUVCJLJyWuGSGnaStM3sE","rightAction":"_1fDeYu_CZWiL3glYPvWrwK"};
-__chunk_2.styleInject(css);
-
-var css$1 = "._1rPyLQMc1nSLWx4zAzSas0 {\n  --modal--padding: var(--space-base);\n  max-width: calc(var(--base-unit) * 25);\n}\n\n._3GkHDHYnN_8P6NQFVSfYiB {\n  max-width: calc(var(--base-unit) * 58.75);\n}\n";
-var sizes = {"small":"_1rPyLQMc1nSLWx4zAzSas0","large":"_3GkHDHYnN_8P6NQFVSfYiB"};
-__chunk_2.styleInject(css$1);
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../ButtonDismiss-4cde8f7c.js');
 
-/**
- * Traps the focus within the children of the ref element.
- *
- * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
- * body but not the dialog.
- *
- * @returns ref
- */
-function useFocusTrap(active) {
-    // There's an ongoing issue with useRef return type clashing with an element's
-    // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
-    var ref = React.useRef(null);
-    function handleKeyDown(event) {
-        if (!(active && ref.current) || event.key !== "Tab") {
-            return;
-        }
-        var _a = getElements(ref.current), firstElement = _a.firstElement, lastElement = _a.lastElement;
-        if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-                lastElement.focus();
-                event.preventDefault();
-            }
-        }
-        else {
-            if (document.activeElement === lastElement) {
-                firstElement.focus();
-                event.preventDefault();
-            }
-        }
-    }
-    React.useEffect(function () {
-        var _a, _b;
-        if (active) {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", handleKeyDown);
-        }
-        return function () {
-            var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [active]);
-    return ref;
-}
-function getElements(ref) {
-    var focusables = [
-        "button",
-        "[href]",
-        "input",
-        "select",
-        "textarea",
-        '[tabindex]:not([tabindex="-1"])',
-    ];
-    var elements = ref.querySelectorAll(focusables.join(", "));
-    var firstElement = ref;
-    var lastElement = elements[elements.length - 1];
-    return { firstElement: firstElement, lastElement: lastElement };
-}
 
-function Modal(_a) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, title = _a.title, size = _a.size, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c, children = _a.children, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, tertiaryAction = _a.tertiaryAction, onRequestClose = _a.onRequestClose;
-    var modalClassName = classnames(styles.modal, size && sizes[size]);
-    hooks.useRefocusOnActivator(open);
-    var modalRef = useFocusTrap(open);
-    hooks.useOnKeyDown(handleRequestClose, "Escape");
-    var template = (React__default.createElement(framerMotion.AnimatePresence, null, open && (React__default.createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
-        React__default.createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
-        React__default.createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
-                duration: 0.2,
-                ease: "easeInOut",
-            } },
-            title != undefined && (React__default.createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
-            children,
-            React__default.createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
-    return ReactDOM__default.createPortal(template, document.body);
-    function handleRequestClose() {
-        if (open && onRequestClose) {
-            onRequestClose();
-        }
-    }
-}
-function Header(_a) {
-    var title = _a.title, dismissible = _a.dismissible, onRequestClose = _a.onRequestClose;
-    return (React__default.createElement("div", { className: styles.header, "data-testid": "modal-header" },
-        React__default.createElement(index.Typography, { element: "h3", size: "large", textCase: "uppercase", fontWeight: "extraBold" }, title),
-        dismissible && (React__default.createElement(index$1.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" }))));
-}
-function Actions(_a) {
-    var primary = _a.primary, secondary = _a.secondary, tertiary = _a.tertiary;
-    var shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
-    if (secondary != undefined) {
-        secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
-    }
-    if (tertiary != undefined) {
-        tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
-    }
-    return (React__default.createElement(React__default.Fragment, null, shouldShow && (React__default.createElement("div", { className: styles.actionBar },
-        React__default.createElement("div", { className: styles.rightAction },
-            primary && React__default.createElement(index$5.Button, __chunk_1.__assign({}, primary)),
-            secondary && React__default.createElement(index$5.Button, __chunk_1.__assign({}, secondary))),
-        tertiary && (React__default.createElement("div", { className: styles.leftAction },
-            React__default.createElement(index$5.Button, __chunk_1.__assign({}, tertiary))))))));
-}
 
-exports.Modal = Modal;
+exports.Modal = Modal.Modal;

package/dist/Modal/useFocusTrap.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-/**
- * Traps the focus within the children of the ref element.
- *
- * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
- * body but not the dialog.
- *
- * @returns ref
- */
-export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;
+/// <reference types="react" />
+/**
+ * Traps the focus within the children of the ref element.
+ *
+ * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
+ * body but not the dialog.
+ *
+ * @returns ref
+ */
+export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

package/dist/Modal-aaaaf2df.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var classnames = require('classnames');
+var framerMotion = require('framer-motion');
+var hooks = require('@jobber/hooks');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var Typography = require('./Typography-7e542a72.js');
+var Button = require('./Button-5b2f1636.js');
+var ButtonDismiss = require('./ButtonDismiss-4cde8f7c.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css$1 = ":root {\n  --modal--width: calc(var(--base-unit) * 37.5);\n  --modal--padding: var(--space-base);\n}\n\n@media (min-width: 640px) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n@media (min-width: 640px) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n@media (--medium-screens) {\n  :root {\n    --modal--padding: var(--space-base) var(--space-large);\n  }\n}\n\n._1_FReUDORhZR5sFF1jxDZ4 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  z-index: var(--elevation-modal);\n  padding: var(--space-small);\n  overflow: auto;\n}\n\n._1_FReUDORhZR5sFF1jxDZ4,\n.YdwnL8q9kXtLnlxEu6SP9 {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.YdwnL8q9kXtLnlxEu6SP9 {\n  background-color: var(--color-overlay);\n}\n\n._2hKHM4Rlzvclc2pGmHoTBL {\n  --public-tab--inset: var(--space-large);\n\n  position: relative;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  width: 100%;\n  max-width: calc(var(--base-unit) * 37.5);\n  max-width: calc(var(--base-unit) * 37.5);\n  max-width: var(--modal--width);\n  margin: auto;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  outline-color: var(--color-focus);\n  background-color: var(--color-surface);\n}\n\n/* Adjust `Content` components public padding to match the modal */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * {\n  --public-content--padding: var(--modal--padding);\n}\n\n/* Remove the nested `Content` components public padding */\n\n._2hKHM4Rlzvclc2pGmHoTBL > * > * {\n  --public-content--padding: 0;\n}\n\n.RhEfa9gwqpglIheT5uq0v {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--modal--padding);\n  background-color: var(--color-surface--background);\n}\n\n._2hGT8VbbIAX27SyJglRyMG {\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n._3O1sOKNEhVvtW_k_wBrJR {\n  display: -ms-flexbox;\n  display: flex;\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--modal--padding);\n  padding-top: 0;\n  -ms-flex: 1 1 100%;\n      flex: 1 1 100%;\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n/**\n * 1. Use CSS `order` to adjust the buttons position on the UI\n */\n\n._3pUVCJLJyWuGSGnaStM3sE {\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK > * {\n  margin-left: var(--space-small);\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:first-child {\n  -ms-flex-order: 2;\n      order: 2; /* 1 */\n}\n\n._1fDeYu_CZWiL3glYPvWrwK *:nth-child(2) {\n  -ms-flex-order: 1;\n      order: 1; /* 1 */\n}\n";
+var styles = {"container":"_1_FReUDORhZR5sFF1jxDZ4","overlay":"YdwnL8q9kXtLnlxEu6SP9","modal":"_2hKHM4Rlzvclc2pGmHoTBL","header":"RhEfa9gwqpglIheT5uq0v","closeButton":"_2hGT8VbbIAX27SyJglRyMG","actionBar":"_3O1sOKNEhVvtW_k_wBrJR","leftAction":"_3pUVCJLJyWuGSGnaStM3sE","rightAction":"_1fDeYu_CZWiL3glYPvWrwK"};
+styleInject_es.styleInject(css$1);
+
+var css = "._1rPyLQMc1nSLWx4zAzSas0 {\n  --modal--padding: var(--space-base);\n  max-width: calc(var(--base-unit) * 25);\n}\n\n._3GkHDHYnN_8P6NQFVSfYiB {\n  max-width: calc(var(--base-unit) * 58.75);\n}\n";
+var sizes = {"small":"_1rPyLQMc1nSLWx4zAzSas0","large":"_3GkHDHYnN_8P6NQFVSfYiB"};
+styleInject_es.styleInject(css);
+
+/**
+ * Traps the focus within the children of the ref element.
+ *
+ * @param active - Turns the focus trapping on or off. Also adds aria-hidden on the
+ * body but not the dialog.
+ *
+ * @returns ref
+ */
+function useFocusTrap(active) {
+    // There's an ongoing issue with useRef return type clashing with an element's
+    // ref prop type. TLDR: Use null because useRef doesn't expect undefined.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
+    var ref = React.useRef(null);
+    function handleKeyDown(event) {
+        if (!(active && ref.current) || event.key !== "Tab") {
+            return;
+        }
+        var _a = getElements(ref.current), firstElement = _a.firstElement, lastElement = _a.lastElement;
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                lastElement.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                firstElement.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    React.useEffect(function () {
+        var _a, _b;
+        if (active) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener("keydown", handleKeyDown);
+        }
+        return function () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [active]);
+    return ref;
+}
+function getElements(ref) {
+    var focusables = [
+        "button",
+        "[href]",
+        "input",
+        "select",
+        "textarea",
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    var elements = ref.querySelectorAll(focusables.join(", "));
+    var firstElement = ref;
+    var lastElement = elements[elements.length - 1];
+    return { firstElement: firstElement, lastElement: lastElement };
+}
+
+function Modal(_a) {
+    var _b = _a.open, open = _b === void 0 ? false : _b, title = _a.title, size = _a.size, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c, children = _a.children, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, tertiaryAction = _a.tertiaryAction, onRequestClose = _a.onRequestClose;
+    var modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
+    hooks.useRefocusOnActivator(open);
+    var modalRef = useFocusTrap(open);
+    hooks.useOnKeyDown(handleRequestClose, "Escape");
+    var template = (React__default["default"].createElement(framerMotion.AnimatePresence, null, open && (React__default["default"].createElement("div", { ref: modalRef, className: styles.container, tabIndex: 0 },
+        React__default["default"].createElement(framerMotion.motion.div, { key: styles.overlay, className: styles.overlay, onClick: onRequestClose, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 } }),
+        React__default["default"].createElement(framerMotion.motion.div, { key: styles.modal, className: modalClassName, initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.9, opacity: 0 }, transition: {
+                duration: 0.2,
+                ease: "easeInOut",
+            } },
+            title != undefined && (React__default["default"].createElement(Header, { title: title, dismissible: dismissible, onRequestClose: onRequestClose })),
+            children,
+            React__default["default"].createElement(Actions, { primary: primaryAction, secondary: secondaryAction, tertiary: tertiaryAction }))))));
+    return ReactDOM__default["default"].createPortal(template, document.body);
+    function handleRequestClose() {
+        if (open && onRequestClose) {
+            onRequestClose();
+        }
+    }
+}
+function Header(_a) {
+    var title = _a.title, dismissible = _a.dismissible, onRequestClose = _a.onRequestClose;
+    return (React__default["default"].createElement("div", { className: styles.header, "data-testid": "modal-header" },
+        React__default["default"].createElement(Typography.Typography, { element: "h3", size: "large", textCase: "uppercase", fontWeight: "extraBold" }, title),
+        dismissible && (React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close modal" }))));
+}
+function Actions(_a) {
+    var primary = _a.primary, secondary = _a.secondary, tertiary = _a.tertiary;
+    var shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
+    if (secondary != undefined) {
+        secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
+    }
+    if (tertiary != undefined) {
+        tertiary = Object.assign({ type: "secondary", variation: "destructive" }, tertiary);
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, shouldShow && (React__default["default"].createElement("div", { className: styles.actionBar },
+        React__default["default"].createElement("div", { className: styles.rightAction },
+            primary && React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, primary)),
+            secondary && React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, secondary))),
+        tertiary && (React__default["default"].createElement("div", { className: styles.leftAction },
+            React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, tertiary))))))));
+}
+
+exports.Modal = Modal;

package/dist/Page/Page.d.ts

@@ -1,59 +1,59 @@
-import { ReactNode } from "react";
-import { XOR } from "ts-xor";
-import { ButtonProps } from "../Button";
-import { SectionProps } from "../Menu";
-interface PageFoundationProps {
-    readonly children: ReactNode | ReactNode[];
-    /**
-     * Title of the page.
-     */
-    readonly title: string;
-    /**
-     * Subtitle of the page.
-     */
-    readonly subtitle?: string;
-    /**
-     * Determines the width of the page.
-     *
-     * Fill makes the width grow to 100%.
-     *
-     * Standard caps out at 1280px.
-     *
-     * Narrow caps out at 1024px.
-     *
-     * @default standard
-     */
-    readonly width?: "fill" | "standard" | "narrow";
-    /**
-     * Page title primary action button settings.
-     */
-    readonly primaryAction?: ButtonProps;
-    /**
-     * Page title secondary action button settings.
-     *   Only shown if there is a primaryAction.
-     */
-    readonly secondaryAction?: ButtonProps;
-    /**
-     * Page title Action menu.
-     */
-    readonly moreActionsMenu?: SectionProps[];
-}
-interface PageWithIntroProps extends PageFoundationProps {
-    /**
-     * Content of the page. This supports basic markdown node types
-     * such as `_italic_`, `**bold**`, and `[link name](url)`.
-     */
-    readonly intro: string;
-    /**
-     * Causes any markdown links in the `intro` prop to open in a new
-     * tab, i.e. with `target="_blank"`.
-     *
-     * Can only be used if `intro` prop is also specified.
-     *
-     * Defaults to `false`.
-     */
-    readonly externalIntroLinks?: boolean;
-}
-export declare type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
-export declare function Page({ title, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): JSX.Element;
-export {};
+import { ReactNode } from "react";
+import { XOR } from "ts-xor";
+import { ButtonProps } from "../Button";
+import { SectionProps } from "../Menu";
+interface PageFoundationProps {
+    readonly children: ReactNode | ReactNode[];
+    /**
+     * Title of the page.
+     */
+    readonly title: string;
+    /**
+     * Subtitle of the page.
+     */
+    readonly subtitle?: string;
+    /**
+     * Determines the width of the page.
+     *
+     * Fill makes the width grow to 100%.
+     *
+     * Standard caps out at 1280px.
+     *
+     * Narrow caps out at 1024px.
+     *
+     * @default standard
+     */
+    readonly width?: "fill" | "standard" | "narrow";
+    /**
+     * Page title primary action button settings.
+     */
+    readonly primaryAction?: ButtonProps;
+    /**
+     * Page title secondary action button settings.
+     *   Only shown if there is a primaryAction.
+     */
+    readonly secondaryAction?: ButtonProps;
+    /**
+     * Page title Action menu.
+     */
+    readonly moreActionsMenu?: SectionProps[];
+}
+interface PageWithIntroProps extends PageFoundationProps {
+    /**
+     * Content of the page. This supports basic markdown node types
+     * such as `_italic_`, `**bold**`, and `[link name](url)`.
+     */
+    readonly intro: string;
+    /**
+     * Causes any markdown links in the `intro` prop to open in a new
+     * tab, i.e. with `target="_blank"`.
+     *
+     * Can only be used if `intro` prop is also specified.
+     *
+     * Defaults to `false`.
+     */
+    readonly externalIntroLinks?: boolean;
+}
+export declare type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
+export declare function Page({ title, intro, externalIntroLinks, subtitle, children, width, primaryAction, secondaryAction, moreActionsMenu, }: PageProps): JSX.Element;
+export {};

package/dist/Page/index.d.ts

@@ -1 +1 @@
-export { Page, PageProps } from "./Page";
+export { Page, PageProps } from "./Page";

package/dist/Page/index.js

@@ -2,75 +2,77 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var __chunk_1 = require('../chunk-b67af3cb.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
-var React__default = _interopDefault(React);
-var __chunk_2 = require('../chunk-17e02351.js');
-var classnames = _interopDefault(require('classnames'));
-require('../Typography/index.js');
-var index$1 = require('../Text/index.js');
+var classnames = require('classnames');
+var hooks = require('@jobber/hooks');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var Heading = require('../Heading-56750113.js');
+var Text = require('../Text-9bc093e9.js');
+var Content = require('../Content-18de5fbb.js');
+var Markdown = require('../Markdown-69986c49.js');
+var Button = require('../Button-5b2f1636.js');
+var Menu = require('../Menu-6a392af6.js');
+var Emphasis = require('../Emphasis-fd845639.js');
+require('../Typography-7e542a72.js');
+require('react-markdown');
+require('react-router-dom');
+require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Icon/index.js');
-var index$3 = require('../Heading/index.js');
 require('uuid');
-require('react-router-dom');
-var index$5 = require('../Button/index.js');
 require('framer-motion');
-var hooks = require('@jobber/hooks');
-var index$2$1 = require('../Content/index.js');
-require('react-markdown');
-var index$4$1 = require('../Emphasis/index.js');
-var index$6 = require('../Markdown/index.js');
-var index$4 = require('../Menu/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var css = ".D_deCgrOv6-H73MnfGJvm {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-large);\n}\n\n._1ApfukxxkhoI4O2hiz5Uwn {\n  max-width: none;\n}\n\n._3ztr1AAnXDjf1fJmrroFe {\n  max-width: calc(var(--base-unit) * 80);\n}\n\n._3gzBNrakhNssSHRoK_PGT_ {\n  max-width: calc(var(--base-unit) * 64);\n}\n\n._3xyO2kq36Y3b6SelhUDtfY h1 {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  margin-bottom: var(--space-base);\n}\n\n._3xyO2kq36Y3b6SelhUDtfY > ._30ozatSu_eBQRGijDkDcVv {\n  -ms-flex: 1 0 auto;\n      flex: 1 0 auto;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY.TMLLSUncr_7snmpWMQI52,\n._3xyO2kq36Y3b6SelhUDtfY._1xus3UCuakwBnzEP9Y1A0w {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY.HQWAJd314k_9LuClFNXnq ._30ozatSu_eBQRGijDkDcVv {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY._1xus3UCuakwBnzEP9Y1A0w ._30ozatSu_eBQRGijDkDcVv,\n._3xyO2kq36Y3b6SelhUDtfY.TMLLSUncr_7snmpWMQI52 ._30ozatSu_eBQRGijDkDcVv {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY._1xus3UCuakwBnzEP9Y1A0w ._30ozatSu_eBQRGijDkDcVv {\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n._2Vh4O7m0IWrXXamLjZAzlo {\n  -ms-flex: 0 0 100%;\n      flex: 0 0 100%;\n  margin-bottom: var(--space-small);\n}\n\n._1JRE4jCUHc0uMECkrZ2sBz {\n  margin-top: var(--space-small);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n._1JRE4jCUHc0uMECkrZ2sBz > div {\n  width: 100%;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY.HQWAJd314k_9LuClFNXnq ._1JRE4jCUHc0uMECkrZ2sBz {\n  margin-top: 0;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY._1xus3UCuakwBnzEP9Y1A0w ._2Vh4O7m0IWrXXamLjZAzlo,\n._3xyO2kq36Y3b6SelhUDtfY._1xus3UCuakwBnzEP9Y1A0w ._1JRE4jCUHc0uMECkrZ2sBz {\n  margin: 0;\n  -ms-flex: 0 auto;\n      flex: 0 auto;\n}\n\n._3xyO2kq36Y3b6SelhUDtfY._1xus3UCuakwBnzEP9Y1A0w ._1JRE4jCUHc0uMECkrZ2sBz {\n  margin-left: var(--space-small);\n}\n\n._3xyO2kq36Y3b6SelhUDtfY.HQWAJd314k_9LuClFNXnq ._1JRE4jCUHc0uMECkrZ2sBz + ._1JRE4jCUHc0uMECkrZ2sBz {\n  margin-left: var(--space-small);\n}\n\n._3xyO2kq36Y3b6SelhUDtfY .brpsipr_kECyvzN54DsHj {\n  margin-bottom: var(--space-base);\n}\n";
 var styles = {"page":"D_deCgrOv6-H73MnfGJvm","fill":"_1ApfukxxkhoI4O2hiz5Uwn","standard":"_3ztr1AAnXDjf1fJmrroFe","narrow":"_3gzBNrakhNssSHRoK_PGT_","titleBar":"_3xyO2kq36Y3b6SelhUDtfY","actionGroup":"_30ozatSu_eBQRGijDkDcVv","large":"TMLLSUncr_7snmpWMQI52","medium":"_1xus3UCuakwBnzEP9Y1A0w","small":"HQWAJd314k_9LuClFNXnq","primaryAction":"_2Vh4O7m0IWrXXamLjZAzlo","actionButton":"_1JRE4jCUHc0uMECkrZ2sBz","subtitle":"brpsipr_kECyvzN54DsHj"};
-__chunk_2.styleInject(css);
+styleInject_es.styleInject(css);
 
-// eslint-disable-next-line max-statements
-function Page(_a) {
-    var _b;
-    var title = _a.title, intro = _a.intro, externalIntroLinks = _a.externalIntroLinks, subtitle = _a.subtitle, children = _a.children, _c = _a.width, width = _c === void 0 ? "standard" : _c, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, _d = _a.moreActionsMenu, moreActionsMenu = _d === void 0 ? [] : _d;
-    var pageStyles = classnames(styles.page, styles[width]);
-    var _e = __chunk_1.__read(hooks.useResizeObserver(), 2), titleBarRef = _e[0], _f = _e[1].width, titleBarWidth = _f === void 0 ? hooks.Breakpoints.large : _f;
-    var titleBarClasses = classnames(styles.titleBar, (_b = {},
-        _b[styles.small] = titleBarWidth > hooks.Breakpoints.smaller,
-        _b[styles.medium] = titleBarWidth > hooks.Breakpoints.small,
-        _b[styles.large] = titleBarWidth > hooks.Breakpoints.base,
-        _b));
-    var showMenu = moreActionsMenu.length > 0;
-    var showActionGroup = showMenu || primaryAction;
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    if (secondaryAction != undefined) {
-        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
-    }
-    return (React__default.createElement("div", { className: pageStyles },
-        React__default.createElement(index$2$1.Content, null,
-            React__default.createElement(index$2$1.Content, null,
-                React__default.createElement("div", { className: titleBarClasses, ref: titleBarRef },
-                    React__default.createElement("div", null,
-                        React__default.createElement(index$3.Heading, { level: 1 }, title),
-                        subtitle && (React__default.createElement("div", { className: styles.subtitle },
-                            React__default.createElement(index$1.Text, { size: "large", variation: "subdued" },
-                                React__default.createElement(index$4$1.Emphasis, { variation: "bold" },
-                                    React__default.createElement(index$6.Markdown, { content: subtitle, basicUsage: true })))))),
-                    showActionGroup && (React__default.createElement("div", { className: styles.actionGroup },
-                        primaryAction && (React__default.createElement("div", { className: styles.primaryAction },
-                            React__default.createElement(index$5.Button, __chunk_1.__assign({}, primaryAction)))),
-                        secondaryAction && (React__default.createElement("div", { className: styles.actionButton },
-                            React__default.createElement(index$5.Button, __chunk_1.__assign({}, secondaryAction)))),
-                        showMenu && (React__default.createElement("div", { className: styles.actionButton },
-                            React__default.createElement(index$4.Menu, { items: moreActionsMenu })))))),
-                intro && (React__default.createElement(index$1.Text, { size: "large" },
-                    React__default.createElement(index$6.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
-            React__default.createElement(index$2$1.Content, null, children))));
+// eslint-disable-next-line max-statements
+function Page(_a) {
+    var _b;
+    var title = _a.title, intro = _a.intro, externalIntroLinks = _a.externalIntroLinks, subtitle = _a.subtitle, children = _a.children, _c = _a.width, width = _c === void 0 ? "standard" : _c, primaryAction = _a.primaryAction, secondaryAction = _a.secondaryAction, _d = _a.moreActionsMenu, moreActionsMenu = _d === void 0 ? [] : _d;
+    var pageStyles = classnames__default["default"](styles.page, styles[width]);
+    var _e = tslib_es6.__read(hooks.useResizeObserver(), 2), titleBarRef = _e[0], _f = _e[1].width, titleBarWidth = _f === void 0 ? hooks.Breakpoints.large : _f;
+    var titleBarClasses = classnames__default["default"](styles.titleBar, (_b = {},
+        _b[styles.small] = titleBarWidth > hooks.Breakpoints.smaller,
+        _b[styles.medium] = titleBarWidth > hooks.Breakpoints.small,
+        _b[styles.large] = titleBarWidth > hooks.Breakpoints.base,
+        _b));
+    var showMenu = moreActionsMenu.length > 0;
+    var showActionGroup = showMenu || primaryAction;
+    if (primaryAction != undefined) {
+        primaryAction = Object.assign({ fullWidth: true }, primaryAction);
+    }
+    if (secondaryAction != undefined) {
+        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
+    }
+    if (secondaryAction != undefined) {
+        secondaryAction = Object.assign({ type: "secondary", fullWidth: true }, secondaryAction);
+    }
+    return (React__default["default"].createElement("div", { className: pageStyles },
+        React__default["default"].createElement(Content.Content, null,
+            React__default["default"].createElement(Content.Content, null,
+                React__default["default"].createElement("div", { className: titleBarClasses, ref: titleBarRef },
+                    React__default["default"].createElement("div", null,
+                        React__default["default"].createElement(Heading.Heading, { level: 1 }, title),
+                        subtitle && (React__default["default"].createElement("div", { className: styles.subtitle },
+                            React__default["default"].createElement(Text.Text, { size: "large", variation: "subdued" },
+                                React__default["default"].createElement(Emphasis.Emphasis, { variation: "bold" },
+                                    React__default["default"].createElement(Markdown.Markdown, { content: subtitle, basicUsage: true })))))),
+                    showActionGroup && (React__default["default"].createElement("div", { className: styles.actionGroup },
+                        primaryAction && (React__default["default"].createElement("div", { className: styles.primaryAction },
+                            React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, primaryAction)))),
+                        secondaryAction && (React__default["default"].createElement("div", { className: styles.actionButton },
+                            React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, secondaryAction)))),
+                        showMenu && (React__default["default"].createElement("div", { className: styles.actionButton },
+                            React__default["default"].createElement(Menu.Menu, { items: moreActionsMenu })))))),
+                intro && (React__default["default"].createElement(Text.Text, { size: "large" },
+                    React__default["default"].createElement(Markdown.Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
+            React__default["default"].createElement(Content.Content, null, children))));
 }
 
 exports.Page = Page;

package/dist/Popover/Popover.d.ts

@@ -1,26 +1,26 @@
-import React from "react";
-export interface PopoverProps {
-    /**
-     * Element the Popover will attach to and point at. A `useRef` must be attached to an html element
-     * and passed as an attachTo prop in order for the Popover to function properly
-     */
-    readonly attachTo: Element | React.RefObject<Element | null>;
-    /**
-     * Popover content.
-     */
-    readonly children: React.ReactNode;
-    /**
-     * Control Popover visibility.
-     */
-    readonly open: boolean;
-    /**
-     * Callback executed when the user wants to close/dismiss the Popover
-     */
-    readonly onRequestClose?: () => void;
-    /**
-     * Describes the preferred placement of the Popover.
-     * @default 'auto'
-     */
-    readonly preferredPlacement?: "top" | "bottom" | "left" | "right" | "auto";
-}
-export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, }: PopoverProps): JSX.Element;
+import React from "react";
+export interface PopoverProps {
+    /**
+     * Element the Popover will attach to and point at. A `useRef` must be attached to an html element
+     * and passed as an attachTo prop in order for the Popover to function properly
+     */
+    readonly attachTo: Element | React.RefObject<Element | null>;
+    /**
+     * Popover content.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Control Popover visibility.
+     */
+    readonly open: boolean;
+    /**
+     * Callback executed when the user wants to close/dismiss the Popover
+     */
+    readonly onRequestClose?: () => void;
+    /**
+     * Describes the preferred placement of the Popover.
+     * @default 'auto'
+     */
+    readonly preferredPlacement?: "top" | "bottom" | "left" | "right" | "auto";
+}
+export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, }: PopoverProps): JSX.Element;

package/dist/Popover/index.d.ts

@@ -1 +1 @@
-export { Popover } from "./Popover";
+export { Popover } from "./Popover";