@jobber/components 3.4.4-pre.0 → 3.4.5

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.5](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.4.4...@jobber/components@3.4.5) (2023-03-06)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [3.4.4](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.4.3...@jobber/components@3.4.4) (2023-03-03)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [3.4.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@3.4.2...@jobber/components@3.4.3) (2023-03-03)
 
 **Note:** Version bump only for package @jobber/components

package/dist/Banner/index.js

@@ -19,8 +19,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css$1 = ".XnQ3RJFzByInxjZ8LTsv8 {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  color: var(--color-text);\n  background-color: var(--color-surface--background);\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iRHpLiGUYBO-8xY0h00rp {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:last-child {\n  margin-bottom: 0;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._12QzEnq3z7-XCpLmgYARp {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n._2MtsHfzp46XdG3BZQtOLm- {\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
-var styles = {"banner":"XnQ3RJFzByInxjZ8LTsv8","bannerContent":"_3vGMT9on-QbjXBlSaiNcgm","bannerChildren":"_2iRHpLiGUYBO-8xY0h00rp","medium":"_1S5EoHZng2ePaBlNMXhUYb","bannerAction":"_12QzEnq3z7-XCpLmgYARp","closeButton":"_2MtsHfzp46XdG3BZQtOLm-"};
+var css$1 = ":root {\n  --flash--inset: var(--space-base);\n  --flash--inset--small: var(--space-small);\n}\n\n._364vcgV1m5AeWxKbtAvmwW {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--flash--inset);\n  color: var(--color-black);\n  background-color: var(--color-grey--lightest);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3vGMT9on-QbjXBlSaiNcgm {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n._2iRHpLiGUYBO-8xY0h00rp {\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._3GnUCvx5Y7mFbH2Z7IN5U- {\n  padding-top: var(--space-smallest);\n  padding-right: var(--space-base);\n  padding-right: var(--space-base);\n  padding-right: var(--flash--inset);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: var(--space-small);\n  margin-top: var(--space-small);\n  margin-top: var(--flash--inset--small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--space-small);\n  margin-bottom: var(--flash--inset--small);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:first-child {\n  margin-top: 0;\n  margin-right: var(--space-base);\n}\n\n._3vGMT9on-QbjXBlSaiNcgm > *:last-child {\n  margin-bottom: 0;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm {\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n}\n\n._1S5EoHZng2ePaBlNMXhUYb ._3vGMT9on-QbjXBlSaiNcgm > * {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n._12QzEnq3z7-XCpLmgYARp {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n._2MtsHfzp46XdG3BZQtOLm- {\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n._2MtsHfzp46XdG3BZQtOLm-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+var styles = {"flash":"_364vcgV1m5AeWxKbtAvmwW","bannerContent":"_3vGMT9on-QbjXBlSaiNcgm","bannerChildren":"_2iRHpLiGUYBO-8xY0h00rp","dismissibleSpacing":"_3GnUCvx5Y7mFbH2Z7IN5U-","medium":"_1S5EoHZng2ePaBlNMXhUYb","bannerAction":"_12QzEnq3z7-XCpLmgYARp","closeButton":"_2MtsHfzp46XdG3BZQtOLm-"};
 styleInject_es.styleInject(css$1);
 
 var css = ".nw7Tf4jicBNmfENtxh7tG {\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n.myY4eq0vr_r4Twz0QcBwu {\n  background-color: var(--color-green--lighter);\n}\n\n.eExwEf69eCfam2C6Ekk5D {\n  background-color: var(--color-yellow--lighter);\n}\n\n._1U_-uPZepxvaZPO5hh8G4O {\n  background-color: var(--color-red--lighter);\n}\n";
