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

package/dist/FormField.js

@@ -0,0 +1,16 @@
+export { F as FormField } from './FormField-f1f405d2.js';
+import './tslib.es6-c563c1dd.js';
+import 'react';
+import 'react-hook-form';
+import './style-inject.es-a0e1a0ba.js';
+import 'classnames';
+import '@jobber/hooks/useShowClear';
+import './Button-30154871.js';
+import 'react-router-dom';
+import './Icon-22723fe6.js';
+import '@jobber/design';
+import './Typography-52ed1386.js';
+import './Text-c92ddeb3.js';
+import './InputValidation-fe42fc3f.js';
+import 'framer-motion';
+import './Spinner-90081e20.js';

package/dist/FormatDate-70ea5b43.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function FormatDate({ date: inputDate, showYear = true, }) {
+    let dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
+}
+function strFormatDate(date, showYear = true) {
+    let formatOptions = {
+        month: "short",
+        day: "numeric",
+    };
+    if (showYear) {
+        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
+    }
+    return date.toLocaleDateString(undefined, formatOptions);
+}
+
+exports.FormatDate = FormatDate;
+exports.strFormatDate = strFormatDate;

package/dist/FormatDate-720b39cf.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function FormatDate({ date: inputDate, showYear = true, }) {
+    let dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
+    }
+    return React.createElement(React.Fragment, null, strFormatDate(dateObject, showYear));
+}
+function strFormatDate(date, showYear = true) {
+    let formatOptions = {
+        month: "short",
+        day: "numeric",
+    };
+    if (showYear) {
+        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
+    }
+    return date.toLocaleDateString(undefined, formatOptions);
+}
+
+export { FormatDate as F, strFormatDate as s };

package/dist/FormatDate.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FormatDate = require('./FormatDate-70ea5b43.js');
+require('react');
+
+
+
+exports.FormatDate = FormatDate.FormatDate;
+exports.strFormatDate = FormatDate.strFormatDate;

package/dist/FormatDate.js

@@ -0,0 +1,2 @@
+export { F as FormatDate, s as strFormatDate } from './FormatDate-720b39cf.js';
+import 'react';

package/dist/FormatEmail-04ee4085.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+
+var css_248z = ".Cr7OFSgq9WA- {\n  font-style: normal;\n}\n";
+var styles = {"email":"Cr7OFSgq9WA-"};
+styleInject(css_248z);
+
+function FormatEmail({ email }) {
+    const className = classnames(styles.email);
+    return React.createElement("address", { className: className }, email);
+}
+
+export { FormatEmail as F };

package/dist/FormatEmail-298393bb.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = ".Cr7OFSgq9WA- {\n  font-style: normal;\n}\n";
+var styles = {"email":"Cr7OFSgq9WA-"};
+styleInject_es.styleInject(css_248z);
+
+function FormatEmail({ email }) {
+    const className = classnames__default["default"](styles.email);
+    return React__default["default"].createElement("address", { className: className }, email);
+}
+
+exports.FormatEmail = FormatEmail;

package/dist/FormatEmail.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FormatEmail = require('./FormatEmail-298393bb.js');
+require('react');
+require('classnames');
+require('./style-inject.es-9d2f5f4e.js');
+
+
+
+exports.FormatEmail = FormatEmail.FormatEmail;

package/dist/FormatEmail.js

@@ -0,0 +1,4 @@
+export { F as FormatEmail } from './FormatEmail-04ee4085.js';
+import 'react';
+import 'classnames';
+import './style-inject.es-a0e1a0ba.js';

