@payloadcms/ui 4.0.0-internal.af6aad0 → 4.0.0-internal.b8a92d2

package/dist/fields/Checkbox/index.css

@@ -1,203 +1,153 @@
 @layer payload-default {
   .checkbox {
     position: relative;
+
+    .checkbox-input {
+      padding-block: var(--spacer-1);
+    }
+
+    .field-label:not(.unstyled) {
+      font-weight: var(--text-body-medium-font-weight);
+    }
   }
 
   .checkbox-input {
     display: flex;
+
+    &:hover:not(.checkbox-input--read-only) {
+      label,
+      input {
+        cursor: pointer;
+      }
+    }
+
+    label.field-label {
+      padding-bottom: 0;
+    }
+
+    &:not(.checkbox-input--read-only) {
+      &:active,
+      &:focus-within,
+      &:focus {
+        .checkbox-input__input {
+          border-color: var(--field-color-border-focus);
+        }
+      }
+
+      &:hover {
+        .checkbox-input__input {
+          border-color: var(--field-color-toggle-border-hover);
+        }
+      }
+    }
+
+    &:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
+      &:hover {
+        cursor: pointer;
+
+        .checkbox-input__icon svg {
+          opacity: 0.2;
+        }
+      }
+    }
   }
 
   .checkbox-input__wrap {
-    position: relative;
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--spacer-2);
+    position: relative;
     width: 100%;
   }
 
-  /* Positioning shell only. The border, fill and focus ring all live on
-     `__visuals`, which is a sibling of the input so every visual state can be
-     driven from the input's own pseudo-classes. */
   .checkbox-input__input {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 0;
     position: relative;
-    display: inline-block;
-    flex-shrink: 0;
     width: var(--spacer-3);
     height: var(--spacer-3);
-    margin-block: var(--spacer-1);
-
-    /* On iPad, inline elements are selectable by default */
-    user-select: none;
-  }
-
-  /* Kept in the accessibility tree and hit-testable, but invisible */
-  .checkbox-input__control {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border-radius: 0;
-    outline: none;
-    opacity: 0;
+    border: var(--stroke-width-small) solid var(--field-color-toggle-border);
+    border-radius: var(--button-radius);
+    background: transparent;
+
+    & input[type='checkbox'] {
+      position: absolute;
+      padding: 0;
+      margin: 0;
+      opacity: 0;
+      border-radius: 0;
+      z-index: 1;
+    }
   }
 
