@jobber/components 4.85.4-CJS-to-ESM.1 → 4.85.4-CJS-to-ESM.2

package/dist/MultiSelect-0af9c956.js

@@ -0,0 +1,169 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { C as Checkbox } from './Checkbox-a91b14f7.js';
+import { T as Text } from './Text-c92ddeb3.js';
+import { I as Icon } from './Icon-22723fe6.js';
+
+var css_248z$1 = ".D-J03az6XL4- {\n  position: relative;\n  width: 100%;\n}\n\n.D-J03az6XL4- * {\n  box-sizing: border-box;\n}\n\n.EzNdHgwsT40- {\n  --field--height: var(--space-largest);\n\n  --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-left: var(--space-base);\n  --field--padding-right: var(--space-base);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  width: 100%;\n  height: var(--space-largest);\n  height: var(--field--height);\n  padding-top: calc(var(--space-base) - var(--space-smallest));\n  padding-top: var(--field--padding-top);\n  padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--space-base);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--space-base);\n  padding-right: var(--field--padding-right);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n.EzNdHgwsT40- p {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.D-J03az6XL4-:hover,\n.D-J03az6XL4-.EzNdHgwsT40- {\n  cursor: pointer;\n  caret-color: transparent;\n}\n\n.EzNdHgwsT40-:focus,\n.EzNdHgwsT40-.bu7HWKRu6HI- {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.eQ6yfQg6zLc- {\n  --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n  --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.pM-ts4-QMZY- {\n  --field--padding-left: var(--space-large);\n  --field--padding-right: var(--space-large);\n  --field--height: calc(var(--space-extravagant));\n}\n";
+var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-"};
+styleInject(css_248z$1);
+
+var css_248z = "._0SStdD4KRHs- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: calc(var(--space-extravagant) * 5);\n  box-shadow: var(--shadow-base);\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-large);\n  overflow: auto;\n  background-color: var(--color-surface);\n  -ms-flex-direction: column;\n      flex-direction: column;\n  scroll-behavior: smooth;\n}\n\n._0SStdD4KRHs- li {\n  list-style: none;\n}\n\n.mFSgwOQZJm0- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small) var(--space-base);\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.mFSgwOQZJm0-:focus,\n.mFSgwOQZJm0-.SepF4gvOxq8- {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n";
+var styles = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-"};
+styleInject(css_248z);
+
+function DropDownMenu({ options, setOptions }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const menuDiv = useRef();
+    const handleOptionClick = useCallback((clickedOption) => {
+        setOptions(current => current.map(option => {
+            if (option.label == clickedOption.label) {
+                return Object.assign(Object.assign({}, option), { checked: !clickedOption.checked });
+            }
+            return option;
+        }));
+    }, []);
+    function handleOptionHover(event, index) {
+        event.preventDefault();
+        setHighlightedIndex(index);
+    }
+    function handleOptionFocus(index) {
+        setHighlightedIndex(index);
+        if (menuDiv.current) {
+            const option = menuDiv.current.children[index].querySelector("input");
+            option === null || option === void 0 ? void 0 : option.focus();
+        }
+    }
+    function scrollMenuIfItemNotInView(menuDivElement, direction) {
+        const itemDiv = menuDivElement.querySelector(`:nth-child(${highlightedIndex + 1})`);
+        if (!itemDiv)
+            return;
+        const menuTop = menuDivElement.getBoundingClientRect().top;
+        const { top: itemTop, height: itemHeight, bottom: itemBottom, } = itemDiv.getBoundingClientRect();
+        const itemTrueBottom = itemBottom + itemHeight;
+        const menuBottom = menuDivElement.getBoundingClientRect().bottom;
+        if (direction == "up" && itemTop - itemHeight < menuTop) {
+            menuDivElement.scrollTop -= itemHeight;
+        }
+        else if (direction == "down" && itemTrueBottom > menuBottom) {
+            menuDivElement.scrollTop += itemHeight;
+        }
+    }
+    function handleKeyDown(event) {
+        const { key, metaKey, ctrlKey } = event;
+        if (metaKey || ctrlKey)
+            return;
+        switch (key) {
+            case "Enter": {
+                if (highlightedIndex >= 0) {
+                    handleOptionClick(options[highlightedIndex]);
+                }
+                break;
+            }
+            case "ArrowDown": {
+                handlePressDown(event);
+                break;
+            }
+            case "ArrowUp": {
+                handlePressUp(event);
+                break;
+            }
+        }
+    }
+    useEffect(() => {
+        // focus first option
+        handleOptionFocus(0);
+    }, [menuDiv]);
+    return (React.createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv, onKeyDown: handleKeyDown }, options.map((option, index) => {
+        const optionClass = classnames(styles.option, {
+            [styles.active]: index === highlightedIndex,
+        });
+        return (React.createElement("li", { key: `${index}-${option.label}`, className: optionClass, onClick: event => {
+                event.stopPropagation();
+                event.preventDefault();
+                handleOptionClick(option);
+            }, onMouseOver: e => handleOptionHover(e, index) },
+            React.createElement(Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
+    })));
+    function handlePressUp(event) {
+        event.preventDefault();
+        const newIndex = Math.max(0, highlightedIndex - 1);
+        handleOptionFocus(newIndex);
+        scrollMenuIfItemNotInView(menuDiv.current, "up");
+    }
+    function handlePressDown(event) {
+        event.preventDefault();
+        const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
+        handleOptionFocus(newIndex);
+        scrollMenuIfItemNotInView(menuDiv.current, "down");
+    }
+}
+
+// eslint-disable-next-line max-statements
+function MultiSelect({ defaultLabel, allSelectedLabel, options, onOptionsChange, size, }) {
+    const [label, setLabel] = useState(defaultLabel);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const multiSelectContainer = useRef();
+    const multiSelectRef = useRef();
+    const multiSelectClass = classnames(styles$1.multiSelect, {
+        [styles$1.active]: menuVisible,
+        [styles$1.large]: size === "large",
+        [styles$1.small]: size === "small",
+    });
+    function handleMenuVisibility() {
+        multiSelectRef.current.focus();
+        setMenuVisible(!menuVisible);
+    }
+    const handleClickOutside = (e) => {
+        var _a;
+        if (!((_a = multiSelectContainer === null || multiSelectContainer === void 0 ? void 0 : multiSelectContainer.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            setMenuVisible(false);
+        }
+    };
+    function handleKeydown(event) {
+        const { key, metaKey, ctrlKey } = event;
+        if (metaKey || ctrlKey)
+            return;
+        switch (key) {
+            case "Enter":
+            case " ": {
+                if (focused) {
+                    setMenuVisible(!menuVisible);
+                }
+                break;
+            }
+            case "Escape": {
+                multiSelectRef.current.focus();
+                setMenuVisible(false);
+                break;
+            }
+        }
+    }
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    });
+    useEffect(() => {
+        const selected = options.filter(option => option.checked);
+        if (selected.length === 0) {
+            setLabel(defaultLabel);
+        }
+        else if (selected.length == options.length) {
+            setLabel(allSelectedLabel);
+        }
+        else {
+            const selectedLabels = [];
+            selected.forEach(option => selectedLabels.push(option.label));
+            setLabel(selectedLabels.join(", "));
+        }
+    }, [options]);
+    return (React.createElement("div", { ref: multiSelectContainer, className: styles$1.multiSelectContainer, onKeyDown: handleKeydown },
+        React.createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": `${defaultLabel}: ${label}`, "aria-multiselectable": true, "aria-haspopup": true },
+            React.createElement(Text, null, label),
+            React.createElement(Icon, { name: "arrowDown" })),
+        menuVisible && (React.createElement(DropDownMenu, { options: options, setOptions: onOptionsChange }))));
+}
+
+export { MultiSelect as M };

