import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { memo } from 'react';
import { FieldLabel, DefaultValue, FieldValueLabel, ExpandableExample } from '../common/index.js';
import { styled } from '../../styled-components.js';
function FieldDetailComponent({ value, label, raw, type = 'other', }) {
    if (value === undefined) {
        return null;
    }
    const _value = raw ? String(value) : JSON.stringify(value);
    return (_jsxs(Wrapper, { children: [_jsxs(FieldLabel, { children: [" ", label, " "] }), type === 'default' ? (_jsx(DefaultValue, { children: _value })) : type === 'example' ? (_jsx(ExpandableExample, { value: _value })) : (_jsx(FieldValueLabel, { children: _value }))] }));
}
export const FieldDetail = memo(FieldDetailComponent);
const Wrapper = styled.div `
  margin-top: var(--spacing-xxs);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xxs);
  flex-wrap: wrap;
`;
//# sourceMappingURL=FieldDetail.js.map