@jobber/components 4.1.0 → 4.1.1

package/dist/{Modal-cc3bd7bf.js → Modal-757e83fd.js}

@@ -1,15 +1,14 @@
 '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 jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Heading = require('./Heading-a9a66964.js');
-var Button = require('./Button-cd30df0f.js');
-var ButtonDismiss = require('./ButtonDismiss-a9590195.js');
+var Heading = require('./Heading-7b203f7f.js');
+var Button = require('./Button-16e043ec.js');
+var ButtonDismiss = require('./ButtonDismiss-3fb1eaf9.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,13 +24,12 @@ var css = "._1rPyLQMc1nSLWx4zAzSas0 {\n  --modal--padding: var(--space-base);\n
 var sizes = {"small":"_1rPyLQMc1nSLWx4zAzSas0","large":"_3GkHDHYnN_8P6NQFVSfYiB"};
 styleInject_es.styleInject(css);
 
-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]);
+function Modal({ open = false, title, size, dismissible = true, children, primaryAction, secondaryAction, tertiaryAction, onRequestClose, }) {
+    const modalClassName = classnames__default["default"](styles.modal, size && sizes[size]);
     jobberHooks.useRefocusOnActivator(open);
-    var modalRef = jobberHooks.useFocusTrap(open);
+    const modalRef = jobberHooks.useFocusTrap(open);
     jobberHooks.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 },
+    const 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,
@@ -47,15 +45,13 @@ function Modal(_a) {
         }
     }
 }
-function Header(_a) {
-    var title = _a.title, dismissible = _a.dismissible, onRequestClose = _a.onRequestClose;
+function Header({ title, dismissible, onRequestClose }) {
     return (React__default["default"].createElement("div", { className: styles.header, "data-testid": "modal-header" },
         React__default["default"].createElement(Heading.Heading, { level: 3 }, 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;
+function Actions({ primary, secondary, tertiary }) {
+    const shouldShow = primary != undefined || secondary != undefined || tertiary != undefined;
     if (secondary != undefined) {
         secondary = Object.assign({ type: "primary", variation: "subtle" }, secondary);
     }
@@ -64,10 +60,10 @@ function Actions(_a) {
     }
     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))),
+            primary && React__default["default"].createElement(Button.Button, Object.assign({}, primary)),
+            secondary && React__default["default"].createElement(Button.Button, Object.assign({}, secondary))),
         tertiary && (React__default["default"].createElement("div", { className: styles.leftAction },
-            React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, tertiary))))))));
+            React__default["default"].createElement(Button.Button, Object.assign({}, tertiary))))))));
 }
 
 exports.Modal = Modal;

