@jobber/components 2.84.1 → 2.84.4-pre.11

package/CHANGELOG.md

@@ -8,6 +8,22 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.84.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.2...@jobber/components@2.84.3) (2022-06-13)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
+## [2.84.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.1...@jobber/components@2.84.2) (2022-06-10)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [2.84.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.0...@jobber/components@2.84.1) (2022-06-09)
 
 **Note:** Version bump only for package @jobber/components

package/Gallery.d.ts

@@ -0,0 +1 @@
+export * from "./dist/Gallery";

package/Gallery.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var Gallery = require("./dist/Gallery");
+
+Object.keys(Gallery).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return Gallery[key];
+    },
+  });
+});

package/dist/FormatFile/FormatFile.d.ts

@@ -1,13 +1,30 @@
+import React from "react";
 import { FileUpload } from "../InputFile";
 interface FormatFileProps {
     /**
      * File upload details object. (See FileUpload type.)
      */
     readonly file: FileUpload;
+    /**
+     * To display as either a file row or thumbnail
+     *
+     * @default "expanded"
+     */
+    readonly display?: "expanded" | "compact";
+    /**
+     * The base dimensions of the thumbnail
+     *
+     * @default "base"
+     */
+    readonly displaySize?: "base" | "large";
+    /**
+     * Function to execute when format file is clicked
+     */
+    onClick?(event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>): void;
     /**
      * onDelete callback - this function will be called when the delete action is triggered
      */
     onDelete?(): void;
 }
-export declare function FormatFile({ file, onDelete }: FormatFileProps): JSX.Element;
+export declare function FormatFile({ file, display, displaySize, onDelete, onClick, }: FormatFileProps): JSX.Element;
 export {};

package/dist/FormatFile/FormatFileDeleteButton.d.ts

@@ -0,0 +1,6 @@
+interface DeleteButtonProps {
+    size?: "base" | "large";
+    onDelete?: () => void;
+}
+export declare function FormatFileDeleteButton({ size, onDelete }: DeleteButtonProps): JSX.Element;
+export {};

package/dist/FormatFile/InternalThumbnail.d.ts

@@ -0,0 +1,9 @@
+import { FileUpload } from "../InputFile";
+interface InternalThumbnailProps {
+    readonly name?: string;
+    readonly hideName?: boolean;
+    readonly size: "base" | "large";
+    readonly file: FileUpload;
+}
+export declare function InternalThumbnail({ name, hideName, size, file, }: InternalThumbnailProps): JSX.Element;
+export {};

package/dist/FormatFile/index.js

@@ -8,43 +8,63 @@ var __chunk_1 = require('../chunk-b67af3cb.js');
 var React = require('react');
 var React__default = _interopDefault(React);
 var __chunk_2 = require('../chunk-17e02351.js');
-require('classnames');
+var classnames = _interopDefault(require('classnames'));
 var index = require('../Typography/index.js');
+var index$1 = require('../Text/index.js');
 require('@jobber/design');
 var index$2 = require('../Icon/index.js');
+require('../Heading/index.js');
 require('react-router-dom');
 var index$5 = require('../Button/index.js');
-var filesize = _interopDefault(require('filesize'));
-var index$1 = require('../ProgressBar/index.js');
+require('framer-motion');
+require('@jobber/hooks');
+require('../ButtonDismiss/index.js');
+require('react-dom');
+require('../Modal/index.js');
+require('../Content/index.js');
+require('react-markdown');
+require('../Emphasis/index.js');
+require('../Markdown/index.js');
+var index$7 = require('../ConfirmationModal/index.js');
+var getHumanReadableFileSize = _interopDefault(require('filesize'));
+var index$8 = require('../ProgressBar/index.js');
 
