@payloadcms/ui 4.0.0-internal.5d5a2b2 → 4.0.0-internal.5e065b3

package/dist/elements/Locked/index.js

@@ -10,7 +10,7 @@ import { Tooltip } from '../Tooltip/index.js';
 import './index.css';
 const baseClass = 'locked';
 export const Locked = t0 => {
-  const $ = _c(8);
+  const $ = _c(10);
   const {
     className,
     user
@@ -20,6 +20,7 @@ export const Locked = t0 => {
     t
   } = useTranslation();
   const userToUse = isClientUserObject(user) ? user.email ?? user.id : t("general:anotherUser");
+  const tooltipLabel = `${userToUse} ${t("general:isEditing")}`;
   let t1;
   if ($[0] !== className) {
     t1 = [baseClass, className].filter(Boolean);
@@ -32,39 +33,57 @@ export const Locked = t0 => {
   let t3;
   let t4;
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => setHovered(true);
-    t4 = () => setHovered(false);
+    t3 = () => setHovered(false);
+    t4 = () => setHovered(true);
     $[2] = t3;
     $[3] = t4;
   } else {
     t3 = $[2];
     t4 = $[3];
   }
-  const t5 = `${userToUse} ${t("general:isEditing")}`;
+  let t5;
   let t6;
-  if ($[4] !== hovered || $[5] !== t2 || $[6] !== t5) {
-    t6 = _jsxs("div", {
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => setHovered(true);
+    t6 = () => setHovered(false);
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t5 = $[4];
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== hovered || $[7] !== t2 || $[8] !== tooltipLabel) {
+    t7 = _jsxs("div", {
+      "aria-label": tooltipLabel,
       className: t2,
-      onMouseEnter: t3,
-      onMouseLeave: t4,
+      onBlur: t3,
+      onFocus: t4,
+      onKeyDown: _temp,
+      onMouseEnter: t5,
+      onMouseLeave: t6,
       role: "button",
       tabIndex: 0,
-      children: [_jsx(Tooltip, {
-        alignCaret: "left",
+      children: [_jsx(LockIcon, {}), _jsx(Tooltip, {
+        alignCaret: "center",
         className: `${baseClass}__tooltip`,
         position: "bottom",
         show: hovered,
-        staticPositioning: true,
-        children: t5
-      }), _jsx(LockIcon, {})]
+        children: tooltipLabel
+      })]
     });
-    $[4] = hovered;
-    $[5] = t2;
-    $[6] = t5;
-    $[7] = t6;
+    $[6] = hovered;
+    $[7] = t2;
+    $[8] = tooltipLabel;
+    $[9] = t7;
   } else {
-    t6 = $[7];
+    t7 = $[9];
   }
-  return t6;
+  return t7;
 };
+function _temp(e) {
+  if (e.key === " ") {
+    e.preventDefault();
+  }
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","LockIcon","useTranslation","isClientUserObject","Tooltip","baseClass","Locked","t0","$","className","user","hovered","setHovered","t","userToUse","email","id","t1","filter","Boolean","t2","join","t3","t4","Symbol","for","t5","t6","_jsxs","onMouseEnter","onMouseLeave","role","tabIndex","children","_jsx","alignCaret","position","show","staticPositioning"],"sources":["../../../src/elements/Locked/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientUser } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isClientUserObject } from '../../utilities/isClientUserObject.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'locked'\n\nexport const Locked: React.FC<{\n  className?: string\n  user: ClientUser\n}> = ({ className, user }) => {\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  const userToUse = isClientUserObject(user) ? (user.email ?? user.id) : t('general:anotherUser')\n\n  return (\n    <div\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <Tooltip\n        alignCaret=\"left\"\n        className={`${baseClass}__tooltip`}\n        position=\"bottom\"\n        show={hovered}\n        staticPositioning\n      >{`${userToUse} ${t('general:isEditing')}`}</Tooltip>\n      <LockIcon />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,SAAA;IAAAC;EAAA,IAAAH,EAAmB;EACvB,OAAAI,OAAA,EAAAC,UAAA,IAA8BZ,QAAA,MAAS;EACvC;IAAAa;EAAA,IAAcX,cAAA;EAEd,MAAAY,SAAA,GAAkBX,kBAAA,CAAmBO,IAAA,IAASA,IAAA,CAAAK,KAAA,IAAcL,IAAA,CAAAM,EAAO,GAAIH,CAAA,CAAE;EAAA,IAAAI,EAAA;EAAA,IAAAT,CAAA,QAAAC,SAAA;IAI1DQ,EAAA,IAAAZ,SAAA,EAAYI,SAAA,EAAAS,MAAA,CAAAC,OAAkB;IAAAX,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAS,EAAA;EAAA;IAAAA,EAAA,GAAAT,CAAA;EAAA;EAA9B,MAAAY,EAAA,GAAAH,EAA8B,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAgB,MAAA,CAAAC,GAAA;IACzCH,EAAA,GAAAA,CAAA,KAAMV,UAAA,KAAW;IACjBW,EAAA,GAAAA,CAAA,KAAMX,UAAA,MAAW;IAAAJ,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAD,EAAA,GAAAd,CAAA;IAAAe,EAAA,GAAAf,CAAA;EAAA;EAU7B,MAAAkB,EAAA,MAAGZ,SAAA,IAAaD,CAAA,CAAE,sBAAsB;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAkB,EAAA;IAb5CC,EAAA,GAAAC,KAAA,CAAC;MAAAnB,SAAA,EACYW,EAA4C;MAAAS,YAAA,EACzCP,EAAiB;MAAAQ,YAAA,EACjBP,EAAiB;MAAAQ,IAAA,EAC1B;MAAAC,QAAA;MAAAC,QAAA,GAGLC,IAAA,CAAA9B,OAAA;QAAA+B,UAAA,EACa;QAAA1B,SAAA,EACA,GAAAJ,SAAA,WAAuB;QAAA+B,QAAA,EACzB;QAAAC,IAAA,EACH1B,OAAA;QAAA2B,iBAAA;QAAAL,QAAA,EAENP;MAAwC,C,GAC1CQ,IAAA,CAAAjC,QAAA,IAAC;IAAA,C;;;;;;;;SAdH0B,E;CAiBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","LockIcon","useTranslation","isClientUserObject","Tooltip","baseClass","Locked","t0","$","className","user","hovered","setHovered","t","userToUse","email","id","tooltipLabel","t1","filter","Boolean","t2","join","t3","t4","Symbol","for","t5","t6","t7","_jsxs","onBlur","onFocus","onKeyDown","_temp","onMouseEnter","onMouseLeave","role","tabIndex","children","_jsx","alignCaret","position","show","e","key","preventDefault"],"sources":["../../../src/elements/Locked/index.tsx"],"sourcesContent":["'use client'\nimport type { User } from 'payload'\n\nimport React, { useState } from 'react'\n\nimport { LockIcon } from '../../icons/Lock/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { isClientUserObject } from '../../utilities/isClientUserObject.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.css'\n\nconst baseClass = 'locked'\n\nexport const Locked: React.FC<{\n  className?: string\n  user: User\n}> = ({ className, user }) => {\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  const userToUse = isClientUserObject(user) ? (user.email ?? user.id) : t('general:anotherUser')\n  const tooltipLabel = `${userToUse} ${t('general:isEditing')}`\n\n  return (\n    <div\n      aria-label={tooltipLabel}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onBlur={() => setHovered(false)}\n      onFocus={() => setHovered(true)}\n      onKeyDown={(e) => {\n        if (e.key === ' ') {\n          e.preventDefault() // prevent page scroll when focused\n        }\n      }}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <LockIcon />\n      <Tooltip\n        alignCaret=\"center\"\n        className={`${baseClass}__tooltip`}\n        position=\"bottom\"\n        show={hovered}\n      >\n        {tooltipLabel}\n      </Tooltip>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,SAAA;IAAAC;EAAA,IAAAH,EAAmB;EACvB,OAAAI,OAAA,EAAAC,UAAA,IAA8BZ,QAAA,MAAS;EACvC;IAAAa;EAAA,IAAcX,cAAA;EAEd,MAAAY,SAAA,GAAkBX,kBAAA,CAAmBO,IAAA,IAASA,IAAA,CAAAK,KAAA,IAAcL,IAAA,CAAAM,EAAO,GAAIH,CAAA,CAAE;EACzE,MAAAI,YAAA,GAAqB,GAAGH,SAAA,IAAaD,CAAA,CAAE,sBAAsB;EAAA,IAAAK,EAAA;EAAA,IAAAV,CAAA,QAAAC,SAAA;IAK9CS,EAAA,IAAAb,SAAA,EAAYI,SAAA,EAAAU,MAAA,CAAAC,OAAkB;IAAAZ,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA9B,MAAAa,EAAA,GAAAH,EAA8B,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAiB,MAAA,CAAAC,GAAA;IAC/CH,EAAA,GAAAA,CAAA,KAAMX,UAAA,MAAW;IAChBY,EAAA,GAAAA,CAAA,KAAMZ,UAAA,KAAW;IAAAJ,CAAA,MAAAe,EAAA;IAAAf,CAAA,MAAAgB,EAAA;EAAA;IAAAD,EAAA,GAAAf,CAAA;IAAAgB,EAAA,GAAAhB,CAAA;EAAA;EAAA,IAAAmB,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAiB,MAAA,CAAAC,GAAA;IAMZC,EAAA,GAAAA,CAAA,KAAMf,UAAA,KAAW;IACjBgB,EAAA,GAAAA,CAAA,KAAMhB,UAAA,MAAW;IAAAJ,CAAA,MAAAmB,EAAA;IAAAnB,CAAA,MAAAoB,EAAA;EAAA;IAAAD,EAAA,GAAAnB,CAAA;IAAAoB,EAAA,GAAApB,CAAA;EAAA;EAAA,IAAAqB,EAAA;EAAA,IAAArB,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,YAAA;IAXjCY,EAAA,GAAAC,KAAA,CAAC;MAAA,cACab,YAAA;MAAAR,SAAA,EACDY,EAA4C;MAAAU,MAAA,EAC/CR,EAAiB;MAAAS,OAAA,EAChBR,EAAiB;MAAAS,SAAA,EAAAC,KAAA;MAAAC,YAAA,EAMZR,EAAiB;MAAAS,YAAA,EACjBR,EAAiB;MAAAS,IAAA,EAC1B;MAAAC,QAAA;MAAAC,QAAA,GAGLC,IAAA,CAAAvC,QAAA,IAAC,GACDuC,IAAA,CAAApC,OAAA;QAAAqC,UAAA,EACa;QAAAhC,SAAA,EACA,GAAAJ,SAAA,WAAuB;QAAAqC,QAAA,EACzB;QAAAC,IAAA,EACHhC,OAAA;QAAA4B,QAAA,EAELtB;MAAA,C;;;;;;;;;SAtBLY,E;CA0BJ;AAlCK,SAAAK,MAAAU,CAAA;EAAA,IAcOA,CAAA,CAAAC,GAAA,KAAU;IACZD,CAAA,CAAAE,cAAA,CAAgB;EAAA;AAAA","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../Popup/PopupDivider/index.css';
+export declare const MenuSeparator: React.FC;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/MenuSeparator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,iCAAiC,CAAA;AAIxC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAEjC,CAAA"}

package/dist/elements/MenuSeparator/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import '../Popup/PopupDivider/index.css';
+const baseClass = 'popup-divider';
+export const MenuSeparator = () => {
+  return /*#__PURE__*/_jsx("hr", {
+    className: baseClass
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","MenuSeparator","_jsx","className"],"sources":["../../../src/elements/MenuSeparator/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport '../Popup/PopupDivider/index.css'\n\nconst baseClass = 'popup-divider'\n\nexport const MenuSeparator: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA0BA,CAAA;EACrC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}

package/dist/elements/MiniCarousel/index.css

@@ -0,0 +1,96 @@
+@layer payload-default {
+  .mini-carousel {
+    --carousel-item-width: 48px;
+    --carousel-item-height: 48px;
+    --carousel-divider-height: 48px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacer-3);
+    padding: var(--spacer-2-5);
+    width: 100%;
+    height: auto;
+    flex-shrink: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    background: var(--color-bg-secondary);
+    border-top: var(--stroke-width-small) solid var(--color-border);
+    /* Stacked layout: no scroll-driven growth, fill via stretch instead. */
+    align-self: stretch;
+    animation: none;
+  }
+
+  @keyframes mini-carousel-fill-scrolled-chrome {
+    to {
+      height: calc(100% + var(--app-header-height) + var(--doc-header-height));
+    }
+  }
+
+  .mini-carousel__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1/1;
+    flex-shrink: 0;
+    padding: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    border: var(--stroke-width-small) solid var(--color-border);
+    background: var(--color-bg-secondary);
+    cursor: pointer;
+    overflow: hidden;
+    width: var(--carousel-item-width);
+    height: var(--carousel-item-height);
+  }
+
+  .mini-carousel__item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .mini-carousel__item--active {
+    border-color: var(--color-border-selected);
+  }
+
+  .mini-carousel__item:hover:not(.mini-carousel__item--active) {
+    border-color: var(--color-border-hover);
+  }
+
+  .mini-carousel__divider {
+    width: var(--stroke-width-small);
+    height: var(--carousel-divider-height);
+    margin: 0 var(--spacer-2);
+    background: var(--color-border);
+    flex-shrink: 0;
+  }
+
+  @container edit-main (min-width: 768px) {
+    .mini-carousel {
+      flex-direction: column;
+      align-items: stretch;
+      width: auto;
+      overflow-x: visible;
+      overflow-y: auto;
+      border-top: none;
+      border-right: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    .mini-carousel__divider {
+      width: 100%;
+      height: var(--stroke-width-small);
+      margin: 0;
+    }
+  }
+
+  @container edit-main (min-width: 1024px) {
+    .mini-carousel {
+      height: 100%;
+      /* Honor the scroll-driven height below instead of stretching to the flex line. */
+      align-self: flex-start;
+      /* Scroll-driven: grow to fill the gap as the header scrolls away. Falls back to static height. */
+      animation: mini-carousel-fill-scrolled-chrome linear both;
+      animation-timeline: scroll(root block);
+      animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import './index.css';
+export type MiniCarouselProps = {
+    doc: {
+        url?: string;
+        variants?: FileSizes;
+    } & Data;
+    imageCacheTag?: false | string;
+    onSelect: (sizeKey: null | string) => void;
+    selectedSize: null | string;
+    uploadConfig: SanitizedCollectionConfig['upload'];
+};
+export declare const MiniCarousel: React.FC<MiniCarouselProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/MiniCarousel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAoCpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAA;QACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;KACrB,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IAC1C,YAAY,EAAE,IAAI,GAAG,MAAM,CAAA;IAC3B,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAA"}

package/dist/elements/MiniCarousel/index.js

@@ -0,0 +1,84 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { appendCacheTag } from '../../utilities/appendCacheTag.js';
+import './index.css';
+const baseClass = 'mini-carousel';
+const MiniCarouselItem = ({
+  active,
+  imageCacheTag,
+  label,
+  onClick,
+  url
+}) => {
+  const src = appendCacheTag(url, imageCacheTag);
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": label,
+    "aria-pressed": active ? 'true' : 'false',
+    className: [`${baseClass}__item`, active && `${baseClass}__item--active`].filter(Boolean).join(' '),
+    onClick: onClick,
+    type: "button",
+    children: /*#__PURE__*/_jsx("img", {
+      alt: label,
+      src: src
+    })
+  });
+};
+export const MiniCarousel = ({
+  doc,
+  imageCacheTag,
+  onSelect,
+  selectedSize,
+  uploadConfig
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    variants
+  } = uploadConfig;
+  const {
+    url: originalUrl,
+    variants: sizes
+  } = doc;
+  const orderedSizeKeys = React.useMemo(() => {
+    if (!variants || variants.length === 0) {
+      return Object.keys(sizes || {});
+    }
+    return variants.map(({
+      name
+    }) => name).filter(name_0 => sizes?.[name_0]?.url);
+  }, [variants, sizes]);
+  if (!originalUrl) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, 'scrollbar-thin'].join(' '),
+    children: [/*#__PURE__*/_jsx(MiniCarouselItem, {
+      active: selectedSize === null,
+      imageCacheTag: imageCacheTag,
+      label: t('general:original'),
+      onClick: () => onSelect(null),
+      url: originalUrl
+    }), orderedSizeKeys.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__divider`
+      }), orderedSizeKeys.map(key => {
+        const sizeData = sizes?.[key];
+        if (!sizeData?.url) {
+          return null;
+        }
+        return /*#__PURE__*/_jsx(MiniCarouselItem, {
+          active: selectedSize === key,
+          imageCacheTag: imageCacheTag,
+          label: key,
+          onClick: () => onSelect(key),
+          url: sizeData.url
+        }, key);
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useTranslation","appendCacheTag","baseClass","MiniCarouselItem","active","imageCacheTag","label","onClick","url","src","_jsx","className","filter","Boolean","join","type","alt","MiniCarousel","doc","onSelect","selectedSize","uploadConfig","t","variants","originalUrl","sizes","orderedSizeKeys","useMemo","length","Object","keys","map","name","_jsxs","_Fragment","key","sizeData"],"sources":["../../../src/elements/MiniCarousel/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport './index.css'\n\nconst baseClass = 'mini-carousel'\n\ntype MiniCarouselItemProps = {\n  active: boolean\n  imageCacheTag?: false | string\n  label: string\n  onClick: () => void\n  url: string\n}\n\nconst MiniCarouselItem: React.FC<MiniCarouselItemProps> = ({\n  active,\n  imageCacheTag,\n  label,\n  onClick,\n  url,\n}) => {\n  const src = appendCacheTag(url, imageCacheTag)\n\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={active ? 'true' : 'false'}\n      className={[`${baseClass}__item`, active && `${baseClass}__item--active`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <img alt={label} src={src} />\n    </button>\n  )\n}\n\nexport type MiniCarouselProps = {\n  doc: {\n    url?: string\n    variants?: FileSizes\n  } & Data\n  imageCacheTag?: false | string\n  onSelect: (sizeKey: null | string) => void\n  selectedSize: null | string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const MiniCarousel: React.FC<MiniCarouselProps> = ({\n  doc,\n  imageCacheTag,\n  onSelect,\n  selectedSize,\n  uploadConfig,\n}) => {\n  const { t } = useTranslation()\n  const { variants } = uploadConfig\n  const { url: originalUrl, variants: sizes } = doc\n\n  const orderedSizeKeys = React.useMemo(() => {\n    if (!variants || variants.length === 0) {\n      return Object.keys(sizes || {})\n    }\n    return variants.map(({ name }) => name).filter((name) => sizes?.[name]?.url)\n  }, [variants, sizes])\n\n  if (!originalUrl) {\n    return null\n  }\n\n  return (\n    <div className={[baseClass, 'scrollbar-thin'].join(' ')}>\n      <MiniCarouselItem\n        active={selectedSize === null}\n        imageCacheTag={imageCacheTag}\n        label={t('general:original')}\n        onClick={() => onSelect(null)}\n        url={originalUrl}\n      />\n\n      {orderedSizeKeys.length > 0 && (\n        <>\n          <div className={`${baseClass}__divider`} />\n          {orderedSizeKeys.map((key) => {\n            const sizeData = sizes?.[key]\n            if (!sizeData?.url) {\n              return null\n            }\n            return (\n              <MiniCarouselItem\n                active={selectedSize === key}\n                imageCacheTag={imageCacheTag}\n                key={key}\n                label={key}\n                onClick={() => onSelect(key)}\n                url={sizeData.url}\n              />\n            )\n          })}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,MAAMC,gBAAA,GAAoDA,CAAC;EACzDC,MAAM;EACNC,aAAa;EACbC,KAAK;EACLC,OAAO;EACPC;AAAG,CACJ;EACC,MAAMC,GAAA,GAAMR,cAAA,CAAeO,GAAA,EAAKH,aAAA;EAEhC,oBACEK,IAAA,CAAC;IACC,cAAYJ,KAAA;IACZ,gBAAcF,MAAA,GAAS,SAAS;IAChCO,SAAA,EAAW,CAAC,GAAGT,SAAA,QAAiB,EAAEE,MAAA,IAAU,GAAGF,SAAA,gBAAyB,CAAC,CACtEU,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,OAAA,EAASA,OAAA;IACTQ,IAAA,EAAK;cAEL,aAAAL,IAAA,CAAC;MAAIM,GAAA,EAAKV,KAAA;MAAOG,GAAA,EAAKA;;;AAG5B;AAaA,OAAO,MAAMQ,YAAA,GAA4CA,CAAC;EACxDC,GAAG;EACHb,aAAa;EACbc,QAAQ;EACRC,YAAY;EACZC;AAAY,CACb;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGtB,cAAA;EACd,MAAM;IAAEuB;EAAQ,CAAE,GAAGF,YAAA;EACrB,MAAM;IAAEb,GAAA,EAAKgB,WAAW;IAAED,QAAA,EAAUE;EAAK,CAAE,GAAGP,GAAA;EAE9C,MAAMQ,eAAA,GAAkB3B,KAAA,CAAM4B,OAAO,CAAC;IACpC,IAAI,CAACJ,QAAA,IAAYA,QAAA,CAASK,MAAM,KAAK,GAAG;MACtC,OAAOC,MAAA,CAAOC,IAAI,CAACL,KAAA,IAAS,CAAC;IAC/B;IACA,OAAOF,QAAA,CAASQ,GAAG,CAAC,CAAC;MAAEC;IAAI,CAAE,KAAKA,IAAA,EAAMpB,MAAM,CAAEoB,MAAA,IAASP,KAAA,GAAQO,MAAA,CAAK,EAAExB,GAAA;EAC1E,GAAG,CAACe,QAAA,EAAUE,KAAA,CAAM;EAEpB,IAAI,CAACD,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,oBACES,KAAA,CAAC;IAAItB,SAAA,EAAW,CAACT,SAAA,EAAW,iBAAiB,CAACY,IAAI,CAAC;4BACjDJ,IAAA,CAACP,gBAAA;MACCC,MAAA,EAAQgB,YAAA,KAAiB;MACzBf,aAAA,EAAeA,aAAA;MACfC,KAAA,EAAOgB,CAAA,CAAE;MACTf,OAAA,EAASA,CAAA,KAAMY,QAAA,CAAS;MACxBX,GAAA,EAAKgB;QAGNE,eAAA,CAAgBE,MAAM,GAAG,kBACxBK,KAAA,CAAAC,SAAA;8BACExB,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGT,SAAA;UAClBwB,eAAA,CAAgBK,GAAG,CAAEI,GAAA;QACpB,MAAMC,QAAA,GAAWX,KAAA,GAAQU,GAAA,CAAI;QAC7B,IAAI,CAACC,QAAA,EAAU5B,GAAA,EAAK;UAClB,OAAO;QACT;QACA,oBACEE,IAAA,CAACP,gBAAA;UACCC,MAAA,EAAQgB,YAAA,KAAiBe,GAAA;UACzB9B,aAAA,EAAeA,aAAA;UAEfC,KAAA,EAAO6B,GAAA;UACP5B,OAAA,EAASA,CAAA,KAAMY,QAAA,CAASgB,GAAA;UACxB3B,GAAA,EAAK4B,QAAA,CAAS5B;WAHT2B,GAAA;MAMX;;;AAKV","ignoreList":[]}

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

@@ -1,2 +1,6 @@
-export { Modal, useModal } from '@faceless-ui/modal';
+import type { ComponentProps } from 'react';
+import { Modal as FacelessModal } from '@faceless-ui/modal';
+import React from 'react';
+export { useModal } from '@faceless-ui/modal';
+export declare const Modal: React.FC<ComponentProps<typeof FacelessModal>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,IAAI,aAAa,EAAY,MAAM,oBAAoB,CAAA;AACrE,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CA2EhE,CAAA"}

package/dist/elements/Modal/index.js

@@ -1,4 +1,72 @@
 'use client';
 
-export { Modal, useModal } from '@faceless-ui/modal';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal as FacelessModal, useModal } from '@faceless-ui/modal';
+import React, { useEffect, useMemo } from 'react';
+export { useModal } from '@faceless-ui/modal';
+export const Modal = props => {
+  const {
+    id,
+    slug,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    focusTrapOptions,
+    trapFocus = true
+  } = props;
+  const modalID = id || slug;
+  const {
+    modalState
+  } = useModal();
+  const isOpen = Boolean(modalState[slug]?.isOpen);
+  const options = useMemo(() => ({
+    escapeDeactivates: false,
+    initialFocus: () => {
+      const modal = document.getElementById(modalID);
+      const heading = modal?.querySelector('h1, h2, h3, h4, h5, h6');
+      if (heading) {
+        heading.tabIndex = -1;
+      }
+      return heading ?? modal;
+    },
+    ...focusTrapOptions
+  }), [modalID, focusTrapOptions]);
+  useEffect(() => {
+    if (!isOpen || ariaLabel || ariaLabelledBy) {
+      return;
+    }
+    let hasFocusedTitle = false;
+    const updateTitle = () => {
+      const modal_0 = document.getElementById(modalID);
+      const heading_0 = modal_0?.querySelector('h1, h2, h3, h4, h5, h6');
+      if (modal_0 && heading_0) {
+        if (!heading_0.id) {
+          heading_0.id = `modal-title-${slug}`;
+        }
+        modal_0.setAttribute('aria-labelledby', heading_0.id);
+        modal_0.removeAttribute('aria-label');
+        if (!hasFocusedTitle && trapFocus && focusTrapOptions?.initialFocus === undefined && !modal_0.closest('[inert]') && (document.activeElement === modal_0 || document.activeElement === document.body)) {
+          heading_0.tabIndex = -1;
+          heading_0.focus({
+            preventScroll: true
+          });
+          hasFocusedTitle = document.activeElement === heading_0;
+        }
+      }
+    };
+    updateTitle();
+    const observer = new MutationObserver(updateTitle);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [isOpen, modalID, slug, ariaLabel, ariaLabelledBy, trapFocus, focusTrapOptions?.initialFocus]);
+  return /*#__PURE__*/_jsx(FacelessModal, {
+    ...props,
+    "data-payload-modal-slug": slug,
+    focusTrapOptions: options,
+    id: modalID,
+    tabIndex: -1
+  });
+};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\nexport { Modal, useModal } from '@faceless-ui/modal'\n"],"mappings":"AAAA;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","FacelessModal","useModal","React","useEffect","useMemo","props","id","slug","ariaLabel","ariaLabelledBy","focusTrapOptions","trapFocus","modalID","modalState","isOpen","Boolean","options","escapeDeactivates","initialFocus","modal","document","getElementById","heading","querySelector","tabIndex","hasFocusedTitle","updateTitle","setAttribute","removeAttribute","undefined","closest","activeElement","body","focus","preventScroll","observer","MutationObserver","observe","childList","subtree","disconnect","_jsx"],"sources":["../../../src/elements/Modal/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentProps } from 'react'\n\nimport { Modal as FacelessModal, useModal } from '@faceless-ui/modal'\nimport React, { useEffect, useMemo } from 'react'\n\nexport { useModal } from '@faceless-ui/modal'\n\nexport const Modal: React.FC<ComponentProps<typeof FacelessModal>> = (props) => {\n  const {\n    id,\n    slug,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    focusTrapOptions,\n    trapFocus = true,\n  } = props\n  const modalID = id || slug\n  const { modalState } = useModal()\n  const isOpen = Boolean(modalState[slug]?.isOpen)\n  const options = useMemo(\n    () => ({\n      escapeDeactivates: false,\n      initialFocus: () => {\n        const modal = document.getElementById(modalID)\n        const heading = modal?.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6')\n\n        if (heading) {\n          heading.tabIndex = -1\n        }\n        return heading ?? modal\n      },\n      ...focusTrapOptions,\n    }),\n    [modalID, focusTrapOptions],\n  )\n\n  useEffect(() => {\n    if (!isOpen || ariaLabel || ariaLabelledBy) {\n      return\n    }\n\n    let hasFocusedTitle = false\n\n    const updateTitle = () => {\n      const modal = document.getElementById(modalID)\n      const heading = modal?.querySelector<HTMLElement>('h1, h2, h3, h4, h5, h6')\n\n      if (modal && heading) {\n        if (!heading.id) {\n          heading.id = `modal-title-${slug}`\n        }\n        modal.setAttribute('aria-labelledby', heading.id)\n        modal.removeAttribute('aria-label')\n        if (\n          !hasFocusedTitle &&\n          trapFocus &&\n          focusTrapOptions?.initialFocus === undefined &&\n          !modal.closest('[inert]') &&\n          (document.activeElement === modal || document.activeElement === document.body)\n        ) {\n          heading.tabIndex = -1\n          heading.focus({ preventScroll: true })\n          hasFocusedTitle = document.activeElement === heading\n        }\n      }\n    }\n\n    updateTitle()\n    const observer = new MutationObserver(updateTitle)\n    observer.observe(document.body, { childList: true, subtree: true })\n    return () => observer.disconnect()\n  }, [isOpen, modalID, slug, ariaLabel, ariaLabelledBy, trapFocus, focusTrapOptions?.initialFocus])\n\n  return (\n    <FacelessModal\n      {...props}\n      data-payload-modal-slug={slug}\n      focusTrapOptions={options}\n      id={modalID}\n      tabIndex={-1}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,KAAA,IAASC,aAAa,EAAEC,QAAQ,QAAQ;AACjD,OAAOC,KAAA,IAASC,SAAS,EAAEC,OAAO,QAAQ;AAE1C,SAASH,QAAQ,QAAQ;AAEzB,OAAO,MAAMF,KAAA,GAAyDM,KAAA;EACpE,MAAM;IACJC,EAAE;IACFC,IAAI;IACJ,cAAcC,SAAS;IACvB,mBAAmBC,cAAc;IACjCC,gBAAgB;IAChBC,SAAA,GAAY;EAAI,CACjB,GAAGN,KAAA;EACJ,MAAMO,OAAA,GAAUN,EAAA,IAAMC,IAAA;EACtB,MAAM;IAAEM;EAAU,CAAE,GAAGZ,QAAA;EACvB,MAAMa,MAAA,GAASC,OAAA,CAAQF,UAAU,CAACN,IAAA,CAAK,EAAEO,MAAA;EACzC,MAAME,OAAA,GAAUZ,OAAA,CACd,OAAO;IACLa,iBAAA,EAAmB;IACnBC,YAAA,EAAcA,CAAA;MACZ,MAAMC,KAAA,GAAQC,QAAA,CAASC,cAAc,CAACT,OAAA;MACtC,MAAMU,OAAA,GAAUH,KAAA,EAAOI,aAAA,CAA2B;MAElD,IAAID,OAAA,EAAS;QACXA,OAAA,CAAQE,QAAQ,GAAG,CAAC;MACtB;MACA,OAAOF,OAAA,IAAWH,KAAA;IACpB;IACA,GAAGT;EACL,IACA,CAACE,OAAA,EAASF,gBAAA,CAAiB;EAG7BP,SAAA,CAAU;IACR,IAAI,CAACW,MAAA,IAAUN,SAAA,IAAaC,cAAA,EAAgB;MAC1C;IACF;IAEA,IAAIgB,eAAA,GAAkB;IAEtB,MAAMC,WAAA,GAAcA,CAAA;MAClB,MAAMP,OAAA,GAAQC,QAAA,CAASC,cAAc,CAACT,OAAA;MACtC,MAAMU,SAAA,GAAUH,OAAA,EAAOI,aAAA,CAA2B;MAElD,IAAIJ,OAAA,IAASG,SAAA,EAAS;QACpB,IAAI,CAACA,SAAA,CAAQhB,EAAE,EAAE;UACfgB,SAAA,CAAQhB,EAAE,GAAG,eAAeC,IAAA,EAAM;QACpC;QACAY,OAAA,CAAMQ,YAAY,CAAC,mBAAmBL,SAAA,CAAQhB,EAAE;QAChDa,OAAA,CAAMS,eAAe,CAAC;QACtB,IACE,CAACH,eAAA,IACDd,SAAA,IACAD,gBAAA,EAAkBQ,YAAA,KAAiBW,SAAA,IACnC,CAACV,OAAA,CAAMW,OAAO,CAAC,eACdV,QAAA,CAASW,aAAa,KAAKZ,OAAA,IAASC,QAAA,CAASW,aAAa,KAAKX,QAAA,CAASY,IAAI,CAAD,EAC5E;UACAV,SAAA,CAAQE,QAAQ,GAAG,CAAC;UACpBF,SAAA,CAAQW,KAAK,CAAC;YAAEC,aAAA,EAAe;UAAK;UACpCT,eAAA,GAAkBL,QAAA,CAASW,aAAa,KAAKT,SAAA;QAC/C;MACF;IACF;IAEAI,WAAA;IACA,MAAMS,QAAA,GAAW,IAAIC,gBAAA,CAAiBV,WAAA;IACtCS,QAAA,CAASE,OAAO,CAACjB,QAAA,CAASY,IAAI,EAAE;MAAEM,SAAA,EAAW;MAAMC,OAAA,EAAS;IAAK;IACjE,OAAO,MAAMJ,QAAA,CAASK,UAAU;EAClC,GAAG,CAAC1B,MAAA,EAAQF,OAAA,EAASL,IAAA,EAAMC,SAAA,EAAWC,cAAA,EAAgBE,SAAA,EAAWD,gBAAA,EAAkBQ,YAAA,CAAa;EAEhG,oBACEuB,IAAA,CAACzC,aAAA;IACE,GAAGK,KAAK;IACT,2BAAyBE,IAAA;IACzBG,gBAAA,EAAkBM,OAAA;IAClBV,EAAA,EAAIM,OAAA;IACJY,QAAA,EAAU,CAAC;;AAGjB","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAeA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAkBA,CAAA"}

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

@@ -3,13 +3,14 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import { useTranslation } from '../../../providers/Translation/index.js';
 import { SidebarToggle } from '../../SidebarToggle/index.js';
 import { useNav } from '../context.js';
 /**
  * @internal
  */
 export const NavSidebarToggle = t0 => {
-  const $ = _c(6);
+  const $ = _c(7);
   const {
     baseClass
   } = t0;
@@ -17,36 +18,40 @@ export const NavSidebarToggle = t0 => {
     navOpen,
     setNavOpen
   } = useNav();
-  const t1 = `${baseClass}__mobile-close`;
-  let t2;
-  if ($[0] !== setNavOpen) {
-    t2 = () => {
-      setNavOpen(false);
-    };
-    $[0] = setNavOpen;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const t3 = !navOpen ? -1 : undefined;
-  let t4;
-  if ($[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
-    t4 = _jsx("button", {
-      className: t1,
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== baseClass || $[1] !== navOpen || $[2] !== setNavOpen || $[3] !== t) {
+    let t2;
+    if ($[5] !== setNavOpen) {
+      t2 = () => {
+        setNavOpen(false, true);
+      };
+      $[5] = setNavOpen;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    t1 = _jsx("button", {
+      "aria-expanded": navOpen,
+      "aria-label": t("general:hideSidebar"),
+      className: `${baseClass}__close`,
       onClick: t2,
-      tabIndex: t3,
+      tabIndex: !navOpen ? -1 : undefined,
       type: "button",
       children: _jsx(SidebarToggle, {
         isActive: true
       })
     });
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = t3;
-    $[5] = t4;
+    $[0] = baseClass;
+    $[1] = navOpen;
+    $[2] = setNavOpen;
+    $[3] = t;
+    $[4] = t1;
   } else {
-    t4 = $[5];
+    t1 = $[4];
   }
-  return t4;
+  return t1;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","SidebarToggle","useNav","NavSidebarToggle","t0","$","baseClass","navOpen","setNavOpen","t1","t2","t3","undefined","t4","_jsx","className","onClick","tabIndex","type","children","isActive"],"sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { SidebarToggle } from '../../SidebarToggle/index.js'\nimport { useNav } from '../context.js'\n\n/**\n * @internal\n */\nexport const NavSidebarToggle: React.FC<{\n  baseClass?: string\n}> = ({ baseClass }) => {\n  const { navOpen, setNavOpen } = useNav()\n\n  return (\n    <button\n      className={`${baseClass}__mobile-close`}\n      onClick={() => {\n        setNavOpen(false)\n      }}\n      tabIndex={!navOpen ? -1 : undefined}\n      type=\"button\"\n    >\n      <SidebarToggle isActive />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,aAAa,QAAQ;AAC9B,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO;EAAA,IAAAF,EAAa;EACjB;IAAAG,OAAA;IAAAC;EAAA,IAAgCN,MAAA;EAIjB,MAAAO,EAAA,MAAGH,SAAA,gBAAyB;EAAA,IAAAI,EAAA;EAAA,IAAAL,CAAA,QAAAG,UAAA;IAC9BE,EAAA,GAAAA,CAAA;MACPF,UAAA,MAAW;IAAA;IACbH,CAAA,MAAAG,UAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EACU,MAAAM,EAAA,IAACJ,OAAA,QAAAK,SAAe;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAI,EAAA,IAAAJ,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAM,EAAA;IAL5BE,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EACYN,EAA4B;MAAAO,OAAA,EAC9BN,EAET;MAAAO,QAAA,EACUN,EAAgB;MAAAO,IAAA,EACrB;MAAAC,QAAA,EAELL,IAAA,CAAAb,aAAA;QAAAmB,QAAA;MAAA,C;;;;;;;;;SARFP,E;CAWJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","SidebarToggle","useNav","NavSidebarToggle","t0","$","baseClass","navOpen","setNavOpen","t","t1","t2","_jsx","className","onClick","tabIndex","undefined","type","children","isActive"],"sources":["../../../../src/elements/Nav/NavSidebarToggle/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { SidebarToggle } from '../../SidebarToggle/index.js'\nimport { useNav } from '../context.js'\n\n/**\n * @internal\n */\nexport const NavSidebarToggle: React.FC<{\n  baseClass?: string\n}> = ({ baseClass }) => {\n  const { navOpen, setNavOpen } = useNav()\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-expanded={navOpen}\n      aria-label={t('general:hideSidebar')}\n      className={`${baseClass}__close`}\n      onClick={() => {\n        setNavOpen(false, true)\n      }}\n      tabIndex={!navOpen ? -1 : undefined}\n      type=\"button\"\n    >\n      <SidebarToggle isActive />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,MAAM,QAAQ;AAEvB;;;AAGA,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ;EAAA,IAAAF,EAAa;EACjB;IAAAG,OAAA;IAAAC;EAAA,IAAgCN,MAAA;EAChC;IAAAO;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAL,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,UAAA,IAAAH,CAAA,QAAAI,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAN,CAAA,QAAAG,UAAA;MAODG,EAAA,GAAAA,CAAA;QACPH,UAAA,YAAkB;MAAA;MACpBH,CAAA,MAAAG,UAAA;MAAAH,CAAA,MAAAM,EAAA;IAAA;MAAAA,EAAA,GAAAN,CAAA;IAAA;IANFK,EAAA,GAAAE,IAAA,CAAC;MAAA,iBACgBL,OAAA;MAAA,cACHE,CAAA,CAAE;MAAAI,SAAA,EACH,GAAGP,SAAA,SAAkB;MAAAQ,OAAA,EACvBH,EAET;MAAAI,QAAA,EACU,CAACR,OAAA,QAAAS,SAAe;MAAAC,IAAA,EACrB;MAAAC,QAAA,EAELN,IAAA,CAAAX,aAAA;QAAAkB,QAAA;MAAA,C;;;;;;;;;;SAVFT,E;CAaJ","ignoreList":[]}

package/dist/elements/Nav/NavWrapper/index.d.ts

@@ -6,5 +6,6 @@ import './index.css';
 export declare const NavWrapper: React.FC<{
     baseClass?: string;
     children: React.ReactNode;
+    header?: React.ReactNode;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAqBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/NavWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,CAsBA,CAAA"}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useNav } from '../context.js';
 import './index.css';
@@ -9,10 +9,11 @@ import './index.css';
  * @internal
  */
 export const NavWrapper = props => {
-  const $ = _c(10);
+  const $ = _c(11);
   const {
     baseClass,
-    children
+    children,
+    header
   } = props;
   const {
     hydrated,
@@ -35,24 +36,25 @@ export const NavWrapper = props => {
   const t4 = !navOpen ? true : undefined;
   const t5 = `${baseClass}__scroll`;
   let t6;
-  if ($[4] !== children || $[5] !== navRef || $[6] !== t3 || $[7] !== t4 || $[8] !== t5) {
-    t6 = _jsx("aside", {
+  if ($[4] !== children || $[5] !== header || $[6] !== navRef || $[7] !== t3 || $[8] !== t4 || $[9] !== t5) {
+    t6 = _jsxs("aside", {
       className: t3,
       inert: t4,
-      children: _jsx("div", {
+      children: [header, _jsx("div", {
         className: t5,
         ref: navRef,
         children
-      })
+      })]
     });
     $[4] = children;
-    $[5] = navRef;
-    $[6] = t3;
-    $[7] = t4;
-    $[8] = t5;
-    $[9] = t6;
+    $[5] = header;
+    $[6] = navRef;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t6 = $[9];
+    t6 = $[10];
   }
   return t6;
 };