package/dist/MultiSelect-707000e1.js

@@ -0,0 +1,176 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Checkbox = require('./Checkbox-b6e46d80.js');
+var Text = require('./Text-714f7d14.js');
+var Icon = require('./Icon-405a216c.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_248z$1 = ".D-J03az6XL4- {\n  position: relative;\n  width: 100%;\n}\n\n.D-J03az6XL4- * {\n  box-sizing: border-box;\n}\n\n.EzNdHgwsT40- {\n  --field--height: var(--space-largest);\n\n  --field--padding-top: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  --field--padding-left: var(--space-base);\n  --field--padding-right: var(--space-base);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n  width: 100%;\n  height: var(--space-largest);\n  height: var(--field--height);\n  padding-top: calc(var(--space-base) - var(--space-smallest));\n  padding-top: var(--field--padding-top);\n  padding-bottom: calc(var(--space-base) - var(--space-smallest));\n  padding-bottom: var(--field--padding-bottom);\n  padding-left: var(--space-base);\n  padding-left: var(--field--padding-left);\n  padding-right: var(--space-base);\n  padding-right: var(--field--padding-right);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n.EzNdHgwsT40- p {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.D-J03az6XL4-:hover,\n.D-J03az6XL4-.EzNdHgwsT40- {\n  cursor: pointer;\n  caret-color: transparent;\n}\n\n.EzNdHgwsT40-:focus,\n.EzNdHgwsT40-.bu7HWKRu6HI- {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.eQ6yfQg6zLc- {\n  --field--padding-left: calc(var(--space-base) - var(--space-smaller));\n  --field--padding-right: calc(var(--space-base) - var(--space-smaller));\n  --field--height: calc(var(--space-larger) + var(--space-smaller));\n}\n\n.pM-ts4-QMZY- {\n  --field--padding-left: var(--space-large);\n  --field--padding-right: var(--space-large);\n  --field--height: calc(var(--space-extravagant));\n}\n";
+var styles$1 = {"multiSelectContainer":"D-J03az6XL4-","multiSelect":"EzNdHgwsT40-","active":"bu7HWKRu6HI-","small":"eQ6yfQg6zLc-","large":"pM-ts4-QMZY-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = "._0SStdD4KRHs- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: calc(var(--space-extravagant) * 5);\n  box-shadow: var(--shadow-base);\n  margin: 0;\n  padding: 0;\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-large);\n  overflow: auto;\n  background-color: var(--color-surface);\n  -ms-flex-direction: column;\n      flex-direction: column;\n  scroll-behavior: smooth;\n}\n\n._0SStdD4KRHs- li {\n  list-style: none;\n}\n\n.mFSgwOQZJm0- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small) var(--space-base);\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.mFSgwOQZJm0-:focus,\n.mFSgwOQZJm0-.SepF4gvOxq8- {\n  background-color: var(--color-surface--hover);\n  outline-color: var(--color-focus);\n}\n";
+var styles = {"dropDownMenuContainer":"_0SStdD4KRHs-","option":"mFSgwOQZJm0-","active":"SepF4gvOxq8-"};
+styleInject_es.styleInject(css_248z);
+
+function DropDownMenu({ options, setOptions }) {
+    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+    const menuDiv = React.useRef();
+    const handleOptionClick = React.useCallback((clickedOption) => {
+        setOptions(current => current.map(option => {
+            if (option.label == clickedOption.label) {
+                return Object.assign(Object.assign({}, option), { checked: !clickedOption.checked });
+            }
+            return option;
+        }));
+    }, []);
+    function handleOptionHover(event, index) {
+        event.preventDefault();
+        setHighlightedIndex(index);
+    }
+    function handleOptionFocus(index) {
+        setHighlightedIndex(index);
+        if (menuDiv.current) {
+            const option = menuDiv.current.children[index].querySelector("input");
+            option === null || option === void 0 ? void 0 : option.focus();
+        }
+    }
+    function scrollMenuIfItemNotInView(menuDivElement, direction) {
+        const itemDiv = menuDivElement.querySelector(`:nth-child(${highlightedIndex + 1})`);
+        if (!itemDiv)
+            return;
+        const menuTop = menuDivElement.getBoundingClientRect().top;
+        const { top: itemTop, height: itemHeight, bottom: itemBottom, } = itemDiv.getBoundingClientRect();
+        const itemTrueBottom = itemBottom + itemHeight;
+        const menuBottom = menuDivElement.getBoundingClientRect().bottom;
+        if (direction == "up" && itemTop - itemHeight < menuTop) {
+            menuDivElement.scrollTop -= itemHeight;
+        }
+        else if (direction == "down" && itemTrueBottom > menuBottom) {
+            menuDivElement.scrollTop += itemHeight;
+        }
+    }
+    function handleKeyDown(event) {
+        const { key, metaKey, ctrlKey } = event;
+        if (metaKey || ctrlKey)
+            return;
+        switch (key) {
+            case "Enter": {
+                if (highlightedIndex >= 0) {
+                    handleOptionClick(options[highlightedIndex]);
+                }
+                break;
+            }
+            case "ArrowDown": {
+                handlePressDown(event);
+                break;
+            }
+            case "ArrowUp": {
+                handlePressUp(event);
+                break;
+            }
+        }
+    }
+    React.useEffect(() => {
+        // focus first option
+        handleOptionFocus(0);
+    }, [menuDiv]);
+    return (React__default["default"].createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv, onKeyDown: handleKeyDown }, options.map((option, index) => {
+        const optionClass = classnames__default["default"](styles.option, {
+            [styles.active]: index === highlightedIndex,
+        });
+        return (React__default["default"].createElement("li", { key: `${index}-${option.label}`, className: optionClass, onClick: event => {
+                event.stopPropagation();
+                event.preventDefault();
+                handleOptionClick(option);
+            }, onMouseOver: e => handleOptionHover(e, index) },
+            React__default["default"].createElement(Checkbox.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
+    })));
+    function handlePressUp(event) {
+        event.preventDefault();
+        const newIndex = Math.max(0, highlightedIndex - 1);
+        handleOptionFocus(newIndex);
+        scrollMenuIfItemNotInView(menuDiv.current, "up");
+    }
+    function handlePressDown(event) {
+        event.preventDefault();
+        const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
+        handleOptionFocus(newIndex);
+        scrollMenuIfItemNotInView(menuDiv.current, "down");
+    }
+}
+
+// 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);
+    const [focused, setFocused] = React.useState(false);
+    const multiSelectContainer = React.useRef();
+    const multiSelectRef = React.useRef();
+    const multiSelectClass = classnames__default["default"](styles$1.multiSelect, {
+        [styles$1.active]: menuVisible,
+        [styles$1.large]: size === "large",
+        [styles$1.small]: size === "small",
+    });
+    function handleMenuVisibility() {
+        multiSelectRef.current.focus();
+        setMenuVisible(!menuVisible);
+    }
+    const handleClickOutside = (e) => {
+        var _a;
+        if (!((_a = multiSelectContainer === null || multiSelectContainer === void 0 ? void 0 : multiSelectContainer.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            setMenuVisible(false);
+        }
+    };
+    function handleKeydown(event) {
+        const { key, metaKey, ctrlKey } = event;
+        if (metaKey || ctrlKey)
+            return;
+        switch (key) {
+            case "Enter":
+            case " ": {
+                if (focused) {
+                    setMenuVisible(!menuVisible);
+                }
+                break;
+            }
+            case "Escape": {
+                multiSelectRef.current.focus();
+                setMenuVisible(false);
+                break;
+            }
+        }
+    }
+    React.useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    });
+    React.useEffect(() => {
+        const selected = options.filter(option => option.checked);
+        if (selected.length === 0) {
+            setLabel(defaultLabel);
+        }
+        else if (selected.length == options.length) {
+            setLabel(allSelectedLabel);
+        }
+        else {
+            const selectedLabels = [];
+            selected.forEach(option => selectedLabels.push(option.label));
+            setLabel(selectedLabels.join(", "));
+        }
+    }, [options]);
+    return (React__default["default"].createElement("div", { ref: multiSelectContainer, className: styles$1.multiSelectContainer, onKeyDown: handleKeydown },
+        React__default["default"].createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": `${defaultLabel}: ${label}`, "aria-multiselectable": true, "aria-haspopup": true },
+            React__default["default"].createElement(Text.Text, null, label),
+            React__default["default"].createElement(Icon.Icon, { name: "arrowDown" })),
+        menuVisible && (React__default["default"].createElement(DropDownMenu, { options: options, setOptions: onOptionsChange }))));
+}
+
+exports.MultiSelect = MultiSelect;