-var css = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  --file-card--background-color: var(--color-white);\n  --file-card--header-background-color: var(--color-greyBlue--lighter);\n  --file-card--content-background-color: var(--color-white);\n  --file-card--border-color: var(--color-border);\n  --file-card--accent-color: var(--color-grey);\n  --file-card--base-padding: var(--space-small);\n}\n\n.iLkdDSChG7LfdxCDYHOWO {\n  display: -ms-flexbox;\n  display: flex;\n  height: calc(var(--space-base) * 3.5);\n  height: calc(var(--space-base) * 3.5);\n  height: var(--file-card--height);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--file-card--border-color);\n  border-radius: var(--radius-base);\n  overflow: hidden;\n  background-color: var(--color-white);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n  -ms-flex-align: center;\n      align-items: center;\n  outline-color: var(--color-focus);\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  width: calc(var(--space-base) * 3.5);\n  width: calc(var(--space-base) * 3.5);\n  width: var(--file-card--height);\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0;\n  background-color: var(--color-greyBlue--lighter);\n  background-color: var(--color-greyBlue--lighter);\n  background-color: var(--file-card--header-background-color);\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  -ms-flex-align: center;\n      align-items: center;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._1ymfz_xMgvlX6LtB6_4GUG::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--color-overlay);\n  mix-blend-mode: multiply;\n}\n\n.h_QOL0uORy7gKva__GUUe {\n  margin: 0 auto;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: var(--space-small);\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n  -ms-flex-positive: 1;\n      flex-grow: 1;\n  padding: 0 var(--space-small);\n  padding: 0 var(--space-small);\n  padding: 0 var(--file-card--base-padding);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n  margin: 0;\n}\n\n._1Mt_GBuDbKYkP4ijp0-848 {\n  padding: 0 var(--space-small) 0 0;\n  padding: 0 var(--space-small) 0 0;\n  padding: 0 var(--file-card--base-padding) 0 0;\n}\n";
-var styles = {"formatFile":"iLkdDSChG7LfdxCDYHOWO","imageBlock":"_1ymfz_xMgvlX6LtB6_4GUG","icon":"h_QOL0uORy7gKva__GUUe","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","actionBlock":"_1Mt_GBuDbKYkP4ijp0-848"};
+var css = ":root {\n  --file-card--height: calc(var(--space-base) * 3.5);\n  --file-card--background-color: var(--color-white);\n  --file-card--header-background-color: var(--color-greyBlue--lighter);\n  --file-card--content-background-color: var(--color-white);\n  --file-card--border-color: var(--color-border);\n  --file-card--accent-color: var(--color-grey);\n  --file-card--base-padding: var(--space-small);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH {\n  display: grid;\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  gap: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n  padding-right: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--color-border);\n  border: var(--border-base) solid var(--file-card--border-color);\n  border-radius: var(--radius-base);\n  background-color: var(--color-white);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH,\n._9dGq9pkZYNxwlhRwaVaWH {\n  position: relative;\n}\n\n._26euKXXdGUFmchTL7YqSO7 {\n  display: grid;\n  grid-template-columns: -webkit-max-content auto;\n  grid-template-columns: max-content auto;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  grid-gap: var(--file-card--base-padding);\n  gap: var(--file-card--base-padding);\n  -ms-flex-align: center;\n      align-items: center;\n  padding: 0;\n  border: none;\n  text-align: left;\n  background-color: var(--color-transparent);\n}\n\n._2OuJNJWNnBmTTzGAUfSaM7 {\n  width: 168px;\n  height: 168px;\n}\n\n._2GSQaEqbKQHd7Tf2XqJ5i1 {\n  width: 56px;\n  height: 56px;\n}\n\n._1JreUit2_KSn_-iQ3vBhUn {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  padding: 0;\n  overflow: hidden;\n  background-color: var(--color-surface--background);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7 {\n  outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._26euKXXdGUFmchTL7YqSO7:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._1JreUit2_KSn_-iQ3vBhUn {\n  border-radius: var(--radius-base);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7:focus::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-shadow: var(--shadow-focus);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._1JreUit2_KSn_-iQ3vBhUn {\n  border-right: none;\n  border-bottom-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n}\n\n._3_8YVeas_gdmexLUKZ3mpR {\n  cursor: pointer;\n}\n\n._15spVvfm0lqLuhAwuIuWrm ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-overlay);\n  opacity: 0;\n  transition: all var(--timing-base);\n}\n\n._15spVvfm0lqLuhAwuIuWrm:hover ._1JreUit2_KSn_-iQ3vBhUn::after,\n._15spVvfm0lqLuhAwuIuWrm:focus ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n  opacity: 1;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  padding: var(--space-small);\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  min-width: 0;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._2pUMiqf0oiCus7WkVuTt57 {\n  position: absolute;\n  top: var(--space-smaller);\n  right: var(--space-smaller);\n}\n\n._2g5hRVudATuiROg0LStgTs ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: hidden;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57:focus-within,\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n  visibility: visible;\n}\n";
+var styles = {"expanded":"_9dGq9pkZYNxwlhRwaVaWH","compact":"_24PiUzD_Hoe3p6hD_OxjbH","wrapper":"_26euKXXdGUFmchTL7YqSO7","large":"_2OuJNJWNnBmTTzGAUfSaM7","base":"_2GSQaEqbKQHd7Tf2XqJ5i1","thumbnail":"_1JreUit2_KSn_-iQ3vBhUn","clickable":"_3_8YVeas_gdmexLUKZ3mpR","hoverable":"_15spVvfm0lqLuhAwuIuWrm","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","deleteButton":"_2pUMiqf0oiCus7WkVuTt57","deleteable":"_2g5hRVudATuiROg0LStgTs"};
 __chunk_2.styleInject(css);
 
