@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.2

package/dist/elements/UserMenu/SubMenuHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ChevronIcon","Button","MenuSeparator","SubMenuHeader","onBack","title","_jsxs","className","_jsx","buttonStyle","icon","direction","size","onClick"],"sources":["../../../../src/elements/UserMenu/SubMenuHeader/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { Button } from '../../Button/index.js'\nimport { MenuSeparator } from '../../MenuSeparator/index.js'\n\nexport const SubMenuHeader: React.FC<{\n  readonly onBack: () => void\n  readonly title: string\n}> = ({ onBack, title }) => (\n  <div className=\"user-menu__submenu-header\" data-popup-prevent-close>\n    <div className=\"user-menu__submenu-header-wrap\">\n      <div className=\"user-menu__submenu-header-row\">\n        <Button\n          aria-label={title}\n          buttonStyle=\"ghost\"\n          className=\"user-menu__submenu-back\"\n          icon={<ChevronIcon direction=\"left\" size={24} />}\n          onClick={onBack}\n        />\n        <p className=\"user-menu__submenu-title\">{title}</p>\n      </div>\n    </div>\n    <MenuSeparator />\n  </div>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,MAAM,QAAQ;AACvB,SAASC,aAAa,QAAQ;AAE9B,OAAO,MAAMC,aAAA,GAGRA,CAAC;EAAEC,MAAM;EAAEC;AAAK,CAAE,kBACrBC,KAAA,CAAC;EAAIC,SAAA,EAAU;EAA4B,0BAAwB;0BACjEC,IAAA,CAAC;IAAID,SAAA,EAAU;cACb,aAAAD,KAAA,CAAC;MAAIC,SAAA,EAAU;8BACbC,IAAA,CAACP,MAAA;QACC,cAAYI,KAAA;QACZI,WAAA,EAAY;QACZF,SAAA,EAAU;QACVG,IAAA,eAAMF,IAAA,CAACR,WAAA;UAAYW,SAAA,EAAU;UAAOC,IAAA,EAAM;;QAC1CC,OAAA,EAAST;uBAEXI,IAAA,CAAC;QAAED,SAAA,EAAU;kBAA4BF;;;mBAG7CG,IAAA,CAACN,aAAA","ignoreList":[]}

