@jobber/components 6.56.0 → 6.57.0

package/Thumbnail.d.ts

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

package/Thumbnail.js

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

package/dist/DatePicker/DatePickerActivator.d.ts

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, ReactElement } from "react";
-import { ReactDatePickerProps } from "react-datepicker";
+import React, { ChangeEvent, ReactElement, RefObject } from "react";
+import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker";
 export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "value" | "id" | "ariaDescribedBy" | "ariaInvalid" | "ariaLabelledBy" | "ariaRequired"> {
     readonly activator?: ReactElement | ((props: DatePickerActivatorProps) => ReactElement);
     readonly fullWidth?: boolean;
@@ -8,5 +8,6 @@ export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "va
     onClick?(): void;
     onFocus?(): void;
     onKeyDown?(): void;
+    readonly pickerRef: RefObject<ReactDatePicker>;
 }
 export declare const DatePickerActivator: React.ForwardRefExoticComponent<DatePickerActivatorProps & React.RefAttributes<HTMLElement>>;

package/dist/DatePicker-cjs.js

@@ -7317,7 +7317,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+        React.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { pickerRef: pickerRef, activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
@@ -7368,5 +7368,4 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
 }
 
 exports.DatePicker = DatePicker;
-exports.format = format;
 exports.isValid = isValid;

package/dist/DatePicker-es.js

@@ -7315,7 +7315,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React__default.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+        React__default.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { pickerRef: pickerRef, activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
@@ -7365,4 +7365,4 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
     };
 }
 
-export { DatePicker as D, format as f, isValid as i };
+export { DatePicker as D, isValid as i };

package/dist/FormatFile/FormatFile.d.ts

@@ -1,30 +1,43 @@
 import React from "react";
+import { FormatFileProps } from "./types";
 import { FileUpload } from "../InputFile";
-interface FormatFileProps {
-    /**
-     * File upload details object. (See FileUpload type.)
-     */
-    readonly file: FileUpload;
-    /**
-     * To display as either a file row or thumbnail
-     *
-     * @default "expanded"
-     */
-    readonly display?: "expanded" | "compact";
-    /**
-     * The base dimensions of the thumbnail
-     *
-     * @default "base"
-     */
-    readonly displaySize?: "base" | "large";
-    /**
-     * Function to execute when format file is clicked
-     */
-    onClick?(event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>): void;
-    /**
-     * onDelete callback - this function will be called when the delete action is triggered
-     */
-    onDelete?(): void;
-}
 export declare function FormatFile({ file, display, displaySize, onDelete, onClick, }: FormatFileProps): JSX.Element;
-export {};
+export declare namespace FormatFile {
+    var DeleteButtonContainer: ({ children, className, isHidden, }: {
+        readonly children: React.ReactNode;
+        readonly className?: string;
+        readonly isHidden?: boolean;
+    }) => JSX.Element | null;
+    var ProgressContainer: ({ isHidden, children, className, }: {
+        readonly children: React.ReactNode;
+        readonly className?: string;
+        readonly isHidden?: boolean;
+    }) => JSX.Element | null;
+    var ThumbnailContainer: ({ children, className, }: {
+        readonly children: React.ReactNode;
+        readonly className?: string;
+    }) => JSX.Element;
+    var Body: ({ children, className, type, onClick, tabIndex, ariaBusy, isComplete, }: {
+        readonly children: React.ReactNode;
+        readonly className?: string;
+        readonly type?: "button" | "submit" | "reset";
+        readonly onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+        readonly tabIndex?: number;
+        readonly ariaBusy?: boolean;
+        readonly isComplete: boolean;
+    }) => JSX.Element;
+    var Expanded: ({ file, fileSize, isVisible, }: {
+        readonly file: FileUpload;
+        readonly fileSize: string;
+        readonly isVisible: boolean;
+    }) => JSX.Element | null;
+    var Wrapper: ({ children, className, }: {
+        readonly children: React.ReactNode;
+        readonly className?: string;
+    }) => JSX.Element;
+    var DeleteButton: ({ onDelete, size, children, }: {
+        readonly onDelete?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        readonly size?: "base" | "large";
+        readonly children?: React.ReactNode;
+    }) => JSX.Element;
+}