package/dist/MultiSelect/index.js

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Checkbox = require('../Checkbox-5103d2b9.js');
-var Text = require('../Text-e012fb46.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-require('../Typography-fbe0ed6e.js');
+var Checkbox = require('../Checkbox-c1efc2f6.js');
+var Text = require('../Text-7ce00adb.js');
+var Icon = require('../Icon-405a216c.js');
+require('../Typography-9262511f.js');
 require('@jobber/design');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -28,30 +27,27 @@ styleInject_es.styleInject(css);
 
 function handleKeyboardShortcut(setupKeyListeners) {
     function callback(event) {
-        var metaKey = event.metaKey, ctrlKey = event.ctrlKey, key = event.key, target = event.target;
-        var shouldTriggerShortcut = target instanceof HTMLButtonElement ? metaKey || ctrlKey : true;
+        const { metaKey, ctrlKey, key, target } = event;
+        const shouldTriggerShortcut = target instanceof HTMLButtonElement ? metaKey || ctrlKey : true;
         if (!shouldTriggerShortcut)
             return;
         event.preventDefault();
         event.stopPropagation();
         setupKeyListeners(key);
     }
-    return { callback: callback };
+    return { callback };
 }
 
-function DropDownMenu(_a) {
-    var options = _a.options, setOptions = _a.setOptions;
-    var _b = tslib_es6.__read(React.useState(0), 2), highlightedIndex = _b[0], setHighlightedIndex = _b[1];
-    var menuDiv = React.useRef();
-    var handleOptionClick = React.useCallback(function (clickedOption) {
-        setOptions(function (current) {
-            return current.map(function (option) {
-                if (option.label == clickedOption.label) {
-                    return tslib_es6.__assign(tslib_es6.__assign({}, option), { checked: !clickedOption.checked });
-                }
-                return option;
-            });
-        });
+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();
@@ -60,18 +56,18 @@ function DropDownMenu(_a) {
     function handleOptionFocus(index) {
         setHighlightedIndex(index);
         if (menuDiv.current) {
-            var option = menuDiv.current.children[index].querySelector("input");
+            const option = menuDiv.current.children[index].querySelector("input");
             option === null || option === void 0 ? void 0 : option.focus();
         }
     }
     function scrollMenuIfItemNotInView(menuDivElement, direction) {
-        var itemDiv = menuDivElement.querySelector(":nth-child(" + (highlightedIndex + 1) + ")");
+        const itemDiv = menuDivElement.querySelector(`:nth-child(${highlightedIndex + 1})`);
         if (!itemDiv)
             return;
-        var menuTop = menuDivElement.getBoundingClientRect().top;
-        var _a = itemDiv.getBoundingClientRect(), itemTop = _a.top, itemHeight = _a.height, itemBottom = _a.bottom;
-        var itemTrueBottom = itemBottom + itemHeight;
-        var menuBottom = menuDivElement.getBoundingClientRect().bottom;
+        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;
         }
@@ -89,13 +85,13 @@ function DropDownMenu(_a) {
                 break;
             }
             case "ArrowDown": {
-                var newIndex = Math.min(options.length - 1, highlightedIndex + 1);
+                const newIndex = Math.min(options.length - 1, highlightedIndex + 1);
                 handleOptionFocus(newIndex);
                 scrollMenuIfItemNotInView(menuDiv.current, "down");
                 break;
             }
             case "ArrowUp": {
-                var newIndex = Math.max(0, highlightedIndex - 1);
+                const newIndex = Math.max(0, highlightedIndex - 1);
                 handleOptionFocus(newIndex);
                 scrollMenuIfItemNotInView(menuDiv.current, "up");
                 break;
@@ -108,43 +104,40 @@ function DropDownMenu(_a) {
         "ArrowDown",
         "ArrowUp",
     ]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         // focus first option
         handleOptionFocus(0);
     }, [menuDiv]);
-    return (React__default["default"].createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv }, options.map(function (option, index) {
-        var _a;
-        var optionClass = classnames__default["default"](styles.option, (_a = {},
-            _a[styles.active] = index === highlightedIndex,
-            _a));
-        return (React__default["default"].createElement("li", { key: index + "-" + option.label, className: optionClass, onClick: function (event) {
+    return (React__default["default"].createElement("ul", { "data-testid": "dropdown-menu", className: styles.dropDownMenuContainer, ref: menuDiv }, 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: function (e) { return handleOptionHover(e, index); } },
-            React__default["default"].createElement(Checkbox.Checkbox, { label: option.label, checked: option.checked, onFocus: function () { return setHighlightedIndex(index); } })));
+            }, onMouseOver: e => handleOptionHover(e, index) },
+            React__default["default"].createElement(Checkbox.Checkbox, { label: option.label, checked: option.checked, onFocus: () => setHighlightedIndex(index) })));
     })));
 }
 
 // eslint-disable-next-line max-statements
-function MultiSelect(_a) {
-    var _b;
-    var defaultLabel = _a.defaultLabel, allSelectedLabel = _a.allSelectedLabel, options = _a.options, onOptionsChange = _a.onOptionsChange, size = _a.size;
-    var _c = tslib_es6.__read(React.useState(defaultLabel), 2), label = _c[0], setLabel = _c[1];
-    var _d = tslib_es6.__read(React.useState(false), 2), menuVisible = _d[0], setMenuVisible = _d[1];
-    var _e = tslib_es6.__read(React.useState(false), 2), focused = _e[0], setFocused = _e[1];
-    var multiSelectContainer = React.useRef();
-    var multiSelectRef = React.useRef();
-    var multiSelectClass = classnames__default["default"](styles$1.multiSelect, (_b = {},
-        _b[styles$1.active] = menuVisible,
-        _b[styles$1.large] = size === "large",
-        _b[styles$1.small] = size === "small",
-        _b));
+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);
     }
-    var handleClickOutside = function (e) {
+    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);
@@ -171,12 +164,12 @@ function MultiSelect(_a) {
         " ",
         "Escape",
     ]);