package/dist/MultiSelect.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MultiSelect = require('./MultiSelect-707000e1.js');
+require('react');
+require('classnames');
+require('./style-inject.es-9d2f5f4e.js');
+require('./Checkbox-b6e46d80.js');
+require('./tslib.es6-754e2961.js');
+require('react-hook-form');
+require('./Icon-405a216c.js');
+require('@jobber/design');
+require('./Text-714f7d14.js');
+require('./Typography-fd88fcce.js');
+
+
+
+exports.MultiSelect = MultiSelect.MultiSelect;

package/dist/MultiSelect.js

@@ -0,0 +1,11 @@
+export { M as MultiSelect } from './MultiSelect-0af9c956.js';
+import 'react';
+import 'classnames';
+import './style-inject.es-a0e1a0ba.js';
+import './Checkbox-a91b14f7.js';
+import './tslib.es6-c563c1dd.js';
+import 'react-hook-form';
+import './Icon-22723fe6.js';
+import '@jobber/design';
+import './Text-c92ddeb3.js';
+import './Typography-52ed1386.js';

package/dist/Option-58d7cab6.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { F as FormField } from './FormField-f1f405d2.js';
+
+function Select(props) {
+    return React.createElement(FormField, Object.assign({ type: "select" }, props));
+}
+
+function SelectOption({ children, disabled, value }) {
+    return (React.createElement("option", { disabled: disabled, value: value }, children));
+}
+
+export { Select as S, SelectOption as a };