package/dist/elements/UserMenu/ThemeMenu/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ThemeMenuContent: React.FC;
+export declare const ThemeMenu: React.FC<{
+    readonly onMobileOpen?: () => void;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/UserMenu/ThemeMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA2BpC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CACnC,CAsDA,CAAA"}

package/dist/elements/UserMenu/ThemeMenu/index.js

@@ -0,0 +1,145 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { VariableColorIcon } from '../../../icons/VariableColor/index.js';
+import { useTheme } from '../../../providers/Theme/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+export const ThemeMenuContent = () => {
+  const $ = _c(5);
+  const {
+    autoMode,
+    setTheme,
+    theme
+  } = useTheme();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== autoMode || $[1] !== setTheme || $[2] !== t || $[3] !== theme) {
+    const options = [{
+      label: t("general:auto"),
+      value: "auto"
+    }, {
+      label: t("general:light"),
+      value: "light"
+    }, {
+      label: t("general:dark"),
+      value: "dark"
+    }];
+    const activeValue = autoMode ? "auto" : theme;
+    t0 = _jsx("div", {
+      "data-popup-prevent-close": true,
+      children: _jsx(PopupList.RadioGroup, {
+        children: options.map(t1 => {
+          const {
+            label,
+            value
+          } = t1;
+          return _jsx(PopupList.RadioGroupItem, {
+            active: activeValue === value,
+            onClick: () => setTheme(value),
+            children: label
+          }, value);
+        })
+      })
+    });
+    $[0] = autoMode;
+    $[1] = setTheme;
+    $[2] = t;
+    $[3] = theme;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+};
+export const ThemeMenu = t0 => {
+  const $ = _c(5);
+  const {
+    onMobileOpen
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  if (onMobileOpen) {
+    let t1;
+    if ($[0] !== onMobileOpen || $[1] !== t) {
+      t1 = _jsxs("button", {
+        className: "popup-button-list__button popup-button-list__button--submenu-trigger",
+        "data-popup-prevent-close": true,
+        onClick: onMobileOpen,
+        type: "button",
+        children: [_jsx("span", {
+          className: "popup-button-list__submenu-icon",
+          children: _jsx(VariableColorIcon, {
+            size: 24
+          })
+        }), _jsx("span", {
+          className: "popup-button-list__label",
+          children: t("general:theme")
+        }), _jsx("span", {
+          className: "popup-button-list__chevron",
+          children: _jsx(ChevronIcon, {
+            direction: "right",
+            size: 24
+          })
+        })]
+      });
+      $[0] = onMobileOpen;
+      $[1] = t;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[3] !== t) {
+    t1 = _jsx(Popup, {
+      renderButton: t2 => {
+        const {
+          active,
+          onClick,
+          onKeyDown,
+          ...aria
+        } = t2;
+        return _jsxs("button", {
+          ...aria,
+          className: ["popup-button-list__button", "popup-button-list__button--submenu-trigger", active && "popup-button-list__button--selected"].filter(Boolean).join(" "),
+          onClick,
+          onKeyDown,
+          type: "button",
+          children: [_jsx("span", {
+            className: "popup-button-list__submenu-icon",
+            children: _jsx(VariableColorIcon, {
+              size: 24
+            })
+          }), _jsx("span", {
+            className: "popup-button-list__label",
+            children: t("general:theme")
+          }), _jsx("span", {
+            className: "popup-button-list__chevron",
+            children: _jsx(ChevronIcon, {
+              direction: "right",
+              size: 24
+            })
+          })]
+        });
+      },
+      side: "left",
+      size: "large",
+      theme: "dark",
+      children: _jsx(ThemeMenuContent, {})
+    });
+    $[3] = t;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/UserMenu/ThemeMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","VariableColorIcon","useTheme","useTranslation","Popup","PopupList","ThemeMenuContent","$","autoMode","setTheme","theme","t","t0","options","label","value","activeValue","_jsx","children","RadioGroup","map","t1","RadioGroupItem","active","onClick","ThemeMenu","onMobileOpen","_jsxs","className","type","size","direction","renderButton","t2","onKeyDown","aria","filter","Boolean","join"],"sources":["../../../../src/elements/UserMenu/ThemeMenu/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { VariableColorIcon } from '../../../icons/VariableColor/index.js'\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\n\nexport const ThemeMenuContent: React.FC = () => {\n  const { autoMode, setTheme, theme } = useTheme()\n  const { t } = useTranslation()\n\n  const options: { label: string; value: 'auto' | 'dark' | 'light' }[] = [\n    { label: t('general:auto'), value: 'auto' },\n    { label: t('general:light'), value: 'light' },\n    { label: t('general:dark'), value: 'dark' },\n  ]\n\n  const activeValue: 'auto' | 'dark' | 'light' = autoMode ? 'auto' : theme\n\n  return (\n    <div data-popup-prevent-close>\n      <PopupList.RadioGroup>\n        {options.map(({ label, value }) => (\n          <PopupList.RadioGroupItem\n            active={activeValue === value}\n            key={value}\n            onClick={() => setTheme(value)}\n          >\n            {label}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n    </div>\n  )\n}\n\nexport const ThemeMenu: React.FC<{\n  readonly onMobileOpen?: () => void\n}> = ({ onMobileOpen }) => {\n  const { t } = useTranslation()\n\n  if (onMobileOpen) {\n    return (\n      <button\n        className=\"popup-button-list__button popup-button-list__button--submenu-trigger\"\n        data-popup-prevent-close\n        onClick={onMobileOpen}\n        type=\"button\"\n      >\n        <span className=\"popup-button-list__submenu-icon\">\n          <VariableColorIcon size={24} />\n        </span>\n        <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n        <span className=\"popup-button-list__chevron\">\n          <ChevronIcon direction=\"right\" size={24} />\n        </span>\n      </button>\n    )\n  }\n\n  return (\n    <Popup\n      renderButton={({ active, onClick, onKeyDown, ...aria }) => (\n        <button\n          {...aria}\n          className={[\n            'popup-button-list__button',\n            'popup-button-list__button--submenu-trigger',\n            active && 'popup-button-list__button--selected',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          type=\"button\"\n        >\n          <span className=\"popup-button-list__submenu-icon\">\n            <VariableColorIcon size={24} />\n          </span>\n          <span className=\"popup-button-list__label\">{t('general:theme')}</span>\n          <span className=\"popup-button-list__chevron\">\n            <ChevronIcon direction=\"right\" size={24} />\n          </span>\n        </button>\n      )}\n      side=\"left\"\n      size=\"large\"\n      theme=\"dark\"\n    >\n      <ThemeMenuContent />\n    </Popup>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/UserMenu/index.css

@@ -0,0 +1,80 @@
+.user-menu {
+  display: inline-flex;
+  align-items: center;
+}
+
+.user-menu__trigger {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.user-menu__trigger--active {
+  opacity: 0.8;
+}
+
+.user-menu__profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--spacer-3) var(--spacer-2);
+  gap: var(--spacer-2);
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.user-menu__avatar {
+  width: var(--spacer-6);
+  height: var(--spacer-6);
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.user-menu__name,
+.user-menu__identifier {
+  font-family: var(--text-body-medium-strong-font-family);
+  font-size: var(--text-body-medium-strong-font-size);
+  font-weight: var(--text-body-medium-strong-font-weight);
+  line-height: var(--text-body-medium-strong-line-height);
+  letter-spacing: var(--text-body-medium-strong-letter-spacing);
+  margin: 0;
+  text-align: center;
+}
+
+.user-menu__name + .user-menu__identifier {
+  color: var(--color-text-secondary);
+}
+
+.user-menu__submenu-header-wrap {
+  padding: 0 var(--spacer-2);
+}
+
+.user-menu__submenu-header-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-1);
+}
+
+.user-menu__submenu-title {
+  margin: 0;
+  color: var(--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);
+  letter-spacing: var(--text-letter-spacing);
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.css';
+type UserMenuProps = {
+    CustomAvatar?: React.ReactNode;
+    settingsItems?: React.ReactNode[];
+};
+export declare const UserMenu: React.FC<UserMenuProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/UserMenu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAclD,OAAO,aAAa,CAAA;AAIpB,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyJ5C,CAAA"}

package/dist/elements/UserMenu/index.js

@@ -0,0 +1,201 @@
+'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 { useWindowInfo } from '@faceless-ui/window-info';
+import { formatAdminURL } from 'payload/shared';
+import React, { useEffect, useState } from 'react';
+import { Account } from '../../graphics/Account/index.js';
+import { LogOutIcon } from '../../icons/LogOut/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { MenuSeparator } from '../MenuSeparator/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
+import { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js';
+import { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js';
+import { SubMenuHeader } from './SubMenuHeader/index.js';
+import { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js';
+import './index.css';
+const baseClass = 'user-menu';
+export const UserMenu = t0 => {
+  const $ = _c(7);
+  const {
+    CustomAvatar,
+    settingsItems: t1
+  } = t0;
+  const settingsItems = t1 === undefined ? [] : t1;
+  const {
+    user
+  } = useAuth();
+  const {
+    languageOptions,
+    t
+  } = useTranslation();
+  const {
+    config: t2,
+    getEntityConfig
+  } = useConfig();
+  const {
+    admin: t3,
+    routes: t4
+  } = t2;
+  const {
+    routes: t5,
+    theme: adminTheme,
+    user: userSlug
+  } = t3;
+  const {
+    account: accountRoute,
+    logout: logoutRoute
+  } = t5;
+  const {
+    admin: adminRoute
+  } = t4;
+  const {
+    breakpoints: t6
+  } = useWindowInfo();
+  const {
+    s: smallBreak
+  } = t6;
+  const isMobile = Boolean(smallBreak);
+  const [activeMobileSubmenu, setActiveMobileSubmenu] = useState(null);
+  let t7;
+  let t8;
+  if ($[0] !== isMobile) {
+    t7 = () => {
+      if (!isMobile) {
+        setActiveMobileSubmenu(null);
+      }
+    };
+    t8 = [isMobile];
+    $[0] = isMobile;
+    $[1] = t7;
+    $[2] = t8;
+  } else {
+    t7 = $[1];
+    t8 = $[2];
+  }
+  useEffect(t7, t8);
+  const userCollectionConfig = getEntityConfig({
+    collectionSlug: userSlug
+  });
+  const useAsTitle = userCollectionConfig?.admin?.useAsTitle ?? "email";
+  const titleValue = useAsTitle !== "email" && user ? user[useAsTitle] : undefined;
+  const titleString = typeof titleValue === "string" ? titleValue : undefined;
+  const identifier = user?.username ?? user?.email ?? "";
+  const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1;
+  const showThemeMenu = adminTheme === "all";
+  const hasSettingsItems = settingsItems.length > 0;
+  const showPreferencesGroup = showThemeMenu || hasMultipleLanguages;
+  const logoutHref = formatAdminURL({
+    adminRoute,
+    path: logoutRoute
+  });
+  const accountHref = formatAdminURL({
+    adminRoute,
+    path: accountRoute
+  });
+  let t9;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => setActiveMobileSubmenu(null);
+    $[3] = t9;
+  } else {
+    t9 = $[3];
+  }
+  let t10;
+  if ($[4] !== CustomAvatar || $[5] !== t) {
+    t10 = t11 => {
+      const {
+        active,
+        ...ariaProps
+      } = t11;
+      return _jsx("button", {
+        ...ariaProps,
+        "aria-label": t("authentication:account"),
+        className: [`${baseClass}__trigger`, active && `${baseClass}__trigger--active`].filter(Boolean).join(" "),
+        type: "button",
+        children: _jsx(RenderCustomComponent, {
+          CustomComponent: CustomAvatar,
+          Fallback: _jsx(Account, {})
+        })
+      });
+    };
+    $[4] = CustomAvatar;
+    $[5] = t;
+    $[6] = t10;
+  } else {
+    t10 = $[6];
+  }
+  return _jsx(Popup, {
+    caret: false,
+    className: baseClass,
+    horizontalAlign: "right",
+    onToggleClose: t9,
+    renderButton: t10,
+    size: "large",
+    theme: "dark",
+    verticalAlign: "bottom",
+    children: isMobile && activeMobileSubmenu ? _jsxs(_Fragment, {
+      children: [activeMobileSubmenu === "theme" && _jsxs(_Fragment, {
+        children: [_jsx(SubMenuHeader, {
+          onBack: () => setActiveMobileSubmenu(null),
+          title: t("general:theme")
+        }), _jsx(ThemeMenuContent, {})]
+      }), activeMobileSubmenu === "language" && _jsxs(_Fragment, {
+        children: [_jsx(SubMenuHeader, {
+          onBack: () => setActiveMobileSubmenu(null),
+          title: t("general:language")
+        }), _jsx(LanguageMenuContent, {})]
+      }), activeMobileSubmenu === "settings" && _jsxs(_Fragment, {
+        children: [_jsx(SubMenuHeader, {
+          onBack: () => setActiveMobileSubmenu(null),
+          title: t("general:settings")
+        }), _jsx(SettingsMenuContent, {
+          items: settingsItems
+        })]
+      })]
+    }) : _jsxs(_Fragment, {
+      children: [_jsxs("a", {
+        className: `${baseClass}__profile`,
+        href: accountHref,
+        children: [_jsx("div", {
+          className: `${baseClass}__avatar`,
+          children: _jsx(RenderCustomComponent, {
+            CustomComponent: CustomAvatar,
+            Fallback: _jsx(Account, {})
+          })
+        }), _jsxs("div", {
+          children: [titleString && _jsx("p", {
+            className: `${baseClass}__name`,
+            children: titleString
+          }), identifier && _jsx("p", {
+            className: `${baseClass}__identifier`,
+            children: identifier
+          })]
+        })]
+      }), showPreferencesGroup && _jsxs(PopupList.ButtonGroup, {
+        children: [showThemeMenu && _jsx(ThemeMenu, {
+          onMobileOpen: isMobile ? () => setActiveMobileSubmenu("theme") : undefined
+        }), hasMultipleLanguages && _jsx(LanguageMenu, {
+          onMobileOpen: isMobile ? () => setActiveMobileSubmenu("language") : undefined
+        })]
+      }), _jsx(MenuSeparator, {}), hasSettingsItems && _jsxs(_Fragment, {
+        children: [_jsx(PopupList.ButtonGroup, {
+          children: _jsx(SettingsMenu, {
+            items: settingsItems,
+            onMobileOpen: isMobile ? () => setActiveMobileSubmenu("settings") : undefined
+          })
+        }), _jsx(MenuSeparator, {})]
+      }), _jsx(PopupList.MenuItem, {
+        children: _jsx(PopupList.Button, {
+          href: logoutHref,
+          icon: _jsx(LogOutIcon, {}),
+          children: t("authentication:logOut")
+        })
+      })]
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","formatAdminURL","React","useEffect","useState","Account","LogOutIcon","useAuth","useConfig","useTranslation","MenuSeparator","Popup","PopupList","RenderCustomComponent","LanguageMenu","LanguageMenuContent","SettingsMenu","SettingsMenuContent","SubMenuHeader","ThemeMenu","ThemeMenuContent","baseClass","UserMenu","t0","$","CustomAvatar","settingsItems","t1","undefined","user","languageOptions","t","config","t2","getEntityConfig","admin","t3","routes","t4","t5","theme","adminTheme","userSlug","account","accountRoute","logout","logoutRoute","adminRoute","breakpoints","t6","s","smallBreak","isMobile","Boolean","activeMobileSubmenu","setActiveMobileSubmenu","t7","t8","userCollectionConfig","collectionSlug","useAsTitle","titleValue","titleString","identifier","username","email","hasMultipleLanguages","Array","isArray","length","showThemeMenu","hasSettingsItems","showPreferencesGroup","logoutHref","path","accountHref","t9","Symbol","for","t10","t11","active","ariaProps","_jsx","className","filter","join","type","children","CustomComponent","Fallback","caret","horizontalAlign","onToggleClose","renderButton","verticalAlign","_jsxs","_Fragment","onBack","title","items","href","ButtonGroup","onMobileOpen","MenuItem","Button","icon"],"sources":["../../../src/elements/UserMenu/index.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useEffect, useState } from 'react'\n\nimport { Account } from '../../graphics/Account/index.js'\nimport { LogOutIcon } from '../../icons/LogOut/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { MenuSeparator } from '../MenuSeparator/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { LanguageMenu, LanguageMenuContent } from './LanguageMenu/index.js'\nimport { SettingsMenu, SettingsMenuContent } from './SettingsMenu/index.js'\nimport { SubMenuHeader } from './SubMenuHeader/index.js'\nimport { ThemeMenu, ThemeMenuContent } from './ThemeMenu/index.js'\nimport './index.css'\n\nconst baseClass = 'user-menu'\n\ntype UserMenuProps = {\n  CustomAvatar?: React.ReactNode\n  settingsItems?: React.ReactNode[]\n}\n\nexport const UserMenu: React.FC<UserMenuProps> = ({ CustomAvatar, settingsItems = [] }) => {\n  const { user } = useAuth()\n  const { languageOptions, t } = useTranslation()\n  const {\n    config: {\n      admin: {\n        routes: { account: accountRoute, logout: logoutRoute },\n        theme: adminTheme,\n        user: userSlug,\n      },\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const isMobile = Boolean(smallBreak)\n\n  const [activeMobileSubmenu, setActiveMobileSubmenu] = useState<\n    'language' | 'settings' | 'theme' | null\n  >(null)\n\n  useEffect(() => {\n    if (!isMobile) {\n      setActiveMobileSubmenu(null)\n    }\n  }, [isMobile])\n\n  const userCollectionConfig = getEntityConfig({ collectionSlug: userSlug })\n  const useAsTitle = userCollectionConfig?.admin?.useAsTitle ?? 'email'\n  const titleValue =\n    useAsTitle !== 'email' && user ? (user as Record<string, unknown>)[useAsTitle] : undefined\n  const titleString = typeof titleValue === 'string' ? titleValue : undefined\n\n  const identifier = user?.username ?? user?.email ?? ''\n  const hasMultipleLanguages = Array.isArray(languageOptions) && languageOptions.length > 1\n  const showThemeMenu = adminTheme === 'all'\n  const hasSettingsItems = settingsItems.length > 0\n  const showPreferencesGroup = showThemeMenu || hasMultipleLanguages\n\n  const logoutHref = formatAdminURL({ adminRoute, path: logoutRoute })\n  const accountHref = formatAdminURL({ adminRoute, path: accountRoute })\n\n  return (\n    <Popup\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      onToggleClose={() => setActiveMobileSubmenu(null)}\n      renderButton={({ active, ...ariaProps }) => (\n        <button\n          {...ariaProps}\n          aria-label={t('authentication:account')}\n          className={[`${baseClass}__trigger`, active && `${baseClass}__trigger--active`]\n            .filter(Boolean)\n            .join(' ')}\n          type=\"button\"\n        >\n          <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n        </button>\n      )}\n      size=\"large\"\n      theme=\"dark\"\n      verticalAlign=\"bottom\"\n    >\n      {isMobile && activeMobileSubmenu ? (\n        // Mobile submenu panel\n        <>\n          {activeMobileSubmenu === 'theme' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:theme')}\n              />\n              <ThemeMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'language' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:language')}\n              />\n              <LanguageMenuContent />\n            </>\n          )}\n          {activeMobileSubmenu === 'settings' && (\n            <>\n              <SubMenuHeader\n                onBack={() => setActiveMobileSubmenu(null)}\n                title={t('general:settings')}\n              />\n              <SettingsMenuContent items={settingsItems} />\n            </>\n          )}\n        </>\n      ) : (\n        // Normal menu content (desktop always; mobile when no active submenu)\n        <>\n          {/* Profile header */}\n          <a className={`${baseClass}__profile`} href={accountHref}>\n            <div className={`${baseClass}__avatar`}>\n              <RenderCustomComponent CustomComponent={CustomAvatar} Fallback={<Account />} />\n            </div>\n            <div>\n              {titleString && <p className={`${baseClass}__name`}>{titleString}</p>}\n              {identifier && <p className={`${baseClass}__identifier`}>{identifier}</p>}\n            </div>\n          </a>\n\n          {/* Preferences group: Theme + Language */}\n          {showPreferencesGroup && (\n            <PopupList.ButtonGroup>\n              {showThemeMenu && (\n                <ThemeMenu\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('theme') : undefined}\n                />\n              )}\n              {hasMultipleLanguages && (\n                <LanguageMenu\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('language') : undefined}\n                />\n              )}\n            </PopupList.ButtonGroup>\n          )}\n\n          <MenuSeparator />\n\n          {/* Settings group */}\n          {hasSettingsItems && (\n            <>\n              <PopupList.ButtonGroup>\n                <SettingsMenu\n                  items={settingsItems}\n                  onMobileOpen={isMobile ? () => setActiveMobileSubmenu('settings') : undefined}\n                />\n              </PopupList.ButtonGroup>\n              <MenuSeparator />\n            </>\n          )}\n\n          {/* Account actions */}\n          <PopupList.MenuItem>\n            <PopupList.Button href={logoutHref} icon={<LogOutIcon />}>\n              {t('authentication:logOut')}\n            </PopupList.Button>\n          </PopupList.MenuItem>\n        </>\n      )}\n    </Popup>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,aAAa,QAAQ;AAC9B,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,SAAS,EAAEC,QAAQ,QAAQ;AAE3C,SAASC,OAAO,QAAQ;AACxB,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,QAAQ;AAC9B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,YAAY,EAAEC,mBAAmB,QAAQ;AAClD,SAASC,YAAY,EAAEC,mBAAmB,QAAQ;AAClD,SAASC,aAAa,QAAQ;AAC9B,SAASC,SAAS,EAAEC,gBAAgB,QAAQ;AAC5C,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCC,EAAA;EAAA,MAAAC,CAAA,GAAAzB,EAAA;EAAC;IAAA0B,YAAA;IAAAC,aAAA,EAAAC;EAAA,IAAAJ,EAAoC;EAApB,MAAAG,aAAA,GAAAC,EAAkB,KAAAC,SAAA,QAAlBD,EAAkB;EAClF;IAAAE;EAAA,IAAiBtB,OAAA;EACjB;IAAAuB,eAAA;IAAAC;EAAA,IAA+BtB,cAAA;EAC/B;IAAAuB,MAAA,EAAAC,EAAA;IAAAC;EAAA,IAUI1B,SAAA;EATM;IAAA2B,KAAA,EAAAC,EAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAL,EAOP;EANQ;IAAAI,MAAA,EAAAE,EAAA;IAAAC,KAAA,EAAAC,UAAA;IAAAZ,IAAA,EAAAa;EAAA,IAAAN,EAIN;EAHS;IAAAO,OAAA,EAAAC,YAAA;IAAAC,MAAA,EAAAC;EAAA,IAAAP,EAA8C;EAIhD;IAAAJ,KAAA,EAAAY;EAAA,IAAAT,EAAqB;EAIjC;IAAAU,WAAA,EAAAC;EAAA,IAEIjD,aAAA;EADW;IAAAkD,CAAA,EAAAC;EAAA,IAAAF,EAAiB;EAGhC,MAAAG,QAAA,GAAiBC,OAAA,CAAQF,UAAA;EAEzB,OAAAG,mBAAA,EAAAC,sBAAA,IAAsDnD,QAAA,KAEpD;EAAA,IAAAoD,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAjC,CAAA,QAAA4B,QAAA;IAEQI,EAAA,GAAAA,CAAA;MAAA,KACHJ,QAAA;QACHG,sBAAA,KAAuB;MAAA;IAAA;IAExBE,EAAA,IAACL,QAAA;IAAS5B,CAAA,MAAA4B,QAAA;IAAA5B,CAAA,MAAAgC,EAAA;IAAAhC,CAAA,MAAAiC,EAAA;EAAA;IAAAD,EAAA,GAAAhC,CAAA;IAAAiC,EAAA,GAAAjC,CAAA;EAAA;EAJbrB,SAAA,CAAUqD,EAIV,EAAGC,EAAU;EAEb,MAAAC,oBAAA,GAA6BxB,eAAA;IAAAyB,cAAA,EAAkCjB;EAAA,CAAS;EACxE,MAAAkB,UAAA,GAAmBF,oBAAA,EAAAvB,KAAA,EAAAyB,UAAA,IAA2C;EAC9D,MAAAC,UAAA,GACED,UAAA,KAAe,WAAW/B,IAAA,GAAOA,IAAiC,CAAC+B,UAAA,IAAAA,SAAc;EACnF,MAAAE,WAAA,GAAoB,OAAOD,UAAA,KAAe,WAAWA,UAAA,GAAAjC,SAAa;EAElE,MAAAmC,UAAA,GAAmBlC,IAAA,EAAAmC,QAAA,IAAkBnC,IAAA,EAAAoC,KAAM,IAAS;EACpD,MAAAC,oBAAA,GAA6BC,KAAA,CAAAC,OAAA,CAActC,eAAA,KAAoBA,eAAA,CAAAuC,MAAA,IAAyB;EACxF,MAAAC,aAAA,GAAsB7B,UAAA,KAAe;EACrC,MAAA8B,gBAAA,GAAyB7C,aAAA,CAAA2C,MAAA,IAAuB;EAChD,MAAAG,oBAAA,GAA6BF,aAAA,IAAiBJ,oBAAA;EAE9C,MAAAO,UAAA,GAAmBxE,cAAA;IAAA8C,UAAA;IAAA2B,IAAA,EAAmC5B;EAAA,CAAY;EAClE,MAAA6B,WAAA,GAAoB1E,cAAA;IAAA8C,UAAA;IAAA2B,IAAA,EAAmC9B;EAAA,CAAa;EAAA,IAAAgC,EAAA;EAAA,IAAApD,CAAA,QAAAqD,MAAA,CAAAC,GAAA;IAOjDF,EAAA,GAAAA,CAAA,KAAMrB,sBAAA,KAAuB;IAAA/B,CAAA,MAAAoD,EAAA;EAAA;IAAAA,EAAA,GAAApD,CAAA;EAAA;EAAA,IAAAuD,GAAA;EAAA,IAAAvD,CAAA,QAAAC,YAAA,IAAAD,CAAA,QAAAO,CAAA;IAC9BgD,GAAA,GAAAC,GAAA;MAAC;QAAAC,MAAA;QAAA,GAAAC;MAAA,IAAAF,GAAwB;MAAA,OACrCG,IAAA,CAAC;QAAA,GACKD,SAAS;QAAA,cACDnD,CAAA,CAAE;QAAAqD,SAAA,EACH,CAAC,GAAA/D,SAAA,WAAuB,EAAE4D,MAAA,IAAU,GAAA5D,SAAA,mBAA+B,EAAAgE,MAAA,CAAAhC,OACpE,EAAAiC,IAAA,CACF;QAAAC,IAAA,EACH;QAAAC,QAAA,EAELL,IAAA,CAAAtE,qBAAA;UAAA4E,eAAA,EAAwChE,YAAA;UAAAiE,QAAA,EAAwBP,IAAA,CAAA9E,OAAA,IAAC;QAAA,C;;;;;;;;;SAdvE8E,IAAA,CAAAxE,KAAA;IAAAgF,KAAA;IAAAP,SAAA,EAAA/D,SAAA;IAAAuE,eAAA,EAGkB;IAAAC,aAAA,EACDjB,EAA6B;IAAAkB,YAAA,EAC9Bf,G;UAYT;IAAAvC,KAAA,EACC;IAAAuD,aAAA,EACQ;IAAAP,QAAA,EAEbpC,QAAA,IAAYE,mBAAA,GAEX0C,KAAA,CAAAC,SAAA;MAAAT,QAAA,GACGlC,mBAAA,KAAwB,WACvB0C,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAAjE,aAAA;UAAAgF,MAAA,EAAAA,CAAA,KACgB3C,sBAAA,KAAuB;UAAA4C,KAAA,EAC9BpE,CAAA,CAAE;QAAA,C,GAEXoD,IAAA,CAAA/D,gBAAA,IAAC;MAAA,C,GAGJkC,mBAAA,KAAwB,cACvB0C,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAAjE,aAAA;UAAAgF,MAAA,EAAAA,CAAA,KACgB3C,sBAAA,KAAuB;UAAA4C,KAAA,EAC9BpE,CAAA,CAAE;QAAA,C,GAEXoD,IAAA,CAAApE,mBAAA,IAAC;MAAA,C,GAGJuC,mBAAA,KAAwB,cACvB0C,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAAjE,aAAA;UAAAgF,MAAA,EAAAA,CAAA,KACgB3C,sBAAA,KAAuB;UAAA4C,KAAA,EAC9BpE,CAAA,CAAE;QAAA,C,GAEXoD,IAAA,CAAAlE,mBAAA;UAAAmF,KAAA,EAA4B1E;QAAA,C;;SAMlCsE,KAAA,CAAAC,SAAA;MAAAT,QAAA,GAEEQ,KAAA,CAAC;QAAAZ,SAAA,EAAa,GAAA/D,SAAA,WAAuB;QAAAgF,IAAA,EAAQ1B,WAAA;QAAAa,QAAA,GAC3CL,IAAA,CAAC;UAAAC,SAAA,EAAe,GAAA/D,SAAA,UAAsB;UAAAmE,QAAA,EACpCL,IAAA,CAAAtE,qBAAA;YAAA4E,eAAA,EAAwChE,YAAA;YAAAiE,QAAA,EAAwBP,IAAA,CAAA9E,OAAA,IAAC;UAAA,C;YAEnE2F,KAAA,CAAC;UAAAR,QAAA,GACE1B,WAAA,IAAeqB,IAAA,CAAC;YAAAC,SAAA,EAAa,GAAA/D,SAAA,QAAoB;YAAAmE,QAAA,EAAG1B;UAAA,C,GACpDC,UAAA,IAAcoB,IAAA,CAAC;YAAAC,SAAA,EAAa,GAAA/D,SAAA,cAA0B;YAAAmE,QAAA,EAAGzB;UAAA,C;;UAK7DS,oBAAA,IACCwB,KAAA,CAAApF,SAAA,CAAA0F,WAAA;QAAAd,QAAA,GACGlB,aAAA,IACCa,IAAA,CAAAhE,SAAA;UAAAoF,YAAA,EACgBnD,QAAA,SAAiBG,sBAAA,CAAuB,WAAA3B;QAAW,C,GAGpEsC,oBAAA,IACCiB,IAAA,CAAArE,YAAA;UAAAyF,YAAA,EACgBnD,QAAA,SAAiBG,sBAAA,CAAuB,cAAA3B;QAAc,C;UAM5EuD,IAAA,CAAAzE,aAAA,IAAC,GAGA6D,gBAAA,IACCyB,KAAA,CAAAC,SAAA;QAAAT,QAAA,GACEL,IAAA,CAAAvE,SAAA,CAAA0F,WAAA;UAAAd,QAAA,EACEL,IAAA,CAAAnE,YAAA;YAAAoF,KAAA,EACS1E,aAAA;YAAA6E,YAAA,EACOnD,QAAA,SAAiBG,sBAAA,CAAuB,cAAA3B;UAAc,C;YAGxEuD,IAAA,CAAAzE,aAAA,IAAC;MAAA,C,GAKLyE,IAAA,CAAAvE,SAAA,CAAA4F,QAAA;QAAAhB,QAAA,EACEL,IAAA,CAAAvE,SAAA,CAAA6F,MAAA;UAAAJ,IAAA,EAAwB5B,UAAA;UAAAiC,IAAA,EAAkBvB,IAAA,CAAA7E,UAAA,IAAC;UAAAkF,QAAA,EACxCzD,CAAA,CAAE;QAAA,C;;;;CAOjB","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Number/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { NumberFilterProps as Props } from './types.js';
-import './index.scss';
 export declare const NumberFilter: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/WhereBuilder/Condition/Number/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAI5D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+ExC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAK5D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmFxC,CAAA"}

package/dist/elements/WhereBuilder/Condition/Number/index.js

@@ -6,10 +6,8 @@ import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
-import './index.scss';
-const baseClass = 'condition-value-number';
 export const NumberFilter = props => {
-  const $ = _c(20);
+  const $ = _c(10);
   const {
     disabled,
     field: t0,
@@ -19,12 +17,14 @@ export const NumberFilter = props => {
   } = props;
   const {
     admin,
-    hasMany
+    hasMany,
+    label
   } = t0;
   const {
     i18n,
     t
   } = useTranslation();
+  const ariaLabel = label ? getTranslation(label, i18n) : t("general:enterAValue");
   let t1;
   if ($[0] !== hasMany || $[1] !== operator) {
     t1 = ["in", "not_in"].includes(operator) || hasMany;
@@ -86,42 +86,28 @@ export const NumberFilter = props => {
     t5 = $[9];
   }
   React.useEffect(t4, t5);
-  let t6;
-  if ($[10] !== admin?.placeholder || $[11] !== disabled || $[12] !== i18n || $[13] !== isMulti || $[14] !== onChange || $[15] !== onSelect || $[16] !== t || $[17] !== value || $[18] !== valueToRender) {
-    const placeholder = getTranslation(admin?.placeholder, i18n) || t("general:enterAValue");
-    t6 = isMulti ? _jsx(ReactSelect, {
-      disabled,
-      isClearable: true,
-      isCreatable: true,
-      isMulti,
-      isSortable: true,
-      numberOnly: true,
-      onChange: onSelect,
-      options: [],
-      placeholder,
-      value: valueToRender || []
-    }) : _jsx("input", {
-      className: baseClass,
-      disabled,
-      onChange: e => onChange(e.target.value),
-      placeholder,
-      type: "number",
-      value
-    });
-    $[10] = admin?.placeholder;
-    $[11] = disabled;
-    $[12] = i18n;
-    $[13] = isMulti;
-    $[14] = onChange;
-    $[15] = onSelect;
-    $[16] = t;
-    $[17] = value;
-    $[18] = valueToRender;
-    $[19] = t6;
-  } else {
-    t6 = $[19];
-  }
-  return t6;
+  const placeholder = getTranslation(admin?.placeholder, i18n) || t("general:enterAValue");
+  return isMulti ? _jsx(ReactSelect, {
+    "aria-label": ariaLabel,
+    disabled,
+    isClearable: true,
+    isCreatable: true,
+    isMulti,
+    isSortable: true,
+    numberOnly: true,
+    onChange: onSelect,
+    options: [],
+    placeholder,
+    value: valueToRender || []
+  }) : _jsx("input", {
+    "aria-label": ariaLabel,
+    className: "form-input",
+    disabled,
+    onChange: e => onChange(e.target.value),
+    placeholder,
+    type: "number",
+    value
+  });
 };
 function _temp(option) {
   return Number(option.value?.value || option.value);

package/dist/elements/WhereBuilder/Condition/Number/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","baseClass","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","i18n","t","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","t6","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","label","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\nimport './index.scss'\n\nconst baseClass = 'condition-value-number'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      className={baseClass}\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAAgCC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAC3C;IAAAS,QAAA;IAAAC,KAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC;EAAA,IAMIP,KAAA;EAJK;IAAAQ,KAAA;IAAAC;EAAA,IAAAL,EAAkB;EAM3B;IAAAM,IAAA;IAAAC;EAAA,IAAoBf,cAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAX,CAAA,QAAAQ,OAAA,IAAAR,CAAA,QAAAK,QAAA;IAEJM,EAAA,IAAC,MAAM,UAAAC,QAAA,CAAmBP,QAAA,KAAaG,OAAA;IAAAR,CAAA,MAAAQ,OAAA;IAAAR,CAAA,MAAAK,QAAA;IAAAL,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAAvD,MAAAa,OAAA,GAAgBF,EAAuC;EAAA,IAAAG,EAAA;EAAA,IAAAd,CAAA,QAAAe,MAAA,CAAAC,GAAA;IAIrDF,EAAA;IAAEd,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAFJ,OAAAiB,aAAA,EAAAC,gBAAA,IAA0CxB,KAAA,CAAAyB,QAAA,CAExCL,EAAE;EAAA,IAAAM,EAAA;EAAA,IAAApB,CAAA,QAAAa,OAAA,IAAAb,CAAA,QAAAI,QAAA;IAGFgB,EAAA,GAAAC,cAAA;MACMC,GAAA,CAAAA,QAAA;MAAA,KACCD,cAAA;QACHC,QAAA,CAAAA,CAAA,CAAAA,EAAA;MAAA;QAAA,IACST,OAAA;UAAA,IACLU,KAAA,CAAAC,OAAA,CAAcH,cAAA;YAChBC,QAAA,CAAAA,CAAA,CAAWD,cAAA,CAAAI,GAAA,CAAAC,KAAyE;UAApF;YAEAJ,QAAA,CAAAA,CAAA,CAAAA,CAAYA,OAAOD,cAAA,CAAAf,KAAA,EAAAA,KAAA,IAA+Be,cAAA,CAAAf,KAAoB;UAAtE;QAAA;MAAA;MAIJF,QAAA,CAASkB,QAAA;IAAA;IACXtB,CAAA,MAAAa,OAAA;IAAAb,CAAA,MAAAI,QAAA;IAAAJ,CAAA,MAAAoB,EAAA;EAAA;IAAAA,EAAA,GAAApB,CAAA;EAAA;EAdF,MAAA2B,QAAA,GAAiBP,EAeI;EAAA,IAAAQ,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAA7B,CAAA,QAAAM,KAAA;IAGLsB,EAAA,GAAAA,CAAA;MAAA,IACVL,KAAA,CAAAC,OAAA,CAAclB,KAAA;QAChBY,gBAAA,CACEZ,KAAA,CAAAmB,GAAA,CAAAK,MASA;MAAA;QAGFZ,gBAAA,GAAmB;MAAA;IAAA;IAEpBW,EAAA,IAACvB,KAAA;IAAMN,CAAA,MAAAM,KAAA;IAAAN,CAAA,MAAA4B,EAAA;IAAA5B,CAAA,MAAA6B,EAAA;EAAA;IAAAD,EAAA,GAAA5B,CAAA;IAAA6B,EAAA,GAAA7B,CAAA;EAAA;EAjBVN,KAAA,CAAAqC,SAAA,CAAgBH,EAiBhB,EAAGC,EAAO;EAAA,IAAAG,EAAA;EAAA,IAAAhC,CAAA,SAAAO,KAAA,EAAA0B,WAAA,IAAAjC,CAAA,SAAAC,QAAA,IAAAD,CAAA,SAAAS,IAAA,IAAAT,CAAA,SAAAa,OAAA,IAAAb,CAAA,SAAAI,QAAA,IAAAJ,CAAA,SAAA2B,QAAA,IAAA3B,CAAA,SAAAU,CAAA,IAAAV,CAAA,SAAAM,KAAA,IAAAN,CAAA,SAAAiB,aAAA;IAEV,MAAAgB,WAAA,GAAoBxC,cAAA,CAAec,KAAA,EAAA0B,WAAA,EAAoBxB,IAAA,KAASC,CAAA,CAAE;IAE3DsB,EAAA,GAAAnB,OAAA,GACLqB,IAAA,CAAAtC,WAAA;MAAAK,QAAA;MAAAkC,WAAA;MAAAC,WAAA;MAAAvB,OAAA;MAAAwB,UAAA;MAAAC,UAAA;MAAAlC,QAAA,EAOYuB,QAAA;MAAAY,OAAA;MAAAN,WAAA;MAAA3B,KAAA,EAGHW,aAAA;IAAmB,C,IAG5BiB,IAAA,CAAC;MAAAM,SAAA,EAAA3C,SAAA;MAAAI,QAAA;MAAAG,QAAA,EAAAqC,CAAA,IAGkBrC,QAAA,CAASqC,CAAA,CAAAC,MAAA,CAAApC,KAAc;MAAA2B,WAAA;MAAAU,IAAA,EAEnC;MAAArC;IAAA,C;;;;;;;;;;;;;;SAnBF0B,E;CAuBT;AA/E6C,SAAAN,MAAAkB,MAAA;EAAA,OAwBOC,MAAA,CAAOD,MAAA,CAAAtC,KAAA,EAAAA,KAAA,IAAuBsC,MAAA,CAAAtC,KAAY;AAAA;AAxBjD,SAAAwB,OAAAgB,GAAA,EAAAC,KAAA;EAAA;IAAAC,EAAA,EAwC7B,GAAGF,GAAA,GAAMC,KAAA,EAAO;IAAAE,KAAA,EACb,GAAGH,GAAA,EAAK;IAAAxC,KAAA;MAAA4C,QAAA,EAAAA,CAAA,KAEG,GAAGJ,GAAA,GAAMC,KAAA,EAAO;MAAAzC,KAAA,EACzBwC,GAAC,EAAAxC,KAAA,IAAsBwC;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","ReactSelect","NumberFilter","props","$","disabled","field","t0","onChange","operator","value","admin","hasMany","label","i18n","t","ariaLabel","t1","includes","isMulti","t2","Symbol","for","valueToRender","setValueToRender","useState","t3","selectedOption","newValue","Array","isArray","map","_temp","onSelect","t4","t5","_temp2","useEffect","placeholder","_jsx","isClearable","isCreatable","isSortable","numberOnly","options","className","e","target","type","option","Number","val","index","id","toString"],"sources":["../../../../../src/elements/WhereBuilder/Condition/Number/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { NumberFilterProps as Props } from './types.js'\n\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { ReactSelect } from '../../../ReactSelect/index.js'\n\nexport const NumberFilter: React.FC<Props> = (props) => {\n  const {\n    disabled,\n    field: { admin, hasMany, label },\n    onChange,\n    operator,\n    value,\n  } = props\n\n  const { i18n, t } = useTranslation()\n\n  const ariaLabel = label ? getTranslation(label, i18n) : t('general:enterAValue')\n\n  const isMulti = ['in', 'not_in'].includes(operator) || hasMany\n\n  const [valueToRender, setValueToRender] = React.useState<\n    { id: string; label: string; value: { value: number } }[]\n  >([])\n\n  const onSelect = React.useCallback(\n    (selectedOption) => {\n      let newValue\n      if (!selectedOption) {\n        newValue = []\n      } else if (isMulti) {\n        if (Array.isArray(selectedOption)) {\n          newValue = selectedOption.map((option) => Number(option.value?.value || option.value))\n        } else {\n          newValue = [Number(selectedOption.value?.value || selectedOption.value)]\n        }\n      }\n\n      onChange(newValue)\n    },\n    [isMulti, onChange],\n  )\n\n  React.useEffect(() => {\n    if (Array.isArray(value)) {\n      setValueToRender(\n        value.map((val, index) => {\n          return {\n            id: `${val}${index}`, // append index to avoid duplicate keys but allow duplicate numbers\n            label: `${val}`,\n            value: {\n              toString: () => `${val}${index}`,\n              value: (val as any)?.value || val,\n            },\n          }\n        }),\n      )\n    } else {\n      setValueToRender([])\n    }\n  }, [value])\n\n  const placeholder = getTranslation(admin?.placeholder, i18n) || t('general:enterAValue')\n\n  return isMulti ? (\n    <ReactSelect\n      aria-label={ariaLabel}\n      disabled={disabled}\n      isClearable\n      isCreatable\n      isMulti={isMulti}\n      isSortable\n      numberOnly\n      onChange={onSelect}\n      options={[]}\n      placeholder={placeholder}\n      value={valueToRender || []}\n    />\n  ) : (\n    <input\n      aria-label={ariaLabel}\n      className=\"form-input\"\n      disabled={disabled}\n      onChange={(e) => onChange(e.target.value)}\n      placeholder={placeholder}\n      type=\"number\"\n      value={value as number}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Relationship/index.css

@@ -1,8 +1,8 @@
 @layer payload-default {
   .condition-value-relationship__error-loading {
     border: var(--stroke-width-small) solid var(--color-border-danger);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
+    min-height: var(--spacer-6);
+    padding: var(--spacer-2) var(--spacer-3);
     background-color: var(--color-bg-danger);
     color: var(--color-text);
   }