-    React.useEffect(function () {
+    React.useEffect(() => {
         document.addEventListener("mousedown", handleClickOutside);
-        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     });
-    React.useEffect(function () {
-        var selected = options.filter(function (option) { return option.checked; });
+    React.useEffect(() => {
+        const selected = options.filter(option => option.checked);
         if (selected.length === 0) {
             setLabel(defaultLabel);
         }
@@ -184,13 +177,13 @@ function MultiSelect(_a) {
             setLabel(allSelectedLabel);
         }
         else {
-            var selectedLabels_1 = [];
-            selected.forEach(function (option) { return selectedLabels_1.push(option.label); });
-            setLabel(selectedLabels_1.join(", "));
+            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 },
-        React__default["default"].createElement("div", { "data-testid": "multi-select", className: multiSelectClass, onClick: handleMenuVisibility, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); }, tabIndex: 0, ref: multiSelectRef, role: "button", "aria-label": defaultLabel + ": " + label, "aria-multiselectable": true, "aria-haspopup": true },
+        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 }))));

package/dist/MultiSelect/types.d.ts

@@ -10,4 +10,4 @@ export interface Option {
      */
     checked: boolean;
 }
-export declare type Options = Array<Option>;
+export type Options = Array<Option>;

package/dist/{Option-7d5de76b.js → Option-4b665afd.js}

@@ -1,19 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
-var FormField = require('./FormField-ac310b6f.js');
+var FormField = require('./FormField-79a0a375.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, tslib_es6.__assign({ type: "select" }, props));
+    return React__default["default"].createElement(FormField.FormField, Object.assign({ type: "select" }, props));
 }
 
-function SelectOption(_a) {
-    var children = _a.children, disabled = _a.disabled, value = _a.value;
+function SelectOption({ children, disabled, value }) {
     return (React__default["default"].createElement("option", { disabled: disabled, value: value }, children));
 }
 

package/dist/Page/Page.d.ts

@@ -54,6 +54,6 @@ interface PageWithIntroProps extends PageFoundationProps {
      */
     readonly externalIntroLinks?: boolean;
 }
-export declare type PageProps = XOR<PageFoundationProps, PageWithIntroProps>;
+export 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.js

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-a9a66964.js');
-var Text = require('../Text-e012fb46.js');
-var Content = require('../Content-18de5fbb.js');
-var Markdown = require('../Markdown-b53e0308.js');
-var Button = require('../Button-cd30df0f.js');
-var Menu = require('../Menu-826cfb89.js');
-var Emphasis = require('../Emphasis-75a3f411.js');
-require('../Typography-fbe0ed6e.js');
+var Heading = require('../Heading-7b203f7f.js');
+var Text = require('../Text-7ce00adb.js');
+var Content = require('../Content-05df8f7f.js');
+var Markdown = require('../Markdown-be2dcd0c.js');
+var Button = require('../Button-16e043ec.js');
+var Menu = require('../Menu-d6a7d17b.js');
+var Emphasis = require('../Emphasis-23dc2a0a.js');
+require('../Typography-9262511f.js');
 require('react-markdown');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 require('uuid');
 require('framer-motion');
@@ -32,18 +31,16 @@ var styles = {"page":"D_deCgrOv6-H73MnfGJvm","fill":"_1ApfukxxkhoI4O2hiz5Uwn","s
 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__default["default"](styles.page, styles[width]);
-    var _e = tslib_es6.__read(jobberHooks.useResizeObserver(), 2), titleBarRef = _e[0], _f = _e[1].width, titleBarWidth = _f === void 0 ? jobberHooks.Breakpoints.large : _f;
-    var titleBarClasses = classnames__default["default"](styles.titleBar, (_b = {},
-        _b[styles.small] = titleBarWidth > jobberHooks.Breakpoints.smaller,
-        _b[styles.medium] = titleBarWidth > jobberHooks.Breakpoints.small,
-        _b[styles.large] = titleBarWidth > jobberHooks.Breakpoints.base,
-        _b));
-    var showMenu = moreActionsMenu.length > 0;
-    var showActionGroup = showMenu || primaryAction;
+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);
     }
@@ -65,9 +62,9 @@ function Page(_a) {
                                     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)))),
+                            React__default["default"].createElement(Button.Button, Object.assign({}, primaryAction)))),
                         secondaryAction && (React__default["default"].createElement("div", { className: styles.actionButton },
-                            React__default["default"].createElement(Button.Button, tslib_es6.__assign({}, secondaryAction)))),
+                            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" },

package/dist/Popover/index.js

@@ -2,18 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var reactPopper = require('react-popper');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var ButtonDismiss = require('../ButtonDismiss-a9590195.js');
-require('../Button-cd30df0f.js');
+var ButtonDismiss = require('../ButtonDismiss-3fb1eaf9.js');
+require('../Button-16e043ec.js');
 require('classnames');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,23 +22,22 @@ var css = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--pad
 var classes = {"header":"bmcwfoRgxW9uxv0uyXH04","dismissButton":"TjIegPUFwvTBnPHT-hzfN","popover":"_1v-Ekqld7VhWiu8_bFt62z","arrow":"ZBY5pcUZw7V-86CZwsJcF"};
 styleInject_es.styleInject(css);
 
