@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.5e065b3

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useField","withCondition","useTranslation","FieldLabel","mergeFieldStyles","fieldBaseClass","EmailFieldComponent","props","field","admin","autoComplete","className","description","placeholder","label","localized","required","path","pathFromProps","readOnly","validate","i18n","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","id","replace","name","onChange","type","EmailField"],"sources":["../../../src/fields/Email/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  EmailFieldClientComponent,\n  EmailFieldClientProps,\n  EmailFieldValidation,\n} from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\n\nconst EmailFieldComponent: EmailFieldClientComponent = (props) => {\n  const {\n    field,\n    field: {\n      admin: {\n        autoComplete,\n        className,\n        description,\n        placeholder,\n      } = {} as EmailFieldClientProps['field']['admin'],\n      label,\n      localized,\n      required,\n    } = {} as EmailFieldClientProps['field'],\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: EmailFieldValidation = 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({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'email',\n        className,\n        showError && '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`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {/* disable eslint here because the label is dynamic */}\n        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n        <input\n          autoComplete={autoComplete}\n          disabled={readOnly || disabled}\n          id={`field-${path.replace(/\\./g, '__')}`}\n          name={path}\n          onChange={setValue}\n          placeholder={getTranslation(placeholder, i18n)}\n          required={required}\n          type=\"email\"\n          value={(value as string) || ''}\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 EmailField = withCondition(EmailFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useForm","useField","withCondition","useEditDepth","useTranslation","generateFieldID","FieldLabel","mergeFieldStyles","fieldBaseClass","EmailFieldComponent","props","field","admin","autoComplete","className","description","placeholder","label","localized","required","path","pathFromProps","readOnly","validate","i18n","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","uuid","editDepth","errorID","undefined","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","hasRequiredAccessibleState","id","replace","name","onChange","type","EmailField"],"sources":["../../../src/fields/Email/index.tsx"],"sourcesContent":["'use client'\nimport type { EmailFieldClientProps, EmailFieldValidation } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst EmailFieldComponent: React.FC<EmailFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: {\n        autoComplete,\n        className,\n        description,\n        placeholder,\n      } = {} as EmailFieldClientProps['field']['admin'],\n      label,\n      localized,\n      required,\n    } = {} as EmailFieldClientProps['field'],\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const memoizedValidate: EmailFieldValidation = 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({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n  const errorID = showError ? generateFieldID(path, editDepth, uuid, 'field-error') : undefined\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'email',\n        className,\n        showError && '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            hasRequiredAccessibleState\n            label={label}\n            localized={localized}\n            path={path}\n            required={required}\n          />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n        <input\n          aria-describedby={errorID}\n          aria-invalid={showError || undefined}\n          autoComplete={autoComplete}\n          className=\"form-input\"\n          disabled={readOnly || disabled}\n          id={`field-${path.replace(/\\./g, '__')}`}\n          name={path}\n          onChange={setValue}\n          placeholder={getTranslation(placeholder, i18n)}\n          required={required}\n          type=\"email\"\n          value={(value as string) || ''}\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 EmailField = withCondition(EmailFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/FieldDescription/index.css

@@ -0,0 +1,11 @@
+@layer payload-default {
+  .field-description {
+    display: flex;
+    color: var(--field-color-description);
+  }
+
+  .field-description--margin-bottom {
+    margin-top: 0;
+    margin-bottom: var(--spacer-3);
+  }
+}

package/dist/fields/FieldDescription/index.d.ts

@@ -1,5 +1,5 @@
 import type { GenericDescriptionProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const FieldDescription: React.FC<GenericDescriptionProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldDescription/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuB9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldDescription/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuB9D,CAAA"}

package/dist/fields/FieldDescription/index.js

@@ -5,7 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'field-description';
 export const FieldDescription = props => {
   const $ = _c(8);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","baseClass","FieldDescription","props","$","className","description","marginPlacement","path","i18n","t0","replace","t1","t2","filter","Boolean","t3","join","t4","_jsx","children"],"sources":["../../../src/fields/FieldDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { GenericDescriptionProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'field-description'\n\nexport const FieldDescription: React.FC<GenericDescriptionProps> = (props) => {\n  const { className, description, marginPlacement, path } = props\n\n  const { i18n } = useTranslation()\n\n  if (description) {\n    return (\n      <div\n        className={[\n          baseClass,\n          className,\n          `field-description-${path?.replace(/\\./g, '__')}`,\n          marginPlacement && `${baseClass}--margin-${marginPlacement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAAsDC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACjE;IAAAQ,SAAA;IAAAC,WAAA;IAAAC,eAAA;IAAAC;EAAA,IAA0DL,KAAA;EAE1D;IAAAM;EAAA,IAAiBT,cAAA;EAAA,IAEbM,WAAA;IAMI,MAAAI,EAAA,wBAAqBF,IAAA,EAAAG,OAAA,QAAqB,OAAO;IACjD,MAAAC,EAAA,GAAAL,eAAA,IAAmB,GAAAN,SAAA,YAAwBM,eAAA,EAAiB;IAAA,IAAAM,EAAA;IAAA,IAAAT,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAQ,EAAA;MAJnDC,EAAA,IAAAZ,SAAA,EAETI,SAAA,EACAK,EAAiD,EACjDE,EAA4D,EAAAE,MAAA,CAAAC,OAEpD;MAAAX,CAAA,MAAAC,SAAA;MAAAD,CAAA,MAAAM,EAAA;MAAAN,CAAA,MAAAQ,EAAA;MAAAR,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IANC,MAAAY,EAAA,GAAAH,EAMD,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAAd,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAY,EAAA;MARVE,EAAA,GAAAC,IAAA,CAAC;QAAAd,SAAA,EACYW,EAOH;QAAAI,QAAA,EAEPtB,cAAA,CAAeQ,WAAA,EAAaG,IAAA;MAAA,C;;;;;;;;WAV/BS,E;;;CAgBN","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","baseClass","FieldDescription","props","$","className","description","marginPlacement","path","i18n","t0","replace","t1","t2","filter","Boolean","t3","join","t4","_jsx","children"],"sources":["../../../src/fields/FieldDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { GenericDescriptionProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'field-description'\n\nexport const FieldDescription: React.FC<GenericDescriptionProps> = (props) => {\n  const { className, description, marginPlacement, path } = props\n\n  const { i18n } = useTranslation()\n\n  if (description) {\n    return (\n      <div\n        className={[\n          baseClass,\n          className,\n          `field-description-${path?.replace(/\\./g, '__')}`,\n          marginPlacement && `${baseClass}--margin-${marginPlacement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {getTranslation(description, i18n)}\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAAsDC,KAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EACjE;IAAAQ,SAAA;IAAAC,WAAA;IAAAC,eAAA;IAAAC;EAAA,IAA0DL,KAAA;EAE1D;IAAAM;EAAA,IAAiBT,cAAA;EAAA,IAEbM,WAAA;IAMI,MAAAI,EAAA,wBAAqBF,IAAA,EAAAG,OAAA,QAAqB,OAAO;IACjD,MAAAC,EAAA,GAAAL,eAAA,IAAmB,GAAAN,SAAA,YAAwBM,eAAA,EAAiB;IAAA,IAAAM,EAAA;IAAA,IAAAT,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAQ,EAAA;MAJnDC,EAAA,IAAAZ,SAAA,EAETI,SAAA,EACAK,EAAiD,EACjDE,EAA4D,EAAAE,MAAA,CAAAC,OAEpD;MAAAX,CAAA,MAAAC,SAAA;MAAAD,CAAA,MAAAM,EAAA;MAAAN,CAAA,MAAAQ,EAAA;MAAAR,CAAA,MAAAS,EAAA;IAAA;MAAAA,EAAA,GAAAT,CAAA;IAAA;IANC,MAAAY,EAAA,GAAAH,EAMD,CAAAI,IAAA,CACF;IAAA,IAAAC,EAAA;IAAA,IAAAd,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAY,EAAA;MARVE,EAAA,GAAAC,IAAA,CAAC;QAAAd,SAAA,EACYW,EAOH;QAAAI,QAAA,EAEPtB,cAAA,CAAeQ,WAAA,EAAaG,IAAA;MAAA,C;;;;;;;;WAV/BS,E;;;CAgBN","ignoreList":[]}

package/dist/fields/FieldError/index.css

@@ -0,0 +1,18 @@
+@layer payload-default {
+  .field-error.tooltip {
+    --field-error-max-width: calc(100vw - var(--spacer-6) * 2);
+    --tooltip-max-width: var(--field-error-max-width);
+
+    display: block;
+    max-inline-size: min(var(--field-error-max-width), var(--tooltip-max-width));
+    white-space: normal;
+    overflow-wrap: anywhere;
+    color: var(--field-color-error-text);
+    background-color: var(--field-color-error-bg);
+  }
+
+  .field-error.tooltip:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+  }
+}

package/dist/fields/FieldError/index.d.ts

@@ -1,5 +1,5 @@
 import type { GenericErrorProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const FieldError: React.FC<GenericErrorProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldError/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoClD,CAAA"}

package/dist/fields/FieldError/index.js

@@ -4,11 +4,13 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Tooltip } from '../../elements/Tooltip/index.js';
-import { useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
-import './index.scss';
+import { useForm, useFormFields, useFormSubmitted } from '../../forms/Form/context.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
+import './index.css';
 const baseClass = 'field-error';
 export const FieldError = props => {
-  const $ = _c(8);
+  const $ = _c(11);
   const {
     alignCaret: t0,
     message: messageFromProps,
@@ -17,6 +19,10 @@ export const FieldError = props => {
   } = props;
   const alignCaret = t0 === undefined ? "right" : t0;
   const hasSubmitted = useFormSubmitted();
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
   let t1;
   if ($[0] !== path) {
     t1 = t2 => {
@@ -30,7 +36,7 @@ export const FieldError = props => {
   }
   const field = useFormFields(t1);
   let t2;
-  if ($[2] !== alignCaret || $[3] !== field || $[4] !== hasSubmitted || $[5] !== messageFromProps || $[6] !== showErrorFromProps) {
+  if ($[2] !== alignCaret || $[3] !== editDepth || $[4] !== field || $[5] !== hasSubmitted || $[6] !== messageFromProps || $[7] !== path || $[8] !== showErrorFromProps || $[9] !== uuid) {
     t2 = Symbol.for("react.early_return_sentinel");
     bb0: {
       const {
@@ -44,20 +50,27 @@ export const FieldError = props => {
           alignCaret,
           className: baseClass,
           delay: 0,
-          staticPositioning: true,
+          id: generateFieldID(path, editDepth, uuid, "field-error"),
+          portal: false,
+          position: "top",
+          role: "alert",
+          tabIndex: 0,
           children: message
         });
         break bb0;
       }
     }
     $[2] = alignCaret;
-    $[3] = field;
-    $[4] = hasSubmitted;
-    $[5] = messageFromProps;
-    $[6] = showErrorFromProps;
-    $[7] = t2;
+    $[3] = editDepth;
+    $[4] = field;
+    $[5] = hasSubmitted;
+    $[6] = messageFromProps;
+    $[7] = path;
+    $[8] = showErrorFromProps;
+    $[9] = uuid;
+    $[10] = t2;
   } else {
-    t2 = $[7];
+    t2 = $[10];
   }
   if (t2 !== Symbol.for("react.early_return_sentinel")) {
     return t2;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useFormFields","useFormSubmitted","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","staticPositioning","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from 'payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport './index.scss'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path,\n    showError: showErrorFromProps,\n  } = props\n\n  const hasSubmitted = useFormSubmitted()\n  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n  const { errorMessage, valid } = field || {}\n\n  const message = messageFromProps || errorMessage\n  const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n  if (showMessage && message?.length) {\n    return (\n      <Tooltip alignCaret={alignCaret} className={baseClass} delay={0} staticPositioning>\n        {message}\n      </Tooltip>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,aAAa,EAAEC,gBAAgB,QAAQ;AAChD,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACrD;IAAAS,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,IAAA;IAAAC,SAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,UAAA,GAAAC,EAAoB,KAAAM,SAAA,GAAP,OAAO,GAApBN,EAAoB;EAMtB,MAAAO,YAAA,GAAqBb,gBAAA;EAAA,IAAAc,EAAA;EAAA,IAAAV,CAAA,QAAAK,IAAA;IACOK,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAASP,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAxE,MAAAa,KAAA,GAAclB,aAAA,CAAce,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAX,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAa,KAAA,IAAAb,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAO,kBAAA;IASpEI,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAV,OAAA,GAAgBC,gBAAA,IAAoBY,YAAA;MACpC,MAAAE,WAAA,GAAoBX,kBAAA,IAAuBE,YAAA,IAAgBQ,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAef,OAAA,EAAAgB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA1B,OAAA;UAAAO,UAAA;UAAAoB,SAAA,EAAAxB,SAAA;UAAAyB,KAAA;UAAAC,iBAAA;UAAAC,QAAA,EACGrB;QAAA,C;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Tooltip","useForm","useFormFields","useFormSubmitted","useEditDepth","generateFieldID","baseClass","FieldError","props","$","alignCaret","t0","message","messageFromProps","path","showError","showErrorFromProps","undefined","hasSubmitted","uuid","editDepth","t1","t2","fields","field","Symbol","for","errorMessage","valid","showMessage","length","_jsx","className","delay","id","portal","position","role","tabIndex","children"],"sources":["../../../src/fields/FieldError/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GenericErrorProps } from 'payload'\n\nimport React from 'react'\n\nimport { Tooltip } from '../../elements/Tooltip/index.js'\nimport { useForm, useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport './index.css'\n\nconst baseClass = 'field-error'\n\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path,\n    showError: showErrorFromProps,\n  } = props\n\n  const hasSubmitted = useFormSubmitted()\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n  const field = useFormFields(([fields]) => (fields && fields?.[path]) || null)\n\n  const { errorMessage, valid } = field || {}\n\n  const message = messageFromProps || errorMessage\n  const showMessage = showErrorFromProps || (hasSubmitted && valid === false)\n\n  if (showMessage && message?.length) {\n    return (\n      <Tooltip\n        alignCaret={alignCaret}\n        className={baseClass}\n        delay={0}\n        id={generateFieldID(path, editDepth, uuid, 'field-error')}\n        portal={false}\n        position=\"top\"\n        role=\"alert\"\n        tabIndex={0}\n      >\n        {message}\n      </Tooltip>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,EAAEC,aAAa,EAAEC,gBAAgB,QAAQ;AACzD,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EACrD;IAAAY,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,IAAA;IAAAC,SAAA,EAAAC;EAAA,IAKIR,KAAA;EAJF,MAAAE,UAAA,GAAAC,EAAoB,KAAAM,SAAA,GAAP,OAAO,GAApBN,EAAoB;EAMtB,MAAAO,YAAA,GAAqBf,gBAAA;EACrB;IAAAgB;EAAA,IAAiBlB,OAAA;EACjB,MAAAmB,SAAA,GAAkBhB,YAAA;EAAA,IAAAiB,EAAA;EAAA,IAAAZ,CAAA,QAAAK,IAAA;IACUO,EAAA,GAAAC,EAAA;MAAC,OAAAC,MAAA,IAAAD,EAAQ;MAAA,OAAKC,MAAC,IAAUA,MAAA,GAAST,IAAA,CAAK,QAAK;IAAA;IAAAL,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAAxE,MAAAe,KAAA,GAActB,aAAA,CAAcmB,EAA4C;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAW,SAAA,IAAAX,CAAA,QAAAe,KAAA,IAAAf,CAAA,QAAAS,YAAA,IAAAT,CAAA,QAAAI,gBAAA,IAAAJ,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAO,kBAAA,IAAAP,CAAA,QAAAU,IAAA;IASpEG,EAAA,GAAAG,MAAA,CAAAC,GAAA,8B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCJ,KAAA,MAAU;MAE1C,MAAAZ,OAAA,GAAgBC,gBAAA,IAAoBc,YAAA;MACpC,MAAAE,WAAA,GAAoBb,kBAAA,IAAuBE,YAAA,IAAgBU,KAAA,UAAU;MAAA,IAEjEC,WAAA,IAAejB,OAAA,EAAAkB,MAAS;QAExBR,EAAA,GAAAS,IAAA,CAAA/B,OAAA;UAAAU,UAAA;UAAAsB,SAAA,EAAA1B,SAAA;UAAA2B,KAAA;UAAAC,EAAA,EAIM7B,eAAA,CAAgBS,IAAA,EAAMM,SAAA,EAAWD,IAAA,EAAM;UAAAgB,MAAA;UAAAC,QAAA,EAElC;UAAAC,IAAA,EACJ;UAAAC,QAAA;UAAAC,QAAA,EAGJ3B;QAAA,C;;;;;;;;;;;;;;;;;;;;CAMT","ignoreList":[]}

package/dist/fields/FieldLabel/index.css

@@ -0,0 +1,49 @@
+@layer payload-default {
+  :root {
+    --field-label-letter-spacing: -0.032px;
+  }
+
+  label.field-label,
+  .field-label--with-control {
+    display: flex;
+    align-items: center;
+  }
+
+  label.field-label:not(.unstyled),
+  .field-label--with-control:not(.unstyled) {
+    display: flex;
+    color: var(--field-color-label);
+    font-weight: var(--text-body-medium-bold-font-weight);
+    letter-spacing: var(--field-label-letter-spacing);
+
+    html:not([dir='RTL']) & {
+      margin-right: auto;
+    }
+
+    html[dir='RTL'] & {
+      margin-left: 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);
+    }
+  }
+
+  .localized {
+    html:not([dir='RTL']) & {
+      margin-left: var(--spacer-1);
+    }
+
+    html[dir='RTL'] & {
+      margin-right: var(--spacer-1);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import type { GenericLabelProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const FieldLabel: React.FC<GenericLabelProps>;
 //# sourceMappingURL=index.d.ts.map

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,cAAc,CAAA;AAErB,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,CAoDlD,CAAA"}

package/dist/fields/FieldLabel/index.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
@@ -8,23 +9,27 @@ import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useLocale } from '../../providers/Locale/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { generateFieldID } from '../../utilities/generateFieldID.js';
-import './index.scss';
+import './index.css';
 export const FieldLabel = props => {
+  const $ = _c(3);
   const {
     as: t0,
-    hideLocale: t1,
+    hasRequiredAccessibleState: t1,
+    hideLocale: t2,
     htmlFor: htmlForFromProps,
     label,
-    localized: t2,
+    localized: t3,
+    onClick,
     path,
-    required: t3,
-    unstyled: t4
+    required: t4,
+    unstyled: t5
   } = props;
   const ElementFromProps = t0 === undefined ? "label" : t0;
-  const hideLocale = t1 === undefined ? false : t1;
-  const localized = t2 === undefined ? false : t2;
-  const required = t3 === undefined ? false : t3;
-  const unstyled = t4 === undefined ? false : t4;
+  const hasRequiredAccessibleState = t1 === undefined ? false : t1;
+  const hideLocale = t2 === undefined ? false : t2;
+  const localized = t3 === undefined ? false : t3;
+  const required = t4 === undefined ? false : t4;
+  const unstyled = t5 === undefined ? false : t5;
   const {
     uuid
   } = useForm();
@@ -33,19 +38,31 @@ 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) {
+    const t6 = unstyled && "unstyled";
+    const t7 = onClick && "field-label--with-control";
+    let t8;
+    if ($[0] !== t6 || $[1] !== t7) {
+      t8 = ["field-label", t6, t7].filter(Boolean);
+      $[0] = t6;
+      $[1] = t7;
+      $[2] = t8;
+    } else {
+      t8 = $[2];
+    }
     return _jsxs(Element, {
-      className: `field-label${unstyled ? " unstyled" : ""}`,
-      htmlFor,
+      className: t8.join(" "),
+      htmlFor: Element === "label" ? htmlFor : undefined,
+      onClick,
       children: [getTranslation(label, i18n), required && !unstyled && _jsx("span", {
+        "aria-hidden": hasRequiredAccessibleState || undefined,
         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.scss'\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":["c","_c","getTranslation","React","useForm","useEditDepth","useLocale","useTranslation","generateFieldID","FieldLabel","props","$","as","t0","hasRequiredAccessibleState","t1","hideLocale","t2","htmlFor","htmlForFromProps","label","localized","t3","onClick","path","required","t4","unstyled","t5","ElementFromProps","undefined","uuid","editDepth","i18n","locale","code","localLabel","Element","t6","t7","t8","filter","Boolean","_jsxs","className","join","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    hasRequiredAccessibleState = false,\n    hideLocale = false,\n    htmlFor: htmlForFromProps,\n    label,\n    localized = false,\n    onClick,\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\n        className={['field-label', unstyled && 'unstyled', onClick && 'field-label--with-control']\n          .filter(Boolean)\n          .join(' ')}\n        htmlFor={Element === 'label' ? htmlFor : undefined}\n        onClick={onClick}\n      >\n        {getTranslation(label, i18n)}\n        {required && !unstyled && (\n          <span aria-hidden={hasRequiredAccessibleState || undefined} className=\"required\">\n            *\n          </span>\n        )}\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;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,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;EAAA,MAAAC,CAAA,GAAAV,EAAA;EACrD;IAAAW,EAAA,EAAAC,EAAA;IAAAC,0BAAA,EAAAC,EAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,KAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,QAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IAWIlB,KAAA;EAVE,MAAAmB,gBAAA,GAAAhB,EAA0B,KAAAiB,SAAA,GAAP,OAAO,GAA1BjB,EAA0B;EAC9B,MAAAC,0BAAA,GAAAC,EAAkC,KAAAe,SAAA,WAAlCf,EAAkC;EAClC,MAAAC,UAAA,GAAAC,EAAkB,KAAAa,SAAA,WAAlBb,EAAkB;EAGlB,MAAAI,SAAA,GAAAC,EAAiB,KAAAQ,SAAA,WAAjBR,EAAiB;EAGjB,MAAAG,QAAA,GAAAC,EAAgB,KAAAI,SAAA,WAAhBJ,EAAgB;EAChB,MAAAC,QAAA,GAAAC,EAAgB,KAAAE,SAAA,WAAhBF,EAAgB;EAGlB;IAAAG;EAAA,IAAiB3B,OAAA;EACjB,MAAA4B,SAAA,GAAkB3B,YAAA;EAElB,MAAAa,OAAA,GAAgBC,gBAAA,IAAoBX,eAAA,CAAgBgB,IAAA,EAAMQ,SAAA,EAAWD,IAAA;EAErE;IAAAE;EAAA,IAAiB1B,cAAA;EACjB,MAAA2B,MAAA,GAAe5B,SAAA;EACf,MAAA6B,IAAA,GAAaD,MAAA,EAAAC,IAAA;EACb,MAAAC,UAAA,GAAmBF,MAAA,EAAAd,KAAA;EAEnB,MAAAiB,OAAA,GACER,gBAAA,KAAqB,UAAWX,OAAA,GAAU,UAAU,SAAUW,gBAAA,IAAoB;EAAA,IAEhFT,KAAA;IAG6B,MAAAkB,EAAA,GAAAX,QAAA,IAAY;IAAY,MAAAY,EAAA,GAAAhB,OAAA,IAAW;IAAA,IAAAiB,EAAA;IAAA,IAAA7B,CAAA,QAAA2B,EAAA,IAAA3B,CAAA,QAAA4B,EAAA;MAAnDC,EAAA,IAAC,eAAeF,EAAY,EAAYC,EAAW,EAAAE,MAAA,CAAAC,OACpD;MAAA/B,CAAA,MAAA2B,EAAA;MAAA3B,CAAA,MAAA4B,EAAA;MAAA5B,CAAA,MAAA6B,EAAA;IAAA;MAAAA,EAAA,GAAA7B,CAAA;IAAA;IAAA,OAFZgC,KAAA,CAACN,OAAA;MAAAO,SAAA,EACYJ,EACD,CAAAK,IAAA,CACF;MAAA3B,OAAA,EACCmB,OAAA,KAAY,UAAUnB,OAAA,GAAAY,SAAU;MAAAP,OAAA;MAAAuB,QAAA,GAGxC5C,cAAA,CAAekB,KAAA,EAAOa,IAAA,GACtBR,QAAA,KAAaE,QAAA,IACZoB,IAAA,CAAC;QAAA,eAAkBjC,0BAAA,IAAAgB,SAA8B;QAAAc,SAAA,EAAqB;QAAAE,QAAA,EAAW;MAAA,C,GAIlFzB,SAAA,KAAcL,UAAA,IAAckB,MAAA,IAC3BS,KAAA,CAAC;QAAAC,SAAA,EAAe;QAAAE,QAAA,GAAY,WACjB,OAAOV,UAAA,KAAe,WAAWA,UAAA,GAAaD,IAAA;MAAA,C;;;;CAQnE","ignoreList":[]}

package/dist/fields/Group/index.css

@@ -0,0 +1,133 @@
+@layer payload-default {
+  .group-field {
+    position: relative;
+  }
+
+  .group-field--top-level {
+    &::before {
+      content: '';
+      position: absolute;
+      top: calc(var(--gutter-h) * -1);
+      left: calc(var(--gutter-h) * -1);
+      right: calc(var(--gutter-h) * -1);
+      height: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    &:first-child {
+      padding-top: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .group-field--within-collapsible {
+    padding-top: var(--spacer-5);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: calc(var(--spacer-5) / 2);
+      left: calc(var(--spacer-3) * -1);
+      right: calc(var(--spacer-3) * -1);
+      height: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    &:first-child {
+      border-top: 0;
+      padding-top: 0;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  .group-field--within-group {
+    padding: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .group-field--within-row {
+    margin: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .group-field--within-tab:first-child {
+    padding-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  .group-field--within-tab:last-child {
+    padding-bottom: 0;
+  }
+
+  .group-field--gutter {
+    border-left: var(--stroke-width-small) solid var(--color-border);
+    padding-left: var(--spacer-3);
+  }
+
+  .group-field__header {
+    margin-bottom: var(--spacer-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .group-field__title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .group-field__title {
+    margin-bottom: 0;
+    font-size: var(--text-heading-medium-font-size);
+    font-weight: var(--text-heading-medium-font-weight);
+    line-height: var(--text-heading-medium-line-height);
+  }
+
+  .group-field--has-error {
+    .group-field__header {
+      color: var(--color-text-danger);
+    }
+  }
+
+  .group-field + .group-field {
+    border-top: 0;
+    padding-top: 0;
+  }
+
+  .group-field--within-row + .group-field--within-row {
+    margin-top: 0;
+  }
+
+  .group-field--within-tab + .group-field--within-row {
+    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 {
+        border-top: var(--stroke-width-small) solid var(--color-border);
+      }
+    }
+  }
+}

package/dist/fields/Group/index.d.ts

@@ -1,10 +1,8 @@
-import type { GroupFieldClientComponent } from 'payload';
+import type { GroupFieldClientProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 import { GroupProvider, useGroup } from './provider.js';
-export declare const GroupFieldComponent: GroupFieldClientComponent;
+export declare const GroupFieldComponent: React.FC<GroupFieldClientProps>;
 export { GroupProvider, useGroup };
-export declare const GroupField: React.FC<import("payload").FieldPaths & {
-    readonly field: (Omit<import("payload").UnnamedGroupFieldClient, "type"> & Partial<Pick<import("payload").UnnamedGroupFieldClient, "type">>) | (Omit<import("payload").NamedGroupFieldClient, "type"> & Partial<Pick<import("payload").NamedGroupFieldClient, "type">>);
-} & Omit<import("payload").ClientComponentProps, "customComponents" | "field">>;
+export declare const GroupField: React.FC<GroupFieldClientProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAIxD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAatC,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,yBA6GjC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,UAAU;;+EAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAIpD,OAAO,KAAkB,MAAM,OAAO,CAAA;AAatC,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2G/D,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,UAAU,iCAAqC,CAAA"}

package/dist/fields/Group/index.js

@@ -15,7 +15,7 @@ import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
-import './index.scss';
+import './index.css';
 import { useRow } from '../Row/provider.js';
 import { fieldBaseClass } from '../shared/index.js';
 import { useTabs } from '../Tabs/provider.js';
@@ -76,8 +76,9 @@ export const GroupFieldComponent = props => {
         className: `${baseClass}__wrap`,
         children: [Boolean(Label || Description || label || fieldHasErrors) && /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__header`,
-          children: [Boolean(Label || Description || label) && /*#__PURE__*/_jsxs("header", {
-            children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__title-row`,
+            children: [Boolean(Label || Description || label) && /*#__PURE__*/_jsx(RenderCustomComponent, {
               CustomComponent: Label,
               Fallback: /*#__PURE__*/_jsx("h3", {
                 className: `${baseClass}__title`,
@@ -89,21 +90,20 @@ export const GroupFieldComponent = props => {
                   required: false
                 })
               })
-            }), /*#__PURE__*/_jsx(RenderCustomComponent, {
-              CustomComponent: Description,
-              Fallback: /*#__PURE__*/_jsx(FieldDescription, {
-                description: description,
-                path: path
-              })
+            }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+              count: errorCount,
+              i18n: i18n,
+              withMessage: true
             })]
-          }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
-            count: errorCount,
-            i18n: i18n,
-            withMessage: true
+          }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+            CustomComponent: Description,
+            Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+              description: description,
+              path: path
+            })
           })]
         }), BeforeInput, groupHasName(field) ? /*#__PURE__*/_jsx(RenderFields, {
           fields: fields,
-          margins: "small",
           parentIndexPath: "",
           parentPath: path,
           parentSchemaPath: schemaPath,
@@ -111,7 +111,6 @@ export const GroupFieldComponent = props => {
           readOnly: readOnly
         }) : /*#__PURE__*/_jsx(RenderFields, {
           fields: fields,
-          margins: "small",
           parentIndexPath: indexPath,
           parentPath: parentPath,
           parentSchemaPath: parentSchemaPath,