payload 2.0.0-beta.23 → 2.0.0-beta.26

package/dist/admin/components/elements/FileDetails/index.js

@@ -8,10 +8,9 @@ Object.defineProperty(exports, "default", {
         return _default;
     }
 });
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _reactanimateheight = /*#__PURE__*/ _interop_require_default(require("react-animate-height"));
-const _reacti18next = require("react-i18next");
-const _Chevron = /*#__PURE__*/ _interop_require_default(require("../../icons/Chevron"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _isImage = /*#__PURE__*/ _interop_require_default(require("../../../../uploads/isImage"));
+const _Upload = require("../../views/collections/Edit/Upload");
 const _Button = /*#__PURE__*/ _interop_require_default(require("../Button"));
 const _Thumbnail = /*#__PURE__*/ _interop_require_default(require("../Thumbnail"));
 const _Meta = /*#__PURE__*/ _interop_require_default(require("./Meta"));
@@ -21,76 +20,17 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 const baseClass = 'file-details';
-// sort to the same as imageSizes
-const sortSizes = (sizes, imageSizes)=>{
-    if (!imageSizes || imageSizes.length === 0) return sizes;
-    const orderedSizes = {};
-    imageSizes.forEach(({ name })=>{
-        if (sizes[name]) {
-            orderedSizes[name] = sizes[name];
-        }
-    });
-    return orderedSizes;
-};
 const FileDetails = (props)=>{
-    const { collection, doc, handleRemove } = props;
-    const { slug: collectionSlug, upload: { imageSizes, staticURL } } = collection;
-    const { id, filename, filesize, height, mimeType, sizes, url, width } = doc;
-    const [orderedSizes, setOrderedSizes] = (0, _react.useState)(()=>sortSizes(sizes, imageSizes));
-    (0, _react.useEffect)(()=>{
-        setOrderedSizes(sortSizes(sizes, imageSizes));
-    }, [
-        sizes,
-        imageSizes
-    ]);
-    const [moreInfoOpen, setMoreInfoOpen] = (0, _react.useState)(false);
-    const { t } = (0, _reacti18next.useTranslation)('upload');
-    const hasSizes = sizes && Object.keys(sizes)?.length > 0;
+    const { canEdit, collection, doc, handleRemove, hasImageSizes, imageCacheTag } = props;
+    const { slug: collectionSlug, upload: { staticURL } } = collection;
+    const { id, filename, filesize, height, mimeType, url, width } = doc;
     return /*#__PURE__*/ _react.default.createElement("div", {
         className: baseClass
     }, /*#__PURE__*/ _react.default.createElement("header", null, /*#__PURE__*/ _react.default.createElement(_Thumbnail.default, {
         collection: collection,
-        doc: doc
+        doc: doc,
+        imageCacheTag: imageCacheTag
     }), /*#__PURE__*/ _react.default.createElement("div", {
         className: `${baseClass}__main-detail`
     }, /*#__PURE__*/ _react.default.createElement(_Meta.default, {
@@ -103,43 +43,18 @@ const FileDetails = (props)=>{
         staticURL: staticURL,
         url: url,
         width: width
-    }), hasSizes && /*#__PURE__*/ _react.default.createElement(_Button.default, {
-        buttonStyle: "none",
-        className: `${baseClass}__toggle-more-info${moreInfoOpen ? ' open' : ''}`,
-        onClick: ()=>setMoreInfoOpen(!moreInfoOpen)
-    }, !moreInfoOpen && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, t('moreInfo'), /*#__PURE__*/ _react.default.createElement("div", {
-        className: `${baseClass}__toggle-icon`
-    }, /*#__PURE__*/ _react.default.createElement(_Chevron.default, null))), moreInfoOpen && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, t('lessInfo'), /*#__PURE__*/ _react.default.createElement("div", {
-        className: `${baseClass}__toggle-icon`
-    }, /*#__PURE__*/ _react.default.createElement(_Chevron.default, {
-        direction: "up"
-    }))))), handleRemove && /*#__PURE__*/ _react.default.createElement(_Button.default, {
+    }), (0, _isImage.default)(mimeType) && /*#__PURE__*/ _react.default.createElement(_Upload.UploadActions, {
+        canEdit: canEdit,
+        showSizePreviews: hasImageSizes && doc.filename
+    })), handleRemove && /*#__PURE__*/ _react.default.createElement(_Button.default, {
         buttonStyle: "icon-label",
         className: `${baseClass}__remove`,
         icon: "x",
         iconStyle: "with-border",
         onClick: handleRemove,
         round: true
-    })), hasSizes && /*#__PURE__*/ _react.default.createElement(_reactanimateheight.default, {
-        className: `${baseClass}__more-info`,
-        height: moreInfoOpen ? 'auto' : 0
-    }, /*#__PURE__*/ _react.default.createElement("ul", {
-        className: `${baseClass}__sizes`
-    }, Object.entries(orderedSizes).map(([key, val])=>{
-        if (val?.filename) {
-            return /*#__PURE__*/ _react.default.createElement("li", {
-                key: key
-            }, /*#__PURE__*/ _react.default.createElement("div", {
-                className: `${baseClass}__size-label`
-            }, key), /*#__PURE__*/ _react.default.createElement(_Meta.default, {
-                ...val,
-                mimeType: val.mimeType,
-                staticURL: staticURL
-            }));
-        }
-        return null;
-    }))));
+    })));
 };
 const _default = FileDetails;
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL0ZpbGVEZXRhaWxzL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlRWZmZWN0LCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IEFuaW1hdGVIZWlnaHQgZnJvbSAncmVhY3QtYW5pbWF0ZS1oZWlnaHQnXG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnXG5cbmltcG9ydCB0eXBlIHsgRmlsZVNpemVzLCBVcGxvYWQgfSBmcm9tICcuLi8uLi8uLi8uLi91cGxvYWRzL3R5cGVzJ1xuaW1wb3J0IHR5cGUgeyBQcm9wcyB9IGZyb20gJy4vdHlwZXMnXG5cbmltcG9ydCBDaGV2cm9uIGZyb20gJy4uLy4uL2ljb25zL0NoZXZyb24nXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL0J1dHRvbidcbmltcG9ydCBUaHVtYm5haWwgZnJvbSAnLi4vVGh1bWJuYWlsJ1xuaW1wb3J0IE1ldGEgZnJvbSAnLi9NZXRhJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdmaWxlLWRldGFpbHMnXG5cbi8vIHNvcnQgdG8gdGhlIHNhbWUgYXMgaW1hZ2VTaXplc1xuY29uc3Qgc29ydFNpemVzID0gKHNpemVzOiBGaWxlU2l6ZXMsIGltYWdlU2l6ZXM6IFVwbG9hZFsnaW1hZ2VTaXplcyddKSA9PiB7XG4gIGlmICghaW1hZ2VTaXplcyB8fCBpbWFnZVNpemVzLmxlbmd0aCA9PT0gMCkgcmV0dXJuIHNpemVzXG5cbiAgY29uc3Qgb3JkZXJlZFNpemVzOiBGaWxlU2l6ZXMgPSB7fVxuXG4gIGltYWdlU2l6ZXMuZm9yRWFjaCgoeyBuYW1lIH0pID0+IHtcbiAgICBpZiAoc2l6ZXNbbmFtZV0pIHtcbiAgICAgIG9yZGVyZWRTaXplc1tuYW1lXSA9IHNpemVzW25hbWVdXG4gICAgfVxuICB9KVxuXG4gIHJldHVybiBvcmRlcmVkU2l6ZXNcbn1cblxuY29uc3QgRmlsZURldGFpbHM6IFJlYWN0LkZDPFByb3BzPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7IGNvbGxlY3Rpb24sIGRvYywgaGFuZGxlUmVtb3ZlIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHtcbiAgICBzbHVnOiBjb2xsZWN0aW9uU2x1ZyxcbiAgICB1cGxvYWQ6IHsgaW1hZ2VTaXplcywgc3RhdGljVVJMIH0sXG4gIH0gPSBjb2xsZWN0aW9uXG5cbiAgY29uc3QgeyBpZCwgZmlsZW5hbWUsIGZpbGVzaXplLCBoZWlnaHQsIG1pbWVUeXBlLCBzaXplcywgdXJsLCB3aWR0aCB9ID0gZG9jXG5cbiAgY29uc3QgW29yZGVyZWRTaXplcywgc2V0T3JkZXJlZFNpemVzXSA9IHVzZVN0YXRlPEZpbGVTaXplcz4oKCkgPT4gc29ydFNpemVzKHNpemVzLCBpbWFnZVNpemVzKSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHNldE9yZGVyZWRTaXplcyhzb3J0U2l6ZXMoc2l6ZXMsIGltYWdlU2l6ZXMpKVxuICB9LCBbc2l6ZXMsIGltYWdlU2l6ZXNdKVxuXG4gIGNvbnN0IFttb3JlSW5mb09wZW4sIHNldE1vcmVJbmZvT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSlcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigndXBsb2FkJylcblxuICBjb25zdCBoYXNTaXplcyA9IHNpemVzICYmIE9iamVjdC5rZXlzKHNpemVzKT8ubGVuZ3RoID4gMFxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Jhc2VDbGFzc30+XG4gICAgICA8aGVhZGVyPlxuICAgICAgICA8VGh1bWJuYWlsIGNvbGxlY3Rpb249e2NvbGxlY3Rpb259IGRvYz17ZG9jfSAvPlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbWFpbi1kZXRhaWxgfT5cbiAgICAgICAgICA8TWV0YVxuICAgICAgICAgICAgY29sbGVjdGlvbj17Y29sbGVjdGlvblNsdWd9XG4gICAgICAgICAgICBmaWxlbmFtZT17ZmlsZW5hbWUgYXMgc3RyaW5nfVxuICAgICAgICAgICAgZmlsZXNpemU9e2ZpbGVzaXplIGFzIG51bWJlcn1cbiAgICAgICAgICAgIGhlaWdodD17aGVpZ2h0IGFzIG51bWJlcn1cbiAgICAgICAgICAgIGlkPXtpZCBhcyBzdHJpbmd9XG4gICAgICAgICAgICBtaW1lVHlwZT17bWltZVR5cGUgYXMgc3RyaW5nfVxuICAgICAgICAgICAgc3RhdGljVVJMPXtzdGF0aWNVUkx9XG4gICAgICAgICAgICB1cmw9e3VybCBhcyBzdHJpbmd9XG4gICAgICAgICAgICB3aWR0aD17d2lkdGggYXMgbnVtYmVyfVxuICAgICAgICAgIC8+XG4gICAgICAgICAge2hhc1NpemVzICYmIChcbiAgICAgICAgICAgIDxCdXR0b25cbiAgICAgICAgICAgICAgYnV0dG9uU3R5bGU9XCJub25lXCJcbiAgICAgICAgICAgICAgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X190b2dnbGUtbW9yZS1pbmZvJHttb3JlSW5mb09wZW4gPyAnIG9wZW4nIDogJyd9YH1cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0TW9yZUluZm9PcGVuKCFtb3JlSW5mb09wZW4pfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7IW1vcmVJbmZvT3BlbiAmJiAoXG4gICAgICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICAgICAge3QoJ21vcmVJbmZvJyl9XG4gICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fdG9nZ2xlLWljb25gfT5cbiAgICAgICAgICAgICAgICAgICAgPENoZXZyb24gLz5cbiAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgIHttb3JlSW5mb09wZW4gJiYgKFxuICAgICAgICAgICAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgICAgICAgIHt0KCdsZXNzSW5mbycpfVxuICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3RvZ2dsZS1pY29uYH0+XG4gICAgICAgICAgICAgICAgICAgIDxDaGV2cm9uIGRpcmVjdGlvbj1cInVwXCIgLz5cbiAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L0J1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAge2hhbmRsZVJlbW92ZSAmJiAoXG4gICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgYnV0dG9uU3R5bGU9XCJpY29uLWxhYmVsXCJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fcmVtb3ZlYH1cbiAgICAgICAgICAgIGljb249XCJ4XCJcbiAgICAgICAgICAgIGljb25TdHlsZT1cIndpdGgtYm9yZGVyXCJcbiAgICAgICAgICAgIG9uQ2xpY2s9e2hhbmRsZVJlbW92ZX1cbiAgICAgICAgICAgIHJvdW5kXG4gICAgICAgICAgLz5cbiAgICAgICAgKX1cbiAgICAgIDwvaGVhZGVyPlxuICAgICAge2hhc1NpemVzICYmIChcbiAgICAgICAgPEFuaW1hdGVIZWlnaHQgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19tb3JlLWluZm9gfSBoZWlnaHQ9e21vcmVJbmZvT3BlbiA/ICdhdXRvJyA6IDB9PlxuICAgICAgICAgIDx1bCBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemVzYH0+XG4gICAgICAgICAgICB7T2JqZWN0LmVudHJpZXMob3JkZXJlZFNpemVzKS5tYXAoKFtrZXksIHZhbF0pID0+IHtcbiAgICAgICAgICAgICAgaWYgKHZhbD8uZmlsZW5hbWUpIHtcbiAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgPGxpIGtleT17a2V5fT5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemUtbGFiZWxgfT57a2V5fTwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8TWV0YSB7Li4udmFsfSBtaW1lVHlwZT17dmFsLm1pbWVUeXBlfSBzdGF0aWNVUkw9e3N0YXRpY1VSTH0gLz5cbiAgICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgcmV0dXJuIG51bGxcbiAgICAgICAgICAgIH0pfVxuICAgICAgICAgIDwvdWw+XG4gICAgICAgIDwvQW5pbWF0ZUhlaWdodD5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gIClcbn1cblxuZXhwb3J0IGRlZmF1bHQgRmlsZURldGFpbHNcbiJdLCJuYW1lcyI6WyJiYXNlQ2xhc3MiLCJzb3J0U2l6ZXMiLCJzaXplcyIsImltYWdlU2l6ZXMiLCJsZW5ndGgiLCJvcmRlcmVkU2l6ZXMiLCJmb3JFYWNoIiwibmFtZSIsIkZpbGVEZXRhaWxzIiwicHJvcHMiLCJjb2xsZWN0aW9uIiwiZG9jIiwiaGFuZGxlUmVtb3ZlIiwic2x1ZyIsImNvbGxlY3Rpb25TbHVnIiwidXBsb2FkIiwic3RhdGljVVJMIiwiaWQiLCJmaWxlbmFtZSIsImZpbGVzaXplIiwiaGVpZ2h0IiwibWltZVR5cGUiLCJ1cmwiLCJ3aWR0aCIsInNldE9yZGVyZWRTaXplcyIsInVzZVN0YXRlIiwidXNlRWZmZWN0IiwibW9yZUluZm9PcGVuIiwic2V0TW9yZUluZm9PcGVuIiwidCIsInVzZVRyYW5zbGF0aW9uIiwiaGFzU2l6ZXMiLCJPYmplY3QiLCJrZXlzIiwiZGl2IiwiY2xhc3NOYW1lIiwiaGVhZGVyIiwiVGh1bWJuYWlsIiwiTWV0YSIsIkJ1dHRvbiIsImJ1dHRvblN0eWxlIiwib25DbGljayIsIlJlYWN0IiwiRnJhZ21lbnQiLCJDaGV2cm9uIiwiZGlyZWN0aW9uIiwiaWNvbiIsImljb25TdHlsZSIsInJvdW5kIiwiQW5pbWF0ZUhlaWdodCIsInVsIiwiZW50cmllcyIsIm1hcCIsImtleSIsInZhbCIsImxpIl0sIm1hcHBpbmdzIjoiOzs7OytCQTZIQTs7O2VBQUE7OzsrREE3SDJDOzJFQUNqQjs4QkFDSztnRUFLWDsrREFDRDtrRUFDRzs2REFDTDtRQUNWOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFUCxNQUFNQSxZQUFZO0FBRWxCLGlDQUFpQztBQUNqQyxNQUFNQyxZQUFZLENBQUNDLE9BQWtCQztJQUNuQyxJQUFJLENBQUNBLGNBQWNBLFdBQVdDLE1BQU0sS0FBSyxHQUFHLE9BQU9GO0lBRW5ELE1BQU1HLGVBQTBCLENBQUM7SUFFakNGLFdBQVdHLE9BQU8sQ0FBQyxDQUFDLEVBQUVDLElBQUksRUFBRTtRQUMxQixJQUFJTCxLQUFLLENBQUNLLEtBQUssRUFBRTtZQUNmRixZQUFZLENBQUNFLEtBQUssR0FBR0wsS0FBSyxDQUFDSyxLQUFLO1FBQ2xDO0lBQ0Y7SUFFQSxPQUFPRjtBQUNUO0FBRUEsTUFBTUcsY0FBK0IsQ0FBQ0M7SUFDcEMsTUFBTSxFQUFFQyxVQUFVLEVBQUVDLEdBQUcsRUFBRUMsWUFBWSxFQUFFLEdBQUdIO0lBRTFDLE1BQU0sRUFDSkksTUFBTUMsY0FBYyxFQUNwQkMsUUFBUSxFQUFFWixVQUFVLEVBQUVhLFNBQVMsRUFBRSxFQUNsQyxHQUFHTjtJQUVKLE1BQU0sRUFBRU8sRUFBRSxFQUFFQyxRQUFRLEVBQUVDLFFBQVEsRUFBRUMsTUFBTSxFQUFFQyxRQUFRLEVBQUVuQixLQUFLLEVBQUVvQixHQUFHLEVBQUVDLEtBQUssRUFBRSxHQUFHWjtJQUV4RSxNQUFNLENBQUNOLGNBQWNtQixnQkFBZ0IsR0FBR0MsSUFBQUEsZUFBUSxFQUFZLElBQU14QixVQUFVQyxPQUFPQztJQUVuRnVCLElBQUFBLGdCQUFTLEVBQUM7UUFDUkYsZ0JBQWdCdkIsVUFBVUMsT0FBT0M7SUFDbkMsR0FBRztRQUFDRDtRQUFPQztLQUFXO0lBRXRCLE1BQU0sQ0FBQ3dCLGNBQWNDLGdCQUFnQixHQUFHSCxJQUFBQSxlQUFRLEVBQUM7SUFDakQsTUFBTSxFQUFFSSxDQUFDLEVBQUUsR0FBR0MsSUFBQUEsNEJBQWMsRUFBQztJQUU3QixNQUFNQyxXQUFXN0IsU0FBUzhCLE9BQU9DLElBQUksQ0FBQy9CLFFBQVFFLFNBQVM7SUFFdkQscUJBQ0UsNkJBQUM4QjtRQUFJQyxXQUFXbkM7cUJBQ2QsNkJBQUNvQyw4QkFDQyw2QkFBQ0Msa0JBQVM7UUFBQzNCLFlBQVlBO1FBQVlDLEtBQUtBO3NCQUN4Qyw2QkFBQ3VCO1FBQUlDLFdBQVcsQ0FBQyxFQUFFbkMsVUFBVSxhQUFhLENBQUM7cUJBQ3pDLDZCQUFDc0MsYUFBSTtRQUNINUIsWUFBWUk7UUFDWkksVUFBVUE7UUFDVkMsVUFBVUE7UUFDVkMsUUFBUUE7UUFDUkgsSUFBSUE7UUFDSkksVUFBVUE7UUFDVkwsV0FBV0E7UUFDWE0sS0FBS0E7UUFDTEMsT0FBT0E7UUFFUlEsMEJBQ0MsNkJBQUNRLGVBQU07UUFDTEMsYUFBWTtRQUNaTCxXQUFXLENBQUMsRUFBRW5DLFVBQVUsa0JBQWtCLEVBQUUyQixlQUFlLFVBQVUsR0FBRyxDQUFDO1FBQ3pFYyxTQUFTLElBQU1iLGdCQUFnQixDQUFDRDtPQUUvQixDQUFDQSw4QkFDQSw2QkFBQ2UsY0FBSyxDQUFDQyxRQUFRLFFBQ1pkLEVBQUUsMkJBQ0gsNkJBQUNLO1FBQUlDLFdBQVcsQ0FBQyxFQUFFbkMsVUFBVSxhQUFhLENBQUM7cUJBQ3pDLDZCQUFDNEMsZ0JBQU8sV0FJYmpCLDhCQUNDLDZCQUFDZSxjQUFLLENBQUNDLFFBQVEsUUFDWmQsRUFBRSwyQkFDSCw2QkFBQ0s7UUFBSUMsV0FBVyxDQUFDLEVBQUVuQyxVQUFVLGFBQWEsQ0FBQztxQkFDekMsNkJBQUM0QyxnQkFBTztRQUFDQyxXQUFVO1lBTzlCakMsOEJBQ0MsNkJBQUMyQixlQUFNO1FBQ0xDLGFBQVk7UUFDWkwsV0FBVyxDQUFDLEVBQUVuQyxVQUFVLFFBQVEsQ0FBQztRQUNqQzhDLE1BQUs7UUFDTEMsV0FBVTtRQUNWTixTQUFTN0I7UUFDVG9DLE9BQUFBO1NBSUxqQiwwQkFDQyw2QkFBQ2tCLDJCQUFhO1FBQUNkLFdBQVcsQ0FBQyxFQUFFbkMsVUFBVSxXQUFXLENBQUM7UUFBRW9CLFFBQVFPLGVBQWUsU0FBUztxQkFDbkYsNkJBQUN1QjtRQUFHZixXQUFXLENBQUMsRUFBRW5DLFVBQVUsT0FBTyxDQUFDO09BQ2pDZ0MsT0FBT21CLE9BQU8sQ0FBQzlDLGNBQWMrQyxHQUFHLENBQUMsQ0FBQyxDQUFDQyxLQUFLQyxJQUFJO1FBQzNDLElBQUlBLEtBQUtwQyxVQUFVO1lBQ2pCLHFCQUNFLDZCQUFDcUM7Z0JBQUdGLEtBQUtBOzZCQUNQLDZCQUFDbkI7Z0JBQUlDLFdBQVcsQ0FBQyxFQUFFbkMsVUFBVSxZQUFZLENBQUM7ZUFBR3FELG9CQUM3Qyw2QkFBQ2YsYUFBSTtnQkFBRSxHQUFHZ0IsR0FBRztnQkFBRWpDLFVBQVVpQyxJQUFJakMsUUFBUTtnQkFBRUwsV0FBV0E7O1FBR3hEO1FBRUEsT0FBTztJQUNUO0FBTVo7TUFFQSxXQUFlUiJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL0ZpbGVEZXRhaWxzL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5cbmltcG9ydCB0eXBlIHsgUHJvcHMgfSBmcm9tICcuL3R5cGVzJ1xuXG5pbXBvcnQgaXNJbWFnZSBmcm9tICcuLi8uLi8uLi8uLi91cGxvYWRzL2lzSW1hZ2UnXG5pbXBvcnQgeyBVcGxvYWRBY3Rpb25zIH0gZnJvbSAnLi4vLi4vdmlld3MvY29sbGVjdGlvbnMvRWRpdC9VcGxvYWQnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL0J1dHRvbidcbmltcG9ydCBUaHVtYm5haWwgZnJvbSAnLi4vVGh1bWJuYWlsJ1xuaW1wb3J0IE1ldGEgZnJvbSAnLi9NZXRhJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdmaWxlLWRldGFpbHMnXG5cbmNvbnN0IEZpbGVEZXRhaWxzOiBSZWFjdC5GQzxQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBjYW5FZGl0LCBjb2xsZWN0aW9uLCBkb2MsIGhhbmRsZVJlbW92ZSwgaGFzSW1hZ2VTaXplcywgaW1hZ2VDYWNoZVRhZyB9ID0gcHJvcHNcblxuICBjb25zdCB7XG4gICAgc2x1ZzogY29sbGVjdGlvblNsdWcsXG4gICAgdXBsb2FkOiB7IHN0YXRpY1VSTCB9LFxuICB9ID0gY29sbGVjdGlvblxuXG4gIGNvbnN0IHsgaWQsIGZpbGVuYW1lLCBmaWxlc2l6ZSwgaGVpZ2h0LCBtaW1lVHlwZSwgdXJsLCB3aWR0aCB9ID0gZG9jXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17YmFzZUNsYXNzfT5cbiAgICAgIDxoZWFkZXI+XG4gICAgICAgIDxUaHVtYm5haWwgY29sbGVjdGlvbj17Y29sbGVjdGlvbn0gZG9jPXtkb2N9IGltYWdlQ2FjaGVUYWc9e2ltYWdlQ2FjaGVUYWd9IC8+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19tYWluLWRldGFpbGB9PlxuICAgICAgICAgIDxNZXRhXG4gICAgICAgICAgICBjb2xsZWN0aW9uPXtjb2xsZWN0aW9uU2x1Z31cbiAgICAgICAgICAgIGZpbGVuYW1lPXtmaWxlbmFtZSBhcyBzdHJpbmd9XG4gICAgICAgICAgICBmaWxlc2l6ZT17ZmlsZXNpemUgYXMgbnVtYmVyfVxuICAgICAgICAgICAgaGVpZ2h0PXtoZWlnaHQgYXMgbnVtYmVyfVxuICAgICAgICAgICAgaWQ9e2lkIGFzIHN0cmluZ31cbiAgICAgICAgICAgIG1pbWVUeXBlPXttaW1lVHlwZSBhcyBzdHJpbmd9XG4gICAgICAgICAgICBzdGF0aWNVUkw9e3N0YXRpY1VSTH1cbiAgICAgICAgICAgIHVybD17dXJsIGFzIHN0cmluZ31cbiAgICAgICAgICAgIHdpZHRoPXt3aWR0aCBhcyBudW1iZXJ9XG4gICAgICAgICAgLz5cblxuICAgICAgICAgIHtpc0ltYWdlKG1pbWVUeXBlIGFzIHN0cmluZykgJiYgKFxuICAgICAgICAgICAgPFVwbG9hZEFjdGlvbnMgY2FuRWRpdD17Y2FuRWRpdH0gc2hvd1NpemVQcmV2aWV3cz17aGFzSW1hZ2VTaXplcyAmJiBkb2MuZmlsZW5hbWV9IC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIHtoYW5kbGVSZW1vdmUgJiYgKFxuICAgICAgICAgIDxCdXR0b25cbiAgICAgICAgICAgIGJ1dHRvblN0eWxlPVwiaWNvbi1sYWJlbFwiXG4gICAgICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3JlbW92ZWB9XG4gICAgICAgICAgICBpY29uPVwieFwiXG4gICAgICAgICAgICBpY29uU3R5bGU9XCJ3aXRoLWJvcmRlclwiXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVSZW1vdmV9XG4gICAgICAgICAgICByb3VuZFxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG4gICAgICA8L2hlYWRlcj5cbiAgICA8L2Rpdj5cbiAgKVxufVxuXG5leHBvcnQgZGVmYXVsdCBGaWxlRGV0YWlsc1xuIl0sIm5hbWVzIjpbImJhc2VDbGFzcyIsIkZpbGVEZXRhaWxzIiwicHJvcHMiLCJjYW5FZGl0IiwiY29sbGVjdGlvbiIsImRvYyIsImhhbmRsZVJlbW92ZSIsImhhc0ltYWdlU2l6ZXMiLCJpbWFnZUNhY2hlVGFnIiwic2x1ZyIsImNvbGxlY3Rpb25TbHVnIiwidXBsb2FkIiwic3RhdGljVVJMIiwiaWQiLCJmaWxlbmFtZSIsImZpbGVzaXplIiwiaGVpZ2h0IiwibWltZVR5cGUiLCJ1cmwiLCJ3aWR0aCIsImRpdiIsImNsYXNzTmFtZSIsImhlYWRlciIsIlRodW1ibmFpbCIsIk1ldGEiLCJpc0ltYWdlIiwiVXBsb2FkQWN0aW9ucyIsInNob3dTaXplUHJldmlld3MiLCJCdXR0b24iLCJidXR0b25TdHlsZSIsImljb24iLCJpY29uU3R5bGUiLCJvbkNsaWNrIiwicm91bmQiXSwibWFwcGluZ3MiOiI7Ozs7K0JBMkRBOzs7ZUFBQTs7OzhEQTNEa0I7Z0VBSUU7d0JBQ1U7K0RBQ1g7a0VBQ0c7NkRBQ0w7UUFDVjs7Ozs7O0FBRVAsTUFBTUEsWUFBWTtBQUVsQixNQUFNQyxjQUErQixDQUFDQztJQUNwQyxNQUFNLEVBQUVDLE9BQU8sRUFBRUMsVUFBVSxFQUFFQyxHQUFHLEVBQUVDLFlBQVksRUFBRUMsYUFBYSxFQUFFQyxhQUFhLEVBQUUsR0FBR047SUFFakYsTUFBTSxFQUNKTyxNQUFNQyxjQUFjLEVBQ3BCQyxRQUFRLEVBQUVDLFNBQVMsRUFBRSxFQUN0QixHQUFHUjtJQUVKLE1BQU0sRUFBRVMsRUFBRSxFQUFFQyxRQUFRLEVBQUVDLFFBQVEsRUFBRUMsTUFBTSxFQUFFQyxRQUFRLEVBQUVDLEdBQUcsRUFBRUMsS0FBSyxFQUFFLEdBQUdkO0lBRWpFLHFCQUNFLDZCQUFDZTtRQUFJQyxXQUFXckI7cUJBQ2QsNkJBQUNzQiw4QkFDQyw2QkFBQ0Msa0JBQVM7UUFBQ25CLFlBQVlBO1FBQVlDLEtBQUtBO1FBQUtHLGVBQWVBO3NCQUM1RCw2QkFBQ1k7UUFBSUMsV0FBVyxDQUFDLEVBQUVyQixVQUFVLGFBQWEsQ0FBQztxQkFDekMsNkJBQUN3QixhQUFJO1FBQ0hwQixZQUFZTTtRQUNaSSxVQUFVQTtRQUNWQyxVQUFVQTtRQUNWQyxRQUFRQTtRQUNSSCxJQUFJQTtRQUNKSSxVQUFVQTtRQUNWTCxXQUFXQTtRQUNYTSxLQUFLQTtRQUNMQyxPQUFPQTtRQUdSTSxJQUFBQSxnQkFBTyxFQUFDUiwyQkFDUCw2QkFBQ1MscUJBQWE7UUFBQ3ZCLFNBQVNBO1FBQVN3QixrQkFBa0JwQixpQkFBaUJGLElBQUlTLFFBQVE7U0FHbkZSLDhCQUNDLDZCQUFDc0IsZUFBTTtRQUNMQyxhQUFZO1FBQ1pSLFdBQVcsQ0FBQyxFQUFFckIsVUFBVSxRQUFRLENBQUM7UUFDakM4QixNQUFLO1FBQ0xDLFdBQVU7UUFDVkMsU0FBUzFCO1FBQ1QyQixPQUFBQTs7QUFNWjtNQUVBLFdBQWVoQyJ9