@@ -28,21 +28,21 @@ var types = {"notice":"nw7Tf4jicBNmfENtxh7tG","success":"myY4eq0vr_r4Twz0QcBwu",
 styleInject_es.styleInject(css);
 
 function Banner(_a) {
-    var _b;
-    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _c = _a.dismissible, dismissible = _c === void 0 ? true : _c, onDismiss = _a.onDismiss;
-    var _d = tslib_es6.__read(React.useState(true), 2), showBanner = _d[0], setShowBanner = _d[1];
+    var _b, _c;
+    var children = _a.children, type = _a.type, primaryAction = _a.primaryAction, _d = _a.dismissible, dismissible = _d === void 0 ? true : _d, onDismiss = _a.onDismiss;
+    var _e = tslib_es6.__read(React.useState(true), 2), showFlash = _e[0], setShowFlash = _e[1];
     var bannerWidths = {
         small: 320,
         medium: 480,
     };
-    var _e = tslib_es6.__read(jobberHooks.useResizeObserver({
+    var _f = tslib_es6.__read(jobberHooks.useResizeObserver({
         widths: bannerWidths,
-    }), 2), bannerRef = _e[0], _f = _e[1].width, bannerWidth = _f === void 0 ? bannerWidths.small : _f;
+    }), 2), bannerRef = _f[0], _g = _f[1].width, bannerWidth = _g === void 0 ? bannerWidths.small : _g;
     var iconColors = {
-        notice: "informative",
-        success: "success",
-        warning: "warning",
-        error: "critical",
+        notice: "lightBlue",
+        success: "green",
+        warning: "yellow",
+        error: "red",
     };
     if (primaryAction != undefined) {
         primaryAction = Object.assign({
@@ -51,11 +51,14 @@ function Banner(_a) {
             variation: type === "notice" ? "learning" : "work",
         }, primaryAction);
     }
-    var bannerClassNames = classnames__default["default"](styles.banner, types[type], (_b = {},
+    var flashClassNames = classnames__default["default"](styles.flash, types[type], (_b = {},
         _b[styles.medium] = bannerWidth >= bannerWidths.medium,
         _b));
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, showBanner && (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default["default"].createElement("div", { className: styles.bannerContent },
+    var contentClassNames = classnames__default["default"](styles.bannerContent, (_c = {},
+        _c[styles.dismissibleSpacing] = dismissible,
+        _c));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, showFlash && (React__default["default"].createElement("div", { className: flashClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
+        React__default["default"].createElement("div", { className: contentClassNames },
             React__default["default"].createElement("div", { className: styles.bannerChildren },
                 React__default["default"].createElement(BannerChildren, null, children)),
             primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },
@@ -63,7 +66,7 @@ function Banner(_a) {
         dismissible && (React__default["default"].createElement("button", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
             React__default["default"].createElement(Icon.Icon, { name: "cross", color: iconColors[type] })))))));
     function handleClose() {
-        setShowBanner(!showBanner);
+        setShowFlash(!showFlash);
         onDismiss && onDismiss();
     }
 }

package/dist/Card/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Card = require('../Card-9056628f.js');
+var Card = require('../Card-b9f8d6f3.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');
@@ -13,7 +13,7 @@ require('../Button-cd30df0f.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Menu-13deda94.js');
+require('../Menu-826cfb89.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks');

package/dist/{Card-9056628f.js → Card-b9f8d6f3.js}

@@ -6,7 +6,7 @@ var classnames = require('classnames');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var Heading = require('./Heading-a9a66964.js');
 var Button = require('./Button-cd30df0f.js');
-var Menu = require('./Menu-13deda94.js');
+var Menu = require('./Menu-826cfb89.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-9056628f.js');
+var Card = require('../Card-b9f8d6f3.js');
 var Content = require('../Content-18de5fbb.js');
 var Emphasis = require('../Emphasis-75a3f411.js');
 require('../tslib.es6-5b50eb8e.js');
@@ -15,7 +15,7 @@ require('../Button-cd30df0f.js');
 require('react-router-dom');
 require('../Icon-d5ad1a6d.js');
 require('@jobber/design');
-require('../Menu-13deda94.js');
+require('../Menu-826cfb89.js');
 require('uuid');
 require('framer-motion');
 require('@jobber/hooks');

package/dist/DescriptionList/index.js

@@ -21,8 +21,8 @@ function DescriptionList(_a) {
     return (React__default["default"].createElement("dl", { className: styles.descriptionList }, data.map(function (_a) {
         var _b = tslib_es6.__read(_a, 2), term = _b[0], description = _b[1];
         return (React__default["default"].createElement("div", { key: term, className: styles.termGroup },
-            React__default["default"].createElement(Typography.Typography, { element: "dt", textColor: "blue", size: "base" }, term),
-            React__default["default"].createElement(Typography.Typography, { element: "dd", textColor: "greyBlueDark", size: "base" }, description)));
+            React__default["default"].createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
+            React__default["default"].createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description)));
     })));
 }
 

package/dist/Gallery/index.js

@@ -6,20 +6,19 @@ var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var LightBox = require('../LightBox-6aea2128.js');
+var LightBox = require('../LightBox-4eb2e6f0.js');
 var FormatFile = require('../FormatFile-44fc7b58.js');
 var Button = require('../Button-cd30df0f.js');
-require('react-image-lightbox');
-require('react-image-lightbox/style.css');
+require('framer-motion');
+require('react-dom');
+require('lodash/debounce');
+require('@jobber/hooks');
+require('../ButtonDismiss-a9590195.js');
 require('filesize');
 require('../ConfirmationModal-e95f46d7.js');
-require('@jobber/hooks');
 require('../Modal-cc3bd7bf.js');
-require('react-dom');
-require('framer-motion');
 require('../Heading-a9a66964.js');
 require('../Typography-fbe0ed6e.js');
-require('../ButtonDismiss-a9590195.js');
 require('../Content-18de5fbb.js');
 require('../Markdown-b53e0308.js');
 require('react-markdown');

package/dist/InputAvatar/index.js

@@ -6,7 +6,7 @@ var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
 var Avatar = require('../Avatar-cfd04e86.js');
-var InputFile = require('../InputFile-3ae4cf99.js');
+var InputFile = require('../InputFile-e108a7f8.js');
 var ProgressBar = require('../ProgressBar-e9a49129.js');
 var Button = require('../Button-cd30df0f.js');
 require('classnames');

package/dist/InputFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var InputFile = require('../InputFile-3ae4cf99.js');
+var InputFile = require('../InputFile-e108a7f8.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('classnames');

package/dist/{InputFile-3ae4cf99.js → InputFile-e108a7f8.js}

@@ -44,7 +44,7 @@ function InputFile(_a) {
         React__default["default"].createElement("input", tslib_es6.__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: "greyBlue" }, hintText)))),
+            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 }))));
     function handleDrop(acceptedFiles) {
         acceptedFiles.forEach(function (file) {

package/dist/LightBox/LightBox.d.ts

@@ -1,4 +1,4 @@
-import "react-image-lightbox/style.css";
+import React from "react";
 interface PresentedImage {
     title?: string;
     caption?: string;
@@ -33,5 +33,5 @@ interface LightBoxProps {
      */
     onRequestClose(options: RequestCloseOptions): void;
 }
-export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): JSX.Element;
+export declare function LightBox({ open, images, imageIndex, onRequestClose, }: LightBoxProps): React.ReactPortal;
 export {};

package/dist/LightBox/index.js

@@ -2,12 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LightBox = require('../LightBox-6aea2128.js');
+var LightBox = require('../LightBox-4eb2e6f0.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
-require('react-image-lightbox');
+require('framer-motion');
+require('react-dom');
+require('lodash/debounce');
+require('@jobber/hooks');
 require('../style-inject.es-dcee06b6.js');
-require('react-image-lightbox/style.css');
+require('../ButtonDismiss-a9590195.js');
+require('../Button-cd30df0f.js');
+require('classnames');
+require('react-router-dom');
+require('../Icon-d5ad1a6d.js');
+require('@jobber/design');
+require('../Typography-fbe0ed6e.js');
 
 
 

package/dist/LightBox-4eb2e6f0.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var ReactDOM = require('react-dom');
+var debounce = require('lodash/debounce');
+var jobberHooks = require('@jobber/hooks');
+var styleInject_es = require('./style-inject.es-dcee06b6.js');
+var ButtonDismiss = require('./ButtonDismiss-a9590195.js');
+var Button = require('./Button-cd30df0f.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+
+var css = "._2qgU3ylcPWUJGRthB18cb,\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 50%;\n  z-index: var(--elevation-base);\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n\n._2qgU3ylcPWUJGRthB18cb {\n  right: var(--space-base);\n}\n\n._27gh3HPkx5J1Ru4Tqp_1tF {\n  left: var(--space-base);\n}\n\n._3FuSx2b8rfxjzTQKeVn6MW {\n  display: -ms-flexbox;\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: var(--elevation-modal);\n  width: 100%;\n  height: 100%;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-direction: column;\n      flex-direction: column;\n}\n\n._2gGRj41uQJhcl0zcSNgsOA {\n  display: -ms-flexbox;\n  display: flex;\n  z-index: var(--elevation-base);\n  padding: var(--space-small) var(--space-base);\n  color: var(--color-text--reverse--secondary);\n  font-size: var(--typography--fontSize-large);\n  background-color: var(--color-surface--reverse);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n}\n\n.oyIA3-aR1Fvwn0lpp1Mgx {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1PPDSsP7v3FAZG3DA--Oq3 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  position: relative;\n  -ms-flex: 1 1 0px;\n      flex: 1 1 0;\n  min-height: 0;\n}\n\n._23IH8HE3ZATpurQqLyWj-l {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--color-overlay);\n}\n\n._2UNyNw_u8HDWIzzxcSLUU6 {\n  position: absolute;\n  top: 50%;\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n}\n";
+var styles = {"next":"_2qgU3ylcPWUJGRthB18cb","prev":"_27gh3HPkx5J1Ru4Tqp_1tF","lightboxWrapper":"_3FuSx2b8rfxjzTQKeVn6MW","toolbar":"_2gGRj41uQJhcl0zcSNgsOA","title":"oyIA3-aR1Fvwn0lpp1Mgx","imagesWrapper":"_1PPDSsP7v3FAZG3DA--Oq3","overlay":"_23IH8HE3ZATpurQqLyWj-l","image":"_2UNyNw_u8HDWIzzxcSLUU6"};
+styleInject_es.styleInject(css);
+
+var swipeConfidenceThreshold = 10000;
+var swipePower = function (offset, velocity) {
+    return Math.abs(offset) * velocity;
+};
+var variants = {
+    enter: function (direction) {
+        return {
+            x: direction > 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+    center: {
+        zIndex: 1,
+        x: 0,
+        opacity: 1,
+    },
+    exit: function (direction) {
+        return {
+            zIndex: 0,
+            x: direction < 0 ? 1000 : -1000,
+            opacity: 0,
+        };
+    },
+};
+var imageTransition = {
+    x: { type: "spring", stiffness: 300, damping: 30 },
+    opacity: { duration: 0.2 },
+};
+// A little bit more than the transition's duration
+// We're doing this to prevent a bug from framer-motion
+// https://github.com/framer/motion/issues/1769
+var debounceDuration = 250;
+function LightBox(_a) {
+    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
+    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
+    var _d = tslib_es6.__read(React.useState(0), 2), direction = _d[0], setDirection = _d[1];
+    var lightboxRef = jobberHooks.useFocusTrap(open);
+    var debouncedHandleNext = debounce__default["default"](handleMoveNext, debounceDuration);
+    var debouncedHandlePrevious = debounce__default["default"](handleMovePrevious, debounceDuration);
+    jobberHooks.useRefocusOnActivator(open);
+    jobberHooks.useOnKeyDown(handleRequestClose, "Escape");
+    jobberHooks.useOnKeyDown(debouncedHandlePrevious, {
+        key: "ArrowLeft",
+    });
+    jobberHooks.useOnKeyDown(debouncedHandleNext, {
+        key: "ArrowRight",
+    });
+    React.useEffect(function () {
+        setCurrentImageIndex(imageIndex);
+    }, [imageIndex, open]);
+    var template = (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement("div", { className: styles.lightboxWrapper, tabIndex: 0, "aria-label": "Lightbox", key: "Lightbox", ref: lightboxRef },
+        React__default["default"].createElement("div", { className: styles.toolbar },
+            React__default["default"].createElement("span", { className: styles.title }, images[currentImageIndex].title),
+            React__default["default"].createElement(ButtonDismiss.ButtonDismiss, { ariaLabel: "Close", onClick: handleRequestClose })),
+        React__default["default"].createElement("div", { className: styles.imagesWrapper },
+            React__default["default"].createElement(framerMotion.AnimatePresence, { initial: false },
+                React__default["default"].createElement(framerMotion.motion.img, { key: currentImageIndex, variants: variants, src: images[currentImageIndex].url, custom: direction, className: styles.image, style: { y: "-50%" }, initial: "enter", animate: "center", exit: "exit", transition: imageTransition, drag: "x", dragConstraints: { left: 0, right: 0 }, dragElastic: 1, onDragEnd: handleOnDragEnd }))),
+        React__default["default"].createElement(PreviousButton, { onClick: debouncedHandlePrevious }),
+        React__default["default"].createElement(NextButton, { onClick: debouncedHandleNext }),
+        React__default["default"].createElement("div", { className: styles.toolbar }, images[currentImageIndex].caption),
+        React__default["default"].createElement("div", { className: styles.overlay, onClick: handleRequestClose })))));
+    return ReactDOM__default["default"].createPortal(template, document.body);
+    function handleMovePrevious() {
+        setDirection(-1);
+        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
+    }
+    function handleMoveNext() {
+        setDirection(1);
+        setCurrentImageIndex((currentImageIndex + 1) % images.length);
+    }
+    function handleRequestClose() {
+        onRequestClose({ lastPosition: currentImageIndex });
+    }
+    function handleOnDragEnd(event, _a) {
+        var offset = _a.offset, velocity = _a.velocity;
+        var swipe = swipePower(offset.x, velocity.x);
+        if (swipe < -swipeConfidenceThreshold) {
+            handleMoveNext();
+        }
+        else if (swipe > swipeConfidenceThreshold) {
+            handleMovePrevious();
+        }
+    }
+}
+function PreviousButton(_a) {
+    var onClick = _a.onClick;
+    return (React__default["default"].createElement("div", { className: styles.prev },
+        React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowLeft", ariaLabel: "Previous image", onClick: onClick })));
+}
+function NextButton(_a) {
+    var onClick = _a.onClick;
+    return (React__default["default"].createElement("div", { className: styles.next },
+        React__default["default"].createElement(Button.Button, { size: "large", variation: "subtle", type: "secondary", icon: "arrowRight", ariaLabel: "Next image", onClick: onClick })));
+}
+
+exports.LightBox = LightBox;

package/dist/Menu/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Menu = require('../Menu-13deda94.js');
+var Menu = require('../Menu-826cfb89.js');
 require('../tslib.es6-5b50eb8e.js');
 require('react');
 require('uuid');

package/dist/{Menu-13deda94.js → Menu-826cfb89.js}

@@ -113,7 +113,7 @@ function Menu(_a) {
 function SectionHeader(_a) {
     var text = _a.text;
     return (React__default["default"].createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
-        React__default["default"].createElement(Typography.Typography, { element: "h6", size: "small", textCase: "uppercase", textColor: "greyBlue", fontWeight: "bold" }, text)));
+        React__default["default"].createElement(Typography.Typography, { element: "h6", size: "small", textCase: "uppercase", textColor: "textSecondary", fontWeight: "bold" }, text)));
 }
 function Action(_a) {
     var label = _a.label, sectionLabel = _a.sectionLabel, icon = _a.icon, onClick = _a.onClick, _b = _a.shouldFocus, shouldFocus = _b === void 0 ? false : _b;
@@ -126,7 +126,7 @@ function Action(_a) {
     return (React__default["default"].createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
         icon && (React__default["default"].createElement("span", { className: styles.icon },
             React__default["default"].createElement(Icon.Icon, { name: icon }))),
-        React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "greyBlueDark" },
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "text" },
             sectionLabel && (React__default["default"].createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));
 }

package/dist/Page/index.js

@@ -12,7 +12,7 @@ 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-13deda94.js');
+var Menu = require('../Menu-826cfb89.js');
 var Emphasis = require('../Emphasis-75a3f411.js');
 require('../Typography-fbe0ed6e.js');
 require('react-markdown');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "3.4.4-pre.0+e32c9ed0",
+  "version": "3.4.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,7 +41,6 @@
     "react-datepicker": "^4.10.0",
     "react-dropzone": "^11.0.2",
     "react-hook-form": "^6.15.8",
-    "react-image-lightbox": "^5.1.1",
     "react-markdown": "^8.0.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "~5.2.0",
@@ -85,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e32c9ed063fcf8ccbc2ca159e0810f29e3e120ea"
+  "gitHead": "34fab41222c5603f7babe5bb58867c12a9175854"
 }

package/rollup.config.js

@@ -50,8 +50,6 @@ export default {
     "react-countdown",
     "react-popper",
     "react-datepicker",
-    "react-image-lightbox",
-    "react-image-lightbox/style.css",
     "react-dropzone",
     "axios",
     "filesize",

package/dist/LightBox-6aea2128.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
-var React = require('react');
-var ExternalLightBox = require('react-image-lightbox');
-var styleInject_es = require('./style-inject.es-dcee06b6.js');
-require('react-image-lightbox/style.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ExternalLightBox__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLightBox);
-
-var css = "._23H2TI8rNmnv0zlHOHZooa.ril__outer {\n  font-family: var(--typography--fontFamily-normal);\n  background-color: transparent;\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer:before {\n  content: \"\";\n  display: block;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__captionContent {\n  color: var(--color-greyBlue--lighter);\n}\n\n._23H2TI8rNmnv0zlHOHZooa.ril__outer .ril__toolbarItem {\n  color: var(--color-greyBlue--lighter);\n}\n";
-var styles = {"wrapper":"_23H2TI8rNmnv0zlHOHZooa"};
-styleInject_es.styleInject(css);
-
-function LightBox(_a) {
-    var open = _a.open, images = _a.images, _b = _a.imageIndex, imageIndex = _b === void 0 ? 0 : _b, onRequestClose = _a.onRequestClose;
-    var _c = tslib_es6.__read(React.useState(imageIndex), 2), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
-    var nextSrc = undefined;
-    var prevSrc = undefined;
-    if (images.length > 1) {
-        nextSrc = images[(currentImageIndex + 1) % images.length].url;
-        prevSrc =
-            images[(currentImageIndex + images.length - 1) % images.length].url;
-    }
-    React.useEffect(function () {
-        setCurrentImageIndex(imageIndex);
-    }, [imageIndex]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, open && (React__default["default"].createElement(ExternalLightBox__default["default"], { wrapperClassName: styles.wrapper, mainSrc: images[currentImageIndex].url, enableZoom: false, nextSrc: nextSrc, prevSrc: prevSrc, imageTitle: images[currentImageIndex].title, imageCaption: images[currentImageIndex].caption, onCloseRequest: function () {
-            return onRequestClose({ lastPosition: currentImageIndex });
-        }, onMovePrevRequest: handleMovePrevious, onMoveNextRequest: handleMoveNext }))));
-    function handleMovePrevious() {
-        setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
-    }
-    function handleMoveNext() {
-        setCurrentImageIndex((currentImageIndex + 1) % images.length);
-    }
-}
-
-exports.LightBox = LightBox;