@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

package/dist/css/colors.css

@@ -24,10 +24,65 @@
     --special-text-on-multiplayer-green: var(--ramp-white-1000);
     --special-text-on-multiplayer-grey: var(--ramp-white-1000);
 
+    /* Drawer */
+    --color-drawer-backdrop: rgba(0, 0, 0, 0.1);
+
     /* Fullscreen */
     --fullscreen-default-icon: var(--ramp-black-800);
     --fullscreen-default-icon-tertiary: var(--ramp-black-400);
     --fullscreen-special-autofill-highlight: rgba(13, 153, 255, 0.2);
+
+    /* Modal */
+    --color-modalbackdrop: rgba(0, 0, 0, 0.5);
+
+    /* Field — override these to theme all form fields at once */
+    --field-color-bg: var(--color-bg);
+    --field-color-border: var(--special-border-translucent);
+    --field-color-text: var(--color-text);
+    --field-color-placeholder: var(--color-text-tertiary);
+
+    /* Field hover */
+    --field-color-border-hover: var(--special-border-translucent-strong);
+
+    /* Field focus */
+    --field-color-border-focus: var(--accessibility-focus-color);
+
+    /* Field disabled */
+    --field-color-bg-disabled: transparent;
+    --field-color-border-disabled: var(--color-border);
+    --field-color-text-disabled: var(--color-text-disabled);
+
+    /* Field read-only */
+    --field-color-bg-readonly: var(--color-bg);
+    --field-color-border-readonly: var(--color-border);
+    --field-color-text-readonly: var(--color-text-secondary);
+
+    /* Field error */
+    --field-color-border-error: var(--color-border-danger-strong);
+
+    /* Field label */
+    --field-color-label: var(--color-text);
+    --field-color-label-required: var(--color-text-danger);
+
+    /* Field description */
+    --field-color-description: var(--color-text-secondary);
+
+    /* Field error message */
+    --field-color-error-bg: var(--color-bg-danger);
+    --field-color-error-text: var(--color-text-ondanger);
+
+    /* Field toggle controls (checkbox, radio) */
+    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border-hover: var(--color-border-selected-strong);
+    --field-color-toggle-bg-checked: var(--color-bg-brand);
+    --field-color-toggle-border-checked: var(--color-border-selected);
+    --field-color-toggle-icon: var(--color-icon-onbrand);
+    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
+    --field-color-toggle-border-disabled: var(--color-border-disabled);
+
+    /* Field upload card */
+    --field-color-upload-bg: var(--color-bg-secondary);
+    --field-color-upload-border: var(--color-border);
   }
 
   /* ——————————————————————————————————————————————
@@ -213,6 +268,8 @@
     --color-text-oninverse: var(--ramp-white-800);
     --color-text-oninverse-secondary: var(--ramp-white-600);
 
+    --color-text-ontooltip: var(--ramp-white-800);
+
     --color-text-onselected-strong: var(--ramp-white-1000);
     --color-text-selected: var(--ramp-blue-600);
 
@@ -228,6 +285,7 @@
     --special-bg-transparent: rgba(255, 255, 255, 0.6);
     --special-bg-transparent-secondary-hover: var(--ramp-black-200);
     --special-border-translucent: var(--ramp-black-200);
+    --special-border-translucent-strong: var(--ramp-black-300);
 
     /* Multiplayer */
     --multiplayer-blue: var(--special-multiplayer-blue);
@@ -374,5 +432,6 @@
     --special-bg-transparent: rgba(0, 0, 0, 0.6);
     --special-bg-transparent-secondary-hover: var(--ramp-white-200);
     --special-border-translucent: var(--ramp-white-200);
+    --special-border-translucent-strong: var(--ramp-white-300);
   }
 }

package/dist/css/design-tokens.css

