@payloadcms/ui 3.0.0-beta.12 → 3.0.0-beta.121

package/dist/elements/FileDetails/FileMeta/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/elements/FileDetails/FileMeta/index.js

@@ -1,38 +1,105 @@
-import { formatFilesize } from 'payload/utilities';
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatFilesize } from 'payload/shared';
 import React, { useState } from 'react';
-import { Edit } from '../../../icons/Edit/index.js';
+import { EditIcon } from '../../../icons/Edit/index.js';
 import { CopyToClipboard } from '../../CopyToClipboard/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { Tooltip } from '../../Tooltip/index.js';
+import './index.scss';
 const baseClass = 'file-meta';
-export const FileMeta = (props)=>{
-    const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props;
-    const [hovered, setHovered] = useState(false);
-    const openInDrawer = Boolean(id && collection);
-    const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({
-        id,
-        collectionSlug: collection
+export const FileMeta = props => {
+  const $ = _c(19);
+  const {
+    id,
+    collection,
+    filename,
+    filesize,
+    height,
+    mimeType,
+    url: fileURL,
+    width
+  } = props;
+  const [hovered, setHovered] = useState(false);
+  const openInDrawer = Boolean(id && collection);
+  let t0;
+  if ($[0] !== id || $[1] !== collection) {
+    t0 = {
+      id,
+      collectionSlug: collection
+    };
+    $[0] = id;
+    $[1] = collection;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer(t0);
+  let t1;
+  if ($[3] !== openInDrawer || $[4] !== DocumentDrawer || $[5] !== fileURL || $[6] !== filename || $[7] !== hovered || $[8] !== DocumentDrawerToggler || $[9] !== filesize || $[10] !== width || $[11] !== height || $[12] !== mimeType) {
+    let t2;
+    if ($[14] !== width || $[15] !== height) {
+      t2 = width && height && _jsxs(React.Fragment, {
+        children: ["\xA0-\xA0", width, "x", height]
+      });
+      $[14] = width;
+      $[15] = height;
+      $[16] = t2;
+    } else {
+      t2 = $[16];
+    }
+    let t3;
+    if ($[17] !== mimeType) {
+      t3 = mimeType && _jsxs(React.Fragment, {
+        children: ["\xA0-\xA0", mimeType]
+      });
+      $[17] = mimeType;
+      $[18] = t3;
+    } else {
+      t3 = $[18];
+    }
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: `${baseClass}__url`,
+        children: [openInDrawer && _jsx(DocumentDrawer, {}), _jsx("a", {
+          href: fileURL,
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: filename
+        }), _jsx(CopyToClipboard, {
+          defaultMessage: "Copy URL",
+          value: fileURL
+        }), openInDrawer && _jsxs(DocumentDrawerToggler, {
+          className: `${baseClass}__edit`,
+          onMouseEnter: () => setHovered(true),
+          onMouseLeave: () => setHovered(false),
+          children: [_jsx(EditIcon, {}), _jsx(Tooltip, {
+            show: hovered,
+            children: "Edit"
+          })]
+        })]
+      }), _jsxs("div", {
+        className: `${baseClass}__size-type`,
+        children: [formatFilesize(filesize), t2, t3]
+      })]
     });
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__url`
-    }, openInDrawer && /*#__PURE__*/ React.createElement(DocumentDrawer, null), /*#__PURE__*/ React.createElement("a", {
-        href: fileURL,
-        rel: "noopener noreferrer",
-        target: "_blank"
-    }, filename), /*#__PURE__*/ React.createElement(CopyToClipboard, {
-        defaultMessage: "Copy URL",
-        value: fileURL
-    }), openInDrawer && /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-        className: `${baseClass}__edit`,
-        onMouseEnter: ()=>setHovered(true),
-        onMouseLeave: ()=>setHovered(false)
-    }, /*#__PURE__*/ React.createElement(Edit, null), /*#__PURE__*/ React.createElement(Tooltip, {
-        show: hovered
-    }, "Edit"))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__size-type`
-    }, formatFilesize(filesize), width && height && /*#__PURE__*/ React.createElement(React.Fragment, null, " - ", width, "x", height), mimeType && /*#__PURE__*/ React.createElement(React.Fragment, null, " - ", mimeType)));
+    $[3] = openInDrawer;
+    $[4] = DocumentDrawer;
+    $[5] = fileURL;
+    $[6] = filename;
+    $[7] = hovered;
+    $[8] = DocumentDrawerToggler;
+    $[9] = filesize;
+    $[10] = width;
+    $[11] = height;
+    $[12] = mimeType;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  return t1;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/FileMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["import { formatFilesize } from 'payload/utilities'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { Edit } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <Edit />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","useState","Edit","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","DocumentDrawer","DocumentDrawerToggler","collectionSlug","div","className","a","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,cAAc,QAAQ,oBAAmB;AAClD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAcvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAGhD,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,EAAE,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGT;IAEtF,MAAM,CAACU,SAASC,WAAW,GAAGlB,SAAS;IACvC,MAAMmB,eAAeC,QAAQZ,MAAMC;IAEnC,MAAM,CAACY,gBAAgBC,sBAAsB,GAAGnB,kBAAkB;QAChEK;QACAe,gBAAgBd;IAClB;IAEA,qBACE,oBAACe;QAAIC,WAAWpB;qBACd,oBAACmB;QAAIC,WAAW,CAAC,EAAEpB,UAAU,KAAK,CAAC;OAChCc,8BAAgB,oBAACE,qCAClB,oBAACK;QAAEC,MAAMZ;QAASa,KAAI;QAAsBC,QAAO;OAChDnB,yBAEH,oBAACR;QAAgB4B,gBAAe;QAAWC,OAAOhB;QACjDI,8BACC,oBAACG;QACCG,WAAW,CAAC,EAAEpB,UAAU,MAAM,CAAC;QAC/B2B,cAAc,IAAMd,WAAW;QAC/Be,cAAc,IAAMf,WAAW;qBAE/B,oBAACjB,2BACD,oBAACG;QAAQ8B,MAAMjB;OAAS,yBAI9B,oBAACO;QAAIC,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;OACtCP,eAAea,WACfK,SAASJ,wBACR,oBAACb,MAAMoC,QAAQ,QAAC,OAEbnB,OAAM,KAAEJ,SAGZC,0BACC,oBAACd,MAAMoC,QAAQ,QAAC,OAEbtB;AAMb,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","formatFilesize","React","useState","EditIcon","CopyToClipboard","useDocumentDrawer","Tooltip","baseClass","FileMeta","props","$","id","collection","filename","filesize","height","mimeType","url","fileURL","width","hovered","setHovered","openInDrawer","Boolean","t0","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t1","t2","_jsxs","Fragment","children","t3","className","_jsx","href","rel","target","defaultMessage","value","onMouseEnter","onMouseLeave","show"],"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React, { useState } from 'react'\n\nexport type FileMetaProps = {\n  collection?: string\n  filename: string\n  filesize: number\n  height?: number\n  id?: string\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { id, collection, filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  const [hovered, setHovered] = useState(false)\n  const openInDrawer = Boolean(id && collection)\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug: collection,\n  })\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        {openInDrawer && <DocumentDrawer />}\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n        {openInDrawer && (\n          <DocumentDrawerToggler\n            className={`${baseClass}__edit`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n          >\n            <EditIcon />\n            <Tooltip show={hovered}>Edit</Tooltip>\n          </DocumentDrawerToggler>\n        )}\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {width && height && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/FileDetails/FileMeta/index.scss