package/dist/admin/components/elements/FileDetails/index.scss

@@ -18,7 +18,10 @@
     width: auto;
     flex-grow: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
     align-self: center;
+    gap: base(0.25);
   }
 
   &__toggle-more-info {
@@ -53,6 +56,24 @@
     color: var(--theme-elevation-400);
   }
 
+  &__file-mutation {
+    display: flex;
+    margin-top: base(0.25);
+    gap: calc(var(--base) / 2);
+  }
+
+  &__edit {
+    cursor: pointer;
+    background-color: var(--theme-elevation-150);
+    border: none;
+    border-radius: $style-radius-s;
+    padding: base(0.25) base(0.5);
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+    }
+  }
+
   @include large-break {
     &__main-detail {
       padding: $baseline;

package/dist/admin/components/elements/FileDetails/types.d.ts

@@ -2,10 +2,13 @@ import type { SanitizedCollectionConfig } from '../../../../collections/config/t
 import type { FileSizes } from '../../../../uploads/types';
 import type { Data } from '../../forms/Form/types';
 export type Props = {
+    canEdit?: boolean;
     collection: SanitizedCollectionConfig;
     doc: Data & {
         sizes?: FileSizes;
     };
     handleRemove?: () => void;
+    hasImageSizes?: boolean;
+    imageCacheTag?: string;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/admin/components/elements/FileDetails/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/FileDetails/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAElD,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,yBAAyB,CAAA;IACrC,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/FileDetails/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAElD,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,yBAAyB,CAAA;IACrC,GAAG,EAAE,IAAI,GAAG;QACV,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA"}

package/dist/admin/components/elements/Hamburger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Hamburger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAgCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Hamburger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAkCA,CAAA"}

package/dist/admin/components/elements/Hamburger/index.js

@@ -28,7 +28,8 @@ const Hamburger = (props)=>{
     }, /*#__PURE__*/ _react.default.createElement("div", {
         className: `${baseClass}__icon`
     }, !isActive && /*#__PURE__*/ _react.default.createElement("div", {
-        className: `${baseClass}__lines`
+        className: `${baseClass}__lines`,
+        title: t('open')
     }, /*#__PURE__*/ _react.default.createElement("div", {
         className: `${baseClass}__line ${baseClass}__top`
     }), /*#__PURE__*/ _react.default.createElement("div", {
@@ -36,8 +37,9 @@ const Hamburger = (props)=>{
     }), /*#__PURE__*/ _react.default.createElement("div", {
         className: `${baseClass}__line ${baseClass}__bottom`
     })), isActive && /*#__PURE__*/ _react.default.createElement("div", {
-        "aria-label": t('collapse'),
-        className: `${baseClass}__close-icon`
+        "aria-label": closeIcon === 'collapse' ? t('collapse') : t('close'),
+        className: `${baseClass}__close-icon`,
+        title: closeIcon === 'collapse' ? t('collapse') : t('close')
     }, closeIcon === 'x' && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
         className: `${baseClass}__line ${baseClass}__x-left`
     }), /*#__PURE__*/ _react.default.createElement("div", {
@@ -48,4 +50,4 @@ const Hamburger = (props)=>{
     }))));
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL0hhbWJ1cmdlci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0J1xuXG5pbXBvcnQgeyBDaGV2cm9uIH0gZnJvbSAnLi4vLi4nXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2hhbWJ1cmdlcidcblxuZXhwb3J0IGNvbnN0IEhhbWJ1cmdlcjogUmVhY3QuRkM8e1xuICBjbG9zZUljb24/OiAnY29sbGFwc2UnIHwgJ3gnXG4gIGlzQWN0aXZlPzogYm9vbGVhblxufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbignZ2VuZXJhbCcpXG4gIGNvbnN0IHsgY2xvc2VJY29uID0gJ3gnLCBpc0FjdGl2ZSA9IGZhbHNlIH0gPSBwcm9wc1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e1tiYXNlQ2xhc3NdLmZpbHRlcihCb29sZWFuKS5qb2luKCcgJyl9PlxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2ljb25gfT5cbiAgICAgICAgeyFpc0FjdGl2ZSAmJiAoXG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2xpbmVzYH0+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX3RvcGB9IC8+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX21pZGRsZWB9IC8+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX2JvdHRvbWB9IC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICl9XG5cbiAgICAgICAge2lzQWN0aXZlICYmIChcbiAgICAgICAgICA8ZGl2IGFyaWEtbGFiZWw9e3QoJ2NvbGxhcHNlJyl9IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fY2xvc2UtaWNvbmB9PlxuICAgICAgICAgICAge2Nsb3NlSWNvbiA9PT0gJ3gnICYmIChcbiAgICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19saW5lICR7YmFzZUNsYXNzfV9feC1sZWZ0YH0gLz5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX3gtcmlnaHRgfSAvPlxuICAgICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgKX1cblxuICAgICAgICAgICAge2Nsb3NlSWNvbiA9PT0gJ2NvbGxhcHNlJyAmJiAoXG4gICAgICAgICAgICAgIDxDaGV2cm9uIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fY29sbGFwc2UtY2hldnJvbmB9IGRpcmVjdGlvbj1cImxlZnRcIiAvPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiSGFtYnVyZ2VyIiwiYmFzZUNsYXNzIiwicHJvcHMiLCJ0IiwidXNlVHJhbnNsYXRpb24iLCJjbG9zZUljb24iLCJpc0FjdGl2ZSIsImRpdiIsImNsYXNzTmFtZSIsImZpbHRlciIsIkJvb2xlYW4iLCJqb2luIiwiYXJpYS1sYWJlbCIsIlJlYWN0IiwiRnJhZ21lbnQiLCJDaGV2cm9uIiwiZGlyZWN0aW9uIl0sIm1hcHBpbmdzIjoiOzs7OytCQVFhQTs7O2VBQUFBOzs7OERBUks7OEJBQ2E7a0JBRVA7UUFDakI7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCxZQUdSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxDQUFDLEVBQUUsR0FBR0MsSUFBQUEsNEJBQWMsRUFBQztJQUM3QixNQUFNLEVBQUVDLFlBQVksR0FBRyxFQUFFQyxXQUFXLEtBQUssRUFBRSxHQUFHSjtJQUU5QyxxQkFDRSw2QkFBQ0s7UUFBSUMsV0FBVztZQUFDUDtTQUFVLENBQUNRLE1BQU0sQ0FBQ0MsU0FBU0MsSUFBSSxDQUFDO3FCQUMvQyw2QkFBQ0o7UUFBSUMsV0FBVyxDQUFDLEVBQUVQLFVBQVUsTUFBTSxDQUFDO09BQ2pDLENBQUNLLDBCQUNBLDZCQUFDQztRQUFJQyxXQUFXLENBQUMsRUFBRVAsVUFBVSxPQUFPLENBQUM7cUJBQ25DLDZCQUFDTTtRQUFJQyxXQUFXLENBQUMsRUFBRVAsVUFBVSxPQUFPLEVBQUVBLFVBQVUsS0FBSyxDQUFDO3NCQUN0RCw2QkFBQ007UUFBSUMsV0FBVyxDQUFDLEVBQUVQLFVBQVUsT0FBTyxFQUFFQSxVQUFVLFFBQVEsQ0FBQztzQkFDekQsNkJBQUNNO1FBQUlDLFdBQVcsQ0FBQyxFQUFFUCxVQUFVLE9BQU8sRUFBRUEsVUFBVSxRQUFRLENBQUM7U0FJNURLLDBCQUNDLDZCQUFDQztRQUFJSyxjQUFZVCxFQUFFO1FBQWFLLFdBQVcsQ0FBQyxFQUFFUCxVQUFVLFlBQVksQ0FBQztPQUNsRUksY0FBYyxxQkFDYiw2QkFBQ1EsY0FBSyxDQUFDQyxRQUFRLHNCQUNiLDZCQUFDUDtRQUFJQyxXQUFXLENBQUMsRUFBRVAsVUFBVSxPQUFPLEVBQUVBLFVBQVUsUUFBUSxDQUFDO3NCQUN6RCw2QkFBQ007UUFBSUMsV0FBVyxDQUFDLEVBQUVQLFVBQVUsT0FBTyxFQUFFQSxVQUFVLFNBQVMsQ0FBQztTQUk3REksY0FBYyw0QkFDYiw2QkFBQ1UsU0FBTztRQUFDUCxXQUFXLENBQUMsRUFBRVAsVUFBVSxrQkFBa0IsQ0FBQztRQUFFZSxXQUFVOztBQU85RSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL0hhbWJ1cmdlci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0J1xuXG5pbXBvcnQgeyBDaGV2cm9uIH0gZnJvbSAnLi4vLi4nXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2hhbWJ1cmdlcidcblxuZXhwb3J0IGNvbnN0IEhhbWJ1cmdlcjogUmVhY3QuRkM8e1xuICBjbG9zZUljb24/OiAnY29sbGFwc2UnIHwgJ3gnXG4gIGlzQWN0aXZlPzogYm9vbGVhblxufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbignZ2VuZXJhbCcpXG4gIGNvbnN0IHsgY2xvc2VJY29uID0gJ3gnLCBpc0FjdGl2ZSA9IGZhbHNlIH0gPSBwcm9wc1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e1tiYXNlQ2xhc3NdLmZpbHRlcihCb29sZWFuKS5qb2luKCcgJyl9PlxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2ljb25gfT5cbiAgICAgICAgeyFpc0FjdGl2ZSAmJiAoXG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2xpbmVzYH0gdGl0bGU9e3QoJ29wZW4nKX0+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX3RvcGB9IC8+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX21pZGRsZWB9IC8+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX2JvdHRvbWB9IC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICl9XG4gICAgICAgIHtpc0FjdGl2ZSAmJiAoXG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgYXJpYS1sYWJlbD17Y2xvc2VJY29uID09PSAnY29sbGFwc2UnID8gdCgnY29sbGFwc2UnKSA6IHQoJ2Nsb3NlJyl9XG4gICAgICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2Nsb3NlLWljb25gfVxuICAgICAgICAgICAgdGl0bGU9e2Nsb3NlSWNvbiA9PT0gJ2NvbGxhcHNlJyA/IHQoJ2NvbGxhcHNlJykgOiB0KCdjbG9zZScpfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjbG9zZUljb24gPT09ICd4JyAmJiAoXG4gICAgICAgICAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGluZSAke2Jhc2VDbGFzc31fX3gtbGVmdGB9IC8+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2xpbmUgJHtiYXNlQ2xhc3N9X194LXJpZ2h0YH0gLz5cbiAgICAgICAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7Y2xvc2VJY29uID09PSAnY29sbGFwc2UnICYmIChcbiAgICAgICAgICAgICAgPENoZXZyb24gY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19jb2xsYXBzZS1jaGV2cm9uYH0gZGlyZWN0aW9uPVwibGVmdFwiIC8+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJIYW1idXJnZXIiLCJiYXNlQ2xhc3MiLCJwcm9wcyIsInQiLCJ1c2VUcmFuc2xhdGlvbiIsImNsb3NlSWNvbiIsImlzQWN0aXZlIiwiZGl2IiwiY2xhc3NOYW1lIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJ0aXRsZSIsImFyaWEtbGFiZWwiLCJSZWFjdCIsIkZyYWdtZW50IiwiQ2hldnJvbiIsImRpcmVjdGlvbiJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFRYUE7OztlQUFBQTs7OzhEQVJLOzhCQUNhO2tCQUVQO1FBQ2pCOzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRVgsTUFBTUQsWUFHUixDQUFDRTtJQUNKLE1BQU0sRUFBRUMsQ0FBQyxFQUFFLEdBQUdDLElBQUFBLDRCQUFjLEVBQUM7SUFDN0IsTUFBTSxFQUFFQyxZQUFZLEdBQUcsRUFBRUMsV0FBVyxLQUFLLEVBQUUsR0FBR0o7SUFFOUMscUJBQ0UsNkJBQUNLO1FBQUlDLFdBQVc7WUFBQ1A7U0FBVSxDQUFDUSxNQUFNLENBQUNDLFNBQVNDLElBQUksQ0FBQztxQkFDL0MsNkJBQUNKO1FBQUlDLFdBQVcsQ0FBQyxFQUFFUCxVQUFVLE1BQU0sQ0FBQztPQUNqQyxDQUFDSywwQkFDQSw2QkFBQ0M7UUFBSUMsV0FBVyxDQUFDLEVBQUVQLFVBQVUsT0FBTyxDQUFDO1FBQUVXLE9BQU9ULEVBQUU7cUJBQzlDLDZCQUFDSTtRQUFJQyxXQUFXLENBQUMsRUFBRVAsVUFBVSxPQUFPLEVBQUVBLFVBQVUsS0FBSyxDQUFDO3NCQUN0RCw2QkFBQ007UUFBSUMsV0FBVyxDQUFDLEVBQUVQLFVBQVUsT0FBTyxFQUFFQSxVQUFVLFFBQVEsQ0FBQztzQkFDekQsNkJBQUNNO1FBQUlDLFdBQVcsQ0FBQyxFQUFFUCxVQUFVLE9BQU8sRUFBRUEsVUFBVSxRQUFRLENBQUM7U0FHNURLLDBCQUNDLDZCQUFDQztRQUNDTSxjQUFZUixjQUFjLGFBQWFGLEVBQUUsY0FBY0EsRUFBRTtRQUN6REssV0FBVyxDQUFDLEVBQUVQLFVBQVUsWUFBWSxDQUFDO1FBQ3JDVyxPQUFPUCxjQUFjLGFBQWFGLEVBQUUsY0FBY0EsRUFBRTtPQUVuREUsY0FBYyxxQkFDYiw2QkFBQ1MsY0FBSyxDQUFDQyxRQUFRLHNCQUNiLDZCQUFDUjtRQUFJQyxXQUFXLENBQUMsRUFBRVAsVUFBVSxPQUFPLEVBQUVBLFVBQVUsUUFBUSxDQUFDO3NCQUN6RCw2QkFBQ007UUFBSUMsV0FBVyxDQUFDLEVBQUVQLFVBQVUsT0FBTyxFQUFFQSxVQUFVLFNBQVMsQ0FBQztTQUc3REksY0FBYyw0QkFDYiw2QkFBQ1csU0FBTztRQUFDUixXQUFXLENBQUMsRUFBRVAsVUFBVSxrQkFBa0IsQ0FBQztRQUFFZ0IsV0FBVTs7QUFPOUUifQ==

package/dist/admin/components/elements/PreviewSizes/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SanitizedCollectionConfig } from '../../../../exports/types';
+import type { FileSizes } from '../../../../uploads/types';
+import type { Data } from '../../forms/Form/types';
+import './index.scss';
+declare const PreviewSizes: React.FC<{
+    collection: SanitizedCollectionConfig;
+    doc?: Data & {
+        sizes?: FileSizes;
+    };
+    updatedAt?: string;
+}>;
+export default PreviewSizes;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/elements/PreviewSizes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/PreviewSizes/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAU,MAAM,2BAA2B,CAAA;AAClE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAGlD,OAAO,cAAc,CAAA;AAkBrB,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3B,UAAU,EAAE,yBAAyB,CAAA;IACrC,GAAG,CAAC,EAAE,IAAI,GAAG;QACX,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CA2EA,CAAA;AACD,eAAe,YAAY,CAAA"}

package/dist/admin/components/elements/PreviewSizes/index.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _Meta = /*#__PURE__*/ _interop_require_default(require("../FileDetails/Meta"));
+require("./index.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const baseClass = 'preview-sizes';
+const sortSizes = (sizes, imageSizes)=>{
+    if (!imageSizes || imageSizes.length === 0) return sizes;
+    const orderedSizes = {};
+    imageSizes.forEach(({ name })=>{
+        if (sizes[name]) {
+            orderedSizes[name] = sizes[name];
+        }
+    });
+    return orderedSizes;
+};
+const PreviewSizes = ({ collection, doc, updatedAt })=>{
+    const { upload: { imageSizes, staticURL } } = collection;
+    const { sizes } = doc;
+    const [orderedSizes, setOrderedSizes] = (0, _react.useState)(()=>sortSizes(sizes, imageSizes));
+    const [selectedSize, setSelectedSize] = (0, _react.useState)(orderedSizes?.[imageSizes[0]?.name]?.filename ? imageSizes[0]?.name : null);
+    const [appendUrl, setAppendUrl] = (0, _react.useState)(false);
+    const generateImageUrl = (filename)=>{
+        const query = appendUrl ? `?${Date.now()}` : '';
+        return `${staticURL}/${filename}${query}`;
+    };
+    (0, _react.useEffect)(()=>{
+        setOrderedSizes(sortSizes(sizes, imageSizes));
+    }, [
+        sizes,
+        imageSizes,
+        updatedAt
+    ]);
+    (0, _react.useEffect)(()=>{
+        setAppendUrl(true);
+    }, [
+        updatedAt
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: baseClass
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__imageWrap`
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__meta`
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__sizeName`
+    }, selectedSize), /*#__PURE__*/ _react.default.createElement(_Meta.default, {
+        ...selectedSize && orderedSizes[selectedSize],
+        staticURL: staticURL
+    })), /*#__PURE__*/ _react.default.createElement("img", {
+        alt: doc.filename,
+        className: `${baseClass}__preview`,
+        src: generateImageUrl(`${orderedSizes[selectedSize]?.filename}`)
+    })), /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__listWrap`
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__list`
+    }, Object.entries(orderedSizes).map(([key, val])=>{
+        const selected = selectedSize === key;
+        if (val?.filename) {
+            return /*#__PURE__*/ _react.default.createElement("div", {
+                className: [
+                    `${baseClass}__sizeOption`,
+                    selected && `${baseClass}--selected`
+                ].filter(Boolean).join(' '),
+                key: key,
+                onClick: ()=>setSelectedSize(key),
+                onKeyDown: (e)=>{
+                    if (e.keyCode === 13) {
+                        setSelectedSize(key);
+                    }
+                },
+                role: "button",
+                tabIndex: 0
+            }, /*#__PURE__*/ _react.default.createElement("div", {
+                className: `${baseClass}__image`
+            }, /*#__PURE__*/ _react.default.createElement("img", {
+                alt: val.filename,
+                src: generateImageUrl(val.filename)
+            })), /*#__PURE__*/ _react.default.createElement("div", {
+                className: `${baseClass}__sizeMeta`
+            }, /*#__PURE__*/ _react.default.createElement("div", {
+                className: `${baseClass}__sizeName`
+            }, key), /*#__PURE__*/ _react.default.createElement(_Meta.default, {
+                ...val,
+                staticURL: staticURL
+            })));
+        }
+        return null;
+    }))));
+};
+const _default = PreviewSizes;
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL2VsZW1lbnRzL1ByZXZpZXdTaXplcy9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHR5cGUgeyBTYW5pdGl6ZWRDb2xsZWN0aW9uQ29uZmlnIH0gZnJvbSAnLi4vLi4vLi4vLi4vZXhwb3J0cy90eXBlcydcbmltcG9ydCB0eXBlIHsgRmlsZVNpemVzLCBVcGxvYWQgfSBmcm9tICcuLi8uLi8uLi8uLi91cGxvYWRzL3R5cGVzJ1xuaW1wb3J0IHR5cGUgeyBEYXRhIH0gZnJvbSAnLi4vLi4vZm9ybXMvRm9ybS90eXBlcydcblxuaW1wb3J0IE1ldGEgZnJvbSAnLi4vRmlsZURldGFpbHMvTWV0YSdcbmltcG9ydCAnLi9pbmRleC5zY3NzJ1xuXG5jb25zdCBiYXNlQ2xhc3MgPSAncHJldmlldy1zaXplcydcblxuY29uc3Qgc29ydFNpemVzID0gKHNpemVzOiBGaWxlU2l6ZXMsIGltYWdlU2l6ZXM6IFVwbG9hZFsnaW1hZ2VTaXplcyddKSA9PiB7XG4gIGlmICghaW1hZ2VTaXplcyB8fCBpbWFnZVNpemVzLmxlbmd0aCA9PT0gMCkgcmV0dXJuIHNpemVzXG5cbiAgY29uc3Qgb3JkZXJlZFNpemVzOiBGaWxlU2l6ZXMgPSB7fVxuXG4gIGltYWdlU2l6ZXMuZm9yRWFjaCgoeyBuYW1lIH0pID0+IHtcbiAgICBpZiAoc2l6ZXNbbmFtZV0pIHtcbiAgICAgIG9yZGVyZWRTaXplc1tuYW1lXSA9IHNpemVzW25hbWVdXG4gICAgfVxuICB9KVxuXG4gIHJldHVybiBvcmRlcmVkU2l6ZXNcbn1cblxuY29uc3QgUHJldmlld1NpemVzOiBSZWFjdC5GQzx7XG4gIGNvbGxlY3Rpb246IFNhbml0aXplZENvbGxlY3Rpb25Db25maWdcbiAgZG9jPzogRGF0YSAmIHtcbiAgICBzaXplcz86IEZpbGVTaXplc1xuICB9XG4gIHVwZGF0ZWRBdD86IHN0cmluZ1xufT4gPSAoeyBjb2xsZWN0aW9uLCBkb2MsIHVwZGF0ZWRBdCB9KSA9PiB7XG4gIGNvbnN0IHtcbiAgICB1cGxvYWQ6IHsgaW1hZ2VTaXplcywgc3RhdGljVVJMIH0sXG4gIH0gPSBjb2xsZWN0aW9uXG4gIGNvbnN0IHsgc2l6ZXMgfSA9IGRvY1xuXG4gIGNvbnN0IFtvcmRlcmVkU2l6ZXMsIHNldE9yZGVyZWRTaXplc10gPSB1c2VTdGF0ZTxGaWxlU2l6ZXM+KCgpID0+IHNvcnRTaXplcyhzaXplcywgaW1hZ2VTaXplcykpXG4gIGNvbnN0IFtzZWxlY3RlZFNpemUsIHNldFNlbGVjdGVkU2l6ZV0gPSB1c2VTdGF0ZTxudWxsIHwgc3RyaW5nPihcbiAgICBvcmRlcmVkU2l6ZXM/LltpbWFnZVNpemVzWzBdPy5uYW1lXT8uZmlsZW5hbWUgPyBpbWFnZVNpemVzWzBdPy5uYW1lIDogbnVsbCxcbiAgKVxuICBjb25zdCBbYXBwZW5kVXJsLCBzZXRBcHBlbmRVcmxdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpXG5cbiAgY29uc3QgZ2VuZXJhdGVJbWFnZVVybCA9IChmaWxlbmFtZSkgPT4ge1xuICAgIGNvbnN0IHF1ZXJ5ID0gYXBwZW5kVXJsID8gYD8ke0RhdGUubm93KCl9YCA6ICcnXG4gICAgcmV0dXJuIGAke3N0YXRpY1VSTH0vJHtmaWxlbmFtZX0ke3F1ZXJ5fWBcbiAgfVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0T3JkZXJlZFNpemVzKHNvcnRTaXplcyhzaXplcywgaW1hZ2VTaXplcykpXG4gIH0sIFtzaXplcywgaW1hZ2VTaXplcywgdXBkYXRlZEF0XSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHNldEFwcGVuZFVybCh0cnVlKVxuICB9LCBbdXBkYXRlZEF0XSlcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9PlxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2ltYWdlV3JhcGB9PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbWV0YWB9PlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19zaXplTmFtZWB9PntzZWxlY3RlZFNpemV9PC9kaXY+XG4gICAgICAgICAgPE1ldGEgey4uLihzZWxlY3RlZFNpemUgJiYgb3JkZXJlZFNpemVzW3NlbGVjdGVkU2l6ZV0pfSBzdGF0aWNVUkw9e3N0YXRpY1VSTH0gLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxpbWdcbiAgICAgICAgICBhbHQ9e2RvYy5maWxlbmFtZX1cbiAgICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3ByZXZpZXdgfVxuICAgICAgICAgIHNyYz17Z2VuZXJhdGVJbWFnZVVybChgJHtvcmRlcmVkU2l6ZXNbc2VsZWN0ZWRTaXplXT8uZmlsZW5hbWV9YCl9XG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19saXN0V3JhcGB9PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbGlzdGB9PlxuICAgICAgICAgIHtPYmplY3QuZW50cmllcyhvcmRlcmVkU2l6ZXMpLm1hcCgoW2tleSwgdmFsXSkgPT4ge1xuICAgICAgICAgICAgY29uc3Qgc2VsZWN0ZWQgPSBzZWxlY3RlZFNpemUgPT09IGtleVxuICAgICAgICAgICAgaWYgKHZhbD8uZmlsZW5hbWUpIHtcbiAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1tgJHtiYXNlQ2xhc3N9X19zaXplT3B0aW9uYCwgc2VsZWN0ZWQgJiYgYCR7YmFzZUNsYXNzfS0tc2VsZWN0ZWRgXVxuICAgICAgICAgICAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgICAgICAgICAgIC5qb2luKCcgJyl9XG4gICAgICAgICAgICAgICAgICBrZXk9e2tleX1cbiAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHNldFNlbGVjdGVkU2l6ZShrZXkpfVxuICAgICAgICAgICAgICAgICAgb25LZXlEb3duPXsoZSkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBpZiAoZS5rZXlDb2RlID09PSAxMykge1xuICAgICAgICAgICAgICAgICAgICAgIHNldFNlbGVjdGVkU2l6ZShrZXkpXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgIHRhYkluZGV4PXswfVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19pbWFnZWB9PlxuICAgICAgICAgICAgICAgICAgICA8aW1nIGFsdD17dmFsLmZpbGVuYW1lfSBzcmM9e2dlbmVyYXRlSW1hZ2VVcmwodmFsLmZpbGVuYW1lKX0gLz5cbiAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemVNZXRhYH0+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19zaXplTmFtZWB9PntrZXl9PC9kaXY+XG4gICAgICAgICAgICAgICAgICAgIDxNZXRhIHsuLi52YWx9IHN0YXRpY1VSTD17c3RhdGljVVJMfSAvPlxuICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgIClcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgcmV0dXJuIG51bGxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgKVxufVxuZXhwb3J0IGRlZmF1bHQgUHJldmlld1NpemVzXG4iXSwibmFtZXMiOlsiYmFzZUNsYXNzIiwic29ydFNpemVzIiwic2l6ZXMiLCJpbWFnZVNpemVzIiwibGVuZ3RoIiwib3JkZXJlZFNpemVzIiwiZm9yRWFjaCIsIm5hbWUiLCJQcmV2aWV3U2l6ZXMiLCJjb2xsZWN0aW9uIiwiZG9jIiwidXBkYXRlZEF0IiwidXBsb2FkIiwic3RhdGljVVJMIiwic2V0T3JkZXJlZFNpemVzIiwidXNlU3RhdGUiLCJzZWxlY3RlZFNpemUiLCJzZXRTZWxlY3RlZFNpemUiLCJmaWxlbmFtZSIsImFwcGVuZFVybCIsInNldEFwcGVuZFVybCIsImdlbmVyYXRlSW1hZ2VVcmwiLCJxdWVyeSIsIkRhdGUiLCJub3ciLCJ1c2VFZmZlY3QiLCJkaXYiLCJjbGFzc05hbWUiLCJNZXRhIiwiaW1nIiwiYWx0Iiwic3JjIiwiT2JqZWN0IiwiZW50cmllcyIsIm1hcCIsImtleSIsInZhbCIsInNlbGVjdGVkIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJvbkNsaWNrIiwib25LZXlEb3duIiwiZSIsImtleUNvZGUiLCJyb2xlIiwidGFiSW5kZXgiXSwibWFwcGluZ3MiOiI7Ozs7K0JBMkdBOzs7ZUFBQTs7OytEQTNHMkM7NkRBTTFCO1FBQ1Y7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVQLE1BQU1BLFlBQVk7QUFFbEIsTUFBTUMsWUFBWSxDQUFDQyxPQUFrQkM7SUFDbkMsSUFBSSxDQUFDQSxjQUFjQSxXQUFXQyxNQUFNLEtBQUssR0FBRyxPQUFPRjtJQUVuRCxNQUFNRyxlQUEwQixDQUFDO0lBRWpDRixXQUFXRyxPQUFPLENBQUMsQ0FBQyxFQUFFQyxJQUFJLEVBQUU7UUFDMUIsSUFBSUwsS0FBSyxDQUFDSyxLQUFLLEVBQUU7WUFDZkYsWUFBWSxDQUFDRSxLQUFLLEdBQUdMLEtBQUssQ0FBQ0ssS0FBSztRQUNsQztJQUNGO0lBRUEsT0FBT0Y7QUFDVDtBQUVBLE1BQU1HLGVBTUQsQ0FBQyxFQUFFQyxVQUFVLEVB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

package/dist/admin/components/elements/PreviewSizes/index.scss

@@ -0,0 +1,146 @@
+@import '../../../scss/styles.scss';
+
+.preview-sizes {
+  margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
+  border-top: 1px solid var(--theme-elevation-150);
+  max-height: calc(100vh - base(6));
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+
+  &__imageWrap {
+    min-width: 60%;
+    border-right: 1px solid var(--theme-elevation-150);
+  }
+
+  &__preview {
+    max-height: calc(100% - base(4));
+    padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
+    object-fit: contain;
+  }
+
+  &__meta {
+    border-bottom: 1px solid var(--theme-elevation-150);
+    padding: base(1) var(--gutter-h);
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: base(1);
+
+    .file-meta {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: base(1);
+      text-wrap: wrap;
+      width: 100%;
+    }
+
+    .file-meta__url {
+      width: 100%;
+    }
+  }
+
+  &__sizeName,
+  .file-meta__size-type {
+    color: var(--theme-elevation-600);
+  }
+
+  &__listWrap {
+    padding-right: var(--gutter-h);
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      height: base(4);
+      width: 100%;
+      background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
+      pointer-events: none;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: base(0.5);
+    margin: 0;
+    padding: base(1.5) 0 base(1.5) base(1.5);
+  }
+
+  &__sizeOption {
+    padding: base(0.5);
+    display: flex;
+    flex-direction: row;
+    gap: base(1);
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: var(--theme-elevation-100);
+    }
+  }
+
+  &--selected {
+    background-color: var(--theme-elevation-100);
+  }
+
+  &__image {
+    display: flex;
+    width: 30%;
+    min-width: 30%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__sizeMeta {
+    padding: base(0.5) 0;
+  }
+
+  &__sizeName,
+  &__sizeMeta {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @include mid-break {
+    margin-top: base(1);
+    max-height: calc(100vh - base(4));
+  }
+
+  @include small-break {
+    margin-top: 0;
+    max-height: calc(100vh - base(3.5));
+    flex-direction: column;
+    justify-content: space-between;
+
+    &__imageWrap {
+      height: 60%;
+      border: none;
+    }
+
+    &__list,
+    &__preview {
+      padding: calc(var(--gutter-h) * 2) var(--gutter-h);
+    }
+
+    &__preview {
+      max-height: calc(100% - base(4));
+    }
+
+    &__sizeOption {
+      padding: base(0.25);
+    }
+
+    &__listWrap {
+      border-top: 1px solid var(--theme-elevation-150);
+      height: 40%;
+    }
+  }
+}

package/dist/admin/components/elements/Thumbnail/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmB9B,CAAA;AACD,eAAe,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/Thumbnail/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+B9B,CAAA;AACD,eAAe,SAAS,CAAA"}