import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import './index.scss';
import { getTranslation } from '@payloadcms/translations';
import { FieldDiffLabel } from '../FieldDiffLabel/index.js';
const baseClass = 'field-diff';
export const FieldDiffContainer = (args)=>{
    const { className, From, i18n, label: { label, locale }, nestingLevel = 0, To } = args;
    return /*#__PURE__*/ _jsxDEV("div", {
        className: `${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`,
        style: nestingLevel ? {
            // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
            '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`
        } : {
            '--left-offset': '50%'
        },
        children: [
            /*#__PURE__*/ _jsxDEV(FieldDiffLabel, {
                children: [
                    locale && /*#__PURE__*/ _jsxDEV("span", {
                        className: `${baseClass}__locale-label`,
                        children: locale
                    }, void 0, false, {
                        fileName: "src/elements/FieldDiffContainer/index.tsx",
                        lineNumber: 46,
                        columnNumber: 20
                    }, this),
                    typeof label !== 'function' && getTranslation(label || '', i18n)
                ]
            }, void 0, true, {
                fileName: "src/elements/FieldDiffContainer/index.tsx",
                lineNumber: 45,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}-content`,
                style: nestingLevel ? {
                    gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`
                } : undefined,
                children: [
                    From,
                    To
                ]
            }, void 0, true, {
                fileName: "src/elements/FieldDiffContainer/index.tsx",
                lineNumber: 49,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/FieldDiffContainer/index.tsx",
        lineNumber: 32,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map