@payloadcms/ui 3.0.0-canary.92e4997 → 3.0.0-canary.95fcd13

package/dist/elements/FileDetails/index.js

@@ -1,43 +1,60 @@
-import { isImage } from 'payload/utilities';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } 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';
+import './index.scss';
 const baseClass = 'file-details';
 export const FileDetails = (props)=>{
-    const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } = props;
+    const { collectionSlug, customUploadActions, doc, enableAdjustments, 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
-    })));
+    return /*#__PURE__*/ _jsx("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsxs("header", {
+            children: [
+                /*#__PURE__*/ _jsx(Thumbnail, {
+                    // size="small"
+                    className: `${baseClass}__thumbnail`,
+                    collectionSlug: collectionSlug,
+                    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: 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/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,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\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'\n\nexport type FileDetailsProps = {\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 FileDetails: React.FC<FileDetailsProps> = (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          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          {(enableAdjustments || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={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"],"names":["React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","collectionSlug","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","customActions","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAiBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EACJC,cAAc,EACdC,mBAAmB,EACnBC,GAAG,EACHC,iBAAiB,EACjBC,YAAY,EACZC,aAAa,EACbC,aAAa,EACbC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGb;IAE/E,qBACE,KAACc;QAAIC,WAAWpB;kBACd,cAAA,MAACqB;;8BACC,KAACvB;oBACC,eAAe;oBACfsB,WAAW,CAAC,EAAEpB,UAAU,WAAW,CAAC;oBACpCG,gBAAgBA;oBAChBE,KAAKA;oBACLiB,SAASN,gBAAgBC;oBACzBR,eAAeA;oBACfC,cAAcA;;8BAEhB,MAACS;oBAAIC,WAAW,CAAC,EAAEpB,UAAU,aAAa,CAAC;;sCACzC,KAACD;4BACCwB,YAAYpB;4BACZS,UAAUA;4BACVC,UAAUA;4BACVC,QAAQA;4BACRH,IAAIA;4BACJI,UAAUA;4BACVE,KAAKA;4BACLC,OAAOA;;wBAGPZ,CAAAA,qBAAqBF,mBAAkB,mBACvC,KAACR;4BACC4B,eAAepB;4BACfE,mBAAmBA;4BACnBmB,oBAAoBjB,iBAAiBH,IAAIO,QAAQ;4BACjDG,UAAUA;;;;gBAIfR,8BACC,KAACV;oBACC6B,aAAY;oBACZN,WAAW,CAAC,EAAEpB,UAAU,QAAQ,CAAC;oBACjC2B,MAAK;oBACLC,WAAU;oBACVC,SAAStB;oBACTuB,KAAK;;;;;AAMjB,EAAC"}

package/dist/elements/FileDetails/index.scss

@@ -1,27 +1,46 @@
 @import '../../scss/styles.scss';
 
 .file-details {
-  background-color: var(--theme-elevation-50);
+  background: var(--theme-elevation-50);
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--style-radius-m);
+  @include inputShadow;
 
   header {
     display: flex;
-    align-items: flex-start;
-    border-bottom: 1px solid var(--theme-elevation-0);
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
   &__remove {
-    margin: $baseline $baseline $baseline 0;
+    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: $baseline base(1.5);
+    padding: base(0.8) base(1.2);
     width: auto;
     flex-grow: 1;
-    min-width: 0;
+    min-width: 280px;
+    max-width: 100%;
     display: flex;
     flex-direction: column;
-    align-self: center;
-    gap: base(0.25);
+    justify-content: center;
+    align-self: stretch;
+    gap: base(0.2);
   }
 
   &__toggle-more-info {
@@ -66,7 +85,7 @@
     cursor: pointer;
     background-color: var(--theme-elevation-150);
     border: none;
-    border-radius: $style-radius-s;
+    border-radius: $style-radius-m;
     padding: base(0.25) base(0.5);
 
     &:hover {
@@ -102,12 +121,9 @@
 
     &__remove {
       order: 2;
-      margin-left: auto;
-      margin-right: $baseline;
     }
 
     &__main-detail {
-      border-top: $style-stroke-width-m solid var(--theme-elevation-0);
       order: 3;
       width: 100%;
     }

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,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,CAsDpE,CAAA"}

package/dist/elements/GenerateConfirmation/index.js

@@ -1,15 +1,15 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, useModal } from '@faceless-ui/modal';
 import React from 'react';
-import { toast } from 'react-toastify';
+import { toast } from 'sonner';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { MinimalTemplate } from '../../templates/Minimal/index.js';
 import { Button } from '../Button/index.js';
 import { Translation } from '../Translation/index.js';
+import './index.scss';
 const baseClass = 'generate-confirmation';
 export const GenerateConfirmation = (props)=>{
-    const { Modal, useModal } = facelessUIImport;
     const { highlightField, setKey } = props;
     const { id } = useDocumentInfo();
     const { toggleModal } = useModal();
@@ -18,37 +18,56 @@ export const GenerateConfirmation = (props)=>{
     const handleGenerate = ()=>{
         setKey();
         toggleModal(modalSlug);
-        toast.success(t('authentication:newAPIKeyGenerated'), {
-            autoClose: 3000
-        });
+        toast.success(t('authentication:newAPIKeyGenerated'));
         highlightField(true);
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        onClick: ()=>{
-            toggleModal(modalSlug);
-        },
-        size: "small"
-    }, t('authentication:generateNewAPIKey')), /*#__PURE__*/ React.createElement(Modal, {
-        className: baseClass,
-        slug: modalSlug
-    }, /*#__PURE__*/ React.createElement(MinimalTemplate, {
-        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", null, children)
-        },
-        i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
-        t: t
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "secondary",
-        onClick: ()=>{
-            toggleModal(modalSlug);
-        },
-        type: "button"
-    }, t('general:cancel')), /*#__PURE__*/ React.createElement(Button, {
-        onClick: handleGenerate
-    }, t('authentication:generate')))));
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                buttonStyle: "secondary",
+                onClick: ()=>{
+                    toggleModal(modalSlug);
+                },
+                size: "small",
+                children: t('authentication:generateNewAPIKey')
+            }),
+            /*#__PURE__*/ _jsx(Modal, {
+                className: baseClass,
+                slug: modalSlug,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: `${baseClass}__template`,
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            children: t('authentication:confirmGeneration')
+                        }),
+                        /*#__PURE__*/ _jsx("p", {
+                            children: /*#__PURE__*/ _jsx(Translation, {
+                                elements: {
+                                    1: ({ children })=>/*#__PURE__*/ _jsx("strong", {
+                                            children: children
+                                        })
+                                },
+                                i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
+                                t: t
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "secondary",
+                            onClick: ()=>{
+                                toggleModal(modalSlug);
+                            },
+                            type: "button",
+                            children: t('general:cancel')
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            onClick: handleGenerate,
+                            children: t('authentication:generate')
+                        })
+                    ]
+                })
+            })
+        ]
+    });
 };
 
 //# 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 { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/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 { 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'))\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        <div 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        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","Fragment","buttonStyle","onClick","size","className","slug","div","h1","p","elements","children","strong","i18nKey","type"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ,qBAAoB;AACpD,OAAOC,WAAW,QAAO;AACzB,SAASC,KAAK,QAAQ,SAAQ;AAE9B,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,WAAW,QAAQ,0BAAyB;AACrD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAOlB,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EAAEC,cAAc,EAAEC,MAAM,EAAE,GAAGF;IAEnC,MAAM,EAAEG,EAAE,EAAE,GAAGT;IACf,MAAM,EAAEU,WAAW,EAAE,GAAGb;IACxB,MAAM,EAAEc,CAAC,EAAE,GAAGV;IAEd,MAAMW,YAAY,CAAC,sBAAsB,EAAEH,GAAG,CAAC;IAE/C,MAAMI,iBAAiB;QACrBL;QACAE,YAAYE;QACZb,MAAMe,OAAO,CAACH,EAAE;QAChBJ,eAAe;IACjB;IAEA,qBACE,MAACT,MAAMiB,QAAQ;;0BACb,KAACb;gBACCc,aAAY;gBACZC,SAAS;oBACPP,YAAYE;gBACd;gBACAM,MAAK;0BAEJP,EAAE;;0BAEL,KAACf;gBAAMuB,WAAWf;gBAAWgB,MAAMR;0BACjC,cAAA,MAACS;oBAAIF,WAAW,CAAC,EAAEf,UAAU,UAAU,CAAC;;sCACtC,KAACkB;sCAAIX,EAAE;;sCACP,KAACY;sCACC,cAAA,KAACpB;gCACCqB,UAAU;oCACR,GAAG,CAAC,EAAEC,QAAQ,EAAE,iBAAK,KAACC;sDAAQD;;gCAChC;gCACAE,SAAQ;gCACRhB,GAAGA;;;sCAIP,KAACT;4BACCc,aAAY;4BACZC,SAAS;gCACPP,YAAYE;4BACd;4BACAgB,MAAK;sCAEJjB,EAAE;;sCAEL,KAACT;4BAAOe,SAASJ;sCAAiBF,EAAE;;;;;;;AAK9C,EAAC"}

