@jobber/components 4.71.7 → 4.72.0

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-dde21526.js');
+var Card = require('../Card-426a68a8.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');
@@ -13,7 +13,7 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-da5d8217.js');
+require('../Menu-81b12936.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/{Card-dde21526.js → Card-426a68a8.js}

@@ -5,7 +5,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
 var Heading = require('./Heading-1e8e4bd3.js');
 var Button = require('./Button-b73a5e01.js');
-var Menu = require('./Menu-da5d8217.js');
+var Menu = require('./Menu-81b12936.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/DataDump/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Card = require('../Card-dde21526.js');
+var Card = require('../Card-426a68a8.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('classnames');
@@ -15,7 +15,7 @@ require('../Button-b73a5e01.js');
 require('react-router-dom');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Menu-da5d8217.js');
+require('../Menu-81b12936.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks/useOnKeyDown');

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
-var InputFile = require('../InputFile-271f6d31.js');
+var InputFile = require('../InputFile-8767b7fd.js');
 var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-b73a5e01.js');
 require('classnames');
@@ -16,8 +16,11 @@ require('@jobber/design');
 require('react-dropzone');
 require('axios');
 require('uuid');
-require('../Content-2ca1ffe1.js');
+require('../InputValidation-a7a737f9.js');
+require('framer-motion');
+require('../Text-259af966.js');
 require('../Typography-c45bf216.js');
+require('../Content-2ca1ffe1.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/InputFile/InputFile.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FileError } from "react-dropzone";
 export interface FileUpload {
     /**
      * File Identifier
@@ -113,8 +114,16 @@ interface InputFileProps {
      * Upload event handler. Triggered on upload completion.
      */
     onUploadComplete?(file: FileUpload): void;
+    /**
+     *  Upload event handler. Triggered on upload error.
+     */
+    onUploadError?(error: Error): void;
+    /**
+     * Pass a custom validator function that will be called when a file is dropped.
+     */
+    readonly validator?: <T extends File>(file: T) => FileError | FileError[] | null;
 }
-export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }: InputFileProps): JSX.Element;
+export declare function InputFile({ variation, size, buttonLabel: providedButtonLabel, allowMultiple, allowedTypes, getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }: InputFileProps): JSX.Element;
 /**
  * Upsert a given `FileUpload` into an array of `FileUpload`s.
  * `key` is used to uniquely identify files.

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-271f6d31.js');
+var InputFile = require('../InputFile-8767b7fd.js');
 require('../tslib.es6-5b8768b7.js');
 require('react');
 require('classnames');
@@ -10,11 +10,14 @@ require('react-dropzone');
 require('axios');
 require('uuid');
 require('../style-inject.es-9d2f5f4e.js');
-require('../Button-b73a5e01.js');
-require('react-router-dom');
+require('../InputValidation-a7a737f9.js');
+require('framer-motion');
+require('../Text-259af966.js');
+require('../Typography-c45bf216.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../Typography-c45bf216.js');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
 require('../Content-2ca1ffe1.js');
 
 

package/dist/{InputFile-271f6d31.js → InputFile-8767b7fd.js}

@@ -7,6 +7,7 @@ var reactDropzone = require('react-dropzone');
 var axios = require('axios');
 var uuid = require('uuid');
 var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var InputValidation = require('./InputValidation-a7a737f9.js');
 var Button = require('./Button-b73a5e01.js');
 var Content = require('./Content-2ca1ffe1.js');
 var Typography = require('./Typography-c45bf216.js');
@@ -17,14 +18,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
-var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n";
-var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-"};
+var css_248z = ".grljXfTWj84- {\n  font-size: 0;\n  line-height: 0;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n}\n\n.grljXfTWj84-:focus,\n.grljXfTWj84-:focus-within {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  outline: none;\n}\n\n.WHhHWgaoXk4- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border: rgb(217, 223, 225) dashed calc(16px / 8);\n  border: var(--color-border) dashed var(--border-thick);\n  border-radius: calc(16px / 2);\n  border-radius: var(--radius-larger);\n  text-align: center;\n}\n\n.WHhHWgaoXk4-.n1h-T2metRA- {\n  border-color: rgb(147, 161, 169);\n  border-color: var(--color-focus);\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.WHhHWgaoXk4-.MRRclAp51-w- {\n  border-color: rgb(201, 66, 33);\n  border-color: var(--color-critical);\n}\n\n.TIbSRNvDK10- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n";
+var styles = {"dropZoneBase":"grljXfTWj84-","dropZone":"WHhHWgaoXk4-","active":"n1h-T2metRA-","error":"MRRclAp51-w-","validationErrors":"TIbSRNvDK10-"};
 styleInject_es.styleInject(css_248z);
 
-function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, }) {
+function InputFile({ variation = "dropzone", size = "base", buttonLabel: providedButtonLabel, allowMultiple = false, allowedTypes = "all", getUploadParams, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, validator, }) {
     const options = {
         multiple: allowMultiple,
         onDrop: React.useCallback(handleDrop, [uploadFile]),
+        validator: validator && React.useCallback(validator, []),
     };
     if (allowedTypes === "images") {
         options.accept = "image/*";
@@ -35,18 +37,26 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     else if (Array.isArray(allowedTypes)) {
         options.accept = allowedTypes.join(",");
     }
-    const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone(options);
+    const { getRootProps, getInputProps, isDragActive, fileRejections } = reactDropzone.useDropzone(options);
+    const validationErrors = fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.map(({ file, errors }) => {
+        return errors.map(error => {
+            return (React__default["default"].createElement(InputValidation.InputValidation, { message: `${file.name} ${error.message}`, key: `${file.name}${error.code}` }));
+        });
+    });
     const { buttonLabel, hintText } = getLabels(providedButtonLabel, allowMultiple, allowedTypes);
     const dropZone = classnames__default["default"](styles.dropZoneBase, {
         [styles.dropZone]: variation === "dropzone",
         [styles.active]: isDragActive,
+        [styles.error]: (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0,
     });
-    return (React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
-        React__default["default"].createElement("input", Object.assign({}, getInputProps())),
-        variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
-            React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
-            size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
-        variation === "button" && (React__default["default"].createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", Object.assign({}, getRootProps({ className: dropZone }), { tabIndex: variation === "button" ? -1 : 0 }),
+            React__default["default"].createElement("input", Object.assign({}, getInputProps())),
+            variation === "dropzone" && (React__default["default"].createElement(Content.Content, { spacing: "small" },
+                React__default["default"].createElement(Button.Button, { label: buttonLabel, size: "small", type: "secondary" }),
+                size === "base" && (React__default["default"].createElement(Typography.Typography, { size: "small", textColor: "textSecondary" }, hintText)))),
+            variation === "button" && (React__default["default"].createElement(Button.Button, { label: buttonLabel, size: size, type: "secondary", fullWidth: true }))),
+        (fileRejections === null || fileRejections === void 0 ? void 0 : fileRejections.length) > 0 && (React__default["default"].createElement("div", { className: styles.validationErrors }, validationErrors))));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(file => {
             uploadFile(file);
@@ -54,7 +64,15 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
     }
     function uploadFile(file) {
         return tslib_es6.__awaiter(this, void 0, void 0, function* () {
-            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST", } = yield getUploadParams(file);
+            let params;
+            try {
+                params = yield getUploadParams(file);
+            }
+            catch (_a) {
+                onUploadError && onUploadError(new Error("Failed to get upload params"));
+                return;
+            }
+            const { url, key = uuid.v1(), fields = {}, httpMethod = "POST" } = params;
             const fileUpload = getFileUpload(file, key, url);
             onUploadStart && onUploadStart(Object.assign({}, fileUpload));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -72,7 +90,12 @@ function InputFile({ variation = "dropzone", size = "base", buttonLabel: provide
                 file,
                 handleUploadProgress,
             });
-            axios__default["default"].request(axiosConfig).then(handleUploadComplete);
+            axios__default["default"]
+                .request(axiosConfig)
+                .then(handleUploadComplete)
+                .catch(() => {
+                onUploadError && onUploadError(new Error("Failed to upload file"));
+            });
         });
     }
 }

package/dist/Menu/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-da5d8217.js');
+var Menu = require('../Menu-81b12936.js');
 require('react');
 require('uuid');
 require('classnames');

package/dist/{Menu-da5d8217.js → Menu-81b12936.js}

@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = ".dT6M9tp1sZc- * {\n  box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n  --menu-space: var(--space-small);\n  --menu-offset: var(--space-smallest);\n  display: inline-block;\n  position: relative;\n}\n\n.Qmxlsj0D3qM- {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: 72vh;\n  padding: var(--menu-space);\n  padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n@media (min-width: 490px) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n    box-shadow: var(--shadow-base);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n    box-shadow: var(--shadow-base);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n.LaKFjYCLHZc- {\n  padding: var(--menu-space) 0;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.LaKFjYCLHZc-:first-of-type {\n  padding-top: 0;\n}\n\n.LaKFjYCLHZc-:last-of-type {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n._7HB7dWnqCi0- {\n  padding: var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(var(--menu-space) * 1.5) var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- h6 {\n  /* can move into the Typography component post re-theme */\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 400;\n  text-transform: none;\n}\n\n.ZuceCiefKqw- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  width: 100%;\n  padding: var(--menu-space);\n  border: none;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: transparent;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .ZuceCiefKqw- {\n  gap: var(--menu-space);\n}\n\n.ZuceCiefKqw-:hover,\n.ZuceCiefKqw-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.jobber-retheme .ZuceCiefKqw- span {\n  /* can move into the Typography component post re-theme */\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  font-weight: 600;\n}\n\n.jobber-retheme .Bz8TONF8kws- path {\n  /* can move into the Icon component post re-theme */\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.eKnUAucwwWU- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n@media (min-width: 490px) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n.oaxefr58z-E- {\n  width: 100%;\n}\n\n.vz9opIdwHFg- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n";
+var css_248z = ".dT6M9tp1sZc- * {\n  box-sizing: border-box;\n}\n\n.dT6M9tp1sZc- {\n  --menu-space: var(--space-small);\n  --menu-offset: var(--space-smallest);\n  display: inline-block;\n  position: relative;\n}\n\n.Qmxlsj0D3qM- {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  width: 100%;\n  max-height: 72vh;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: var(--menu-space);\n  padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));\n  border-radius: calc(16px / 8) calc(16px / 8) 0 0;\n  border-radius: var(--radius-base) var(--radius-base) 0 0;\n  -webkit-overflow-scrolling: touch;\n  overflow-y: scroll;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n@media (min-width: 490px) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.Qmxlsj0D3qM- {\n    position: absolute;\n    left: auto;\n    width: calc(16px * 12.5);\n    width: calc(var(--base-unit) * 12.5);\n    padding: var(--menu-space);\n    border: calc(16px / 16) solid rgb(217, 223, 225);\n    border: var(--border-base) solid var(--color-border);\n    border-radius: calc(16px / 8);\n    border-radius: var(--radius-base);\n    overflow: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.QTisUfiHwL4- {\n    bottom: 100%;\n    margin-bottom: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.qsch1dlpOHc- {\n    top: 100%;\n    bottom: auto;\n    margin-top: var(--menu-offset);\n}\n  }\n\n@media (min-width: 490px) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n._0xR9-oxWMOU- {\n    right: 0;\n    left: auto;\n}\n  }\n\n@media (min-width: 490px) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.gaZwsdyoG0k- {\n    right: auto;\n    left: 0;\n}\n  }\n\n.LaKFjYCLHZc- {\n  padding: var(--menu-space) 0;\n  border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.LaKFjYCLHZc-:first-of-type {\n  padding-top: 0;\n}\n\n.LaKFjYCLHZc-:last-of-type {\n  padding-bottom: 0;\n  border-bottom: none;\n}\n\n._7HB7dWnqCi0- {\n  padding: var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc(var(--menu-space) * 1.5) var(--menu-space);\n}\n\n.jobber-retheme ._7HB7dWnqCi0- h6 {\n  /* can move into the Typography component post re-theme */\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  font-weight: 400;\n  text-transform: none;\n}\n\n.ZuceCiefKqw- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  width: 100%;\n  padding: var(--menu-space);\n  border: none;\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background-color: transparent;\n  cursor: pointer;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.jobber-retheme .ZuceCiefKqw- {\n  gap: var(--menu-space);\n}\n\n.ZuceCiefKqw-:hover,\n.ZuceCiefKqw-:focus-visible {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n  outline-color: rgb(147, 161, 169);\n  outline-color: var(--color-focus);\n}\n\n.jobber-retheme .ZuceCiefKqw- span {\n  /* can move into the Typography component post re-theme */\n  color: rgb(77, 105, 116);\n  color: var(--color-text--secondary);\n  font-weight: 600;\n}\n\n.jobber-retheme .Bz8TONF8kws- path {\n  /* can move into the Icon component post re-theme */\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-interactive--subtle);\n}\n\n.eKnUAucwwWU- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: rgba(0, 0, 0, 0.32);\n  background-color: var(--color-overlay);\n}\n\n@media (min-width: 490px) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n@media (--small-screens-and-up) {\n\n.eKnUAucwwWU- {\n    background-color: transparent;\n}\n  }\n\n.oaxefr58z-E- {\n  width: 100%;\n}\n\n.vz9opIdwHFg- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n";
 var styles = {"wrapper":"dT6M9tp1sZc-","menu":"Qmxlsj0D3qM-","above":"QTisUfiHwL4-","below":"qsch1dlpOHc-","left":"_0xR9-oxWMOU-","right":"gaZwsdyoG0k-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","icon":"Bz8TONF8kws-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
 styleInject_es.styleInject(css_248z);
 

package/dist/Page/index.js

@@ -11,7 +11,7 @@ var Text = require('../Text-259af966.js');
 var Content = require('../Content-2ca1ffe1.js');
 var Markdown = require('../Markdown-b80706ed.js');
 var Button = require('../Button-b73a5e01.js');
-var Menu = require('../Menu-da5d8217.js');
+var Menu = require('../Menu-81b12936.js');
 var Emphasis = require('../Emphasis-bda56d3b.js');
 require('../Typography-c45bf216.js');
 require('../getAtlantisConfig-0f3e8af2.js');

package/dist/Toast/index.js

@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var css_248z = ".FVK4VwhLaVQ- {\n  position: relative;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n}\n\n.MUXYGaC7Msg- {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  right: 0;\n  bottom: calc(16px * 1.5);\n  bottom: var(--space-large);\n  left: 0;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n  width: 100%;\n  box-sizing: border-box;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0 calc(16px * 1.5);\n  padding: 0 var(--space-large);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  font-size: calc(16px * 1);\n  font-size: var(--typography--fontSize-large);\n  pointer-events: none;\n}\n\n.yCRa7jHH33M- {\n  box-shadow: 0px calc(16px * 1) calc(16px * 1) 0px\n      rgba(0, 0, 0, 0.075),\n    0px 0px calc(16px / 2) 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-high);\n  overflow: hidden;\n  pointer-events: all;\n}\n\n.yCRa7jHH33M- + .yCRa7jHH33M- {\n  margin-top: calc(16px * 1);\n  margin-top: var(--space-base);\n}\n\n.KiJL-VNZ3Sg- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc((16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(calc(16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(var(--space-small) / 1.25) var(--space-base);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background: rgb(1, 41, 57);\n  background: var(--color-surface--reverse);\n}\n\n.xtRB59TMHcU- {\n  margin-right: calc(16px * 1);\n  margin-right: var(--space-base);\n}\n\n.cExoS0APILs- {\n  margin-left: calc(16px * 1);\n  margin-left: var(--space-base);\n}\n\n.-T38wWbQUNs- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var css_248z = ".FVK4VwhLaVQ- {\n  position: relative;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n}\n\n.MUXYGaC7Msg- {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  right: 0;\n  bottom: calc(16px * 1.5);\n  bottom: var(--space-large);\n  left: 0;\n  z-index: 1003;\n  z-index: var(--elevation-toast);\n  width: 100%;\n  box-sizing: border-box;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0 calc(16px * 1.5);\n  padding: 0 var(--space-large);\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-text--reverse);\n  font-size: calc(16px * 1);\n  font-size: var(--typography--fontSize-large);\n  pointer-events: none;\n}\n\n.yCRa7jHH33M- {\n  box-shadow: 0px calc(16px * 1) calc(16px * 1) 0px\n      rgba(0, 0, 0, 0.075),\n    0px 0px calc(16px / 2) 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-high);\n  overflow: hidden;\n  pointer-events: all;\n}\n\n.yCRa7jHH33M- + .yCRa7jHH33M- {\n  margin-top: calc(16px * 1);\n  margin-top: var(--space-base);\n}\n\n.KiJL-VNZ3Sg- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: calc((16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(calc(16px / 2) / 1.25) calc(16px * 1);\n  padding: calc(var(--space-small) / 1.25) var(--space-base);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n  background: rgb(1, 41, 57);\n  background: var(--color-surface--reverse);\n}\n\n.xtRB59TMHcU- {\n  margin-right: calc(16px * 1);\n  margin-right: var(--space-base);\n}\n\n.cExoS0APILs- {\n  margin-left: calc(16px * 1);\n  margin-left: var(--space-base);\n}\n\n.jobber-retheme .cExoS0APILs- svg path {\n  fill: rgb(147, 161, 169);\n  fill: var(--color-greyBlue--light);\n}\n\n.jobber-retheme .cExoS0APILs-:hover svg path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n}\n\n.-T38wWbQUNs- {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
 var styles = {"wrapper":"FVK4VwhLaVQ-","container":"MUXYGaC7Msg-","toast":"yCRa7jHH33M-","slice":"KiJL-VNZ3Sg-","icon":"xtRB59TMHcU-","button":"cExoS0APILs-","action":"-T38wWbQUNs-"};
 styleInject_es.styleInject(css_248z);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.71.7",
+  "version": "4.72.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "6e8e475fb1cc79a9176903603124e1b8c27c2571"
+  "gitHead": "58a975b16f769405c26ebad6b5b8d8e699edbd04"
 }