package/dist/FormatFile/index.cjs

@@ -2,14 +2,19 @@
 
 var FormatFile = require('../FormatFile-cjs.js');
 require('react');
-require('classnames');
 require('filesize');
-require('../Button-cjs.js');
-require('react-router-dom');
+require('classnames');
+require('../Thumbnail-cjs.js');
+require('../Glimmer-cjs.js');
 require('../tslib.es6-cjs.js');
+require('../Content-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
+require('../Text-cjs.js');
+require('../ProgressBar-cjs.js');
+require('../Button-cjs.js');
+require('react-router-dom');
 require('../ConfirmationModal-cjs.js');
 require('../useOnKeyDown-cjs.js');
 require('../Modal/index.cjs');
@@ -32,14 +37,12 @@ require('../_baseFor-cjs.js');
 require('../keysIn-cjs.js');
 require('../_isIterateeCall-cjs.js');
 require('../_setToString-cjs.js');
-require('../Content-cjs.js');
 require('../Markdown-cjs.js');
-require('../Text-cjs.js');
 require('../Emphasis-cjs.js');
 require('../index-cjs.js');
-require('../Glimmer-cjs.js');
-require('../ProgressBar-cjs.js');
 
 
 
 exports.FormatFile = FormatFile.FormatFile;
+exports.useFormatFile = FormatFile.useFormatFile;
+exports.useFormatFileStyles = FormatFile.useFormatFileStyles;

package/dist/FormatFile/index.d.ts

@@ -1 +1,4 @@
 export { FormatFile } from "./FormatFile";
+export * from "./useFormatFile";
+export * from "./useFormatFileStyles";
+export * from "./types";

package/dist/FormatFile/index.mjs

@@ -1,13 +1,18 @@
-export { F as FormatFile } from '../FormatFile-es.js';
+export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from '../FormatFile-es.js';
 import 'react';
-import 'classnames';
 import 'filesize';
-import '../Button-es.js';
-import 'react-router-dom';
+import 'classnames';
+import '../Thumbnail-es.js';
+import '../Glimmer-es.js';
 import '../tslib.es6-es.js';
+import '../Content-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
+import '../Text-es.js';
+import '../ProgressBar-es.js';
+import '../Button-es.js';
+import 'react-router-dom';
 import '../ConfirmationModal-es.js';
 import '../useOnKeyDown-es.js';
 import '../Modal/index.mjs';
@@ -30,10 +35,6 @@ import '../_baseFor-es.js';
 import '../keysIn-es.js';
 import '../_isIterateeCall-es.js';
 import '../_setToString-es.js';
-import '../Content-es.js';
 import '../Markdown-es.js';
-import '../Text-es.js';
 import '../Emphasis-es.js';
 import '../index-es.js';
-import '../Glimmer-es.js';
-import '../ProgressBar-es.js';

package/dist/FormatFile/types.d.ts

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

package/dist/FormatFile/useFormatFile.d.ts

@@ -0,0 +1,5 @@
+import { FormatFileProps } from "./types";
+export declare const useFormatFile: ({ file }: FormatFileProps) => {
+    isComplete: boolean;
+    fileSize: string;
+};

package/dist/FormatFile/useFormatFileStyles.d.ts

@@ -0,0 +1,10 @@
+import { FormatFileProps } from "./types";
+export declare const useFormatFileStyles: ({ display, displaySize, onClick, onDelete, isComplete, }: Pick<FormatFileProps, "display" | "onClick" | "onDelete" | "displaySize"> & {
+    isComplete: boolean;
+}) => {
+    deleteButtonContainerClassNames: string;
+    detailsClassNames: string;
+    progressClassNames: string;
+    thumbnailContainerClassNames: string;
+    wrapperClassNames: string;
+};

package/dist/FormatFile-cjs.js

@@ -1,145 +1,44 @@
 'use strict';
 
 var React = require('react');
-var classnames = require('classnames');
 var getHumanReadableFileSize = require('filesize');
-var Button = require('./Button-cjs.js');
-var ConfirmationModal = require('./ConfirmationModal-cjs.js');
-var Glimmer = require('./Glimmer-cjs.js');
-var Icon = require('./Icon-cjs.js');
-var Typography = require('./Typography-cjs.js');
+var classnames = require('classnames');
+var Thumbnail = require('./Thumbnail-cjs.js');
 var Text = require('./Text-cjs.js');
 var ProgressBar = require('./ProgressBar-cjs.js');
+var Button = require('./Button-cjs.js');
+var ConfirmationModal = require('./ConfirmationModal-cjs.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] = React.useState(false);
-    return (React.createElement("div", { className: styles$2.deleteButton },
-        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 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] = 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 }) })));
-    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.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 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.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 })))));
-}
+    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));
@@ -150,5 +49,69 @@ function isHoverable({ display, isComplete, onClick, onDelete, }) {
     return false;
 }
 
