@payloadcms/ui 4.0.0-internal.cd47d20 → 4.0.0-internal.ce66a41

package/dist/fields/ConfirmPassword/index.js

@@ -4,15 +4,18 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { confirmPassword } from 'payload/shared';
 import React, { useState } from 'react';
+import { useForm } from '../../forms/Form/context.js';
 import { useField } from '../../forms/useField/index.js';
 import { EyeIcon } from '../../icons/Eye/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { FieldError } from '../FieldError/index.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { fieldBaseClass } from '../shared/index.js';
 import './index.css';
 export const ConfirmPasswordField = props => {
-  const $ = _c(15);
+  const $ = _c(18);
   const {
     disabled: disabledFromProps,
     path: t0,
@@ -41,32 +44,37 @@ export const ConfirmPasswordField = props => {
     showError,
     value: value_0
   } = useField(t2);
-  const isDisabled = !!(disabled || disabledFromProps);
-  const t3 = showError && "error";
-  const t4 = isDisabled && "read-only";
-  let t5;
-  if ($[2] !== t3 || $[3] !== t4) {
-    t5 = [fieldBaseClass, "confirm-password", t3, t4].filter(Boolean);
-    $[2] = t3;
-    $[3] = t4;
-    $[4] = t5;
-  } else {
-    t5 = $[4];
-  }
-  const t6 = t5.join(" ");
-  let t7;
-  if ($[5] !== isDisabled || $[6] !== path || $[7] !== setValue || $[8] !== showPassword || $[9] !== size || $[10] !== t || $[11] !== t6 || $[12] !== value_0) {
-    let t8;
-    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-      t8 = () => setShowPassword(_temp2);
-      $[14] = t8;
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
+  let t3;
+  if ($[2] !== disabled || $[3] !== disabledFromProps || $[4] !== editDepth || $[5] !== path || $[6] !== setValue || $[7] !== showError || $[8] !== showPassword || $[9] !== size || $[10] !== t || $[11] !== uuid || $[12] !== value_0) {
+    const errorID = showError ? generateFieldID(path, editDepth, uuid, "field-error") : undefined;
+    const isDisabled = !!(disabled || disabledFromProps);
+    const t4 = showError && "error";
+    const t5 = isDisabled && "read-only";
+    let t6;
+    if ($[14] !== t4 || $[15] !== t5) {
+      t6 = [fieldBaseClass, "confirm-password", t4, t5].filter(Boolean);
+      $[14] = t4;
+      $[15] = t5;
+      $[16] = t6;
+    } else {
+      t6 = $[16];
+    }
+    let t7;
+    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => setShowPassword(_temp2);
+      $[17] = t7;
     } else {
-      t8 = $[14];
+      t7 = $[17];
     }
-    t7 = _jsxs("div", {
-      className: t6,
+    t3 = _jsxs("div", {
+      className: t6.join(" "),
       "data-size": size,
       children: [_jsx(FieldLabel, {
+        hasRequiredAccessibleState: true,
         htmlFor: "field-confirm-password",
         label: t("authentication:confirmPassword"),
         required: true
@@ -77,7 +85,10 @@ export const ConfirmPasswordField = props => {
         }), _jsxs("div", {
           className: "confirm-password__input-wrap",
           children: [_jsx("input", {
+            "aria-describedby": errorID,
+            "aria-invalid": showError || undefined,
             "aria-label": t("authentication:confirmPassword"),
+            "aria-required": true,
             autoComplete: "off",
             className: "form-input",
             disabled: isDisabled,
@@ -90,7 +101,7 @@ export const ConfirmPasswordField = props => {
             "aria-label": t(showPassword ? "fields:hidePassword" : "fields:showPassword"),
             className: "confirm-password__toggle-button",
             disabled: isDisabled,
-            onClick: t8,
+            onClick: t7,
             type: "button",
             children: _jsx(EyeIcon, {
               active: showPassword,
@@ -100,19 +111,22 @@ export const ConfirmPasswordField = props => {
         })]
       })]
     });
-    $[5] = isDisabled;
-    $[6] = path;
-    $[7] = setValue;
+    $[2] = disabled;
+    $[3] = disabledFromProps;
+    $[4] = editDepth;
+    $[5] = path;
+    $[6] = setValue;
+    $[7] = showError;
     $[8] = showPassword;
     $[9] = size;
     $[10] = t;
-    $[11] = t6;
+    $[11] = uuid;
     $[12] = value_0;
-    $[13] = t7;
+    $[13] = t3;
   } else {
-    t7 = $[13];
+    t3 = $[13];
   }
-  return t7;
+  return t3;
 };
 function _temp(value, options) {
   return confirmPassword(value, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","confirmPassword","React","useState","useField","EyeIcon","useTranslation","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","$","disabled","disabledFromProps","path","t0","size","t1","undefined","t","showPassword","setShowPassword","t2","validate","_temp","setValue","showError","value","value_0","isDisabled","t3","t4","t5","filter","Boolean","t6","join","t7","t8","Symbol","for","_temp2","_jsxs","className","children","_jsx","htmlFor","label","required","autoComplete","id","name","onChange","type","onClick","active","options","prev"],"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { useField } from '../../forms/useField/index.js'\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n  /**\n   * Controls the height of the input. Defaults to `'large'`.\n   */\n  readonly size?: 'large' | 'medium'\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password', size = 'large' } = props\n  const { t } = useTranslation()\n  const [showPassword, setShowPassword] = useState(false)\n\n  const { disabled, setValue, showError, value } = useField({\n    path,\n    validate: (value, options) => {\n      return confirmPassword(value, {\n        name: 'confirm-password',\n        type: 'text',\n        required: true,\n        ...options,\n      })\n    },\n  })\n\n  const isDisabled = !!(disabled || disabledFromProps)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'confirm-password',\n        showError && 'error',\n        isDisabled && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-size={size}\n    >\n      <FieldLabel\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError path={path} />\n        <div className=\"confirm-password__input-wrap\">\n          <input\n            aria-label={t('authentication:confirmPassword')}\n            autoComplete=\"off\"\n            className=\"form-input\"\n            disabled={isDisabled}\n            id=\"field-confirm-password\"\n            name=\"confirm-password\"\n            onChange={setValue}\n            type={showPassword ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <button\n            aria-label={t(showPassword ? 'fields:hidePassword' : 'fields:showPassword')}\n            className=\"confirm-password__toggle-button\"\n            disabled={isDisabled}\n            onClick={() => setShowPassword((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showPassword} size={24} />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","confirmPassword","React","useState","useForm","useField","EyeIcon","useEditDepth","useTranslation","generateFieldID","FieldError","FieldLabel","fieldBaseClass","ConfirmPasswordField","props","$","disabled","disabledFromProps","path","t0","size","t1","undefined","t","showPassword","setShowPassword","t2","validate","_temp","setValue","showError","value","value_0","uuid","editDepth","t3","errorID","isDisabled","t4","t5","t6","filter","Boolean","t7","Symbol","for","_temp2","_jsxs","className","join","children","_jsx","hasRequiredAccessibleState","htmlFor","label","required","autoComplete","id","name","onChange","type","onClick","active","options","prev"],"sources":["../../../src/fields/ConfirmPassword/index.tsx"],"sourcesContent":["'use client'\n\nimport { confirmPassword } from 'payload/shared'\nimport React, { useState } from 'react'\n\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nexport type ConfirmPasswordFieldProps = {\n  readonly disabled?: boolean\n  readonly path?: string\n  /**\n   * Controls the height of the input. Defaults to `'large'`.\n   */\n  readonly size?: 'large' | 'medium'\n}\n\nexport const ConfirmPasswordField: React.FC<ConfirmPasswordFieldProps> = (props) => {\n  const { disabled: disabledFromProps, path = 'confirm-password', size = 'large' } = props\n  const { t } = useTranslation()\n  const [showPassword, setShowPassword] = useState(false)\n\n  const { disabled, setValue, showError, value } = useField({\n    path,\n    validate: (value, options) => {\n      return confirmPassword(value, {\n        name: 'confirm-password',\n        type: 'text',\n        required: true,\n        ...options,\n      })\n    },\n  })\n\n  const { uuid } = useForm()\n  const editDepth = useEditDepth()\n  const errorID = showError ? generateFieldID(path, editDepth, uuid, 'field-error') : undefined\n\n  const isDisabled = !!(disabled || disabledFromProps)\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        'confirm-password',\n        showError && 'error',\n        isDisabled && 'read-only',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      data-size={size}\n    >\n      <FieldLabel\n        hasRequiredAccessibleState\n        htmlFor=\"field-confirm-password\"\n        label={t('authentication:confirmPassword')}\n        required\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <FieldError path={path} />\n        <div className=\"confirm-password__input-wrap\">\n          <input\n            aria-describedby={errorID}\n            aria-invalid={showError || undefined}\n            aria-label={t('authentication:confirmPassword')}\n            aria-required\n            autoComplete=\"off\"\n            className=\"form-input\"\n            disabled={isDisabled}\n            id=\"field-confirm-password\"\n            name=\"confirm-password\"\n            onChange={setValue}\n            type={showPassword ? 'text' : 'password'}\n            value={(value as string) || ''}\n          />\n          <button\n            aria-label={t(showPassword ? 'fields:hidePassword' : 'fields:showPassword')}\n            className=\"confirm-password__toggle-button\"\n            disabled={isDisabled}\n            onClick={() => setShowPassword((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showPassword} size={24} />\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Email/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAwB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAWnD,OAAO,aAAa,CAAA;AA+FpB,eAAO,MAAM,UAAU,iCAAqC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Email/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAwB,MAAM,SAAS,CAAA;AAG1E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAcnD,OAAO,aAAa,CAAA;AA0GpB,eAAO,MAAM,UAAU,iCAAqC,CAAA"}

package/dist/fields/Email/index.js

@@ -6,9 +6,12 @@ import React, { useCallback, useMemo } from 'react';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { FieldDescription } from '../../fields/FieldDescription/index.js';
 import { FieldError } from '../../fields/FieldError/index.js';
+import { useForm } from '../../forms/Form/context.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
 import { FieldLabel } from '../FieldLabel/index.js';
 import { mergeFieldStyles } from '../mergeFieldStyles.js';
 import { fieldBaseClass } from '../shared/index.js';
@@ -59,6 +62,11 @@ const EmailFieldComponent = props => {
     potentiallyStalePath: pathFromProps,
     validate: memoizedValidate
   });
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
+  const errorID = showError ? generateFieldID(path, editDepth, uuid, 'field-error') : undefined;
   const styles = useMemo(() => mergeFieldStyles(field), [field]);
   return /*#__PURE__*/_jsxs("div", {
     className: [fieldBaseClass, 'email', className, showError && 'error', (readOnly || disabled) && 'read-only'].filter(Boolean).join(' '),
@@ -66,6 +74,7 @@ const EmailFieldComponent = props => {
     children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Label,
       Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        hasRequiredAccessibleState: true,
         label: label,
         localized: localized,
         path: path,
@@ -80,6 +89,8 @@ const EmailFieldComponent = props => {
           showError: showError
         })
       }), BeforeInput, /*#__PURE__*/_jsx("input", {
+        "aria-describedby": errorID,
+        "aria-invalid": showError || undefined,
         autoComplete: autoComplete,
         className: "form-input",
         disabled: readOnly || disabled,

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 { 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 { 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.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 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          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":[]}
+{"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/FieldError/index.css

@@ -1,6 +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.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;AAMzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiClD,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

@@ -51,7 +51,10 @@ export const FieldError = props => {
           className: baseClass,
           delay: 0,
           id: generateFieldID(path, editDepth, uuid, "field-error"),
-          staticPositioning: true,
+          portal: false,
+          position: "top",
+          role: "alert",
+          tabIndex: 0,
           children: message
         });
         break bb0;

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

@@ -1 +1 @@
-{"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","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 { 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        staticPositioning\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,iBAAA;UAAAC,QAAA,EAG1CxB;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

@@ -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,CAwClD,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();
@@ -38,10 +43,23 @@ export const FieldLabel = props => {
   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 && locale && _jsxs("span", {

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

@@ -84,10 +84,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 +98,6 @@
 
   .group-field__title {
     margin-bottom: 0;
-    font-family: var(--text-heading-medium-font-family);
     font-size: var(--text-heading-medium-font-size);
     font-weight: var(--text-heading-medium-font-weight);
     line-height: var(--text-heading-medium-line-height);

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/JSON/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,SAAS,CAAA;AAG/D,OAAO,KAAoD,MAAM,OAAO,CAAA;AAaxE,OAAO,aAAa,CAAA;AA4KpB,eAAO,MAAM,SAAS,gCAAoC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/JSON/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAc,MAAM,SAAS,CAAA;AAI/D,OAAO,KAAoD,MAAM,OAAO,CAAA;AAcxE,OAAO,aAAa,CAAA;AA+LpB,eAAO,MAAM,SAAS,gCAAoC,CAAA"}

package/dist/fields/JSON/index.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { defaultOptions } from '../../elements/CodeEditor/constants.js';
@@ -8,6 +9,7 @@ import { CodeEditor } from '../../elements/CodeEditor/index.js';
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
 import { useField } from '../../forms/useField/index.js';
 import { withCondition } from '../../forms/withCondition/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
 import { FieldDescription } from '../FieldDescription/index.js';
 import { FieldError } from '../FieldError/index.js';
 import { FieldLabel } from '../FieldLabel/index.js';
@@ -48,6 +50,10 @@ const JSONFieldComponent = props => {
     return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\t');
   }, [tabSize, insertSpaces]);
   const [jsonError, setJsonError] = useState();
+  const {
+    i18n
+  } = useTranslation();
+  const editorRef = React.useRef(null);
   const inputChangeFromRef = React.useRef('formState');
   const [recalculatedHeightAt, setRecalculatedHeightAt] = useState(Date.now());
   const memoizedValidate = useCallback((value_0, options) => {
@@ -79,6 +85,7 @@ const JSONFieldComponent = props => {
   });
   const stringValueRef = React.useRef(formatJSON(value_1 ?? initialValue));
   const handleMount = useCallback((editor, monaco) => {
+    editorRef.current = editor;
     if (!jsonSchema) {
       return;
     }
@@ -123,8 +130,11 @@ const JSONFieldComponent = props => {
     children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
       CustomComponent: Label,
       Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        as: "span",
+        hasRequiredAccessibleState: true,
         label: label,
         localized: localized,
+        onClick: () => editorRef.current?.focus(),
         path: path,
         required: required
       })
@@ -142,7 +152,11 @@ const JSONFieldComponent = props => {
         maxHeight: maxHeight,
         onChange: handleChange,
         onMount: handleMount,
-        options: editorOptions,
+        options: {
+          ariaLabel: getTranslation(label || '', i18n) || undefined,
+          ariaRequired: required,
+          ...(editorOptions || {})
+        },
         readOnly: readOnly || disabled,
         recalculatedHeightAt: recalculatedHeightAt,
         value: stringValueRef.current,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useState","v4","uuidv4","defaultOptions","CodeEditor","RenderCustomComponent","useField","withCondition","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","baseClass","JSONFieldComponent","props","field","admin","className","description","editorOptions","maxHeight","jsonSchema","label","localized","required","path","pathFromProps","readOnly","validate","insertSpaces","tabSize","formatJSON","value","undefined","JSON","stringify","jsonError","setJsonError","inputChangeFromRef","useRef","recalculatedHeightAt","setRecalculatedHeightAt","Date","now","memoizedValidate","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","initialValue","setValue","showError","potentiallyStalePath","stringValueRef","handleMount","editor","monaco","languages","json","jsonDefaults","setDiagnosticsOptions","enableSchemaRequest","schemas","diagnosticsOptions","uri","newUri","includes","crypto","randomUUID","setModel","createModel","Uri","parse","handleChange","val","current","e","newStringValue","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","message","defaultLanguage","onChange","onMount","wrapperProps","id","replace","JSONField"],"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientProps, JsonObject } from 'payload'\n\nimport { type OnMount } from '@monaco-editor/react'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { defaultOptions } from '../../elements/CodeEditor/constants.js'\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst baseClass = 'json-field'\n\nconst JSONFieldComponent: React.FC<JSONFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, editorOptions, maxHeight } = {},\n      jsonSchema,\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { insertSpaces = defaultOptions.insertSpaces, tabSize = defaultOptions.tabSize } =\n    editorOptions || {}\n\n  const formatJSON = useCallback(\n    (value: JsonObject | undefined): string | undefined => {\n      if (value === undefined) {\n        return undefined\n      }\n      if (value === null) {\n        return ''\n      }\n      return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\\t')\n    },\n    [tabSize, insertSpaces],\n  )\n\n  const [jsonError, setJsonError] = useState<string>()\n  const inputChangeFromRef = React.useRef<'formState' | 'internalEditor'>('formState')\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState<number | undefined>(Date.now())\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, jsonError, required })\n      }\n    },\n    [validate, required, jsonError],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<JsonObject>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const stringValueRef = React.useRef<string>(formatJSON(value ?? initialValue))\n\n  const handleMount = useCallback<OnMount>(\n    (editor, monaco) => {\n      if (!jsonSchema) {\n        return\n      }\n\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [\n          ...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []),\n          jsonSchema,\n        ],\n        validate: true,\n      })\n\n      const uri = jsonSchema.uri\n      const newUri = uri.includes('?')\n        ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n        : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n\n      editor.setModel(\n        monaco.editor.createModel(formatJSON(value) || '', 'json', monaco.Uri.parse(newUri)),\n      )\n    },\n    [jsonSchema, formatJSON, value],\n  )\n\n  const handleChange = useCallback(\n    (val: string) => {\n      if (readOnly || disabled) {\n        return\n      }\n      inputChangeFromRef.current = 'internalEditor'\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        stringValueRef.current = val\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        stringValueRef.current = val\n        setJsonError(e)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  useEffect(() => {\n    if (inputChangeFromRef.current === 'formState') {\n      const newStringValue = formatJSON(value ?? initialValue)\n      if (newStringValue !== stringValueRef.current) {\n        stringValueRef.current = newStringValue\n        setRecalculatedHeightAt(Date.now())\n      }\n    }\n\n    inputChangeFromRef.current = 'formState'\n  }, [initialValue, path, formatJSON, value])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\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 message={jsonError} path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <CodeEditor\n          defaultLanguage=\"json\"\n          maxHeight={maxHeight}\n          onChange={handleChange}\n          onMount={handleMount}\n          options={editorOptions}\n          readOnly={readOnly || disabled}\n          recalculatedHeightAt={recalculatedHeightAt}\n          value={stringValueRef.current}\n          wrapperProps={{\n            id: `field-${path?.replace(/\\./g, '__')}`,\n          }}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JSONField = withCondition(JSONFieldComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useMemo","useState","v4","uuidv4","defaultOptions","CodeEditor","RenderCustomComponent","useField","withCondition","useTranslation","FieldDescription","FieldError","FieldLabel","mergeFieldStyles","fieldBaseClass","baseClass","JSONFieldComponent","props","field","admin","className","description","editorOptions","maxHeight","jsonSchema","label","localized","required","path","pathFromProps","readOnly","validate","insertSpaces","tabSize","formatJSON","value","undefined","JSON","stringify","jsonError","setJsonError","i18n","editorRef","useRef","inputChangeFromRef","recalculatedHeightAt","setRecalculatedHeightAt","Date","now","memoizedValidate","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","initialValue","setValue","showError","potentiallyStalePath","stringValueRef","handleMount","editor","monaco","current","languages","json","jsonDefaults","setDiagnosticsOptions","enableSchemaRequest","schemas","diagnosticsOptions","uri","newUri","includes","crypto","randomUUID","setModel","createModel","Uri","parse","handleChange","val","e","newStringValue","styles","_jsxs","filter","Boolean","join","style","_jsx","CustomComponent","Fallback","as","hasRequiredAccessibleState","onClick","focus","message","defaultLanguage","onChange","onMount","ariaLabel","ariaRequired","wrapperProps","id","replace","JSONField"],"sources":["../../../src/fields/JSON/index.tsx"],"sourcesContent":["'use client'\nimport type { JSONFieldClientProps, JsonObject } from 'payload'\n\nimport { type OnMount } from '@monaco-editor/react'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { defaultOptions } from '../../elements/CodeEditor/constants.js'\nimport { CodeEditor } from '../../elements/CodeEditor/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { FieldDescription } from '../FieldDescription/index.js'\nimport { FieldError } from '../FieldError/index.js'\nimport { FieldLabel } from '../FieldLabel/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.css'\n\nconst baseClass = 'json-field'\n\nconst JSONFieldComponent: React.FC<JSONFieldClientProps> = (props) => {\n  const {\n    field,\n    field: {\n      admin: { className, description, editorOptions, maxHeight } = {},\n      jsonSchema,\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { insertSpaces = defaultOptions.insertSpaces, tabSize = defaultOptions.tabSize } =\n    editorOptions || {}\n\n  const formatJSON = useCallback(\n    (value: JsonObject | undefined): string | undefined => {\n      if (value === undefined) {\n        return undefined\n      }\n      if (value === null) {\n        return ''\n      }\n      return insertSpaces ? JSON.stringify(value, null, tabSize) : JSON.stringify(value, null, '\\t')\n    },\n    [tabSize, insertSpaces],\n  )\n\n  const [jsonError, setJsonError] = useState<string>()\n  const { i18n } = useTranslation()\n  const editorRef =\n    React.useRef<Parameters<NonNullable<React.ComponentProps<typeof CodeEditor>['onMount']>>[0]>(\n      null,\n    )\n\n  const inputChangeFromRef = React.useRef<'formState' | 'internalEditor'>('formState')\n  const [recalculatedHeightAt, setRecalculatedHeightAt] = useState<number | undefined>(Date.now())\n\n  const memoizedValidate = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, jsonError, required })\n      }\n    },\n    [validate, required, jsonError],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<JsonObject>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const stringValueRef = React.useRef<string>(formatJSON(value ?? initialValue))\n\n  const handleMount = useCallback<OnMount>(\n    (editor, monaco) => {\n      editorRef.current = editor\n      if (!jsonSchema) {\n        return\n      }\n\n      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n        enableSchemaRequest: true,\n        schemas: [\n          ...(monaco.languages.json.jsonDefaults.diagnosticsOptions.schemas || []),\n          jsonSchema,\n        ],\n        validate: true,\n      })\n\n      const uri = jsonSchema.uri\n      const newUri = uri.includes('?')\n        ? `${uri}&${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n        : `${uri}?${crypto.randomUUID ? crypto.randomUUID() : uuidv4()}`\n\n      editor.setModel(\n        monaco.editor.createModel(formatJSON(value) || '', 'json', monaco.Uri.parse(newUri)),\n      )\n    },\n    [jsonSchema, formatJSON, value],\n  )\n\n  const handleChange = useCallback(\n    (val: string) => {\n      if (readOnly || disabled) {\n        return\n      }\n      inputChangeFromRef.current = 'internalEditor'\n\n      try {\n        setValue(val ? JSON.parse(val) : null)\n        stringValueRef.current = val\n        setJsonError(undefined)\n      } catch (e) {\n        setValue(val ? val : null)\n        stringValueRef.current = val\n        setJsonError(e)\n      }\n    },\n    [readOnly, disabled, setValue],\n  )\n\n  useEffect(() => {\n    if (inputChangeFromRef.current === 'formState') {\n      const newStringValue = formatJSON(value ?? initialValue)\n      if (newStringValue !== stringValueRef.current) {\n        stringValueRef.current = newStringValue\n        setRecalculatedHeightAt(Date.now())\n      }\n    }\n\n    inputChangeFromRef.current = 'formState'\n  }, [initialValue, path, formatJSON, value])\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\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            as=\"span\"\n            hasRequiredAccessibleState\n            label={label}\n            localized={localized}\n            onClick={() => editorRef.current?.focus()}\n            path={path}\n            required={required}\n          />\n        }\n      />\n      <div className={`${fieldBaseClass}__wrap`}>\n        <RenderCustomComponent\n          CustomComponent={Error}\n          Fallback={<FieldError message={jsonError} path={path} showError={showError} />}\n        />\n        {BeforeInput}\n        <CodeEditor\n          defaultLanguage=\"json\"\n          maxHeight={maxHeight}\n          onChange={handleChange}\n          onMount={handleMount}\n          options={{\n            ariaLabel: getTranslation(label || '', i18n) || undefined,\n            ariaRequired: required,\n            ...(editorOptions || {}),\n          }}\n          readOnly={readOnly || disabled}\n          recalculatedHeightAt={recalculatedHeightAt}\n          value={stringValueRef.current}\n          wrapperProps={{\n            id: `field-${path?.replace(/\\./g, '__')}`,\n          }}\n        />\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const JSONField = withCondition(JSONFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Join/index.css

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

package/dist/fields/Password/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/fields/Password/input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AASpD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6FtD,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/fields/Password/input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAYpD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0GtD,CAAA"}