{"version":3,"file":"index.js","names":["getTranslation","groupHasName","React","useMemo","useCollapsible","ErrorPill","RenderCustomComponent","FieldDescription","FieldLabel","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","mergeFieldStyles","useRow","fieldBaseClass","useTabs","GroupProvider","useGroup","baseClass","GroupFieldComponent","props","field","admin","className","description","hideGutter","fields","label","indexPath","parentPath","parentSchemaPath","path","permissions","readOnly","schemaPath","schemaPathFromProps","type","name","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","customComponents","AfterInput","BeforeInput","Description","Label","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","styles","_jsxs","filter","Boolean","join","id","replace","style","_jsx","CustomComponent","Fallback","as","localized","required","count","withMessage","margins","parentIndexPath","GroupField"],"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\n\nimport type { GroupFieldClientComponent } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { groupHasName } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport './index.scss'\nimport { useRow } from '../Row/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport const GroupFieldComponent: GroupFieldClientComponent = (props) => {\n const {\n field,\n field: { admin: { className, description, hideGutter } = {}, fields, label },\n indexPath,\n parentPath,\n parentSchemaPath,\n path,\n permissions,\n readOnly,\n schemaPath: schemaPathFromProps,\n } = props\n\n const schemaPath =\n schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path)\n\n const { i18n } = useTranslation()\n const { isWithinCollapsible } = useCollapsible()\n const isWithinGroup = useGroup()\n const isWithinRow = useRow()\n const isWithinTab = useTabs()\n\n const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } =\n useField({ path })\n\n const submitted = useFormSubmitted()\n const errorCount = errorPaths.length\n const fieldHasErrors = submitted && errorCount > 0\n\n const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n return (\n