-function FormatFile(_a) {
-    var file = _a.file, onDelete = _a.onDelete;
-    var _b = __chunk_1.__read(React.useState(), 2), imageSource = _b[0], setImageSource = _b[1];
-    var isComplete = file.progress >= 1;
+function FormatFileDeleteButton(_a) {
+    var size = _a.size, onDelete = _a.onDelete;
+    var buttonSize = size === "base" ? "small" : "base";
+    var _b = __chunk_1.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(index$5.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default.createElement(index$7.ConfirmationModal, { title: "Confirm Deletion", message: "Are you sure you want to delete this file?", confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(); }, onRequestClose: function () { return setDeleteConfirmationOpen(false); } })));
+}
+
+var css$1 = "._15Z4SPrC7I2WxqMysdwQxX {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.VMZPGfgfpCH2eH5Mv9zgO {\n  display: none;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe {\n  display: -ms-flexbox;\n  display: flex;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  border: var(--border-base);\n  border-radius: var(--radius-base);\n  background: linear-gradient(\n    270deg,\n    rgb(244, 244, 244) 38.46%,\n    rgba(244, 244, 244, 0) 100%\n  );\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._3NVQrEqP9hGjbdbpOXGHQd::after {\n  width: var(--space-base);\n  height: var(--space-base);\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._2AI9R5gNW3y8vFV4ev1tge::after {\n  width: var(--space-large);\n  height: var(--space-large);\n}\n\n._3VjXRD4ob2Fdq9YxmNRy2S {\n  position: absolute;\n}\n\n._3NVQrEqP9hGjbdbpOXGHQd ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-smaller);\n  left: var(--space-smaller);\n  font-size: calc(var(--base-unit) * 0.625);\n}\n\n._2AI9R5gNW3y8vFV4ev1tge ._3VjXRD4ob2Fdq9YxmNRy2S {\n  bottom: var(--space-small);\n  left: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
+var styles$1 = {"image":"_15Z4SPrC7I2WxqMysdwQxX","loading":"VMZPGfgfpCH2eH5Mv9zgO","content":"Z-gb7-3W6CcFd5uSiosLe","base":"_3NVQrEqP9hGjbdbpOXGHQd","large":"_2AI9R5gNW3y8vFV4ev1tge","fileName":"_3VjXRD4ob2Fdq9YxmNRy2S"};
+__chunk_2.styleInject(css$1);
+
+function InternalThumbnail(_a) {
+    var _b;
+    var name = _a.name, _c = _a.hideName, hideName = _c === void 0 ? false : _c, size = _a.size, file = _a.file;
+    var _d = __chunk_1.__read(React.useState(), 2), imageSource = _d[0], setImageSource = _d[1];
+    var _e = __chunk_1.__read(React.useState(false), 2), imageLoaded = _e[0], setImageLoaded = _e[1];
     var iconName = getIconNameFromType(file.type);
-    var fileSize = getHumanReadableFileSize(file.size);
-    if (!imageSource && file.type.startsWith("image/") && file.src) {
+    if (!imageSource && file.type.startsWith("image/")) {
         file.src().then(function (src) { return setImageSource(src); });
     }
-    var style = imageSource ? { backgroundImage: "url(" + imageSource + ")" } : {};
-    return (React__default.createElement("div", { className: styles.formatFile },
-        React__default.createElement("div", { className: styles.imageBlock, style: style, "data-testid": "imageBlock" },
-            !imageSource && (React__default.createElement("div", { className: styles.icon },
-                React__default.createElement(index$2.Icon, { name: iconName }))),
-            !isComplete && (React__default.createElement("div", { className: styles.progress },
-                React__default.createElement(index$1.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
-        React__default.createElement("div", { className: styles.contentBlock },
-            React__default.createElement(index.Typography, { element: "span" }, file.name),
-            React__default.createElement(index.Typography, { element: "p", size: "small", textColor: "greyBlueDark" }, fileSize)),
-        isComplete && onDelete && (React__default.createElement("div", { className: styles.actionBlock },
-            React__default.createElement(index$5.Button, { onClick: onDelete, type: "tertiary", variation: "destructive", icon: "trash", ariaLabel: "Delete" })))));
-}
-function getHumanReadableFileSize(sizeInBytes) {
-    return filesize(sizeInBytes);
+    var image = (React__default.createElement("img", { src: imageSource, onLoad: function () {
+            setImageLoaded(true);
+        }, className: classnames(styles$1.image, (_b = {}, _b[styles$1.loading] = !imageLoaded, _b)), alt: name, "data-testid": "internalThumbnailImage" }));
+    if (imageLoaded) {
+        return image;
+    }
+    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size]) },
+        imageSource && image,
+        React__default.createElement(index$2.Icon, { name: iconName, color: "greyBlue" }),
+        React__default.createElement("div", { className: classnames(styles$1.fileName) }, hideName && (React__default.createElement(index.Typography, { element: "span", textColor: "text" }, name)))));
 }
 function getIconNameFromType(mimeType) {
     if (mimeType.startsWith("image/"))
@@ -61,4 +81,43 @@ function getIconNameFromType(mimeType) {
     }
 }
 