package/dist/elements/GenerateConfirmation/index.scss

@@ -4,6 +4,7 @@
   @include blur-bg;
   display: flex;
   align-items: center;
+  justify-content: center;
   height: 100%;
 
   &__template {

package/dist/elements/Gutter/index.js

@@ -1,10 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef } from 'react';
+import './index.scss';
 const baseClass = 'gutter';
 export const Gutter = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children, className, left = true, negativeLeft = false, negativeRight = false, right = true } = props;
     const shouldPadLeft = left && !negativeLeft;
     const shouldPadRight = right && !negativeRight;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: [
             shouldPadLeft && `${baseClass}--left`,
             shouldPadRight && `${baseClass}--right`,
@@ -12,8 +14,9 @@ export const Gutter = /*#__PURE__*/ forwardRef((props, ref)=>{
             negativeRight && `${baseClass}--negative-right`,
             className
         ].filter(Boolean).join(' '),
-        ref: ref
-    }, children);
+        ref: ref,
+        children: children
+    });
 });
 Gutter.displayName = 'Gutter';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["import 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  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter = forwardRef<HTMLDivElement, GutterProps>((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"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAazC,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAASF,WAAwC,CAACG,OAAOC;IACpE,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 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  right?: boolean\n}\n\nconst baseClass = 'gutter'\n\nexport const Gutter = forwardRef<HTMLDivElement, GutterProps>((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":";AAAA,OAAOA,SAASC,UAAU,QAAQ,QAAO;AAEzC,OAAO,eAAc;AAWrB,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAASF,WAAwC,CAACG,OAAOC;IACpE,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,KAACI;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;kBAEJC;;AAGP,GAAE;AAEFH,OAAOe,WAAW,GAAG"}

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

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

package/dist/elements/Hamburger/index.js

@@ -1,38 +1,36 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseMenuIcon, MenuIcon } from '@payloadcms/ui';
 import React from 'react';
-import { Chevron } from '../../icons/Chevron/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'hamburger';
 export const Hamburger = (props)=>{
     const { t } = useTranslation();
     const { closeIcon = 'x', isActive = false } = props;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrapper`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__icon`
-    }, !isActive && /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__lines`,
-        title: t('general:open')
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__top`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__middle`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__bottom`
-    })), isActive && /*#__PURE__*/ React.createElement("div", {
-        "aria-label": closeIcon === 'collapse' ? t('general:collapse') : t('general:close'),
-        className: `${baseClass}__close-icon`,
-        title: closeIcon === 'collapse' ? t('general:collapse') : t('general:close')
-    }, closeIcon === 'x' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__x-left`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__line ${baseClass}__x-right`
-    })), closeIcon === 'collapse' && /*#__PURE__*/ React.createElement(Chevron, {
-        className: `${baseClass}__collapse-chevron`,
-        direction: "left"
-    })))));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            !isActive && /*#__PURE__*/ _jsx("div", {
+                "aria-label": t('general:open'),
+                className: `${baseClass}__open-icon`,
+                title: t('general:open'),
+                children: /*#__PURE__*/ _jsx(MenuIcon, {})
+            }),
+            isActive && /*#__PURE__*/ _jsxs("div", {
+                "aria-label": closeIcon === 'collapse' ? t('general:collapse') : t('general:close'),
+                className: `${baseClass}__close-icon`,
+                title: closeIcon === 'collapse' ? t('general:collapse') : t('general:close'),
+                children: [
+                    closeIcon === 'x' && /*#__PURE__*/ _jsx(CloseMenuIcon, {}),
+                    closeIcon === 'collapse' && /*#__PURE__*/ _jsx(ChevronIcon, {
+                        direction: "left"
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  closeIcon?: 'collapse' | 'x'\n  isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrapper`}>\n        <div className={`${baseClass}__icon`}>\n          {!isActive && (\n            <div className={`${baseClass}__lines`} title={t('general:open')}>\n              <div className={`${baseClass}__line ${baseClass}__top`} />\n              <div className={`${baseClass}__line ${baseClass}__middle`} />\n              <div className={`${baseClass}__line ${baseClass}__bottom`} />\n            </div>\n          )}\n          {isActive && (\n            <div\n              aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n              className={`${baseClass}__close-icon`}\n              title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n            >\n              {closeIcon === 'x' && (\n                <React.Fragment>\n                  <div className={`${baseClass}__line ${baseClass}__x-left`} />\n                  <div className={`${baseClass}__line ${baseClass}__x-right`} />\n                </React.Fragment>\n              )}\n              {closeIcon === 'collapse' && (\n                <Chevron className={`${baseClass}__collapse-chevron`} direction=\"left\" />\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","Chevron","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","title","aria-label","Fragment","direction"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAGR,CAACC;IACJ,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,YAAY,GAAG,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,qBACE,oBAACI;QAAIC,WAAWP;qBACd,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,SAAS,CAAC;qBACrC,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;OACjC,CAACK,0BACA,oBAACC;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,CAAC;QAAEQ,OAAOL,EAAE;qBAC9C,oBAACG;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,KAAK,CAAC;sBACtD,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;sBACzD,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;SAG5DK,0BACC,oBAACC;QACCG,cAAYL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;QACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;QACrCQ,OAAOJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;OAE3DC,cAAc,qBACb,oBAACP,MAAMa,QAAQ,sBACb,oBAACJ;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;sBACzD,oBAACM;QAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,SAAS,CAAC;SAG7DI,cAAc,4BACb,oBAACN;QAAQS,WAAW,CAAC,EAAEP,UAAU,kBAAkB,CAAC;QAAEW,WAAU;;AAQhF,EAAC"}
+{"version":3,"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport { CloseMenuIcon, MenuIcon } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  closeIcon?: 'collapse' | 'x'\n  isActive?: boolean\n}> = (props) => {\n  const { t } = useTranslation()\n  const { closeIcon = 'x', isActive = false } = props\n\n  return (\n    <div className={baseClass}>\n      {!isActive && (\n        <div\n          aria-label={t('general:open')}\n          className={`${baseClass}__open-icon`}\n          title={t('general:open')}\n        >\n          <MenuIcon />\n        </div>\n      )}\n      {isActive && (\n        <div\n          aria-label={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n          className={`${baseClass}__close-icon`}\n          title={closeIcon === 'collapse' ? t('general:collapse') : t('general:close')}\n        >\n          {closeIcon === 'x' && <CloseMenuIcon />}\n          {closeIcon === 'collapse' && <ChevronIcon direction=\"left\" />}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["CloseMenuIcon","MenuIcon","React","ChevronIcon","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","aria-label","title","direction"],"mappings":"AAAA;;AACA,SAASA,aAAa,EAAEC,QAAQ,QAAQ,iBAAgB;AACxD,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,+BAA8B;AAC1D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAGR,CAACC;IACJ,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,YAAY,GAAG,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAE9C,qBACE,MAACI;QAAIC,WAAWP;;YACb,CAACK,0BACA,KAACC;gBACCE,cAAYL,EAAE;gBACdI,WAAW,CAAC,EAAEP,UAAU,WAAW,CAAC;gBACpCS,OAAON,EAAE;0BAET,cAAA,KAACP;;YAGJS,0BACC,MAACC;gBACCE,cAAYJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;gBACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;gBACrCS,OAAOL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;;oBAE3DC,cAAc,qBAAO,KAACT;oBACtBS,cAAc,4BAAc,KAACN;wBAAYY,WAAU;;;;;;AAK9D,EAAC"}

package/dist/elements/Hamburger/index.scss

@@ -4,117 +4,37 @@
   padding: 0;
   border: 0;
   cursor: pointer;
-  background-color: transparent;
+  background-color: var(--theme-bg);
   outline: none;
   position: relative;
-  @include blur-bg;
-
-  --hamburger-padding: 8px;
-  --hamburger-size: 9px;
-  --hamburger-line-gap: 3px;
-
   color: var(--theme-text);
+  box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
+  padding: base(0.1);
+  border-radius: 3px;
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  transition-property: box-shadow, background-color;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__wrapper {
-    border: 1px solid var(--theme-elevation-150);
-    padding: var(--hamburger-padding);
-    border-radius: 3px;
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    width: 100%;
-
-    &:hover {
-      border: 1px solid var(--theme-elevation-500);
-      background-color: var(--theme-elevation-100);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &__icon {
-    position: relative;
-    z-index: 1;
-    height: var(--hamburger-size);
-    width: var(--hamburger-size);
-    display: flex;
-    .stroke {
-      stroke: currentColor;
-      stroke-width: 1px;
-    }
-
-    svg {
-      height: 100%;
-    }
-  }
-
-  &__close-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-
-  &__lines {
-    display: flex;
-    flex-direction: column;
-    gap: var(--hamburger-line-gap);
-    width: 100%;
-    margin: auto;
-  }
-
-  &__line {
-    background-color: currentColor;
-    width: 100%;
-    height: 1px;
-  }
-
-  &__x-left {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(45deg);
-  }
-
-  &__x-right {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  &:hover {
+    background-color: var(--theme-elevation-100);
+    box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
   }
 
-  &__collapse-chevron {
-    left: -1px;
-    position: relative;
+  &:focus {
+    outline: none;
   }
 
-  &--active {
-    .hamburger {
-      &__x,
-      &__collapse,
-      &__collapse-label {
-        display: block;
-        opacity: 1;
-      }
-
-      &__icon {
-        display: none;
-        opacity: 0;
-      }
-    }
+  &::after {
+    z-index: -1;
   }
 
-  @include mid-break {
-    &__collapse-chevron {
-      top: 1px;
-      left: 0px;
-    }
+  &__open-icon,
+  &__close-icon {
+    width: var(--hamburger-size);
+    height: var(--hamburger-size);
   }
 }

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

@@ -1,8 +1,6 @@
-/// <reference types="react" resolution-mode="require"/>
-import type { Permissions } from 'payload/auth';
-import type { PayloadRequestWithData } from 'payload/types';
+import type { PayloadRequest, Permissions } from 'payload';
 export declare const HydrateClientUser: React.FC<{
     permissions: Permissions;
-    user: PayloadRequestWithData['user'];
+    user: PayloadRequest['user'];
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HydrateClientUser/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAM3D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAA;CACrC,CASA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HydrateClientUser/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAM1D,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;CAC7B,CASA,CAAA"}