@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d3909a9

package/dist/providers/Theme/index.js

@@ -4,113 +4,223 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, use, useCallback, useEffect, useState } from 'react';
 import { useConfig } from '../Config/index.js';
+import { useSearchParams } from '../RouterAdapter/index.js';
+import { defaultTheme } from './shared.js';
+export { defaultTheme };
 const initialContext = {
   autoMode: true,
+  highContrastMode: false,
+  setHighContrastMode: () => null,
   setTheme: () => null,
   theme: 'light'
 };
-const Context = /*#__PURE__*/createContext(initialContext);
+const Context = /*#__PURE__*/createContext(undefined);
 function setCookie(cname, cvalue, exdays) {
   const d = new Date();
   d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
   const expires = 'expires=' + d.toUTCString();
   document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
 }
-const getTheme = cookieKey => {
-  let theme;
-  const themeFromCookies = window.document.cookie.split('; ').find(row => row.startsWith(`${cookieKey}=`))?.split('=')[1];
-  if (themeFromCookies === 'light' || themeFromCookies === 'dark') {
-    theme = themeFromCookies;
-  } else {
-    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
+const detectTheme = cookieKey => {
+  const fromCookie = window.document.cookie.split('; ').find(row => row.startsWith(`${cookieKey}=`))?.split('=')[1];
+  const theme = fromCookie === 'light' || fromCookie === 'dark' ? fromCookie : window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   document.documentElement.setAttribute('data-theme', theme);
   return {
-    theme,
-    themeFromCookies
+    isAutoMode: fromCookie !== 'light' && fromCookie !== 'dark',
+    theme
   };
 };
-export const defaultTheme = 'light';
+const detectHighContrastMode = cookieKey => {
+  const fromCookie = window.document.cookie.split('; ').find(row => row.startsWith(`${cookieKey}=`))?.split('=')[1] ?? null;
+  const isHighContrast = fromCookie === 'true' ? true : fromCookie === 'false' ? false : !!(window.matchMedia && window.matchMedia('(prefers-contrast: more)').matches);
+  if (isHighContrast) {
+    document.documentElement.setAttribute('data-enhanced-contrast', '');
+  } else {
+    document.documentElement.removeAttribute('data-enhanced-contrast');
+  }
+  return isHighContrast;
+};
+const isValidThemeParam = value => value === 'auto' || value === 'light' || value === 'dark';
+/**
+ * Provides theme context to its children.
+ *
+ * At the root (no parent ThemeProvider): reads/writes cookies, responds to
+ * OS preference, owns setTheme and setHighContrastMode.
+ *
+ * When nested inside another ThemeProvider (e.g. inside a Popup): acts as a
+ * scoped visual  the `theme` prop sets the local theme, but setThemeoverride
+ * and setHighContrastMode bubble up through each level to the root provider so
+ * mutations always affect the global user preference.
+ *
+ * The ThemeProvider also reads the `?theme=light|dark|auto` query parameter and
+ * persists it to the theme cookie using the same mechanism as manual theme selection.
+ */
 export const ThemeProvider = t0 => {
-  const $ = _c(11);
+  const $ = _c(32);
   const {
     children,
-    theme: initialTheme
+    highContrastMode: initialHighContrastMode,
+    theme: themeOverride
   } = t0;
+  const outerContext = use(Context);
+  const isScoped = outerContext !== undefined;
   const {
     config
   } = useConfig();
   const preselectedTheme = config.admin.theme;
-  const cookieKey = `${config.cookiePrefix || "payload"}-theme`;
-  const [theme, setThemeState] = useState(initialTheme || defaultTheme);
-  const [autoMode, setAutoMode] = useState();
+  const themeCookieKey = `${config.cookiePrefix || "payload"}-theme`;
+  const contrastCookieKey = `${config.cookiePrefix || "payload"}-high-contrast-mode`;
+  const themeParam = useSearchParams().get("theme")?.toLowerCase();
+  const [theme, setThemeState] = useState(themeOverride ?? defaultTheme);
+  const [autoMode, setAutoMode] = useState(!isScoped);
+  const [highContrastMode, setHighContrastModeState] = useState(isScoped ? outerContext.highContrastMode ?? false : initialHighContrastMode ?? false);
   let t1;
+  if ($[0] !== isScoped || $[1] !== outerContext || $[2] !== themeCookieKey) {
+    t1 = (themeToSet, options) => {
+      if (isScoped && !options?.scoped) {
+        outerContext.setTheme(themeToSet, options);
+        return;
+      }
+      const resolvedTheme = themeToSet === "auto" ? window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light" : themeToSet;
+      setThemeState(resolvedTheme);
+      setAutoMode(themeToSet === "auto");
+      if (!isScoped) {
+        setCookie(themeCookieKey, themeToSet, themeToSet === "auto" ? -1 : 365);
+        document.documentElement.setAttribute("data-theme", resolvedTheme);
+      }
+    };
+    $[0] = isScoped;
+    $[1] = outerContext;
+    $[2] = themeCookieKey;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const setTheme = t1;
   let t2;
-  if ($[0] !== cookieKey || $[1] !== preselectedTheme) {
-    t1 = () => {
-      if (preselectedTheme !== "all") {
+  if ($[4] !== contrastCookieKey || $[5] !== isScoped || $[6] !== outerContext) {
+    t2 = (isHighContrast, options_0) => {
+      if (isScoped && !options_0?.scoped) {
+        outerContext.setHighContrastMode(isHighContrast, options_0);
         return;
       }
-      const {
-        theme: theme_0,
-        themeFromCookies
-      } = getTheme(cookieKey);
-      setThemeState(theme_0);
-      setAutoMode(!themeFromCookies);
+      setHighContrastModeState(isHighContrast);
+      if (!isScoped) {
+        setCookie(contrastCookieKey, String(isHighContrast), 365);
+        if (isHighContrast) {
+          document.documentElement.setAttribute("data-enhanced-contrast", "");
+        } else {
+          document.documentElement.removeAttribute("data-enhanced-contrast");
+        }
+      }
     };
-    t2 = [preselectedTheme, cookieKey];
-    $[0] = cookieKey;
-    $[1] = preselectedTheme;
-    $[2] = t1;
-    $[3] = t2;
+    $[4] = contrastCookieKey;
+    $[5] = isScoped;
+    $[6] = outerContext;
+    $[7] = t2;
   } else {
-    t1 = $[2];
-    t2 = $[3];
+    t2 = $[7];
   }
-  useEffect(t1, t2);
+  const setHighContrastMode = t2;
   let t3;
-  if ($[4] !== cookieKey) {
-    t3 = themeToSet => {
-      if (themeToSet === "light" || themeToSet === "dark") {
-        setThemeState(themeToSet);
-        setAutoMode(false);
-        setCookie(cookieKey, themeToSet, 365);
-        document.documentElement.setAttribute("data-theme", themeToSet);
-      } else {
-        if (themeToSet === "auto") {
-          setCookie(cookieKey, themeToSet, -1);
-          const themeFromOS = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-          document.documentElement.setAttribute("data-theme", themeFromOS);
-          setAutoMode(true);
-          setThemeState(themeFromOS);
-        }
+  if ($[8] !== isScoped || $[9] !== outerContext) {
+    t3 = () => {
+      if (isScoped) {
+        setHighContrastModeState(outerContext.highContrastMode);
+      }
+    };
+    $[8] = isScoped;
+    $[9] = outerContext;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const t4 = outerContext?.highContrastMode;
+  let t5;
+  if ($[11] !== isScoped || $[12] !== t4) {
+    t5 = [isScoped, t4];
+    $[11] = isScoped;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  useEffect(t3, t5);
+  let t6;
+  let t7;
+  if ($[14] !== isScoped || $[15] !== preselectedTheme || $[16] !== setTheme || $[17] !== themeCookieKey || $[18] !== themeParam) {
+    t6 = () => {
+      if (isScoped || preselectedTheme !== "all") {
+        return;
+      }
+      if (isValidThemeParam(themeParam)) {
+        setTheme(themeParam);
+        return;
+      }
+      const {
+        isAutoMode,
+        theme: detectedTheme
+      } = detectTheme(themeCookieKey);
+      setThemeState(detectedTheme);
+      setAutoMode(isAutoMode);
+    };
+    t7 = [isScoped, preselectedTheme, themeCookieKey, themeParam, setTheme];
+    $[14] = isScoped;
+    $[15] = preselectedTheme;
+    $[16] = setTheme;
+    $[17] = themeCookieKey;
+    $[18] = themeParam;
+    $[19] = t6;
+    $[20] = t7;
+  } else {
+    t6 = $[19];
+    t7 = $[20];
+  }
+  useEffect(t6, t7);
+  let t8;
+  let t9;
+  if ($[21] !== contrastCookieKey || $[22] !== isScoped) {
+    t8 = () => {
+      if (isScoped) {
+        return;
       }
+      setHighContrastModeState(detectHighContrastMode(contrastCookieKey));
     };
-    $[4] = cookieKey;
-    $[5] = t3;
+    t9 = [isScoped, contrastCookieKey];
+    $[21] = contrastCookieKey;
+    $[22] = isScoped;
+    $[23] = t8;
+    $[24] = t9;
   } else {
-    t3 = $[5];
+    t8 = $[23];
+    t9 = $[24];
   }
-  const setTheme = t3;
-  let t4;
-  if ($[6] !== autoMode || $[7] !== children || $[8] !== setTheme || $[9] !== theme) {
-    t4 = _jsx(Context, {
+  useEffect(t8, t9);
+  const t10 = isScoped ? outerContext.autoMode : autoMode;
+  const t11 = isScoped ? outerContext.theme : theme;
+  let t12;
+  if ($[25] !== children || $[26] !== highContrastMode || $[27] !== setHighContrastMode || $[28] !== setTheme || $[29] !== t10 || $[30] !== t11) {
+    t12 = _jsx(Context, {
       value: {
-        autoMode,
+        autoMode: t10,
+        highContrastMode,
+        setHighContrastMode,
         setTheme,
-        theme
+        theme: t11
       },
       children
     });
-    $[6] = autoMode;
-    $[7] = children;
-    $[8] = setTheme;
-    $[9] = theme;
-    $[10] = t4;
+    $[25] = children;
+    $[26] = highContrastMode;
+    $[27] = setHighContrastMode;
+    $[28] = setTheme;
+    $[29] = t10;
+    $[30] = t11;
+    $[31] = t12;
   } else {
-    t4 = $[10];
+    t12 = $[31];
   }
-  return t4;
+  return t12;
 };
-export const useTheme = () => use(Context);
+export const useTheme = () => use(Context) ?? initialContext;
 //# sourceMappingURL=index.js.map

package/dist/providers/Theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","createContext","use","useCallback","useEffect","useState","useConfig","initialContext","autoMode","setTheme","theme","Context","setCookie","cname","cvalue","exdays","d","Date","setTime","getTime","expires","toUTCString","document","cookie","getTheme","cookieKey","themeFromCookies","window","split","find","row","startsWith","matchMedia","matches","documentElement","setAttribute","defaultTheme","ThemeProvider","t0","$","children","initialTheme","config","preselectedTheme","admin","cookiePrefix","setThemeState","setAutoMode","t1","t2","theme_0","t3","themeToSet","themeFromOS","t4","_jsx","value","useTheme"],"sources":["../../../src/providers/Theme/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use, useCallback, useEffect, useState } from 'react'\n\nimport { useConfig } from '../Config/index.js'\n\nexport type Theme = 'dark' | 'light'\n\nexport type ThemeContext = {\n  autoMode: boolean\n  setTheme: (theme: Theme) => void\n  theme: Theme\n}\n\nconst initialContext: ThemeContext = {\n  autoMode: true,\n  setTheme: () => null,\n  theme: 'light',\n}\n\nconst Context = createContext(initialContext)\n\nfunction setCookie(cname, cvalue, exdays) {\n  const d = new Date()\n  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)\n  const expires = 'expires=' + d.toUTCString()\n  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'\n}\n\nconst getTheme = (\n  cookieKey,\n): {\n  theme: Theme\n  themeFromCookies: null | string\n} => {\n  let theme: Theme\n\n  const themeFromCookies = window.document.cookie\n    .split('; ')\n    .find((row) => row.startsWith(`${cookieKey}=`))\n    ?.split('=')[1]\n\n  if (themeFromCookies === 'light' || themeFromCookies === 'dark') {\n    theme = themeFromCookies\n  } else {\n    theme =\n      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n  }\n\n  document.documentElement.setAttribute('data-theme', theme)\n\n  return { theme, themeFromCookies }\n}\n\nexport const defaultTheme = 'light'\n\nexport const ThemeProvider: React.FC<{\n  children?: React.ReactNode\n  theme?: Theme\n}> = ({ children, theme: initialTheme }) => {\n  const { config } = useConfig()\n\n  const preselectedTheme = config.admin.theme\n  const cookieKey = `${config.cookiePrefix || 'payload'}-theme`\n\n  const [theme, setThemeState] = useState<Theme>(initialTheme || defaultTheme)\n\n  const [autoMode, setAutoMode] = useState<boolean>()\n\n  useEffect(() => {\n    if (preselectedTheme !== 'all') {\n      return\n    }\n\n    const { theme, themeFromCookies } = getTheme(cookieKey)\n    setThemeState(theme)\n    setAutoMode(!themeFromCookies)\n  }, [preselectedTheme, cookieKey])\n\n  const setTheme = useCallback(\n    (themeToSet: 'auto' | Theme) => {\n      if (themeToSet === 'light' || themeToSet === 'dark') {\n        setThemeState(themeToSet)\n        setAutoMode(false)\n        setCookie(cookieKey, themeToSet, 365)\n        document.documentElement.setAttribute('data-theme', themeToSet)\n      } else if (themeToSet === 'auto') {\n        // to delete the cookie, we set an expired date\n        setCookie(cookieKey, themeToSet, -1)\n        const themeFromOS =\n          window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches\n            ? 'dark'\n            : 'light'\n        document.documentElement.setAttribute('data-theme', themeFromOS)\n        setAutoMode(true)\n        setThemeState(themeFromOS)\n      }\n    },\n    [cookieKey],\n  )\n\n  return <Context value={{ autoMode, setTheme, theme }}>{children}</Context>\n}\n\nexport const useTheme = (): ThemeContext => use(Context)\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,aAAa,EAAEC,GAAG,EAAEC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ;AAE5E,SAASC,SAAS,QAAQ;AAU1B,MAAMC,cAAA,GAA+B;EACnCC,QAAA,EAAU;EACVC,QAAA,EAAUA,CAAA,KAAM;EAChBC,KAAA,EAAO;AACT;AAEA,MAAMC,OAAA,gBAAUV,aAAA,CAAcM,cAAA;AAE9B,SAASK,UAAUC,KAAK,EAAEC,MAAM,EAAEC,MAAM;EACtC,MAAMC,CAAA,GAAI,IAAIC,IAAA;EACdD,CAAA,CAAEE,OAAO,CAACF,CAAA,CAAEG,OAAO,KAAKJ,MAAA,GAAS,KAAK,KAAK,KAAK;EAChD,MAAMK,OAAA,GAAU,aAAaJ,CAAA,CAAEK,WAAW;EAC1CC,QAAA,CAASC,MAAM,GAAGV,KAAA,GAAQ,MAAMC,MAAA,GAAS,MAAMM,OAAA,GAAU;AAC3D;AAEA,MAAMI,QAAA,GACJC,SAAA;EAKA,IAAIf,KAAA;EAEJ,MAAMgB,gBAAA,GAAmBC,MAAA,CAAOL,QAAQ,CAACC,MAAM,CAC5CK,KAAK,CAAC,MACNC,IAAI,CAAEC,GAAA,IAAQA,GAAA,CAAIC,UAAU,CAAC,GAAGN,SAAA,GAAY,IAC3CG,KAAA,CAAM,IAAI,CAAC,EAAE;EAEjB,IAAIF,gBAAA,KAAqB,WAAWA,gBAAA,KAAqB,QAAQ;IAC/DhB,KAAA,GAAQgB,gBAAA;EACV,OAAO;IACLhB,KAAA,GACEiB,MAAA,CAAOK,UAAU,IAAIL,MAAA,CAAOK,UAAU,CAAC,gCAAgCC,OAAO,GAC1E,SACA;EACR;EAEAX,QAAA,CAASY,eAAe,CAACC,YAAY,CAAC,cAAczB,KAAA;EAEpD,OAAO;IAAEA,KAAA;IAAOgB;EAAiB;AACnC;AAEA,OAAO,MAAMU,YAAA,GAAe;AAE5B,OAAO,MAAMC,aAAA,GAGRC,EAAA;EAAA,MAAAC,CAAA,GAAAxC,EAAA;EAAC;IAAAyC,QAAA;IAAA9B,KAAA,EAAA+B;EAAA,IAAAH,EAAiC;EACrC;IAAAI;EAAA,IAAmBpC,SAAA;EAEnB,MAAAqC,gBAAA,GAAyBD,MAAA,CAAAE,KAAA,CAAAlC,KAAA;EACzB,MAAAe,SAAA,GAAkB,GAAGiB,MAAA,CAAAG,YAAA,IAAuB,iBAAiB;EAE7D,OAAAnC,KAAA,EAAAoC,aAAA,IAA+BzC,QAAA,CAAgBoC,YAAA,IAAAL,YAAgB;EAE/D,OAAA5B,QAAA,EAAAuC,WAAA,IAAgC1C,QAAA;EAAA,IAAA2C,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAd,SAAA,IAAAc,CAAA,QAAAI,gBAAA;IAEtBK,EAAA,GAAAA,CAAA;MAAA,IACJL,gBAAA,KAAqB;QAAA;MAAA;MAIzB;QAAAjC,KAAA,EAAAwC,OAAA;QAAAxB;MAAA,IAAoCF,QAAA,CAASC,SAAA;MAC7CqB,aAAA,CAAcpC,OAAA;MACdqC,WAAA,EAAarB,gBAAA;IAAA;IACZuB,EAAA,IAACN,gBAAA,EAAkBlB,SAAA;IAAUc,CAAA,MAAAd,SAAA;IAAAc,CAAA,MAAAI,gBAAA;IAAAJ,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAD,EAAA,GAAAT,CAAA;IAAAU,EAAA,GAAAV,CAAA;EAAA;EARhCnC,SAAA,CAAU4C,EAQV,EAAGC,EAA6B;EAAA,IAAAE,EAAA;EAAA,IAAAZ,CAAA,QAAAd,SAAA;IAG9B0B,EAAA,GAAAC,UAAA;MAAA,IACMA,UAAA,KAAe,WAAWA,UAAA,KAAe;QAC3CN,aAAA,CAAcM,UAAA;QACdL,WAAA,MAAY;QACZnC,SAAA,CAAUa,SAAA,EAAW2B,UAAA,KAAY;QACjC9B,QAAA,CAAAY,eAAA,CAAAC,YAAA,CAAsC,cAAciB,UAAA;MAAA;QAAA,IAC3CA,UAAA,KAAe;UAExBxC,SAAA,CAAUa,SAAA,EAAW2B,UAAA,IAAa;UAClC,MAAAC,WAAA,GACE1B,MAAA,CAAAK,UAAA,IAAqBL,MAAA,CAAAK,UAAA,CAAkB,gCAAAC,OAAuC,GAC1E,SACA;UACNX,QAAA,CAAAY,eAAA,CAAAC,YAAA,CAAsC,cAAckB,WAAA;UACpDN,WAAA,KAAY;UACZD,aAAA,CAAcO,WAAA;QAAA;MAAA;IAAA;IAElBd,CAAA,MAAAd,SAAA;IAAAc,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAlBF,MAAA9B,QAAA,GAAiB0C,EAmBJ;EAAA,IAAAG,EAAA;EAAA,IAAAf,CAAA,QAAA/B,QAAA,IAAA+B,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAA9B,QAAA,IAAA8B,CAAA,QAAA7B,KAAA;IAGN4C,EAAA,GAAAC,IAAA,CAAA5C,OAAA;MAAA6C,KAAA;QAAAhD,QAAA;QAAAC,QAAA;QAAAC;MAAA;MAAA8B;IAAA,C;;;;;;;;;SAAAc,E;CACT;AAEA,OAAO,MAAMG,QAAA,GAAWA,CAAA,KAAoBvD,GAAA,CAAIS,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","createContext","use","useCallback","useEffect","useState","useConfig","useSearchParams","defaultTheme","initialContext","autoMode","highContrastMode","setHighContrastMode","setTheme","theme","Context","undefined","setCookie","cname","cvalue","exdays","d","Date","setTime","getTime","expires","toUTCString","document","cookie","detectTheme","cookieKey","fromCookie","window","split","find","row","startsWith","matchMedia","matches","documentElement","setAttribute","isAutoMode","detectHighContrastMode","isHighContrast","removeAttribute","isValidThemeParam","value","ThemeProvider","t0","$","children","initialHighContrastMode","themeOverride","outerContext","isScoped","config","preselectedTheme","admin","themeCookieKey","cookiePrefix","contrastCookieKey","themeParam","get","toLowerCase","setThemeState","setAutoMode","setHighContrastModeState","t1","themeToSet","options","scoped","resolvedTheme","t2","options_0","String","t3","t4","t5","t6","t7","detectedTheme","t8","t9","t10","t11","t12","_jsx","useTheme"],"sources":["../../../src/providers/Theme/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use, useCallback, useEffect, useState } from 'react'\n\nimport { useConfig } from '../Config/index.js'\nimport { useSearchParams } from '../RouterAdapter/index.js'\nimport { defaultTheme, type Theme } from './shared.js'\n\nexport { defaultTheme, type Theme }\n\nexport type ThemeContext = {\n  autoMode: boolean\n  highContrastMode: boolean\n  setHighContrastMode: (isHighContrast: boolean, options?: { scoped?: boolean }) => void\n  setTheme: (theme: 'auto' | Theme, options?: { scoped?: boolean }) => void\n  theme: Theme\n}\n\nconst initialContext: ThemeContext = {\n  autoMode: true,\n  highContrastMode: false,\n  setHighContrastMode: () => null,\n  setTheme: () => null,\n  theme: 'light',\n}\n\nconst Context = createContext<ThemeContext | undefined>(undefined)\n\nfunction setCookie(cname: string, cvalue: string, exdays: number) {\n  const d = new Date()\n  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000)\n  const expires = 'expires=' + d.toUTCString()\n  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'\n}\n\nconst detectTheme = (cookieKey: string): { isAutoMode: boolean; theme: Theme } => {\n  const fromCookie = window.document.cookie\n    .split('; ')\n    .find((row) => row.startsWith(`${cookieKey}=`))\n    ?.split('=')[1]\n\n  const theme: Theme =\n    fromCookie === 'light' || fromCookie === 'dark'\n      ? fromCookie\n      : window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches\n        ? 'dark'\n        : 'light'\n\n  document.documentElement.setAttribute('data-theme', theme)\n\n  return { isAutoMode: fromCookie !== 'light' && fromCookie !== 'dark', theme }\n}\n\nconst detectHighContrastMode = (cookieKey: string): boolean => {\n  const fromCookie =\n    window.document.cookie\n      .split('; ')\n      .find((row) => row.startsWith(`${cookieKey}=`))\n      ?.split('=')[1] ?? null\n\n  const isHighContrast =\n    fromCookie === 'true'\n      ? true\n      : fromCookie === 'false'\n        ? false\n        : !!(window.matchMedia && window.matchMedia('(prefers-contrast: more)').matches)\n\n  if (isHighContrast) {\n    document.documentElement.setAttribute('data-enhanced-contrast', '')\n  } else {\n    document.documentElement.removeAttribute('data-enhanced-contrast')\n  }\n\n  return isHighContrast\n}\n\nconst isValidThemeParam = (value: null | string): value is 'auto' | Theme =>\n  value === 'auto' || value === 'light' || value === 'dark'\n\n/**\n * Provides theme context to its children.\n *\n * At the root (no parent ThemeProvider): reads/writes cookies, responds to\n * OS preference, owns setTheme and setHighContrastMode.\n *\n * When nested inside another ThemeProvider (e.g. inside a Popup): acts as a\n * scoped visual  the `theme` prop sets the local theme, but setThemeoverride\n * and setHighContrastMode bubble up through each level to the root provider so\n * mutations always affect the global user preference.\n *\n * The ThemeProvider also reads the `?theme=light|dark|auto` query parameter and\n * persists it to the theme cookie using the same mechanism as manual theme selection.\n */\nexport const ThemeProvider: React.FC<{\n  children?: React.ReactNode\n  highContrastMode?: boolean\n  theme?: Theme\n}> = ({ children, highContrastMode: initialHighContrastMode, theme: themeOverride }) => {\n  const outerContext = use(Context)\n  const isScoped = outerContext !== undefined\n\n  const { config } = useConfig()\n  const preselectedTheme = config.admin.theme\n  const themeCookieKey = `${config.cookiePrefix || 'payload'}-theme`\n  const contrastCookieKey = `${config.cookiePrefix || 'payload'}-high-contrast-mode`\n\n  const themeParam = useSearchParams().get('theme')?.toLowerCase()\n\n  const [theme, setThemeState] = useState<Theme>(themeOverride ?? defaultTheme)\n  const [autoMode, setAutoMode] = useState<boolean>(!isScoped)\n  const [highContrastMode, setHighContrastModeState] = useState<boolean>(\n    isScoped ? (outerContext.highContrastMode ?? false) : (initialHighContrastMode ?? false),\n  )\n\n  // Setters bubble up to the root provider by default. Pass { scoped: true }\n  // to update only the local (scoped) theme without affecting global state.\n  const setTheme = useCallback(\n    (themeToSet: 'auto' | Theme, options?: { scoped?: boolean }) => {\n      if (isScoped && !options?.scoped) {\n        outerContext.setTheme(themeToSet, options)\n        return\n      }\n      const resolvedTheme: Theme =\n        themeToSet === 'auto'\n          ? window.matchMedia?.('(prefers-color-scheme: dark)').matches\n            ? 'dark'\n            : 'light'\n          : themeToSet\n\n      setThemeState(resolvedTheme)\n      setAutoMode(themeToSet === 'auto')\n\n      if (!isScoped) {\n        setCookie(themeCookieKey, themeToSet, themeToSet === 'auto' ? -1 : 365)\n        document.documentElement.setAttribute('data-theme', resolvedTheme)\n      }\n    },\n    [isScoped, outerContext, themeCookieKey],\n  )\n\n  const setHighContrastMode = useCallback(\n    (isHighContrast: boolean, options?: { scoped?: boolean }) => {\n      if (isScoped && !options?.scoped) {\n        outerContext.setHighContrastMode(isHighContrast, options)\n        return\n      }\n      setHighContrastModeState(isHighContrast)\n      if (!isScoped) {\n        setCookie(contrastCookieKey, String(isHighContrast), 365)\n        if (isHighContrast) {\n          document.documentElement.setAttribute('data-enhanced-contrast', '')\n        } else {\n          document.documentElement.removeAttribute('data-enhanced-contrast')\n        }\n      }\n    },\n    [isScoped, outerContext, contrastCookieKey],\n  )\n\n  // Keep highContrastMode in sync with the outer provider when scoped.\n  useEffect(() => {\n    if (isScoped) {\n      setHighContrastModeState(outerContext.highContrastMode)\n    }\n  }, [isScoped, outerContext?.highContrastMode])\n\n  // Resolve the root theme: a valid `?theme` param wins (applied via setTheme so\n  // it persists to the theme cookie exactly like a manual selection; otherwise\n  // fall back to the cookie or OS preference.\n  useEffect(() => {\n    if (isScoped || preselectedTheme !== 'all') {\n      return\n    }\n    if (isValidThemeParam(themeParam)) {\n      setTheme(themeParam)\n      return\n    }\n    const { isAutoMode, theme: detectedTheme } = detectTheme(themeCookieKey)\n    setThemeState(detectedTheme)\n    setAutoMode(isAutoMode)\n  }, [isScoped, preselectedTheme, themeCookieKey, themeParam, setTheme])\n\n  useEffect(() => {\n    if (isScoped) {\n      return\n    }\n    setHighContrastModeState(detectHighContrastMode(contrastCookieKey))\n  }, [isScoped, contrastCookieKey])\n\n  return (\n    <Context\n      value={{\n        autoMode: isScoped ? outerContext.autoMode : autoMode,\n        highContrastMode,\n        setHighContrastMode,\n        setTheme,\n        theme: isScoped ? outerContext.theme : theme,\n      }}\n    >\n      {children}\n    </Context>\n  )\n}\n\nexport const useTheme = (): ThemeContext => use(Context) ?? initialContext\n"],"mappings":"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","ignoreList":[]}

package/dist/providers/Theme/shared.d.ts

@@ -0,0 +1,3 @@
+export type Theme = 'dark' | 'light';
+export declare const defaultTheme: Theme;
+//# sourceMappingURL=shared.d.ts.map

package/dist/providers/Theme/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/providers/Theme/shared.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AAEpC,eAAO,MAAM,YAAY,EAAE,KAAe,CAAA"}

package/dist/providers/Theme/shared.js

@@ -0,0 +1,2 @@
+export const defaultTheme = 'light';
+//# sourceMappingURL=shared.js.map

package/dist/providers/Theme/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","names":["defaultTheme"],"sources":["../../../src/providers/Theme/shared.ts"],"sourcesContent":["export type Theme = 'dark' | 'light'\n\nexport const defaultTheme: Theme = 'light'\n"],"mappings":"AAEA,OAAO,MAAMA,YAAA,GAAsB","ignoreList":[]}

package/dist/providers/ToastContainer/index.css

@@ -0,0 +1,207 @@
+@layer payload-default {
+  .payload-toast-container {
+    padding: 0;
+    margin: 0;
+
+    .toast-title {
+      padding-inline: var(--spacer-1);
+      color: var(--color-text);
+      font-size: var(--text-body-medium-bold-font-size);
+      font-weight: var(--text-body-medium-bold-font-weight);
+      letter-spacing: var(--text-body-medium-bold-letter-spacing);
+      line-height: var(--text-body-medium-bold-line-height);
+    }
+
+    .payload-toast-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacer-2);
+      min-height: var(--spacer-6);
+      /* set width to match FPL */
+      inline-size: 280px;
+      margin: 0;
+      padding: var(--spacer-2);
+      color: var(--color-text);
+      font-style: normal;
+      font-weight: var(--font-weight-strong);
+      background: var(--color-bg-elevated);
+      border-radius: var(--radius-large);
+      box-shadow: var(--elevation-100-canvas);
+
+      .toast-content {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--spacer-1);
+        width: 100%;
+        transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        padding-block: var(--spacer-1);
+      }
+
+      &[data-front='false'] {
+        .toast-content {
+          opacity: 0;
+        }
+      }
+
+      &[data-expanded='true'] {
+        .toast-content {
+          opacity: 1;
+        }
+      }
+
+      .toast-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        flex-shrink: 0;
+      }
+
+      .toast-icon + .toast-content .toast-title {
+        padding-inline-start: 0;
+      }
+
+      &.toast-error {
+        color: var(--color-text-ondanger);
+        background: var(--color-bg-danger);
+
+        .toast-title {
+          color: var(--color-text-ondanger);
+        }
+
+        .icon--warning {
+          color: var(--color-text-ondanger);
+        }
+      }
+
+      &.toast-warning {
+        .icon--warning {
+          color: var(--color-icon-warning);
+        }
+      }
+    }
+  }
+}
+
+/* Sonner injects unlayered `:where()` (0,0,0) styles that beat our layered rules. These overrides
+   are unlayered too, winning on class specificity. */
+
+.payload-toast-container .toast-title {
+  font-weight: var(--text-body-medium-bold-font-weight);
+  line-height: var(--text-body-medium-bold-line-height);
+}
+
+/* Sonner forces [data-icon] to 16px; use a --spacer-4 (24px) box so our icons fit. */
+.payload-toast-container .payload-toast-item .toast-icon {
+  position: relative;
+  width: var(--spacer-4);
+  height: var(--spacer-4);
+  margin: 0;
+  justify-content: center;
+}
+
+.payload-toast-container .payload-toast-item .toast-icon svg {
+  margin: 0;
+}
+
+/* Spinner wrapper is `absolute; inset: 0`; restore flex flow so the box centers it. */
+.payload-toast-container .payload-toast-item .toast-icon .sonner-loading-wrapper {
+  position: static;
+}
+
+.payload-toast-container
+  .payload-toast-item
+  .toast-icon
+  .sonner-loading-wrapper[data-visible='false'] {
+  display: none;
+}
+
+/* Sonner positions [data-close-button] absolutely; place it inline as a --spacer-4 (24px) IconButton. */
+.payload-toast-container .payload-toast-item .payload-toast-close-button {
+  position: relative;
+  inset: auto;
+  order: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: var(--spacer-4);
+  min-height: var(--spacer-4);
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-medium);
+  background: transparent;
+  color: var(--color-icon);
+  transform: none;
+  cursor: pointer;
+  transition: none;
+}
+
+/* Sonner sets a dark-theme base background on [data-close-button]. Override with higher specificity. */
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item
+  [data-close-button].payload-toast-close-button {
+  background: transparent;
+  border-color: transparent;
+}
+
+.payload-toast-container .payload-toast-item .payload-toast-close-button:hover,
+.payload-toast-container .payload-toast-item .payload-toast-close-button:focus-visible {
+  background: var(--color-bg-hover);
+}
+
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item
+  [data-close-button].payload-toast-close-button:hover,
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item
+  [data-close-button].payload-toast-close-button:focus-visible {
+  background: var(--color-bg-hover);
+}
+
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item
+  [data-close-button].payload-toast-close-button:active {
+  background: var(--color-bg-pressed);
+}
+
+.payload-toast-container .toast-error .payload-toast-close-button {
+  color: var(--color-text-ondanger);
+}
+
+.payload-toast-container .toast-error .payload-toast-close-button:hover,
+.payload-toast-container .toast-error .payload-toast-close-button:focus-visible {
+  background: var(--color-bg-danger-hover);
+}
+
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item.toast-error
+  [data-close-button].payload-toast-close-button:hover,
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item.toast-error
+  [data-close-button].payload-toast-close-button:focus-visible {
+  background: var(--color-bg-danger-hover);
+}
+
+[data-sonner-toaster][data-theme='dark'].payload-toast-container
+  [data-sonner-toast].payload-toast-item.toast-error
+  [data-close-button].payload-toast-close-button:active {
+  background: var(--color-bg-danger-pressed);
+}
+
+[data-sonner-toaster].payload-toast-container[data-lifted='true'] {
+  transform: none;
+}
+
+[data-sonner-toaster].payload-toast-container[data-x-position='right'] {
+  left: auto;
+  right: var(--spacer-6);
+}
+
+[data-sonner-toaster].payload-toast-container[data-y-position='bottom'] {
+  bottom: var(--spacer-6);
+}

package/dist/providers/ToastContainer/index.d.ts

@@ -1,5 +1,6 @@
 import type { ClientConfig } from 'payload';
 import React from 'react';
+import './index.css';
 export declare const ToastContainer: React.FC<{
     config: ClientConfig;
 }>;

package/dist/providers/ToastContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ToastContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,MAAM,EAAE,YAAY,CAAA;CACrB,CAqCA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/ToastContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,OAAO,KAAiD,MAAM,OAAO,CAAA;AASrE,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,MAAM,EAAE,YAAY,CAAA;CACrB,CA8FA,CAAA"}