+function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
+    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.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.createElement(FormatFile.Wrapper, { className: wrapperClassNames },
+        React.createElement(FormatFile.Body, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, ariaBusy: !isComplete, isComplete: isComplete },
+            React.createElement(FormatFile.ThumbnailContainer, { className: thumbnailContainerClassNames },
+                React.createElement(Thumbnail.Thumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
+                React.createElement(FormatFile.ProgressContainer, { isHidden: isComplete, className: progressClassNames },
+                    React.createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 }))),
+            React.createElement(FormatFile.Expanded, { isVisible: display === "expanded", file: file, fileSize: fileSize })),
+        React.createElement(FormatFile.DeleteButtonContainer, { className: deleteButtonContainerClassNames, isHidden: !isComplete || onDelete === undefined },
+            React.createElement(FormatFile.DeleteButton, { onDelete: () => {
+                    setDeleteConfirmationOpen(true);
+                } },
+                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) })))));
+}
+FormatFile.DeleteButtonContainer = function FormatFileDeleteButtonContainer({ children, className, isHidden, }) {
+    if (isHidden)
+        return null;
+    return React.createElement("div", { className: className }, children);
+};
+FormatFile.ProgressContainer = function FormatFileProgressContainer({ isHidden, children, className, }) {
+    if (isHidden)
+        return null;
+    return React.createElement("div", { className: className }, children);
+};
+FormatFile.ThumbnailContainer = function FormatFileThumbnailContainer({ children, className, }) {
+    return React.createElement("div", { className: className }, children);
+};
+FormatFile.Body = function FormatFileBody({ children, className, type, onClick, tabIndex, ariaBusy, isComplete, }) {
+    const FormatFileBodyTag = isComplete && onClick ? "button" : "div";
+    return (React.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.createElement("div", { className: styles.contentBlock },
+        React.createElement(Text.Text, { size: "base" }, file.name),
+        React.createElement(Text.Text, { size: "small" }, fileSize)));
+};
+FormatFile.Wrapper = function FormatFileWrapper({ children, className, }) {
+    return React.createElement("div", { className: className }, children);
+};
+FormatFile.DeleteButton = function FormatFileDeleteButton({ onDelete, size = "base", children, }) {
+    const buttonSize = size === "base" ? "small" : "base";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button.Button, { onClick: onDelete, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
+        children));
+};
+
 exports.FormatFile = FormatFile;
-exports.isSafari = isSafari;
+exports.useFormatFile = useFormatFile;
+exports.useFormatFileStyles = useFormatFileStyles;