package/dist/Option-73515eec.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var FormField = require('./FormField-fc30bb1a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Select(props) {
+    return React__default["default"].createElement(FormField.FormField, Object.assign({ type: "select" }, props));
+}
+
+function SelectOption({ children, disabled, value }) {
+    return (React__default["default"].createElement("option", { disabled: disabled, value: value }, children));
+}
+
+exports.Select = Select;
+exports.SelectOption = SelectOption;

package/dist/Page-0b334096.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useResizeObserver, Breakpoints } from '@jobber/hooks/useResizeObserver';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { H as Heading } from './Heading-dfd4f1cf.js';
+import { T as Text } from './Text-c92ddeb3.js';
+import { C as Content } from './Content-c96e9299.js';
+import { M as Markdown } from './Markdown-7b84fcdb.js';
+import { B as Button } from './Button-30154871.js';
+import { M as Menu } from './Menu-fb0b2e9b.js';
+import { E as Emphasis } from './Emphasis-2a640962.js';
+
+var css_248z = ".pVEdXlwstrc- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-base);\n}\n\n@media (--medium-screens-and-up) {\n\n.pVEdXlwstrc- {\n    padding: var(--space-large);\n}\n  }\n\n._9r84iz--C5M- {\n  max-width: none;\n}\n\n._0LO26JFXU9g- {\n  max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n  max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n  -ms-flex: 1 0 auto;\n      flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\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.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\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.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n  -ms-flex: 0 0 100%;\n      flex: 0 0 100%;\n  margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n  margin-top: var(--space-small);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n  width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n  margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n  margin: 0;\n  -ms-flex: 0 auto;\n      flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n  margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n  margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n  margin-bottom: var(--space-base);\n}\n";
+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-"};
+styleInject(css_248z);
+
+// eslint-disable-next-line max-statements
+function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
+    const pageStyles = classnames(styles.page, styles[width]);
+    const [titleBarRef, { width: titleBarWidth = Breakpoints.large }] = useResizeObserver();
+    const titleBarClasses = classnames(styles.titleBar, {
+        [styles.small]: titleBarWidth > Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > Breakpoints.small,
+        [styles.large]: titleBarWidth > Breakpoints.base,
+    });
+    const showMenu = moreActionsMenu.length > 0;
+    const 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.createElement("div", { className: pageStyles },
+        React.createElement(Content, null,
+            React.createElement(Content, null,
+                React.createElement("div", { className: titleBarClasses, ref: titleBarRef },
+                    React.createElement("div", null,
+                        React.createElement(Heading, { level: 1 }, title),
+                        subtitle && (React.createElement("div", { className: styles.subtitle },
+                            React.createElement(Text, { size: "large", variation: "subdued" },
+                                React.createElement(Emphasis, { variation: "bold" },
+                                    React.createElement(Markdown, { content: subtitle, basicUsage: true })))))),
+                    showActionGroup && (React.createElement("div", { className: styles.actionGroup },
+                        primaryAction && (React.createElement("div", { className: styles.primaryAction },
+                            React.createElement(Button, Object.assign({}, primaryAction)))),
+                        secondaryAction && (React.createElement("div", { className: styles.actionButton },
+                            React.createElement(Button, Object.assign({}, secondaryAction)))),
+                        showMenu && (React.createElement("div", { className: styles.actionButton },
+                            React.createElement(Menu, { items: moreActionsMenu })))))),
+                intro && (React.createElement(Text, { size: "large" },
+                    React.createElement(Markdown, { content: intro, basicUsage: true, externalLink: externalIntroLinks })))),
+            React.createElement(Content, null, children))));
+}
+
+export { Page as P };

