@payloadcms/ui 3.0.0-canary.ef0a8d0 → 3.0.0-canary.f118ee4

package/dist/elements/Gutter/index.js

@@ -1,23 +1,25 @@
+'use client';
+
 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__*/ _jsx("div", {
-        className: [
-            shouldPadLeft && `${baseClass}--left`,
-            shouldPadRight && `${baseClass}--right`,
-            negativeLeft && `${baseClass}--negative-left`,
-            negativeRight && `${baseClass}--negative-right`,
-            className
-        ].filter(Boolean).join(' '),
-        ref: ref,
-        children: children
-    });
+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__*/_jsx("div", {
+    className: [shouldPadLeft && `${baseClass}--left`, shouldPadRight && `${baseClass}--right`, negativeLeft && `${baseClass}--negative-left`, negativeRight && `${baseClass}--negative-right`, className].filter(Boolean).join(' '),
+    ref: ref,
+    children: children
+  });
 });
 Gutter.displayName = 'Gutter';
-
 //# sourceMappingURL=index.js.map

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"],"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","baseClass","Gutter","props","ref","children","className","left","negativeLeft","negativeRight","right","shouldPadLeft","shouldPadRight","_jsx","filter","Boolean","join","displayName"],"sources":["../../../src/elements/Gutter/index.tsx"],"sourcesContent":["'use client'\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  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"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,UAAU,QAAQ;AAElC,OAAO;AAWP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,gBAASF,UAAA,CAAwC,CAACG,KAAA,EAAOC,GAAA;EACpE,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,IAAA,GAAO,IAAI;IACXC,YAAA,GAAe,KAAK;IACpBC,aAAA,GAAgB,KAAK;IACrBC,KAAA,GAAQ;EAAI,CACb,GAAGP,KAAA;EAEJ,MAAMQ,aAAA,GAAgBJ,IAAA,IAAQ,CAACC,YAAA;EAC/B,MAAMI,cAAA,GAAiBF,KAAA,IAAS,CAACD,aAAA;EAEjC,oBACEI,IAAA,CAAC;IACCP,SAAA,EAAW,CACTK,aAAA,IAAiB,GAAGV,SAAA,QAAiB,EACrCW,cAAA,IAAkB,GAAGX,SAAA,SAAkB,EACvCO,YAAA,IAAgB,GAAGP,SAAA,iBAA0B,EAC7CQ,aAAA,IAAiB,GAAGR,SAAA,kBAA2B,EAC/CK,SAAA,CACD,CACEQ,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRZ,GAAA,EAAKA,GAAA;cAEJC;;AAGP;AAEAH,MAAA,CAAOe,WAAW,GAAG","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import './index.scss';
 export declare const Hamburger: React.FC<{
-    closeIcon?: 'collapse' | 'x';
-    isActive?: boolean;
+    readonly closeIcon?: 'collapse' | 'x';
+    readonly isActive?: boolean;
 }>;
 //# sourceMappingURL=index.d.ts.map

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":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,UAAU,GAAG,GAAG,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CA2BA,CAAA"}

package/dist/elements/Hamburger/index.js