package/dist/FormatFile-648aea3e.js

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import getHumanReadableFileSize from 'filesize';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { B as Button } from './Button-30154871.js';
+import { C as ConfirmationModal } from './ConfirmationModal-64f82a31.js';
+import { G as Glimmer } from './Glimmer-6bf75ae0.js';
+import { I as Icon } from './Icon-22723fe6.js';
+import { T as Typography } from './Typography-52ed1386.js';
+import { T as Text } from './Text-c92ddeb3.js';
+import { P as ProgressBar } from './ProgressBar-022ef3f6.js';
+
+var css_248z$2 = ":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.cx4iQqlNNvc- {\n  display: grid;\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n  gap: var(--space-small);\n  grid-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(--file-card--border-color);\n  border-radius: var(--radius-base);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n}\n\n.nSaog7-7Jn0-,\n.cx4iQqlNNvc- {\n  position: relative;\n}\n\n._9jVt97W52JY- {\n  display: grid;\n  grid-template-columns: -webkit-max-content auto;\n  grid-template-columns: max-content auto;\n  gap: var(--space-small);\n  grid-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.z-kUGMs0Yfg- {\n  width: 168px;\n  height: 168px;\n}\n\n.x1Ql0enaIxY- {\n  width: 56px;\n  height: 56px;\n}\n\n.il9-MCeoBts- {\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.cx4iQqlNNvc- ._9jVt97W52JY- {\n  outline: none;\n}\n\n.nSaog7-7Jn0- ._9jVt97W52JY-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.nSaog7-7Jn0- .il9-MCeoBts- {\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY-: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.cx4iQqlNNvc- .il9-MCeoBts- {\n  border-right: none;\n  border-bottom-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n}\n\n.O9EG-xJYVco- {\n  cursor: pointer;\n}\n\n.QmrRp5CTpGU- .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\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.QmrRp5CTpGU-:hover .il9-MCeoBts-::after,\n.QmrRp5CTpGU-:focus .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n  opacity: 1;\n}\n\n.N5qVYfi1Pgo- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n}\n\n.TyXXZnJuVwo- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  min-width: 0;\n}\n\n.TyXXZnJuVwo- p {\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.nSaog7-7Jn0- ._7wDO6nPXy-g- {\n  position: absolute;\n  top: var(--space-smaller);\n  right: var(--space-smaller);\n}\n\n.sgUJuNv0rUE- ~ ._7wDO6nPXy-g- {\n  visibility: hidden;\n}\n\n._7wDO6nPXy-g-:focus-within,\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n  visibility: visible;\n}\n";
+var styles$2 = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
+styleInject(css_248z$2);
+
+function FormatFileDeleteButton({ size, onDelete }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React.createElement(ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
+}
+
+var css_248z$1 = ".M9Y7sOk6lTc- {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto -webkit-max-content;\n  grid-template-rows: auto max-content;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n  -ms-flex-align: end;\n      align-items: end;\n}\n\n.YXN92rsh2eU- {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n  padding: var(--space-smaller);\n  font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  padding: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
+var styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
+styleInject(css_248z$1);
+
+var css_248z = "._62D0xyydQwo- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -webkit-animation: _5GIEBejwNJc- 200ms ease;\n          animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n  display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
+styleInject(css_248z);
+
+function InternalThumbnailImage({ file }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = useState();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    if (!imageSource) {
+        src().then(url => setImageSource(url));
+    }
+    return (React.createElement(React.Fragment, null,
+        !imageLoaded && React.createElement(Glimmer, { size: "auto" }),
+        React.createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }) })));
+    function handleImageLoad() {
+        setImageLoaded(true);
+    }
+}
+
+// This function comes from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
+function getClientBrowser(userAgent) {
+    // The order matters here, and this may report false positives for unlisted browsers.
+    if (userAgent.includes("Firefox")) {
+        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
+        return "Mozilla Firefox";
+    }
+    else if (userAgent.includes("SamsungBrowser")) {
+        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
+        return "Samsung Internet";
+    }
+    else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
+        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
+        return "Opera";
+    }
+    else if (userAgent.includes("Edge")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+        return "Microsoft Edge (Legacy)";
+    }
+    else if (userAgent.includes("Edg")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
+        return "Microsoft Edge (Chromium)";
+    }
+    else if (userAgent.includes("Chrome")) {
+        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
+        return "Google Chrome or Chromium";
+    }
+    else if (userAgent.includes("Safari")) {
+        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
+        return "Apple Safari";
+    }
+    else {
+        return "unknown";
+    }
+}
+function isSafari(userAgent) {
+    return getClientBrowser(userAgent) === "Apple Safari";
+}
+
+function InternalThumbnail({ compact = false, size, file, }) {
+    const { name, type } = file;
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    const nonHeicImage = !type.startsWith("image/heic");
+    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+    if (type.startsWith("image/") && (nonHeicImage || isSafari(userAgent))) {
+        return React.createElement(InternalThumbnailImage, { file: file });
+    }
+    return (React.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
+            [styles$1.hasName]: hasName,
+        }) },
+        React.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React.createElement("div", { className: styles$1.fileName },
+            React.createElement(Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+}
+function getIconNameFromType(mimeType) {
+    if (mimeType.startsWith("image/"))
+        return "image";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    switch (mimeType) {
+        case "application/pdf":
+            return "pdf";
+        case "application/vnd.ms-excel":
+            return "excel";
+        default:
+            return "file";
+    }
+}
+
+function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+    const isComplete = file.progress >= 1;
+    const fileSize = getHumanReadableFileSize(file.size);
+    const wrapperClassNames = classnames(styles$2[display], {
+        [styles$2[displaySize]]: display === "compact",
+    });
+    const DetailsContainer = isComplete && onClick ? "button" : "div";
+    const detailsClassNames = classnames(styles$2.wrapper, {
+        [styles$2[displaySize]]: display === "compact",
+        [styles$2.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
+        [styles$2.clickable]: onClick,
+        [styles$2.deleteable]: display === "compact",
+    });
+    const thumbnailContainerClassNames = classnames(styles$2.thumbnail, styles$2[displaySize]);
+    return (React.createElement("div", { className: wrapperClassNames },
+        React.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
+            React.createElement("div", { className: thumbnailContainerClassNames },
+                React.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React.createElement("div", { className: styles$2.progress },
+                    React.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React.createElement("div", { className: styles$2.contentBlock },
+                React.createElement(Text, { size: "base" }, file.name),
+                React.createElement(Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React.createElement("div", { className: styles$2.deleteButton },
+            React.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+}
+function isHoverable({ display, isComplete, onClick, onDelete, }) {
+    if (display === "compact") {
+        return Boolean(isComplete && (onClick || onDelete));
+    }
+    else if (display === "expanded") {
+        return Boolean(isComplete && onClick);
+    }
+    return false;
+}
+
+export { FormatFile as F };

package/dist/FormatFile-d57b8dfa.js

@@ -0,0 +1,162 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getHumanReadableFileSize = require('filesize');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Button = require('./Button-ec64869e.js');
+var ConfirmationModal = require('./ConfirmationModal-09ec5d02.js');
+var Glimmer = require('./Glimmer-3fcdae65.js');
+var Icon = require('./Icon-405a216c.js');
+var Typography = require('./Typography-fd88fcce.js');
+var Text = require('./Text-714f7d14.js');
+var ProgressBar = require('./ProgressBar-4ee648b7.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var getHumanReadableFileSize__default = /*#__PURE__*/_interopDefaultLegacy(getHumanReadableFileSize);
+
+var css_248z$2 = ":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.cx4iQqlNNvc- {\n  display: grid;\n  grid-template-columns: auto -webkit-max-content;\n  grid-template-columns: auto max-content;\n  gap: var(--space-small);\n  grid-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(--file-card--border-color);\n  border-radius: var(--radius-base);\n  background-color: var(--color-white);\n  background-color: var(--file-card--background-color);\n}\n\n.nSaog7-7Jn0-,\n.cx4iQqlNNvc- {\n  position: relative;\n}\n\n._9jVt97W52JY- {\n  display: grid;\n  grid-template-columns: -webkit-max-content auto;\n  grid-template-columns: max-content auto;\n  gap: var(--space-small);\n  grid-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.z-kUGMs0Yfg- {\n  width: 168px;\n  height: 168px;\n}\n\n.x1Ql0enaIxY- {\n  width: 56px;\n  height: 56px;\n}\n\n.il9-MCeoBts- {\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.cx4iQqlNNvc- ._9jVt97W52JY- {\n  outline: none;\n}\n\n.nSaog7-7Jn0- ._9jVt97W52JY-:focus {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.nSaog7-7Jn0- .il9-MCeoBts- {\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY-: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.cx4iQqlNNvc- .il9-MCeoBts- {\n  border-right: none;\n  border-bottom-left-radius: var(--radius-base);\n  border-top-left-radius: var(--radius-base);\n}\n\n.O9EG-xJYVco- {\n  cursor: pointer;\n}\n\n.QmrRp5CTpGU- .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\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.QmrRp5CTpGU-:hover .il9-MCeoBts-::after,\n.QmrRp5CTpGU-:focus .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n  opacity: 1;\n}\n\n.N5qVYfi1Pgo- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  padding: var(--file-card--base-padding);\n}\n\n.TyXXZnJuVwo- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  min-width: 0;\n}\n\n.TyXXZnJuVwo- p {\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.nSaog7-7Jn0- ._7wDO6nPXy-g- {\n  position: absolute;\n  top: var(--space-smaller);\n  right: var(--space-smaller);\n}\n\n.sgUJuNv0rUE- ~ ._7wDO6nPXy-g- {\n  visibility: hidden;\n}\n\n._7wDO6nPXy-g-:focus-within,\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n  visibility: visible;\n}\n";
+var styles$2 = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
+styleInject_es.styleInject(css_248z$2);
+
+function FormatFileDeleteButton({ size, onDelete }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
+}
+
+var css_248z$1 = ".M9Y7sOk6lTc- {\n  display: grid;\n  grid-template-columns: auto;\n  grid-template-rows: auto -webkit-max-content;\n  grid-template-rows: auto max-content;\n  width: inherit;\n  height: inherit;\n  -ms-flex-align: center;\n      align-items: center;\n  justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n  -ms-flex-align: end;\n      align-items: end;\n}\n\n.YXN92rsh2eU- {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n  padding: var(--space-smaller);\n  font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  padding: var(--space-small);\n  font-size: var(--typography--fontSize-small);\n}\n";
+var styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = "._62D0xyydQwo- {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -webkit-animation: _5GIEBejwNJc- 200ms ease;\n          animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n  display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _5GIEBejwNJc- {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
+var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
+styleInject_es.styleInject(css_248z);
+
+function InternalThumbnailImage({ file }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = React.useState();
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    if (!imageSource) {
+        src().then(url => setImageSource(url));
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        !imageLoaded && React__default["default"].createElement(Glimmer.Glimmer, { size: "auto" }),
+        React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames__default["default"](styles.image, { [styles.hidden]: !imageLoaded }) })));
+    function handleImageLoad() {
+        setImageLoaded(true);
+    }
+}
+
+// This function comes from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
+function getClientBrowser(userAgent) {
+    // The order matters here, and this may report false positives for unlisted browsers.
+    if (userAgent.includes("Firefox")) {
+        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
+        return "Mozilla Firefox";
+    }
+    else if (userAgent.includes("SamsungBrowser")) {
+        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
+        return "Samsung Internet";
+    }
+    else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
+        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
+        return "Opera";
+    }
+    else if (userAgent.includes("Edge")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+        return "Microsoft Edge (Legacy)";
+    }
+    else if (userAgent.includes("Edg")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
+        return "Microsoft Edge (Chromium)";
+    }
+    else if (userAgent.includes("Chrome")) {
+        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
+        return "Google Chrome or Chromium";
+    }
+    else if (userAgent.includes("Safari")) {
+        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
+        return "Apple Safari";
+    }
+    else {
+        return "unknown";
+    }
+}
+function isSafari(userAgent) {
+    return getClientBrowser(userAgent) === "Apple Safari";
+}
+
+function InternalThumbnail({ compact = false, size, file, }) {
+    const { name, type } = file;
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    const nonHeicImage = !type.startsWith("image/heic");
+    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+    if (type.startsWith("image/") && (nonHeicImage || isSafari(userAgent))) {
+        return React__default["default"].createElement(InternalThumbnailImage, { file: file });
+    }
+    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
+            [styles$1.hasName]: hasName,
+        }) },
+        React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default["default"].createElement("div", { className: styles$1.fileName },
+            React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
+}
+function getIconNameFromType(mimeType) {
+    if (mimeType.startsWith("image/"))
+        return "image";
+    if (mimeType.startsWith("video/"))
+        return "video";
+    switch (mimeType) {
+        case "application/pdf":
+            return "pdf";
+        case "application/vnd.ms-excel":
+            return "excel";
+        default:
+            return "file";
+    }
+}
+
+function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+    const isComplete = file.progress >= 1;
+    const fileSize = getHumanReadableFileSize__default["default"](file.size);
+    const wrapperClassNames = classnames__default["default"](styles$2[display], {
+        [styles$2[displaySize]]: display === "compact",
+    });
+    const DetailsContainer = isComplete && onClick ? "button" : "div";
+    const detailsClassNames = classnames__default["default"](styles$2.wrapper, {
+        [styles$2[displaySize]]: display === "compact",
+        [styles$2.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
+        [styles$2.clickable]: onClick,
+        [styles$2.deleteable]: display === "compact",
+    });
+    const thumbnailContainerClassNames = classnames__default["default"](styles$2.thumbnail, styles$2[displaySize]);
+    return (React__default["default"].createElement("div", { className: wrapperClassNames },
+        React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
+            React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
+                React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                !isComplete && (React__default["default"].createElement("div", { className: styles$2.progress },
+                    React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React__default["default"].createElement("div", { className: styles$2.contentBlock },
+                React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
+                React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
+        isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$2.deleteButton },
+            React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
+}
+function isHoverable({ display, isComplete, onClick, onDelete, }) {
+    if (display === "compact") {
+        return Boolean(isComplete && (onClick || onDelete));
+    }
+    else if (display === "expanded") {
+        return Boolean(isComplete && onClick);
+    }
+    return false;
+}
+
+exports.FormatFile = FormatFile;

package/dist/FormatFile.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FormatFile = require('./FormatFile-d57b8dfa.js');
+require('react');
+require('classnames');
+require('filesize');
+require('./style-inject.es-9d2f5f4e.js');
+require('./Button-ec64869e.js');
+require('react-router-dom');
+require('./Icon-405a216c.js');
+require('@jobber/design');
+require('./Typography-fd88fcce.js');
+require('./ConfirmationModal-09ec5d02.js');
+require('@jobber/hooks/useOnKeyDown');
+require('./Modal-cda55f02.js');
+require('react-dom');
+require('framer-motion');
+require('@jobber/hooks/useRefocusOnActivator');
+require('@jobber/hooks/useFocusTrap');
+require('./Heading-a8a24775.js');
+require('./getAtlantisConfig-0f3e8af2.js');
+require('./ButtonDismiss-d7417429.js');
+require('./Content-60a3452a.js');
+require('./Markdown-36854bd5.js');
+require('react-markdown');
+require('./Text-714f7d14.js');
+require('./Emphasis-84de1f3f.js');
+require('./Glimmer-3fcdae65.js');
+require('./tslib.es6-754e2961.js');
+require('./ProgressBar-4ee648b7.js');
+
+
+
+exports.FormatFile = FormatFile.FormatFile;

package/dist/FormatFile.js

@@ -0,0 +1,28 @@
+export { F as FormatFile } from './FormatFile-648aea3e.js';
+import 'react';
+import 'classnames';
+import 'filesize';
+import './style-inject.es-a0e1a0ba.js';
+import './Button-30154871.js';
+import 'react-router-dom';
+import './Icon-22723fe6.js';
+import '@jobber/design';
+import './Typography-52ed1386.js';
+import './ConfirmationModal-64f82a31.js';
+import '@jobber/hooks/useOnKeyDown';
+import './Modal-eeb52d66.js';
+import 'react-dom';
+import 'framer-motion';
+import '@jobber/hooks/useRefocusOnActivator';
+import '@jobber/hooks/useFocusTrap';
+import './Heading-dfd4f1cf.js';
+import './getAtlantisConfig-5b50057c.js';
+import './ButtonDismiss-a11eef74.js';
+import './Content-c96e9299.js';
+import './Markdown-7b84fcdb.js';
+import 'react-markdown';
+import './Text-c92ddeb3.js';
+import './Emphasis-2a640962.js';
+import './Glimmer-6bf75ae0.js';
+import './tslib.es6-c563c1dd.js';
+import './ProgressBar-022ef3f6.js';

package/dist/FormatRelativeDateTime-529dc36b.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+function FormatRelativeDateTime({ date: inputDate, }) {
+    let dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.toJSON());
+    }
+    const now = Date.now() / 1000; //seconds
+    const date = dateObject;
+    const delta = now - date.getTime() / 1000; //seconds;
+    switch (relativeTimeRange(delta)) {
+        case "less than an hour":
+            return React.createElement(React.Fragment, null, showMinutes(Math.round(delta / 60)));
+        case "less then a day":
+            return (React.createElement(React.Fragment, null, date.toLocaleTimeString(undefined, {
+                hour: "numeric",
+                minute: "numeric",
+            })));
+        case "less than a week":
+            return React.createElement(React.Fragment, null, strFormatDate(date, { weekday: "short" }));
+        case "less than a year":
+            return React.createElement(React.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
+        default:
+            return (React.createElement(React.Fragment, null, strFormatDate(date, {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+            })));
+    }
+}
+function relativeTimeRange(delta) {
+    delta = delta / 60;
+    if (delta < 60)
+        return "less than an hour";
+    delta = delta / 60;
+    if (delta < 24)
+        return "less then a day";
+    delta = delta / 24;
+    if (delta < 7)
+        return "less than a week";
+    delta = delta / 365;
+    if (delta < 1)
+        return "less than a year";
+    return "a year or more";
+}
+function strFormatDate(date, options) {
+    return date.toLocaleDateString(undefined, options);
+}
+function showMinutes(minutes) {
+    if (minutes <= 1) {
+        return "1 minute ago";
+    }
+    else {
+        return minutes + " minutes ago";
+    }
+}
+
+export { FormatRelativeDateTime as F };