@payloadcms/ui 3.0.0-canary.98cbdb9 → 3.0.0-canary.99cbde3

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

@@ -1 +1 @@
-{"version":3,"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 { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useFormFields, useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport './index.scss'\n\nconst baseClass = 'field-error'\n\nconst DefaultFieldError: React.FC<GenericErrorProps> = (props) => {\n  const {\n    alignCaret = 'right',\n    message: messageFromProps,\n    path: pathFromProps,\n    showError: showErrorFromProps,\n  } = props\n\n  const { path: pathFromContext } = useFieldProps()\n  const path = pathFromContext ?? pathFromProps\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\nexport const FieldError: React.FC<GenericErrorProps> = (props) => {\n  const { CustomError, ...rest } = props\n\n  if (CustomError) {\n    return <RenderComponent clientProps={rest} mappedComponent={CustomError} />\n  }\n\n  return <DefaultFieldError {...rest} />\n}\n"],"names":["React","Tooltip","useFieldProps","useFormFields","useFormSubmitted","RenderComponent","baseClass","DefaultFieldError","props","alignCaret","message","messageFromProps","path","pathFromProps","showError","showErrorFromProps","pathFromContext","hasSubmitted","field","fields","errorMessage","valid","showMessage","length","className","delay","staticPositioning","FieldError","CustomError","rest","clientProps","mappedComponent"],"mappings":"AAAA;;AAIA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,kCAAiC;AACzD,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,8BAA6B;AAC7E,SAASC,eAAe,QAAQ,4CAA2C;AAC3E,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,oBAAiD,CAACC;IACtD,MAAM,EACJC,aAAa,OAAO,EACpBC,SAASC,gBAAgB,EACzBC,MAAMC,aAAa,EACnBC,WAAWC,kBAAkB,EAC9B,GAAGP;IAEJ,MAAM,EAAEI,MAAMI,eAAe,EAAE,GAAGd;IAClC,MAAMU,OAAOI,mBAAmBH;IAEhC,MAAMI,eAAeb;IACrB,MAAMc,QAAQf,cAAc,CAAC,CAACgB,OAAO,GAAK,AAACA,UAAUA,QAAQ,CAACP,KAAK,IAAK;IAExE,MAAM,EAAEQ,YAAY,EAAEC,KAAK,EAAE,GAAGH,SAAS,CAAC;IAE1C,MAAMR,UAAUC,oBAAoBS;IACpC,MAAME,cAAcP,sBAAuBE,gBAAgBI,UAAU;IAErE,IAAIC,eAAeZ,SAASa,QAAQ;QAClC,qBACE,KAACtB;YAAQQ,YAAYA;YAAYe,WAAWlB;YAAWmB,OAAO;YAAGC,iBAAiB;sBAC/EhB;;IAGP;IAEA,OAAO;AACT;AAEA,OAAO,MAAMiB,aAA0C,CAACnB;IACtD,MAAM,EAAEoB,WAAW,EAAE,GAAGC,MAAM,GAAGrB;IAEjC,IAAIoB,aAAa;QACf,qBAAO,KAACvB;YAAgByB,aAAaD;YAAME,iBAAiBH;;IAC9D;IAEA,qBAAO,KAACrB;QAAmB,GAAGsB,IAAI;;AACpC,EAAC"}
+{"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","errorMessage","valid","showMessage","length","t3","_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,QAAAa,KAAA;IAExCF,EAAA,GAAAE,KAAA,MAAU;IAAAb,CAAA,MAAAa,KAAA;IAAAb,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAA1C;IAAAc,YAAA;IAAAC;EAAA,IAAgCJ,EAAU;EAE1C,MAAAR,OAAA,GAAgBC,gBAAA,IAAoBU,YAAA;EACpC,MAAAE,WAAA,GAAoBT,kBAAA,IAAuBE,YAAA,IAAgBM,KAAA,UAAU;EAAA,IAEjEC,WAAA,IAAeb,OAAA,EAAAc,MAAS;IAAA,IAAAC,EAAA;IAAA,IAAAlB,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAG,OAAA;MAExBe,EAAA,GAAAC,IAAA,CAAAzB,OAAA;QAAAO,UAAA;QAAAmB,SAAA,EAAAvB,SAAA;QAAAwB,KAAA;QAAAC,iBAAA;QAAAC,QAAA,EACGpB;MAAA,C;;;;;;;WADHe,E;;;CAON","ignoreList":[]}

