import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useContext } from 'react';
import { Typography } from '../../Typography';
import { descriptionClassnames } from '../constants';
import { DescriptionContext } from '../DescriptionContext';
import { descriptionNameClassnames } from './constants';
import { DashedSeparator, Wrapper } from './styles';
export const Name = ({ children, color = 'textSecondary', ...props }) => {
    const { leader, separator } = useContext(DescriptionContext);
    return (_jsxs(_Fragment, { children: [_jsx(Wrapper, { className: descriptionNameClassnames.root, "$leader": leader, children: _jsxs(Typography, { ...props, color: color, children: [children, !leader && separator] }) }), leader && _jsx(DashedSeparator, { className: descriptionClassnames.leader })] }));
};