@@ -2,20 +2,21 @@
   :root {
     /* Black (opacity-based) */
     --ramp-black-100: rgba(0, 0, 0, 0.05);
-    --ramp-black-200: rgba(0, 0, 0, 0.10);
-    --ramp-black-300: rgba(0, 0, 0, 0.20);
-    --ramp-black-400: rgba(0, 0, 0, 0.30);
-    --ramp-black-500: rgba(0, 0, 0, 0.50);
-    --ramp-black-600: rgba(0, 0, 0, 0.80);
-    --ramp-black-800: rgba(0, 0, 0, 0.90);
+    --ramp-black-200: rgba(0, 0, 0, 0.1);
+    --ramp-black-300: rgba(0, 0, 0, 0.2);
+    --ramp-black-400: rgba(0, 0, 0, 0.3);
+    --ramp-black-500: rgba(0, 0, 0, 0.5);
+    --ramp-black-600: rgba(0, 0, 0, 0.8);
+    --ramp-black-800: rgba(0, 0, 0, 0.9);
 
     /* White (opacity-based) */
     --ramp-white-100: rgba(255, 255, 255, 0.05);
-    --ramp-white-200: rgba(255, 255, 255, 0.10);
-    --ramp-white-400: rgba(255, 255, 255, 0.40);
-    --ramp-white-500: rgba(255, 255, 255, 0.70);
-    --ramp-white-600: rgba(255, 255, 255, 0.80);
-    --ramp-white-800: rgba(255, 255, 255, 0.90);
+    --ramp-white-200: rgba(255, 255, 255, 0.1);
+    --ramp-white-300: rgba(255, 255, 255, 0.2);
+    --ramp-white-400: rgba(255, 255, 255, 0.4);
+    --ramp-white-500: rgba(255, 255, 255, 0.7);
+    --ramp-white-600: rgba(255, 255, 255, 0.8);
+    --ramp-white-800: rgba(255, 255, 255, 0.9);
     --ramp-white-1000: #ffffff;
 
     /* Blue */

package/dist/css/forms.css

@@ -1,16 +1,16 @@
 @layer payload-default {
   .form-input {
     width: 100%;
-    min-height: var(--spacer-5);
-    background: var(--color-bg-secondary);
-    border: 1px solid transparent;
-    border-radius: var(--radius-medium);
-    color: var(--color-text);
+    min-height: var(--field-min-height);
+    background: var(--field-color-bg);
+    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);
-    padding: 0 var(--spacer-2);
+    padding: 0 var(--field-padding-inline);
     appearance: none;
     -webkit-appearance: none;
     transition-property: box-shadow, background-color;
@@ -23,18 +23,22 @@
     }
 
     &::placeholder {
-      color: var(--color-text-tertiary);
+      color: var(--field-color-placeholder);
       font-weight: var(--text-body-medium-font-weight);
       font-size: var(--text-body-medium-font-size);
     }
 
-    &:where(:hover:not(:focus):not(:disabled)) {
-      border-color: var(--color-border);
+    &:where(:hover:not(:focus):not(:disabled):not(:read-only)) {
+      border-color: var(--field-color-border-hover);
     }
 
     &:focus {
-      border-color: var(--color-border-selected);
-      border-radius: var(--radius-medium);
+      border-color: var(--field-color-border-focus);
+      border-radius: var(--field-border-radius);
+    }
+
+    &:read-only:focus {
+      border-color: var(--field-color-border-hover);
     }
 
     &:focus-visible {
@@ -42,49 +46,52 @@
     }
 
     &:disabled {
-      color: var(--color-text-disabled);
-      border-color: var(--color-border);
-      background: none;
+      color: var(--field-color-text-disabled);
+      border-color: var(--field-color-border-disabled);
+      background: var(--field-color-bg-disabled);
     }
   }
 
   .form-input-error {
-    border-color: var(--color-border-danger-strong);
+    border-color: var(--field-color-border-error);
 
     &:focus {
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
   }
 
   .form-input-group {
     display: flex;
+    width: 100%;
+    min-width: 0;
     position: relative;
     align-items: stretch;
-    background: var(--color-bg-secondary);
-    border: 1px solid transparent;
-    border-radius: var(--radius-medium);
-    min-height: var(--spacer-5);
+    background: var(--field-color-bg);
+    border: var(--stroke-width-small) solid var(--field-color-border);
+    border-radius: var(--field-border-radius);
+    min-height: var(--field-min-height);
     transition-property: box-shadow, background-color;
     transition-duration: 100ms;
     transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
-    &:where(:hover:not(:focus-within):not(:has(input:disabled))) {
-      border-color: var(--color-border);
+    &:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
+      border-color: var(--field-color-border-hover);
     }
 
     &:focus-within {
       outline: none;
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
 
     &:has(input:disabled) {
-      background: transparent;
-      border-color: var(--color-border-disabled);
-      color: var(--color-text-disabled);
+      background: var(--field-color-bg-disabled);
+      border-color: var(--field-color-border-disabled);
+      color: var(--field-color-text-disabled);
     }
 
     input.form-input {
-      flex: 1;
+      flex: 1 1 0%;
+      width: 0;
       min-width: 0;
       background: transparent;
       border: none;
@@ -99,10 +106,10 @@
   }
 
   .form-input-group-error {
-    border-color: var(--color-border-danger-strong);
+    border-color: var(--field-color-border-error);
 
     &:focus-within {
-      border-color: var(--color-border-selected);
+      border-color: var(--field-color-border-focus);
     }
   }
 }

package/dist/css/spacing.css

@@ -8,5 +8,28 @@
     --spacer-4: 1.5rem; /** 24px */
     --spacer-5: 2rem; /** 32px */
     --spacer-6: 2.5rem; /** 40px */
+
+    /* Layout spacing */
+    --gutter-h: var(--spacer-5);
+    --spacing-field: var(--spacer-3);
+    --spacing-view-bottom: var(--gutter-h);
+
+    /* Breakpoints */
+    --breakpoint-m-width: 1024px;
+    --breakpoint-s-width: 768px;
+  }
+
+  @media (max-width: 1024px) {
+    :root {
+      --gutter-h: var(--spacer-4);
+    }
+  }
+
+  @media (max-width: 768px) {
+    :root {
+      --gutter-h: var(--spacer-3);
+      --spacing-field: var(--spacer-2-5);
+      --spacing-view-bottom: var(--spacer-6);
+    }
   }
 }

package/dist/css/theme.css

@@ -0,0 +1,28 @@
+/**
+ * Component-level theme tokens.
+ *
+ * Override any of these in your own :root block to restyle
+ * all matching components at once — no !important needed.
+ * User overrides win automatically since plain :root rules
+ * beat @layer rules without needing !important.
+ */
+
+@layer payload-default {
+  :root {
+    /* Fields — controls text inputs, selects, date pickers, code editors, etc. */
+    --field-min-height: var(--spacer-5);
+    --field-padding-inline: var(--spacer-2);
+    --field-border-radius: var(--radius-medium);
+
+    /* Buttons — also drives button-like elements (tabs, icon buttons, etc.) */
+    --button-height: var(--spacer-4);
+    --button-radius: var(--radius-medium);
+
+    /* Compact controls — search inputs, paginator inputs, toolbar inputs */
+    --control-height: var(--spacer-4);
+
+    /* Popup menus */
+    --popup-radius: var(--radius-large);
+    --popup-item-radius: var(--button-radius);
+  }
+}

package/dist/css/typography.css

@@ -9,13 +9,13 @@
     --text-body-small-font-size: 0.5625rem; /* 9px */
     --text-body-small-font-weight: 450;
     --text-body-small-line-height: 0.875rem; /* 14px */
-    --text-body-small-letter-spacing: 0.5px;
+    --text-body-small-letter-spacing: 0.045px; /* 0.5% */
 
     --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.5px;
+    --text-body-small-strong-letter-spacing: 0.045px; /* 0.5% */
 
     /* Body — Medium */
     --text-body-medium-font-family: var(--font-family-sans);
@@ -28,7 +28,7 @@
     --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.5px;
+    --text-body-medium-strong-letter-spacing: 0.055px;
 
     /* Body — Large */
     --text-body-large-font-family: var(--font-family-sans);
@@ -55,13 +55,13 @@
     --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.5px;
+    --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: -1.7px;
+    --text-heading-large-letter-spacing: -0.408px;
   }
 }