-function Popover(_a) {
-    var onRequestClose = _a.onRequestClose, children = _a.children, attachTo = _a.attachTo, open = _a.open, _b = _a.preferredPlacement, preferredPlacement = _b === void 0 ? "auto" : _b;
-    var _c = tslib_es6.__read(React.useState(), 2), popperElement = _c[0], setPopperElement = _c[1];
-    var _d = tslib_es6.__read(React.useState(), 2), arrowElement = _d[0], setArrowElement = _d[1];
-    var _e = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", }) {
+    const [popperElement, setPopperElement] = React.useState();
+    const [arrowElement, setArrowElement] = React.useState();
+    const { styles: popperStyles, attributes } = reactPopper.usePopper(attachTo instanceof Element ? attachTo : attachTo.current, popperElement, {
         modifiers: buildModifiers(arrowElement),
         placement: preferredPlacement,
-    }), popperStyles = _e.styles, attributes = _e.attributes;
+    });
     jobberHooks.useRefocusOnActivator(open);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", tslib_es6.__assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", Object.assign({ role: "dialog", ref: setPopperElement, style: popperStyles.popper, className: classes.popover }, attributes.popper),
         React__default["default"].createElement("div", { className: classes.dismissButton },
             React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
         React__default["default"].createElement("div", { ref: setArrowElement, className: classes.arrow, style: popperStyles.arrow })))));
 }
 function buildModifiers(arrowElement) {
-    var modifiers = [
+    const modifiers = [
         {
             name: "arrow",
             options: { element: arrowElement, padding: 10 },

package/dist/ProgressBar/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressBar = require('../ProgressBar-e9a49129.js');
+var ProgressBar = require('../ProgressBar-f028b159.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');

package/dist/{ProgressBar-e9a49129.js → ProgressBar-f028b159.js}

@@ -17,10 +17,9 @@ var css = "._3m4bLvy45VVeWhtP3H5dQ3 {\n  --progress-bar--height: var(--space-sma
 var sizes = {"small":"_3m4bLvy45VVeWhtP3H5dQ3","base":"_2gLOi6dJvWt7HGwcOX4GlO"};
 styleInject_es.styleInject(css);
 
-function ProgressBar(_a) {
-    var currentStep = _a.currentStep, totalSteps = _a.totalSteps, _b = _a.size, size = _b === void 0 ? "base" : _b;
-    var percentage = (currentStep / totalSteps) * 100;
-    var progressBarClassName = classnames__default["default"](styles.ProgressBar, sizes[size]);
+function ProgressBar({ currentStep, totalSteps, size = "base", }) {
+    const percentage = (currentStep / totalSteps) * 100;
+    const progressBarClassName = classnames__default["default"](styles.ProgressBar, sizes[size]);
     return (React__default["default"].createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
         percentage,
         "%"));

package/dist/RadioGroup/RadioOption.d.ts

@@ -14,7 +14,7 @@ interface RadioOptionsWithDescription extends BaseRadioOptions {
      */
     description?: string;
 }
-declare type RadioOptionProps = XOR<RadioOptionsWithDescription, PropsWithChildren<BaseRadioOptions>>;
+type RadioOptionProps = XOR<RadioOptionsWithDescription, PropsWithChildren<BaseRadioOptions>>;
 /**
  * For rendering props only. To make updates to
  * the real RadioOption, look at InternalRadioOption
@@ -29,6 +29,6 @@ interface InternalRadioOptionsWithDescription extends BaseInternalRadioOptions {
     label: string;
     description?: string;
 }
-declare type InternalRadioOptionProps = XOR<InternalRadioOptionsWithDescription, PropsWithChildren<BaseInternalRadioOptions>>;
+type InternalRadioOptionProps = XOR<InternalRadioOptionsWithDescription, PropsWithChildren<BaseInternalRadioOptions>>;
 export declare function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }: PropsWithChildren<InternalRadioOptionProps>): JSX.Element;
 export {};

package/dist/RadioGroup/index.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var uuid = require('uuid');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Text = require('../Text-e012fb46.js');
-require('../Typography-fbe0ed6e.js');
+var Text = require('../Text-7ce00adb.js');
+require('../Typography-9262511f.js');
 require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,26 +21,23 @@ styleInject_es.styleInject(css);
  * For rendering props only. To make updates to
  * the real RadioOption, look at InternalRadioOption
  */
-function RadioOption(_a) {
-    var children = _a.children;
+function RadioOption({ children }) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
-function InternalRadioOption(_a) {
-    var value = _a.value, name = _a.name, label = _a.label, description = _a.description, disabled = _a.disabled, checked = _a.checked, children = _a.children, onChange = _a.onChange;
-    var inputId = value.toString() + "_" + uuid.v1();
+function InternalRadioOption({ value, name, label, description, disabled, checked, children, onChange, }) {
+    const inputId = `${value.toString()}_${uuid.v1()}`;
     return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? inputId + "_description" : undefined }),
+        React__default["default"].createElement("input", { onChange: handleChange, type: "radio", name: name, value: value, disabled: disabled, checked: checked, id: inputId, className: styles.input, "aria-describedby": description ? `${inputId}_description` : undefined }),
         React__default["default"].createElement("label", { className: styles.label, htmlFor: inputId }, label ? label : children),
-        description && (React__default["default"].createElement("div", { className: styles.description, id: inputId + "_description" },
+        description && (React__default["default"].createElement("div", { className: styles.description, id: `${inputId}_description` },
             React__default["default"].createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
     function handleChange() {
         onChange(value);
     }
 }
 
-function RadioGroup(_a) {
-    var children = _a.children, value = _a.value, ariaLabel = _a.ariaLabel, onChange = _a.onChange, _b = _a.name, name = _b === void 0 ? uuid.v1() : _b;
-    return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, function (option) { return (React__default["default"].createElement(InternalRadioOption, tslib_es6.__assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)); })));
+function RadioGroup({ children, value, ariaLabel, onChange, name = uuid.v1(), }) {
+    return (React__default["default"].createElement("div", { role: "radiogroup", "aria-label": ariaLabel, className: styles.radioGroup }, React__default["default"].Children.map(children, option => (React__default["default"].createElement(InternalRadioOption, Object.assign({ checked: value === option.props.value, name: name, onChange: handleChange }, option.props), option.props.children)))));
     function handleChange(newValue) {
         if (newValue !== value) {
             onChange(newValue);

package/dist/RecurringSelect/types.d.ts

@@ -7,7 +7,7 @@ export declare enum WeekDay {
     Friday = 5,
     Saturday = 6
 }
-export declare type DayOfMonth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | "LAST";
+export type DayOfMonth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | "LAST";
 export declare enum DurationPeriod {
     Day = "Day",
     Week = "Week",
@@ -34,7 +34,7 @@ export interface RecurrenceRuleWeekDayOfMonth {
     type: DurationPeriod.WeekDayOfMonth;
     dayOfWeek: [Set<WeekDay>, Set<WeekDay>, Set<WeekDay>, Set<WeekDay>];
 }
-export declare type RecurrenceRule = {
+export type RecurrenceRule = {
     interval: number;
 } & (RecurrenceRuleDay | RecurrenceRuleWeek | RecurrenceRuleYear | RecurrenceRuleDayOfMonth | RecurrenceRuleWeekDayOfMonth);
 export interface InitialStateMap {

package/dist/Select/Select.d.ts

@@ -6,6 +6,6 @@ import { FormFieldProps } from "../FormField";
  * Unfortunately Docz doesn't currently support Omit so it has been reduced to
  * its component parts.
  */
-declare type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef">>;
+type SelectProps = Pick<FormFieldProps, Exclude<keyof FormFieldProps, "type" | "rows" | "keyboard" | "actionsRef">>;
 export declare function Select(props: SelectProps): JSX.Element;
 export {};

package/dist/Select/index.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Option = require('../Option-7d5de76b.js');
-require('../tslib.es6-5b50eb8e.js');
+var Option = require('../Option-4b665afd.js');
 require('react');
-require('../FormField-ac310b6f.js');
+require('../FormField-79a0a375.js');
+require('../tslib.es6-efe27175.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
 require('classnames');
-require('../Button-cd30df0f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-fbe0ed6e.js');
-require('../Text-e012fb46.js');
-require('../InputValidation-06a8a7ba.js');
+require('../Typography-9262511f.js');
+require('../Text-7ce00adb.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 
 
 

package/dist/Spinner/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Spinner = require('../Spinner-e4e9c8eb.js');
+var Spinner = require('../Spinner-ae4c8a85.js');
 require('react');
 require('classnames');
 require('../style-inject.es-dcee06b6.js');