import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../../../scalars/lib/index.js';
import { InputDiff } from '../../input/subcomponent/input-diff.js';
import { PhoneNumberDiff } from './phone-number-diff.js';
const SplittedPhoneNumberDiff = ({ baseValue, selectValue, inputValue, viewMode, options, prefixOptionFormat, }) => {
    return (_jsx(InputDiff, { className: cn('group'), "data-testid": "phone-number-input-diff", children: viewMode === 'mixed' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('flex flex-1 items-center truncate [&>span]:truncate'), children: _jsx(PhoneNumberDiff, { baseValue: baseValue, selectValue: selectValue, inputValue: inputValue, viewMode: "removal", options: options, prefixOptionFormat: prefixOptionFormat }) }), _jsx("div", { className: cn('mx-3 w-px bg-gray-300 self-stretch') }), _jsx("div", { className: cn('flex flex-1 items-center truncate [&>span]:truncate'), children: _jsx(PhoneNumberDiff, { baseValue: baseValue, selectValue: selectValue, inputValue: inputValue, viewMode: "addition", options: options, prefixOptionFormat: prefixOptionFormat }) })] })) : (_jsx("div", { className: cn('flex flex-1 items-center truncate [&>span]:truncate'), children: _jsx(PhoneNumberDiff, { baseValue: baseValue, selectValue: selectValue, inputValue: inputValue, viewMode: viewMode, options: options, prefixOptionFormat: prefixOptionFormat }) })) }));
};
export { SplittedPhoneNumberDiff };
//# sourceMappingURL=splitted-phone-number.js.map