\n {!!value?.length &&\n value.map((v, index) => (\n
\n ))}\n {!readOnly && (\n
\n )}\n
\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n row: css`\n display: flex;\n flex-direction: row;\n margin-bottom: ${theme.spacing(1)};\n align-items: center;\n `,\n deleteIcon: css`\n margin-left: ${theme.spacing(1)};\n `,\n addButton: css`\n margin-top: ${theme.spacing(1)};\n `,\n});\n","import { css } from '@emotion/css';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport const getReceiverFormFieldStyles = (theme: GrafanaTheme2) => ({\n collapsibleSection: css`\n margin: 0;\n padding: 0;\n `,\n wrapper: css`\n margin: ${theme.spacing(2, 0)};\n padding: ${theme.spacing(1)};\n border: solid 1px ${theme.colors.border.medium};\n border-radius: ${theme.shape.radius.default};\n position: relative;\n `,\n description: css`\n color: ${theme.colors.text.secondary};\n font-size: ${theme.typography.size.sm};\n font-weight: ${theme.typography.fontWeightRegular};\n margin: 0;\n `,\n deleteIcon: css`\n position: absolute;\n right: ${theme.spacing(1)};\n top: ${theme.spacing(1)};\n `,\n addButton: css`\n margin-top: ${theme.spacing(1)};\n `,\n});\n","import React from 'react';\nimport { FieldError, DeepMap, useFormContext } from 'react-hook-form';\n\nimport { Button, useStyles2 } from '@grafana/ui';\nimport { useControlledFieldArray } from 'app/features/alerting/unified/hooks/useControlledFieldArray';\nimport { NotificationChannelOption } from 'app/types';\n\nimport { ActionIcon } from '../../../rules/ActionIcon';\nimport { CollapsibleSection } from '../CollapsibleSection';\n\nimport { OptionField } from './OptionField';\nimport { getReceiverFormFieldStyles } from './styles';\n\ninterface Props {\n defaultValues?: any[];\n option: NotificationChannelOption;\n pathPrefix: string;\n errors?: Array