@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

package/dist/fields/FieldDescription/index.js

@@ -8,7 +8,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'field-description';
 export const FieldDescription = props => {
-  const $ = _c(8);
+  const $ = _c(10);
   const {
     className,
     description,
@@ -19,33 +19,41 @@ export const FieldDescription = props => {
     i18n
   } = useTranslation();
   if (description) {
-    const t0 = `field-description-${path?.replace(/\./g, "__")}`;
-    const t1 = marginPlacement && `${baseClass}--margin-${marginPlacement}`;
-    let t2;
-    if ($[0] !== className || $[1] !== t0 || $[2] !== t1) {
-      t2 = [baseClass, className, t0, t1].filter(Boolean);
-      $[0] = className;
+    let t0;
+    if ($[0] !== path) {
+      t0 = path?.replace(/\./g, "__");
+      $[0] = path;
       $[1] = t0;
-      $[2] = t1;
-      $[3] = t2;
     } else {
-      t2 = $[3];
+      t0 = $[1];
     }
-    const t3 = t2.join(" ");
-    let t4;
-    if ($[4] !== description || $[5] !== i18n || $[6] !== t3) {
-      t4 = _jsx("div", {
-        className: t3,
+    const t1 = `field-description-${t0}`;
+    const t2 = marginPlacement && `${baseClass}--margin-${marginPlacement}`;
+    let t3;
+    if ($[2] !== className || $[3] !== t1 || $[4] !== t2) {
+      t3 = [baseClass, className, t1, t2].filter(Boolean);
+      $[2] = className;
+      $[3] = t1;
+      $[4] = t2;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    const t4 = t3.join(" ");
+    let t5;
+    if ($[6] !== description || $[7] !== i18n || $[8] !== t4) {
+      t5 = _jsx("div", {
+        className: t4,
         children: getTranslation(description, i18n)
       });
-      $[4] = description;
-      $[5] = i18n;
-      $[6] = t3;
-      $[7] = t4;
+      $[6] = description;
+      $[7] = i18n;
+      $[8] = t4;
+      $[9] = t5;
     } else {
-      t4 = $[7];
+      t5 = $[9];
     }
-    return t4;
+    return t5;
   }
   return null;
 };

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.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":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","baseClass","FieldDescription","props","$","className","description","marginPlacement","path","i18n","t0","replace","t1","t2","t3","filter","Boolean","t4","join","t5","_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;EAEjB,IAAIM,WAAA;IAAA,IAAAI,EAAA;IAAA,IAAAN,CAAA,QAAAI,IAAA;MAMyBE,EAAA,GAAAF,IAAA,EAAAG,OAAqB,CAAP,OAAO;MAAAP,CAAA,MAAAI,IAAA;MAAAJ,CAAA,MAAAM,EAAA;IAAA;MAAAA,EAAA,GAAAN,CAAA;IAAA;IAA1C,MAAAQ,EAAA,wBAAqBF,EAAqB,EAAO;IACjD,MAAAG,EAAA,GAAAN,eAA4D,IAA5D,GAAsBN,SAAA,YAAqBM,eAAA,EAAiB;IAAA,IAAAO,EAAA;IAAA,IAAAV,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAS,EAAA;MAJnDC,EAAA,IACTb,SAAA,EACAI,SAAA,EACAO,EAAiD,EACjDC,EAA4D,CAC7D,CAAAE,MACQ,CAACC,OAAA;MAAAZ,CAAA,MAAAC,SAAA;MAAAD,CAAA,MAAAQ,EAAA;MAAAR,CAAA,MAAAS,EAAA;MAAAT,CAAA,MAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IANC,MAAAa,EAAA,GAAAH,EAMD,CAAAI,IACH,CAAC;IAAA,IAAAC,EAAA;IAAA,IAAAf,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAa,EAAA;MARVE,EAAA,GAAAC,IAAA,CAAC;QAAAf,SAAA,EACYY,EAOH;QAAAI,QAAA,EAEPvB,cAAA,CAAeQ,WAAA,EAAaG,IAAA;;;;;;;;;WAV/BU,E;;EAaJ,OAEO;AAAA,CACT","ignoreList":[]}

package/dist/fields/FieldError/index.css

@@ -1,15 +1,18 @@
 @layer payload-default {
   .field-error.tooltip {
-    --tooltip-x: 0%;
-    left: auto;
-    max-width: 75%;
-    right: 0;
+    --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);
+  }
 
-    &::after {
-      border-top-color: var(--field-color-error-bg);
-      border-bottom-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.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,aAAa,CAAA;AAIpB,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 { 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.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 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","errorMessage","valid","showMessage","length","_jsx","className","delay","id","portal","position","role","tabIndex","children","bb0","for"],"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,KAApBM,SAAoB,GAApB,OAAoB,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,MAAyB,IAAdA,MAAA,GAAST,IAAA,CAAU,IAA9B,IAA8B;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,M,KAAA,6B;;MAPJ;QAAAC,YAAA;QAAAC;MAAA,IAAgCH,KAAU,IAAV,CAAU;MAE1C,MAAAZ,OAAA,GAAgBC,gBAAoB,IAApBa,YAAoB;MACpC,MAAAE,WAAA,GAAoBZ,kBAAiD,IAA1BE,YAA0B,IAAVS,KAAA,KAAU;MAErE,IAAIC,WAAwB,IAAThB,OAAA,EAAAiB,MAAS;QAExBP,EAAA,GAAAQ,IAAA,CAAC9B,OAAA;UAAAU,UAAA;UAAAqB,SAAA,EAEYzB,SAAA;UAAA0B,KAAA,EACJ;UAAAC,EAAA,EACH5B,eAAA,CAAgBS,IAAA,EAAMM,SAAA,EAAWD,IAAA,EAAM;UAAAe,MAAA,EACnC;UAAAC,QAAA,EACC;UAAAC,IAAA,EACJ;UAAAC,QAAA,EACK;UAAAC,QAAA,EAET1B;;QAVH,MAAA2B,GAAA;;IAaJ;IAAA9B,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAW,SAAA;IAAAX,CAAA,MAAAe,KAAA;IAAAf,CAAA,MAAAS,YAAA;IAAAT,CAAA,MAAAI,gBAAA;IAAAJ,CAAA,MAAAK,IAAA;IAAAL,CAAA,MAAAO,kBAAA;IAAAP,CAAA,MAAAU,IAAA;IAAAV,CAAA,OAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAAA,IAAAa,EAAA,KAAAG,MAAA,CAAAe,GAAA;IAAA,OAAAlB,EAAA;EAAA;EAAA,OAEO;AAAA,CACT","ignoreList":[]}

package/dist/fields/FieldLabel/index.css

@@ -3,16 +3,17 @@
     --field-label-letter-spacing: -0.032px;
   }
 
-  label.field-label {
+  label.field-label,
+  .field-label--with-control {
     display: flex;
     align-items: center;
   }
 
-  label.field-label:not(.unstyled) {
+  label.field-label:not(.unstyled),
+  .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/FieldLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/FieldLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,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';
@@ -10,21 +11,25 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { generateFieldID } from '../../utilities/generateFieldID.js';
 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.css'\n\nexport const FieldLabel: React.FC<GenericLabelProps> = (props) => {\n  const {\n    as: ElementFromProps = 'label',\n    hideLocale = false,\n    htmlFor: htmlForFromProps,\n    label,\n    localized = false,\n    path,\n    required = false,\n    unstyled = false,\n  } = props\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n\n  const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid)\n\n  const { i18n } = useTranslation()\n  const { code, label: localLabel } = useLocale()\n\n  const Element =\n    ElementFromProps === 'label' ? (htmlFor ? 'label' : 'span') : ElementFromProps || 'span'\n\n  if (label) {\n    return (\n      <Element className={`field-label${unstyled ? ' unstyled' : ''}`} htmlFor={htmlFor}>\n        {getTranslation(label, i18n)}\n        {required && !unstyled && <span className=\"required\">*</span>}\n        {localized && !hideLocale && (\n          <span className=\"localized\">\n            &mdash; {typeof localLabel === 'string' ? localLabel : code}\n          </span>\n        )}\n      </Element>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,OAAO,MAAMC,UAAA,GAA0CC,KAAA;EACrD;IAAAC,EAAA,EAAAC,EAAA;IAAAC,UAAA,EAAAC,EAAA;IAAAC,OAAA,EAAAC,gBAAA;IAAAC,KAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,IAAA;IAAAC,QAAA,EAAAC,EAAA;IAAAC,QAAA,EAAAC;EAAA,IASId,KAAA;EARE,MAAAe,gBAAA,GAAAb,EAA0B,KAAAc,SAAA,GAAP,OAAO,GAA1Bd,EAA0B;EAC9B,MAAAC,UAAA,GAAAC,EAAkB,KAAAY,SAAA,WAAlBZ,EAAkB;EAGlB,MAAAI,SAAA,GAAAC,EAAiB,KAAAO,SAAA,WAAjBP,EAAiB;EAEjB,MAAAE,QAAA,GAAAC,EAAgB,KAAAI,SAAA,WAAhBJ,EAAgB;EAChB,MAAAC,QAAA,GAAAC,EAAgB,KAAAE,SAAA,WAAhBF,EAAgB;EAGlB;IAAAG;EAAA,IAAiBvB,OAAA;EACjB,MAAAwB,SAAA,GAAkBvB,YAAA;EAElB,MAAAU,OAAA,GAAgBC,gBAAA,IAAoBR,eAAA,CAAgBY,IAAA,EAAMQ,SAAA,EAAWD,IAAA;EAErE;IAAAE;EAAA,IAAiBtB,cAAA;EACjB;IAAAuB,IAAA;IAAAb,KAAA,EAAAc;EAAA,IAAoCzB,SAAA;EAEpC,MAAA0B,OAAA,GACEP,gBAAA,KAAqB,UAAWV,OAAA,GAAU,UAAU,SAAUU,gBAAA,IAAoB;EAAA,IAEhFR,KAAA;IAAA,OAEAgB,KAAA,CAACD,OAAA;MAAAE,SAAA,EAAmB,cAAcX,QAAA,GAAW,cAAc,IAAI;MAAAR,OAAA;MAAAoB,QAAA,GAC5DjC,cAAA,CAAee,KAAA,EAAOY,IAAA,GACtBR,QAAA,KAAaE,QAAA,IAAYa,IAAA,CAAC;QAAAF,SAAA,EAAe;QAAAC,QAAA,EAAW;MAAA,C,GACpDjB,SAAA,KAAcL,UAAA,IACboB,KAAA,CAAC;QAAAC,SAAA,EAAe;QAAAC,QAAA,GAAY,WACjB,OAAOJ,UAAA,KAAe,WAAWA,UAAA,GAAaD,IAAA;MAAA,C;;;;CAQnE","ignoreList":[]}
+{"version":3,"file":"index.js","names":["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":"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","ignoreList":[]}

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

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

@@ -1,10 +1,8 @@
-import type { GroupFieldClientComponent } from 'payload';
+import type { GroupFieldClientProps } from 'payload';
 import React from 'react';
 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").NamedGroupFieldClient, "type"> & Partial<Pick<import("payload").NamedGroupFieldClient, "type">>) | (Omit<import("payload").UnnamedGroupFieldClient, "type"> & Partial<Pick<import("payload").UnnamedGroupFieldClient, "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,aAAa,CAAA;AAIpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,yBA2GjC,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

@@ -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 { groupHasName } from 'payload/shared';
@@ -22,17 +23,10 @@ import { useTabs } from '../Tabs/provider.js';
 import { GroupProvider, useGroup } from './provider.js';
 const baseClass = 'group-field';
 export const GroupFieldComponent = props => {
+  const $ = _c(6);
   const {
     field,
-    field: {
-      admin: {
-        className,
-        description,
-        hideGutter
-      } = {},
-      fields,
-      label
-    },
+    field: t0,
     indexPath,
     parentPath,
     parentSchemaPath,
@@ -41,7 +35,17 @@ export const GroupFieldComponent = props => {
     readOnly,
     schemaPath: schemaPathFromProps
   } = props;
-  const schemaPath = schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path);
+  const {
+    admin: t1,
+    fields,
+    label
+  } = t0;
+  const {
+    className,
+    description,
+    hideGutter
+  } = t1 === undefined ? {} : t1;
+  const schemaPath = schemaPathFromProps ?? (field.type === "group" && groupHasName(field) ? field.name : path);
   const {
     i18n
   } = useTranslation();
@@ -51,71 +55,96 @@ export const GroupFieldComponent = props => {
   const isWithinGroup = useGroup();
   const isWithinRow = useRow();
   const isWithinTab = useTabs();
+  let t2;
+  if ($[0] !== path) {
+    t2 = {
+      path
+    };
+    $[0] = path;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
   const {
-    customComponents: {
-      AfterInput,
-      BeforeInput,
-      Description,
-      Label
-    } = {},
+    customComponents: t3,
     errorPaths
-  } = useField({
-    path
-  });
+  } = useField(t2);
+  const {
+    AfterInput,
+    BeforeInput,
+    Description,
+    Label
+  } = t3 === undefined ? {} : t3;
   const submitted = useFormSubmitted();
   const errorCount = errorPaths.length;
   const fieldHasErrors = submitted && errorCount > 0;
   const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
-  const styles = useMemo(() => mergeFieldStyles(field), [field]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: [fieldBaseClass, baseClass, isTopLevel && `${baseClass}--top-level`, isWithinCollapsible && `${baseClass}--within-collapsible`, isWithinGroup && `${baseClass}--within-group`, isWithinRow && `${baseClass}--within-row`, isWithinTab && `${baseClass}--within-tab`, !hideGutter && isWithinGroup && `${baseClass}--gutter`, fieldHasErrors && `${baseClass}--has-error`, className].filter(Boolean).join(' '),
-    id: `field-${path?.replace(/\./g, '__')}`,
+  let t4;
+  if ($[2] !== field) {
+    t4 = mergeFieldStyles(field);
+    $[2] = field;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const styles = t4;
+  let t5;
+  if ($[4] !== path) {
+    t5 = path?.replace(/\./g, "__");
+    $[4] = path;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  return _jsxs("div", {
+    className: [fieldBaseClass, baseClass, isTopLevel && `${baseClass}--top-level`, isWithinCollapsible && `${baseClass}--within-collapsible`, isWithinGroup && `${baseClass}--within-group`, isWithinRow && `${baseClass}--within-row`, isWithinTab && `${baseClass}--within-tab`, !hideGutter && isWithinGroup && `${baseClass}--gutter`, fieldHasErrors && `${baseClass}--has-error`, className].filter(Boolean).join(" "),
+    id: `field-${t5}`,
     style: styles,
-    children: [/*#__PURE__*/_jsx(GroupProvider, {
-      children: /*#__PURE__*/_jsxs("div", {
+    children: [_jsx(GroupProvider, {
+      children: _jsxs("div", {
         className: `${baseClass}__wrap`,
-        children: [Boolean(Label || Description || label || fieldHasErrors) && /*#__PURE__*/_jsxs("div", {
+        children: [Boolean(Label || Description || label || fieldHasErrors) && _jsxs("div", {
           className: `${baseClass}__header`,
-          children: [/*#__PURE__*/_jsxs("div", {
+          children: [_jsxs("div", {
             className: `${baseClass}__title-row`,
-            children: [Boolean(Label || Description || label) && /*#__PURE__*/_jsx(RenderCustomComponent, {
+            children: [Boolean(Label || Description || label) && _jsx(RenderCustomComponent, {
               CustomComponent: Label,
-              Fallback: /*#__PURE__*/_jsx("h3", {
+              Fallback: _jsx("h3", {
                 className: `${baseClass}__title`,
-                children: /*#__PURE__*/_jsx(FieldLabel, {
+                children: _jsx(FieldLabel, {
                   as: "span",
                   label: getTranslation(label, i18n),
                   localized: false,
-                  path: path,
+                  path,
                   required: false
                 })
               })
-            }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
+            }), fieldHasErrors && _jsx(ErrorPill, {
               count: errorCount,
-              i18n: i18n,
+              i18n,
               withMessage: true
             })]
-          }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+          }), _jsx(RenderCustomComponent, {
             CustomComponent: Description,
-            Fallback: /*#__PURE__*/_jsx(FieldDescription, {
-              description: description,
-              path: path
+            Fallback: _jsx(FieldDescription, {
+              description,
+              path
             })
           })]
-        }), BeforeInput, groupHasName(field) ? /*#__PURE__*/_jsx(RenderFields, {
-          fields: fields,
+        }), BeforeInput, groupHasName(field) ? _jsx(RenderFields, {
+          fields,
           parentIndexPath: "",
           parentPath: path,
           parentSchemaPath: schemaPath,
           permissions: permissions === true ? permissions : permissions?.fields,
-          readOnly: readOnly
-        }) : /*#__PURE__*/_jsx(RenderFields, {
-          fields: fields,
+          readOnly
+        }) : _jsx(RenderFields, {
+          fields,
           parentIndexPath: indexPath,
-          parentPath: parentPath,
-          parentSchemaPath: parentSchemaPath,
-          permissions: permissions,
-          readOnly: readOnly
+          parentPath,
+          parentSchemaPath,
+          permissions,
+          readOnly
         })]
       })
     }), AfterInput]