@jobber/components 6.56.1 → 6.57.0

package/dist/FormatFile-es.js

@@ -1,143 +1,42 @@
-import React__default, { useState, useEffect } from 'react';
-import classnames from 'classnames';
+import React__default, { useState } from 'react';
 import getHumanReadableFileSize from 'filesize';
-import { B as Button } from './Button-es.js';
-import { C as ConfirmationModal } from './ConfirmationModal-es.js';
-import { G as Glimmer } from './Glimmer-es.js';
-import { I as Icon } from './Icon-es.js';
-import { T as Typography } from './Typography-es.js';
+import classnames from 'classnames';
+import { T as Thumbnail } from './Thumbnail-es.js';
 import { T as Text } from './Text-es.js';
 import { P as ProgressBar } from './ProgressBar-es.js';
+import { B as Button } from './Button-es.js';
+import { C as ConfirmationModal } from './ConfirmationModal-es.js';
 
-var styles$2 = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};
-
-function FormatFileDeleteButton({ size, onDelete }) {
-    const buttonSize = size === "base" ? "small" : "base";
-    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
-    return (React__default.createElement("div", { className: styles$2.deleteButton },
-        React__default.createElement(Button, { onClick: () => setDeleteConfirmationOpen(true), variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
-        React__default.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 styles$1 = {"content":"GlvUe-y47J8-","hasName":"zxlhNVPlPfU-","large":"PLxm6a4dUeE-","fileName":"-HUnao9DHy4-","base":"HJGVBmS64DY-","spinning":"Svf9Lca4cus-"};
-
-var styles = {"image":"YdEHf0kMqIk-","fadeIn":"qG9O-VWpfw0-","hidden":"NoE9wiIsC-A-","spinning":"fNFmp-zaYd4-"};
-
-function InternalThumbnailImage({ file }) {
-    const { name, src } = file;
-    const [imageSource, setImageSource] = useState();
-    const [imageLoaded, setImageLoaded] = useState(false);
-    useEffect(() => {
-        src().then(url => setImageSource(url));
-    }, []);
-    return (React__default.createElement(React__default.Fragment, null,
-        !imageLoaded && React__default.createElement(Glimmer, { size: "auto" }),
-        React__default.createElement("img", { src: imageSource, onError: file.onImageLoadError, 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;
-    if (type.startsWith("image/") && isSupportedImageType(file)) {
-        return React__default.createElement(InternalThumbnailImage, { file: file });
-    }
-    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
-            [styles$1.hasName]: hasName,
-        }) },
-        React__default.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
-        hasName && (React__default.createElement("div", { className: styles$1.fileName },
-            React__default.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 isSupportedImageType(file) {
-    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
-    const nonHeicImage = !file.type.startsWith("image/heic");
-    const nonSVGImage = !file.type.startsWith("image/svg");
-    return (nonHeicImage || isSafari(userAgent)) && nonSVGImage;
-}
+var styles = {"formatFile":"y9T1gWK9SHY-","expanded":"_6qcLC0nLki0-","compact":"cSm0ukEQcOU-","wrapper":"TEarBLxe1QY-","large":"rha7bX0NCtI-","base":"_7kv4ujgaxNk-","thumbnail":"Km0E9H-xb-M-","deleteButton":"d2l80-AKBiU-","clickable":"f7xR4ZcqlLo-","hoverable":"LxLX5kFFkfI-","progress":"_121nzRvOA-0-","contentBlock":"cyiC2EalTkQ-","deleteable":"qwQuqw4uODY-","spinning":"dR8gWEecWxc-"};
 
-function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+const useFormatFile = ({ file }) => {
     const isComplete = file.progress >= 1;
     const fileSize = getHumanReadableFileSize(file.size);
-    const wrapperClassNames = classnames(styles$2[display], styles$2.formatFile, {
-        [styles$2[displaySize]]: display === "compact",
+    return {
+        isComplete,
+        fileSize,
+    };
+};
+
+const useFormatFileStyles = ({ display = "expanded", displaySize = "base", onClick, onDelete, isComplete, }) => {
+    const wrapperClassNames = classnames(styles[display], styles.formatFile, {
+        [styles[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 detailsClassNames = classnames(styles.wrapper, {
+        [styles[displaySize]]: display === "compact",
+        [styles.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
+        [styles.clickable]: onClick,
+        [styles.deleteable]: display === "compact",
     });
-    const thumbnailContainerClassNames = classnames(styles$2.thumbnail, styles$2[displaySize]);
-    return (React__default.createElement("div", { className: wrapperClassNames },
-        React__default.createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
-            React__default.createElement("div", { className: thumbnailContainerClassNames },
-                React__default.createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
-                !isComplete && (React__default.createElement("div", { className: styles$2.progress },
-                    React__default.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
-            display === "expanded" && (React__default.createElement("div", { className: styles$2.contentBlock },
-                React__default.createElement(Text, { size: "base" }, file.name),
-                React__default.createElement(Text, { size: "small" }, fileSize)))),
-        isComplete && onDelete && (React__default.createElement("div", { className: styles$2.deleteButton },
-            React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
-}
+    const thumbnailContainerClassNames = classnames(styles.thumbnail, styles[displaySize]);
+    return {
+        deleteButtonContainerClassNames: styles.deleteButton,
+        detailsClassNames,
+        progressClassNames: styles.progress,
+        thumbnailContainerClassNames,
+        wrapperClassNames,
+    };
+};
 function isHoverable({ display, isComplete, onClick, onDelete, }) {
     if (display === "compact") {
         return Boolean(isComplete && (onClick || onDelete));
@@ -148,4 +47,67 @@ function isHoverable({ display, isComplete, onClick, onDelete, }) {
     return false;
 }
 
-export { FormatFile as F, isSafari as i };
+function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
+    const { isComplete, fileSize } = useFormatFile({
+        file,
+        display,
+        displaySize,
+        onClick,
+        onDelete,
+    });
+    const { wrapperClassNames, detailsClassNames, progressClassNames, thumbnailContainerClassNames, deleteButtonContainerClassNames, } = useFormatFileStyles({
+        display,
+        displaySize,
+        isComplete,
+        onClick,
+        onDelete,
+    });
+    return (React__default.createElement(FormatFile.Wrapper, { className: wrapperClassNames },
+        React__default.createElement(FormatFile.Body, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, ariaBusy: !isComplete, isComplete: isComplete },
+            React__default.createElement(FormatFile.ThumbnailContainer, { className: thumbnailContainerClassNames },
+                React__default.createElement(Thumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                React__default.createElement(FormatFile.ProgressContainer, { isHidden: isComplete, className: progressClassNames },
+                    React__default.createElement(ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 }))),
+            React__default.createElement(FormatFile.Expanded, { isVisible: display === "expanded", file: file, fileSize: fileSize })),
+        React__default.createElement(FormatFile.DeleteButtonContainer, { className: deleteButtonContainerClassNames, isHidden: !isComplete || onDelete === undefined },
+            React__default.createElement(FormatFile.DeleteButton, { onDelete: () => {
+                    setDeleteConfirmationOpen(true);
+                } },
+                React__default.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) })))));
+}
+FormatFile.DeleteButtonContainer = function FormatFileDeleteButtonContainer({ children, className, isHidden, }) {
+    if (isHidden)
+        return null;
+    return React__default.createElement("div", { className: className }, children);
+};
+FormatFile.ProgressContainer = function FormatFileProgressContainer({ isHidden, children, className, }) {
+    if (isHidden)
+        return null;
+    return React__default.createElement("div", { className: className }, children);
+};
+FormatFile.ThumbnailContainer = function FormatFileThumbnailContainer({ children, className, }) {
+    return React__default.createElement("div", { className: className }, children);
+};
+FormatFile.Body = function FormatFileBody({ children, className, type, onClick, tabIndex, ariaBusy, isComplete, }) {
+    const FormatFileBodyTag = isComplete && onClick ? "button" : "div";
+    return (React__default.createElement(FormatFileBodyTag, { type: type, className: className, onClick: onClick, tabIndex: tabIndex, "aria-busy": ariaBusy }, children));
+};
+FormatFile.Expanded = function FormatFileExpanded({ file, fileSize, isVisible, }) {
+    if (!isVisible)
+        return null;
+    return (React__default.createElement("div", { className: styles.contentBlock },
+        React__default.createElement(Text, { size: "base" }, file.name),
+        React__default.createElement(Text, { size: "small" }, fileSize)));
+};
+FormatFile.Wrapper = function FormatFileWrapper({ children, className, }) {
+    return React__default.createElement("div", { className: className }, children);
+};
+FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, size = "base", children, }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button, { onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        children));
+};
+
+export { FormatFile as F, useFormatFileStyles as a, useFormatFile as u };

package/dist/Gallery/index.cjs

@@ -35,17 +35,18 @@ require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
 require('../FormatFile-cjs.js');
 require('filesize');
+require('../Thumbnail-cjs.js');
+require('../Glimmer-cjs.js');
+require('../Content-cjs.js');
+require('../ProgressBar-cjs.js');
 require('../ConfirmationModal-cjs.js');
 require('../Modal/index.cjs');
 require('../noop-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('../AtlantisPortalContent-cjs.js');
-require('../Content-cjs.js');
 require('../Markdown-cjs.js');
 require('../Emphasis-cjs.js');
 require('../index-cjs.js');
-require('../Glimmer-cjs.js');
-require('../ProgressBar-cjs.js');
 
 
 

package/dist/Gallery/index.mjs

@@ -33,14 +33,15 @@ import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
 import '../FormatFile-es.js';
 import 'filesize';
+import '../Thumbnail-es.js';
+import '../Glimmer-es.js';
+import '../Content-es.js';
+import '../ProgressBar-es.js';
 import '../ConfirmationModal-es.js';
 import '../Modal/index.mjs';
 import '../noop-es.js';
 import '../floating-ui.react-es.js';
 import '../AtlantisPortalContent-es.js';
-import '../Content-es.js';
 import '../Markdown-es.js';
 import '../Emphasis-es.js';
 import '../index-es.js';
-import '../Glimmer-es.js';
-import '../ProgressBar-es.js';

package/dist/Gallery-cjs.js

@@ -5,7 +5,9 @@ var React = require('react');
 var classnames = require('classnames');
 var LightBox = require('./LightBox-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
+require('filesize');
 var Button = require('./Button-cjs.js');
+var Thumbnail = require('./Thumbnail-cjs.js');
 
 var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 
@@ -65,7 +67,7 @@ function isSupportedImageType(file) {
     const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
     const nonHeicImage = !file.type.startsWith("image/heic");
     const nonSVGImage = !file.type.startsWith("image/svg");
-    return (nonHeicImage || FormatFile.isSafari(userAgent)) && nonSVGImage;
+    return (nonHeicImage || Thumbnail.isSafari(userAgent)) && nonSVGImage;
 }
 function generateImagesArray(files) {
     return tslib_es6.__awaiter(this, void 0, void 0, function* () {

package/dist/Gallery-es.js

@@ -2,8 +2,10 @@ import { a as __awaiter } from './tslib.es6-es.js';
 import React__default, { useState } from 'react';
 import classnames from 'classnames';
 import { L as LightBox } from './LightBox-es.js';
-import { F as FormatFile, i as isSafari } from './FormatFile-es.js';
+import { F as FormatFile } from './FormatFile-es.js';
+import 'filesize';
 import { B as Button } from './Button-es.js';
+import { i as isSafari } from './Thumbnail-es.js';
 
 var styles = {"gallery":"_6UhvrmKZdns-","galleryLarge":"f0hnJ8v-iHE-","showMoreButton":"EvHA4-Q7O9g-","baseShowMoreButton":"VWW-3mSlumg-","largeShowMoreButton":"DNhegGxB75M-","spinning":"aqCoXiyvGKw-"};
 

package/dist/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { FileUpload } from "../InputFile";
+interface ThumbnailProps {
+    readonly compact?: boolean;
+    readonly size: "base" | "large";
+    readonly file: FileUpload;
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}
+export declare function Thumbnail({ compact, size, file, UNSAFE_className, UNSAFE_style, }: ThumbnailProps): JSX.Element;
+export {};

package/dist/Thumbnail/ThumbnailImage.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { FileUpload } from "../InputFile";
+interface InternalThumbnailImageProps {
+    readonly file: FileUpload;
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}
+export declare function InternalThumbnailImage({ file, UNSAFE_className, UNSAFE_style, }: InternalThumbnailImageProps): JSX.Element;
+export {};

package/dist/Thumbnail/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var Thumbnail = require('../Thumbnail-cjs.js');
+require('react');
+require('classnames');
+require('../Glimmer-cjs.js');
+require('../tslib.es6-cjs.js');
+require('../Content-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
+require('../Typography-cjs.js');
+
+
+
+exports.Thumbnail = Thumbnail.Thumbnail;

package/dist/Thumbnail/index.d.ts

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

package/dist/Thumbnail/index.mjs

@@ -0,0 +1,9 @@
+export { T as Thumbnail } from '../Thumbnail-es.js';
+import 'react';
+import 'classnames';
+import '../Glimmer-es.js';
+import '../tslib.es6-es.js';
+import '../Content-es.js';
+import '../Icon-es.js';
+import '@jobber/design';
+import '../Typography-es.js';

package/dist/Thumbnail-cjs.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Glimmer = require('./Glimmer-cjs.js');
+var Icon = require('./Icon-cjs.js');
+var Typography = require('./Typography-cjs.js');
+
+var styles$1 = {"content":"b9lhF-BkUnI-","hasName":"BJLJeUxloeQ-","large":"t5IzWH6-Sy0-","fileName":"tj--cPRjQfI-","base":"l2Vxo1qaR8U-","spinning":"LDAOyzklETo-"};
+
+var styles = {"image":"qOmZU-rbNf4-","fadeIn":"zB1aNhsmmqY-","hidden":"_2bihNsPs7w4-","spinning":"ZLMkLuZeH-o-"};
+
+function InternalThumbnailImage({ file, UNSAFE_className, UNSAFE_style, }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = React.useState();
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    React.useEffect(() => {
+        src().then(url => setImageSource(url));
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        !imageLoaded && React.createElement(Glimmer.Glimmer, { size: "auto" }),
+        React.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container })));
+    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 Thumbnail({ compact = false, size, file, UNSAFE_className, UNSAFE_style, }) {
+    const { name, type } = file;
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    if (type.startsWith("image/") && isSupportedImageType(file)) {
+        return (React.createElement(InternalThumbnailImage, { file: file, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
+    }
+    return (React.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
+            [styles$1.hasName]: hasName,
+        }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
+        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 isSupportedImageType(file) {
+    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+    const nonHeicImage = !file.type.startsWith("image/heic");
+    const nonSVGImage = !file.type.startsWith("image/svg");
+    return (nonHeicImage || isSafari(userAgent)) && nonSVGImage;
+}
+
+exports.Thumbnail = Thumbnail;
+exports.isSafari = isSafari;

package/dist/Thumbnail-es.js

@@ -0,0 +1,100 @@
+import React__default, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { G as Glimmer } from './Glimmer-es.js';
+import { I as Icon } from './Icon-es.js';
+import { T as Typography } from './Typography-es.js';
+
+var styles$1 = {"content":"b9lhF-BkUnI-","hasName":"BJLJeUxloeQ-","large":"t5IzWH6-Sy0-","fileName":"tj--cPRjQfI-","base":"l2Vxo1qaR8U-","spinning":"LDAOyzklETo-"};
+
+var styles = {"image":"qOmZU-rbNf4-","fadeIn":"zB1aNhsmmqY-","hidden":"_2bihNsPs7w4-","spinning":"ZLMkLuZeH-o-"};
+
+function InternalThumbnailImage({ file, UNSAFE_className, UNSAFE_style, }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = useState();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    useEffect(() => {
+        src().then(url => setImageSource(url));
+    }, []);
+    return (React__default.createElement(React__default.Fragment, null,
+        !imageLoaded && React__default.createElement(Glimmer, { size: "auto" }),
+        React__default.createElement("img", { src: imageSource, onError: file.onImageLoadError, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames(styles.image, { [styles.hidden]: !imageLoaded }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container })));
+    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 Thumbnail({ compact = false, size, file, UNSAFE_className, UNSAFE_style, }) {
+    const { name, type } = file;
+    const iconName = getIconNameFromType(type);
+    const hasName = Boolean(name) && compact;
+    if (type.startsWith("image/") && isSupportedImageType(file)) {
+        return (React__default.createElement(InternalThumbnailImage, { file: file, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }));
+    }
+    return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size], {
+            [styles$1.hasName]: hasName,
+        }, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container },
+        React__default.createElement(Icon, { name: iconName, color: "greyBlue", size: size }),
+        hasName && (React__default.createElement("div", { className: styles$1.fileName },
+            React__default.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 isSupportedImageType(file) {
+    const userAgent = typeof document === "undefined" ? "" : window.navigator.userAgent;
+    const nonHeicImage = !file.type.startsWith("image/heic");
+    const nonSVGImage = !file.type.startsWith("image/svg");
+    return (nonHeicImage || isSafari(userAgent)) && nonSVGImage;
+}
+
+export { Thumbnail as T, isSafari as i };

package/dist/index.cjs

@@ -95,6 +95,7 @@ var Stack = require('./Stack-cjs.js');
 var Switch = require('./Switch-cjs.js');
 var Body = require('./Body-cjs.js');
 var Tabs = require('./Tabs-cjs.js');
+var Thumbnail = require('./Thumbnail-cjs.js');
 var Tiles = require('./Tiles-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
@@ -271,6 +272,8 @@ exports.FormatDate = FormatDate.FormatDate;
 exports.strFormatDate = FormatDate.strFormatDate;
 exports.FormatEmail = FormatEmail.FormatEmail;
 exports.FormatFile = FormatFile.FormatFile;
+exports.useFormatFile = FormatFile.useFormatFile;
+exports.useFormatFileStyles = FormatFile.useFormatFileStyles;
 exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;
 exports.FormatTime = FormatTime.FormatTime;
 exports.Frame = Frame.Frame;
@@ -344,6 +347,7 @@ exports.Row = Body.Row;
 exports.Table = Body.Table;
 exports.Tab = Tabs.Tab;
 exports.Tabs = Tabs.Tabs;
+exports.Thumbnail = Thumbnail.Thumbnail;
 exports.Tiles = Tiles.Tiles;
 exports.Toast = showToast.Toast;
 exports.showToast = showToast.showToast;

package/dist/index.d.mts

@@ -81,6 +81,7 @@ export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
+export * from "./Thumbnail";
 export * from "./Tiles";
 export * from "./Toast";
 export * from "./Tooltip";

package/dist/index.d.ts

@@ -81,6 +81,7 @@ export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";
 export * from "./Text";
+export * from "./Thumbnail";
 export * from "./Tiles";
 export * from "./Toast";
 export * from "./Tooltip";