@payloadcms/ui 3.0.0-alpha.47 → 3.0.0-alpha.49

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

@@ -1,6 +1,15 @@
 import React from 'react';
-import type { Props } from './types.js';
+export type FileMetaProps = {
+    collection?: string;
+    filename: string;
+    filesize: number;
+    height?: number;
+    id?: string;
+    mimeType: string;
+    sizes?: unknown;
+    url: string;
+    width?: number;
+};
 import './index.scss';
-declare const FileMeta: React.FC<Props>;
-export default FileMeta;
+export declare const FileMeta: React.FC<FileMetaProps>;
 //# sourceMappingURL=index.d.ts.map

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,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+C7B,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"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"}

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

@@ -1,11 +1,11 @@
 import { formatFilesize } from 'payload/utilities';
 import React, { useState } from 'react';
 import { Edit } from '../../../icons/Edit/index.js';
-import CopyToClipboard from '../../CopyToClipboard/index.js';
+import { CopyToClipboard } from '../../CopyToClipboard/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { Tooltip } from '../../Tooltip/index.js';
 const baseClass = 'file-meta';
-const FileMeta = (props)=>{
+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);
@@ -34,6 +34,5 @@ const FileMeta = (props)=>{
         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)));
 };
-export default FileMeta;
 
 //# 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\nimport type { Props } from './types.js'\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\nconst FileMeta: React.FC<Props> = (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\nexport default FileMeta\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"],"mappings":"AAAA,SAASA,cAAc,QAAQ,oBAAmB;AAClD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,IAAI,QAAQ,+BAA8B;AACnD,OAAOC,qBAAqB,iCAAgC;AAC5D,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,OAAO,QAAQ,yBAAwB;AAGhD,MAAMC,YAAY;AAElB,MAAMC,WAA4B,CAACC;IACjC,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;AAEA,eAAeP,SAAQ"}
+{"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"],"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"}

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

@@ -1,6 +1,16 @@
 import React from 'react';
-import type { Props } from './types.js';
 import './index.scss';
-declare const FileDetails: React.FC<Props>;
-export default FileDetails;
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types';
+export type FileDetailsProps = {
+    canEdit?: boolean;
+    collectionSlug: string;
+    doc: Data & {
+        sizes?: FileSizes;
+    };
+    handleRemove?: () => void;
+    hasImageSizes?: boolean;
+    imageCacheTag?: string;
+    uploadConfig: SanitizedCollectionConfig['upload'];
+};
+export declare const FileDetails: React.FC<FileDetailsProps>;
 //# 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;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4ChC,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"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,CA4ClD,CAAA"}

package/dist/elements/FileDetails/index.js

@@ -2,10 +2,10 @@ import { isImage } from 'payload/utilities';
 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';
+import { Thumbnail } from '../Thumbnail/index.js';
+import { FileMeta } from './FileMeta/index.js';
 const baseClass = 'file-details';
-const FileDetails = (props)=>{
+export const FileDetails = (props)=>{
     const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
     const { id, filename, filesize, height, mimeType, url, width } = doc;
     return /*#__PURE__*/ React.createElement("div", {
@@ -38,6 +38,5 @@ const FileDetails = (props)=>{
         round: true
     })));
 };