package/dist/css/utilities.css

@@ -1,6 +1,7 @@
 @layer payload-default {
   :root {
-    --accessibility-outline: 1px solid var(--color-border-selected-strong);
+    --accessibility-focus-color: var(--color-border-selected);
+    --accessibility-outline: 1px solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
   }
 
@@ -16,4 +17,11 @@
     white-space: nowrap;
     border-width: 0;
   }
+
+  /* Global focus ring */
+  :focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--button-radius);
+  }
 }

package/dist/elements/AddNewRelation/index.css

@@ -12,15 +12,15 @@
 
   .relationship-add-new__add-button {
     display: flex;
+    position: relative;
     align-items: center;
     justify-content: center;
-    width: var(--spacer-5);
-    height: var(--spacer-5);
-    padding: var(--spacer-1);
+    padding-inline: var(--spacer-1);
+    height: var(--field-min-height);
     margin: 0;
     background: var(--color-bg-secondary);
     border: none;
-    border-radius: var(--radius-medium);
+    border-radius: var(--button-radius);
     color: var(--color-icon);
     cursor: pointer;
     transition: background-color 100ms;

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;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwM1C,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;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkM1C,CAAA"}

package/dist/elements/AddNewRelation/index.js

@@ -17,7 +17,7 @@ import './index.css';
 import { Tooltip } from '../Tooltip/index.js';
 const baseClass = 'relationship-add-new';
 export const AddNewRelation = t0 => {
-  const $ = _c(46);
+  const $ = _c(45);
   const {
     Button: ButtonFromProps,
     hasMany,
@@ -44,7 +44,7 @@ export const AddNewRelation = t0 => {
     t1 = $[2];
   }
   const [collectionConfig, setCollectionConfig] = useState(t1);
-  const [popupOpen, setPopupOpen] = useState(false);
+  const [, setPopupOpen] = useState(false);
   const {
     i18n,
     t
@@ -197,7 +197,7 @@ export const AddNewRelation = t0 => {
   const t15 = relatedCollections[0]?.labels.singular;
   let t16;
   let t17;
-  if ($[29] !== ButtonFromProps || $[30] !== DocumentDrawer || $[31] !== DocumentDrawerToggler || $[32] !== collectionConfig || $[33] !== i18n || $[34] !== onSave || $[35] !== path || $[36] !== permissions || $[37] !== popupOpen || $[38] !== relatedCollections || $[39] !== show || $[40] !== showTooltip || $[41] !== t || $[42] !== t15 || $[43] !== unstyled) {
+  if ($[29] !== ButtonFromProps || $[30] !== DocumentDrawer || $[31] !== DocumentDrawerToggler || $[32] !== collectionConfig || $[33] !== i18n || $[34] !== onSave || $[35] !== path || $[36] !== permissions || $[37] !== relatedCollections || $[38] !== show || $[39] !== showTooltip || $[40] !== t || $[41] !== t15 || $[42] !== unstyled) {
     t17 = Symbol.for("react.early_return_sentinel");
     bb0: {
       const label = t("fields:addNewLabel", {
@@ -212,10 +212,8 @@ export const AddNewRelation = t0 => {
         id: `${path}-add-new`,
         children: [relatedCollections.length === 1 && _jsxs(Fragment, {
           children: [_jsx(DocumentDrawerToggler, {
+            buttonStyle: "pill",
             className: [`${baseClass}__add-button`, unstyled && `${baseClass}__add-button--unstyled`].filter(Boolean).join(" "),
-            onClick: () => {
-              setShowTooltip(false);
-            },
             onMouseEnter: () => setShowTooltip(true),
             onMouseLeave: () => setShowTooltip(false),
             children: ButtonFromProps ? ButtonFromProps : _jsxs(Fragment, {
@@ -230,14 +228,8 @@ export const AddNewRelation = t0 => {
           })]
         }), relatedCollections.length > 1 && _jsxs(Fragment, {
           children: [_jsx(Popup, {
-            button: ButtonFromProps ? ButtonFromProps : _jsx(Button, {
-              buttonStyle: "none",
-              className: `${baseClass}__add-button`,
-              tooltip: popupOpen ? undefined : t("fields:addNew"),
-              children: _jsx(PlusIcon, {})
-            }),
             buttonType: "custom",
-            horizontalAlign: "center",
+            horizontalAlign: "right",
             onToggleOpen: onPopupToggle,
             render: t18 => {
               const {
@@ -259,7 +251,7 @@ export const AddNewRelation = t0 => {
                 })
               });
             },
-            size: "medium"
+            renderButton: _temp
           }), collectionConfig && permissions.collections[collectionConfig?.slug]?.create && _jsx(DocumentDrawer, {
             onSave
           })]
@@ -274,22 +266,34 @@ export const AddNewRelation = t0 => {
     $[34] = onSave;
     $[35] = path;
     $[36] = permissions;
-    $[37] = popupOpen;
-    $[38] = relatedCollections;
-    $[39] = show;
-    $[40] = showTooltip;
-    $[41] = t;
-    $[42] = t15;
-    $[43] = unstyled;
-    $[44] = t16;
-    $[45] = t17;
+    $[37] = relatedCollections;
+    $[38] = show;
+    $[39] = showTooltip;
+    $[40] = t;
+    $[41] = t15;
+    $[42] = unstyled;
+    $[43] = t16;
+    $[44] = t17;
   } else {
-    t16 = $[44];
-    t17 = $[45];
+    t16 = $[43];
+    t17 = $[44];
   }
   if (t17 !== Symbol.for("react.early_return_sentinel")) {
     return t17;
   }
   return t16;
 };
+function _temp(t0) {
+  const {
+    active,
+    ...buttonProps
+  } = t0;
+  return _jsx(Button, {
+    className: `${baseClass}__add-button`,
+    ...buttonProps,
+    buttonStyle: "pill",
+    selected: active,
+    children: _jsx(PlusIcon, {})
+  });
+}
 //# sourceMappingURL=index.js.map

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","Tooltip","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","showTooltip","setShowTooltip","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","Symbol","for","state","onPopupToggle","t7","t8","collections","create","collection","t10","t9","find","collection_0","t11","t12","t13","t14","t15","labels","singular","t16","t17","bb0","label","_jsxs","className","children","_jsx","filter","Boolean","join","onClick","onMouseEnter","onMouseLeave","button","buttonStyle","tooltip","horizontalAlign","onToggleOpen","render","t18","close","closePopup","ButtonGroup","map","relatedCollection"],"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'\nimport { Tooltip } from '../Tooltip/index.js'\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  const [showTooltip, setShowTooltip] = useState(false)\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  const onPopupToggle = useCallback((state) => {\n    setPopupOpen(state)\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            className={[\n              `${baseClass}__add-button`,\n              unstyled && `${baseClass}__add-button--unstyled`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => {\n              setShowTooltip(false)\n            }}\n            onMouseEnter={() => setShowTooltip(true)}\n            onMouseLeave={() => setShowTooltip(false)}\n          >\n            {ButtonFromProps ? (\n              ButtonFromProps\n            ) : (\n              <Fragment>\n                <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n                  {label}\n                </Tooltip>\n                <PlusIcon />\n              </Fragment>\n            )}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            button={\n              ButtonFromProps ? (\n                ButtonFromProps\n              ) : (\n                <Button\n                  buttonStyle=\"none\"\n                  className={`${baseClass}__add-button`}\n                  tooltip={popupOpen ? undefined : t('fields:addNew')}\n                >\n                  <PlusIcon />\n                </Button>\n              )\n            }\n            buttonType=\"custom\"\n            horizontalAlign=\"center\"\n            onToggleOpen={onPopupToggle}\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            size=\"medium\"\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","Tooltip","baseClass","AddNewRelation","t0","$","ButtonFromProps","hasMany","onChange","path","relationTo","unstyled","value","relatedCollections","permissions","show","setShow","selectedCollection","setSelectedCollection","relatedToMany","length","t1","undefined","collectionConfig","setCollectionConfig","setPopupOpen","i18n","t","showTooltip","setShowTooltip","t2","slug","t3","collectionSlug","DocumentDrawer","DocumentDrawerToggler","t4","isDrawerOpen","toggleDrawer","t5","t6","doc","operation","isNewValue","some","v","id","Array","isArray","onSave","Symbol","for","state","onPopupToggle","t7","t8","collections","create","collection","t10","t9","find","collection_0","t11","t12","t13","t14","t15","labels","singular","t16","t17","bb0","label","_jsxs","className","children","_jsx","buttonStyle","filter","Boolean","join","onMouseEnter","onMouseLeave","buttonType","horizontalAlign","onToggleOpen","render","t18","close","closePopup","ButtonGroup","map","relatedCollection","onClick","_temp","active","buttonProps","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'\nimport { Tooltip } from '../Tooltip/index.js'\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  const [showTooltip, setShowTooltip] = useState(false)\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  const onPopupToggle = useCallback((state) => {\n    setPopupOpen(state)\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            onMouseEnter={() => setShowTooltip(true)}\n            onMouseLeave={() => setShowTooltip(false)}\n          >\n            {ButtonFromProps ? (\n              ButtonFromProps\n            ) : (\n              <Fragment>\n                <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n                  {label}\n                </Tooltip>\n                <PlusIcon />\n              </Fragment>\n            )}\n          </DocumentDrawerToggler>\n          <DocumentDrawer onSave={onSave} />\n        </Fragment>\n      )}\n      {relatedCollections.length > 1 && (\n        <Fragment>\n          <Popup\n            buttonType=\"custom\"\n            horizontalAlign=\"right\"\n            onToggleOpen={onPopupToggle}\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              >\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":[]}

package/dist/elements/AnimateHeight/{index.scss → index.css}

@@ -2,9 +2,9 @@
   .rah-static {
     interpolate-size: allow-keywords;
     height: 0;
+  }
 
-    &--height-auto {
-      height: auto;
-    }
+  .rah-static--height-auto {
+    height: auto;
   }
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const AnimateHeight: React.FC<{
     children: React.ReactNode;
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CA0FA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAGhD,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CA0FA,CAAA"}

package/dist/elements/AnimateHeight/index.js

@@ -3,7 +3,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from 'react';
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js';
-import './index.scss';
+import './index.css';
 export const AnimateHeight = ({
   id,
   children,