+function FormatFile(_a) {
+    var _b, _c;
+    var file = _a.file, _d = _a.display, display = _d === void 0 ? "expanded" : _d, _e = _a.displaySize, displaySize = _e === void 0 ? "base" : _e, onDelete = _a.onDelete, onClick = _a.onClick;
+    var isComplete = file.progress >= 1;
+    var fileSize = getHumanReadableFileSize(file.size);
+    var wrapperClassNames = classnames(styles[display], (_b = {},
+        _b[styles[displaySize]] = display === "compact",
+        _b));
+    var DetailsContainer = isComplete && onClick ? "button" : "div";
+    var detailsClassNames = classnames(styles.wrapper, (_c = {},
+        _c[styles[displaySize]] = display === "compact",
+        _c[styles.hoverable] = isHoverable({ display: display, isComplete: isComplete, onClick: onClick, onDelete: onDelete }),
+        _c[styles.clickable] = onClick,
+        _c[styles.deleteable] = display === "compact",
+        _c));
+    var thumbnailContainerClassNames = classnames(styles.thumbnail, styles[displaySize]);
+    return (React__default.createElement("div", { className: wrapperClassNames },
+        React__default.createElement(DetailsContainer, { className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
+            React__default.createElement("div", { className: thumbnailContainerClassNames },
+                React__default.createElement(InternalThumbnail, { name: file.name, hideName: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default.createElement("div", { className: styles.progress },
+                    React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default.createElement("div", { className: styles.contentBlock },
+                React__default.createElement(index$1.Text, { size: "large" }, file.name),
+                React__default.createElement(index$1.Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React__default.createElement("div", { className: styles.deleteButton },
+            React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+}
+function isHoverable(_a) {
+    var display = _a.display, isComplete = _a.isComplete, onClick = _a.onClick, onDelete = _a.onDelete;
+    if (display === "compact") {
+        return Boolean(isComplete && (onClick || onDelete));
+    }
+    else if (display === "expanded") {
+        return Boolean(isComplete && onClick);
+    }
+    return false;
+}
+
 exports.FormatFile = FormatFile;

package/dist/Gallery/Gallery.d.ts

@@ -0,0 +1,2 @@
+import { GalleryProps } from "./GalleryTypes";
+export declare function Gallery({ files, size, max, onDelete }: GalleryProps): JSX.Element;

package/dist/Gallery/index.d.ts

@@ -0,0 +1 @@
+export { Gallery } from "./Gallery";

package/dist/Gallery/index.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var __chunk_1 = require('../chunk-b67af3cb.js');
+var React = require('react');
+var React__default = _interopDefault(React);
+var __chunk_2 = require('../chunk-17e02351.js');
+require('classnames');
+require('../Typography/index.js');
+require('../Text/index.js');
+require('@jobber/design');
+require('../Icon/index.js');
+require('../Heading/index.js');
+require('react-router-dom');
+var index$5 = require('../Button/index.js');
+require('framer-motion');
+require('@jobber/hooks');
+require('../ButtonDismiss/index.js');
+require('react-dom');
+require('../Modal/index.js');
+require('../Content/index.js');
+require('react-markdown');
+require('../Emphasis/index.js');
+require('../Markdown/index.js');
+require('../ConfirmationModal/index.js');
+require('filesize');
+var index$8 = require('../FormatFile/index.js');
+require('../ProgressBar/index.js');
+require('react-image-lightbox');
+var index$9 = require('../LightBox/index.js');
+require('react-image-lightbox/style.css');
+
+var css = ".oLHYkzv718LqMvtqFZFcZ,\n._2JSG0uYj1HSXFads63nptQ {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._2JSG0uYj1HSXFads63nptQ {\n  grid-gap: var(--space-base);\n  grid-gap: var(--space-base);\n  gap: var(--space-base);\n}\n\n.FG8mZ6UcMPRsMC9HQinY2 {\n  display: -ms-flexbox;\n  display: flex;\n  width: 56px;\n}\n\n._1cTzKosWc22qxWZSiI0CzZ {\n  display: -ms-flexbox;\n  display: flex;\n  width: 168px;\n}\n";
+var styles = {"gallery":"oLHYkzv718LqMvtqFZFcZ","galleryLarge":"_2JSG0uYj1HSXFads63nptQ","baseShowMoreButton":"FG8mZ6UcMPRsMC9HQinY2","largeShowMoreButton":"_1cTzKosWc22qxWZSiI0CzZ"};
+__chunk_2.styleInject(css);
+
+function Gallery(_a) {
+    var files = _a.files, _b = _a.size, size = _b === void 0 ? "base" : _b, max = _a.max, onDelete = _a.onDelete;
+    var _c = generateImagesArray(files), images = _c.images, filesToImageIndex = _c.filesToImageIndex;
+    var _d = __chunk_1.__read(React.useState(false), 2), lightboxOpen = _d[0], setLightboxOpen = _d[1];
+    var _e = __chunk_1.__read(React.useState(0), 2), lightboxIndex = _e[0], setLightboxIndex = _e[1];
+    var _f = __chunk_1.__read(React.useState(max ? false : true), 2), displayPastMax = _f[0], setDisplayPastMax = _f[1];
+    var visibleFiles = displayPastMax ? files : files.slice(0, max);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
+            visibleFiles.map(function (file, index) {
+                return (React__default.createElement(index$8.FormatFile, { key: file.key, file: __chunk_1.__assign(__chunk_1.__assign({}, file), { src: function () { return Promise.resolve(file.src); } }), display: "compact", displaySize: size, onClick: function () {
+                        handleThumbnailClicked(index);
+                    }, onDelete: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(file); } }));
+            }),
+            max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: styles[size + "ShowMoreButton"] },
+                React__default.createElement(index$5.Button, { type: "tertiary", size: size, label: "+ " + (files.length - max), fullWidth: true, onClick: function () {
+                        setDisplayPastMax(true);
+                    } })))),
+        React__default.createElement(index$9.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
+    function handleThumbnailClicked(index) {
+        if (files[index].type.startsWith("image/")) {
+            handleLightboxOpen(index);
+        }
+        else {
+            window.open(files[index].src, "_blank");
+        }
+    }
+    function handleLightboxOpen(index) {
+        var fileToImageIndex = filesToImageIndex[index];
+        if (fileToImageIndex !== undefined) {
+            setLightboxIndex(fileToImageIndex);
+            setLightboxOpen(true);
+        }
+    }
+    function handleLightboxClose() {
+        setLightboxOpen(false);
+    }
+}
+function generateImagesArray(files) {
+    var images = [];
+    var filesToImageIndex = [];
+    var imageIndex = 0;
+    for (var i = 0; i < files.length; i++) {
+        if (files[i].type.startsWith("image/")) {
+            images.push({ title: files[i].name, url: files[i].src });
+            filesToImageIndex.push(imageIndex);
+            imageIndex++;
+        }
+        else {
+            filesToImageIndex.push(undefined);
+        }
+    }
+    return { images: images, filesToImageIndex: filesToImageIndex };
+}
+
+exports.Gallery = Gallery;

package/dist/InputAvatar/index.js

@@ -18,10 +18,10 @@ var index$5 = require('../Button/index.js');
 var index$3 = require('../Avatar/index.js');
 require('color');
 require('../Content/index.js');
-var index$1 = require('../ProgressBar/index.js');
+var index$8$1 = require('../ProgressBar/index.js');
 require('react-dropzone');
 require('axios');
-var index$4 = require('../InputFile/index.js');
+var index$1 = require('../InputFile/index.js');
 
 var css = "._1e1D2becaB2vzZJ8QkTQFY {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._1e1D2becaB2vzZJ8QkTQFY > *:not(:last-child) {\n  margin-right: var(--space-small);\n}\n\n.TQgDlkCH4_o4LkH2hOqde {\n  position: relative;\n}\n\n.zq7uZTFFJ0aS_hIEAvVPX {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  height: 100%;\n  margin: 0 var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: var(--radius-circle);\n  background-color: var(--color-blue--dark);\n  opacity: 0.3;\n  mix-blend-mode: multiply;\n}\n";
 var styles = {"inputAvatar":"_1e1D2becaB2vzZJ8QkTQFY","preview":"TQgDlkCH4_o4LkH2hOqde","centered":"zq7uZTFFJ0aS_hIEAvVPX","overlay":"_3wSTh_yNalSZ5i5bnf_clw"};
@@ -35,8 +35,8 @@ function InputAvatar(_a) {
             React__default.createElement(index$3.Avatar, __chunk_1.__assign({ size: "large" }, avatarProps)),
             progress < 1 && (React__default.createElement(Overlay, null,
                 React__default.createElement(Centered, null,
-                    React__default.createElement(index$1.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
-        React__default.createElement(index$4.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
+                    React__default.createElement(index$8$1.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
+        React__default.createElement(index$1.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
         avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(index$5.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {
         onChange && onChange(newFile);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.84.1",
+  "version": "2.84.4-pre.11+0bc09bbd",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "6fd73739c98153f3498d96a2c9ee25b052c51547"
+  "gitHead": "0bc09bbdf03734cf84ec041512ce6ecc4a2481d5"
 }