-export default FileDetails;
 
 //# 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 type { Props } from './types.js'\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\nconst FileDetails: React.FC<Props> = (props) => {\n  const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =\n    props\n\n  const { id, filename, filesize, height, mimeType, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\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\nexport default FileDetails\n"],"names":["isImage","React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","canEdit","collectionSlug","doc","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","url","width","div","className","header","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,WAAW,QAAO;AAIzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAOC,eAAe,wBAAuB;AAC7C,OAAOC,cAAc,sBAAqB;AAG1C,MAAMC,YAAY;AAElB,MAAMC,cAA+B,CAACC;IACpC,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,GAAG,EAAEC,KAAK,EAAE,GAAGX;IAEjE,qBACE,oBAACY;QAAIC,WAAWlB;qBACd,oBAACmB,8BACC,oBAACrB;QACCM,gBAAgBA;QAChBC,KAAKA;QACLG,eAAeA;QACfC,cAAcA;sBAEhB,oBAACQ;QAAIC,WAAW,CAAC,EAAElB,UAAU,aAAa,CAAC;qBACzC,oBAACD;QACCqB,YAAYhB;QACZO,UAAUA;QACVC,UAAUA;QACVC,QAAQA;QACRH,IAAIA;QACJI,UAAUA;QACVC,KAAKA;QACLC,OAAOA;QAGRtB,QAAQoB,aAAuBA,aAAa,iCAC3C,oBAAClB;QAAcO,SAASA;QAASkB,kBAAkBd,iBAAiBF,IAAIM,QAAQ;SAGnFL,8BACC,oBAACT;QACCyB,aAAY;QACZJ,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;QACjCuB,MAAK;QACLC,WAAU;QACVC,SAASnB;QACToB,OAAAA;;AAMZ;AAEA,eAAezB,YAAW"}