-  .checkbox-input__visuals {
-    --checkbox-bg: var(--color-bg-secondary);
-    --checkbox-border-color: var(--special-border-translucent-strong);
-    --checkbox-focus-ring-color: transparent;
-    --checkbox-mark-color: var(--color-icon);
-    --checkbox-mark-halo-color: transparent;
-    --checkbox-duration: 100ms;
-    --checkbox-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
-
+  .checkbox-input__icon {
     position: absolute;
     inset: 0;
-    display: inline-grid;
-    place-content: center;
-    border: var(--stroke-width-small) solid var(--checkbox-border-color);
-    border-radius: var(--radius-small);
-    outline: var(--stroke-width-small) solid var(--checkbox-focus-ring-color);
-    outline-offset: var(--stroke-width-small);
-    background: var(--checkbox-bg);
-    pointer-events: none;
-  }
-
-  .checkbox-input__check,
-  .checkbox-input__mixed {
-    display: none;
-    width: var(--spacer-3);
-    height: var(--spacer-3);
-  }
-
-  .checkbox-input__mark,
-  .checkbox-input__mark-halo {
-    stroke-linecap: round;
-    stroke-linejoin: round;
-
-    /* The dash pattern is longer than either path, so offsetting by its length
-       hides the mark entirely and animating back to 0 draws it in. */
-    stroke-dasharray: 12;
-    stroke-dashoffset: 0;
-  }
-
-  .checkbox-input__mark {
-    stroke: var(--checkbox-mark-color);
-    stroke-width: 1.5;
-  }
-
-  .checkbox-input__mark-halo {
-    stroke: var(--checkbox-mark-halo-color);
-    stroke-width: 4;
-  }
-
-  .checkbox-input__control:hover + .checkbox-input__visuals {
-    --checkbox-bg: var(--color-bg-secondary-hover);
-  }
-
-  .checkbox-input__control:focus-visible + .checkbox-input__visuals {
-    --checkbox-focus-ring-color: var(--accessibility-focus-color);
-  }
-
-  .checkbox-input__control:active + .checkbox-input__visuals {
-    --checkbox-bg: var(--color-bg-secondary-pressed);
-  }
-
-  .checkbox-input__control:disabled + .checkbox-input__visuals {
-    --checkbox-bg: transparent;
-    --checkbox-border-color: var(--color-border-disabled);
-    --checkbox-mark-color: var(--color-icon-ondisabled);
-  }
-
-  .checkbox-input__control:disabled:checked + .checkbox-input__visuals,
-  .checkbox-input__control:disabled:indeterminate + .checkbox-input__visuals {
-    --checkbox-mark-color: var(--color-icon-disabled);
-  }
-
-  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):checked
-    + .checkbox-input__visuals,
-  .checkbox-input__control:disabled:not(.checkbox-input__control--muted):indeterminate
-    + .checkbox-input__visuals {
-    --checkbox-bg: var(--color-bg-disabled);
-    --checkbox-border-color: transparent;
-    --checkbox-mark-color: var(--color-icon-ondisabled);
-  }
-
-  /* The muted variant keeps the neutral surface when marked, so only the default
-     variant gets the brand fill, the on-brand mark and the mark halo. */
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled)
-    + .checkbox-input__visuals {
-    --checkbox-mark-color: var(--color-icon-onbrand);
-    --checkbox-mark-halo-color: var(--special-border-translucent);
-  }
-
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked
-    + .checkbox-input__visuals,
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate
-    + .checkbox-input__visuals {
-    --checkbox-bg: var(--color-bg-brand);
-    --checkbox-border-color: var(--special-border-translucent);
-
-    transition: background var(--checkbox-duration) var(--checkbox-easing);
-  }
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:hover
-    + .checkbox-input__visuals,
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:hover
-    + .checkbox-input__visuals {
-    --checkbox-border-color: var(--special-border-translucent-strong);
-  }
+    svg {
+      opacity: 0;
+    }
 
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):checked:active
-    + .checkbox-input__visuals,
-  .checkbox-input__control:not(.checkbox-input__control--muted, :disabled):indeterminate:active
-    + .checkbox-input__visuals {
-    --checkbox-bg: var(--color-bg-brand-hover);
-  }
+    .icon--line {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
 
-  .checkbox-input__control:indeterminate + .checkbox-input__visuals .checkbox-input__mixed {
-    display: block;
+    &.partial {
+      svg {
+        opacity: 1;
+        color: var(--color-icon-onbrand);
+      }
+    }
   }
 
-  .checkbox-input__control:checked:not(:indeterminate)
-    + .checkbox-input__visuals
-    .checkbox-input__check {
-    display: block;
-  }
+  /* Partial/indeterminate state - same blue background as checked */
+  .checkbox-input:has(.checkbox-input__icon.partial) {
+    .checkbox-input__input {
+      background-color: var(--field-color-toggle-bg-checked);
+      border-color: var(--field-color-toggle-border-checked);
+    }
 
-  .checkbox-input--changed .checkbox-input__mark,
-  .checkbox-input--changed .checkbox-input__mark-halo {
-    animation: payload-checkbox-mark-draw var(--checkbox-duration) var(--checkbox-easing) forwards;
+    &:has(:focus-visible) .checkbox-input__input {
+      outline: var(--stroke-width-small) solid var(--color-bg);
+      outline-offset: -2px;
+    }
   }
 
-  @keyframes payload-checkbox-mark-draw {
-    from {
-      stroke-dashoffset: 12;
+  .checkbox-input--checked {
+    .checkbox-input__input {
+      background-color: var(--field-color-toggle-bg-checked);
+      border-color: var(--field-color-toggle-border-checked);
     }
 
-    to {
-      stroke-dashoffset: 0;
+    &:has(:focus-visible) .checkbox-input__input {
+      outline: var(--stroke-width-small) solid var(--color-bg);
+      outline-offset: -2px; /* inset offset */
     }
-  }
 
-  .checkbox-input label.field-label {
-    margin-block-start: var(--spacer-1);
-  }
-
-  /* Align the description with the label rather than the control */
-  .checkbox > .field-description {
-    padding-inline-start: var(--spacer-4);
+    .checkbox-input__icon {
+      svg {
+        opacity: 1;
+        color: var(--field-color-toggle-icon);
+      }
+    }
   }
 
-  .checkbox-input:not(.checkbox-input--read-only),
-  .checkbox-input:not(.checkbox-input--read-only) label,
-  .checkbox-input:not(.checkbox-input--read-only) input {
-    cursor: pointer;
-  }
+  .checkbox-input--read-only {
+    .checkbox-input__input {
+      background: var(--field-color-toggle-bg-disabled);
+      border-color: var(--field-color-toggle-border-disabled);
+    }
 
-  .checkbox-input--read-only label.field-label:not(.unstyled) {
-    color: var(--field-color-text-disabled);
+    label {
+      color: var(--field-color-text-disabled);
+    }
   }
 
   .checkbox-input--has-tooltip {
@@ -226,13 +176,58 @@
     transform: translateX(-50%) rotate(180deg);
   }
 
-  .checkbox.error .checkbox-input__visuals {
-    --checkbox-border-color: var(--field-color-border-error);
+  /* Muted variant - used in tables with lighter appearance */
+  .checkbox-input--muted {
+    .checkbox-input__input {
+      background: var(--color-bg-secondary);
+      border-color: var(--color-border);
+    }
+
+    &:not(.checkbox-input--read-only):not(.checkbox-input--checked) {
+      &:hover {
+        .checkbox-input__input {
+          border-color: var(--field-color-toggle-border-hover);
+        }
+      }
+    }
+
+    /* Ensure checked state overrides muted base styles */
+    &.checkbox-input--checked {
+      .checkbox-input__input {
+        background-color: var(--field-color-toggle-bg-checked);
+        border-color: var(--field-color-toggle-border-checked);
+      }
+    }
+
+    /* Ensure partial state overrides muted base styles */
+    &:has(.checkbox-input__icon.partial) {
+      .checkbox-input__input {
+        background-color: var(--field-color-toggle-bg-checked);
+        border-color: var(--field-color-toggle-border-checked);
+      }
+    }
   }
 
-  .checkbox.error .checkbox-input__control:checked + .checkbox-input__visuals,
-  .checkbox.error .checkbox-input__control:indeterminate + .checkbox-input__visuals {
-    --checkbox-bg: var(--field-color-error-bg);
-    --checkbox-border-color: var(--field-color-border-error);
+  .checkbox.error {
+    .checkbox-input--checked {
+      .checkbox-input__input {
+        background-color: var(--field-color-error-bg);
+        border-color: var(--field-color-border-error);
+      }
+
+      &:hover .checkbox-input__input {
+        border-color: var(--field-color-border-error);
+      }
+    }
+
+    .checkbox-input:not(.checkbox-input--checked) {
+      .checkbox-input__input {
+        border-color: var(--field-color-border-error);
+      }
+
+      &:hover .checkbox-input__input {
+        border-color: var(--field-color-border-error);
+      }
+    }
   }
 }

package/dist/fields/FieldDescription/index.css

@@ -2,6 +2,11 @@
   .field-description {
     display: flex;
     color: var(--field-color-description);
+    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-body-medium-letter-spacing);
   }
 
   .field-description--margin-bottom {

package/dist/fields/FieldLabel/index.css

@@ -1,48 +1,29 @@
 @layer payload-default {
   :root {
-    --field-label-letter-spacing: -0.032px;
+    --field-label-letter-spacing: var(--text-body-medium-strong-letter-spacing);
   }
 
-  label.field-label {
+  .field-label {
     display: flex;
     align-items: center;
   }
 
-  label.field-label:not(.unstyled) {
-    display: flex;
+  .field-label:not(.unstyled) {
     color: var(--field-color-label);
     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(--field-label-letter-spacing);
-
-    html:not([dir='RTL']) & {
-      margin-right: auto;
-    }
-
-    html[dir='RTL'] & {
-      margin-left: auto;
-    }
+    margin-inline-end: auto;
   }
 
   .field-label:not(.unstyled) .required {
     color: var(--field-color-label-required);
-
-    html:not([dir='RTL']) & {
-      margin-left: var(--spacer-1);
-    }
-
-    html[dir='RTL'] & {
-      margin-right: var(--spacer-1);
-    }
+    margin-inline-start: calc(var(--spacer-1) / 2);
   }
 
   .localized {
-    html:not([dir='RTL']) & {
-      margin-left: var(--spacer-1);
-    }
-
-    html[dir='RTL'] & {
-      margin-right: var(--spacer-1);
-    }
+    margin-inline-start: var(--spacer-1);
   }
 }

package/dist/fields/FieldLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwClD,CAAA"}

package/dist/fields/FieldLabel/index.js

@@ -33,10 +33,9 @@ export const FieldLabel = props => {
   const {
     i18n
   } = useTranslation();
-  const {
-    code,
-    label: localLabel
-  } = useLocale();
+  const locale = useLocale();
+  const code = locale?.code;
+  const localLabel = locale?.label;
   const Element = ElementFromProps === "label" ? htmlFor ? "label" : "span" : ElementFromProps || "span";
   if (label) {
     return _jsxs(Element, {
@@ -45,7 +44,7 @@ export const FieldLabel = props => {
       children: [getTranslation(label, i18n), required && !unstyled && _jsx("span", {
         className: "required",
         children: "*"
-      }), localized && !hideLocale && _jsxs("span", {
+      }), localized && !hideLocale && locale && _jsxs("span", {
         className: "localized",
         children: ["\u2014 ", typeof localLabel === "string" ? localLabel : code]
       })]

package/dist/fields/FieldLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","useForm","useEditDepth","useLocale","useTranslation","generateFieldID","FieldLabel","props","as","t0","hideLocale","t1","htmlFor","htmlForFromProps","label","localized","t2","path","required","t3","unstyled","t4","ElementFromProps","undefined","uuid","editDepth","i18n","code","localLabel","Element","_jsxs","className","children","_jsx"],"sources":["../../../src/fields/FieldLabel/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericLabelProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport './index.css'\n\nexport const FieldLabel: React.FC<GenericLabelProps> = (props) => {\n  const {\n    as: ElementFromProps = 'label',\n    hideLocale = false,\n    htmlFor: htmlForFromProps,\n    label,\n    localized = false,\n    path,\n    required = false,\n    unstyled = false,\n  } = props\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n\n  const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid)\n\n  const { i18n } = useTranslation()\n  const { code, label: localLabel } = useLocale()\n\n  const Element =\n    ElementFromProps === 'label' ? (htmlFor ? 'label' : 'span') : ElementFromProps || 'span'\n\n  if (label) {\n    return (\n      <Element className={`field-label${unstyled ? ' unstyled' : ''}`} htmlFor={htmlFor}>\n        {getTranslation(label, i18n)}\n        {required && !unstyled && <span className=\"required\">*</span>}\n        {localized && !hideLocale && (\n          <span className=\"localized\">\n            &mdash; {typeof localLabel === 'string' ? localLabel : code}\n          </span>\n        )}\n      </Element>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EACrD;IAAAC,EAAA,EAAAC,EAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,KAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,IAAA;IAAAC,QAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IASId,KAAA;EARE,MAAAe,gBAAA,GAAAb,EAA0B,KAAAc,SAAA,GAAP,OAAO,GAA1Bd,EAA0B;EAC9B,MAAAC,UAAA,GAAAC,EAAkB,KAAAY,SAAA,WAAlBZ,EAAkB;EAGlB,MAAAI,SAAA,GAAAC,EAAiB,KAAAO,SAAA,WAAjBP,EAAiB;EAEjB,MAAAE,QAAA,GAAAC,EAAgB,KAAAI,SAAA,WAAhBJ,EAAgB;EAChB,MAAAC,QAAA,GAAAC,EAAgB,KAAAE,SAAA,WAAhBF,EAAgB;EAGlB;IAAAG;EAAA,IAAiBvB,OAAA;EACjB,MAAAwB,SAAA,GAAkBvB,YAAA;EAElB,MAAAU,OAAA,GAAgBC,gBAAA,IAAoBR,eAAA,CAAgBY,IAAA,EAAMQ,SAAA,EAAWD,IAAA;EAErE;IAAAE;EAAA,IAAiBtB,cAAA;EACjB;IAAAuB,IAAA;IAAAb,KAAA,EAAAc;EAAA,IAAoCzB,SAAA;EAEpC,MAAA0B,OAAA,GACEP,gBAAA,KAAqB,UAAWV,OAAA,GAAU,UAAU,SAAUU,gBAAA,IAAoB;EAAA,IAEhFR,KAAA;IAAA,OAEAgB,KAAA,CAACD,OAAA;MAAAE,SAAA,EAAmB,cAAcX,QAAA,GAAW,cAAc,IAAI;MAAAR,OAAA;MAAAoB,QAAA,GAC5DjC,cAAA,CAAee,KAAA,EAAOY,IAAA,GACtBR,QAAA,KAAaE,QAAA,IAAYa,IAAA,CAAC;QAAAF,SAAA,EAAe;QAAAC,QAAA,EAAW;MAAA,C,GACpDjB,SAAA,KAAcL,UAAA,IACboB,KAAA,CAAC;QAAAC,SAAA,EAAe;QAAAC,QAAA,GAAY,WACjB,OAAOJ,UAAA,KAAe,WAAWA,UAAA,GAAaD,IAAA;MAAA,C;;;;CAQnE","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useForm","useEditDepth","useLocale","useTranslation","generateFieldID","FieldLabel","props","as","t0","hideLocale","t1","htmlFor","htmlForFromProps","label","localized","t2","path","required","t3","unstyled","t4","ElementFromProps","undefined","uuid","editDepth","i18n","locale","code","localLabel","Element","_jsxs","className","children","_jsx"],"sources":["../../../src/fields/FieldLabel/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericLabelProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport './index.css'\n\nexport const FieldLabel: React.FC<GenericLabelProps> = (props) => {\n  const {\n    as: ElementFromProps = 'label',\n    hideLocale = false,\n    htmlFor: htmlForFromProps,\n    label,\n    localized = false,\n    path,\n    required = false,\n    unstyled = false,\n  } = props\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n\n  const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid)\n\n  const { i18n } = useTranslation()\n  const locale = useLocale()\n  const code = locale?.code\n  const localLabel = locale?.label\n\n  const Element =\n    ElementFromProps === 'label' ? (htmlFor ? 'label' : 'span') : ElementFromProps || 'span'\n\n  if (label) {\n    return (\n      <Element className={`field-label${unstyled ? ' unstyled' : ''}`} htmlFor={htmlFor}>\n        {getTranslation(label, i18n)}\n        {required && !unstyled && <span className=\"required\">*</span>}\n        {localized && !hideLocale && locale && (\n          <span className=\"localized\">\n            &mdash; {typeof localLabel === 'string' ? localLabel : code}\n          </span>\n        )}\n      </Element>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EACrD;IAAAC,EAAA,EAAAC,EAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,KAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,IAAA;IAAAC,QAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IASId,KAAA;EARE,MAAAe,gBAAA,GAAAb,EAA0B,KAAAc,SAAA,GAAP,OAAO,GAA1Bd,EAA0B;EAC9B,MAAAC,UAAA,GAAAC,EAAkB,KAAAY,SAAA,WAAlBZ,EAAkB;EAGlB,MAAAI,SAAA,GAAAC,EAAiB,KAAAO,SAAA,WAAjBP,EAAiB;EAEjB,MAAAE,QAAA,GAAAC,EAAgB,KAAAI,SAAA,WAAhBJ,EAAgB;EAChB,MAAAC,QAAA,GAAAC,EAAgB,KAAAE,SAAA,WAAhBF,EAAgB;EAGlB;IAAAG;EAAA,IAAiBvB,OAAA;EACjB,MAAAwB,SAAA,GAAkBvB,YAAA;EAElB,MAAAU,OAAA,GAAgBC,gBAAA,IAAoBR,eAAA,CAAgBY,IAAA,EAAMQ,SAAA,EAAWD,IAAA;EAErE;IAAAE;EAAA,IAAiBtB,cAAA;EACjB,MAAAuB,MAAA,GAAexB,SAAA;EACf,MAAAyB,IAAA,GAAaD,MAAA,EAAAC,IAAA;EACb,MAAAC,UAAA,GAAmBF,MAAA,EAAAb,KAAA;EAEnB,MAAAgB,OAAA,GACER,gBAAA,KAAqB,UAAWV,OAAA,GAAU,UAAU,SAAUU,gBAAA,IAAoB;EAAA,IAEhFR,KAAA;IAAA,OAEAiB,KAAA,CAACD,OAAA;MAAAE,SAAA,EAAmB,cAAcZ,QAAA,GAAW,cAAc,IAAI;MAAAR,OAAA;MAAAqB,QAAA,GAC5DlC,cAAA,CAAee,KAAA,EAAOY,IAAA,GACtBR,QAAA,KAAaE,QAAA,IAAYc,IAAA,CAAC;QAAAF,SAAA,EAAe;QAAAC,QAAA,EAAW;MAAA,C,GACpDlB,SAAA,KAAcL,UAAA,IAAciB,MAAA,IAC3BI,KAAA,CAAC;QAAAC,SAAA,EAAe;QAAAC,QAAA,GAAY,WACjB,OAAOJ,UAAA,KAAe,WAAWA,UAAA,GAAaD,IAAA;MAAA,C;;;;CAQnE","ignoreList":[]}

package/dist/fields/Group/index.css

@@ -123,6 +123,7 @@
     padding-top: 0;
   }
 
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
   @media (max-width: 768px) {
     .group-field--top-level {
       &::before {

package/dist/fields/RadioGroup/Radio/index.css

@@ -5,6 +5,7 @@
     gap: var(--spacer-2);
     cursor: pointer;
     position: relative;
+    padding-block: var(--spacer-1);
 
     input[type='radio'] {
       opacity: 0;

package/dist/fields/RadioGroup/index.css

@@ -40,7 +40,7 @@
     ul {
       display: flex;
       flex-direction: column;
-      gap: var(--spacer-2);
+      gap: var(--spacer-1);
     }
   }
 

package/dist/fields/Relationship/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/Input.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAK5F,OAAO,KAAK,EAA6B,sBAAsB,EAAiB,MAAM,YAAY,CAAA;AAuBlG,OAAO,aAAa,CAAA;AAMpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+6B9D,CAAA"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Relationship/Input.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAK5F,OAAO,KAAK,EAA6B,sBAAsB,EAAiB,MAAM,YAAY,CAAA;AAuBlG,OAAO,aAAa,CAAA;AAMpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA05B9D,CAAA"}

package/dist/fields/Relationship/Input.js

@@ -39,13 +39,11 @@ export const RelationshipInput = props => {
     appearance = 'select',
     BeforeInput,
     className,
-    CreateButton,
     description,
     Description,
     Error,
     filterOptions,
     formatDisplayedOptions,
-    formatOptionLabel,
     hasMany,
     initialValue,
     isSortable = true,
@@ -59,7 +57,6 @@ export const RelationshipInput = props => {
     readOnly,
     relationTo,
     required,
-    selectOptionFields,
     showError,
     size = 'large',
     sortOptions,
@@ -83,9 +80,8 @@ export const RelationshipInput = props => {
   const {
     permissions
   } = useAuth();
-  const {
-    code: locale
-  } = useLocale();
+  const currentLocale = useLocale();
+  const locale = currentLocale?.code;
   const [currentlyOpenRelationship, setCurrentlyOpenRelationship] = useState({
     id: undefined,
     collectionSlug: undefined,
@@ -224,7 +220,6 @@ export const RelationshipInput = props => {
               locale,
               page: lastLoadedPageToUse,
               select: {
-                ...selectOptionFields,
                 [fieldToSearch]: true
               },
               sort: fieldToSort,
@@ -303,7 +298,7 @@ export const RelationshipInput = props => {
         }
       }
     });
-  }, [permissions, queueTask, relationTo, errorLoading, search, getEntityConfig, selectOptionFields, sortOptions, maxResultsPerRequest, locale, api, i18n, config, t]);
+  }, [permissions, queueTask, relationTo, errorLoading, search, getEntityConfig, sortOptions, maxResultsPerRequest, locale, api, i18n, config, t]);
   const updateSearch = useDebouncedCallback(({
     hasMany: hasManyArg_0,
     search: searchArg_0,
@@ -363,7 +358,6 @@ export const RelationshipInput = props => {
           limit: idsToLoad.length,
           locale,
           select: {
-            ...selectOptionFields,
             [fieldToSelect]: true
           },
           where: {
@@ -645,18 +639,6 @@ export const RelationshipInput = props => {
     // i.e. when a drawer is opened and the value is set
     valueRef.current = value;
   }, [value]);
-  const formatSelectOptionLabel = useMemo(() => {
-    if (typeof formatOptionLabel !== 'function') {
-      return undefined;
-    }
-    return (option_4, {
-      context
-    }) => formatOptionLabel({
-      context,
-      defaultLabel: option_4.label,
-      doc: option_4.doc
-    });
-  }, [formatOptionLabel]);
   const valueToRender = findOptionsByValue({
     allowEdit,
     options,
@@ -710,12 +692,11 @@ export const RelationshipInput = props => {
             },
             disabled: readOnly || isDrawerOpen || isListDrawerOpen,
             filterOption: enableWordBoundarySearch ? filterOption : undefined,
-            formatOptionLabel: formatSelectOptionLabel,
-            getOptionValue: option_5 => {
-              if (!option_5) {
+            getOptionValue: option_4 => {
+              if (!option_4) {
                 return undefined;
               }
-              return hasMany && Array.isArray(relationTo) ? `${option_5.relationTo}_${option_5.value}` : option_5.value;
+              return hasMany && Array.isArray(relationTo) ? `${option_4.relationTo}_${option_4.value}` : option_4.value;
             },
             isLoading: appearance === 'select' && isLoading,
             isMulti: hasMany,
@@ -804,7 +785,7 @@ export const RelationshipInput = props => {
             showError: showError,
             value: valueToRender ?? null
           })]
-        }), !readOnly && (CreateButton ?? (allowCreate ? /*#__PURE__*/_jsx(AddNewRelation, {
+        }), !readOnly && allowCreate && /*#__PURE__*/_jsx(AddNewRelation, {
           path: path,
           relationTo: relationTo,
           ...(hasMany === true ? {
@@ -816,7 +797,7 @@ export const RelationshipInput = props => {
             onChange,
             value
           })
-        }) : null))]
+        })]
       }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
         CustomComponent: Description,
         Fallback: /*#__PURE__*/_jsx(FieldDescription, {