package/dist/fields/FieldError/index.scss

@@ -1,16 +1,18 @@
 @import '../../scss/styles';
 
-.field-error.tooltip {
-  font-family: var(--font-body);
-  left: auto;
-  max-width: 75%;
-  right: 0;
-  transform: translateY(calc(var(--caret-size) * -1));
-  color: var(--theme-error-950);
-  background-color: var(--theme-error-300);
+@layer payload-default {
+  .field-error.tooltip {
+    font-family: var(--font-body);
+    left: auto;
+    max-width: 75%;
+    right: 0;
+    transform: translateY(calc(var(--caret-size) * -1));
+    color: var(--theme-error-950);
+    background-color: var(--theme-error-300);
 
-  &::after {
-    border-top-color: var(--theme-error-300);
-    border-bottom-color: var(--theme-error-300);
+    &::after {
+      border-top-color: var(--theme-error-300);
+      border-bottom-color: var(--theme-error-300);
+    }
   }
 }

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;AAQzB,OAAO,cAAc,CAAA;AA8BrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAQlD,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,cAAc,CAAA;AAErB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiClD,CAAA"}

package/dist/fields/FieldLabel/index.js

@@ -1,47 +1,107 @@
 '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';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
 import { useForm } from '../../forms/Form/context.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 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';
-const DefaultFieldLabel = (props)=>{
-    const { as: Element = 'label', htmlFor: htmlForFromProps, label: labelFromProps, required = false, unstyled = false } = props;
-    const { uuid } = useForm();
-    const { path } = useFieldProps();
-    const editDepth = useEditDepth();
-    const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid);
-    const { i18n } = useTranslation();
-    if (labelFromProps) {
-        return /*#__PURE__*/ _jsxs(Element, {
-            className: `field-label ${unstyled ? 'unstyled' : ''}`,
-            htmlFor: htmlFor,
-            children: [
-                getTranslation(labelFromProps, i18n),
-                required && !unstyled && /*#__PURE__*/ _jsx("span", {
-                    className: "required",
-                    children: "*"
-                })
-            ]
+export const FieldLabel = props => {
+  const $ = _c(25);
+  const {
+    as: t0,
+    hideLocale: t1,
+    htmlFor: htmlForFromProps,
+    label,
+    localized: t2,
+    path,
+    required: t3,
+    unstyled: t4
+  } = props;
+  const Element = 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 {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
+  let t5;
+  if ($[0] !== htmlForFromProps || $[1] !== path || $[2] !== editDepth || $[3] !== uuid) {
+    t5 = htmlForFromProps || generateFieldID(path, editDepth, uuid);
+    $[0] = htmlForFromProps;
+    $[1] = path;
+    $[2] = editDepth;
+    $[3] = uuid;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const htmlFor = t5;
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    code,
+    label: localLabel
+  } = useLocale();
+  if (label) {
+    const t6 = `field-label ${unstyled ? "unstyled" : ""}`;
+    let t7;
+    if ($[5] !== label || $[6] !== i18n || $[7] !== required || $[8] !== unstyled || $[9] !== localized || $[10] !== hideLocale || $[11] !== localLabel || $[12] !== code || $[13] !== t6 || $[14] !== htmlFor || $[15] !== Element) {
+      let t8;
+      if ($[17] !== required || $[18] !== unstyled) {
+        t8 = required && !unstyled && _jsx("span", {
+          className: "required",
+          children: "*"
         });
-    }
-    return null;
-};
-export const FieldLabel = (props)=>{
-    const { Label, ...rest } = props;
-    if (Label) {
-        return /*#__PURE__*/ _jsx(RenderComponent, {
-            clientProps: rest,
-            mappedComponent: Label
+        $[17] = required;
+        $[18] = unstyled;
+        $[19] = t8;
+      } else {
+        t8 = $[19];
+      }
+      let t9;
+      if ($[20] !== localized || $[21] !== hideLocale || $[22] !== localLabel || $[23] !== code) {
+        t9 = localized && !hideLocale && _jsxs("span", {
+          className: "localized",
+          children: ["\u2014 ", typeof localLabel === "string" ? localLabel : code]
         });
+        $[20] = localized;
+        $[21] = hideLocale;
+        $[22] = localLabel;
+        $[23] = code;
+        $[24] = t9;
+      } else {
+        t9 = $[24];
+      }
+      t7 = _jsxs(Element, {
+        className: t6,
+        htmlFor,
+        children: [getTranslation(label, i18n), t8, t9]
+      });
+      $[5] = label;
+      $[6] = i18n;
+      $[7] = required;
+      $[8] = unstyled;
+      $[9] = localized;
+      $[10] = hideLocale;
+      $[11] = localLabel;
+      $[12] = code;
+      $[13] = t6;
+      $[14] = htmlFor;
+      $[15] = Element;
+      $[16] = t7;
+    } else {
+      t7 = $[16];
     }
-    return /*#__PURE__*/ _jsx(DefaultFieldLabel, {
-        ...rest
-    });
+    return t7;
+  }
+  return null;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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 { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport './index.scss'\n\nconst DefaultFieldLabel: React.FC<GenericLabelProps> = (props) => {\n  const {\n    as: Element = 'label',\n    htmlFor: htmlForFromProps,\n    label: labelFromProps,\n    required = false,\n    unstyled = false,\n  } = props\n\n  const { uuid } = useForm()\n  const { path } = useFieldProps()\n  const editDepth = useEditDepth()\n  const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid)\n\n  const { i18n } = useTranslation()\n\n  if (labelFromProps) {\n    return (\n      <Element className={`field-label ${unstyled ? 'unstyled' : ''}`} htmlFor={htmlFor}>\n        {getTranslation(labelFromProps, i18n)}\n        {required && !unstyled && <span className=\"required\">*</span>}\n      </Element>\n    )\n  }\n\n  return null\n}\n\nexport const FieldLabel: React.FC<GenericLabelProps> = (props) => {\n  const { Label, ...rest } = props\n\n  if (Label) {\n    return <RenderComponent clientProps={rest} mappedComponent={Label} />\n  }\n\n  return <DefaultFieldLabel {...rest} />\n}\n"],"names":["getTranslation","React","useFieldProps","useForm","RenderComponent","useEditDepth","useTranslation","generateFieldID","DefaultFieldLabel","props","as","Element","htmlFor","htmlForFromProps","label","labelFromProps","required","unstyled","uuid","path","editDepth","i18n","className","span","FieldLabel","Label","rest","clientProps","mappedComponent"],"mappings":"AAAA;;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,OAAO,QAAQ,8BAA6B;AACrD,SAASC,eAAe,QAAQ,4CAA2C;AAC3E,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,eAAe,QAAQ,qCAAoC;AACpE,OAAO,eAAc;AAErB,MAAMC,oBAAiD,CAACC;IACtD,MAAM,EACJC,IAAIC,UAAU,OAAO,EACrBC,SAASC,gBAAgB,EACzBC,OAAOC,cAAc,EACrBC,WAAW,KAAK,EAChBC,WAAW,KAAK,EACjB,GAAGR;IAEJ,MAAM,EAAES,IAAI,EAAE,GAAGf;IACjB,MAAM,EAAEgB,IAAI,EAAE,GAAGjB;IACjB,MAAMkB,YAAYf;IAClB,MAAMO,UAAUC,oBAAoBN,gBAAgBY,MAAMC,WAAWF;IAErE,MAAM,EAAEG,IAAI,EAAE,GAAGf;IAEjB,IAAIS,gBAAgB;QAClB,qBACE,MAACJ;YAAQW,WAAW,CAAC,YAAY,EAAEL,WAAW,aAAa,GAAG,CAAC;YAAEL,SAASA;;gBACvEZ,eAAee,gBAAgBM;gBAC/BL,YAAY,CAACC,0BAAY,KAACM;oBAAKD,WAAU;8BAAW;;;;IAG3D;IAEA,OAAO;AACT;AAEA,OAAO,MAAME,aAA0C,CAACf;IACtD,MAAM,EAAEgB,KAAK,EAAE,GAAGC,MAAM,GAAGjB;IAE3B,IAAIgB,OAAO;QACT,qBAAO,KAACrB;YAAgBuB,aAAaD;YAAME,iBAAiBH;;IAC9D;IAEA,qBAAO,KAACjB;QAAmB,GAAGkB,IAAI;;AACpC,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useForm","useEditDepth","useLocale","useTranslation","generateFieldID","FieldLabel","props","$","as","t0","hideLocale","t1","htmlFor","htmlForFromProps","label","localized","t2","path","required","t3","unstyled","t4","Element","undefined","uuid","editDepth","t5","i18n","code","localLabel","t6","t7","t8","_jsx","className","children","t9","_jsxs"],"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: Element = '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  const htmlFor = htmlForFromProps || generateFieldID(path, editDepth, uuid)\n  const { i18n } = useTranslation()\n  const { code, label: localLabel } = useLocale()\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":"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","ignoreList":[]}

package/dist/fields/FieldLabel/index.scss

@@ -1,21 +1,45 @@
 @import '../../scss/styles.scss';
 
-label.field-label:not(.unstyled) {
-  @extend %body;
-  display: flex;
-  padding-bottom: base(0.25);
-  color: var(--theme-elevation-800);
-  font-family: var(--font-body);
+@layer payload-default {
+  label.field-label {
+    display: flex;
+    align-items: center;
+  }
 
-  .required {
-    color: var(--theme-error-500);
+  label.field-label:not(.unstyled) {
+    @extend %body;
+    display: flex;
+    padding-bottom: base(0.25);
+    color: var(--theme-elevation-800);
+    font-family: var(--font-body);
     [dir='ltr'] & {
-      margin-left: base(0.25);
       margin-right: auto;
     }
     [dir='rtl'] & {
-      margin-right: base(0.25);
       margin-left: auto;
     }
+
+    .required {
+      color: var(--theme-error-500);
+    }
+
+    .required {
+      [dir='ltr'] & {
+        margin-left: base(0.25);
+      }
+      [dir='rtl'] & {
+        margin-right: base(0.25);
+      }
+    }
+  }
+
+  .localized {
+    @extend %body;
+    [dir='ltr'] & {
+      margin-left: base(0.25);
+    }
+    [dir='rtl'] & {
+      margin-right: base(0.25);
+    }
   }
 }

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

@@ -1,8 +1,10 @@
-import type { GroupFieldProps } from 'payload';
+import type { GroupFieldClientComponent } from 'payload';
 import React from 'react';
 import './index.scss';
 import { GroupProvider, useGroup } from './provider.js';
-export declare const GroupFieldComponent: React.FC<GroupFieldProps>;
+export declare const GroupFieldComponent: GroupFieldClientComponent;
 export { GroupProvider, useGroup };
-export declare const GroupField: React.FC<GroupFieldProps>;
+export declare const GroupField: React.FC<import("payload").FieldPaths & Pick<import("payload").ServerFieldBase, "permissions"> & {
+    readonly field: Omit<import("payload").GroupFieldClient, "type"> & Partial<Pick<import("payload").GroupFieldClient, "type">>;
+} & Omit<import("payload").ClientComponentProps, "field" | "customComponents">>;
 //# 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,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuFzD,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,UAAU,2BAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,eAAO,MAAM,mBAAmB,EAAE,yBAwFjC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAA;AAElC,eAAO,MAAM,UAAU;;+EAAqC,CAAA"}

package/dist/fields/Group/index.js

@@ -1,106 +1,201 @@
 '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';
 import { useCollapsible } from '../../elements/Collapsible/provider.js';
 import { ErrorPill } from '../../elements/ErrorPill/index.js';
-import { useFieldProps } from '../../forms/FieldPropsProvider/index.js';
-import { useFormInitializing, useFormProcessing, useFormSubmitted } from '../../forms/Form/context.js';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { useFormSubmitted } from '../../forms/Form/context.js';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { FieldDescription } from '../FieldDescription/index.js';
 import { useRow } from '../Row/provider.js';
-import { useTabs } from '../Tabs/provider.js';
 import { fieldBaseClass } from '../shared/index.js';
+import { useTabs } from '../Tabs/provider.js';
 import './index.scss';
 import { GroupProvider, useGroup } from './provider.js';
 const baseClass = 'group-field';
-export const GroupFieldComponent = (props)=>{
-    const { descriptionProps, field, field: { admin: { className, description, hideGutter, readOnly: readOnlyFromAdmin, style, width } = {}, fields, label }, readOnly: readOnlyFromTopLevelProps } = props;
-    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
-    const { path, permissions, readOnly: readOnlyFromContext, schemaPath } = useFieldProps();
-    const { i18n } = useTranslation();
-    const { isWithinCollapsible } = useCollapsible();
-    const isWithinGroup = useGroup();
-    const isWithinRow = useRow();
-    const isWithinTab = useTabs();
-    const { errorPaths } = useField({
-        path
-    });
-    const formInitializing = useFormInitializing();
-    const formProcessing = useFormProcessing();
-    const submitted = useFormSubmitted();
-    const errorCount = errorPaths.length;
-    const fieldHasErrors = submitted && errorCount > 0;
-    const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
-    const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
-    return /*#__PURE__*/ _jsx("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, '__')}`,
-        style: {
-            ...style,
-            width
-        },
-        children: /*#__PURE__*/ _jsx(GroupProvider, {
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__wrap`,
-                children: [
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: `${baseClass}__header`,
-                        children: [
-                            (field?.admin?.components?.Label || field?.admin?.components?.Description || label) && /*#__PURE__*/ _jsxs("header", {
-                                children: [
-                                    field?.admin?.components?.Label !== undefined ? /*#__PURE__*/ _jsx(RenderComponent, {
-                                        clientProps: {
-                                            label
-                                        },
-                                        mappedComponent: field?.admin?.components?.Label
-                                    }) : label ? /*#__PURE__*/ _jsx("h3", {
-                                        className: `${baseClass}__title`,
-                                        children: getTranslation(label, i18n)
-                                    }) : null,
-                                    /*#__PURE__*/ _jsx(FieldDescription, {
-                                        Description: field?.admin?.components?.Description,
-                                        description: description,
-                                        ...descriptionProps || {}
-                                    })
-                                ]
-                            }),
-                            fieldHasErrors && /*#__PURE__*/ _jsx(ErrorPill, {
-                                count: errorCount,
-                                i18n: i18n,
-                                withMessage: true
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(RenderFields, {
-                        fields: fields,
-                        margins: "small",
-                        path: path,
-                        permissions: permissions?.fields,
-                        readOnly: disabled,
-                        schemaPath: schemaPath
-                    })
-                ]
-            })
+export const GroupFieldComponent = props => {
+  const $ = _c(36);
+  const {
+    field: t0,
+    path,
+    permissions,
+    readOnly,
+    schemaPath: schemaPathFromProps
+  } = props;
+  const {
+    name,
+    admin: t1,
+    fields,
+    label
+  } = t0;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = t1 === undefined ? {} : t1;
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const {
+    className,
+    description,
+    hideGutter,
+    style,
+    width
+  } = t2;
+  const schemaPath = schemaPathFromProps ?? name;
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    isWithinCollapsible
+  } = useCollapsible();
+  const isWithinGroup = useGroup();
+  const isWithinRow = useRow();
+  const isWithinTab = useTabs();
+  let t3;
+  if ($[2] !== path) {
+    t3 = {
+      path
+    };
+    $[2] = path;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const {
+    customComponents: t4,
+    errorPaths
+  } = useField(t3);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = t4 === undefined ? {} : t4;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const {
+    Description,
+    Label
+  } = t5;
+  const submitted = useFormSubmitted();
+  const errorCount = errorPaths.length;
+  const fieldHasErrors = submitted && errorCount > 0;
+  const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
+  const t6 = isTopLevel && `${baseClass}--top-level`;
+  const t7 = isWithinCollapsible && `${baseClass}--within-collapsible`;
+  const t8 = isWithinGroup && `${baseClass}--within-group`;
+  const t9 = isWithinRow && `${baseClass}--within-row`;
+  const t10 = isWithinTab && `${baseClass}--within-tab`;
+  const t11 = !hideGutter && isWithinGroup && `${baseClass}--gutter`;
+  const t12 = fieldHasErrors && `${baseClass}--has-error`;
+  let t13;
+  if ($[6] !== t6 || $[7] !== t7 || $[8] !== t8 || $[9] !== t9 || $[10] !== t10 || $[11] !== t11 || $[12] !== t12 || $[13] !== className) {
+    t13 = [fieldBaseClass, baseClass, t6, t7, t8, t9, t10, t11, t12, className].filter(Boolean);
+    $[6] = t6;
+    $[7] = t7;
+    $[8] = t8;
+    $[9] = t9;
+    $[10] = t10;
+    $[11] = t11;
+    $[12] = t12;
+    $[13] = className;
+    $[14] = t13;
+  } else {
+    t13 = $[14];
+  }
+  const t14 = t13.join(" ");
+  const t15 = `field-${path?.replace(/\./g, "__")}`;
+  let t16;
+  if ($[15] !== style || $[16] !== width || $[17] !== Label || $[18] !== Description || $[19] !== label || $[20] !== i18n || $[21] !== path || $[22] !== description || $[23] !== fieldHasErrors || $[24] !== errorCount || $[25] !== permissions?.fields || $[26] !== fields || $[27] !== schemaPath || $[28] !== readOnly || $[29] !== t14 || $[30] !== t15) {
+    let t17;
+    if ($[32] !== fieldHasErrors || $[33] !== errorCount || $[34] !== i18n) {
+      t17 = fieldHasErrors && _jsx(ErrorPill, {
+        count: errorCount,
+        i18n,
+        withMessage: true
+      });
+      $[32] = fieldHasErrors;
+      $[33] = errorCount;
+      $[34] = i18n;
+      $[35] = t17;
+    } else {
+      t17 = $[35];
+    }
+    t16 = _jsx("div", {
+      className: t14,
+      id: t15,
+      style: {
+        ...style,
+        width
+      },
+      children: _jsx(GroupProvider, {
+        children: _jsxs("div", {
+          className: `${baseClass}__wrap`,
+          children: [_jsxs("div", {
+            className: `${baseClass}__header`,
+            children: [Boolean(Label || Description || label) && _jsxs("header", {
+              children: [_jsx(RenderCustomComponent, {
+                CustomComponent: Label,
+                Fallback: _jsx("h3", {
+                  className: `${baseClass}__title`,
+                  children: _jsx(FieldLabel, {
+                    label: getTranslation(label, i18n),
+                    localized: false,
+                    path,
+                    required: false
+                  })
+                })
+              }), _jsx(RenderCustomComponent, {
+                CustomComponent: Description,
+                Fallback: _jsx(FieldDescription, {
+                  description,
+                  path
+                })
+              })]
+            }), t17]
+          }), _jsx(RenderFields, {
+            fields,
+            margins: "small",
+            parentIndexPath: "",
+            parentPath: path,
+            parentSchemaPath: schemaPath,
+            permissions: permissions?.fields,
+            readOnly
+          })]
         })
+      })
     });
+    $[15] = style;
+    $[16] = width;
+    $[17] = Label;
+    $[18] = Description;
+    $[19] = label;
+    $[20] = i18n;
+    $[21] = path;
+    $[22] = description;
+    $[23] = fieldHasErrors;
+    $[24] = errorCount;
+    $[25] = permissions?.fields;
+    $[26] = fields;
+    $[27] = schemaPath;
+    $[28] = readOnly;
+    $[29] = t14;
+    $[30] = t15;
+    $[31] = t16;
+  } else {
+    t16 = $[31];
+  }
+  return t16;
 };
 export { GroupProvider, useGroup };
 export const GroupField = withCondition(GroupFieldComponent);
-
 //# sourceMappingURL=index.js.map