@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.0731f09

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(15);
   const {
     className,
     user
@@ -19,52 +19,88 @@ export const Locked = t0 => {
   const {
     t
   } = useTranslation();
-  const userToUse = isClientUserObject(user) ? user.email ?? user.id : t("general:anotherUser");
   let t1;
-  if ($[0] !== className) {
-    t1 = [baseClass, className].filter(Boolean);
-    $[0] = className;
-    $[1] = t1;
+  if ($[0] !== t || $[1] !== user) {
+    t1 = isClientUserObject(user) ? user.email ?? user.id : t("general:anotherUser");
+    $[0] = t;
+    $[1] = user;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
-  const t2 = t1.join(" ");
+  const userToUse = t1;
+  let t2;
+  if ($[3] !== t) {
+    t2 = t("general:isEditing");
+    $[3] = t;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const tooltipLabel = `${userToUse} ${t2}`;
   let t3;
-  let t4;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => setHovered(true);
-    t4 = () => setHovered(false);
-    $[2] = t3;
-    $[3] = t4;
+  if ($[5] !== className) {
+    t3 = [baseClass, className].filter(Boolean);
+    $[5] = className;
+    $[6] = t3;
   } else {
-    t3 = $[2];
-    t4 = $[3];
+    t3 = $[6];
   }
-  const t5 = `${userToUse} ${t("general:isEditing")}`;
+  const t4 = t3.join(" ");
+  let t5;
   let t6;
-  if ($[4] !== hovered || $[5] !== t2 || $[6] !== t5) {
-    t6 = _jsxs("div", {
-      className: t2,
-      onMouseEnter: t3,
-      onMouseLeave: t4,
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => setHovered(false);
+    t6 = () => setHovered(true);
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t5 = $[7];
+    t6 = $[8];
+  }
+  let t7;
+  let t8;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => setHovered(true);
+    t8 = () => setHovered(false);
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t7 = $[9];
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== hovered || $[12] !== t4 || $[13] !== tooltipLabel) {
+    t9 = _jsxs("div", {
+      "aria-label": tooltipLabel,
+      className: t4,
+      onBlur: t5,
+      onFocus: t6,
+      onKeyDown: _temp,
+      onMouseEnter: t7,
+      onMouseLeave: t8,
       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;
+    $[11] = hovered;
+    $[12] = t4;
+    $[13] = tooltipLabel;
+    $[14] = t9;
   } else {
-    t6 = $[7];
+    t9 = $[14];
   }
-  return t6;
+  return t9;
 };
+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","t1","email","id","userToUse","t2","tooltipLabel","t3","filter","Boolean","t4","join","t5","t6","Symbol","for","t7","t8","t9","_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":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","LogOutIcon","useConfig","useTranslation","Link","baseClass","Logout","t0","$","tabIndex","t1","undefined","t","config","admin","t2","routes","t3","t4","logout","logoutRoute","adminRoute","t5","_jsx","className","href","path","prefetch","title","children"],"sources":["../../../src/elements/Logout/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\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 { Link } from '../Link/index.js'\n\nconst baseClass = 'nav'\n\nexport const Logout: React.FC<{\n  tabIndex?: number\n}> = ({ 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  return (\n    <Link\n      aria-label={t('authentication:logOut')}\n      className={`${baseClass}__log-out`}\n      href={formatAdminURL({\n        adminRoute,\n        path: logoutRoute,\n      })}\n      prefetch={false}\n      tabIndex={tabIndex}\n      title={t('authentication:logOut')}\n    >\n      <LogOutIcon />\n    </Link>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,IAAI,QAAQ;AAErB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,QAAA,EAAAC;EAAA,IAAAH,EAAgB;EAAd,MAAAE,QAAA,GAAAC,EAAY,KAAAC,SAAA,OAAZD,EAAY;EAClB;IAAAE;EAAA,IAAcT,cAAA;EACd;IAAAU;EAAA,IAAmBX,SAAA;EAEnB;IAAAY,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;EAAA,IAAAK,EAAA;EAAA,IAAAd,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAY,WAAA,IAAAZ,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAC,QAAA;IAI7Ba,EAAA,GAAAC,IAAA,CAAAnB,IAAA;MAAA,cACcQ,CAAA,CAAE;MAAAY,SAAA,EACH,GAAAnB,SAAA,WAAuB;MAAAoB,IAAA,EAC5B1B,cAAA;QAAAsB,UAAA;QAAAK,IAAA,EAEEN;MAAA,CACR;MAAAO,QAAA;MAAAlB,QAAA;MAAAmB,KAAA,EAGOhB,CAAA,CAAE;MAAAiB,QAAA,EAETN,IAAA,CAAAtB,UAAA,IAAC;IAAA,C;;;;;;;;;SAXHqB,E;CAcJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","LogOutIcon","useConfig","useTranslation","Link","baseClass","Logout","t0","$","tabIndex","t1","undefined","t","config","admin","t2","routes","t3","t4","logout","logoutRoute","adminRoute","t5","_jsx","className","href","path","prefetch","title","children"],"sources":["../../../src/elements/Logout/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\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 { Link } from '../Link/index.js'\n\nconst baseClass = 'nav'\n\nexport const Logout: React.FC<{\n  tabIndex?: number\n}> = ({ 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  return (\n    <Link\n      aria-label={t('authentication:logOut')}\n      className={`${baseClass}__log-out`}\n      href={formatAdminURL({\n        adminRoute,\n        path: logoutRoute,\n      })}\n      prefetch={false}\n      tabIndex={tabIndex}\n      title={t('authentication:logOut')}\n    >\n      <LogOutIcon />\n    </Link>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,IAAI,QAAQ;AAErB,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAERC,EAAA;EAAA,MAAAC,CAAA,GAAAV,EAAA;EAAC;IAAAW,QAAA,EAAAC;EAAA,IAAAH,EAAgB;EAAd,MAAAE,QAAA,GAAAC,EAAY,KAAZC,SAAY,GAAZ,CAAY,GAAZD,EAAY;EAClB;IAAAE;EAAA,IAAcT,cAAA;EACd;IAAAU;EAAA,IAAmBX,SAAA;EAEnB;IAAAY,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;EAAA,IAAAK,EAAA;EAAA,IAAAd,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAY,WAAA,IAAAZ,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAC,QAAA;IAI7Ba,EAAA,GAAAC,IAAA,CAACnB,IAAA;MAAA,cACaQ,CAAA,CAAE;MAAAY,SAAA,EACH,GAAGnB,SAAA,WAAoB;MAAAoB,IAAA,EAC5B1B,cAAA,CAAe;QAAAsB,UAAA;QAAAK,IAAA,EAEbN;MACR;MAAAO,QAAA,EACU;MAAAlB,QAAA;MAAAmB,KAAA,EAEHhB,CAAA,CAAE;MAAAiB,QAAA,EAETN,IAAA,CAACtB,UAAA;;;;;;;;;;SAXHqB,E;CAcJ","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,148 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+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 = t0 => {
+  const $ = _c(18);
+  const {
+    doc,
+    imageCacheTag,
+    onSelect,
+    selectedSize,
+    uploadConfig
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const {
+    variants
+  } = uploadConfig;
+  const {
+    url: originalUrl,
+    variants: sizes
+  } = doc;
+  let t1;
+  bb0: {
+    if (!variants || variants.length === 0) {
+      let t2;
+      if ($[0] !== sizes) {
+        t2 = Object.keys(sizes || {});
+        $[0] = sizes;
+        $[1] = t2;
+      } else {
+        t2 = $[1];
+      }
+      t1 = t2;
+      break bb0;
+    }
+    let t2;
+    if ($[2] !== sizes || $[3] !== variants) {
+      let t3;
+      if ($[5] !== sizes) {
+        t3 = name_0 => sizes?.[name_0]?.url;
+        $[5] = sizes;
+        $[6] = t3;
+      } else {
+        t3 = $[6];
+      }
+      t2 = variants.map(_temp).filter(t3);
+      $[2] = sizes;
+      $[3] = variants;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = t2;
+  }
+  const orderedSizeKeys = t1;
+  if (!originalUrl) {
+    return null;
+  }
+  let t2;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [baseClass, "scrollbar-thin"];
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== imageCacheTag || $[9] !== onSelect || $[10] !== orderedSizeKeys || $[11] !== originalUrl || $[12] !== selectedSize || $[13] !== sizes || $[14] !== t) {
+    let t4;
+    if ($[16] !== onSelect) {
+      t4 = () => onSelect(null);
+      $[16] = onSelect;
+      $[17] = t4;
+    } else {
+      t4 = $[17];
+    }
+    t3 = _jsxs("div", {
+      className: t2.join(" "),
+      children: [_jsx(MiniCarouselItem, {
+        active: selectedSize === null,
+        imageCacheTag,
+        label: t("general:original"),
+        onClick: t4,
+        url: originalUrl
+      }), orderedSizeKeys.length > 0 && _jsxs(_Fragment, {
+        children: [_jsx("div", {
+          className: `${baseClass}__divider`
+        }), orderedSizeKeys.map(key => {
+          const sizeData = sizes?.[key];
+          if (!sizeData?.url) {
+            return null;
+          }
+          return _jsx(MiniCarouselItem, {
+            active: selectedSize === key,
+            imageCacheTag,
+            label: key,
+            onClick: () => onSelect(key),
+            url: sizeData.url
+          }, key);
+        })]
+      })]
+    });
+    $[8] = imageCacheTag;
+    $[9] = onSelect;
+    $[10] = orderedSizeKeys;
+    $[11] = originalUrl;
+    $[12] = selectedSize;
+    $[13] = sizes;
+    $[14] = t;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  return t3;
+};
+function _temp(t0) {
+  const {
+    name
+  } = t0;
+  return name;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","appendCacheTag","baseClass","MiniCarouselItem","active","imageCacheTag","label","onClick","url","src","_jsx","className","filter","Boolean","join","type","alt","MiniCarousel","t0","$","doc","onSelect","selectedSize","uploadConfig","t","variants","originalUrl","sizes","t1","bb0","length","t2","Object","keys","t3","name_0","name","map","_temp","orderedSizeKeys","Symbol","for","t4","_jsxs","children","_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":"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","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,KAAsD,MAAM,OAAO,CAAA;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CA+FhE,CAAA"}

package/dist/elements/Modal/index.js

@@ -1,4 +1,84 @@
 '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, useLayoutEffect, useMemo, useRef } from 'react';
+import { useModalFocus } from '../../providers/ModalFocus/index.js';
+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 popupFocusTargetsRef = useRef([]);
+  const {
+    getReturnFocusTargets
+  } = useModalFocus();
+  useLayoutEffect(() => {
+    if (isOpen) {
+      // Freeze each modal's targets before focus moves into it or a nested modal.
+      popupFocusTargetsRef.current = getReturnFocusTargets();
+    }
+  }, [getReturnFocusTargets, 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;
+    },
+    setReturnFocus: opener => (popupFocusTargetsRef.current.length ? popupFocusTargetsRef.current : [opener]).find(element => element?.isConnected && element !== document.body && element !== document.documentElement && !element.closest('[inert]') && !element.matches(':disabled') && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== 'hidden') ?? false,
+    ...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","useLayoutEffect","useMemo","useRef","useModalFocus","props","id","slug","ariaLabel","ariaLabelledBy","focusTrapOptions","trapFocus","modalID","modalState","isOpen","Boolean","popupFocusTargetsRef","getReturnFocusTargets","current","options","escapeDeactivates","initialFocus","modal","document","getElementById","heading","querySelector","tabIndex","setReturnFocus","opener","length","find","element","isConnected","body","documentElement","closest","matches","getClientRects","getComputedStyle","visibility","hasFocusedTitle","updateTitle","setAttribute","removeAttribute","undefined","activeElement","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, useLayoutEffect, useMemo, useRef } from 'react'\n\nimport { useModalFocus } from '../../providers/ModalFocus/index.js'\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 popupFocusTargetsRef = useRef<readonly HTMLElement[]>([])\n  const { getReturnFocusTargets } = useModalFocus()\n\n  useLayoutEffect(() => {\n    if (isOpen) {\n      // Freeze each modal's targets before focus moves into it or a nested modal.\n      popupFocusTargetsRef.current = getReturnFocusTargets()\n    }\n  }, [getReturnFocusTargets, 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      setReturnFocus: (opener: HTMLElement) =>\n        (popupFocusTargetsRef.current.length ? popupFocusTargetsRef.current : [opener]).find(\n          (element) =>\n            element?.isConnected &&\n            element !== document.body &&\n            element !== document.documentElement &&\n            !element.closest('[inert]') &&\n            !element.matches(':disabled') &&\n            element.getClientRects().length > 0 &&\n            getComputedStyle(element).visibility !== 'hidden',\n        ) ?? false,\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":"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","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