@dossierhq/design/lib/components/Message/Message.js

The design system for Dossier.

import { jsx as _jsx } from "react/jsx-runtime";
import { toColorClassName } from '../../config/Colors.js';
import { toClassName } from '../../utils/ClassNameUtils.js';
import { toFlexContainerClassName } from '../../utils/FlexboxUtils.js';
import { toSpacingClassName } from '../../utils/LayoutPropsUtils.js';
export const Message = ({ className, color, children }) => {
    return (_jsx("article", { className: toClassName('message', toColorClassName(color), className), children: children }));
};
Message.displayName = 'Message';
Message.Header = ({ children }) => {
    return _jsx("div", { className: "message-header", children: children });
};
Message.Header.displayName = 'Message.Header';
Message.HeaderTitle = ({ children }) => {
    return _jsx("p", { children: children });
};
Message.HeaderTitle.displayName = 'Message.HeaderTitle';
Message.Body = ({ children }) => {
    return _jsx("div", { className: "message-body", children: children });
};
Message.Body.displayName = 'Message.Body';
Message.FlexBody = ({ children, ...props }) => {
    const flexContainerProps = { flexDirection: 'column', ...props };
    const overridePadding = Object.keys(props).some((it) => it.startsWith('padding'));
    const spacingProps = overridePadding ? { padding: 0, ...props } : props;
    return (_jsx("div", { className: toClassName('message-body', toFlexContainerClassName(flexContainerProps), toSpacingClassName(spacingProps)), children: children }));
};
Message.FlexBody.displayName = 'Message.FlexBody';
//# sourceMappingURL=Message.js.map