@jobber/components 4.85.5 → 4.85.6-CJS-to-ESM.3

package/dist/{FormatDate-70ea5b43.js → FormatDate-BzJETLja.js}

@@ -2,10 +2,6 @@
 
 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) {
@@ -17,7 +13,7 @@ function FormatDate({ date: inputDate, showYear = true, }) {
     else {
         dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
+    return React.createElement(React.Fragment, null, strFormatDate(dateObject, showYear));
 }
 function strFormatDate(date, showYear = true) {
     let formatOptions = {

package/dist/FormatDate-Dxs33-Xj.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/FormatEmail/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var FormatEmail = require('../FormatEmail-BH1qM7Va.js');
+require('react');
+require('classnames');
+require('../style-inject.es-XZHJH68X.js');
+
+
+
+exports.FormatEmail = FormatEmail.FormatEmail;

package/dist/FormatEmail/index.mjs

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

package/dist/FormatEmail-BH1qM7Va.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+
+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(styles.email);
+    return React.createElement("address", { className: className }, email);
+}
+
+exports.FormatEmail = FormatEmail;

package/dist/FormatEmail-_Ytrq7mn.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.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/FormatFile/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var FormatFile = require('../FormatFile-BIVkB0MY.js');
+require('react');
+require('classnames');
+require('filesize');
+require('../style-inject.es-XZHJH68X.js');
+require('../Button-D3mW3Hcg.js');
+require('react-router-dom');
+require('../Icon-B9XNdA1T.js');
+require('@jobber/design');
+require('../Typography-Dx8KtnBw.js');
+require('../ConfirmationModal-BX-WMEkO.js');
+require('../useOnKeyDown-B9JF2jLZ.js');
+require('../Modal-DYsKMdiT.js');
+require('react-dom');
+require('framer-motion');
+require('../useRefocusOnActivator-DOJm9VWz.js');
+require('../useFocusTrap-CMLwEDMY.js');
+require('../Heading-suKDLmO4.js');
+require('../getAtlantisConfig-mcMVqf6m.js');
+require('../ButtonDismiss-l6Kunmen.js');
+require('../Content-B8Od1cqS.js');
+require('../Markdown-B2B4q1R4.js');
+require('react-markdown');
+require('../Text-D9gsHxbp.js');
+require('../Emphasis-B3vf8Ek9.js');
+require('../Glimmer-Cgcy2Ruw.js');
+require('../tslib.es6-ld72nsZq.js');
+require('../ProgressBar-D2wik11q.js');
+
+
+
+exports.FormatFile = FormatFile.FormatFile;

package/dist/FormatFile/index.mjs

@@ -0,0 +1,28 @@
+export { F as FormatFile } from '../FormatFile-BA27eKT-.js';
+import 'react';
+import 'classnames';
+import 'filesize';
+import '../style-inject.es-tgCJW-Cu.js';
+import '../Button-CWVwgwhn.js';
+import 'react-router-dom';
+import '../Icon-CoHJokXb.js';
+import '@jobber/design';
+import '../Typography-G8pA_xwj.js';
+import '../ConfirmationModal-KamMnKR1.js';
+import '../useOnKeyDown-BsUfDste.js';
+import '../Modal-u49JU_yq.js';
+import 'react-dom';
+import 'framer-motion';
+import '../useRefocusOnActivator-CMNWUYSe.js';
+import '../useFocusTrap-BtnnoHG8.js';
+import '../Heading-CL3UujY7.js';
+import '../getAtlantisConfig-6FPWID0P.js';
+import '../ButtonDismiss-GLptCaNc.js';
+import '../Content-BknIp35w.js';
+import '../Markdown-BqNLA1UK.js';
+import 'react-markdown';
+import '../Text-DEviM1Tv.js';
+import '../Emphasis-xxFrrT2i.js';
+import '../Glimmer-Dz1E9Bo5.js';
+import '../tslib.es6-Df1SgIEn.js';
+import '../ProgressBar-DjFTRxLD.js';

package/dist/FormatFile-BA27eKT-.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-tgCJW-Cu.js';
+import { B as Button } from './Button-CWVwgwhn.js';
+import { C as ConfirmationModal } from './ConfirmationModal-KamMnKR1.js';
+import { G as Glimmer } from './Glimmer-Dz1E9Bo5.js';
+import { I as Icon } from './Icon-CoHJokXb.js';
+import { T as Typography } from './Typography-G8pA_xwj.js';
+import { T as Text } from './Text-DEviM1Tv.js';
+import { P as ProgressBar } from './ProgressBar-DjFTRxLD.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-BIVkB0MY.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var getHumanReadableFileSize = require('filesize');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var Button = require('./Button-D3mW3Hcg.js');
+var ConfirmationModal = require('./ConfirmationModal-BX-WMEkO.js');
+var Glimmer = require('./Glimmer-Cgcy2Ruw.js');
+var Icon = require('./Icon-B9XNdA1T.js');
+var Typography = require('./Typography-Dx8KtnBw.js');
+var Text = require('./Text-D9gsHxbp.js');
+var ProgressBar = require('./ProgressBar-D2wik11q.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_es.styleInject(css_248z$2);
+
+function FormatFileDeleteButton({ size, onDelete }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button.Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        React.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.createElement(React.Fragment, null,
+        !imageLoaded && React.createElement(Glimmer.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.Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React.createElement("div", { className: styles$1.fileName },
+            React.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(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.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
+            display === "expanded" && (React.createElement("div", { className: styles$2.contentBlock },
+                React.createElement(Text.Text, { size: "base" }, file.name),
+                React.createElement(Text.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;
+}
+
+exports.FormatFile = FormatFile;

package/dist/FormatRelativeDateTime/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var FormatRelativeDateTime = require('../FormatRelativeDateTime-COgItrYT.js');
+require('react');
+
+
+
+exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;

package/dist/FormatRelativeDateTime/index.mjs

@@ -0,0 +1,2 @@
+export { F as FormatRelativeDateTime } from '../FormatRelativeDateTime-DTnQraIq.js';
+import 'react';

package/dist/{FormatRelativeDateTime/index.js → FormatRelativeDateTime-COgItrYT.js}

@@ -1,13 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 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 FormatRelativeDateTime({ date: inputDate, }) {
     let dateObject;
     if (inputDate instanceof Date) {
@@ -24,18 +18,18 @@ function FormatRelativeDateTime({ date: inputDate, }) {
     const delta = now - date.getTime() / 1000; //seconds;
     switch (relativeTimeRange(delta)) {
         case "less than an hour":
-            return React__default["default"].createElement(React__default["default"].Fragment, null, showMinutes(Math.round(delta / 60)));
+            return React.createElement(React.Fragment, null, showMinutes(Math.round(delta / 60)));
         case "less then a day":
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, date.toLocaleTimeString(undefined, {
+            return (React.createElement(React.Fragment, null, date.toLocaleTimeString(undefined, {
                 hour: "numeric",
                 minute: "numeric",
             })));
         case "less than a week":
-            return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(date, { weekday: "short" }));
+            return React.createElement(React.Fragment, null, strFormatDate(date, { weekday: "short" }));
         case "less than a year":
-            return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
+            return React.createElement(React.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
         default:
-            return (React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(date, {
+            return (React.createElement(React.Fragment, null, strFormatDate(date, {
                 month: "short",
                 day: "numeric",
                 year: "numeric",

package/dist/FormatRelativeDateTime-DTnQraIq.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 };

package/dist/FormatTime/index.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var FormatTime = require('../FormatTime-CfcVslez.js');
+require('react');
+
+
+
+exports.FormatTime = FormatTime.FormatTime;

package/dist/FormatTime/index.mjs

@@ -0,0 +1,2 @@
+export { F as FormatTime } from '../FormatTime-BGr7_DaA.js';
+import 'react';