+{"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, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\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","url","width","div","className","header","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"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,GAAG,EAAEC,KAAK,EAAE,GAAGX;IAEjE,qBACE,oBAACY;QAAIC,WAAWlB;qBACd,oBAACmB,8BACC,oBAACrB;QACCM,gBAAgBA;QAChBC,KAAKA;QACLG,eAAeA;QACfC,cAAcA;sBAEhB,oBAACQ;QAAIC,WAAW,CAAC,EAAElB,UAAU,aAAa,CAAC;qBACzC,oBAACD;QACCqB,YAAYhB;QACZO,UAAUA;QACVC,UAAUA;QACVC,QAAQA;QACRH,IAAIA;QACJI,UAAUA;QACVC,KAAKA;QACLC,OAAOA;QAGRtB,QAAQoB,aAAuBA,aAAa,iCAC3C,oBAAClB;QAAcO,SAASA;QAASkB,kBAAkBd,iBAAiBF,IAAIM,QAAQ;SAGnFL,8BACC,oBAACT;QACCyB,aAAY;QACZJ,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;QACjCuB,MAAK;QACLC,WAAU;QACVC,SAASnB;QACToB,OAAAA;;AAMZ,EAAC"}

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import type { Props } from './types.js';
 import './index.scss';
-declare const GenerateConfirmation: React.FC<Props>;
-export default GenerateConfirmation;
+export type GenerateConfirmationProps = {
+    highlightField: (Boolean: any) => void;
+    setKey: () => void;
+};
+export declare const GenerateConfirmation: React.FC<GenerateConfirmationProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAOvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwDzC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,cAAc,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAA;IACjC,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAwDpE,CAAA"}

package/dist/elements/GenerateConfirmation/index.js

@@ -8,7 +8,7 @@ import { MinimalTemplate } from '../../templates/Minimal/index.js';
 import { Button } from '../Button/index.js';
 import { Translation } from '../Translation/index.js';
 const baseClass = 'generate-confirmation';
-const GenerateConfirmation = (props)=>{
+export const GenerateConfirmation = (props)=>{
     const { Modal, useModal } = facelessUIImport;
     const { highlightField, setKey } = props;
     const { id } = useDocumentInfo();
@@ -36,9 +36,7 @@ const GenerateConfirmation = (props)=>{
         className: `${baseClass}__template`
     }, /*#__PURE__*/ React.createElement("h1", null, t('authentication:confirmGeneration')), /*#__PURE__*/ React.createElement("p", null, /*#__PURE__*/ React.createElement(Translation, {
         elements: {
-            1: ({ children })=>/*#__PURE__*/ React.createElement("strong", {
-                    children: children
-                })
+            1: ({ children })=>/*#__PURE__*/ React.createElement("strong", null, children)
         },
         i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
         t: t
@@ -52,6 +50,5 @@ const GenerateConfirmation = (props)=>{
         onClick: handleGenerate
     }, t('authentication:generate')))));
 };
-export default GenerateConfirmation;
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'react-toastify'\n\nimport type { Props } from './types.js'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MinimalTemplate } from '../../templates/Minimal/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nconst GenerateConfirmation: React.FC<Props> = (props) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'), { autoClose: 3000 })\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong children={children} />,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </MinimalTemplate>\n      </Modal>\n    </React.Fragment>\n  )\n}\n\nexport default GenerateConfirmation\n"],"names":["facelessUIImport","React","toast","useDocumentInfo","useTranslation","MinimalTemplate","Button","Translation","baseClass","GenerateConfirmation","props","Modal","useModal","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","autoClose","Fragment","buttonStyle","onClick","size","className","slug","h1","p","elements","children","strong","i18nKey","type"],"mappings":"AAAA;AACA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,WAAW,QAAO;AACzB,SAASC,KAAK,QAAQ,iBAAgB;AAItC,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,WAAW,QAAQ,0BAAyB;AAGrD,MAAMC,YAAY;AAElB,MAAMC,uBAAwC,CAACC;IAC7C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGZ;IAE5B,MAAM,EAAEa,cAAc,EAAEC,MAAM,EAAE,GAAGJ;IAEnC,MAAM,EAAEK,EAAE,EAAE,GAAGZ;IACf,MAAM,EAAEa,WAAW,EAAE,GAAGJ;IACxB,MAAM,EAAEK,CAAC,EAAE,GAAGb;IAEd,MAAMc,YAAY,CAAC,sBAAsB,EAAEH,GAAG,CAAC;IAE/C,MAAMI,iBAAiB;QACrBL;QACAE,YAAYE;QACZhB,MAAMkB,OAAO,CAACH,EAAE,sCAAsC;YAAEI,WAAW;QAAK;QACxER,eAAe;IACjB;IAEA,qBACE,oBAACZ,MAAMqB,QAAQ,sBACb,oBAAChB;QACCiB,aAAY;QACZC,SAAS;YACPR,YAAYE;QACd;QACAO,MAAK;OAEJR,EAAE,oDAEL,oBAACN;QAAMe,WAAWlB;QAAWmB,MAAMT;qBACjC,oBAACb;QAAgBqB,WAAW,CAAC,EAAElB,UAAU,UAAU,CAAC;qBAClD,oBAACoB,YAAIX,EAAE,oDACP,oBAACY,yBACC,oBAACtB;QACCuB,UAAU;YACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,iBAAK,oBAACC;oBAAOD,UAAUA;;QACzC;QACAE,SAAQ;QACRhB,GAAGA;uBAIP,oBAACX;QACCiB,aAAY;QACZC,SAAS;YACPR,YAAYE;QACd;QACAgB,MAAK;OAEJjB,EAAE,kCAEL,oBAACX;QAAOkB,SAASL;OAAiBF,EAAE;AAK9C;AAEA,eAAeR,qBAAoB"}
+{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'react-toastify'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MinimalTemplate } from '../../templates/Minimal/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { Modal, useModal } = facelessUIImport\n\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'), { autoClose: 3000 })\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <MinimalTemplate className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </MinimalTemplate>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"names":["facelessUIImport","React","toast","useDocumentInfo","useTranslation","MinimalTemplate","Button","Translation","baseClass","GenerateConfirmation","props","Modal","useModal","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","autoClose","Fragment","buttonStyle","onClick","size","className","slug","h1","p","elements","children","strong","i18nKey","type"],"mappings":"AAAA;AACA,YAAYA,sBAAsB,qBAAoB;AACtD,OAAOC,WAAW,QAAO;AACzB,SAASC,KAAK,QAAQ,iBAAgB;AAEtC,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,eAAe,QAAQ,mCAAkC;AAClE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,WAAW,QAAQ,0BAAyB;AAGrD,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGZ;IAE5B,MAAM,EAAEa,cAAc,EAAEC,MAAM,EAAE,GAAGJ;IAEnC,MAAM,EAAEK,EAAE,EAAE,GAAGZ;IACf,MAAM,EAAEa,WAAW,EAAE,GAAGJ;IACxB,MAAM,EAAEK,CAAC,EAAE,GAAGb;IAEd,MAAMc,YAAY,CAAC,sBAAsB,EAAEH,GAAG,CAAC;IAE/C,MAAMI,iBAAiB;QACrBL;QACAE,YAAYE;QACZhB,MAAMkB,OAAO,CAACH,EAAE,sCAAsC;YAAEI,WAAW;QAAK;QACxER,eAAe;IACjB;IAEA,qBACE,oBAACZ,MAAMqB,QAAQ,sBACb,oBAAChB;QACCiB,aAAY;QACZC,SAAS;YACPR,YAAYE;QACd;QACAO,MAAK;OAEJR,EAAE,oDAEL,oBAACN;QAAMe,WAAWlB;QAAWmB,MAAMT;qBACjC,oBAACb;QAAgBqB,WAAW,CAAC,EAAElB,UAAU,UAAU,CAAC;qBAClD,oBAACoB,YAAIX,EAAE,oDACP,oBAACY,yBACC,oBAACtB;QACCuB,UAAU;YACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,iBAAK,oBAACC,gBAAQD;QAChC;QACAE,SAAQ;QACRhB,GAAGA;uBAIP,oBAACX;QACCiB,aAAY;QACZC,SAAS;YACPR,YAAYE;QACd;QACAgB,MAAK;OAEJjB,EAAE,kCAEL,oBAACX;QAAOkB,SAASL;OAAiBF,EAAE;AAK9C,EAAC"}

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

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
 import React from 'react';
 import './index.scss';
