payload 2.0.0-beta.24 → 2.0.0-beta.27

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

@@ -0,0 +1,218 @@
+@import '../../../scss/styles.scss';
+
+$header-height: base(5);
+
+.edit-upload {
+  --edit-upload-cell-spacing: calc(var(--base) * 1.5);
+  --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
+  height: 100%;
+  margin-right: calc(var(--gutter-h) * -1);
+  margin-left: calc(var(--gutter-h) * -1);
+
+  &__header {
+    height: $header-height;
+    border-bottom: 1px solid var(--theme-elevation-150);
+    padding: 0 var(--gutter-h);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & h2 {
+      margin: 0;
+      text-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__actions {
+    min-width: 350px;
+    margin-left: auto;
+    padding: base(0.5) 0 base(0.5) base(1.5);
+    justify-content: flex-end;
+    display: flex;
+    gap: base(1);
+    text-wrap: nowrap;
+  }
+
+  &__cancel,
+  &__save {
+    width: 50%;
+  }
+
+  &__toolWrap {
+    display: flex;
+    justify-content: flex-end;
+    height: (calc(100% - #{$header-height}));
+  }
+
+  .ReactCrop__selection-addon,
+  &__crop-window {
+    height: 100%;
+    width: 100%;
+  }
+
+  &__focal-wrapper {
+    position: relative;
+    display: inline-flex;
+    max-height: 100%;
+  }
+
+  &__draggable-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    pointer-events: none;
+
+    &--dragging {
+      pointer-events: all;
+
+      .edit-upload__focalPoint {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  &__focalPoint {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    width: 50px;
+    height: 50px;
+    transform: translate3d(-50%, -50%, 0);
+    pointer-events: all;
+
+    svg {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 100%;
+      width: base(2);
+      height: base(2);
+      color: white;
+    }
+  }
+
+  &__crop,
+  &__focalOnly {
+    padding: base(1.5) base(1.5) base(1.5) 0;
+  }
+
+  &__crop {
+    padding: var(--edit-upload-cell-spacing);
+    padding-left: var(--gutter-h);
+    display: flex;
+    align-items: flex-start;
+    height: 100%;
+  }
+
+  &__imageWrap {
+    position: relative;
+  }
+
+  &__point {
+    cursor: move;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+
+    & svg {
+      width: base(2);
+      height: base(2);
+    }
+  }
+
+  &__sidebar {
+    border-left: 1px solid var(--theme-elevation-150);
+    padding-top: var(--edit-upload-cell-spacing);
+    min-width: var(--edit-upload-sidebar-width);
+
+    & > div:first-child {
+      margin-bottom: base(1);
+    }
+  }
+
+  &__groupWrap {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.5);
+    padding-right: var(--gutter-h);
+    padding-left: var(--edit-upload-cell-spacing);
+    width: 100%;
+
+    + .edit-upload__groupWrap {
+      padding-top: var(--edit-upload-cell-spacing);
+      margin-top: var(--edit-upload-cell-spacing);
+      border-top: 1px solid var(--theme-elevation-150);
+    }
+  }
+
+  &__inputsWrap,
+  &__titleWrap {
+    display: flex;
+    gap: base(1);
+  }
+
+  &__titleWrap {
+    justify-content: space-between;
+    align-items: center;
+
+    & h3 {
+      margin: 0;
+    }
+  }
+
+  &__reset {
+    height: fit-content;
+    border-radius: var(--style-radius-s);
+    background-color: var(--theme-elevation-150);
+    padding: 0 base(0.25);
+  }
+
+  &__input {
+    flex: 1;
+    & input {
+      @include formInput;
+    }
+  }
+
+  @include mid-break {
+    --edit-upload-cell-spacing: var(--gutter-h);
+    &__sidebar {
+      padding-left: 0;
+      border-left: 0;
+      width: 100%;
+    }
+    &__toolWrap {
+      flex-direction: column-reverse;
+    }
+  }
+
+  @include small-break {
+    flex-direction: column;
+
+    &__focalPoint {
+      border-right: none;
+      padding: base(1) 0;
+    }
+
+    &__inputsWrap {
+      flex-direction: column;
+      gap: base(1);
+    }
+
+    &__sidebar {
+      min-width: 0;
+    }
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/FileDetails/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAKlD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAMpC,OAAO,cAAc,CAAA;AAmBrB,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6FhC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/admin/components/elements/FileDetails/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4ChC,CAAA;AAED,eAAe,WAAW,CAAA"}

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"}