@payloadcms/ui 4.0.0-internal.8001944 → 4.0.0-internal.8089ef7

package/dist/fields/Blocks/index.css

@@ -87,7 +87,7 @@
   .blocks-field__title {
     margin-bottom: 0;
     color: var(--color-text);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
   }
 
   .blocks-field__block-header {
@@ -108,7 +108,7 @@
 
   .blocks-field__block-number {
     flex-shrink: 0;
-    color: var(--color-text);
+    color: var(--color-text-secondary);
   }
 
   .blocks-field__block-pill {

package/dist/fields/Checkbox/Input.js

@@ -33,7 +33,7 @@ export const CheckboxInput = ({
   const fallbackID = useId();
   const id = idFromProps || fallbackID;
   const ariaLabel = ariaLabelFromProps || undefined;
-  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name;
+  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps;
   const controlWrapRef = useRef(null);
   useEffect(() => {
     setIsHydrated(true);

package/dist/fields/Checkbox/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","useCallback","useEffect","useId","useRef","useState","RenderCustomComponent","Tooltip","FieldLabel","inputBaseClass","CheckboxInput","id","idFromProps","name","AfterInput","ariaLabelFromProps","ariaLabelledByFromProps","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","isHydrated","setIsHydrated","showTooltip","setShowTooltip","hasChanged","setHasChanged","fallbackID","ariaLabel","undefined","ariaLabelledBy","controlWrapRef","isIndeterminate","Boolean","control","current","querySelector","HTMLInputElement","indeterminate","handleToggle","event","_jsxs","filter","join","onPointerEnter","onPointerLeave","ref","_jsx","disabled","onChange","title","type","Mark","shape","CustomComponent","Fallback","htmlFor","alignCaret","show","markShapes","check","d","shapeRendering","mixed","fill","height","viewBox","width","xmlns"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly 'aria-label'?: string\n  readonly 'aria-labelledby'?: string\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Brand fill and an on-brand mark when checked (for form fields)\n   * - 'muted': Keeps the neutral surface when checked (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  'aria-label': ariaLabelFromProps,\n  'aria-labelledby': ariaLabelledByFromProps,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const [hasChanged, setHasChanged] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n  const ariaLabel = ariaLabelFromProps || undefined\n  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps || name\n  const controlWrapRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n  const isIndeterminate = !checked && Boolean(partialChecked)\n\n  /**\n   * `indeterminate` has no HTML attribute, so the mixed state has to be written to the\n   * node itself. The node is reached through the wrapper rather than a ref on the input\n   * so that a caller-supplied `inputRef` stays the only ref attached to it. Setting the\n   * property keeps mark selection in CSS and reports the real `mixed` state to\n   * assistive technology.\n   */\n  useEffect(() => {\n    const control = controlWrapRef.current?.querySelector(`.${inputBaseClass}__control`)\n\n    if (control instanceof HTMLInputElement) {\n      control.indeterminate = isIndeterminate\n    }\n  }, [isIndeterminate])\n\n  /**\n   * The mark only draws itself in once the value has actually changed, so a document\n   * that loads with the box already checked doesn't replay the animation.\n   */\n  const handleToggle = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasChanged(true)\n      onToggle(event)\n    },\n    [onToggle],\n  )\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        isIndeterminate && `${inputBaseClass}--indeterminate`,\n        readOnly && `${inputBaseClass}--read-only`,\n        hasChanged && `${inputBaseClass}--changed`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`} ref={controlWrapRef}>\n          <input\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={Boolean(checked)}\n            className={[\n              `${inputBaseClass}__control`,\n              variant !== 'default' && `${inputBaseClass}__control--${variant}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={handleToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          {/* Both marks are always rendered and revealed by CSS, so an uncontrolled\n              input that changes without React knowing still shows the right mark. */}\n          <span className={`${inputBaseClass}__visuals`}>\n            <Mark className={`${inputBaseClass}__mixed`} shape=\"mixed\" />\n            <Mark className={`${inputBaseClass}__check`} shape=\"check\" />\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n\nconst markShapes = {\n  check: { d: 'M5.00012 8.5L7.5 11L11.5 5', shapeRendering: 'geometricPrecision' },\n  mixed: { d: 'M5 8H11', shapeRendering: 'crispEdges' },\n} as const\n\n/**\n * Each mark is drawn twice: a wider halo stroke underneath, then the mark itself on\n * top. The halo is what keeps the mark legible against the brand fill.\n */\nconst Mark: React.FC<{\n  readonly className: string\n  readonly shape: keyof typeof markShapes\n}> = ({ className, shape }) => {\n  const { d, shapeRendering } = markShapes[shape]\n\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      height={16}\n      viewBox=\"0 0 16 16\"\n      width={16}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className={`${inputBaseClass}__mark-halo`} d={d} shapeRendering={shapeRendering} />\n      <path className={`${inputBaseClass}__mark`} d={d} shapeRendering={shapeRendering} />\n    </svg>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","useCallback","useEffect","useId","useRef","useState","RenderCustomComponent","Tooltip","FieldLabel","inputBaseClass","CheckboxInput","id","idFromProps","name","AfterInput","ariaLabelFromProps","ariaLabelledByFromProps","BeforeInput","checked","className","Error","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","readOnlyFromProps","required","tooltip","variant","isHydrated","setIsHydrated","showTooltip","setShowTooltip","hasChanged","setHasChanged","fallbackID","ariaLabel","undefined","ariaLabelledBy","controlWrapRef","isIndeterminate","Boolean","control","current","querySelector","HTMLInputElement","indeterminate","handleToggle","event","_jsxs","filter","join","onPointerEnter","onPointerLeave","ref","_jsx","disabled","onChange","title","type","Mark","shape","CustomComponent","Fallback","htmlFor","alignCaret","show","markShapes","check","d","shapeRendering","mixed","fill","height","viewBox","width","xmlns"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from 'payload'\n\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly 'aria-label'?: string\n  readonly 'aria-labelledby'?: string\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly Error?: React.ReactNode\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n  readonly tooltip?: string\n  /**\n   * Visual variant for the checkbox\n   * - 'default': Brand fill and an on-brand mark when checked (for form fields)\n   * - 'muted': Keeps the neutral surface when checked (for tables)\n   */\n  readonly variant?: 'default' | 'muted'\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  'aria-label': ariaLabelFromProps,\n  'aria-labelledby': ariaLabelledByFromProps,\n  BeforeInput,\n  checked,\n  className,\n  Error,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly: readOnlyFromProps,\n  required,\n  tooltip,\n  variant = 'default',\n}) => {\n  const [isHydrated, setIsHydrated] = useState(false)\n  const [showTooltip, setShowTooltip] = useState(false)\n  const [hasChanged, setHasChanged] = useState(false)\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n  const ariaLabel = ariaLabelFromProps || undefined\n  const ariaLabelledBy = ariaLabel ? undefined : ariaLabelledByFromProps\n  const controlWrapRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const readOnly = readOnlyFromProps || !isHydrated\n  const isIndeterminate = !checked && Boolean(partialChecked)\n\n  /**\n   * `indeterminate` has no HTML attribute, so the mixed state has to be written to the\n   * node itself. The node is reached through the wrapper rather than a ref on the input\n   * so that a caller-supplied `inputRef` stays the only ref attached to it. Setting the\n   * property keeps mark selection in CSS and reports the real `mixed` state to\n   * assistive technology.\n   */\n  useEffect(() => {\n    const control = controlWrapRef.current?.querySelector(`.${inputBaseClass}__control`)\n\n    if (control instanceof HTMLInputElement) {\n      control.indeterminate = isIndeterminate\n    }\n  }, [isIndeterminate])\n\n  /**\n   * The mark only draws itself in once the value has actually changed, so a document\n   * that loads with the box already checked doesn't replay the animation.\n   */\n  const handleToggle = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasChanged(true)\n      onToggle(event)\n    },\n    [onToggle],\n  )\n\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        isIndeterminate && `${inputBaseClass}--indeterminate`,\n        readOnly && `${inputBaseClass}--read-only`,\n        hasChanged && `${inputBaseClass}--changed`,\n        tooltip && `${inputBaseClass}--has-tooltip`,\n        variant !== 'default' && `${inputBaseClass}--${variant}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onPointerEnter={tooltip ? () => setShowTooltip(true) : undefined}\n      onPointerLeave={tooltip ? () => setShowTooltip(false) : undefined}\n    >\n      {BeforeInput}\n      <div className={`${inputBaseClass}__wrap`}>\n        <div className={`${inputBaseClass}__input`} ref={controlWrapRef}>\n          <input\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            checked={Boolean(checked)}\n            className={[\n              `${inputBaseClass}__control`,\n              variant !== 'default' && `${inputBaseClass}__control--${variant}`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            disabled={readOnly}\n            id={id}\n            name={name}\n            onChange={handleToggle}\n            ref={inputRef}\n            required={required}\n            title={name}\n            type=\"checkbox\"\n          />\n          {/* Both marks are always rendered and revealed by CSS, so an uncontrolled\n              input that changes without React knowing still shows the right mark. */}\n          <span className={`${inputBaseClass}__visuals`}>\n            <Mark className={`${inputBaseClass}__mixed`} shape=\"mixed\" />\n            <Mark className={`${inputBaseClass}__check`} shape=\"check\" />\n          </span>\n        </div>\n        <RenderCustomComponent\n          CustomComponent={Label}\n          Fallback={\n            <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n          }\n        />\n        {Error}\n      </div>\n      {tooltip && (\n        <Tooltip alignCaret=\"left\" className={`${inputBaseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      {AfterInput}\n    </div>\n  )\n}\n\nconst markShapes = {\n  check: { d: 'M5.00012 8.5L7.5 11L11.5 5', shapeRendering: 'geometricPrecision' },\n  mixed: { d: 'M5 8H11', shapeRendering: 'crispEdges' },\n} as const\n\n/**\n * Each mark is drawn twice: a wider halo stroke underneath, then the mark itself on\n * top. The halo is what keeps the mark legible against the brand fill.\n */\nconst Mark: React.FC<{\n  readonly className: string\n  readonly shape: keyof typeof markShapes\n}> = ({ className, shape }) => {\n  const { d, shapeRendering } = markShapes[shape]\n\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      height={16}\n      viewBox=\"0 0 16 16\"\n      width={16}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path className={`${inputBaseClass}__mark-halo`} d={d} shapeRendering={shapeRendering} />\n      <path className={`${inputBaseClass}__mark`} d={d} shapeRendering={shapeRendering} />\n    </svg>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAEvE,SAASC,qBAAqB,QAAQ;AACtC,SAASC,OAAO,QAAQ;AACxB,SAASC,UAAU,QAAQ;AA6B3B,OAAO,MAAMC,cAAA,GAAiB;AAE9B,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,EAAA,EAAIC,WAAW;EACfC,IAAI;EACJC,UAAU;EACV,cAAcC,kBAAkB;EAChC,mBAAmBC,uBAAuB;EAC1CC,WAAW;EACXC,OAAO;EACPC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC,QAAA,EAAUC,iBAAiB;EAC3BC,QAAQ;EACRC,OAAO;EACPC,OAAA,GAAU;AAAS,CACpB;EACC,MAAM,CAACC,UAAA,EAAYC,aAAA,CAAc,GAAG5B,QAAA,CAAS;EAC7C,MAAM,CAAC6B,WAAA,EAAaC,cAAA,CAAe,GAAG9B,QAAA,CAAS;EAC/C,MAAM,CAAC+B,UAAA,EAAYC,aAAA,CAAc,GAAGhC,QAAA,CAAS;EAC7C,MAAMiC,UAAA,GAAanC,KAAA;EACnB,MAAMQ,EAAA,GAAKC,WAAA,IAAe0B,UAAA;EAC1B,MAAMC,SAAA,GAAYxB,kBAAA,IAAsByB,SAAA;EACxC,MAAMC,cAAA,GAAiBF,SAAA,GAAYC,SAAA,GAAYxB,uBAAA;EAC/C,MAAM0B,cAAA,GAAiBtC,MAAA,CAA8B;EAErDF,SAAA,CAAU;IACR+B,aAAA,CAAc;EAChB,GAAG,EAAE;EAEL,MAAMN,QAAA,GAAWC,iBAAA,IAAqB,CAACI,UAAA;EACvC,MAAMW,eAAA,GAAkB,CAACzB,OAAA,IAAW0B,OAAA,CAAQlB,cAAA;EAE5C;;;;;;;EAOAxB,SAAA,CAAU;IACR,MAAM2C,OAAA,GAAUH,cAAA,CAAeI,OAAO,EAAEC,aAAA,CAAc,IAAItC,cAAA,WAAyB;IAEnF,IAAIoC,OAAA,YAAmBG,gBAAA,EAAkB;MACvCH,OAAA,CAAQI,aAAa,GAAGN,eAAA;IAC1B;EACF,GAAG,CAACA,eAAA,CAAgB;EAEpB;;;;EAIA,MAAMO,YAAA,GAAejD,WAAA,CAClBkD,KAAA;IACCd,aAAA,CAAc;IACdZ,QAAA,CAAS0B,KAAA;EACX,GACA,CAAC1B,QAAA,CAAS;EAGZ,oBACE2B,KAAA,CAAC;IACCjC,SAAA,EAAW,CACTA,SAAA,EACAV,cAAA,EACAS,OAAA,IAAW,GAAGT,cAAA,WAAyB,EACvCkC,eAAA,IAAmB,GAAGlC,cAAA,iBAA+B,EACrDkB,QAAA,IAAY,GAAGlB,cAAA,aAA2B,EAC1C2B,UAAA,IAAc,GAAG3B,cAAA,WAAyB,EAC1CqB,OAAA,IAAW,GAAGrB,cAAA,eAA6B,EAC3CsB,OAAA,KAAY,aAAa,GAAGtB,cAAA,KAAmBsB,OAAA,EAAS,CACzD,CACEsB,MAAM,CAACT,OAAA,EACPU,IAAI,CAAC;IACRC,cAAA,EAAgBzB,OAAA,GAAU,MAAMK,cAAA,CAAe,QAAQK,SAAA;IACvDgB,cAAA,EAAgB1B,OAAA,GAAU,MAAMK,cAAA,CAAe,SAASK,SAAA;eAEvDvB,WAAA,E,aACDmC,KAAA,CAAC;MAAIjC,SAAA,EAAW,GAAGV,cAAA,QAAsB;8BACvC2C,KAAA,CAAC;QAAIjC,SAAA,EAAW,GAAGV,cAAA,SAAuB;QAAEgD,GAAA,EAAKf,cAAA;gCAC/CgB,IAAA,CAAC;UACC,cAAYnB,SAAA;UACZ,mBAAiBE,cAAA;UACjBvB,OAAA,EAAS0B,OAAA,CAAQ1B,OAAA;UACjBC,SAAA,EAAW,CACT,GAAGV,cAAA,WAAyB,EAC5BsB,OAAA,KAAY,aAAa,GAAGtB,cAAA,cAA4BsB,OAAA,EAAS,CAClE,CACEsB,MAAM,CAACT,OAAA,EACPU,IAAI,CAAC;UACRK,QAAA,EAAUhC,QAAA;UACVhB,EAAA,EAAIA,EAAA;UACJE,IAAA,EAAMA,IAAA;UACN+C,QAAA,EAAUV,YAAA;UACVO,GAAA,EAAKpC,QAAA;UACLQ,QAAA,EAAUA,QAAA;UACVgC,KAAA,EAAOhD,IAAA;UACPiD,IAAA,EAAK;yBAIPV,KAAA,CAAC;UAAKjC,SAAA,EAAW,GAAGV,cAAA,WAAyB;kCAC3CiD,IAAA,CAACK,IAAA;YAAK5C,SAAA,EAAW,GAAGV,cAAA,SAAuB;YAAEuD,KAAA,EAAM;2BACnDN,IAAA,CAACK,IAAA;YAAK5C,SAAA,EAAW,GAAGV,cAAA,SAAuB;YAAEuD,KAAA,EAAM;;;uBAGvDN,IAAA,CAACpD,qBAAA;QACC2D,eAAA,EAAiB3C,KAAA;QACjB4C,QAAA,eACER,IAAA,CAAClD,UAAA;UAAW2D,OAAA,EAASxD,EAAA;UAAIY,KAAA,EAAOA,KAAA;UAAOC,SAAA,EAAWA,SAAA;UAAWK,QAAA,EAAUA;;UAG1ET,KAAA;QAEFU,OAAA,iBACC4B,IAAA,CAACnD,OAAA;MAAQ6D,UAAA,EAAW;MAAOjD,SAAA,EAAW,GAAGV,cAAA,WAAyB;MAAE4D,IAAA,EAAMnC,WAAA;gBACvEJ;QAGJhB,UAAA;;AAGP;AAEA,MAAMwD,UAAA,GAAa;EACjBC,KAAA,EAAO;IAAEC,CAAA,EAAG;IAA8BC,cAAA,EAAgB;EAAqB;EAC/EC,KAAA,EAAO;IAAEF,CAAA,EAAG;IAAWC,cAAA,EAAgB;EAAa;AACtD;AAEA;;;;AAIA,MAAMV,IAAA,GAGDA,CAAC;EAAE5C,SAAS;EAAE6C;AAAK,CAAE;EACxB,MAAM;IAAEQ,CAAC;IAAEC;EAAc,CAAE,GAAGH,UAAU,CAACN,KAAA,CAAM;EAE/C,oBACEZ,KAAA,CAAC;IACCjC,SAAA,EAAWA,SAAA;IACXwD,IAAA,EAAK;IACLC,MAAA,EAAQ;IACRC,OAAA,EAAQ;IACRC,KAAA,EAAO;IACPC,KAAA,EAAM;4BAENrB,IAAA,CAAC;MAAKvC,SAAA,EAAW,GAAGV,cAAA,aAA2B;MAAE+D,CAAA,EAAGA,CAAA;MAAGC,cAAA,EAAgBA;qBACvEf,IAAA,CAAC;MAAKvC,SAAA,EAAW,GAAGV,cAAA,QAAsB;MAAE+D,CAAA,EAAGA,CAAA;MAAGC,cAAA,EAAgBA;;;AAGxE","ignoreList":[]}

package/dist/fields/Checkbox/index.css

@@ -3,6 +3,10 @@
     position: relative;
   }
 
+  .field-type.checkbox:has(+ .checkbox) {
+    margin-bottom: var(--spacer-2);
+  }
+
   .checkbox-input {
     display: flex;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAuB,MAAM,SAAS,CAAA;AAKxE,OAAO,KAA+B,MAAM,OAAO,CAAA;AAUnD,OAAO,aAAa,CAAA;AA2MpB,eAAO,MAAM,aAAa,gCAAwC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTime/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAuB,MAAM,SAAS,CAAA;AAKxE,OAAO,KAA+B,MAAM,OAAO,CAAA;AAUnD,OAAO,aAAa,CAAA;AAwNpB,eAAO,MAAM,aAAa,gCAAwC,CAAA"}

package/dist/fields/DateTime/index.js

@@ -16,7 +16,9 @@ import { useField } from '../../forms/useField/index.js';
 import './index.css';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
 const baseClass = 'date-time-field';
@@ -50,8 +52,10 @@ const DateTimeFieldComponent = props => {
   } = useTranslation();
   const {
     dispatchFields,
-    setModified
+    setModified,
+    uuid
   } = useForm();
+  const editDepth = useEditDepth();
   const memoizedValidate = useCallback((value, options) => {
     if (typeof validate === 'function') {
       return validate(value, {
@@ -77,6 +81,7 @@ const DateTimeFieldComponent = props => {
     potentiallyStalePath: pathFromProps,
     validate: memoizedValidate
   });
+  const inputId = datePickerProps?.overrides?.id || generateFieldID(path ?? '', editDepth, uuid ?? '', 'date-input');
   const timezonePath = path + '_tz';
   const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath]);
   const supportedTimezones = useMemo(() => {
@@ -152,6 +157,7 @@ const DateTimeFieldComponent = props => {
     children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Label,
       Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        htmlFor: inputId,
         label: label,
         localized: localized,
         path: path,
@@ -170,7 +176,8 @@ const DateTimeFieldComponent = props => {
         ...datePickerProps,
         onChange: onChange,
         overrides: {
-          ...datePickerProps?.overrides
+          ...datePickerProps?.overrides,
+          id: inputId
         },
         placeholder: getTranslation(placeholder, i18n),
         readOnly: readOnly || disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TZDateMini","TZDate","getTranslation","transpose","React","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useTranslation","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","pathFromProps","readOnly","validate","pickerAppearance","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","isDateOnly","includes","selectedTimezone","timezoneRequired","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","onChangeTimezone","type","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","overrides","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientProps, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.css'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: React.FC<DateFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified } = useForm()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n\n  const supportedTimezones = useMemo(() => {\n    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {\n      return timezone.supportedTimezones\n    }\n\n    return config.admin.timezones.supportedTimezones\n  }, [config.admin.timezones.supportedTimezones, timezone])\n\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n  const timezoneRequired =\n    required || (timezone && typeof timezone === 'object' && timezone.required)\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!(readOnly || disabled)) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel label={label} localized={localized} path={path} required={required} />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly || disabled}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            readOnly={readOnly || disabled}\n            required={timezoneRequired}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["TZDateMini","TZDate","getTranslation","transpose","React","useCallback","useMemo","DatePickerField","RenderCustomComponent","TimezonePicker","FieldDescription","FieldError","FieldLabel","useForm","useFormFields","useField","withCondition","useConfig","useEditDepth","useTranslation","generateFieldID","mergeFieldStyles","fieldBaseClass","baseClass","DateTimeFieldComponent","props","field","admin","className","date","datePickerProps","description","placeholder","label","localized","required","timezone","path","pathFromProps","readOnly","validate","pickerAppearance","userTimezone","Intl","DateTimeFormat","resolvedOptions","timeZone","config","i18n","dispatchFields","setModified","uuid","editDepth","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","inputId","overrides","id","timezonePath","timezoneField","fields","_","supportedTimezones","timezones","isDateOnly","includes","selectedTimezone","timezoneRequired","displayedValue","DateWithOriginalTz","tz","DateWithUserTz","modifiedDate","withTimeZone","dateWithTimezone","dateWithUserTimezone","toISOString","styles","onChange","incomingDate","TZDateWithSelectedTz","incomingOffset","getTimezoneOffset","originalHour","getHours","setHours","dateToSelectedTz","dateToUserTz","onChangeTimezone","type","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","htmlFor","replace","length","DateTimeField"],"sources":["../../../src/fields/DateTime/index.tsx"],"sourcesContent":["'use client'\nimport type { DateFieldClientProps, DateFieldValidation } from 'payload'\n\nimport { TZDateMini as TZDate } from '@date-fns/tz/date/mini'\nimport { getTranslation } from '@payloadcms/translations'\nimport { transpose } from 'date-fns'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { DatePickerField } from '../../elements/DatePicker/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { TimezonePicker } from '../../elements/TimezonePicker/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useForm, useFormFields } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport './index.css'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\n\nconst baseClass = 'date-time-field'\n\nconst DateTimeFieldComponent: React.FC<DateFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, date: datePickerProps, description, placeholder } = {},\n      label,\n      localized,\n      required,\n      timezone,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const pickerAppearance = datePickerProps?.pickerAppearance || 'default'\n\n  // Get the user timezone so we can adjust the displayed value against it\n  const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone\n\n  const { config } = useConfig()\n  const { i18n } = useTranslation()\n  const { dispatchFields, setModified, uuid } = useForm()\n  const editDepth = useEditDepth()\n\n  const memoizedValidate: DateFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<string>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const inputId =\n    datePickerProps?.overrides?.id ||\n    generateFieldID(path ?? '', editDepth, uuid ?? '', 'date-input')\n  const timezonePath = path + '_tz'\n  const timezoneField = useFormFields(([fields, _]) => fields?.[timezonePath])\n\n  const supportedTimezones = useMemo(() => {\n    if (timezone && typeof timezone === 'object' && timezone.supportedTimezones) {\n      return timezone.supportedTimezones\n    }\n\n    return config.admin.timezones.supportedTimezones\n  }, [config.admin.timezones.supportedTimezones, timezone])\n\n  /**\n   * Date appearance doesn't include timestamps,\n   * which means we need to pin the time to always 12:00 for the selected date\n   */\n  const isDateOnly = ['dayOnly', 'default', 'monthOnly'].includes(pickerAppearance)\n  const selectedTimezone = timezoneField?.value as string\n  const timezoneRequired =\n    required || (timezone && typeof timezone === 'object' && timezone.required)\n\n  // The displayed value should be the original value, adjusted to the user's timezone\n  const displayedValue = useMemo(() => {\n    if (timezone && selectedTimezone && userTimezone && value) {\n      // Create TZDate instances for the selected timezone and the user's timezone\n      // These instances allow us to transpose the date between timezones while keeping the same time value\n      const DateWithOriginalTz = TZDate.tz(selectedTimezone)\n      const DateWithUserTz = TZDate.tz(userTimezone)\n\n      const modifiedDate = new TZDate(value).withTimeZone(selectedTimezone)\n\n      // Transpose the date to the selected timezone\n      const dateWithTimezone = transpose(modifiedDate, DateWithOriginalTz)\n\n      // Transpose the date to the user's timezone - this is necessary because the react-datepicker component insists on displaying the date in the user's timezone\n      const dateWithUserTimezone = transpose(dateWithTimezone, DateWithUserTz)\n\n      return dateWithUserTimezone.toISOString()\n    }\n\n    return value\n  }, [timezone, selectedTimezone, value, userTimezone])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const onChange = useCallback(\n    (incomingDate: Date) => {\n      if (!(readOnly || disabled)) {\n        if (timezone && selectedTimezone && incomingDate) {\n          // Create TZDate instances for the selected timezone\n          const TZDateWithSelectedTz = TZDate.tz(selectedTimezone)\n\n          if (isDateOnly) {\n            // We need to offset this hardcoded hour offset from the DatePicker elemenent\n            // this can be removed in 4.0 when we remove the hardcoded offset as it is a breaking change\n            // const tzOffset = incomingDate.getTimezoneOffset() / 60\n            const incomingOffset = incomingDate.getTimezoneOffset() / 60\n            const originalHour = incomingDate.getHours() + incomingOffset\n            incomingDate.setHours(originalHour)\n\n            // Convert the original date as picked into the desired timezone.\n            const dateToSelectedTz = transpose(incomingDate, TZDateWithSelectedTz)\n\n            setValue(dateToSelectedTz.toISOString() || null)\n          } else {\n            // Creates a TZDate instance for the user's timezone  — this is default behaviour of TZDate as it wraps the Date constructor\n            const dateToUserTz = new TZDate(incomingDate)\n            // Transpose the date to the selected timezone\n            const dateWithTimezone = transpose(dateToUserTz, TZDateWithSelectedTz)\n\n            setValue(dateWithTimezone.toISOString() || null)\n          }\n        } else {\n          setValue(incomingDate?.toISOString() || null)\n        }\n      }\n    },\n    [readOnly, disabled, timezone, selectedTimezone, isDateOnly, setValue],\n  )\n\n  const onChangeTimezone = useCallback(\n    (timezone: string) => {\n      if (timezonePath) {\n        dispatchFields({\n          type: 'UPDATE',\n          path: timezonePath,\n          value: timezone,\n        })\n\n        setModified(true)\n      }\n    },\n    [dispatchFields, setModified, timezonePath],\n  )\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        className,\n        showError && `${baseClass}--has-error`,\n        (readOnly || disabled) && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel\n            htmlFor={inputId}\n            label={label}\n            localized={localized}\n            path={path}\n            required={required}\n          />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`} id={`field-${path.replace(/\\./g, '__')}`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <DatePickerField\n          {...datePickerProps}\n          onChange={onChange}\n          overrides={{\n            ...datePickerProps?.overrides,\n            id: inputId,\n          }}\n          placeholder={getTranslation(placeholder, i18n)}\n          readOnly={readOnly || disabled}\n          value={displayedValue}\n        />\n        {timezone && supportedTimezones.length > 0 && (\n          <TimezonePicker\n            id={`${path}-timezone-picker`}\n            onChange={onChangeTimezone}\n            options={supportedTimezones}\n            readOnly={readOnly || disabled}\n            required={timezoneRequired}\n            selectedTimezone={selectedTimezone}\n          />\n        )}\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const DateTimeField = withCondition(DateTimeFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/FieldLabel/index.css

@@ -13,8 +13,7 @@
   .field-label--with-control:not(.unstyled) {
     display: flex;
     color: var(--field-color-label);
-    font-family: var(--text-body-medium-strong-font-family);
-    font-weight: var(--text-body-medium-strong-font-weight);
+    font-weight: var(--text-body-medium-bold-font-weight);
     letter-spacing: var(--field-label-letter-spacing);
 
     html:not([dir='RTL']) & {

package/dist/fields/Group/index.css

@@ -7,9 +7,8 @@
     &::before {
       content: '';
       position: absolute;
-      top: calc(var(--gutter-h) * -1);
-      left: calc(var(--gutter-h) * -1);
-      right: calc(var(--gutter-h) * -1);
+      top: calc(var(--spacing-field) * -1.5);
+      inset-inline: calc(var(--gutter-h) * -1 * var(--field-border-bleed, 1));
       height: 0;
       border-top: var(--stroke-width-small) solid var(--color-border);
     }
@@ -30,8 +29,7 @@
       content: '';
       position: absolute;
       top: calc(var(--spacer-5) / 2);
-      left: calc(var(--spacer-3) * -1);
-      right: calc(var(--spacer-3) * -1);
+      inset-inline: calc(var(--spacer-3) * -1 * var(--field-border-bleed, 1));
       height: 0;
       border-top: var(--stroke-width-small) solid var(--color-border);
     }
@@ -84,10 +82,10 @@
   }
 
   .group-field__header {
-    margin-bottom: var(--spacer-2-5);
+    margin-bottom: var(--spacer-4);
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-1);
+    gap: var(--spacer-2);
   }
 
   .group-field__title-row {
@@ -98,7 +96,6 @@
 
   .group-field__title {
     margin-bottom: 0;
-    font-family: var(--text-heading-medium-font-family);
     font-size: var(--text-heading-medium-font-size);
     font-weight: var(--text-heading-medium-font-weight);
     line-height: var(--text-heading-medium-line-height);

package/dist/fields/Join/index.css

@@ -24,10 +24,9 @@
 
   .field-type.join .relationship-table__header h4 {
     margin: 0;
-    font-family: var(--text-body-large-strong-font-family);
-    font-size: var(--text-body-large-strong-font-size);
-    font-weight: var(--text-body-large-strong-font-weight);
-    line-height: var(--text-body-large-strong-line-height);
+    font-size: var(--text-body-large-bold-font-size);
+    font-weight: var(--text-body-large-bold-font-weight);
+    line-height: var(--text-body-large-bold-line-height);
     letter-spacing: var(--join-header-letter-spacing);
     color: var(--color-text);
   }

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

@@ -53,7 +53,6 @@
   }
 
   .radio-input__label {
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);

package/dist/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,CA05B9D,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,CA+5B9D,CAAA"}

package/dist/fields/Relationship/Input.js

@@ -33,6 +33,7 @@ import { SingleValue } from './select-components/SingleValue/index.js';
 const baseClass = 'relationship';
 export const RelationshipInput = props => {
   const {
+    AddNewRelationButton,
     AfterInput,
     allowCreate = true,
     allowEdit = true,
@@ -44,6 +45,7 @@ export const RelationshipInput = props => {
     Error,
     filterOptions,
     formatDisplayedOptions,
+    formatOptionLabel,
     hasMany,
     initialValue,
     isSortable = true,
@@ -57,6 +59,7 @@ export const RelationshipInput = props => {
     readOnly,
     relationTo,
     required,
+    selectOptionFields,
     showError,
     size = 'large',
     sortOptions,
@@ -220,6 +223,7 @@ export const RelationshipInput = props => {
               locale,
               page: lastLoadedPageToUse,
               select: {
+                ...selectOptionFields,
                 [fieldToSearch]: true
               },
               sort: fieldToSort,
@@ -298,7 +302,7 @@ export const RelationshipInput = props => {
         }
       }
     });
-  }, [permissions, queueTask, relationTo, errorLoading, search, getEntityConfig, sortOptions, maxResultsPerRequest, locale, api, i18n, config, t]);
+  }, [permissions, queueTask, relationTo, errorLoading, search, getEntityConfig, selectOptionFields, sortOptions, maxResultsPerRequest, locale, api, i18n, config, t]);
   const updateSearch = useDebouncedCallback(({
     hasMany: hasManyArg_0,
     search: searchArg_0,
@@ -358,6 +362,7 @@ export const RelationshipInput = props => {
           limit: idsToLoad.length,
           locale,
           select: {
+            ...selectOptionFields,
             [fieldToSelect]: true
           },
           where: {
@@ -644,6 +649,18 @@ export const RelationshipInput = props => {
     options,
     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]);
   if (!Array.isArray(valueToRender) && valueToRender?.value === 'null') {
     valueToRender.value = null;
   }
@@ -692,11 +709,12 @@ export const RelationshipInput = props => {
             },
             disabled: readOnly || isDrawerOpen || isListDrawerOpen,
             filterOption: enableWordBoundarySearch ? filterOption : undefined,
-            getOptionValue: option_4 => {
-              if (!option_4) {
+            formatOptionLabel: formatSelectOptionLabel,
+            getOptionValue: option_5 => {
+              if (!option_5) {
                 return undefined;
               }
-              return hasMany && Array.isArray(relationTo) ? `${option_4.relationTo}_${option_4.value}` : option_4.value;
+              return hasMany && Array.isArray(relationTo) ? `${option_5.relationTo}_${option_5.value}` : option_5.value;
             },
             isLoading: appearance === 'select' && isLoading,
             isMulti: hasMany,
@@ -785,19 +803,9 @@ export const RelationshipInput = props => {
             showError: showError,
             value: valueToRender ?? null
           })]
-        }), !readOnly && allowCreate && /*#__PURE__*/_jsx(AddNewRelation, {
-          path: path,
-          relationTo: relationTo,
-          ...(hasMany === true ? {
-            hasMany,
-            onChange,
-            value
-          } : {
-            hasMany,
-            onChange,
-            value
-          })
-        })]
+        }), AddNewRelationButton ?? (!readOnly && allowCreate ? /*#__PURE__*/_jsx(AddNewRelation, {
+          ...props
+        }) : null)]
       }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
         CustomComponent: Description,
         Fallback: /*#__PURE__*/_jsx(FieldDescription, {