@payloadcms/ui 4.0.0-internal.f11981a → 4.0.0-internal.f2a04f7

package/dist/css/app.css

@@ -4,7 +4,7 @@
 
 @layer payload-default {
   :root {
-    --font-body: var(--font-family-sans), sans-serif;
+    --font-body: var(--font-family-sans, var(--text-body-family)), sans-serif;
     --font-mono: var(--font-family-mono), 'SF Mono', Menlo, Consolas, Monaco, monospace;
 
     --app-header-height: 0px;
@@ -13,6 +13,7 @@
     --nav-width: 275px;
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     :root {
       --nav-width: 100vw;

package/dist/css/forms.css

@@ -6,7 +6,6 @@
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
     color: var(--field-color-text);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/css/preflight.css

@@ -59,7 +59,16 @@ SOFTWARE.
     line-height: 1.5; /* 1 */
     -webkit-text-size-adjust: 100%; /* 2 */
     tab-size: 4; /* 3 */
-    font-family: var(--font-family-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); /* 4 */
+    font-family: var(
+      --font-family-sans,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    ); /* 4 */
     font-feature-settings: normal; /* 5 */
     font-variation-settings: normal; /* 6 */
     -webkit-tap-highlight-color: transparent; /* 7 */
@@ -130,7 +139,17 @@ SOFTWARE.
   kbd,
   samp,
   pre {
-    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); /* 1 */
+    font-family: var(
+      --font-family-mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace
+    ); /* 1 */
     font-feature-settings: normal; /* 2 */
     font-variation-settings: normal; /* 3 */
     font-size: 1em; /* 4 */
@@ -399,6 +418,7 @@ SOFTWARE.
 */
 
   [hidden]:where(:not([hidden='until-found'])) {
+    /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
     display: none !important;
   }
 }

package/dist/css/spacing.css

@@ -12,7 +12,7 @@
 
     /* Layout spacing */
     --gutter-h: var(--spacer-5);
-    --spacing-field: var(--spacer-3);
+    --spacing-field: var(--spacer-4);
     --spacing-view-bottom: var(--gutter-h);
 
     /* Breakpoints */
@@ -22,18 +22,21 @@
     --breakpoint-l-width: 1440px;
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     :root {
       --gutter-h: var(--spacer-4);
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     :root {
       --gutter-h: var(--spacer-3);
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     :root {
       --spacing-field: var(--spacer-2-5);

package/dist/css/typography.css

@@ -1,67 +1,173 @@
 @layer payload-default {
   :root {
-    --font-family-sans: 'Inter';
-    --font-family-mono: 'Roboto Mono';
-    --text-letter-spacing: 0.005em; /* 0.5% */
+    --text-body-family: 'Inter';
+    --text-heading-family: 'Inter';
+    --text-mono-family: 'Roboto Mono';
 
-    /* Body — Small */
-    --text-body-small-font-family: var(--font-family-sans);
-    --text-body-small-font-size: 0.5625rem; /* 9px */
+    /* Body */
+    --text-body-small-font-size: 0.625rem; /* 10px */
     --text-body-small-font-weight: 450;
     --text-body-small-line-height: 0.875rem; /* 14px */
-    --text-body-small-letter-spacing: 0.045px; /* 0.5% */
+    --text-body-small-letter-spacing: 0px;
 
-    --text-body-small-strong-font-family: var(--font-family-sans);
-    --text-body-small-strong-font-size: 0.5625rem; /* 9px */
-    --text-body-small-strong-font-weight: 550;
-    --text-body-small-strong-line-height: 0.875rem; /* 14px */
-    --text-body-small-strong-letter-spacing: 0.045px; /* 0.5% */
-
-    /* Body — Medium */
-    --text-body-medium-font-family: var(--font-family-sans);
-    --text-body-medium-font-size: 0.6875rem; /* 11px */
+    --text-body-medium-font-size: 0.75rem; /* 12px */
     --text-body-medium-font-weight: 450;
     --text-body-medium-line-height: 1rem; /* 16px */
-    --text-body-medium-letter-spacing: 0.055px;
-
-    --text-body-medium-strong-font-family: var(--font-family-sans);
-    --text-body-medium-strong-font-size: 0.6875rem; /* 11px */
-    --text-body-medium-strong-font-weight: 550;
-    --text-body-medium-strong-line-height: 1rem; /* 16px */
-    --text-body-medium-strong-letter-spacing: 0.055px;
+    --text-body-medium-letter-spacing: -0.001px;
 
-    /* Body — Large */
-    --text-body-large-font-family: var(--font-family-sans);
-    --text-body-large-font-size: 0.8125rem; /* 13px */
+    --text-body-large-font-size: 0.875rem; /* 14px */
     --text-body-large-font-weight: 450;
-    --text-body-large-line-height: 1.375rem; /* 22px */
-    --text-body-large-letter-spacing: -0.25px;
-
-    --text-body-large-strong-font-family: var(--font-family-sans);
-    --text-body-large-strong-font-size: 0.8125rem; /* 13px */
-    --text-body-large-strong-font-weight: 550;
-    --text-body-large-strong-line-height: 1.375rem; /* 22px */
-    --text-body-large-strong-letter-spacing: -0.25px;
-
-    /* Heading — Small */
-    --text-heading-small-font-family: var(--font-family-sans);
-    --text-heading-small-font-size: 0.8125rem; /* 13px */
-    --text-heading-small-font-weight: 550;
-    --text-heading-small-line-height: 1.375rem;
-    --text-heading-small-letter-spacing: -0.25px;
-
-    /* Heading — Medium */
-    --text-heading-medium-font-family: var(--font-family-sans);
-    --text-heading-medium-font-size: 0.9375rem; /* 15px */
-    --text-heading-medium-font-weight: 550;
-    --text-heading-medium-line-height: 1.5625rem;
-    --text-heading-medium-letter-spacing: -0.075px;
-
-    /* Heading — Large */
-    --text-heading-large-font-family: var(--font-family-sans);
-    --text-heading-large-font-size: 1.5rem; /* 24px */
-    --text-heading-large-font-weight: 550;
-    --text-heading-large-line-height: 2rem; /* 32px */
-    --text-heading-large-letter-spacing: -0.408px;
+    --text-body-large-line-height: 1.25rem; /* 20px */
+    --text-body-large-letter-spacing: -0.005px;
+
+    --text-body-xl-font-size: 1rem; /* 16px */
+    --text-body-xl-font-weight: 450;
+    --text-body-xl-line-height: 1.375rem; /* 22px */
+    --text-body-xl-letter-spacing: -0.015px;
+
+    --text-body-2xl-font-size: 1.375rem; /* 22px */
+    --text-body-2xl-font-weight: 450;
+    --text-body-2xl-line-height: 1.75rem; /* 28px */
+    --text-body-2xl-letter-spacing: -0.176px;
+
+    /* Body — Bold */
+    --text-body-small-bold-font-size: 0.625rem; /* 10px */
+    --text-body-small-bold-font-weight: 550;
+    --text-body-small-bold-line-height: 0.875rem; /* 14px */
+    --text-body-small-bold-letter-spacing: 0px;
+
+    --text-body-medium-bold-font-size: 0.75rem; /* 12px */
+    --text-body-medium-bold-font-weight: 550;
+    --text-body-medium-bold-line-height: 1rem; /* 16px */
+    --text-body-medium-bold-letter-spacing: -0.001px;
+
+    --text-body-large-bold-font-size: 0.875rem; /* 14px */
+    --text-body-large-bold-font-weight: 550;
+    --text-body-large-bold-line-height: 1.25rem; /* 20px */
+    --text-body-large-bold-letter-spacing: -0.005px;
+
+    --text-body-xl-bold-font-size: 1rem; /* 16px */
+    --text-body-xl-bold-font-weight: 550;
+    --text-body-xl-bold-line-height: 1.375rem; /* 22px */
+    --text-body-xl-bold-letter-spacing: -0.015px;
+
+    --text-body-2xl-bold-font-size: 1.375rem; /* 22px */
+    --text-body-2xl-bold-font-weight: 550;
+    --text-body-2xl-bold-line-height: 1.75rem; /* 28px */
+    --text-body-2xl-bold-letter-spacing: -0.176px;
+
+    /* Body — Paragraph */
+    --text-body-small-paragraph-font-size: 0.625rem; /* 10px */
+    --text-body-small-paragraph-font-weight: 450;
+    --text-body-small-paragraph-line-height: 1rem; /* 16px */
+    --text-body-small-paragraph-letter-spacing: 0px;
+
+    --text-body-medium-paragraph-font-size: 0.75rem; /* 12px */
+    --text-body-medium-paragraph-font-weight: 450;
+    --text-body-medium-paragraph-line-height: 1.125rem; /* 18px */
+    --text-body-medium-paragraph-letter-spacing: 0px;
+
+    --text-body-large-paragraph-font-size: 0.875rem; /* 14px */
+    --text-body-large-paragraph-font-weight: 450;
+    --text-body-large-paragraph-line-height: 1.375rem; /* 22px */
+    --text-body-large-paragraph-letter-spacing: 0px;
+
+    --text-body-xl-paragraph-font-size: 1rem; /* 16px */
+    --text-body-xl-paragraph-font-weight: 450;
+    --text-body-xl-paragraph-line-height: 1.5rem; /* 24px */
+    --text-body-xl-paragraph-letter-spacing: 0px;
+
+    --text-body-2xl-paragraph-font-size: 1.375rem; /* 22px */
+    --text-body-2xl-paragraph-font-weight: 450;
+    --text-body-2xl-paragraph-line-height: 2.125rem; /* 34px */
+    --text-body-2xl-paragraph-letter-spacing: 0px;
+
+    /* Heading */
+    --text-heading-small-font-size: 0.875rem; /* 14px */
+    --text-heading-small-font-weight: 600;
+    --text-heading-small-line-height: 1.25rem; /* 20px */
+    --text-heading-small-letter-spacing: 0px;
+
+    --text-heading-medium-font-size: 1rem; /* 16px */
+    --text-heading-medium-font-weight: 600;
+    --text-heading-medium-line-height: 1.375rem; /* 22px */
+    --text-heading-medium-letter-spacing: -0.011px;
+
+    --text-heading-large-font-size: 1.25rem; /* 20px */
+    --text-heading-large-font-weight: 600;
+    --text-heading-large-line-height: 1.6875rem; /* 27px */
+    --text-heading-large-letter-spacing: -0.042px;
+
+    --text-heading-xl-font-size: 1.5rem; /* 24px */
+    --text-heading-xl-font-weight: 600;
+    --text-heading-xl-line-height: 1.9375rem; /* 31px */
+    --text-heading-xl-letter-spacing: -0.085px;
+
+    --text-heading-2xl-font-size: 2rem; /* 32px */
+    --text-heading-2xl-font-weight: 600;
+    --text-heading-2xl-line-height: 2.5rem; /* 40px */
+    --text-heading-2xl-letter-spacing: -0.203px;
+
+    --text-heading-3xl-font-size: 2.5rem; /* 40px */
+    --text-heading-3xl-font-weight: 600;
+    --text-heading-3xl-line-height: 2.9375rem; /* 47px */
+    --text-heading-3xl-letter-spacing: -0.367px;
+
+    --text-heading-4xl-font-size: 3rem; /* 48px */
+    --text-heading-4xl-font-weight: 600;
+    --text-heading-4xl-line-height: 3.3125rem; /* 53px */
+    --text-heading-4xl-letter-spacing: -0.576px;
+
+    /* Mono */
+    --text-mono-small-font-size: 0.6875rem; /* 11px */
+    --text-mono-small-weight: 400;
+    --text-mono-small-line-height: 1.125rem; /* 18px */
+    --text-mono-small-letter-spacing: 0.055px;
+
+    --text-mono-medium-font-size: 0.8125rem; /* 13px */
+    --text-mono-medium-weight: 400;
+    --text-mono-medium-line-height: 1.375rem; /* 22px */
+    --text-mono-medium-letter-spacing: 0.065px;
+
+    --text-mono-large-font-size: 0.9375rem; /* 15px */
+    --text-mono-large-weight: 400;
+    --text-mono-large-line-height: 1.5rem; /* 24px */
+    --text-mono-large-letter-spacing: 0.075px;
+
+    --text-mono-xl-font-size: 1.0625rem; /* 17px */
+    --text-mono-xl-weight: 400;
+    --text-mono-xl-line-height: 1.75rem; /* 28px */
+    --text-mono-xl-letter-spacing: 0.085px;
+
+    /* Legacy names default to the new tokens and remain independently overridable. */
+    --font-family-sans: var(--text-body-family);
+    --font-family-mono: var(--text-mono-family);
+    --text-letter-spacing: var(--text-body-medium-letter-spacing);
+
+    --text-body-small-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-medium-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-large-font-family: var(--font-family-sans, var(--text-body-family));
+
+    --text-body-small-strong-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-small-strong-font-size: var(--text-body-small-bold-font-size);
+    --text-body-small-strong-font-weight: var(--text-body-small-bold-font-weight);
+    --text-body-small-strong-line-height: var(--text-body-small-bold-line-height);
+    --text-body-small-strong-letter-spacing: var(--text-body-small-bold-letter-spacing);
+
+    --text-body-medium-strong-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-medium-strong-font-size: var(--text-body-medium-bold-font-size);
+    --text-body-medium-strong-font-weight: var(--text-body-medium-bold-font-weight);
+    --text-body-medium-strong-line-height: var(--text-body-medium-bold-line-height);
+    --text-body-medium-strong-letter-spacing: var(--text-body-medium-bold-letter-spacing);
+
+    --text-body-large-strong-font-family: var(--font-family-sans, var(--text-body-family));
+    --text-body-large-strong-font-size: var(--text-body-large-bold-font-size);
+    --text-body-large-strong-font-weight: var(--text-body-large-bold-font-weight);
+    --text-body-large-strong-line-height: var(--text-body-large-bold-line-height);
+    --text-body-large-strong-letter-spacing: var(--text-body-large-bold-letter-spacing);
+
+    --text-heading-small-font-family: var(--text-heading-family);
+    --text-heading-medium-font-family: var(--text-heading-family);
+    --text-heading-large-font-family: var(--text-heading-family);
   }
 }

package/dist/elements/APIKeyInput/index.css

@@ -46,9 +46,9 @@
   }
 
   .api-key-input__field[type='password'] {
-    font-family: var(--font-family-sans);
+    font-family: inherit;
     font-size: var(--text-body-medium-font-size);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     letter-spacing: 0.025rem;
   }
 

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

@@ -4,6 +4,8 @@ export type APIKeyInputProps = {
     readonly 'aria-label'?: string;
     readonly highlighted?: boolean;
     readonly id?: string;
+    readonly masked?: boolean;
+    readonly revealOnMount?: boolean;
     readonly value: null | string | undefined;
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuClD,CAAA"}

package/dist/elements/APIKeyInput/index.js

@@ -18,34 +18,31 @@ export const APIKeyInput = t0 => {
     id,
     "aria-label": t1,
     highlighted,
+    masked: t2,
+    revealOnMount: t3,
     value
   } = t0;
   const ariaLabel = t1 === undefined ? "API Key" : t1;
-  const [showKey, setShowKey] = useState(false);
+  const masked = t2 === undefined ? false : t2;
+  const revealOnMount = t3 === undefined ? false : t3;
+  const [showKey, setShowKey] = useState(revealOnMount);
   const keyValue = value ?? "";
-  const t2 = highlighted && "highlight";
-  let t3;
-  if ($[0] !== t2) {
-    t3 = [`${baseClass}__control`, t2].filter(Boolean);
-    $[0] = t2;
-    $[1] = t3;
+  const t4 = highlighted && "highlight";
+  let t5;
+  if ($[0] !== t4) {
+    t5 = [`${baseClass}__control`, t4].filter(Boolean);
+    $[0] = t4;
+    $[1] = t5;
   } else {
-    t3 = $[1];
+    t5 = $[1];
   }
-  const t4 = t3.join(" ");
-  let t5;
-  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== showKey || $[6] !== t4) {
-    let t6;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setShowKey(_temp);
-      $[8] = t6;
-    } else {
-      t6 = $[8];
-    }
-    t5 = _jsxs("div", {
+  const t6 = t5.join(" ");
+  let t7;
+  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== masked || $[6] !== showKey || $[7] !== t6) {
+    t7 = _jsxs("div", {
       className: baseClass,
       children: [_jsxs("div", {
-        className: t4,
+        className: t6,
         children: [_jsx(KeyIcon, {
           className: `${baseClass}__icon`
         }), _jsx("input", {
@@ -53,32 +50,33 @@ export const APIKeyInput = t0 => {
           className: `${baseClass}__field`,
           id,
           readOnly: true,
-          type: showKey ? "text" : "password",
+          type: masked || showKey ? "text" : "password",
           value: keyValue
-        }), _jsx("button", {
+        }), !masked && _jsx("button", {
           "aria-label": showKey ? "Hide API key" : "Show API key",
           className: `${baseClass}__toggle`,
-          onClick: t6,
+          onClick: () => setShowKey(_temp),
           type: "button",
           children: _jsx(EyeIcon, {
             active: showKey,
             size: 24
           })
         })]
-      }), _jsx(CopyToClipboard, {
+      }), !masked && _jsx(CopyToClipboard, {
         value: keyValue
       })]
     });
     $[2] = ariaLabel;
     $[3] = id;
     $[4] = keyValue;
-    $[5] = showKey;
-    $[6] = t4;
-    $[7] = t5;
+    $[5] = masked;
+    $[6] = showKey;
+    $[7] = t6;
+    $[8] = t7;
   } else {
-    t5 = $[7];
+    t7 = $[8];
   }
-  return t5;
+  return t7;
 };
 function _temp(prev) {
   return !prev;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t2","t3","filter","Boolean","t4","join","t5","t6","Symbol","for","_temp","_jsxs","className","children","_jsx","readOnly","type","onClick","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(false)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        <button\n          aria-label={showKey ? 'Hide API key' : 'Show API key'}\n          className={`${baseClass}__toggle`}\n          onClick={() => setShowKey((prev) => !prev)}\n          type=\"button\"\n        >\n          <EyeIcon active={showKey} size={24} />\n        </button>\n      </div>\n      <CopyToClipboard value={keyValue} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAL,EAKvD;EAHe,MAAAM,SAAA,GAAAH,EAAqB,KAAAI,SAAA,GAAT,SAAS,GAArBJ,EAAqB;EAInC,OAAAK,OAAA,EAAAC,UAAA,IAA8Bf,QAAA,MAAS;EACvC,MAAAgB,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAP,WAAA,IAAe;EAAA,IAAAQ,EAAA;EAAA,IAAAX,CAAA,QAAAU,EAAA;IAAzCC,EAAA,IAAC,GAAAd,SAAA,WAAuB,EAAEa,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAb,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAA7D,MAAAc,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAS,QAAA,IAAAT,CAAA,QAAAO,OAAA,IAAAP,CAAA,QAAAc,EAAA;IAAA,IAAAG,EAAA;IAAA,IAAAjB,CAAA,QAAAkB,MAAA,CAAAC,GAAA;MAc3EF,EAAA,GAAAA,CAAA,KAAMT,UAAA,CAAAY,KAAsB;MAAApB,CAAA,MAAAiB,EAAA;IAAA;MAAAA,EAAA,GAAAjB,CAAA;IAAA;IAhB3CgB,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYR,EAA2E;QAAAS,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACanB,SAAA;UAAAiB,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BnB,OAAA,GAAU,SAAS;UAAAH,KAAA,EAClBK;QAAA,C,GAETe,IAAA,CAAC;UAAA,cACajB,OAAA,GAAU,iBAAiB;UAAAe,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EACxBV,EAA4B;UAAAS,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAkC,MAAA,EAAiBrB,OAAA;YAAAsB,IAAA;UAAA,C;;UAGrBL,IAAA,CAAA5B,eAAA;QAAAQ,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;SAtB1BO,E;CAyBJ;AAnCuD,SAAAI,MAAAU,IAAA;EAAA,QA0BRA,IAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","masked","t2","revealOnMount","t3","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t4","t5","filter","Boolean","t6","join","t7","_jsxs","className","children","_jsx","readOnly","type","onClick","_temp","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly masked?: boolean\n  readonly revealOnMount?: boolean\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  masked = false,\n  revealOnMount = false,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(revealOnMount)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={masked || showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        {!masked && (\n          <button\n            aria-label={showKey ? 'Hide API key' : 'Show API key'}\n            className={`${baseClass}__toggle`}\n            onClick={() => setShowKey((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showKey} size={24} />\n          </button>\n        )}\n      </div>\n      {!masked && <CopyToClipboard value={keyValue} />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC,MAAA,EAAAC,EAAA;IAAAC,aAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAT,EAOvD;EALe,MAAAU,SAAA,GAAAP,EAAqB,KAAAQ,SAAA,GAAT,SAAS,GAArBR,EAAqB;EAEnC,MAAAE,MAAA,GAAAC,EAAc,KAAAK,SAAA,WAAdL,EAAc;EACd,MAAAC,aAAA,GAAAC,EAAqB,KAAAG,SAAA,WAArBH,EAAqB;EAGrB,OAAAI,OAAA,EAAAC,UAAA,IAA8BnB,QAAA,CAASa,aAAA;EACvC,MAAAO,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAX,WAAA,IAAe;EAAA,IAAAY,EAAA;EAAA,IAAAf,CAAA,QAAAc,EAAA;IAAzCC,EAAA,IAAC,GAAAlB,SAAA,WAAuB,EAAEiB,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAjB,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAA7D,MAAAkB,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAa,QAAA,IAAAb,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAW,OAAA,IAAAX,CAAA,QAAAkB,EAAA;IAF1FE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYJ,EAA2E;QAAAK,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACaf,SAAA;UAAAa,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BtB,MAAA,IAAUO,OAAA,GAAU,SAAS;UAAAH,KAAA,EAC5BK;QAAA,C,GAER,CAACT,MAAA,IACAoB,IAAA,CAAC;UAAA,cACab,OAAA,GAAU,iBAAiB;UAAAW,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EAAAA,CAAA,KAClBf,UAAA,CAAAgB,KAAsB;UAAAF,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAmC,MAAA,EAAiBlB,OAAA;YAAAmB,IAAA;UAAA,C;;UAItB,CAAC1B,MAAA,IAAUoB,IAAA,CAAA5B,eAAA;QAAAY,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;;SAxBtCO,E;CA2BJ;AAvCuD,SAAAQ,MAAAG,IAAA;EAAA,QA6BNA,IAAA;AAAA","ignoreList":[]}

package/dist/elements/AddNewRelation/index.css

@@ -17,10 +17,6 @@
       padding-inline: var(--spacer-1);
       height: var(--field-min-height-large);
       margin: 0;
-      background: var(--color-bg-secondary);
-      border: none;
-      border-radius: var(--button-radius);
-      color: var(--color-icon);
       cursor: pointer;
 
       &:hover {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqL1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsL1C,CAAA"}

package/dist/elements/AddNewRelation/index.js

@@ -200,7 +200,7 @@ export const AddNewRelation = t0 => {
         id: `${path}-add-new`,
         children: [relatedCollections.length === 1 && _jsxs(Fragment, {
           children: [_jsx(DocumentDrawerToggler, {
-            buttonStyle: "pill",
+            buttonStyle: "secondary",
             className: [`${baseClass}__add-button`, unstyled && `${baseClass}__add-button--unstyled`].filter(Boolean).join(" "),
             tooltip: ButtonFromProps ? undefined : label,
             children: ButtonFromProps ? ButtonFromProps : _jsx(PlusIcon, {})
@@ -213,6 +213,7 @@ export const AddNewRelation = t0 => {
             horizontalAlign: "right",
             onToggleClose: () => setPopupOpen(false),
             onToggleOpen: () => setPopupOpen(true),
+            popupType: "menu",
             render: t17 => {
               const {
                 close: closePopup
@@ -241,7 +242,7 @@ export const AddNewRelation = t0 => {
               return _jsx(Button, {
                 className: `${baseClass}__add-button`,
                 ...buttonProps,
-                buttonStyle: "pill",
+                buttonStyle: "secondary",
                 selected: active,
                 tooltip: popupOpen ? "" : t("fields:addNew"),
                 children: _jsx(PlusIcon, {})

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","popupOpen","setPopupOpen","i18n","t","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","t7","collections","create","collection","t8","t9","find","collection_0","t10","t11","t12","t13","t14","labels","singular","t15","t16","Symbol","for","bb0","label","_jsxs","className","children","_jsx","buttonStyle","filter","Boolean","join","tooltip","buttonType","horizontalAlign","onToggleClose","onToggleOpen","render","t17","close","closePopup","ButtonGroup","map","relatedCollection","onClick","active","buttonProps","t18","selected"],"sources":["../../../src/elements/AddNewRelation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\nimport type { Props } from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup } from '../Popup/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'relationship-add-new'\n\nexport const AddNewRelation: React.FC<Props> = ({\n  Button: ButtonFromProps,\n  hasMany,\n  onChange,\n  path,\n  relationTo,\n  unstyled,\n  value,\n}) => {\n  const relatedCollections = useRelatedCollections(relationTo)\n  const { permissions } = useAuth()\n  const [show, setShow] = useState(false)\n  const [selectedCollection, setSelectedCollection] = useState<string>()\n\n  const relatedToMany = relatedCollections.length > 1\n\n  const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>\n    !relatedToMany ? relatedCollections[0] : undefined,\n  )\n\n  const [popupOpen, setPopupOpen] = useState(false)\n  const { i18n, t } = useTranslation()\n\n  const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen, toggleDrawer }] = useDocumentDrawer(\n    {\n      collectionSlug: collectionConfig?.slug,\n    },\n  )\n\n  const onSave: DocumentDrawerContextType['onSave'] = useCallback(\n    ({ doc, operation }) => {\n      // if autosave is enabled, the operation will be 'update'\n      if (\n        operation === 'create' ||\n        (operation === 'update' && hasAutosaveEnabled(collectionConfig))\n      ) {\n        // ensure the value is not already in the array\n        let isNewValue = false\n        if (!value) {\n          isNewValue = true\n        } else {\n          isNewValue = Array.isArray(value)\n            ? !value.some((v) => v && v.value === doc.id)\n            : value.value !== doc.id\n        }\n\n        if (isNewValue) {\n          if (hasMany === true) {\n            onChange([\n              ...(Array.isArray(value) ? value : []),\n              {\n                relationTo: collectionConfig?.slug,\n                value: doc.id,\n              },\n            ])\n          } else {\n            onChange({\n              relationTo: collectionConfig?.slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value],\n  )\n\n  useEffect(() => {\n    if (permissions) {\n      if (relatedCollections.length === 1) {\n        setShow(permissions.collections[relatedCollections[0]?.slug]?.create)\n      } else {\n        setShow(\n          relatedCollections.some(\n            (collection) => permissions.collections[collection?.slug]?.create,\n          ),\n        )\n      }\n    }\n  }, [permissions, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && selectedCollection) {\n      setCollectionConfig(\n        relatedCollections.find((collection) => collection?.slug === selectedCollection),\n      )\n    }\n  }, [selectedCollection, relatedToMany, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && collectionConfig) {\n      // the drawer must be rendered on the page before before opening it\n      // this is why 'selectedCollection' is different from 'collectionConfig'\n      toggleDrawer()\n      setSelectedCollection(undefined)\n    }\n  }, [toggleDrawer, relatedToMany, collectionConfig])\n\n  useEffect(() => {\n    if (relatedToMany && !isDrawerOpen) {\n      setCollectionConfig(undefined)\n    }\n  }, [isDrawerOpen, relatedToMany])\n\n  const label = t('fields:addNewLabel', {\n    label: getTranslation(relatedCollections[0]?.labels.singular, i18n),\n  })\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <div className={baseClass} id={`${path}-add-new`}>\n      {relatedCollections.length === 1 && (\n        <Fragment>\n          <DocumentDrawerToggler\n            buttonStyle=\"pill\"\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            tooltip={ButtonFromProps ? undefined : label}\n          >\n            {ButtonFromProps ? ButtonFromProps : <PlusIcon />}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            buttonType=\"custom\"\n            horizontalAlign=\"right\"\n            onToggleClose={() => setPopupOpen(false)}\n            onToggleOpen={() => setPopupOpen(true)}\n            render={({ close: closePopup }) => (\n              <PopupList.ButtonGroup>\n                {relatedCollections.map((relatedCollection) => {\n                  if (permissions.collections[relatedCollection?.slug]?.create) {\n                    return (\n                      <PopupList.Button\n                        className={`${baseClass}__relation-button--${relatedCollection?.slug}`}\n                        key={relatedCollection?.slug}\n                        onClick={() => {\n                          closePopup()\n                          setSelectedCollection(relatedCollection?.slug)\n                        }}\n                      >\n                        {getTranslation(relatedCollection?.labels?.singular, i18n)}\n                      </PopupList.Button>\n                    )\n                  }\n\n                  return null\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            renderButton={({ active, ...buttonProps }) => (\n              <Button\n                className={`${baseClass}__add-button`}\n                {...buttonProps}\n                buttonStyle=\"pill\"\n                selected={active}\n                tooltip={popupOpen ? '' : t('fields:addNew')}\n              >\n                <PlusIcon />\n              </Button>\n            )}\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","hasAutosaveEnabled","React","Fragment","useCallback","useEffect","useState","useRelatedCollections","PlusIcon","useAuth","useTranslation","Button","useDocumentDrawer","Popup","PopupList","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","popupOpen","setPopupOpen","i18n","t","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","t7","collections","create","collection","t8","t9","find","collection_0","t10","t11","t12","t13","t14","labels","singular","t15","t16","Symbol","for","bb0","label","_jsxs","className","children","_jsx","buttonStyle","filter","Boolean","join","tooltip","buttonType","horizontalAlign","onToggleClose","onToggleOpen","popupType","render","t17","close","closePopup","ButtonGroup","map","relatedCollection","onClick","active","buttonProps","t18","selected"],"sources":["../../../src/elements/AddNewRelation/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { hasAutosaveEnabled } from 'payload/shared'\nimport React, { Fragment, useCallback, useEffect, useState } from 'react'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\nimport type { Props } from './types.js'\n\nimport { useRelatedCollections } from '../../hooks/useRelatedCollections.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { Popup } from '../Popup/index.js'\nimport * as PopupList from '../Popup/PopupButtonList/index.js'\nimport './index.css'\n\nconst baseClass = 'relationship-add-new'\n\nexport const AddNewRelation: React.FC<Props> = ({\n  Button: ButtonFromProps,\n  hasMany,\n  onChange,\n  path,\n  relationTo,\n  unstyled,\n  value,\n}) => {\n  const relatedCollections = useRelatedCollections(relationTo)\n  const { permissions } = useAuth()\n  const [show, setShow] = useState(false)\n  const [selectedCollection, setSelectedCollection] = useState<string>()\n\n  const relatedToMany = relatedCollections.length > 1\n\n  const [collectionConfig, setCollectionConfig] = useState<ClientCollectionConfig>(() =>\n    !relatedToMany ? relatedCollections[0] : undefined,\n  )\n\n  const [popupOpen, setPopupOpen] = useState(false)\n  const { i18n, t } = useTranslation()\n\n  const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen, toggleDrawer }] = useDocumentDrawer(\n    {\n      collectionSlug: collectionConfig?.slug,\n    },\n  )\n\n  const onSave: DocumentDrawerContextType['onSave'] = useCallback(\n    ({ doc, operation }) => {\n      // if autosave is enabled, the operation will be 'update'\n      if (\n        operation === 'create' ||\n        (operation === 'update' && hasAutosaveEnabled(collectionConfig))\n      ) {\n        // ensure the value is not already in the array\n        let isNewValue = false\n        if (!value) {\n          isNewValue = true\n        } else {\n          isNewValue = Array.isArray(value)\n            ? !value.some((v) => v && v.value === doc.id)\n            : value.value !== doc.id\n        }\n\n        if (isNewValue) {\n          if (hasMany === true) {\n            onChange([\n              ...(Array.isArray(value) ? value : []),\n              {\n                relationTo: collectionConfig?.slug,\n                value: doc.id,\n              },\n            ])\n          } else {\n            onChange({\n              relationTo: collectionConfig?.slug,\n              value: doc.id,\n            })\n          }\n        }\n\n        setSelectedCollection(undefined)\n      }\n    },\n    [collectionConfig, hasMany, onChange, value],\n  )\n\n  useEffect(() => {\n    if (permissions) {\n      if (relatedCollections.length === 1) {\n        setShow(permissions.collections[relatedCollections[0]?.slug]?.create)\n      } else {\n        setShow(\n          relatedCollections.some(\n            (collection) => permissions.collections[collection?.slug]?.create,\n          ),\n        )\n      }\n    }\n  }, [permissions, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && selectedCollection) {\n      setCollectionConfig(\n        relatedCollections.find((collection) => collection?.slug === selectedCollection),\n      )\n    }\n  }, [selectedCollection, relatedToMany, relatedCollections])\n\n  useEffect(() => {\n    if (relatedToMany && collectionConfig) {\n      // the drawer must be rendered on the page before before opening it\n      // this is why 'selectedCollection' is different from 'collectionConfig'\n      toggleDrawer()\n      setSelectedCollection(undefined)\n    }\n  }, [toggleDrawer, relatedToMany, collectionConfig])\n\n  useEffect(() => {\n    if (relatedToMany && !isDrawerOpen) {\n      setCollectionConfig(undefined)\n    }\n  }, [isDrawerOpen, relatedToMany])\n\n  const label = t('fields:addNewLabel', {\n    label: getTranslation(relatedCollections[0]?.labels.singular, i18n),\n  })\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <div className={baseClass} id={`${path}-add-new`}>\n      {relatedCollections.length === 1 && (\n        <Fragment>\n          <DocumentDrawerToggler\n            buttonStyle=\"secondary\"\n            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            tooltip={ButtonFromProps ? undefined : label}\n          >\n            {ButtonFromProps ? ButtonFromProps : <PlusIcon />}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            buttonType=\"custom\"\n            horizontalAlign=\"right\"\n            onToggleClose={() => setPopupOpen(false)}\n            onToggleOpen={() => setPopupOpen(true)}\n            popupType=\"menu\"\n            render={({ close: closePopup }) => (\n              <PopupList.ButtonGroup>\n                {relatedCollections.map((relatedCollection) => {\n                  if (permissions.collections[relatedCollection?.slug]?.create) {\n                    return (\n                      <PopupList.Button\n                        className={`${baseClass}__relation-button--${relatedCollection?.slug}`}\n                        key={relatedCollection?.slug}\n                        onClick={() => {\n                          closePopup()\n                          setSelectedCollection(relatedCollection?.slug)\n                        }}\n                      >\n                        {getTranslation(relatedCollection?.labels?.singular, i18n)}\n                      </PopupList.Button>\n                    )\n                  }\n\n                  return null\n                })}\n              </PopupList.ButtonGroup>\n            )}\n            renderButton={({ active, ...buttonProps }) => (\n              <Button\n                className={`${baseClass}__add-button`}\n                {...buttonProps}\n                buttonStyle=\"secondary\"\n                selected={active}\n                tooltip={popupOpen ? '' : t('fields:addNew')}\n              >\n                <PlusIcon />\n              </Button>\n            )}\n          />\n          {collectionConfig && permissions.collections[collectionConfig?.slug]?.create && (\n            <DocumentDrawer onSave={onSave} />\n          )}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ;AACnC,OAAOC,KAAA,IAASC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAKlE,SAASC,qBAAqB,QAAQ;AACtC,SAASC,QAAQ,QAAQ;AACzB,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,KAAK,QAAQ;AACtB,YAAYC,SAAA,MAAe;AAC3B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAAkCC,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAC;IAAAY,MAAA,EAAAQ,eAAA;IAAAC,OAAA;IAAAC,QAAA;IAAAC,IAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAR,EAQ/C;EACC,MAAAS,kBAAA,GAA2BnB,qBAAA,CAAsBgB,UAAA;EACjD;IAAAI;EAAA,IAAwBlB,OAAA;EACxB,OAAAmB,IAAA,EAAAC,OAAA,IAAwBvB,QAAA,MAAS;EACjC,OAAAwB,kBAAA,EAAAC,qBAAA,IAAoDzB,QAAA;EAEpD,MAAA0B,aAAA,GAAsBN,kBAAA,CAAAO,MAAA,IAA4B;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAQ,kBAAA,OAAAR,CAAA,QAAAc,aAAA;IAE+BE,EAAA,GAAAA,CAAA,KAC/E,CAACF,aAAA,GAAgBN,kBAAkB,MAAAS,SAAM;IAAAjB,CAAA,MAAAQ,kBAAA;IAAAR,CAAA,MAAAc,aAAA;IAAAd,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAD3C,OAAAkB,gBAAA,EAAAC,mBAAA,IAAgD/B,QAAA,CAAiC4B,EACtC;EAG3C,OAAAI,SAAA,EAAAC,YAAA,IAAkCjC,QAAA,MAAS;EAC3C;IAAAkC,IAAA;IAAAC;EAAA,IAAoB/B,cAAA;EAIA,MAAAgC,EAAA,GAAAN,gBAAA,EAAAO,IAAA;EAAkB,IAAAC,EAAA;EAAA,IAAA1B,CAAA,QAAAwB,EAAA;IADpCE,EAAA;MAAAC,cAAA,EACkBH;IAAkB;IACpCxB,CAAA,MAAAwB,EAAA;IAAAxB,CAAA,MAAA0B,EAAA;EAAA;IAAAA,EAAA,GAAA1B,CAAA;EAAA;EAHF,OAAA4B,cAAA,EAAAC,qBAAA,EAAAC,EAAA,IAAgFpC,iBAAA,CAC9EgC,EAEA;EAH4C;IAAAK,YAAA;IAAAC;EAAA,IAAAF,EAA8B;EAAA,IAAAG,EAAA;EAAA,IAAAjC,CAAA,QAAAkB,gBAAA,IAAAlB,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,QAAA,IAAAH,CAAA,QAAAO,KAAA;IAO1E0B,EAAA,GAAAC,EAAA;MAAC;QAAAC,GAAA;QAAAC;MAAA,IAAAF,EAAkB;MAAA,IAGfE,SAAA,KAAc,YACbA,SAAA,KAAc,YAAYrD,kBAAA,CAAmBmC,gBAAA;QAG9C,IAAAmB,UAAA;QAAiB,KACZ9B,KAAA;UACH8B,UAAA,CAAAA,CAAA,CAAAA,IAAA;QAAA;UAEAA,UAAA,CAAAA,CAAA,CAAaA,cAAc9B,KAAA,KACtBA,KAAA,CAAA+B,IAAA,CAAAC,CAAA,IAAkBA,CAAA,IAAKA,CAAA,CAAAhC,KAAA,KAAY4B,GAAA,CAAAK,EAAM,IAC1CjC,KAAA,CAAAA,KAAA,KAAgB4B,GAAA,CAAAK,EAAM;QAF1B;QAAA,IAKEH,UAAA;UAAA,IACEnC,OAAA,SAAY;YACdC,QAAA,MACMsC,KAAA,CAAAC,OAAA,CAAcnC,KAAA,IAASA,KAAA,KAAU;cAAAF,UAAA,EAEvBa,gBAAA,EAAAO,IAAA;cAAAlB,KAAA,EACL4B,GAAA,CAAAK;YAAA,EAEV;UAAA;YAEDrC,QAAA;cAAAE,UAAA,EACca,gBAAA,EAAAO,IAAA;cAAAlB,KAAA,EACL4B,GAAA,CAAAK;YAAA,CACT;UAAA;QAAA;QAIJ3B,qBAAA,CAAAI,SAAsB;MAAA;IAAA;IAE1BjB,CAAA,MAAAkB,gBAAA;IAAAlB,CAAA,MAAAE,OAAA;IAAAF,CAAA,MAAAG,QAAA;IAAAH,CAAA,MAAAO,KAAA;IAAAP,CAAA,MAAAiC,EAAA;EAAA;IAAAA,EAAA,GAAAjC,CAAA;EAAA;EApCF,MAAA2C,MAAA,GAAoDV,EAqCN;EAAA,IAAAC,EAAA;EAAA,IAAAU,EAAA;EAAA,IAAA5C,CAAA,SAAAS,WAAA,IAAAT,CAAA,SAAAQ,kBAAA;IAGpC0B,EAAA,GAAAA,CAAA;MAAA,IACJzB,WAAA;QAAA,IACED,kBAAA,CAAAO,MAAA,MAA8B;UAChCJ,OAAA,CAAQF,WAAA,CAAAoC,WAAA,CAAwBrC,kBAAkB,KAAAiB,IAAA,GAAAqB,MAAY;QAAA;UAE9DnC,OAAA,CACEH,kBAAA,CAAA8B,IAAA,CAAAS,UAAA,IACkBtC,WAAA,CAAAoC,WAAA,CAAwBE,UAAA,EAAAtB,IAAA,GAAAqB,MAAmB;QAAA;MAAA;IAAA;IAKlEF,EAAA,IAACnC,WAAA,EAAaD,kBAAA;IAAmBR,CAAA,OAAAS,WAAA;IAAAT,CAAA,OAAAQ,kBAAA;IAAAR,CAAA,OAAAkC,EAAA;IAAAlC,CAAA,OAAA4C,EAAA;EAAA;IAAAV,EAAA,GAAAlC,CAAA;IAAA4C,EAAA,GAAA5C,CAAA;EAAA;EAZpCb,SAAA,CAAU+C,EAYV,EAAGU,EAAiC;EAAA,IAAAI,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjD,CAAA,SAAAQ,kBAAA,IAAAR,CAAA,SAAAc,aAAA,IAAAd,CAAA,SAAAY,kBAAA;IAE1BoC,EAAA,GAAAA,CAAA;MAAA,IACJlC,aAAA,IAAiBF,kBAAA;QACnBO,mBAAA,CACEX,kBAAA,CAAA0C,IAAA,CAAAC,YAAA,IAAwCJ,YAAA,EAAAtB,IAAA,KAAqBb,kBAAA;MAAA;IAAA;IAGhEqC,EAAA,IAACrC,kBAAA,EAAoBE,aAAA,EAAeN,kBAAA;IAAmBR,CAAA,OAAAQ,kBAAA;IAAAR,CAAA,OAAAc,aAAA;IAAAd,CAAA,OAAAY,kBAAA;IAAAZ,CAAA,OAAAgD,EAAA;IAAAhD,CAAA,OAAAiD,EAAA;EAAA;IAAAD,EAAA,GAAAhD,CAAA;IAAAiD,EAAA,GAAAjD,CAAA;EAAA;EAN1Db,SAAA,CAAU6D,EAMV,EAAGC,EAAuD;EAAA,IAAAG,GAAA;EAAA,IAAAC,GAAA;EAAA,IAAArD,CAAA,SAAAkB,gBAAA,IAAAlB,CAAA,SAAAc,aAAA,IAAAd,CAAA,SAAAgC,YAAA;IAEhDoB,GAAA,GAAAA,CAAA;MAAA,IACJtC,aAAA,IAAiBI,gBAAA;QAGnBc,YAAA;QACAnB,qBAAA,CAAAI,SAAsB;MAAA;IAAA;IAEvBoC,GAAA,IAACrB,YAAA,EAAclB,aAAA,EAAeI,gBAAA;IAAiBlB,CAAA,OAAAkB,gBAAA;IAAAlB,CAAA,OAAAc,aAAA;IAAAd,CAAA,OAAAgC,YAAA;IAAAhC,CAAA,OAAAoD,GAAA;IAAApD,CAAA,OAAAqD,GAAA;EAAA;IAAAD,GAAA,GAAApD,CAAA;IAAAqD,GAAA,GAAArD,CAAA;EAAA;EAPlDb,SAAA,CAAUiE,GAOV,EAAGC,GAA+C;EAAA,IAAAC,GAAA;EAAA,IAAAC,GAAA;EAAA,IAAAvD,CAAA,SAAA+B,YAAA,IAAA/B,CAAA,SAAAc,aAAA;IAExCwC,GAAA,GAAAA,CAAA;MAAA,IACJxC,aAAA,KAAkBiB,YAAA;QACpBZ,mBAAA,CAAAF,SAAoB;MAAA;IAAA;IAErBsC,GAAA,IAACxB,YAAA,EAAcjB,aAAA;IAAcd,CAAA,OAAA+B,YAAA;IAAA/B,CAAA,OAAAc,aAAA;IAAAd,CAAA,OAAAsD,GAAA;IAAAtD,CAAA,OAAAuD,GAAA;EAAA;IAAAD,GAAA,GAAAtD,CAAA;IAAAuD,GAAA,GAAAvD,CAAA;EAAA;EAJhCb,SAAA,CAAUmE,GAIV,EAAGC,GAA6B;EAGR,MAAAC,GAAA,GAAAhD,kBAAkB,KAAAiD,MAAA,CAAAC,QAAA;EAAY,IAAAC,GAAA;EAAA,IAAAC,GAAA;EAAA,IAAA5D,CAAA,SAAAC,eAAA,IAAAD,CAAA,SAAA4B,cAAA,IAAA5B,CAAA,SAAA6B,qBAAA,IAAA7B,CAAA,SAAAkB,gBAAA,IAAAlB,CAAA,SAAAsB,IAAA,IAAAtB,CAAA,SAAA2C,MAAA,IAAA3C,CAAA,SAAAI,IAAA,IAAAJ,CAAA,SAAAS,WAAA,IAAAT,CAAA,SAAAoB,SAAA,IAAApB,CAAA,SAAAQ,kBAAA,IAAAR,CAAA,SAAAU,IAAA,IAAAV,CAAA,SAAAuB,CAAA,IAAAvB,CAAA,SAAAwD,GAAA,IAAAxD,CAAA,SAAAM,QAAA;IAI7CsD,GAAA,GAAAC,MAAA,CAAAC,GAAA;IAAAC,GAAA;MALT,MAAAC,KAAA,GAAczC,CAAA,CAAE;QAAAyC,KAAA,EACPlF,cAAA,CAAe0E,GAA8B,EAAUlC,IAAA;MAAA,CAChE;MAAA,KAEKZ,IAAA;QACIkD,GAAA;QAAA,MAAAG,GAAA;MAAA;MAIPJ,GAAA,GAAAM,KAAA,CAAC;QAAAC,SAAA,EAAArE,SAAA;QAAA2C,EAAA,EAA8B,GAAGpC,IAAA,UAAc;QAAA+D,QAAA,GAC7C3D,kBAAA,CAAAO,MAAA,MAA8B,IAC7BkD,KAAA,CAAAhF,QAAA;UAAAkF,QAAA,GACEC,IAAA,CAACvC,qBAAA;YAAAwC,WAAA,EACa;YAAAH,SAAA,EACD,CACT,GAAArE,SAAA,cAA0B,EAC1BS,QAAA,IAAY,GAAAT,SAAA,wBAAoC,EAAAyE,MAAA,CAAAC,OAExC,EAAAC,IAAA,CACF;YAAAC,OAAA,EACCxE,eAAA,GAAAgB,SAAA,GAA8B+C,KAAA;YAAAG,QAAA,EAEtClE,eAAA,GAAkBA,eAAA,GAAkBmE,IAAA,CAAA9E,QAAA,IAAC;UAAA,C,GAExC8E,IAAA,CAACxC,cAAA;YAAAe;UAAA,C;YAGJnC,kBAAA,CAAAO,MAAA,IAA4B,IAC3BkD,KAAA,CAAAhF,QAAA;UAAAkF,QAAA,GACEC,IAAA,CAAAzE,KAAA;YAAA+E,UAAA,EACa;YAAAC,eAAA,EACK;YAAAC,aAAA,EAAAA,CAAA,KACKvD,YAAA,MAAa;YAAAwD,YAAA,EAAAA,CAAA,KACdxD,YAAA,KAAa;YAAAyD,SAAA,EACvB;YAAAC,MAAA,EAAAC,GAAA;cACD;gBAAAC,KAAA,EAAAC;cAAA,IAAAF,GAAqB;cAAA,OAC5BZ,IAAA,CAAAxE,SAAA,CAAAuF,WAAA;gBAAAhB,QAAA,EACG3D,kBAAA,CAAA4E,GAAA,CAAAC,iBAAA;kBAAA,IACK5E,WAAA,CAAAoC,WAAA,CAAwBwC,iBAAA,EAAA5D,IAAA,GAAAqB,MAAA;oBAAA,OAExBsB,IAAA,CAAAxE,SAAA,CAAAH,MAAA;sBAAAyE,SAAA,EACa,GAAArE,SAAA,sBAAkCwF,iBAAA,EAAA5D,IAAA,EAAyB;sBAAA6D,OAAA,EAAAA,CAAA;wBAGpEJ,UAAA;wBACArE,qBAAA,CAAsBwE,iBAAA,EAAA5D,IAAmB;sBAAA;sBAAA0C,QAAA,EAG1CrF,cAAA,CAAeuG,iBAAA,EAAA5B,MAAA,EAAAC,QAAA,EAAqCpC,IAAA;oBAAA,GANhD+D,iBAAA,EAAA5D,IAAmB;kBAAA;kBAAA;gBAAA,CAYhC;cAAA,C;;;cAGW;gBAAA8D,MAAA;gBAAA,GAAAC;cAAA,IAAAC,GAA0B;cAAA,OACvCrB,IAAA,CAAA3E,MAAA;gBAAAyE,SAAA,EACa,GAAArE,SAAA,cAA0B;gBAAA,GACjC2F,WAAW;gBAAAnB,WAAA,EACH;gBAAAqB,QAAA,EACFH,MAAA;gBAAAd,OAAA,EACDrD,SAAA,GAAY,KAAKG,CAAA,CAAE;gBAAA4C,QAAA,EAE5BC,IAAA,CAAA9E,QAAA,IAAC;cAAA,C;;cAIN4B,gBAAA,IAAoBT,WAAA,CAAAoC,WAAA,CAAwB3B,gBAAA,EAAAO,IAAA,GAAAqB,MAAyB,IACpEsB,IAAA,CAACxC,cAAA;YAAAe;UAAA,C;;;;;;;;;;;;;;;;;;;;;;;;;;;SA7DTgB,G;CAmEJ","ignoreList":[]}

package/dist/elements/AppHeader/index.css

@@ -60,6 +60,7 @@
     flex-grow: 0;
     gap: var(--spacer-1);
     width: 100%;
+    min-width: 0;
   }
 
   .app-header__controls-wrapper {
@@ -124,12 +125,18 @@
     margin-right: var(--spacer-3);
   }
 
+  .app-header--nav-open:not(.app-header--embedded) .app-header__sidebar-toggle {
+    display: none;
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1440px) {
     .app-header__actions {
       max-width: 500px;
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 1024px) {
     .app-header__gradient-placeholder {
       right: var(--spacer-3);
@@ -140,6 +147,7 @@
     }
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .app-header__wrapper {
       align-items: flex-start;