package/dist/Page-fdb087db.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var jobberHooks = require('@jobber/hooks/useResizeObserver');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Heading = require('./Heading-a8a24775.js');
+var Text = require('./Text-714f7d14.js');
+var Content = require('./Content-60a3452a.js');
+var Markdown = require('./Markdown-36854bd5.js');
+var Button = require('./Button-ec64869e.js');
+var Menu = require('./Menu-5ce3cf41.js');
+var Emphasis = require('./Emphasis-84de1f3f.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_248z = ".pVEdXlwstrc- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-base);\n}\n\n@media (--medium-screens-and-up) {\n\n.pVEdXlwstrc- {\n    padding: var(--space-large);\n}\n  }\n\n._9r84iz--C5M- {\n  max-width: none;\n}\n\n._0LO26JFXU9g- {\n  max-width: calc(var(--base-unit) * 80);\n}\n\n.KiMIF8eFbuE- {\n  max-width: calc(var(--base-unit) * 64);\n}\n\n.GCeQrLFyml4- h1 {\n  -ms-flex: 0 1 auto;\n      flex: 0 1 auto;\n  margin-bottom: var(--space-base);\n}\n\n.GCeQrLFyml4- > .KP-BTjB82iQ- {\n  -ms-flex: 1 0 auto;\n      flex: 1 0 auto;\n}\n\n.GCeQrLFyml4-.GuFU-PgC1j4-,\n.GCeQrLFyml4-.qiwlkB5pxkA- {\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.GCeQrLFyml4-.CbPnpIk7-EE- .KP-BTjB82iQ- {\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.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ-,\n.GCeQrLFyml4-.GuFU-PgC1j4- .KP-BTjB82iQ- {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .KP-BTjB82iQ- {\n  -ms-flex-pack: end;\n      justify-content: flex-end;\n}\n\n.E5FEsck9zwg- {\n  -ms-flex: 0 0 100%;\n      flex: 0 0 100%;\n  margin-bottom: var(--space-small);\n}\n\n.Sn3-wJuNCqk- {\n  margin-top: var(--space-small);\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.Sn3-wJuNCqk- > div {\n  width: 100%;\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- {\n  margin-top: 0;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .E5FEsck9zwg-,\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n  margin: 0;\n  -ms-flex: 0 auto;\n      flex: 0 auto;\n}\n\n.GCeQrLFyml4-.qiwlkB5pxkA- .Sn3-wJuNCqk- {\n  margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4-.CbPnpIk7-EE- .Sn3-wJuNCqk- + .Sn3-wJuNCqk- {\n  margin-left: var(--space-small);\n}\n\n.GCeQrLFyml4- ._9ZKFDK2jL80- {\n  margin-bottom: var(--space-base);\n}\n";
+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-"};
+styleInject_es.styleInject(css_248z);
+
+// eslint-disable-next-line max-statements
+function Page({ title, intro, externalIntroLinks, subtitle, children, width = "standard", primaryAction, secondaryAction, moreActionsMenu = [], }) {
+    const pageStyles = classnames__default["default"](styles.page, styles[width]);
+    const [titleBarRef, { width: titleBarWidth = jobberHooks.Breakpoints.large }] = jobberHooks.useResizeObserver();
+    const titleBarClasses = classnames__default["default"](styles.titleBar, {
+        [styles.small]: titleBarWidth > jobberHooks.Breakpoints.smaller,
+        [styles.medium]: titleBarWidth > jobberHooks.Breakpoints.small,
+        [styles.large]: titleBarWidth > jobberHooks.Breakpoints.base,
+    });
+    const showMenu = moreActionsMenu.length > 0;
+    const 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, Object.assign({}, primaryAction)))),
+                        secondaryAction && (React__default["default"].createElement("div", { className: styles.actionButton },
+                            React__default["default"].createElement(Button.Button, Object.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/Page.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Page = require('./Page-fdb087db.js');
+require('react');
+require('classnames');
+require('@jobber/hooks/useResizeObserver');
+require('./style-inject.es-9d2f5f4e.js');
+require('./Heading-a8a24775.js');
+require('./Typography-fd88fcce.js');
+require('./getAtlantisConfig-0f3e8af2.js');
+require('./Text-714f7d14.js');
+require('./Content-60a3452a.js');
+require('./Markdown-36854bd5.js');
+require('react-markdown');
+require('./Emphasis-84de1f3f.js');
+require('./Button-ec64869e.js');
+require('react-router-dom');
+require('./Icon-405a216c.js');
+require('@jobber/design');
+require('./Menu-5ce3cf41.js');
+require('framer-motion');
+require('@jobber/hooks/useOnKeyDown');
+require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useSafeLayoutEffect');
+
+
+
+exports.Page = Page.Page;

package/dist/Page.js

@@ -0,0 +1,22 @@
+export { P as Page } from './Page-0b334096.js';
+import 'react';
+import 'classnames';
+import '@jobber/hooks/useResizeObserver';
+import './style-inject.es-a0e1a0ba.js';
+import './Heading-dfd4f1cf.js';
+import './Typography-52ed1386.js';
+import './getAtlantisConfig-5b50057c.js';
+import './Text-c92ddeb3.js';
+import './Content-c96e9299.js';
+import './Markdown-7b84fcdb.js';
+import 'react-markdown';
+import './Emphasis-2a640962.js';
+import './Button-30154871.js';
+import 'react-router-dom';
+import './Icon-22723fe6.js';
+import '@jobber/design';
+import './Menu-fb0b2e9b.js';
+import 'framer-motion';
+import '@jobber/hooks/useOnKeyDown';
+import '@jobber/hooks/useRefocusOnActivator';
+import '@jobber/hooks/useSafeLayoutEffect';