@jobber/components 4.81.4 → 4.81.5-fix-inline.5

package/dist/FormatFile-Cn1EBI02.js

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import getHumanReadableFileSize from 'filesize';
+import { B as Button } from './Button-D4ylkMVt.js';
+import { C as ConfirmationModal } from './ConfirmationModal-DL2HaTBE.js';
+import { G as Glimmer } from './Glimmer-LoAEnc8h.js';
+import { I as Icon } from './Icon-DroGZxeN.js';
+import { T as Typography } from './Typography-DLd7_kJN.js';
+import { T as Text } from './Text-BCjpwsQZ.js';
+import { P as ProgressBar } from './ProgressBar-C2QoWnFp.js';
+
+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-"};
+
+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 styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
+
+var styles = {"image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
+
+function InternalThumbnailImage({ file }) {
+    const { name, src } = file;
+    const [imageSource, setImageSource] = useState();
+    const [imageLoaded, setImageLoaded] = useState(false);
+    useEffect(() => {
+        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/FormatRelativeDateTime/index.cjs

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

package/dist/FormatRelativeDateTime/index.mjs

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

package/dist/FormatRelativeDateTime-CnA2YdEb.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/{FormatRelativeDateTime/index.js → FormatRelativeDateTime-HyG3DaJI.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/FormatTime/index.cjs

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

package/dist/FormatTime/index.mjs

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

package/dist/{FormatTime/index.js → FormatTime-Bencj2e8.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 FormatTime({ time: inputTime, use24HourClock, }) {
     let dateObject;
     if (inputTime instanceof Date) {
@@ -23,10 +17,11 @@ function FormatTime({ time: inputTime, use24HourClock, }) {
         const currentDay = currentDate.getDay();
         dateObject = new Date(currentYear, currentMonth, currentDay, inputTime.hour, inputTime.minute, inputTime.second, inputTime.millisecond);
     }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, formatCivilTime(dateObject, use24HourClock));
+    return React.createElement(React.Fragment, null, formatCivilTime(dateObject, use24HourClock));
 }
 function formatCivilTime(date, use24HourClock) {
-    return date.toLocaleTimeString(navigator.language, {
+    const language = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator) ? navigator.language : "en";
+    return date.toLocaleTimeString(language, {
         hourCycle: use24HourClock ? "h23" : "h12",
         minute: "2-digit",
         hour: "numeric",

package/dist/FormatTime-gobn8uHp.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+function FormatTime({ time: inputTime, use24HourClock, }) {
+    let dateObject;
+    if (inputTime instanceof Date) {
+        dateObject = inputTime;
+    }
+    else if (typeof inputTime === "string") {
+        dateObject = new Date(inputTime);
+    }
+    else {
+        const currentDate = new Date();
+        const currentYear = currentDate.getFullYear();
+        const currentMonth = currentDate.getMonth();
+        const currentDay = currentDate.getDay();
+        dateObject = new Date(currentYear, currentMonth, currentDay, inputTime.hour, inputTime.minute, inputTime.second, inputTime.millisecond);
+    }
+    return React.createElement(React.Fragment, null, formatCivilTime(dateObject, use24HourClock));
+}
+function formatCivilTime(date, use24HourClock) {
+    const language = (globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator) ? navigator.language : "en";
+    return date.toLocaleTimeString(language, {
+        hourCycle: use24HourClock ? "h23" : "h12",
+        minute: "2-digit",
+        hour: "numeric",
+    });
+}
+
+export { FormatTime as F };

package/dist/Gallery/index.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var Gallery = require('../Gallery-BC-LwCyS.js');
+require('react');
+require('classnames');
+require('../LightBox-DJPcKd0f.js');
+require('framer-motion');
+require('react-dom');
+require('../debounce-1muae-Ut.js');
+require('../_commonjsHelpers-C9K4YQdM.js');
+require('../isObjectLike-YWtFvxic.js');
+require('../isSymbol-CJDTfNDS.js');
+require('../useRefocusOnActivator-CcdUjTGN.js');
+require('../useOnKeyDown-DaXbWAZ6.js');
+require('../useFocusTrap-DiZyGggB.js');
+require('../useIsMounted-CXxfr2c8.js');
+require('../useSafeLayoutEffect-CZ6wCDjK.js');
+require('../ButtonDismiss-BBXXDc6A.js');
+require('../Button-jIxCW0ny.js');
+require('react-router-dom');
+require('../Icon-BrJTp9Vt.js');
+require('@jobber/design');
+require('../Typography-CM061MDN.js');
+require('../FormatFile-CEnhTRDJ.js');
+require('filesize');
+require('../ConfirmationModal-Cd1H3xVH.js');
+require('../Modal-Dbq_-Pvh.js');
+require('../Heading-D7OXKyAI.js');
+require('../useAtlantisConfig-CobJL-7W.js');
+require('../Content-CsMsjQR8.js');
+require('../Markdown-CI5ESU7e.js');
+require('../Text-DSPNdx-G.js');
+require('../Emphasis-ChEv8diL.js');
+require('../index-CwzJTOmB.js');
+require('../_polyfill-node.process-BAdkKfFq.js');
+require('../Glimmer-xvDsD6N9.js');
+require('../tslib.es6-B4nBbkFK.js');
+require('../ProgressBar-CV9p7Yco.js');
+
+
+
+exports.Gallery = Gallery.Gallery;

package/dist/Gallery/index.mjs

@@ -0,0 +1,36 @@
+export { G as Gallery } from '../Gallery-6yCjQd9D.js';
+import 'react';
+import 'classnames';
+import '../LightBox-0FJOLUVv.js';
+import 'framer-motion';
+import 'react-dom';
+import '../debounce-D_4D9mM0.js';
+import '../_commonjsHelpers-BXnGpbsa.js';
+import '../isObjectLike-C3_86EK7.js';
+import '../isSymbol-DbK65Wqh.js';
+import '../useRefocusOnActivator-t6MWp1A5.js';
+import '../useOnKeyDown-CcHH4eJq.js';
+import '../useFocusTrap-DYyN871l.js';
+import '../useIsMounted-BE756G6o.js';
+import '../useSafeLayoutEffect-CHC_rFYf.js';
+import '../ButtonDismiss-BeSP29qj.js';
+import '../Button-D4ylkMVt.js';
+import 'react-router-dom';
+import '../Icon-DroGZxeN.js';
+import '@jobber/design';
+import '../Typography-DLd7_kJN.js';
+import '../FormatFile-Cn1EBI02.js';
+import 'filesize';
+import '../ConfirmationModal-DL2HaTBE.js';
+import '../Modal-Aie850O2.js';
+import '../Heading-CUqAdDVb.js';
+import '../useAtlantisConfig-DeZLs6Di.js';
+import '../Content-CMw9uyuY.js';
+import '../Markdown-MSeVdueR.js';
+import '../Text-BCjpwsQZ.js';
+import '../Emphasis-UavKK7AC.js';
+import '../index-D0XeHrqp.js';
+import '../_polyfill-node.process-C5b4XNFR.js';
+import '../Glimmer-LoAEnc8h.js';
+import '../tslib.es6-CI8-zPBP.js';
+import '../ProgressBar-C2QoWnFp.js';

package/dist/Gallery-6yCjQd9D.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { L as LightBox } from './LightBox-0FJOLUVv.js';
+import { F as FormatFile } from './FormatFile-Cn1EBI02.js';
+import { B as Button } from './Button-D4ylkMVt.js';
+
+var styles = {"gallery":"G3D4T8IYmwA-","galleryLarge":"_6sZaxiji5rQ-","showMoreButton":"wh-FkS64oJ0-","baseShowMoreButton":"Idp-BJIbUUs-","largeShowMoreButton":"kOG-STgt5Hs-"};
+
+function Gallery({ files, size = "base", max, onDelete }) {
+    const { images, filesToImageIndex } = generateImagesArray(files);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const [lightboxIndex, setLightboxIndex] = useState(0);
+    const [displayPastMax, setDisplayPastMax] = useState(max ? false : true);
+    const visibleFiles = displayPastMax ? files : files.slice(0, max);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
+            visibleFiles.map((file, index) => {
+                return (React.createElement(FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.src) }), display: "compact", displaySize: size, onClick: () => {
+                        handleThumbnailClicked(index);
+                    }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
+            }),
+            max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
+                React.createElement(Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+                        setDisplayPastMax(true);
+                    } })))),
+        React.createElement(LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
+    function handleThumbnailClicked(index) {
+        if (files[index].type.startsWith("image/")) {
+            handleLightboxOpen(index);
+        }
+        else {
+            window.open(files[index].src, "_blank");
+        }
+    }
+    function handleLightboxOpen(index) {
+        const fileToImageIndex = filesToImageIndex[index];
+        if (fileToImageIndex !== undefined) {
+            setLightboxIndex(fileToImageIndex);
+            setLightboxOpen(true);
+        }
+    }
+    function handleLightboxClose() {
+        setLightboxOpen(false);
+    }
+}
+function generateImagesArray(files) {
+    const images = [];
+    const filesToImageIndex = [];
+    let imageIndex = 0;
+    for (let i = 0; i < files.length; i++) {
+        if (files[i].type.startsWith("image/")) {
+            images.push({ title: files[i].name, url: files[i].src });
+            filesToImageIndex.push(imageIndex);
+            imageIndex++;
+        }
+        else {
+            filesToImageIndex.push(undefined);
+        }
+    }
+    return { images, filesToImageIndex };
+}
+
+export { Gallery as G };

package/dist/Gallery-BC-LwCyS.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var LightBox = require('./LightBox-DJPcKd0f.js');
+var FormatFile = require('./FormatFile-CEnhTRDJ.js');
+var Button = require('./Button-jIxCW0ny.js');
+
+var styles = {"gallery":"G3D4T8IYmwA-","galleryLarge":"_6sZaxiji5rQ-","showMoreButton":"wh-FkS64oJ0-","baseShowMoreButton":"Idp-BJIbUUs-","largeShowMoreButton":"kOG-STgt5Hs-"};
+
+function Gallery({ files, size = "base", max, onDelete }) {
+    const { images, filesToImageIndex } = generateImagesArray(files);
+    const [lightboxOpen, setLightboxOpen] = React.useState(false);
+    const [lightboxIndex, setLightboxIndex] = React.useState(0);
+    const [displayPastMax, setDisplayPastMax] = React.useState(max ? false : true);
+    const visibleFiles = displayPastMax ? files : files.slice(0, max);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
+            visibleFiles.map((file, index) => {
+                return (React.createElement(FormatFile.FormatFile, { key: file.key, file: Object.assign(Object.assign({}, file), { src: () => Promise.resolve(file.src) }), display: "compact", displaySize: size, onClick: () => {
+                        handleThumbnailClicked(index);
+                    }, onDelete: onDelete ? () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(file) : undefined }));
+            }),
+            max && files.length > max && !displayPastMax && (React.createElement("div", { className: classnames(styles.showMoreButton, styles[`${size}ShowMoreButton`]) },
+                React.createElement(Button.Button, { type: "tertiary", size: size, label: `+ ${files.length - max}`, fullWidth: true, onClick: () => {
+                        setDisplayPastMax(true);
+                    } })))),
+        React.createElement(LightBox.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
+    function handleThumbnailClicked(index) {
+        if (files[index].type.startsWith("image/")) {
+            handleLightboxOpen(index);
+        }
+        else {
+            window.open(files[index].src, "_blank");
+        }
+    }
+    function handleLightboxOpen(index) {
+        const fileToImageIndex = filesToImageIndex[index];
+        if (fileToImageIndex !== undefined) {
+            setLightboxIndex(fileToImageIndex);
+            setLightboxOpen(true);
+        }
+    }
+    function handleLightboxClose() {
+        setLightboxOpen(false);
+    }
+}
+function generateImagesArray(files) {
+    const images = [];
+    const filesToImageIndex = [];
+    let imageIndex = 0;
+    for (let i = 0; i < files.length; i++) {
+        if (files[i].type.startsWith("image/")) {
+            images.push({ title: files[i].name, url: files[i].src });
+            filesToImageIndex.push(imageIndex);
+            imageIndex++;
+        }
+        else {
+            filesToImageIndex.push(undefined);
+        }
+    }
+    return { images, filesToImageIndex };
+}
+
+exports.Gallery = Gallery;

package/dist/Glimmer/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var Glimmer = require('../Glimmer-xvDsD6N9.js');
+require('../tslib.es6-B4nBbkFK.js');
+require('react');
+require('classnames');
+require('../Content-CsMsjQR8.js');
+
+
+
+exports.GLIMMER_TEST_ID = Glimmer.GLIMMER_TEST_ID;
+exports.Glimmer = Glimmer.Glimmer;

package/dist/Glimmer/index.mjs

@@ -0,0 +1,5 @@
+export { a as GLIMMER_TEST_ID, G as Glimmer } from '../Glimmer-LoAEnc8h.js';
+import '../tslib.es6-CI8-zPBP.js';
+import 'react';
+import 'classnames';
+import '../Content-CMw9uyuY.js';

package/dist/Glimmer-LoAEnc8h.js

@@ -0,0 +1,60 @@
+import { _ as __rest } from './tslib.es6-CI8-zPBP.js';
+import React from 'react';
+import classnames from 'classnames';
+import { C as Content } from './Content-CMw9uyuY.js';
+
+var styles = {"glimmer":"FXzzrJAf890-","reverseTheme":"s9bG0yRJR3A-","header":"M0X0dxjIyv4-","button":"v2Q1amzd7Ac-","buttonFill":"_8va--lBgr38-"};
+
+var sizes = {"small":"siUUG4rZNSk-","base":"nFuBXyrhG2Q-","large":"oiVEoAqI-fU-","larger":"Tkmo6mSMI9Y-","largest":"uVeaD3IhD6o-","auto":"_6Wak9NLJ3VQ-"};
+
+var shapes = {"rectangle":"enoWbteryXg-","rectangleShort":"_9qkwCdedX1M-","rectangleShorter":"XtyJxvcJDFs-","square":"_8unQ0TS1He4-","circle":"ameRMYEKfss-"};
+
+var timings = {"base":"hO0mZ6TeVko-","fast":"WXi5-zF8Ll4-"};
+
+const GLIMMER_TEST_ID = "ATL-Glimmer";
+const GLIMMER_HEADER_TEST_ID = "ATL-GlimmerHeader";
+const GLIMMER_TEXT_TEST_ID = "ATL-GlimmerText";
+const GLIMMER_BUTTON_TEST_ID = "ATL-GlimmerButton";
+/**
+ * **Experimental component! Use at your own risk.**
+ *
+ * Foundational component used to build loading states such as Skeleton UI
+ *
+ * @experimental
+ */
+function Glimmer({ size = "base", shape = "rectangle", timing = "base", reverseTheme = false, width, }) {
+    const className = classnames(styles.glimmer, sizes[size], shapes[shape], timings[timing], { [styles.reverseTheme]: reverseTheme });
+    return (React.createElement("div", { "aria-busy": "true", role: "status", className: className, "data-testid": GLIMMER_TEST_ID, style: { width } }));
+}
+Glimmer.Header = function GlimmerHeader(_a) {
+    var { level = 3 } = _a, props = __rest(_a, ["level"]);
+    const headerSize = {
+        1: "largest",
+        2: "larger",
+        3: "large",
+        4: "base",
+        5: "small",
+    };
+    return (React.createElement("div", { className: styles.header, "data-testid": GLIMMER_HEADER_TEST_ID },
+        React.createElement(Glimmer, Object.assign({ size: headerSize[level] }, props))));
+};
+Glimmer.Text = function GlimmerText(_a) {
+    var { width, lines = 3 } = _a, props = __rest(_a, ["width", "lines"]);
+    const children = [
+        React.createElement(Glimmer, Object.assign({ key: "1", size: "small", shape: "rectangleShort" }, props)),
+        React.createElement(Glimmer, Object.assign({ key: "2", size: "small" }, props)),
+        React.createElement(Glimmer, Object.assign({ key: "3", size: "small", shape: "rectangleShorter" }, props)),
+    ].slice(0, lines);
+    return (React.createElement("div", { style: { width }, "data-testid": GLIMMER_TEXT_TEST_ID },
+        React.createElement(Content, { spacing: "small" }, children)));
+};
+Glimmer.Button = function GlimmerButton(_a) {
+    var { fullWidth = false } = _a, props = __rest(_a, ["fullWidth"]);
+    const buttonClassNames = classnames(styles.button, {
+        [styles.buttonFill]: fullWidth,
+    });
+    return (React.createElement("div", { className: buttonClassNames, "data-testid": GLIMMER_BUTTON_TEST_ID },
+        React.createElement(Glimmer, Object.assign({}, props, { size: "auto" }))));
+};
+
+export { Glimmer as G, GLIMMER_TEST_ID as a };