@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/elements/Logout/index.js

@@ -4,17 +4,17 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { LogOutIcon } from '../../icons/LogOut/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { formatAdminURL } from '../../utilities/formatAdminURL.js';
 const baseClass = 'nav';
-const DefaultLogout = t0 => {
-  const $ = _c(6);
+export const Logout = t0 => {
+  const $ = _c(7);
   const {
     Link,
-    tabIndex
+    tabIndex: t1
   } = t0;
+  const tabIndex = t1 === undefined ? 0 : t1;
   const {
     t
   } = useTranslation();
@@ -22,87 +22,46 @@ const DefaultLogout = t0 => {
     config
   } = useConfig();
   const {
-    admin: t1,
-    routes: t2
+    admin: t2,
+    routes: t3
   } = config;
   const {
-    routes: t3
-  } = t1;
+    routes: t4
+  } = t2;
   const {
     logout: logoutRoute
-  } = t3;
+  } = t4;
   const {
     admin: adminRoute
-  } = t2;
+  } = t3;
   const basePath = process.env.NEXT_BASE_PATH ?? "";
   const LinkElement = Link || "a";
-  let t4;
-  if ($[0] !== t || $[1] !== adminRoute || $[2] !== logoutRoute || $[3] !== tabIndex || $[4] !== LinkElement) {
-    t4 = _jsx(LinkElement, {
+  let t5;
+  if ($[0] !== t || $[1] !== Link || $[2] !== tabIndex || $[3] !== adminRoute || $[4] !== logoutRoute || $[5] !== LinkElement) {
+    const props = {
       "aria-label": t("authentication:logOut"),
       className: `${baseClass}__log-out`,
+      prefetch: Link ? false : undefined,
+      tabIndex
+    };
+    t5 = _jsx(LinkElement, {
+      ...props,
       href: formatAdminURL({
         adminRoute,
         basePath,
         path: logoutRoute
       }),
-      tabIndex,
       children: _jsx(LogOutIcon, {})
     });
     $[0] = t;
-    $[1] = adminRoute;
-    $[2] = logoutRoute;
-    $[3] = tabIndex;
-    $[4] = LinkElement;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  return t4;
-};
-export const Logout = t0 => {
-  const $ = _c(5);
-  const {
-    Link,
-    tabIndex: t1
-  } = t0;
-  const tabIndex = t1 === undefined ? 0 : t1;
-  const {
-    config: t2
-  } = useConfig();
-  const {
-    admin: t3
-  } = t2;
-  const {
-    components: t4
-  } = t3;
-  const {
-    LogoutButton: CustomLogout
-  } = t4;
-  if (CustomLogout) {
-    let t5;
-    if ($[0] !== CustomLogout) {
-      t5 = _jsx(RenderComponent, {
-        mappedComponent: CustomLogout
-      });
-      $[0] = CustomLogout;
-      $[1] = t5;
-    } else {
-      t5 = $[1];
-    }
-    return t5;
-  }
-  let t5;
-  if ($[2] !== Link || $[3] !== tabIndex) {
-    t5 = _jsx(DefaultLogout, {
-      Link,
-      tabIndex
-    });
-    $[2] = Link;
-    $[3] = tabIndex;
-    $[4] = t5;
+    $[1] = Link;
+    $[2] = tabIndex;
+    $[3] = adminRoute;
+    $[4] = logoutRoute;
+    $[5] = LinkElement;
+    $[6] = t5;
   } else {
-    t5 = $[4];
+    t5 = $[6];
   }
   return t5;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","LogOutIcon","RenderComponent","useConfig","useTranslation","formatAdminURL","baseClass","DefaultLogout","t0","$","Link","tabIndex","t","config","admin","t1","routes","t2","t3","logout","logoutRoute","adminRoute","basePath","process","env","NEXT_BASE_PATH","LinkElement","t4","_jsx","className","href","path","children","Logout","undefined","components","LogoutButton","CustomLogout","t5","mappedComponent"],"sources":["../../../src/elements/Logout/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\n\nconst baseClass = 'nav'\n\nconst DefaultLogout: React.FC<{\n  Link: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex }) => {\n  const { t } = useTranslation()\n  const { config } = useConfig()\n\n  const {\n    admin: {\n      routes: { logout: logoutRoute },\n    },\n    routes: { admin: adminRoute },\n  } = config\n\n  const basePath = process.env.NEXT_BASE_PATH ?? ''\n  const LinkElement = Link || 'a'\n\n  return (\n    <LinkElement\n      aria-label={t('authentication:logOut')}\n      className={`${baseClass}__log-out`}\n      href={formatAdminURL({\n        adminRoute,\n        basePath,\n        path: logoutRoute,\n      })}\n      tabIndex={tabIndex}\n    >\n      <LogOutIcon />\n    </LinkElement>\n  )\n}\n\nexport const Logout: React.FC<{\n  Link?: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex = 0 }) => {\n  const {\n    config: {\n      admin: {\n        components: { LogoutButton: CustomLogout },\n      },\n    },\n  } = useConfig()\n\n  if (CustomLogout) {\n    return <RenderComponent mappedComponent={CustomLogout} />\n  }\n\n  return <DefaultLogout Link={Link} tabIndex={tabIndex} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,eAAe,QAAQ;AAChC,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,MAAMC,aAAA,GAGDC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,IAAA;IAAAC;EAAA,IAAAH,EAAkB;EACtB;IAAAI;EAAA,IAAcR,cAAA;EACd;IAAAS;EAAA,IAAmBV,SAAA;EAEnB;IAAAW,KAAA,EAAAC,EAAA;IAAAC,MAAA,EAAAC;EAAA,IAKIJ,MAAA;EAJK;IAAAG,MAAA,EAAAE;EAAA,IAAAH,EAEN;EADS;IAAAI,MAAA,EAAAC;EAAA,IAAAF,EAAuB;EAEzB;IAAAJ,KAAA,EAAAO;EAAA,IAAAJ,EAAqB;EAG/B,MAAAK,QAAA,GAAiBC,OAAA,CAAAC,GAAA,CAAAC,cAAA,IAA8B;EAC/C,MAAAC,WAAA,GAAoBhB,IAAA,IAAQ;EAAA,IAAAiB,EAAA;EAAA,IAAAlB,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAY,UAAA,IAAAZ,CAAA,QAAAW,WAAA,IAAAX,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAiB,WAAA;IAG1BC,EAAA,GAAAC,IAAA,CAACF,WAAA;MAAA,cACad,CAAA,CAAE;MAAAiB,SAAA,EACH,GAAAvB,SAAA,WAAuB;MAAAwB,IAAA,EAC5BzB,cAAA;QAAAgB,UAAA;QAAAC,QAAA;QAAAS,IAAA,EAGEX;MAAA,CACR;MAAAT,QAAA;MAAAqB,QAAA,EAGAJ,IAAA,CAAA3B,UAAA,IAAC;IAAA,C;;;;;;;;;;SAVH0B,E;CAaJ;AAEA,OAAO,MAAMM,MAAA,GAGRzB,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,IAAA;IAAAC,QAAA,EAAAI;EAAA,IAAAP,EAAsB;EAAd,MAAAG,QAAA,GAAAI,EAAY,KAAAmB,SAAA,OAAZnB,EAAY;EACxB;IAAAF,MAAA,EAAAI;EAAA,IAMId,SAAA;EALM;IAAAW,KAAA,EAAAI;EAAA,IAAAD,EAIP;EAHQ;IAAAkB,UAAA,EAAAR;EAAA,IAAAT,EAEN;EADa;IAAAkB,YAAA,EAAAC;EAAA,IAAAV,EAA8B;EAAA,IAK5CU,YAAA;IAAA,IAAAC,EAAA;IAAA,IAAA7B,CAAA,QAAA4B,YAAA;MACKC,EAAA,GAAAV,IAAA,CAAA1B,eAAA;QAAAqC,eAAA,EAAkCF;MAAA,C;;;;;;WAAlCC,E;;;;IAGFA,EAAA,GAAAV,IAAA,CAAArB,aAAA;MAAAG,IAAA;MAAAC;IAAA,C;;;;;;;SAAA2B,E;CACT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","LogOutIcon","useConfig","useTranslation","formatAdminURL","baseClass","Logout","t0","$","Link","tabIndex","t1","undefined","t","config","admin","t2","routes","t3","t4","logout","logoutRoute","adminRoute","basePath","process","env","NEXT_BASE_PATH","LinkElement","t5","props","className","prefetch","_jsx","href","path","children"],"sources":["../../../src/elements/Logout/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../utilities/formatAdminURL.js'\n\nconst baseClass = 'nav'\n\nexport const Logout: React.FC<{\n  Link?: React.ComponentType\n  tabIndex?: number\n}> = ({ Link, tabIndex = 0 }) => {\n  const { t } = useTranslation()\n  const { config } = useConfig()\n\n  const {\n    admin: {\n      routes: { logout: logoutRoute },\n    },\n    routes: { admin: adminRoute },\n  } = config\n\n  const basePath = process.env.NEXT_BASE_PATH ?? ''\n  const LinkElement = Link || 'a'\n\n  const props = {\n    'aria-label': t('authentication:logOut'),\n    className: `${baseClass}__log-out`,\n    prefetch: Link ? false : undefined,\n    tabIndex,\n  }\n\n  return (\n    <LinkElement\n      {...props}\n      href={formatAdminURL({\n        adminRoute,\n        basePath,\n        path: logoutRoute,\n      })}\n    >\n      <LogOutIcon />\n    </LinkElement>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,IAAA;IAAAC,QAAA,EAAAC;EAAA,IAAAJ,EAAsB;EAAd,MAAAG,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EACxB;IAAAE;EAAA,IAAcV,cAAA;EACd;IAAAW;EAAA,IAAmBZ,SAAA;EAEnB;IAAAa,KAAA,EAAAC,EAAA;IAAAC,MAAA,EAAAC;EAAA,IAKIJ,MAAA;EAJK;IAAAG,MAAA,EAAAE;EAAA,IAAAH,EAEN;EADS;IAAAI,MAAA,EAAAC;EAAA,IAAAF,EAAuB;EAEzB;IAAAJ,KAAA,EAAAO;EAAA,IAAAJ,EAAqB;EAG/B,MAAAK,QAAA,GAAiBC,OAAA,CAAAC,GAAA,CAAAC,cAAA,IAA8B;EAC/C,MAAAC,WAAA,GAAoBlB,IAAA,IAAQ;EAAA,IAAAmB,EAAA;EAAA,IAAApB,CAAA,QAAAK,CAAA,IAAAL,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAE,QAAA,IAAAF,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAa,WAAA,IAAAb,CAAA,QAAAmB,WAAA;IAE5B,MAAAE,KAAA;MAAA,cACgBhB,CAAA,CAAE;MAAAiB,SAAA,EACL,GAAAzB,SAAA,WAAuB;MAAA0B,QAAA,EACxBtB,IAAA,WAAAG,SAAe;MAAAF;IAAA;IAKzBkB,EAAA,GAAAI,IAAA,CAACL,WAAA;MAAA,GACKE,KAAK;MAAAI,IAAA,EACH7B,cAAA;QAAAkB,UAAA;QAAAC,QAAA;QAAAW,IAAA,EAGEb;MAAA,CACR;MAAAc,QAAA,EAEAH,IAAA,CAAA/B,UAAA,IAAC;IAAA,C;;;;;;;;;;;SARH2B,E;CAWJ","ignoreList":[]}

package/dist/elements/Nav/NavToggler/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAqCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAyCA,CAAA"}

package/dist/elements/Nav/NavToggler/index.js

@@ -53,7 +53,7 @@ export const NavToggler = props => {
       if (!largeBreak) {
         await setPreference("nav", {
           open: !navOpen
-        });
+        }, true);
       }
     };
     $[3] = setNavOpen;

package/dist/elements/Nav/NavToggler/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","$","id","children","className","tabIndex","t0","undefined","t","setPreference","navOpen","setNavOpen","breakpoints","t1","l","largeBreak","t2","t3","t4","filter","Boolean","t5","join","t6","open","t7","_jsx","onClick","type"],"sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React from 'react'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useNav } from '../context.js'\nimport './index.scss'\n\nconst baseClass = 'nav-toggler'\n\nexport const NavToggler: React.FC<{\n  children?: React.ReactNode\n  className?: string\n  id?: string\n  tabIndex?: number\n}> = (props) => {\n  const { id, children, className, tabIndex = 0 } = props\n\n  const { t } = useTranslation()\n\n  const { setPreference } = usePreferences()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    breakpoints: { l: largeBreak },\n  } = useWindowInfo()\n\n  return (\n    <button\n      aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n      className={[baseClass, navOpen && `${baseClass}--is-open`, className]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      onClick={async () => {\n        setNavOpen(!navOpen)\n\n        // only when the user explicitly toggles the nav on desktop do we want to set the preference\n        // this is because the js may open or close the nav based on the window size, routing, etc\n        if (!largeBreak) {\n          await setPreference('nav', {\n            open: !navOpen,\n          })\n        }\n      }}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,EAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,QAAA,EAAAC;EAAA,IAAkDN,KAAA;EAAjB,MAAAK,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EAE7C;IAAAE;EAAA,IAAcZ,cAAA;EAEd;IAAAa;EAAA,IAA0Bd,cAAA;EAE1B;IAAAe,OAAA;IAAAC;EAAA,IAAgCd,MAAA;EAEhC;IAAAe,WAAA,EAAAC;EAAA,IAEIpB,aAAA;EADW;IAAAqB,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAKhB,MAAAG,EAAA,MAAGN,OAAA,GAAUF,CAAA,CAAE,mBAAmBA,CAAA,CAAE,mBAAmBA,CAAA,CAAE,iBAAiB;EAC/D,MAAAS,EAAA,GAAAP,OAAA,IAAW,GAAAZ,SAAA,WAAuB;EAAA,IAAAoB,EAAA;EAAA,IAAAjB,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAG,SAAA;IAA9Cc,EAAA,IAAApB,SAAA,EAAYmB,EAAkC,EAAEb,SAAA,EAAAe,MAAA,CAAAC,OACjD;IAAAnB,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EADC,MAAAoB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAS,OAAA,IAAAT,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAQ,aAAA;IAECc,EAAA,SAAAA,CAAA;MACPZ,UAAA,EAAYD,OAAA;MAAA,KAIPK,UAAA;QAAA,MACGN,aAAA,CAAc;UAAAe,IAAA,GACXd;QAAA,CACT;MAAA;IAAA;IAEJT,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAS,OAAA;IAAAT,CAAA,MAAAc,UAAA;IAAAd,CAAA,MAAAQ,aAAA;IAAAR,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAAxB,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAoB,EAAA,IAAApB,CAAA,SAAAC,EAAA,IAAAD,CAAA,SAAAsB,EAAA,IAAAtB,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAAE,QAAA;IAhBFsB,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaV,EAA0E;MAAAZ,SAAA,EAC3EiB,EAEH;MAAAnB,EAAA;MAAAyB,OAAA,EAECJ,EAUT;MAAAlB,QAAA;MAAAuB,IAAA,EAEK;MAAAzB;IAAA,C;;;;;;;;;;;SAlBPsB,E;CAuBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","React","usePreferences","useTranslation","useNav","baseClass","NavToggler","props","$","id","children","className","tabIndex","t0","undefined","t","setPreference","navOpen","setNavOpen","breakpoints","t1","l","largeBreak","t2","t3","t4","filter","Boolean","t5","join","t6","open","t7","_jsx","onClick","type"],"sources":["../../../../src/elements/Nav/NavToggler/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport React from 'react'\n\nimport { usePreferences } from '../../../providers/Preferences/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useNav } from '../context.js'\nimport './index.scss'\n\nconst baseClass = 'nav-toggler'\n\nexport const NavToggler: React.FC<{\n  children?: React.ReactNode\n  className?: string\n  id?: string\n  tabIndex?: number\n}> = (props) => {\n  const { id, children, className, tabIndex = 0 } = props\n\n  const { t } = useTranslation()\n\n  const { setPreference } = usePreferences()\n\n  const { navOpen, setNavOpen } = useNav()\n\n  const {\n    breakpoints: { l: largeBreak },\n  } = useWindowInfo()\n\n  return (\n    <button\n      aria-label={`${navOpen ? t('general:close') : t('general:open')} ${t('general:menu')}`}\n      className={[baseClass, navOpen && `${baseClass}--is-open`, className]\n        .filter(Boolean)\n        .join(' ')}\n      id={id}\n      onClick={async () => {\n        setNavOpen(!navOpen)\n\n        // only when the user explicitly toggles the nav on desktop do we want to set the preference\n        // this is because the js may open or close the nav based on the window size, routing, etc\n        if (!largeBreak) {\n          await setPreference(\n            'nav',\n            {\n              open: !navOpen,\n            },\n            true,\n          )\n        }\n      }}\n      tabIndex={tabIndex}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAKRC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACH;IAAAU,EAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,QAAA,EAAAC;EAAA,IAAkDN,KAAA;EAAjB,MAAAK,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EAE7C;IAAAE;EAAA,IAAcZ,cAAA;EAEd;IAAAa;EAAA,IAA0Bd,cAAA;EAE1B;IAAAe,OAAA;IAAAC;EAAA,IAAgCd,MAAA;EAEhC;IAAAe,WAAA,EAAAC;EAAA,IAEIpB,aAAA;EADW;IAAAqB,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAKhB,MAAAG,EAAA,MAAGN,OAAA,GAAUF,CAAA,CAAE,mBAAmBA,CAAA,CAAE,mBAAmBA,CAAA,CAAE,iBAAiB;EAC/D,MAAAS,EAAA,GAAAP,OAAA,IAAW,GAAAZ,SAAA,WAAuB;EAAA,IAAAoB,EAAA;EAAA,IAAAjB,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAG,SAAA;IAA9Cc,EAAA,IAAApB,SAAA,EAAYmB,EAAkC,EAAEb,SAAA,EAAAe,MAAA,CAAAC,OACjD;IAAAnB,CAAA,MAAAgB,EAAA;IAAAhB,CAAA,MAAAG,SAAA;IAAAH,CAAA,MAAAiB,EAAA;EAAA;IAAAA,EAAA,GAAAjB,CAAA;EAAA;EADC,MAAAoB,EAAA,GAAAH,EACD,CAAAI,IAAA,CACF;EAAA,IAAAC,EAAA;EAAA,IAAAtB,CAAA,QAAAU,UAAA,IAAAV,CAAA,QAAAS,OAAA,IAAAT,CAAA,QAAAc,UAAA,IAAAd,CAAA,QAAAQ,aAAA;IAECc,EAAA,SAAAA,CAAA;MACPZ,UAAA,EAAYD,OAAA;MAAA,KAIPK,UAAA;QAAA,MACGN,aAAA,CACJ;UAAAe,IAAA,GAESd;QAAA,OAET;MAAA;IAAA;IAGNT,CAAA,MAAAU,UAAA;IAAAV,CAAA,MAAAS,OAAA;IAAAT,CAAA,MAAAc,UAAA;IAAAd,CAAA,MAAAQ,aAAA;IAAAR,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAAxB,CAAA,QAAAe,EAAA,IAAAf,CAAA,QAAAoB,EAAA,IAAApB,CAAA,SAAAC,EAAA,IAAAD,CAAA,SAAAsB,EAAA,IAAAtB,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAAE,QAAA;IApBFsB,EAAA,GAAAC,IAAA,CAAC;MAAA,cACaV,EAA0E;MAAAZ,SAAA,EAC3EiB,EAEH;MAAAnB,EAAA;MAAAyB,OAAA,EAECJ,EAcT;MAAAlB,QAAA;MAAAuB,IAAA,EAEK;MAAAzB;IAAA,C;;;;;;;;;;;SAtBPsB,E;CA2BJ","ignoreList":[]}

package/dist/elements/Nav/NavToggler/index.scss

@@ -1,10 +1,12 @@
 @import '../../../scss/styles.scss';
 
-.nav-toggler {
-  position: relative;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  cursor: pointer;
+@layer payload-default {
+  .nav-toggler {
+    position: relative;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+  }
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import './index.scss';
 type Props = {
     children: React.ReactNode;
+    isOpen?: boolean;
     label: string;
 };
 export declare const NavGroup: React.FC<Props>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NavGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAMlD,OAAO,cAAc,CAAA;AAOrB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiEpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/NavGroup/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,cAAc,CAAA;AAQrB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAID,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0DpC,CAAA"}

package/dist/elements/NavGroup/index.js

@@ -2,110 +2,89 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
-import { useNav } from '../Nav/context.js';
 import './index.scss';
+import { useNav } from '../Nav/context.js';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 const baseClass = 'nav-group';
+const preferencesKey = 'nav';
 export const NavGroup = t0 => {
-  const $ = _c(28);
+  const $ = _c(21);
   const {
     children,
+    isOpen: isOpenFromProps,
     label
   } = t0;
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(typeof isOpenFromProps !== "undefined" ? !isOpenFromProps : false);
   const [animate, setAnimate] = useState(false);
   const {
-    getPreference,
     setPreference
   } = usePreferences();
   const {
     navOpen
   } = useNav();
-  const preferencesKey = `collapsed-${label}-groups`;
-  let t1;
-  let t2;
-  if ($[0] !== label || $[1] !== getPreference || $[2] !== preferencesKey) {
-    t1 = () => {
-      if (label) {
-        const setCollapsedFromPreferences = async () => {
-          const preferences = (await getPreference(preferencesKey)) || [];
-          setCollapsed(preferences.indexOf(label) !== -1);
-        };
-        setCollapsedFromPreferences();
-      }
-    };
-    t2 = [getPreference, label, preferencesKey];
-    $[0] = label;
-    $[1] = getPreference;
-    $[2] = preferencesKey;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t1 = $[3];
-    t2 = $[4];
-  }
-  useEffect(t1, t2);
   if (label) {
-    let t3;
-    if ($[5] !== getPreference || $[6] !== preferencesKey || $[7] !== collapsed || $[8] !== label || $[9] !== setPreference) {
-      t3 = async () => {
+    let t1;
+    if ($[0] !== label || $[1] !== collapsed || $[2] !== setPreference) {
+      t1 = () => {
         setAnimate(true);
-        let preferences_0 = (await getPreference(preferencesKey)) || [];
-        if (collapsed) {
-          preferences_0 = preferences_0.filter(preference => label !== preference);
+        const newGroupPrefs = {};
+        if (!newGroupPrefs?.[label]) {
+          newGroupPrefs[label] = {
+            open: Boolean(collapsed)
+          };
         } else {
-          preferences_0.push(label);
+          newGroupPrefs[label].open = Boolean(collapsed);
         }
-        setPreference(preferencesKey, preferences_0);
+        setPreference(preferencesKey, {
+          groups: newGroupPrefs
+        }, true);
         setCollapsed(!collapsed);
       };
-      $[5] = getPreference;
-      $[6] = preferencesKey;
-      $[7] = collapsed;
-      $[8] = label;
-      $[9] = setPreference;
-      $[10] = t3;
+      $[0] = label;
+      $[1] = collapsed;
+      $[2] = setPreference;
+      $[3] = t1;
     } else {
-      t3 = $[10];
+      t1 = $[3];
     }
-    const toggleCollapsed = t3;
-    const t4 = `${label}`;
-    const t5 = collapsed && `${baseClass}--collapsed`;
-    let t6;
-    if ($[11] !== t4 || $[12] !== t5) {
-      t6 = [`${baseClass}`, t4, t5].filter(Boolean);
-      $[11] = t4;
-      $[12] = t5;
-      $[13] = t6;
+    const toggleCollapsed = t1;
+    const t2 = `${label}`;
+    const t3 = collapsed && `${baseClass}--collapsed`;
+    let t4;
+    if ($[4] !== t2 || $[5] !== t3) {
+      t4 = [`${baseClass}`, t2, t3].filter(Boolean);
+      $[4] = t2;
+      $[5] = t3;
+      $[6] = t4;
     } else {
-      t6 = $[13];
+      t4 = $[6];
     }
-    const t7 = t6.join(" ");
-    const t8 = `nav-group-${label}`;
-    const t9 = `${baseClass}__toggle--${collapsed ? "collapsed" : "open"}`;
-    let t10;
-    if ($[14] !== t9) {
-      t10 = [`${baseClass}__toggle`, t9].filter(Boolean);
-      $[14] = t9;
-      $[15] = t10;
+    const t5 = t4.join(" ");
+    const t6 = `nav-group-${label}`;
+    const t7 = `${baseClass}__toggle--${collapsed ? "collapsed" : "open"}`;
+    let t8;
+    if ($[7] !== t7) {
+      t8 = [`${baseClass}__toggle`, t7].filter(Boolean);
+      $[7] = t7;
+      $[8] = t8;
     } else {
-      t10 = $[15];
+      t8 = $[8];
     }
-    const t11 = t10.join(" ");
-    const t12 = !navOpen ? -1 : 0;
-    let t13;
-    if ($[16] !== label || $[17] !== collapsed || $[18] !== t11 || $[19] !== toggleCollapsed || $[20] !== t12 || $[21] !== animate || $[22] !== children || $[23] !== t7 || $[24] !== t8) {
-      t13 = _jsxs("div", {
-        className: t7,
-        id: t8,
+    const t9 = t8.join(" ");
+    const t10 = !navOpen ? -1 : 0;
+    let t11;
+    if ($[9] !== label || $[10] !== collapsed || $[11] !== t9 || $[12] !== toggleCollapsed || $[13] !== t10 || $[14] !== animate || $[15] !== children || $[16] !== t5 || $[17] !== t6) {
+      t11 = _jsxs("div", {
+        className: t5,
+        id: t6,
         children: [_jsxs("button", {
-          className: t11,
+          className: t9,
           onClick: toggleCollapsed,
-          tabIndex: t12,
+          tabIndex: t10,
           type: "button",
           children: [_jsx("div", {
             className: `${baseClass}__label`,
@@ -126,31 +105,31 @@ export const NavGroup = t0 => {
           })
         })]
       });
-      $[16] = label;
-      $[17] = collapsed;
+      $[9] = label;
+      $[10] = collapsed;
+      $[11] = t9;
+      $[12] = toggleCollapsed;
+      $[13] = t10;
+      $[14] = animate;
+      $[15] = children;
+      $[16] = t5;
+      $[17] = t6;
       $[18] = t11;
-      $[19] = toggleCollapsed;
-      $[20] = t12;
-      $[21] = animate;
-      $[22] = children;
-      $[23] = t7;
-      $[24] = t8;
-      $[25] = t13;
     } else {
-      t13 = $[25];
+      t11 = $[18];
     }
-    return t13;
+    return t11;
   }
-  let t3;
-  if ($[26] !== children) {
-    t3 = _jsx(React.Fragment, {
+  let t1;
+  if ($[19] !== children) {
+    t1 = _jsx(React.Fragment, {
       children
     });
-    $[26] = children;
-    $[27] = t3;
+    $[19] = children;
+    $[20] = t1;
   } else {
-    t3 = $[27];
+    t1 = $[20];
   }
-  return t3;
+  return t1;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","AnimateHeightImport","ChevronIcon","usePreferences","useNav","AnimateHeight","default","baseClass","NavGroup","t0","$","children","label","collapsed","setCollapsed","animate","setAnimate","getPreference","setPreference","navOpen","preferencesKey","t1","t2","setCollapsedFromPreferences","preferences","indexOf","t3","preferences_0","filter","preference","push","toggleCollapsed","t4","t5","t6","Boolean","t7","join","t8","t9","t10","t11","t12","t13","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","undefined","duration","height","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useNav } from '../Nav/context.js'\nimport './index.scss'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  label: string\n}\n\nexport const NavGroup: React.FC<Props> = ({ children, label }) => {\n  const [collapsed, setCollapsed] = useState(true)\n  const [animate, setAnimate] = useState(false)\n  const { getPreference, setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  const preferencesKey = `collapsed-${label}-groups`\n\n  useEffect(() => {\n    if (label) {\n      const setCollapsedFromPreferences = async () => {\n        const preferences = (await getPreference(preferencesKey)) || []\n        setCollapsed(preferences.indexOf(label) !== -1)\n      }\n      void setCollapsedFromPreferences()\n    }\n  }, [getPreference, label, preferencesKey])\n\n  if (label) {\n    const toggleCollapsed = async () => {\n      setAnimate(true)\n      let preferences: string[] = (await getPreference(preferencesKey)) || []\n      if (collapsed) {\n        preferences = preferences.filter((preference) => label !== preference)\n      } else {\n        preferences.push(label)\n      }\n      void setPreference(preferencesKey, preferences)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{label}</div>\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon\n              className={`${baseClass}__indicator`}\n              direction={!collapsed ? 'up' : undefined}\n            />\n          </div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","AnimateHeightImport","ChevronIcon","usePreferences","useNav","AnimateHeight","default","baseClass","preferencesKey","NavGroup","t0","$","children","isOpen","isOpenFromProps","label","collapsed","setCollapsed","animate","setAnimate","setPreference","navOpen","t1","newGroupPrefs","open","Boolean","groups","toggleCollapsed","t2","t3","t4","filter","t5","join","t6","t7","t8","t9","t10","t11","_jsxs","className","id","onClick","tabIndex","type","_jsx","direction","undefined","duration","height","Fragment"],"sources":["../../../src/elements/NavGroup/index.tsx"],"sourcesContent":["'use client'\nimport type { NavPreferences } from 'payload'\n\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport './index.scss'\nimport { useNav } from '../Nav/context.js'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nconst baseClass = 'nav-group'\n\ntype Props = {\n  children: React.ReactNode\n  isOpen?: boolean\n  label: string\n}\n\nconst preferencesKey = 'nav'\n\nexport const NavGroup: React.FC<Props> = ({ children, isOpen: isOpenFromProps, label }) => {\n  const [collapsed, setCollapsed] = useState(\n    typeof isOpenFromProps !== 'undefined' ? !isOpenFromProps : false,\n  )\n\n  const [animate, setAnimate] = useState(false)\n  const { setPreference } = usePreferences()\n  const { navOpen } = useNav()\n\n  if (label) {\n    const toggleCollapsed = () => {\n      setAnimate(true)\n      const newGroupPrefs: NavPreferences['groups'] = {}\n\n      if (!newGroupPrefs?.[label]) {\n        newGroupPrefs[label] = { open: Boolean(collapsed) }\n      } else {\n        newGroupPrefs[label].open = Boolean(collapsed)\n      }\n\n      void setPreference(preferencesKey, { groups: newGroupPrefs }, true)\n      setCollapsed(!collapsed)\n    }\n\n    return (\n      <div\n        className={[`${baseClass}`, `${label}`, collapsed && `${baseClass}--collapsed`]\n          .filter(Boolean)\n          .join(' ')}\n        id={`nav-group-${label}`}\n      >\n        <button\n          className={[\n            `${baseClass}__toggle`,\n            `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={toggleCollapsed}\n          tabIndex={!navOpen ? -1 : 0}\n          type=\"button\"\n        >\n          <div className={`${baseClass}__label`}>{label}</div>\n          <div className={`${baseClass}__indicator`}>\n            <ChevronIcon\n              className={`${baseClass}__indicator`}\n              direction={!collapsed ? 'up' : undefined}\n            />\n          </div>\n        </button>\n        <AnimateHeight duration={animate ? 200 : 0} height={collapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n      </div>\n    )\n  }\n\n  return <React.Fragment>{children}</React.Fragment>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAChC,OAAOC,mBAAA,MAAyB;AAEhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,MAAM,QAAQ;AAEvB,MAAMC,aAAA,GAAiBJ,mBAAA,CAAoBK,OAAO,IAChDL,mBAAA;AAEF,MAAMM,SAAA,GAAY;AAQlB,MAAMC,cAAA,GAAiB;AAEvB,OAAO,MAAMC,QAAA,GAA4BC,EAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EAAC;IAAAc,QAAA;IAAAC,MAAA,EAAAC,eAAA;IAAAC;EAAA,IAAAL,EAA4C;EACpF,OAAAM,SAAA,EAAAC,YAAA,IAAkCjB,QAAA,CAChC,OAAOc,eAAA,KAAoB,eAAeA,eAAA,QAAkB;EAG9D,OAAAI,OAAA,EAAAC,UAAA,IAA8BnB,QAAA,MAAS;EACvC;IAAAoB;EAAA,IAA0BjB,cAAA;EAC1B;IAAAkB;EAAA,IAAoBjB,MAAA;EAAA,IAEhBW,KAAA;IAAA,IAAAO,EAAA;IAAA,IAAAX,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAS,aAAA;MACsBE,EAAA,GAAAA,CAAA;QACtBH,UAAA,KAAW;QACX,MAAAI,aAAA;QAAiD,KAE5CA,aAAA,GAAgBR,KAAA;UACnBQ,aAAa,CAACR,KAAA;YAAAS,IAAA,EAAiBC,OAAA,CAAQT,SAAA;UAAA;QAAA;UAEvCO,aAAa,CAACR,KAAA,EAAAS,IAAA,GAAcC,OAAA,CAAQT,SAAA;QAAA;QAGjCI,aAAA,CAAAZ,cAAA;UAAAkB,MAAA,EAAwCH;QAAA,OAAiB;QAC9DN,YAAA,EAAcD,SAAA;MAAA;MAChBL,CAAA,MAAAI,KAAA;MAAAJ,CAAA,MAAAK,SAAA;MAAAL,CAAA,MAAAS,aAAA;MAAAT,CAAA,MAAAW,EAAA;IAAA;MAAAA,EAAA,GAAAX,CAAA;IAAA;IAZA,MAAAgB,eAAA,GAAwBL,EAYxB;IAIgC,MAAAM,EAAA,MAAGb,KAAA,EAAO;IAAE,MAAAc,EAAA,GAAAb,SAAA,IAAa,GAAAT,SAAA,aAAyB;IAAA,IAAAuB,EAAA;IAAA,IAAAnB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;MAAnEC,EAAA,IAAC,GAAAvB,SAAA,EAAc,EAAEqB,EAAU,EAAEC,EAAsC,EAAAE,MAAA,CAAAN,OACpE;MAAAd,CAAA,MAAAiB,EAAA;MAAAjB,CAAA,MAAAkB,EAAA;MAAAlB,CAAA,MAAAmB,EAAA;IAAA;MAAAA,EAAA,GAAAnB,CAAA;IAAA;IADC,MAAAqB,EAAA,GAAAF,EACD,CAAAG,IAAA,CACF;IACJ,MAAAC,EAAA,gBAAanB,KAAA,EAAO;IAKpB,MAAAoB,EAAA,MAAA5B,SAAA,aAAyBS,SAAA,GAAY,cAAc,QAAQ;IAAA,IAAAoB,EAAA;IAAA,IAAAzB,CAAA,QAAAwB,EAAA;MAFlDC,EAAA,IACT,GAAA7B,SAAA,UAAsB,EACtB4B,EAA2D,EAAAJ,MAAA,CAAAN,OAEnD;MAAAd,CAAA,MAAAwB,EAAA;MAAAxB,CAAA,MAAAyB,EAAA;IAAA;MAAAA,EAAA,GAAAzB,CAAA;IAAA;IAJC,MAAA0B,EAAA,GAAAD,EAID,CAAAH,IAAA,CACF;IAEE,MAAAK,GAAA,IAACjB,OAAA,SAAe;IAAA,IAAAkB,GAAA;IAAA,IAAA5B,CAAA,QAAAI,KAAA,IAAAJ,CAAA,SAAAK,SAAA,IAAAL,CAAA,SAAA0B,EAAA,IAAA1B,CAAA,SAAAgB,eAAA,IAAAhB,CAAA,SAAA2B,GAAA,IAAA3B,CAAA,SAAAO,OAAA,IAAAP,CAAA,SAAAC,QAAA,IAAAD,CAAA,SAAAqB,EAAA,IAAArB,CAAA,SAAAuB,EAAA;MAd9BK,GAAA,GAAAC,KAAA,CAAC;QAAAC,SAAA,EACYT,EAEH;QAAAU,EAAA,EACJR,EAAoB;QAAAtB,QAAA,GAExB4B,KAAA,CAAC;UAAAC,SAAA,EACYJ,EAKH;UAAAM,OAAA,EACChB,eAAA;UAAAiB,QAAA,EACCN,GAAgB;UAAAO,IAAA,EACrB;UAAAjC,QAAA,GAELkC,IAAA,CAAC;YAAAL,SAAA,EAAe,GAAAlC,SAAA,SAAqB;YAAAK,QAAA,EAAGG;UAAA,C,GACxC+B,IAAA,CAAC;YAAAL,SAAA,EAAe,GAAAlC,SAAA,aAAyB;YAAAK,QAAA,EACvCkC,IAAA,CAAA5C,WAAA;cAAAuC,SAAA,EACa,GAAAlC,SAAA,aAAyB;cAAAwC,SAAA,EACzB,CAAC/B,SAAA,GAAY,OAAAgC;YAAO,C;;YAIrCF,IAAA,CAAAzC,aAAA;UAAA4C,QAAA,EAAyB/B,OAAA,UAAgB;UAAAgC,MAAA,EAAWlC,SAAA,OAAgB;UAAAJ,QAAA,EAClEkC,IAAA,CAAC;YAAAL,SAAA,EAAe,GAAAlC,SAAA,WAAuB;YAAAK;UAAA,C;;;;;;;;;;;;;;;;WA1B3C2B,G;;;;IAgCGjB,EAAA,GAAAwB,IAAA,CAAA/C,KAAA,CAAAoD,QAAA;MAAAvC;IAAA,C;;;;;;SAAAU,E;CACT","ignoreList":[]}

package/dist/elements/NavGroup/index.scss

@@ -1,56 +1,58 @@
 @import '../../scss/styles.scss';
 
-.nav-group {
-  width: 100%;
-  margin-bottom: base(0.5);
-
-  &__toggle {
-    cursor: pointer;
-    color: var(--theme-elevation-400);
-    background: transparent;
-    padding-left: 0;
-    border: 0;
-    margin-bottom: base(0.25);
+@layer payload-default {
+  .nav-group {
     width: 100%;
-    text-align: left;
-    display: flex;
-    align-items: flex-start;
-    padding: 0;
-    gap: base(0.5);
-    justify-content: space-between;
-
-    svg {
-      flex-shrink: 0;
-      margin-top: base(-0.2);
-    }
+    margin-bottom: base(0.5);
+
+    &__toggle {
+      cursor: pointer;
+      color: var(--theme-elevation-400);
+      background: transparent;
+      padding-left: 0;
+      border: 0;
+      margin-bottom: base(0.25);
+      width: 100%;
+      text-align: left;
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+      gap: base(0.5);
+      justify-content: space-between;
+
+      svg {
+        flex-shrink: 0;
+        margin-top: base(-0.2);
+      }
 
-    &:hover,
-    &:focus-visible {
-      color: var(--theme-elevation-1000);
+      &:hover,
+      &:focus-visible {
+        color: var(--theme-elevation-1000);
 
-      .stroke {
-        stroke: var(--theme-elevation-1000);
+        .stroke {
+          stroke: var(--theme-elevation-1000);
+        }
       }
-    }
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
+      }
     }
-  }
 
-  &__indicator {
-    position: relative;
-    flex-shrink: 0;
+    &__indicator {
+      position: relative;
+      flex-shrink: 0;
 
-    svg .stroke {
-      stroke: var(--theme-elevation-200);
+      svg .stroke {
+        stroke: var(--theme-elevation-200);
+      }
     }
-  }
 
-  &--collapsed {
-    .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
+    &--collapsed {
+      .collapsible__toggle {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
   }
 }