"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Name = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Typography_1 = require("../../Typography");
const constants_1 = require("../constants");
const DescriptionContext_1 = require("../DescriptionContext");
const constants_2 = require("./constants");
const styles_1 = require("./styles");
const Name = ({ children, color = 'textSecondary', ...props }) => {
    const { leader, separator } = (0, react_1.useContext)(DescriptionContext_1.DescriptionContext);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: constants_2.descriptionNameClassnames.root, "$leader": leader, children: (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { ...props, color: color, children: [children, !leader && separator] }) }), leader && (0, jsx_runtime_1.jsx)(styles_1.DashedSeparator, { className: constants_1.descriptionClassnames.leader })] }));
};
exports.Name = Name;
