import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Text } from 'ink';
import { useTheme } from '../../hooks/useTheme.js';
/**
 * Label-on-its-own-line, value beneath. Shared across `/agents show`,
 * `/skills show`, `/commands show` etc. so detail pages look the same.
 *
 * The label uses `colors.primary` + bold; the value uses `colors.secondary`
 * and wraps. Pass an optional `marginBottom` to control spacing between
 * stacked fields (default 1 row).
 */
export function InfoField({ label, value, marginBottom = 1, }) {
    const { colors } = useTheme();
    return (_jsxs(Box, { flexDirection: "column", marginBottom: marginBottom, children: [_jsx(Text, { color: colors.primary, bold: true, children: label }), _jsx(Text, { color: colors.secondary, wrap: "wrap", children: value })] }));
}
//# sourceMappingURL=info-field.js.map