@@ -1,28 +1,31 @@
 @import '../../../scss/styles.scss';
 
-.file-meta {
-  &__url {
-    display: flex;
+@layer payload-default {
+  .file-meta {
+    &__url {
+      display: flex;
+      gap: base(0.4);
 
-    a {
-      font-weight: 600;
-      text-decoration: none;
+      a {
+        font-weight: 600;
+        text-decoration: none;
 
-      &:hover,
-      &:focus-visible {
-        text-decoration: underline;
+        &:hover,
+        &:focus-visible {
+          text-decoration: underline;
+        }
       }
     }
-  }
 
-  &__size-type,
-  &__url a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    &__size-type,
+    &__url a {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  &__edit {
-    position: relative;
+    &__edit {
+      position: relative;
+    }
   }
 }

package/dist/elements/FileDetails/StaticFileDetails/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.scss';
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
+export type StaticFileDetailsProps = {
+    collectionSlug: string;
+    customUploadActions?: React.ReactNode[];
+    doc: {
+        sizes?: FileSizes;
+    } & Data;
+    enableAdjustments?: boolean;
+    handleRemove?: () => void;
+    hasImageSizes?: boolean;
+    imageCacheTag?: string;
+    uploadConfig: SanitizedCollectionConfig['upload'];
+};
+export declare const StaticFileDetails: React.FC<StaticFileDetailsProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileDetails/StaticFileDetails/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,sBAAsB,GAAG;IACnC,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2D9D,CAAA"}

package/dist/elements/FileDetails/StaticFileDetails/index.js

@@ -0,0 +1,70 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button } from '../../Button/index.js';
+import { Thumbnail } from '../../Thumbnail/index.js';
+import { UploadActions } from '../../Upload/index.js';
+import { FileMeta } from '../FileMeta/index.js';
+import './index.scss';
+const baseClass = 'file-details';
+export const StaticFileDetails = props => {
+  const {
+    collectionSlug,
+    customUploadActions,
+    doc,
+    enableAdjustments,
+    handleRemove,
+    hasImageSizes,
+    imageCacheTag,
+    uploadConfig
+  } = props;
+  const {
+    id,
+    filename,
+    filesize,
+    height,
+    mimeType,
+    thumbnailURL,
+    url,
+    width
+  } = doc;
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: /*#__PURE__*/_jsxs("header", {
+      children: [/*#__PURE__*/_jsx(Thumbnail, {
+        // size="small"
+        className: `${baseClass}__thumbnail`,
+        doc: doc,
+        fileSrc: thumbnailURL || url,
+        imageCacheTag: imageCacheTag,
+        uploadConfig: uploadConfig
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__main-detail`,
+        children: [/*#__PURE__*/_jsx(FileMeta, {
+          collection: collectionSlug,
+          filename: filename,
+          filesize: filesize,
+          height: height,
+          id: id,
+          mimeType: mimeType,
+          url: url,
+          width: width
+        }), (enableAdjustments || customUploadActions) && /*#__PURE__*/_jsx(UploadActions, {
+          customActions: customUploadActions,
+          enableAdjustments: Boolean(enableAdjustments),
+          enablePreviewSizes: hasImageSizes && doc.filename,
+          mimeType: mimeType
+        })]
+      }), handleRemove && /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "icon-label",
+        className: `${baseClass}__remove`,
+        icon: "x",
+        iconStyle: "with-border",
+        onClick: handleRemove,
+        round: true
+      })]
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/StaticFileDetails/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","_jsx","className","_jsxs","fileSrc","collection","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          // size=\"small\"\n          className={`${baseClass}__thumbnail`}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={Boolean(enableAdjustments)}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,iBAAA,GAAuDC,KAAA;EAClE,MAAM;IACJC,cAAc;IACdC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,EAAE;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE/E,oBACEc,IAAA,CAAC;IAAIC,SAAA,EAAWpB,SAAA;cACd,aAAAqB,KAAA,CAAC;8BACCF,IAAA,CAACtB,SAAA;QACC;QACAuB,SAAA,EAAW,GAAGpB,SAAA,aAAsB;QACpCK,GAAA,EAAKA,GAAA;QACLiB,OAAA,EAASN,YAAA,IAAgBC,GAAA;QACzBR,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAEhBW,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGpB,SAAA,eAAwB;gCACzCmB,IAAA,CAACpB,QAAA;UACCwB,UAAA,EAAYpB,cAAA;UACZS,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRH,EAAA,EAAIA,EAAA;UACJI,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAqBF,mBAAkB,kBACvCe,IAAA,CAACrB,aAAA;UACC0B,aAAA,EAAepB,mBAAA;UACfE,iBAAA,EAAmBmB,OAAA,CAAQnB,iBAAA;UAC3BoB,kBAAA,EAAoBlB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIfR,YAAA,iBACCY,IAAA,CAACvB,MAAA;QACC+B,WAAA,EAAY;QACZP,SAAA,EAAW,GAAGpB,SAAA,UAAmB;QACjC4B,IAAA,EAAK;QACLC,SAAA,EAAU;QACVC,OAAA,EAASvB,YAAA;QACTwB,KAAK;;;;AAMjB","ignoreList":[]}

package/dist/elements/FileDetails/StaticFileDetails/index.scss

@@ -0,0 +1,134 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .file-details {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    @include inputShadow;
+
+    header {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+    }
+
+    &__remove {
+      position: absolute;
+      margin: 0;
+      top: $baseline;
+      right: $baseline;
+
+      & .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        background: var(--theme-input-bg);
+        @include inputShadow;
+        transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+        &:hover {
+          border: 1px solid var(--theme-elevation-400);
+        }
+      }
+    }
+
+    &__main-detail {
+      padding: base(0.8) base(1.2);
+      width: auto;
+      flex-grow: 1;
+      min-width: 280px;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: stretch;
+      gap: base(0.2);
+    }
+
+    &__toggle-more-info {
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    &__toggle-icon {
+      padding: calc(var(--base) / 4);
+    }
+
+    &__sizes {
+      margin: 0;
+      padding: base(1.5) $baseline 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+
+      li {
+        width: 50%;
+        padding: 0 base(0.5);
+        margin-bottom: $baseline;
+      }
+    }
+
+    &__size-label {
+      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-m;
+      padding: base(0.25) base(0.5);
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+
+    @include large-break {
+      &__main-detail {
+        padding: $baseline;
+      }
+
+      &__sizes {
+        display: block;
+        padding: $baseline $baseline base(0.5);
+
+        li {
+          padding: 0;
+          width: 100%;
+        }
+      }
+    }
+
+    @include mid-break {
+      header {
+        flex-wrap: wrap;
+      }
+
+      .thumbnail {
+        width: 50%;
+        order: 1;
+      }
+
+      &__remove {
+        order: 2;
+      }
+
+      &__main-detail {
+        order: 3;
+        width: 100%;
+      }
+    }
+  }
+}

package/dist/elements/FileDetails/index.d.ts

@@ -1,16 +1,32 @@
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 import React from 'react';
-import './index.scss';
-import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types';
-export type FileDetailsProps = {
-    canEdit?: boolean;
+type SharedFileDetailsProps = {
     collectionSlug: string;
-    doc: Data & {
+    customUploadActions?: React.ReactNode[];
+    doc: {
         sizes?: FileSizes;
-    };
-    handleRemove?: () => void;
+    } & Data;
+    enableAdjustments?: boolean;
     hasImageSizes?: boolean;
     imageCacheTag?: string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };
+type StaticFileDetailsProps = {
+    draggableItemProps?: never;
+    handleRemove?: () => void;
+    hasMany?: never;
+    isSortable?: never;
+    removeItem?: never;
+    rowIndex?: never;
+};
+type DraggableFileDetailsProps = {
+    handleRemove?: never;
+    hasMany: boolean;
+    isSortable?: boolean;
+    removeItem?: (index: number) => void;
+    rowIndex: number;
+};
+export type FileDetailsProps = (DraggableFileDetailsProps | StaticFileDetailsProps) & SharedFileDetailsProps;
 export declare const FileDetails: React.FC<FileDetailsProps>;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,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;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6ClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,yBAAyB,GAAG,sBAAsB,CAAC,GACjF,sBAAsB,CAAA;AAExB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}

package/dist/elements/FileDetails/index.js

@@ -1,43 +1,20 @@
-import { isImage } from 'payload/utilities';
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { UploadActions } from '../../elements/Upload/index.js';
-import { Button } from '../Button/index.js';
-import { Thumbnail } from '../Thumbnail/index.js';
-import { FileMeta } from './FileMeta/index.js';
-const baseClass = 'file-details';
-export const FileDetails = (props)=>{
-    const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
-    const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("header", null, /*#__PURE__*/ React.createElement(Thumbnail, {
-        collectionSlug: collectionSlug,
-        doc: doc,
-        fileSrc: thumbnailURL || url,
-        imageCacheTag: imageCacheTag,
-        uploadConfig: uploadConfig
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__main-detail`
-    }, /*#__PURE__*/ React.createElement(FileMeta, {
-        collection: collectionSlug,
-        filename: filename,
-        filesize: filesize,
-        height: height,
-        id: id,
-        mimeType: mimeType,
-        url: url,
-        width: width
-    }), isImage(mimeType) && mimeType !== 'image/svg+xml' && /*#__PURE__*/ React.createElement(UploadActions, {
-        canEdit: canEdit,
-        showSizePreviews: hasImageSizes && doc.filename
-    })), handleRemove && /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__remove`,
-        icon: "x",
-        iconStyle: "with-border",
-        onClick: handleRemove,
-        round: true
-    })));
+import { DraggableFileDetails } from './DraggableFileDetails/index.js';
+import { StaticFileDetails } from './StaticFileDetails/index.js';
+export const FileDetails = props => {
+  const {
+    hasMany
+  } = props;
+  if (hasMany) {
+    return /*#__PURE__*/_jsx(DraggableFileDetails, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(StaticFileDetails, {
+    ...props
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["import { isImage } from 'payload/utilities'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types'\n\nexport type FileDetailsProps = {\n  canEdit?: boolean\n  collectionSlug: string\n  doc: Data & {\n    sizes?: FileSizes\n  }\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =\n    props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL || url}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {isImage(mimeType as string) && mimeType !== 'image/svg+xml' && (\n            <UploadActions canEdit={canEdit} showSizePreviews={hasImageSizes && doc.filename} />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["isImage","React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","canEdit","collectionSlug","doc","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAG9C,MAAMC,YAAY;AAgBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAC9FP;IAEF,MAAM,EAAEQ,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGZ;IAE/E,qBACE,oBAACa;QAAIC,WAAWnB;qBACd,oBAACoB,8BACC,oBAACtB;QACCM,gBAAgBA;QAChBC,KAAKA;QACLgB,SAASN,gBAAgBC;QACzBR,eAAeA;QACfC,cAAcA;sBAEhB,oBAACS;QAAIC,WAAW,CAAC,EAAEnB,UAAU,aAAa,CAAC;qBACzC,oBAACD;QACCuB,YAAYlB;QACZO,UAAUA;QACVC,UAAUA;QACVC,QAAQA;QACRH,IAAIA;QACJI,UAAUA;QACVE,KAAKA;QACLC,OAAOA;QAGRvB,QAAQoB,aAAuBA,aAAa,iCAC3C,oBAAClB;QAAcO,SAASA;QAASoB,kBAAkBhB,iBAAiBF,IAAIM,QAAQ;SAGnFL,8BACC,oBAACT;QACC2B,aAAY;QACZL,WAAW,CAAC,EAAEnB,UAAU,QAAQ,CAAC;QACjCyB,MAAK;QACLC,WAAU;QACVC,SAASrB;QACTsB,OAAAA;;AAMZ,EAAC"}
+{"version":3,"file":"index.js","names":["React","DraggableFileDetails","StaticFileDetails","FileDetails","props","hasMany","_jsx"],"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableFileDetails } from './DraggableFileDetails/index.js'\nimport { StaticFileDetails } from './StaticFileDetails/index.js'\n\ntype SharedFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\ntype StaticFileDetailsProps = {\n  draggableItemProps?: never\n  handleRemove?: () => void\n  hasMany?: never\n  isSortable?: never\n  removeItem?: never\n  rowIndex?: never\n}\n\ntype DraggableFileDetailsProps = {\n  handleRemove?: never\n  hasMany: boolean\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n}\n\nexport type FileDetailsProps = (DraggableFileDetailsProps | StaticFileDetailsProps) &\n  SharedFileDetailsProps\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { hasMany } = props\n\n  if (hasMany) {\n    return <DraggableFileDetails {...props} />\n  }\n\n  return <StaticFileDetails {...props} />\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAkClC,OAAO,MAAMC,WAAA,GAA2CC,KAAA;EACtD,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,IAAIC,OAAA,EAAS;IACX,oBAAOC,IAAA,CAACL,oBAAA;MAAsB,GAAGG;;EACnC;EAEA,oBAAOE,IAAA,CAACJ,iBAAA;IAAmB,GAAGE;;AAChC","ignoreList":[]}

package/dist/elements/FullscreenModal/index.d.ts

@@ -0,0 +1,4 @@
+import type { Modal as ModalType } from '@faceless-ui/modal';
+import React from 'react';
+export declare function FullscreenModal(props: Parameters<typeof ModalType>[0]): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FullscreenModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FullscreenModal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,qBAYrE"}

package/dist/elements/FullscreenModal/index.js

@@ -0,0 +1,38 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '@faceless-ui/modal';
+import React from 'react';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+export function FullscreenModal(props) {
+  const $ = _c(6);
+  const currentDepth = useEditDepth();
+  let t0;
+  if ($[0] !== props.style) {
+    t0 = props.style || {};
+    $[0] = props.style;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const t1 = `calc(100 + ${currentDepth || 0} + 1)`;
+  let t2;
+  if ($[2] !== t0 || $[3] !== t1 || $[4] !== props) {
+    t2 = _jsx(Modal, {
+      ...props,
+      style: {
+        ...t0,
+        zIndex: t1
+      }
+    });
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/FullscreenModal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","Modal","React","useEditDepth","FullscreenModal","props","$","currentDepth","t0","style","t1","t2","_jsx","zIndex"],"sources":["../../../src/elements/FullscreenModal/index.tsx"],"sourcesContent":["'use client'\nimport type { Modal as ModalType } from '@faceless-ui/modal'\n\nimport { Modal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\n\nexport function FullscreenModal(props: Parameters<typeof ModalType>[0]) {\n  const currentDepth = useEditDepth()\n\n  return (\n    <Modal\n      {...props}\n      style={{\n        ...(props.style || {}),\n        zIndex: `calc(100 + ${currentDepth || 0} + 1)`,\n      }}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,KAAK,QAAQ;AACtB,OAAOC,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAE7B,OAAO,SAAAC,gBAAAC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACL,MAAAO,YAAA,GAAqBJ,YAAA;EAAA,IAAAK,EAAA;EAAA,IAAAF,CAAA,QAAAD,KAAA,CAAAI,KAAA;IAMXD,EAAA,GAAAH,KAAA,CAAAI,KAAA,MAAiB;IAAAH,CAAA,MAAAD,KAAA,CAAAI,KAAA;IAAAH,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EACb,MAAAI,EAAA,iBAAcH,YAAA,KAAgB,OAAQ;EAAA,IAAAI,EAAA;EAAA,IAAAL,CAAA,QAAAE,EAAA,IAAAF,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAD,KAAA;IAJlDM,EAAA,GAAAC,IAAA,CAAAX,KAAA;MAAA,GACMI,KAAK;MAAAI,KAAA;QAAA,GAEHD,EAAiB;QAAAK,MAAA,EACbH;MAAsC;IAAA,C;;;;;;;;SAJlDC,E","ignoreList":[]}