@@ -1,60 +1,50 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { CloseMenuIcon } from '../../icons/CloseMenu/index.js';
+import { MenuIcon } from '../../icons/Menu/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__*/ _jsx("div", {
-        className: baseClass,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: `${baseClass}__wrapper`,
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__icon`,
-                children: [
-                    !isActive && /*#__PURE__*/ _jsxs("div", {
-                        className: `${baseClass}__lines`,
-                        title: t('general:open'),
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: `${baseClass}__line ${baseClass}__top`
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: `${baseClass}__line ${baseClass}__middle`
-                            }),
-                            /*#__PURE__*/ _jsx("div", {
-                                className: `${baseClass}__line ${baseClass}__bottom`
-                            })
-                        ]
-                    }),
-                    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__*/ _jsxs(React.Fragment, {
-                                children: [
-                                    /*#__PURE__*/ _jsx("div", {
-                                        className: `${baseClass}__line ${baseClass}__x-left`
-                                    }),
-                                    /*#__PURE__*/ _jsx("div", {
-                                        className: `${baseClass}__line ${baseClass}__x-right`
-                                    })
-                                ]
-                            }),
-                            closeIcon === 'collapse' && /*#__PURE__*/ _jsx(ChevronIcon, {
-                                className: `${baseClass}__collapse-chevron`,
-                                direction: "left"
-                            })
-                        ]
-                    })
-                ]
-            })
-        })
+export const Hamburger = props => {
+  const $ = _c(4);
+  const {
+    t
+  } = useTranslation();
+  const {
+    closeIcon: t0,
+    isActive: t1
+  } = props;
+  const closeIcon = t0 === undefined ? "x" : t0;
+  const isActive = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== isActive || $[1] !== t || $[2] !== closeIcon) {
+    t2 = _jsxs("div", {
+      className: baseClass,
+      children: [!isActive && _jsx("div", {
+        "aria-label": t("general:open"),
+        className: `${baseClass}__open-icon`,
+        title: t("general:open"),
+        children: _jsx(MenuIcon, {})
+      }), isActive && _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" && _jsx(CloseMenuIcon, {}), closeIcon === "collapse" && _jsx(ChevronIcon, {
+          direction: "left"
+        })]
+      })]
     });
+    $[0] = isActive;
+    $[1] = t;
+    $[2] = closeIcon;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
 };
-
 //# 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 { 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      <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                <ChevronIcon className={`${baseClass}__collapse-chevron`} direction=\"left\" />\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["React","ChevronIcon","useTranslation","baseClass","Hamburger","props","t","closeIcon","isActive","div","className","title","aria-label","Fragment","direction"],"mappings":"AAAA;;AACA,OAAOA,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,KAACI;QAAIC,WAAWP;kBACd,cAAA,KAACM;YAAIC,WAAW,CAAC,EAAEP,UAAU,SAAS,CAAC;sBACrC,cAAA,MAACM;gBAAIC,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;;oBACjC,CAACK,0BACA,MAACC;wBAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,CAAC;wBAAEQ,OAAOL,EAAE;;0CAC9C,KAACG;gCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,KAAK,CAAC;;0CACtD,KAACM;gCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;;0CACzD,KAACM;gCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;;;;oBAG5DK,0BACC,MAACC;wBACCG,cAAYL,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;wBACjEI,WAAW,CAAC,EAAEP,UAAU,YAAY,CAAC;wBACrCQ,OAAOJ,cAAc,aAAaD,EAAE,sBAAsBA,EAAE;;4BAE3DC,cAAc,qBACb,MAACP,MAAMa,QAAQ;;kDACb,KAACJ;wCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,QAAQ,CAAC;;kDACzD,KAACM;wCAAIC,WAAW,CAAC,EAAEP,UAAU,OAAO,EAAEA,UAAU,SAAS,CAAC;;;;4BAG7DI,cAAc,4BACb,KAACN;gCAAYS,WAAW,CAAC,EAAEP,UAAU,kBAAkB,CAAC;gCAAEW,WAAU;;;;;;;;AAQpF,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CloseMenuIcon","MenuIcon","useTranslation","baseClass","Hamburger","props","$","t","closeIcon","t0","isActive","t1","undefined","t2","_jsxs","className","children","_jsx","title","direction"],"sources":["../../../src/elements/Hamburger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CloseMenuIcon } from '../../icons/CloseMenu/index.js'\nimport { MenuIcon } from '../../icons/Menu/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'hamburger'\n\nexport const Hamburger: React.FC<{\n  readonly closeIcon?: 'collapse' | 'x'\n  readonly 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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,SAAA,GAGRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU;EAAA,IAAcL,cAAA;EACd;IAAAM,SAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IAA8CN,KAAA;EAAtC,MAAAG,SAAA,GAAAC,EAAe,KAAAG,SAAA,GAAH,GAAG,GAAfH,EAAe;EAAE,MAAAC,QAAA,GAAAC,EAAgB,KAAAC,SAAA,WAAhBD,EAAgB;EAAA,IAAAE,EAAA;EAAA,IAAAP,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAC,CAAA,IAAAD,CAAA,QAAAE,SAAA;IAGvCK,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,QAAA,GACE,CAACN,QAAA,IACAO,IAAA,CAAC;QAAA,cACaV,CAAA,CAAE;QAAAQ,SAAA,EACH,GAAAZ,SAAA,aAAyB;QAAAe,KAAA,EAC7BX,CAAA,CAAE;QAAAS,QAAA,EAETC,IAAA,CAAAhB,QAAA,IAAC;MAAA,C,GAGJS,QAAA,IACCI,KAAA,CAAC;QAAA,cACaN,SAAA,KAAc,aAAaD,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAAQ,SAAA,EACtD,GAAAZ,SAAA,cAA0B;QAAAe,KAAA,EAC9BV,SAAA,KAAc,aAAaD,CAAA,CAAE,sBAAsBA,CAAA,CAAE;QAAAS,QAAA,GAE3DR,SAAA,KAAc,OAAOS,IAAA,CAAAjB,aAAA,IAAC,GACtBQ,SAAA,KAAc,cAAcS,IAAA,CAAAlB,WAAA;UAAAoB,SAAA,EAAuB;QAAA,C;;;;;;;;;;SAjB1DN,E;CAsBJ","ignoreList":[]}

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/HydrateAuthProvider/index.d.ts

@@ -0,0 +1,13 @@
+import type { Permissions } from 'payload';
+/**
+ * The Auth Provider wraps the entire app
+ * but each page has specific permissions
+ *
+ * i.e. access control on documents/fields on a document
+ */
+type Props = {
+    permissions: Permissions;
+};
+export declare function HydrateAuthProvider({ permissions }: Props): any;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HydrateAuthProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAM1C;;;;;GAKG;AAEH,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,WAAW,CAAA;CACzB,CAAA;AACD,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,EAAE,KAAK,OAQzD"}

package/dist/elements/HydrateAuthProvider/index.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from 'react';
+import { useAuth } from '../../providers/Auth/index.js';
+export function HydrateAuthProvider(t0) {
+  const $ = _c(4);
+  const {
+    permissions
+  } = t0;
+  const {
+    setPermissions
+  } = useAuth();
+  let t1;
+  let t2;
+  if ($[0] !== setPermissions || $[1] !== permissions) {
+    t1 = () => {
+      setPermissions(permissions);
+    };
+    t2 = [permissions, setPermissions];
+    $[0] = setPermissions;
+    $[1] = permissions;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  return null;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useEffect","useAuth","HydrateAuthProvider","t0","$","permissions","setPermissions","t1","t2"],"sources":["../../../src/elements/HydrateAuthProvider/index.tsx"],"sourcesContent":["'use client'\n\nimport type { Permissions } from 'payload'\n\nimport { useEffect } from 'react'\n\nimport { useAuth } from '../../providers/Auth/index.js'\n\n/**\n * The Auth Provider wraps the entire app\n * but each page has specific permissions\n *\n * i.e. access control on documents/fields on a document\n */\n\ntype Props = {\n  permissions: Permissions\n}\nexport function HydrateAuthProvider({ permissions }: Props) {\n  const { setPermissions } = useAuth()\n\n  useEffect(() => {\n    setPermissions(permissions)\n  }, [permissions, setPermissions])\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;AAIA,SAASC,SAAS,QAAQ;AAE1B,SAASC,OAAO,QAAQ;AAYxB,OAAO,SAAAC,oBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAA6B;IAAAM;EAAA,IAAAF,EAAsB;EACxD;IAAAG;EAAA,IAA2BL,OAAA;EAAA,IAAAM,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAJ,CAAA,QAAAE,cAAA,IAAAF,CAAA,QAAAC,WAAA;IAEjBE,EAAA,GAAAA,CAAA;MACRD,cAAA,CAAeD,WAAA;IAAA;IACdG,EAAA,IAACH,WAAA,EAAaC,cAAA;IAAeF,CAAA,MAAAE,cAAA;IAAAF,CAAA,MAAAC,WAAA;IAAAD,CAAA,MAAAG,EAAA;IAAAH,CAAA,MAAAI,EAAA;EAAA;IAAAD,EAAA,GAAAH,CAAA;IAAAI,EAAA,GAAAJ,CAAA;EAAA;EAFhCJ,SAAA,CAAUO,EAEV,EAAGC,EAA6B;EAAA;AAAA","ignoreList":[]}

package/dist/elements/IDLabel/index.js

@@ -1,19 +1,16 @@
 'use client';
+
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
 const baseClass = 'id-label';
-export const IDLabel = ({ id, className, prefix = 'ID:' })=>/*#__PURE__*/ _jsxs("div", {
-        className: [
-            baseClass,
-            className
-        ].filter(Boolean).join(' '),
-        title: id,
-        children: [
-            prefix,
-            "  ",
-            id
-        ]
-    });
-
+export const IDLabel = ({
+  id,
+  className,
+  prefix = 'ID:'
+}) => /*#__PURE__*/_jsxs("div", {
+  className: [baseClass, className].filter(Boolean).join(' '),
+  title: id,
+  children: [prefix, " ", id]
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport 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;;AACA,OAAOA,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,UAAyE,CAAC,EACrFC,EAAE,EACFC,SAAS,EACTC,SAAS,KAAK,EACf,iBACC,MAACC;QAAIF,WAAW;YAACH;YAAWG;SAAU,CAACG,MAAM,CAACC,SAASC,IAAI,CAAC;QAAMC,OAAOP;;YACtEE;YAAO;YAEPF;;OAEJ"}
+{"version":3,"file":"index.js","names":["React","baseClass","IDLabel","id","className","prefix","_jsxs","filter","Boolean","join","title"],"sources":["../../../src/elements/IDLabel/index.tsx"],"sourcesContent":["'use client'\nimport 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;\n    {id}\n  </div>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,OAAA,GAAyEA,CAAC;EACrFC,EAAE;EACFC,SAAS;EACTC,MAAA,GAAS;AAAK,CACf,kBACCC,KAAA,CAAC;EAAIF,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;EAAMC,KAAA,EAAOP,EAAA;aACtEE,MAAA,EAAO,KAEPF,EAAA","ignoreList":[]}

package/dist/elements/IDLabel/index.scss

@@ -1,11 +1,12 @@
 @import '../../scss/styles';
 
 .id-label {
-  font-size: base(0.75);
+  font-size: base(0.8);
+  line-height: base(1.2);
   font-weight: normal;
-  color: var(--theme-elevation-400);
+  color: var(--theme-elevation-600);
   background: var(--theme-elevation-100);
-  padding: base(0.25) base(0.5);
+  padding: base(0.2) base(0.4);
   border-radius: $style-radius-m;
   display: inline-flex;
 }

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

@@ -1,3 +1,3 @@
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
-export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fieldMap: FieldMap) => MappedField[];
+import type { ClientField } from 'payload';
+export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fields: ClientField[]) => ClientField[];
 //# sourceMappingURL=getTextFieldsToBeSearched.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AAIpG,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,YACpB,QAAQ,KACjB,WAAW,EASb,CAAA"}
+{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAM1C,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,UACtB,WAAW,EAAE,KACpB,WAAW,EASb,CAAA"}

package/dist/elements/ListControls/getTextFieldsToBeSearched.js

@@ -1,10 +1,12 @@
+'use client';
+
+import { fieldAffectsData } from 'payload/shared';
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js';
-export const getTextFieldsToBeSearched = (listSearchableFields, fieldMap)=>{
-    if (listSearchableFields) {
-        const flattenedFields = flattenFieldMap(fieldMap);
-        return flattenedFields.filter((field)=>field.isFieldAffectingData && listSearchableFields.includes(field.name));
-    }
-    return null;
+export const getTextFieldsToBeSearched = (listSearchableFields, fields) => {
+  if (listSearchableFields) {
+    const flattenedFields = flattenFieldMap(fields);
+    return flattenedFields.filter(field => fieldAffectsData(field) && listSearchableFields.includes(field.name));
+  }
+  return null;
 };
-
 //# sourceMappingURL=getTextFieldsToBeSearched.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fieldMap: FieldMap,\n): MappedField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenFieldMap(fieldMap)\n    return flattenedFields.filter(\n      (field) => field.isFieldAffectingData && listSearchableFields.includes(field.name),\n    )\n  }\n\n  return null\n}\n"],"names":["flattenFieldMap","getTextFieldsToBeSearched","listSearchableFields","fieldMap","flattenedFields","filter","field","isFieldAffectingData","includes","name"],"mappings":"AAEA,SAASA,eAAe,QAAQ,qCAAoC;AAEpE,OAAO,MAAMC,4BAA4B,CACvCC,sBACAC;IAEA,IAAID,sBAAsB;QACxB,MAAME,kBAAkBJ,gBAAgBG;QACxC,OAAOC,gBAAgBC,MAAM,CAC3B,CAACC,QAAUA,MAAMC,oBAAoB,IAAIL,qBAAqBM,QAAQ,CAACF,MAAMG,IAAI;IAErF;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"file":"getTextFieldsToBeSearched.js","names":["fieldAffectsData","flattenFieldMap","getTextFieldsToBeSearched","listSearchableFields","fields","flattenedFields","filter","field","includes","name"],"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { fieldAffectsData } from 'payload/shared'\n\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fields: ClientField[],\n): ClientField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenFieldMap(fields)\n    return flattenedFields.filter(\n      (field) => fieldAffectsData(field) && listSearchableFields.includes(field.name),\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAGA,SAASA,gBAAgB,QAAQ;AAEjC,SAASC,eAAe,QAAQ;AAEhC,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,oBAAA,EACAC,MAAA;EAEA,IAAID,oBAAA,EAAsB;IACxB,MAAME,eAAA,GAAkBJ,eAAA,CAAgBG,MAAA;IACxC,OAAOC,eAAA,CAAgBC,MAAM,CAC1BC,KAAA,IAAUP,gBAAA,CAAiBO,KAAA,KAAUJ,oBAAA,CAAqBK,QAAQ,CAACD,KAAA,CAAME,IAAI;EAElF;EAEA,OAAO;AACT","ignoreList":[]}

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

@@ -1,15 +1,14 @@
-import type { ClientCollectionConfig, Where } from 'payload';
+import type { ClientCollectionConfig, ClientField, Where } from 'payload';
 import React from 'react';
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.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;
+    readonly collectionConfig: ClientCollectionConfig;
+    readonly enableColumns?: boolean;
+    readonly enableSort?: boolean;
+    readonly fields: ClientField[];
+    readonly handleSearchChange?: (search: string) => void;
+    readonly handleSortChange?: (sort: string) => void;
+    readonly handleWhereChange?: (where: Where) => void;
 };
 /**
  * The ListControls component is used to render the controls (search, filter, where)

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":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAI5D,OAAO,KAAsC,MAAM,OAAO,CAAA;AAM1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAiBvF,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;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2IpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAuB1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}