-type Props = {
+export type GutterProps = {
     children: React.ReactNode;
     className?: string;
     left?: boolean;
@@ -10,6 +10,5 @@ type Props = {
     ref?: Ref<HTMLDivElement>;
     right?: boolean;
 };
-export declare const Gutter: React.FC<Props>;
-export {};
+export declare const Gutter: React.FC<GutterProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,cAAc,CAAA;AAErB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6BjC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Gutter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+BxC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["import type { Ref } from 'react'\n\nimport React, { forwardRef } from 'react'\n\nimport './index.scss'\n\ntype Props = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: Ref<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {\n  const {\n    children,\n    className,\n    left = true,\n    negativeLeft = false,\n    negativeRight = false,\n    right = true,\n  } = props\n\n  const shouldPadLeft = left && !negativeLeft\n  const shouldPadRight = right && !negativeRight\n\n  return (\n    <div\n      className={[\n        shouldPadLeft && `${baseClass}--left`,\n        shouldPadRight && `${baseClass}--right`,\n        negativeLeft && `${baseClass}--negative-left`,\n        negativeRight && `${baseClass}--negative-right`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n    >\n      {children}\n    </div>\n  )\n})\n\nGutter.displayName = 'Gutter'\n"],"names":["React","forwardRef","baseClass","Gutter","props","ref","children","className","left","negativeLeft","negativeRight","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join","displayName"],"mappings":"AAEA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAczC,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAA0BF,WAAkC,CAACG,OAAOC;IAC/E,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBJ,QAAQ,CAACC;IAC/B,MAAMI,iBAAiBF,SAAS,CAACD;IAEjC,qBACE,oBAACI;QACCP,WAAW;YACTK,iBAAiB,CAAC,EAAEV,UAAU,MAAM,CAAC;YACrCW,kBAAkB,CAAC,EAAEX,UAAU,OAAO,CAAC;YACvCO,gBAAgB,CAAC,EAAEP,UAAU,eAAe,CAAC;YAC7CQ,iBAAiB,CAAC,EAAER,UAAU,gBAAgB,CAAC;YAC/CK;SACD,CACEQ,MAAM,CAACC,SACPC,IAAI,CAAC;QACRZ,KAAKA;OAEJC;AAGP,GAAE;AAEFH,OAAOe,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["import type { Ref } from 'react'\n\nimport React, { forwardRef } from 'react'\n\nimport './index.scss'\n\nexport type GutterProps = {\n  children: React.ReactNode\n  className?: string\n  left?: boolean\n  negativeLeft?: boolean\n  negativeRight?: boolean\n  ref?: Ref<HTMLDivElement>\n  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter: React.FC<GutterProps> = forwardRef<HTMLDivElement, GutterProps>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      left = true,\n      negativeLeft = false,\n      negativeRight = false,\n      right = true,\n    } = props\n\n    const shouldPadLeft = left && !negativeLeft\n    const shouldPadRight = right && !negativeRight\n\n    return (\n      <div\n        className={[\n          shouldPadLeft && `${baseClass}--left`,\n          shouldPadRight && `${baseClass}--right`,\n          negativeLeft && `${baseClass}--negative-left`,\n          negativeRight && `${baseClass}--negative-right`,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        ref={ref}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nGutter.displayName = 'Gutter'\n"],"names":["React","forwardRef","baseClass","Gutter","props","ref","children","className","left","negativeLeft","negativeRight","right","shouldPadLeft","shouldPadRight","div","filter","Boolean","join","displayName"],"mappings":"AAEA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAczC,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAAgCF,WAC3C,CAACG,OAAOC;IACN,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,IAAI,EACXC,eAAe,KAAK,EACpBC,gBAAgB,KAAK,EACrBC,QAAQ,IAAI,EACb,GAAGP;IAEJ,MAAMQ,gBAAgBJ,QAAQ,CAACC;IAC/B,MAAMI,iBAAiBF,SAAS,CAACD;IAEjC,qBACE,oBAACI;QACCP,WAAW;YACTK,iBAAiB,CAAC,EAAEV,UAAU,MAAM,CAAC;YACrCW,kBAAkB,CAAC,EAAEX,UAAU,OAAO,CAAC;YACvCO,gBAAgB,CAAC,EAAEP,UAAU,eAAe,CAAC;YAC7CQ,iBAAiB,CAAC,EAAER,UAAU,gBAAgB,CAAC;YAC/CK;SACD,CACEQ,MAAM,CAACC,SACPC,IAAI,CAAC;QACRZ,KAAKA;OAEJC;AAGP,GACD;AAEDH,OAAOe,WAAW,GAAG"}

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import './index.scss';
-declare const IDLabel: React.FC<{
+export declare const IDLabel: React.FC<{
     className?: string;
     id: string;
     prefix?: string;
 }>;
-export default IDLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAU1E,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/IDLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAUjF,CAAA"}

package/dist/elements/IDLabel/index.js

@@ -1,12 +1,11 @@
 import React from 'react';
 const baseClass = 'id-label';
-const IDLabel = ({ id, className, prefix = 'ID:' })=>/*#__PURE__*/ React.createElement("div", {
+export const IDLabel = ({ id, className, prefix = 'ID:' })=>/*#__PURE__*/ React.createElement("div", {
         className: [
             baseClass,
             className
         ].filter(Boolean).join(' '),
         title: id
     }, prefix, "  ", id);
-export default IDLabel;
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'id-label'\n\nconst IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => (\n  <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n    {prefix}\n    &nbsp;&nbsp;\n    {id}\n  </div>\n)\n\nexport default IDLabel\n"],"names":["React","baseClass","IDLabel","id","className","prefix","div","filter","Boolean","join","title"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,MAAMC,UAAyE,CAAC,EAC9EC,EAAE,EACFC,SAAS,EACTC,SAAS,KAAK,EACf,iBACC,oBAACC;QAAIF,WAAW;YAACH;YAAWG;SAAU,CAACG,MAAM,CAACC,SAASC,IAAI,CAAC;QAAMC,OAAOP;OACtEE,QAAO,MAEPF;AAIL,eAAeD,QAAO"}
+{"version":3,"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'id-label'\n\nexport const IDLabel: React.FC<{ className?: string; id: string; prefix?: string }> = ({\n  id,\n  className,\n  prefix = 'ID:',\n}) => (\n  <div className={[baseClass, className].filter(Boolean).join(' ')} title={id}>\n    {prefix}\n    &nbsp;&nbsp;\n    {id}\n  </div>\n)\n"],"names":["React","baseClass","IDLabel","id","className","prefix","div","filter","Boolean","join","title"],"mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,UAAyE,CAAC,EACrFC,EAAE,EACFC,SAAS,EACTC,SAAS,KAAK,EACf,iBACC,oBAACC;QAAIF,WAAW;YAACH;YAAWG;SAAU,CAACG,MAAM,CAACC,SAASC,IAAI,CAAC;QAAMC,OAAOP;OACtEE,QAAO,MAEPF,IAEJ"}

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

@@ -1,10 +1,22 @@
+import type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types';
 import React from 'react';
-import type { Props } from './types.js';
+import type { FieldMap } from '../../utilities/buildComponentMap.js';
 import './index.scss';
+export type ListControlsProps = {
+    collectionConfig: ClientCollectionConfig;
+    enableColumns?: boolean;
+    enableSort?: boolean;
+    fieldMap: FieldMap;
+    handleSearchChange?: (search: string) => void;
+    handleSortChange?: (sort: string) => void;
+    handleWhereChange?: (where: Where) => void;
+    textFieldsToBeSearched?: FieldAffectingData[];
+    titleField: FieldAffectingData;
+};
 /**
  * The ListControls component is used to render the controls (search, filter, where)
  * for a collection's list view. You can find those directly above the table which lists
  * the collection's documents.
  */
-export declare const ListControls: React.FC<Props>;
+export declare const ListControls: React.FC<ListControlsProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAcvC,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgIxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAKtF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAepE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAC1C,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC7C,UAAU,EAAE,kBAAkB,CAAA;CAC/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2HpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -6,16 +6,17 @@ import React, { useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 import { Chevron } from '../../icons/Chevron/index.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import ColumnSelector from '../ColumnSelector/index.js';
+import { ColumnSelector } from '../ColumnSelector/index.js';
 import { DeleteMany } from '../DeleteMany/index.js';
 import { EditMany } from '../EditMany/index.js';
-import Pill from '../Pill/index.js';
+import { Pill } from '../Pill/index.js';
 import { PublishMany } from '../PublishMany/index.js';
-import SearchFilter from '../SearchFilter/index.js';
+import { SearchFilter } from '../SearchFilter/index.js';
 import { UnpublishMany } from '../UnpublishMany/index.js';
-import WhereBuilder from '../WhereBuilder/index.js';
+import { WhereBuilder } from '../WhereBuilder/index.js';
 import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js';
 const baseClass = 'list-controls';
 /**
@@ -23,8 +24,9 @@ const baseClass = 'list-controls';
  * for a collection's list view. You can find those directly above the table which lists
  * the collection's documents.
  */ export const ListControls = (props)=>{
-    const { collectionConfig, enableColumns = true, enableSort = false, handleSearchChange, handleSortChange, handleWhereChange, modifySearchQuery = true, textFieldsToBeSearched, titleField } = props;
+    const { collectionConfig, enableColumns = true, enableSort = false, fieldMap, textFieldsToBeSearched, titleField } = props;
     const { useWindowInfo } = facelessUIImport;
+    const { handleSearchChange } = useListQuery();
     const { searchParams } = useSearchParams();
     const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
     const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
@@ -38,14 +40,14 @@ const baseClass = 'list-controls';
         fieldLabel: (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined,
         fieldName: titleField && fieldAffectsData(titleField) ? titleField.name : undefined,
         handleChange: handleSearchChange,
-        listSearchableFields: textFieldsToBeSearched,
-        modifySearchQuery: modifySearchQuery
+        listSearchableFields: textFieldsToBeSearched
     }), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__buttons`
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__buttons-wrap`
     }, !smallBreak && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(EditMany, {
-        collection: collectionConfig
+        collection: collectionConfig,
+        fieldMap: fieldMap
     }), /*#__PURE__*/ React.createElement(PublishMany, {
         collection: collectionConfig
     }), /*#__PURE__*/ React.createElement(UnpublishMany, {
@@ -85,9 +87,7 @@ const baseClass = 'list-controls';
         id: `${baseClass}-where`
     }, /*#__PURE__*/ React.createElement(WhereBuilder, {
         collectionPluralLabel: collectionConfig?.labels?.plural,
-        collectionSlug: collectionConfig.slug,
-        handleChange: handleWhereChange,
-        modifySearchQuery: modifySearchQuery
+        collectionSlug: collectionConfig.slug
     })), enableSort && /*#__PURE__*/ React.createElement(AnimateHeight, {
         className: `${baseClass}__sort`,
         height: visibleDrawer === 'sort' ? 'auto' : 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldAffectsData } from 'payload/types'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { Props } from './types.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport ColumnSelector from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport Pill from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport SearchFilter from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport WhereBuilder from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<Props> = (props) => {\n  const {\n    collectionConfig,\n    enableColumns = true,\n    enableSort = false,\n    handleSearchChange,\n    handleSortChange,\n    handleWhereChange,\n    modifySearchQuery = true,\n    textFieldsToBeSearched,\n    titleField,\n  } = props\n\n  const { useWindowInfo } = facelessUIImport\n\n  const { searchParams } = useSearchParams()\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined\n          }\n          fieldName={titleField && fieldAffectsData(titleField) ? titleField.name : undefined}\n          handleChange={handleSearchChange}\n          listSearchableFields={textFieldsToBeSearched}\n          modifySearchQuery={modifySearchQuery}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          handleChange={handleWhereChange}\n          modifySearchQuery={modifySearchQuery}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","fieldAffectsData","React","useState","AnimateHeightImport","AnimateHeight","default","Chevron","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","handleSearchChange","handleSortChange","handleWhereChange","modifySearchQuery","textFieldsToBeSearched","titleField","useWindowInfo","searchParams","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","i18n","t","breakpoints","s","smallBreak","div","className","fieldLabel","label","name","fieldName","handleChange","listSearchableFields","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldAffectsData } from 'payload/types'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n  textFieldsToBeSearched?: FieldAffectingData[]\n  titleField: FieldAffectingData\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    collectionConfig,\n    enableColumns = true,\n    enableSort = false,\n    fieldMap,\n    textFieldsToBeSearched,\n    titleField,\n  } = props\n\n  const { useWindowInfo } = facelessUIImport\n  const { handleSearchChange } = useListQuery()\n\n  const { searchParams } = useSearchParams()\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined\n          }\n          fieldName={titleField && fieldAffectsData(titleField) ? titleField.name : undefined}\n          handleChange={handleSearchChange}\n          listSearchableFields={textFieldsToBeSearched}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","fieldAffectsData","React","useState","AnimateHeightImport","AnimateHeight","default","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","textFieldsToBeSearched","titleField","useWindowInfo","handleSearchChange","searchParams","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","i18n","t","breakpoints","s","smallBreak","div","className","fieldLabel","label","name","fieldName","handleChange","listSearchableFields","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"mappings":"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"}

package/dist/elements/ListDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAoCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+QvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAqCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqRvD,CAAA"}

package/dist/elements/ListDrawer/DrawerContent.js

@@ -2,22 +2,23 @@
 import * as facelessUIImport from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import Label from '../../forms/Label/index.js';
+import { FieldLabel } from '../../forms/FieldLabel/index.js';
 import usePayloadAPI from '../../hooks/usePayloadAPI.js';
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { X } from '../../icons/X/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
-import { useComponentMap } from '../../providers/ComponentMapProvider/index.js';
+import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { ListInfoProvider } from '../../providers/ListInfo/index.js';
+import { ListQueryProvider } from '../../providers/ListQuery/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { useDocumentDrawer } from '../DocumentDrawer/index.js';
 import { LoadingOverlay } from '../Loading/index.js';
-import Pill from '../Pill/index.js';
-import ReactSelect from '../ReactSelect/index.js';
+import { Pill } from '../Pill/index.js';
+import { ReactSelect } from '../ReactSelect/index.js';
 import { TableColumnsProvider } from '../TableColumns/index.js';
-import ViewDescription from '../ViewDescription/index.js';
+import { ViewDescription } from '../ViewDescription/index.js';
 import { baseClass } from './index.js';
 const hoistQueryParamsToAnd = (where, queryParams)=>{
     if ('and' in where) {
@@ -43,7 +44,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
     const { useModal } = facelessUIImport;
     const { i18n, t } = useTranslation();
     const { permissions } = useAuth();
-    const { setPreference } = usePreferences();
+    const { getPreference, setPreference } = usePreferences();
     const { closeModal, isModalOpen } = useModal();
     const [limit, setLimit] = useState();
     const [sort, setSort] = useState(null);
@@ -199,6 +200,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
         }, !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader), hasCreatePermission && /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
             className: `${baseClass}__create-new-button`
         }, /*#__PURE__*/ React.createElement(Pill, null, t('general:createNew')))), /*#__PURE__*/ React.createElement("button", {
+            "aria-label": t('general:close'),
             className: `${baseClass}__header-close`,
             onClick: ()=>{
                 closeModal(drawerSlug);
@@ -210,7 +212,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
             description: selectedCollectionConfig.admin.description
         })), moreThanOneAvailableCollection && /*#__PURE__*/ React.createElement("div", {
             className: `${baseClass}__select-collection-wrap`
-        }, /*#__PURE__*/ React.createElement(Label, {
+        }, /*#__PURE__*/ React.createElement(FieldLabel, {
             label: t('upload:selectCollectionToBrowse')
         }), /*#__PURE__*/ React.createElement(ReactSelect, {
             className: `${baseClass}__select-collection`,
@@ -221,20 +223,22 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
                 })),
             value: selectedOption
         }))),
+        collectionConfig: selectedCollectionConfig,
         collectionSlug: selectedCollectionConfig.slug,
+        hasCreatePermission: hasCreatePermission,
+        newDocumentURL: null,
+        titleField: titleField
+    }, /*#__PURE__*/ React.createElement(ListQueryProvider, {
         data: data,
+        defaultLimit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
+        defaultSort: sort,
         handlePageChange: setPage,
         handlePerPageChange: setLimit,
         handleSearchChange: setSearch,
         handleSortChange: setSort,
         handleWhereChange: setWhere,
-        hasCreatePermission: hasCreatePermission,
-        limit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
         modifySearchParams: false,
-        newDocumentURL: null,
-        setLimit: setLimit,
-        setSort: setSort,
-        titleField: titleField
+        preferenceKey: preferenceKey
     }, /*#__PURE__*/ React.createElement(TableColumnsProvider, {
         cellProps: [
             {
@@ -251,10 +255,10 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
             }
         ],
         collectionSlug: selectedCollectionConfig.slug,
-        listPreferences: {}
+        preferenceKey: preferenceKey
     }, List, /*#__PURE__*/ React.createElement(DocumentDrawer, {
         onSave: onCreateNew
-    })));
+    }))));
 };
 
 //# sourceMappingURL=DrawerContent.js.map